Applicazione relativa al Web-IO:
Visualizzazione dei valori di misura e degli stati dei Web-IO nella carte geografiche Google Maps
Qui sarebbe necessario visualizzare una cartina Google Maps!
Attivate la cartina di Google Maps mediante il seguente pulsante con il quale fate ricorso al fornitore Google e (protezione dei dati a proprio rischio e pericolo ;) al quale trasmettete i dati.
Chi in futuro desidera evitare questi clic in più, ottiene qualcosa tramite:
eu-de-bonn@ec.europa.eu (Rappresentanza regionale della Commissione europea a Bonn)
o support-de@google.com.
La disponibilità capillare di Internet permette modi completamente nuovi nella visualizzazione dei valori di misura e dei dati di automazione. Mentre in precedenza tutti gli oggetti di una visualizzazione dovevano provenire dalla stessa fonte, oggi nella propria applicazione possono essere inseriti comodamente contenuti di fornitori terzi.
Nell’architettura Web2.0 questa tecnica viene definita mashup. Dati, immagini, audio e altri contenuti multimediali possono essere utilizzati nella propria pagina web mediante interfacce di programmazione API aperte.
Un esempio classico per questa tecnica è rappresentato dal servizio Google Maps. Mediante l’API di Google Maps è possibile integrare carte stradali o immagini satellitari da qualsiasi ubicazione nella propria pagina. Inoltre è possibile visualizzare all’interno di queste carte ad es. valori di misura.
Il seguente esempio intende mostrare nel dettaglio il modo in cui la temperatura misurata da un termografo web può essere integrata in una carta Google Maps.
Nessun problema: vi mettiamo a disposizione gratuitamente per 30 giorni il termometro web NTC. Non dovete far altro che compilare l’ordinazione del campione e vi forniremo il termografo web in prova in conto aperto. Se ci restituite l’apparecchio entro 30 giorni, vi accreditiamo completamente la fattura.
All’ordinazione del campionePreparativi
Avete già alimentato con corrente
- il vostro termografo web
- effettuato il collegamento alla vostra rete
- e assegnato un indirizzo IP: con WuTility è facile!
1. Struttura di base HTML della pagina web
- Per semplificare, la pagina web in questo esempio deve riportare come contenuto solo il particolare della carta e la visualizzazione della temperatura. A tale scopo nell’area Body della pagina viene creato un div layer con l’ID map. Mediante questo ID il contenuto del div layer può essere riempito, dopo avere richiamato la pagina web, con i dati della carta di Google Maps.
<html>
<head>
<title>Temperature in Map Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="load();">
<div id="map" style="width:640px; height:400px;"></div>
</body>
</html>
2. Utilizzo dei servizi Google Maps
-
Un requisito di base per l’utilizzo dei servizi Google Maps è la registrazione in Google. Deve essere registrato il dominio web attraverso il quale si intende visualizzare il materiale della carta (nel nostro esempio ad es. www.WuT.de). La registrazione avviene mediante il seguente link: https://developers.google.com/maps/.
In cambio si riceve un codice di accesso che, mediante il richiamo di un corrispondente script, rende accessibile l’API di Google.
.....
</head>
<script src="http://maps.google.com/?file=api
&ie=iso-8859-1
&oe=iso-8859-1&v=2.x
&key=Registrierungsschlüssel"
type="text/javascript">
</script>
<body onload="load();">
.....
3. Lo script PHP per richiamare la temperatura dal termografo web
Lo script qui visualizzato deve poter essere richiamato come file PHP proprio sullo stesso server PHP da cui può anche essere caricata la pagina web. Ha una struttura estremamente universale e può essere utilizzato ugualmente per la comunicazione con termografi web che con Web-IO. All’occorrenza lo script viene richiamato dal browser mediante una richiesta AJAX. Durante questa operazione vengono forniti attraverso l’URL tutti i parametri necessari:
- IP:
indirizzo IP del Web-IO - PORT:
porta TCP del Web-IO (modo normale 80) - COMMAND:
possibili comandi per i termografi web sono: single: al comando vero e proprio può seguire anche il numero del sensore
possibili comandi per Web-IO digitali sono: output, input o counter, dove al comando vero e proprio può seguire anche il numero dell’input o dell’output. Il Web-IO restituisce lo stato degli input o degli output.
Come ulteriore comando gli output possono essere impostati con outputaccess
- PW:
password amministratore od operatore del Web-IO (solo Web-IO digitale) - MASK:
indica con scrittura esadecimale gli output che devono essere impostati (solo Web-IO digitale con outputaccess) - STATE:
indica con scrittura esadecimale in quale stato gli output devono essere impostati (solo Web-IO digitale con outputaccess)
Il richiamo per l’interrogazione della temperatura si presenterebbe quindi in questo modo:
webiorequest.php?IP=URL des Web-Thermographen&PORT=80&COMMAND=single&
Come risposta lo script restituisce l’indirizzo IP, il nome dell’apparecchio e la temperatura corrente separati mediante punto e virgola:
10.40.23.100;WEBIO-03A481;6,8°C
Lo script PHP ha la seguente struttura:
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
parse_str($_SERVER[’QUERY_STRING’]);
$fp=fsockopen($IP, $PORT, $errno, $error, 5);
if (!$fp)
{
printf("ERROR");
}
else
{
if ($COMMAND == "outputaccess")
{
IF ($MASK == "")
{
$MASK="0FFF";
}
fputs($fp, "GET /".$COMMAND."?PW=".$PW."&Mask=".$MASK."&State=".$STATE."&");
}
else
{
fputs($fp, "GET /".$COMMAND."?PW=".$PW."&");
}
do
{
$char=fgetc($fp);
if($char!=chr(0))
{
echo $char;
}
}
while($char!=chr(0));
fclose($fp);
}
?>
Questo script viene memorizzato sul server sotto webiorequest.php.
4. Composizione e visualizzazione dei dati della temperatura e della carta
- Il richiamo dei dati necessari della temperatura e della carta viene controllato da uno JavaScript mediante tecnica AJAX.
Con il caricamento della pagina web viene richiamata attraverso una corrispondente istruzione nel TAG body la funzione Load. Questa a sua volta carica la funzione DataRequest e trasferisce la stringa di comando che è necessaria per richiamare la temperatura.
La funzione DataRequest verifica innanzitutto quale browser sta alla base per utilizzare il metodo giusto per la HTTPRequest (qui ci sono differenze tra i browser compatibili con Internet Explorer o Firefox).
Attraverso lo script PHP descritto al punto 3 viene quindi richiamata la temperatura corrente. Alla ricezione della risposta viene richiamata automaticamente la funzione DataReceived incorporata.
Il valore della temperatura viene tagliato dalla stringa di ricezione e viene memorizzato di nuovo in una stringa assieme all’orario corrente.
Solo ora viene generata la carta. A tale scopo viene stabilita per l’ubicazione desiderata la corrispondente coppia di coordinate nella variabile point e viene aggiunta la carta desiderata nel div layer prestabilito.
L’aspetto della carta può essere prestabilito mediante diversi parametri (carta o immagine satellitare, elemento di comando per la navigazione ecc.).
Infine viene inserito un segnaposto nel punto corrispondente e la stringa con temperatura e orario viene collocata sulla carta.
<script type="text/javascript">
var map;
var point;
var marker;
var commandstring =’webiorequest.php?IP=klima.wut.de&PORT=80&COMMAND=single&’;
function load()
{
DataRequest(commandstring);
}
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 Timenow = new Date();
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
var receivestring = xmlHttp.responseText;
var receivestringpart = receivestring.split(’;’);
receivestring = ’Außentemperatur um ’ + Timenow.getHours() + ’:’
+ Timenow.getMinutes() + ’ Uhr ’ + receivestringpart[2].substring(0,receivestringpart[2].length-2) + ’°C’;
if( GBrowserIsCompatible())
{
point = new GLatLng( 51.305099, 7.254627 );
map = new GMap2( document.getElementById( ’map’ ) );
map.addControl( new GSmallMapControl() );
map.setCenter( point, 18 );
map.setMapType(G_SATELLITE_MAP)
marker = new GMarker(point);
map.addOverlay(marker);
var content = "<h3>Prima Klima bei W&T</h3>";
content += "<br><a href=’http://klima.wut.de’>" + receivestring + "</a>";
marker.openInfoWindowHtml(content);
}
}
}
}
}
</script>
L’esempio supporta volutamente solo alcune funzioni di base della tecnica mashup ed è ottimizzato per il termometro web 57714 o 57715. Per gli altri modelli di Web-IO devono essere eventualmente apportati adattamenti alla pagina web d’esempio. Anche l’API di Google Maps offre numerose altre funzioni che qui non vengono utilizzate.
Attenzione: nell’esempio messo a disposizione qui per il download deve essere inserito il codice di registrazione adatto al dominio.
Nessun problema: vi mettiamo a disposizione gratuitamente per 30 giorni il termometro web NTC. Non dovete far altro che compilare l’ordinazione del campione e vi forniremo il termografo web in prova in conto aperto. Se ci restituite l’apparecchio entro 30 giorni, vi accreditiamo completamente la fattura.
All’ordinazione del campione