pCOWeb
+030220966 – rel. 1.1 – 12.12.2017
74
EXAMPLE: THE PW_DEMO.HTML PAGE
Below is a description of the ‘pw_demo.html’ page, available by accessing
pCOWeb
via FTP at the path /usr/local/root/config. For further information on the
creation of the HTML pages, go to
http://ksa.carel.com/
, under the section
pCOWeb
.
PW_DEMO.HTML PAGE
The following row is useful for having the page validated by automatic software, so as to check the correct usage of the language: it declares the type of
document, and the corresponding standard and version.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
The following row opens the section that will contain the HTML statements. This is closed by </html>.
<html>
The following rows in standard html language simply represent comments. The last of the three rows is nonetheless essential for the
pCOWeb
pages and
MUST be included in the page (see the start of APPENDIX G on page 68). This tells
pCOWeb
which translator must be used for the proprietary tags.
pCOWeb
currently features just one tag translator for CAREL tags, so the row is always:
<!--tagparser="/pcotagfilt"-->
If this row is not entered, no CAREL proprietary tags will work.
<!-- The tag filter must be specified in the first 10 lines,
after the '<html>' statement, with the syntax: -->
<!--tagparser="/pcotagfilt"-->
NOTE
Unlike the comment, the position of the row in the page is irrelevant.
The following row opens the HEAD section, which will contain some special html functions that have no effect on the display of the page.
<head>
The
<meta...
row tells the browser to use a certain set of characters and other properties.
The
<link...
row loads the style sheets that will be used for formatting the page.
The
<title>title... </title>
row attributes the title to the html page window opened by the browser.
<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
<link rel="stylesheet" href="style.css" type="text/css">
<title>pCOWeb Demo Page</title>
The following row closes the HEAD section.
</head>
The following row selects the colour used for the background of the page.
<body bgcolor='#ffffff'>
The following row writes the text
pCOWeb Demo Page
, in h1 font size, with centred horizontal alignment.
This is followed by the line break,
<br>.
<h1 style="text-align: center">pCOWeb Demo Page</h1>
<br>
The following row tells the browser that it must draw an area for acquiring data entered by the user, and, when confirmed, send the data to the
“pw_demo.html” page. The list of controls for this area ends with the </form> command.
The <center> command defines the start of an area with centred horizontal alignment, the <table> command places the subsequent objects in a table, the
<tr> command defines a new row in a table, the <td> command defines a new cell in a table.
Note that the page has the structure as a general table, in turn containing three tables, each of which contains 10
pCO
variables.
For each variable, the html “input” command is used together with the CAREL “var” tag.
<form method="GET" action="pw_demo.html">
<center>
<table>
general table containing the following three tables
<tr>
<td>
first cell in the general table: table of digital variables
<table style="font-size: 12px; padding: 0px; margin: 0px; padding-right: 30px; border-right: 1px solid #cccccc"
cellpadding="0">
<tr>
<td style="font-size: 14px; font-weight: bolder; height: 40px; text-align: center" colspan="2">Digital
Variables</td>
</tr>
<tr>
<td style="width: 90px">Var 1:</td>
<td><input type="text" name="?script:var(0,1,1,0,1)" value="<%var(0,1,1)%>"></td>
</tr>
<tr>
<td>Var 2:</td>
<td><input type="text" name="?script:var(0,1,2,0,1)" value="<%var(0,1,2)%>"></td>
</tr>
…………
<tr>
<td>Var 10:</td>
<td><input type="text" name="?script:var(0,1,10,0,1)" value="<%var(0,1,10)%>"></td>
</tr>
</table>
</td>
