Tutorial al Web-IO digitale:
Controllare Web-IO digitale da un sito internet proprio con AJAX
I modelli Web-IO digitale 4.0 offrono la possibilità di realizzare un proprio sito internet e di caricarlo nel Web-IO. Così l’interfaccia di attivazione e monitoraggio può essere realizzata secondo le proprie esigenze.
L’elemento fondamentale di queste pagine internet dinamiche è la tecnica Di recuperare informazioni dal Web-IO con l’aiuto di JavaScript attraverso richieste HTTP e di adattare il sito internet già caricato dal punto di vista dei contenuti alla copia del processo del Web-IO.
Questa tecnica di programmazione viene chiamata Asynchronous JavaScript and XML, in breve AJAX.
Il seguente esempio mostra la struttura di un sito internet molto semplice e le necessarie funzioni per la visualizzazione degli stati IO per il Web-IO digitale 4.0 2x input, 2x output.
Preparativi
- Mettere sotto tensione il Web-IO e collegare gli IO
- Collegare il Web-IO alla rete
- Assegnazione di indirizzi IP
Nel Web-IO nell’area Vie di comunicazione >> Web-API attivare il punto autorizzare richiesta HTTP e autorizzare gli output per l’attivazione
Struttura di base del proprio sito internet
L’impalcatura di base HTML di questa pagina è così:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Web-IO Digital, User</title>
<style type="text/css">
* { font-family:arial; }
table { font-size:14px; text-align:center; padding-left:5px; padding-right:5px;}
.borderLeft { border-left:1px solid #000000; }
.button { font-size:9px; width:40px; }
.name { font-size:20px; font-weight:bold; text-align:center }
.table { background-color:#d6e8ff; border-collapse:collapse; border:1px solid #000000; }
.whiteBack { background-color:#ffffff; }
</style>
<script language="JavaScript" type="text/javascript">
........
........
</script>
</head>
<body onload="CommandLoop()">
<form>
<div align="center">
<h2>Web-IO 0</h2>
<span>Password: </span>
<input id="pw" type="password" maxlength="31" size="20"">
</div>
</form>
<table align="center" class="table">
<tr>
<td>input 0</td>
<td id="input0">OFF</td>
<td id="counter0">0</td>
<td>
<input class="button" onclick="clearCounter(0);" type="button" value="Clear">
</td>
<td class="borderLeft">output 0</td>
<td id="output0">OFF</td>
<td>
<input class="button" onclick="setOutput(0,1);" type="button" value="ON">
<input class="button" onclick="setOutput(0,0);" type="button" value="OFF">
</td>
</tr>
<tr class="whiteBack">
<td>input 1</td>
<td id="input1">OFF</td>
<td id="counter1">0</td>
<td>
<input class="button" onclick="clearCounter(1);" type="button" value="Clear">
</td>
<td class="borderLeft">output 1</td>
<td id="output1">OFF</td>
<td>
<input class="button" onclick="setOutput(1,1);" type="button" value="ON">
<input class="button" onclick="setOutput(1,0);" type="button" value="OFF">
</td>
</tr>
</table>
</body>
</html>
qui non vogliamo dilungarci oltre sull’area head e sulle informazioni style. I contenuti dell’area script vengono descritti in seguito. Sono importanti nell’area body le denominazioni id sulle quali nelle funzioni JavaScript vengono attivati gli oggetti e le celle delle tabelle. Attraverso onclick viene fissata la funzione da aprire ai tasti. Come parametro viene trasmesso il numero dei counter e degli output. Negli output il secondo parametro indica lo stato (0=OFF, 1=ON).
Mantenendo questa sistematica si può adattare l’esempio, senza modificare le funzioni JavaScript aggiungendo ulteriori righe delle tabelle ad altri modelli Web-IO.
Variabili e funzioni globali nel JavaScript
Innanzitutto è necessario dichiarare alcune variabili globali.
var MaxI = 2;
var MaxO = 2;
var ApplicationStep = 0;
var Interval = 500;
// Converting hexadecimal string to Integer
function HexToInt(HexStr)
{ var TempVal;
var HexVal=0;
for( var 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;
}
Inviare richieste HTTP (requests) e ricevere risposte HTTP (reply)
// Sending command lines to Web-IO and receiving IO State
function DataRequest(SendString)
{ var xmlHttp;
if( window.ActiveXObject ) // Internet Explorer
{ xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else if(window.XMLHttpRequest ) // Mozilla, Opera und Safari
{ xmlHttp = new XMLHttpRequest();
}
if (xmlHttp)
{ xmlHttp.onreadystatechange = function()
{ if (xmlHttp.readyState == 4)
{ if (xmlHttp.status == 200)
{ if (xmlHttp.responseText.length > 0)
{ updateDisplay(xmlHttp.responseText);
}
xmlHttp=null;
}
}
}
xmlHttp.open("GET", SendString, true);
xmlHttp.setRequestHeader("If-Modified-Since", "Thu, 1 Jan 1970 00:00:00 GMT");
xmlHttp.send(null);
}
}
La gestione delle richieste HTTP e delle risposte HTTP è realizzata dalla funzione DataRequest
. Purtroppo Internet Explorer utilizza per l’elaborazione di richieste HTTP altri meccanismi rispetto agli altri browser. Per questo la funzione verifica innanzitutto in quale browser viene eseguito il sito web. La richiesta HTTP trasmessa come SendString
viene quindi inviata al server e al Web-IO, dal quale la pagina web è stata anche caricata. La risposta, ovvero la risposta HTTP viene quindi trasferita alla funzione UpdateDisplay
.
Richiesta ciclica di input, output e counter
// Preparing command lines for cycle sending
function CommandLoop()
{ var CommandString =’’;
var IOPassword = document.getElementById(’pw’).value;
ApplicationStep++;
switch(ApplicationStep)
{ case 1:
CommandString = ’input’;
break;
case 2:
CommandString = ’output’;
break;
case 3:
CommandString = ’counter’;
ApplicationStep = 0;
break;
}
DataRequest(CommandString + ’?PW=’ + IOPassword + ’&’);
maintimer = setTimeout("CommandLoop()", Interval);
}
La funzione CommandLoop
viene avviata attraverso il parametro onload nella body non appena il sito internet è completamente caricato. La funzione invia attraverso la funzione DataRequest
alternatamente le richieste HTTP per la richiesta di input, output e counter ai Web- IO e si riapre autonomamente in modo ritardato. In questo modo vengono aggiornati continuamente a intervalli fissi gli stati IO.
Collegamento degli output
// Set Output to ON (requested from User)
function setOutput(OutNo, OutVal)
{ var IOPassword = document.getElementById(’pw’).value;
var CommandString = ’outputaccess’+OutNo+’?PW=’+IOPassword+’&State=OFF&’;
if(OutVal>0)
{ CommandString = ’outputaccess’+OutNo+’?PW=’+IOPassword+’&State=ON&’;
}
DataRequest(CommandString);
}
Cliccando sui relativi tasti si apre la funzione setOutput
e vengono trasmessi i numeri, dell’output e dello stato da attivare. Attraverso la funzione DataRequest
viene inviata la necessaria richiesta HTTP al Web-IO.
Cancellazione dei counter
// Set Counter to 0 (requested from display)
function clearCounter(CounterNo)
{ var IOPassword = document.getElementById(’pw’).value;
DataRequest(’counterclear’+CounterNo+’?PW=’+IOPassword+’&’);
}
Cliccando sui relativi tasti si apre la funzione clearCounter
e viene trasmesso il numero del Web-IO e dell’input.
Aggiornamento dei contenuti delle pagine web
// Dynamic update of the display depending on IO State
function updateDisplay(ReceiveStr)
{ var HexVal;
var State;
var ReceiveData = ReceiveStr.split(’;’)
// Display Intput State
if (ReceiveData[ReceiveData.length - 2].substring(0, 1) == ’i’)
{ HexVal = HexToInt(ReceiveData[ReceiveData.length - 1]);
for (var i = 0; i < MaxI; i++)
{ State = false;
if ((HexVal & Math.pow(2, i)) == Math.pow(2, i))
{ State = true;
}
document.getElementById(’input’+i).firstChild.data = ( !State ) ? ’OFF’ : ’ON’;
}
}
// Display Output State
if (ReceiveData[ReceiveData.length - 2].substring(0, 1) == ’o’)
{ HexVal = HexToInt(ReceiveData[ReceiveData.length - 1]);
for (var i = 0; i < MaxO; i++)
{ State = false;
if ((HexVal & Math.pow(2, i)) == Math.pow(2, i))
{ State = true;
}
document.getElementById(’output’+i).firstChild.data = ( !State ) ? ’OFF’ : ’ON’;
}
}
//Display Counter
if (ReceiveData.length - MaxI - 1 >= 0)
{ if (ReceiveData[ReceiveData.length - MaxI - 1].substring(0, 1) == ’c’)
{ for (var i = 0; i < MaxI; i++)
{ document.getElementById(’counter’ + i).innerHTML = ReceiveData[ReceiveData.length - MaxI + i]
}
}
}
//Display cleared Counter
if (ReceiveData[ReceiveData.length - 2].substring(0, 1) == ’c’)
{ document.getElementById(’counter’+ ReceiveData[ReceiveData.length - 2].substring(7, ReceiveData[ReceiveData.length - 2].length)).innerHTML = ReceiveData[ReceiveData.length - 1];
}
}
Come risposta a una richiesta HTTP il Web-IO invia sempre il comando effettivo e uno o più parametri separati da punto e virgola.
Per un’interrogazione input questo è p. es. input;1
.
La funzione UpdateDisplay
scompone per mezzo di split
la stringa trasmessa in una serie di stringhe. Per l’esempio input si genera una serie con le prime variabili del campo input
e le seconde 1
. Attraverso le prime lettere delle prime variabili del campo si constata se la risposta interessa un input, output o i counter.
La seconda variabile del campo contiene per input e output il campione bit per lo stato di attivazione degli IO (Bit0=input=, Bit1=input1,...). Dal momento che viene trasmesso il valore in scrittura esadecimale deve essere trasformato innanzitutto attraverso la funzione HexToInt
in un numero decimale.
Attraverso un collegamento AND del valore dell’input con la potenza alla seconda che corrisponde al valore di bit dei singoli input e Output, si constata se il rispettivo input (output) è uguale a 0 o 1, quindi OFF o ON. Ciò avviene in una serie che scorrerà in funzione del numero di IO.
Mediante la funzione JavaScript document.getElementById
l’oggetti di visualizzazione da aggiornare viene identificato e adattato in funzione dello stato di attivazione attuale.
Gli stessi meccanismi vengono utilizzati per l’aggiornamento dei counter, laddove viene meno la conversione da esadecimali a decimali perché gli stati dei counter trasmetteranno in decimali.
Il esempio supporta le funzioni più importanti del Web-IO, disponibili mediante richieste HTTP, ottimizzate per Web-IO digitale 4.0 2x input, 2x output. Per gli altri modelli Web-IO si devono effettuare eventualmente la modifica della struttura del sito internet e della parte di JavaScript. Una descrizione dettagliata dell’impiego delle richieste HTTP per i modelli digitali Web-IO è disponibile in lista di comandi richieste o nel manuale di programmazione sul Web-IO.