Web Host

RTES32 is ready to interface with web browsers.

Click "Communications" on the menu bar to choose the folder that will be the Host Directory and contain your HTML files. Your selection is saved in the 'registry'.

RTES32 looks for the following register names on startup and maintains them:

SOCKET$ This register will show how many TCP/IP sockets are currently in use.
CLIENT$ This register and the next 3 will show the 4 numbers representing the IP address of the last TCP/IP connection made.

Using HTML

HTML files used to interface with RTES must

have the .htm or .html extension

reside in the directory specified as the Host Directory.

As RTES32 delivers your HTML files to the browser, it looks for the following special "tags".

@@variable definition@

The text contained between @@ and @ uses the same format as the report generator.

[[condition]text]

The expression between the second [ and the first ] is evaluated as a boolean. "text" is included if the result of the evaluation is true. (Click here for more details.)

!!command!

The text between the second and last ! is assumed to be an RTES command.

Example : !!LET HITS=HITS+1!

Use of the POST method

When defining the FORM, ACTION="page.htm" causes page.htm to be displayed when the form is submitted.
A pair of NAME and VALUE define the RTES command to be executed.

Examples :

(1) Start/stop:
<form method="post" action="ccmd.htm"> <input type="hidden" NAME="LET PUMP=" VALUE="PUMP'"> <input type="submit" VALUE="Pump start/stop"> </form>

(2) Set to a numeric value:
<form method="post" action="ccmd.htm"> <input type="text" NAME="SET LP" SIZE="10"> <input type="submit" VALUE="Set Line Pressure"> </form>

(3) Select value - Radio button style:
<form method="post" action="ccmd.htm"> <input type="radio" NAME="SET FT" VALUE="0">GAS <input type="radio" NAME="SET FT" VALUE="1">OIL <input type="submit" VALUE="Select product"> </form>

(4) Select value - Menu style:
<FORM METHOD="post" ACTION="cause.htm"> <SELECT NAME="SET M1_TSC" SIZE="1"> <OPTION VALUE="0" SELECTED>Unknown</OPTION> <OPTION VALUE="1">Tooling</OPTION> <OPTION VALUE="2">Mechanical</OPTION> <OPTION VALUE="3">Electrical</OPTION> <OPTION VALUE="4">Maintenance</OPTION> <OPTION VALUE="5">Idle</OPTION> <OPTION VALUE="6">Shortage</OPTION> </SELECT> <INPUT TYPE="submit" VALUE="Enter S/D cause"> </FORM>

(5) Assign a text to a variable:
<form method="post" action="text.htm"> <input type="text" NAME="TEXT TXT_EXMPLE" SIZE="50"> <input type="submit" VALUE="Submit new text"> </form>

Password Authorization Protocol

On startup, RTES32 looks for a register named PAP$.
When that Register is set to 1, a user id and password are requested to access the html documents via the web browser. The user id must match the text at Register PAP$ and the password must match the text at the next Register. If you change these texts, you must click "Run Configuration" under "Communications" on the menu bar for the change to take effect.

Using DHTML

RTES32 (and RTES) support a set of commands that allow the exchange of dynamic data with a web page where the variables are accessible via DOM, using Javascript.

DOM stands for Document Object Model and allows access to every entity on a web page. All browsers support DOM. All it takes is a mechanism that retrieves the appropriate data from the server and assigns it to the element it belongs to.

We supply a javascript named liveweb.js that allows you to easily use these techniques without any knowledge of scripting. All you have to do is follow these guidelines that we will apply to an example.

(1) Assign an id to each field you want to make dynamic.
The variable name may be used as id, since it follows the same rules (unique and starts with a letter). If you are using the same variable more than once in the same frame, then you could append _1, _2, to differentiate the id's so that the values go to the specific places. You may assign an id inside any HTML tag such as <td ,<div, <img, <a etc.
If the element does not have a tag, then you would create a generic <span
<table><tr> <td>Current flow</td><td id=FLOW> </td></tr> </table><P> We are currently at <span id=LEVEL> </span>feet<br> The level is <span id=STATUS> </span><br>
(2) The data request will be sent to the server as an array named myVars. Make a list that assigns the variable definitions we need to get from the server the element of the array.
Notice that the @@ and @ are replaced by " and there is a semi-colon at the end of the line
myVars[0]="FLOW REAL 7 1"; myVars[1]="LEVEL NUMBER"; myVars[2]="STATUS TEXT 0";
(3) The data will be received from the server in an array names newData. Make a list that assigns the new data received to the respective id's.
inner.HTML is a property of the element defined by the id. Other properties my be used as we will see further on in the samples provided.
Note the semi-colon at the end of each line.
FLOW.innerHTML=newData[0]; LEVEL.innerHTML=newData[1]; STATUS.innerHTML=newData[2];
(4) Include the 2 lists you wrote between the <head> and </head> HTML tags of your document. Add the "body" tags and include the "onload" in the opening tag.
<html> <head> <title>RTES - liveweb Sample #1</title> myVars[0]="FLOW REAL 7 1"; myVars[1]="LEVEL NUMBER"; myVars[2]="STATUS LIST 0 STATUS 0"; FLOW.innerHTML=newData[0]; LEVEL.innerHTML=newData[1]; STATUS.innerHTML=newData[2]; </head> <body onload="start()"> <table><tr> <td>Current flow</td><td id=FLOW> </td></tr> </table><P> We are currently at <span id=LEVEL> </span>feet<br> The level is <span id=STATUS> </span><br> </body> </html>
(5) Add the following lines just above the 2 lists.
The updateinterval is expressed in milliseconds. You may adjust it if you wish.
<script type="text/javascript"> var newData = new Array(); var myVars = new Array(); updateInterval=20;
(6) Add the following lines just between the 2 lists
function display() {
(7) Add the following lines after the second list - still before the </head>
} </script> <script language="javascript" src="liveweb.js"></script>
(8) Copy liveweb.js to your webhost folder(directory).

This is the complete document for this example:

<html> <head> <title>RTES - liveweb Sample #1</title> <script type="text/javascript"> var newData = new Array(); var myVars = new Array(); updateInterval=20; myVars[0]="FLOW REAL 7 1"; myVars[1]="LEVEL NUMBER"; myVars[2]="STATUS LIST 0 STATUS 0"; function display() { FLOW.innerHTML=newData[0]; LEVEL.innerHTML=newData[1]; STATUS.innerHTML=newData[2]; } </script> <script language="javascript" src="liveweb.js"></script> </head> <body onload="start()"> <table><tr> <td>Current flow</td><td id=FLOW> </td></tr> </table><P> We are currently at <span id=LEVEL> </span>feet<br> The level is <span id=STATUS> </span><br> </body> </html>

Note: Other scripts are available and many more are being written and tested to produce various functions such as scada style functions. Please contact us for details.