The internet browser is today a part of every modern operating system. Whether Internet Explorer, Firefox, Opera, Netscape or Safari - the browser is valued as a versatile display element when surfing the internet.
With AJAX and the W&T Web-IOs the browser can now be used also as a display and control element for dynamic, technical applications.
AJAX stands for Asynchronous JavaScript and XML, whereby the core functionality of AJAX is in being able to continue to communicate with the server after loading a Web site to the browser. Web pages which are constructed in standard HTML can only be refreshed by completely reloading them. AJAX-based JavaScripts on the other hand can exchange or modify individual display elements after the fact.
A critical limitation to this approach is that communication after loading a Web page is only possible with the server from which this Web site was originally loaded.
In terms of displaying Web-IO states, this means that the Web page must be loaded directly from the Web-IO for pure AJAX technique. In other words, using pure AJAX technique it is not possible to dynamically reproduce the states of multiple Web-IOs on a Web page.
An alternative is to use PHP..
The Web page which is intended to reproduce the Web-IO states is loaded from a PHP-capable Web server. To continue updating the display dynamically, a PHP script is then invoked cyclically or as needed. This PHP script opens a connection from the PHP server to the Web-IO and retrieves the needed data from there. The PHP server passes the data to the browser where AJAX is then used to refresh.
The Web application described in the following represents an example of the interplay between AJAX, PHP and the Web-IO.
You don’t have a Web-IO yet but would like to try the example out sometime?
No problem: We will be glad to send you the Web-IO Digital 2xInput, 2xOutput at no charge for 30 days. Simply fill out a sample ordering form, and we will ship the Web-IO for testing on an open invoice. If you return the unit within 30 days, we will simply mark the invoice as paid.
assigned it an IP address - which with WuTility is no problem.
the Web-IO via Web-based management configured for AJAX operation (activate HTTP header)
1. The PHP script
This script is the core of the technique described here. When needed it can be invoked by the browser using an AJAX request. The URL’s for all the necessary parameters are passed:
IP
:
IP address of the Web-IO
PORT
:
TCP port of the Web-IO (normally 80)
COMMAND
:
Possible commands are: Output, input or counter, whereby the number of the input or output may follow the actual command. The Web-IO returns the status of the inputs or outputs.
As an additional command the outputs can be set using outputaccess
PW
:
Administrator or operator password for the Web-IO
MASK
:
Specifies in hexadecimal format which outputs are to be set (only for outputaccess)
STATE
:
Specifies in hexadecimal format to which state the outputs should be set (only for outputaccess)
Invoking for polling the inputs would then look as follows:
General variables and functions Although the Web page is structured for the Web-IO 2xDigital Input, Web-IO 2xDigital Output, the JavaScripts are prepared for Web-IOs with more IOs. This is the purpose of the HexTolnt function, which converts the hexadecimal strings into whole numbers.
The variable SendString is used later for sending data to the Web-IO.
function HexToInt(HexStr)
{ var TempVal;
var HexVal=0;
for( i=0; i<HexStr.length;i++)
{ if (HexStr.charCodeAt(i) > 57)
{ TempVal = HexStr.charCodeAt(i)
- 55;
}
else
{ TempVal = HexStr.charCodeAt(i)
- 48;
}
HexVal=HexVal+TempVal*Math.pow(16,
HexStr.length-i-1);
}
return HexVal;
}
.......
5. Processing operation by the user
The variable SendString is filled with a command which depends on which operating element the user has clicked on or modified.
Setting the outputs The user sets the outputs by using the two check boxes cb_output. The output no. is passed when the function is invoked.
The DataRequest function, which is invoked last, is used for data exchange with the PHP server and thereby with the Web-IO, and is described in greater detail below.
Querying output/input status The user can request the status of the outputs and inputs by clicking on the corresponding button.
function getOutputs()
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=output&PW='+ioform.ed_password.value+'&');
}
function getInputs()
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=input&PW='+ioform.ed_password.value+'&');
}
Read clear counters Also the counter states of the input counters can be read or cleared. The parameter sent is the number of the counter you want to read or clear. If no parameter is sent, the Web-IO reads or clears all counters.
function getCounter(CounterNr)
{ if (CounterNr==undefined)
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=counter&PW='+ioform.ed_password.value+'&');
}
else
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=counter'+CounterNr+'&PW='+ioform.ed_password.value+'&');
}
}
function clearCounter(CounterNr)
{ if (CounterNr==undefined)
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=counterclear&PW='+ioform.ed_password.value+'&');
}
else
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=counterclear'+CounterNr+'&PW='+ioform.ed_password.value+'&');
}
}
6. Communication with the Web-IO
Data exchange with the Web-IO and refreshing of the Web page after it has already been loaded The function shown here contains the essence of AJAX.
The DataRequest function sends to the Web-IO the selected commands which are passed in the SendString in the background, invisible to the user. The integrated function DataReceived accepts the replies from the Web-IO.
The replies from the Web-IO have a specific structure depending on the type.
For the outputs: output;<binary value of the output status in hexadecimal format>
For the inputs: input;<binary value of the input status in hexadecimal format>
For the counters: counterx;<decimal counter state>
or counter;<decimal counter state 0 >; <decimal counter state 0 >;.....if you want to read all counters at the same time.
Depending on the reply received, the receive function branches accordingly and refreshes the display of the objects in the browser window.
function DataRequest(SendString)
{ var xmlHttp;
try
{ // Internet Explorer
if( window.ActiveXObject )
{ xmlHttp = new ActiveXObject(
"Microsoft.XMLHTTP" );
}
// Mozilla, Opera und Safari
else if(window.XMLHttpRequest
)
{ xmlHttp = new XMLHttpRequest();
}
}
// loading of xmlhttp object failed
catch( excNotLoadable )
{ xmlHttp = false;
alert("no knowen browser");
}
if (xmlHttp)
{ xmlHttp.onreadystatechange = DataReceived;
xmlHttp.open("GET",
SendString, true);
xmlHttp.setRequestHeader("Cache-Control",
"no-store, no-cache, must-revalidate");
xmlHttp.setRequestHeader("Expires",
"Sat, 05 Nov 2005 00:00:00 GMT");
xmlHttp.setRequestHeader("Pragma","no-cache");
xmlHttp.send(null);
}
function DataReceived()
{ var HexVal;
var ReceiveStr;
if (xmlHttp.readyState == 4)
{ if (xmlHttp.status
== 200)
{ ReceiveStr
= xmlHttp.responseText;
//Input
handling if
(ReceiveStr.substring(0,5)=='input')
{ HexVal=HexToInt(ReceiveStr.substring(6,10));
for
(i=0;i<MAXIO;i++)
{ if
((HexVal & Math.pow(2,i)) == Math.pow(2,i))
{ ioform.cb_input[i].checked
= true;
}
else
{ ioform.cb_input[i].checked
= false;
}
}
}
//Output
handling
if
(ReceiveStr.substring(0,6)=='output')
{ HexVal=HexToInt(ReceiveStr.substring(7,11));
for
(i=0;i<MAXIO;i++)
{ if
((HexVal & Math.pow(2,i)) == Math.pow(2,i))
{ ioform.cb_output[i].checked
= true;
}
else
{ ioform.cb_output[i].checked
= false;
}
}
}
//Counter
handling
if
(ReceiveStr.substring(0,7)=='counter')
{ var
slength=ReceiveStr.length;
if
(ReceiveStr.substring(7,8)==';')
{ countervalue=ReceiveStr.split(';');
for
(i=0;i<MAXIO;i++)
{
document.getElementById('counter'+i).innerHTML = '<a>'+countervalue[i+1]+'<\/a>';
}
}
else
{ if
(ReceiveStr.substring(9,10)==';')
{ i=(ReceiveStr.substring(7,9));
document.getElementById('counter'+i).innerHTML
= '<a>'+ReceiveStr.substring(10,slength)+'<\/a>';
}
else
{ i=(ReceiveStr.substring(7,8));
document.getElementById('counter'+i).innerHTML
= '<a>'+ReceiveStr.substring(9,slength)+'<\/a>';
}
}
}
}
}
}
}
Although the example shown is tailored to the Web-IO 2x Digital Input, 2x Digital Output, the DataRequest function is also capable of use for Web-IOs having more IOs.
7. Polling
Cyclical polling of particular values In order to enable automatic refreshing of the display, the JavaScript Interval function is used. Depending on the check boxes for output, input and counter polling, the corresponding information is obtained from the Web-IO at a set interval.
var pollingtimer = window.setInterval("Polling()", 500);
function Polling()
{ if (ioform.cb_output_polling.checked==true)
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=output&PW='+ioform.ed_password.value+'&');
}
if (ioform.cb_input_polling.checked==true)
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=input&PW='+ioform.ed_password.value+'&');
}
if (ioform.cb_counter_polling.checked==true)
{ DataRequest('webiorequest.php?IP='+ioform.ed_ip.value+'&PORT='+ioform.ed_port.value
+'&COMMAND=counter&PW='+ioform.ed_password.value+'&');
}
}
The desired interval can be entered in the corresponding text field and is adjusted by clicking on the Set Interval button.
function setPolInterval()
{ var intervaltime=parseInt(ioform.ed_interval.value)
clearInterval(pollingtimer);
pollingtimer = window.setInterval("Polling()",
intervaltime);
}
The example supports all common functions of the Web-IO, optimized for the Web-IO 2x Digital Input, 2x Digital Output. For the other Web-IO models you may have to make adaptations to the example Web page. Additional program examples for socket programming can be found on the Tool pages for the Web-IO. A detailed description for the socket interface of the Web-IO Digital models can be found in the reference manual.
