54
ENG
c.pCO sis
tem
a
+
0300057EN
re
l. 1.2 - 29.05.2017
10. WEB SERVER AND TERA CLOUD PLATFORM
c.pCO controllers family features an integrated web server that can be
completely customised by the user. The c.pCO web server can support HTML
and JavaScript standards. Custom web pages can be copied in the public
file system, in the /HTTP/directory. c.pCO implements some CGI (Common
Gateway Interface) scripts that allow to dynamically read and write application
variables in order to create dynamic content. A freely customisable package
called “Web kit” is available to simplify the creation of custom webpages for
the c.pCO. The Web kit comprises sample HTML pages and JavaScript libraries
for managing dynamic CGI, fully exploiting the potential of the c.pCO web
server. In particular, the examples provided can be used to:
1.
display the contents of the pGD1 on the browser pages (pGDWeb,
see paragrap 10.3)
2.
display the list of public variables in the application program, allowing
the values to be read and write;
3.
display the network status, with the addresses of the connected
devices;
4.
plot data on graphs, both in real time as well as extracted from
logged data.
10.1 Web kit download and installation
The freely customisable web package called “Web kit” can be downloaded in
ksa.carel.com. The package must be saved in the c.pCO public file system:
1.
unzip the .zip file;
2.
copy the contents to the /HTTP/ directory in the c.pCO file system by
using the USB device port or FTP protocol through Ethernet (see picture
below).
3.
Disconnect Usb cable from USB device port.
Fig. 10.a
4.
After copy of the Web kit package into folder /HTTP/, it is possible to
access web pages by using a web browser. It is sufficient to connect
the c.pCO and the computer in the same local network and write in
the browser address bar the c.pCO IP address (see paragraph 9.2).
The web pages are independent from application software loaded into
the controller, and they are developed to be customized according to the
specific application.
Fig. 10.b
10.2 Contents of the package
Directory Sub-directory Contents
imgs
Images used by all the pages
lib
File libraries: CSS (Cascaded Style Sheet) and
JavaScript for dynamic variable handling, graphs
from logs and graphs in real time. Default CSS
file (optimised for browser with 1024 pixel
resolution)
calendar
Graphic elements (calendar) used by the log
pages
jscolor
Graphic elements (color picker) used by the log
pages
pgd
pGD web interface: do not delete or remove files
from here. Index.html can be customised, so as to
change the pGD eeb screen.
imgs
Image files used by the pGD web interface: do
not delete or remove files from here
favicon.ico
Browser “favourite” icons, can be completely
customised
Tab. 10.a
10.3 Web pGD
The virtual terminal shows the information displayed on the pGD terminal
connected to the c.pCO in real time.
2
1
3
4
Fig. 10.c
Key
1
Active area (394 x 198 pixels)
2
Buttons that can be activated by clicking the mouse
3
Function to press multiple buttons
4
LEDs
Customisation notes:
•
The virtual pGD is a matrix of 132 x 64 elements measuring 3 x 3 pixels;
•
The background for the LCD matrix measures 394 x 198 pixels;
•
The background colour is black (RGB 0, 0, 0), the colour of the display is
light blue (RGB 106, 188, 231);
•
The image of the pGD1 is 870 x 455, the background starts at (x, y =
238, 128) and ends at (x, y = 632, 326);
•
The width of the buttons is 27%, the heights are 20%, 19%, 19%, 19%, 23%:
these proportions must be maintained to change the background image.
See the comments in: /pgd/index.htm for further details on customising
this page.
10.4 Variables table
The variables table includes the public variables exposed by the
application sofftware. Names and descriptions are defined in c.suite
development enviroment.