Applikation zum Web-IO Digital:

Web-IO Digital - mit AJAX im Browser visualisieren

Weitere Links

Der Internet Browser ist heute Bestandteil aller modernen Betriebssysteme. Egal ob Internet Explorer, Firefox, Opera, Netscape oder Safari - beim Surfen im Internet wird der Browser als vielseitiges Anzeigeinstrument geschätzt.

Mit AJAX und den W&T Web-IOs kann der Browser nun auch als Anzeige- und Steuerelement für dynamische, technische Anwendungen benuzt werden.

AJAX steht für Asynchronus JavaScript and XML, wobei die Kernfunktionalität von AJAX darin besteht, auch nach Laden einer Webseite in den Browser weiter mit dem Server zu kommunizieren. Webseiten, die in Standard HTML aufgebaut werden, können zur Aktualisierung nur komplett neu geladen werden. AJAX-basierende JavaScripte hingegen können einzelne Anzeigeelemente nachträglich austauschen oder verändern.

Vergleich Ajax-Technik und Standard HTTP

Die im Folgenden beschriebene AJAX-Anwendung zeigt beispielhaft das Zusammenspiel von AJAX und Web-IO.

Vorbereitungen

mit Strom versorgt,
Eingänge und Ausgänge beschaltet
an Ihr Netzwerk angeschlossen
mit einer IP-Adresse versehen - mit WuTility kein Problem
Das Web-IO via Web-based Management für AJAX-Betrieb konfiguriert ( HTTP-Header aktivieren )

Zusammenstellen der verschiedenen Bedienelemente und Anzeigeobjekte auf der Webseite

Bei der Benennung der einzelnen Objekte bzw. der aufzurufenden Funktionen ist es hilfreich, sinngebende Namen zu verwenden.

1. HTML-Grundaufbau der Webseite Platzieren der Bedien- und Anzeigeelemente

Zur besseren Strukturierung werden die einzelnen Elemente in Tabellen untergebracht und das Ganze als Formular deklariert. Das <user.htm> Tag gehört nicht zur Standard HTML Syntax und dient dem Web-IO zur Identifikation der Webseite. Das Tag wird vor dem Hochladen in den Browser ausgefiltert.


<user.htm>
	<html>
		<head>
			<title>Web-IO AJAX-Client</title>
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
			<STYLE type=text/css>
				TD {
				COLOR: #000000;
				FONT-FAMILY: Verdana,Arial,Helvetica;
				FONT-SIZE: 10pt;
					}
			</STYLE>
		</head>
		<body bgcolor="#FFFFFF" text="#000000" link="#000000">
			<form name="ioform">
				<table width="500" border="1" height="144" bgcolor="#CCCCCC">
					<tr>
						<td>
							<table width="500">
								<tr>
									<td colspan="6">
										<b>Input/Output Control &lt;/b>
									</td>
								</tr>
								<tr>
									<td width="100">
										<input type="checkbox" name="cb_output" onclick="setOutput(0)">Output 0
									</td>
									<td width="100">
										<input type="checkbox" name="cb_input">Input 0
									</td>
									<td width="100">
										<div align="right">Counter 0 </div>
									</td>
									<td width="*" bgcolor="#FFFFFF" id="counter0">
									</td>
									<td width="55">
										<input type="button" value="Read" onclick="getCounter(0)">
									</td>
									<td width="55">
										<input type="button" value="Clear" onclick="clearCounter(0)">
									</td>
								</tr>
								<tr>
									<td width="100">
										<input type="checkbox" name="cb_output" onclick="setOutput(1)"> Output 1
									</td>
									<td width="100">
										<input type="checkbox" name="cb_input"> Input 1
									</td>
									<td width="100">
										<div align="right">Counter 1 </div>
									</td>
									<td width="*" bgcolor="#FFFFFF" id="counter1">
									</td>
									<td width="55">
										<input type="button" value="Read" onclick="getCounter(1)">
									</td>
									<td width="55">
										<input type="button" value="Clear" onclick="clearCounter(1)">
									</td>
								</tr>
								<tr>
									<td width="100" height="29">
										<input type="button" value="Read all" onclick="getOutputs()">
									</td>
									<td width="100" height="29">
										<input type="button" value="Read all" onclick="getInputs()">
									</td>
									<td width="100" height="29">
										<div align="right">Counter all &lt;/div>
									</td>
									<td width="*" height="29">
									</td>
									<td width="55" height="29">
										<input type="button" value="Read" onclick="getCounter()">
									</td>
									<td width="55" height="29">
										<input type="button" value="Clear" onclick="clearCounter()">
									</td>
								</tr>
								<tr>
									<td width="100">
										<input type="checkbox" name="cb_output_polling">Polling
									</td>
									<td width="100">
										<input type="checkbox" name="cb_input_polling"> Polling
									</td>
									<td width="100">
										<div align="right">
										<input type="button" value="Set Interval" onclick="setPolInterval()">
										</div>
									</td>
									<td width="*" >
										<input type="text" name="ed_interval" value="500" maxlength="6" size="9">
									</td>
									<td colspan="2">
										<input type="checkbox" name="cb_counter_polling"> Polling
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
				<table width="500" border="1" bgcolor="#CCCCCC" >
					<tr>
						<td height="35">
							<table width="500">
								<tr>
									<td width="78">Password</td>
									<td width="410">
										<input type="text" name="ed_password">
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</form>
	....

2. Globale JavaScript Deklarationen Allgemeine Variablen und Funktionen
Obwohl die Webseite für das Web-IO 2xDigital Input, 2xDigital Output aufgebaut ist, sind die JavaScripte für Web-IOs mit mehr IOs vorbereitet. Deshalb auch die Funktion HexToInt, die hexadezimale Strings in Ganzzahlen wandelt.

Die Variable SendString wird später für den Datenversand an das Web-IO genutzt.
```
...
var MAXIO=2;
var SendString;

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;
	}
```

3. Bedienung durch den Anwender verarbeiten

In Abhängigkeit davon, welches Bedienelement der Webseite der Anwender angeklickt oder verändert hat, wird die Variable SendString mit dem entsprechenden Kommando gefüllt.

Setzen der Outputs

Das Setzen der Outputs wird dem Anwender über zwei Checkboxen cb_output ermöglicht. Bei Aufruf der Funktion wird die Nr. des Outputs übergeben.

Die Funktion DataRequest, die abschließend aufgerufen wird,dient dem Datenaustausch mit dem Web-IO und ist im weiteren Verlauf noch näher beschrieben.


			function setOutput(OutputNr)
				{
				if (ioform.cb_output[OutputNr].checked==true)
					{
					SendString='outputaccess'+OutputNr+'?PW='+ioform.ed_password.value+'&State=ON&';
					}
				else
					{
					SendString='outputaccess'+OutputNr+'?PW='+ioform.ed_password.value+'&State=OFF&';
					}
				DataRequest(SendString);
				}

Output/Input-Statusabfragen

Den Status der Outputs und Inputs kann der Anwender durch Anklicken des zugehörigen Buttons anfordern.


			function getOutputs()
				{
				DataRequest('output?PW='+ioform.ed_password.value+'&');
				}


			function getInputs()
				{
				DataRequest('Input?PW='+ioform.ed_password.value+'&');
				}

Counter abfragen löschen

Auch die Zählerstände der Input-Counter lassen sich abfragen bzw. löschen. Als Parameter wird die Nr. des Counters übergeben, der gelesen bzw. gelöscht werden soll. Wenn kein Parameter übergeben wird, liest bzw. löscht das Web-IO alle Counter.


			function getCounter(CounterNr)
				{
				if (CounterNr==undefined)
					{
					DataRequest('counter?PW='+ioform.ed_password.value+'&');
					}
					else
					{
					DataRequest('counter'+CounterNr+'?PW='+ioform.ed_password.value+'&');
					}
				}


			function clearCounter(CounterNr)
				{
				if (CounterNr==undefined)
					{
					DataRequest('counterclear?PW='+ioform.ed_password.value+'&');
					}
				else
					{
					DataRequest('counterclear'+CounterNr+'?PW='+ioform.ed_password.value+'&');
					}
				}

4. Kommnunikation mit dem Web-IO

Datenaustausch mit dem Web-IO und Aktualisierung der Webseite nachdem diese bereits geladen wurde.

Die hier vorgestellte Funktion beinhaltet das, was AJAX ausmacht.
Die Funktion DataRequest sendet im Hintergrund, für den Anwender unsichtbar, die ausgewählten und in SendString übergebenen Kommandos an das Web-IO. Die integrierte Funktion DataReceived nimmt die Antworten des Web-IO entgegen.
Die Antworten des Web-IO haben je nach Type einen spezifischen Aufbau.
Für die Outputs: output;<Binärwert des Outputstatus im hexadezimalen Format>
Für die Inputs: input;<Binärwert des Outputstatus im hexadezimalen Format>
Für die Counter: counterx;<dezimaler Zählerstand>
oder counter;<dezimaler Zählerstand 0 >; <dezimaler Zählerstand 0 >; ...... wenn alle Counter auf einmal gelesen werden sollen.
Je nach empfangener Antwort verzweigt die Empfangsfunktion in den entsprechenden Teil und aktualisiert die Anzeige der Objekte im Browserfenster.


	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>';
							}
						}
					}
				}
			}
		}
}

Auch wenn das gezeigte Beispiel für das Web-IO 2x Digital Input, 2x Digital Output zugeschnitten ist, ist die Funktion DataRequest auch für Web-IO mit mehr IOs vorbereitet.

5. Polling

Zyklisches Abfragen bestimmter Werte Um auch eine vollautomatische Aktualisierung der Anzeige zu ermöglichen, wird die JavaScript Interval Funktion benutzt. In Abhängigkeit der Checkboxen für Output-, Input- und Counter-Polling werden die entsprechenden Information im eingestellten Intervall vom Web-IO abgerufen.


var pollingtimer = window.setInterval("Polling()", 500);
function Polling()
	{
	if (ioform.cb_output_polling.checked==true)
		{
		DataRequest('output?PW='+ioform.ed_password.value+'&');
		}
	if (ioform.cb_input_polling.checked==true)
		{
		DataRequest('input?PW='+ioform.ed_password.value+'&');
		}
	if (ioform.cb_counter_polling.checked==true)
		{
		DataRequest('counter?PW='+ioform.ed_password.value+'&');
		}
	}

Das gewünschte Intervall kann in das entsprechende Textfeld eingegeben werden und wird durch Anklicken des Set Interval Button angepasst.


function setPolInterval()
	{
	var intervaltime=parseInt(ioform.ed_interval.value)
	clearInterval(pollingtimer);
	pollingtimer = window.setInterval("Polling()", intervaltime);
	}

Einspielen der Webseite in das Web-IO

AJAX basierende Webseiten funktionieren nur dann, wenn die Daten zur Aktuallisierung vom gleichen Server kommen wie die Webseite selbst. Es ist nicht möglich die Webseite von Server A zu laden, aber die Daten von Server B zu abzurufen.

Ist die Programmierung der Webseite abgeschlossen, muss diese in das Web-IO hochgeladen werden. Das geht bequem mit wenigen Mouse-Klicks über das Web-Interface des Web-IO:

Das Beispiel unterstützt alle gängigen Funktionen des Web-IO, optimiert für das Web-IO 2x Digital Input, 2x Digital Output PoE. Für die anderen Web-IO Modelle müssen ggf. Anpassungen an der Beispiel-Webseite vorgenommen werden. Weitere Programmbeispiele zur Socket-Programmierung finden Sie auf den Tool-Seiten zum Web-IO. Eine detaillierte Beschreibung zu den Kommandos der Web-IO Digital Modelle finden Sie im Referenzhandbuch.

Programmbeispiel herunterladen

Sie haben noch kein Web-IO und möchten das vorgestellte Beispiel einfach mal ausprobieren?

Kein Problem: Wir stellen Ihnen das Web-IO Digital 2xInput, 2xOutput gerne kostenlos für 30 Tage zur Verfügung. Einfach Musterbestellung ausfüllen, wir liefern das Web-IO zum Test auf offene Rechnung. Wenn Sie das Gerät innerhalb von 30 Tagen zurück schicken, schreiben wir die Rechnung komplett gut.

Zur Musterbestellung