Die flächendeckende Verfügbarkeit des Internets ermöglicht
ganz neue Wege in der Visualisierung von Messwerten und Automatisierungsdaten.
Während früher alle Objekte einer Visualisierung aus der gleichen
Quelle kommen mussten, können heute bequem Inhalte von Drittanbietern
in die eigene Anwendung eingeflochten werden.
In der Web2.0-Architektur bezeichnet man diese Technik als Mashup. Daten,
Bilder, Töne und andere multimediale Inhalte können über
offene API-Programmierschnittstellen in der eigenen Webseite genutzt werden.
Ein klassisches Beispiel für diese Technik ist der Dienst Google
Maps. Über die API von Google Maps lassen sich Straßenkarten
bzw. Satellitenbilder von beliebigen Standorten in die eigene Seite einbinden.
Darüber hinaus können z.B. Messwerte im Bereich dieser Karten
eingeblendet werden.
Das folgende Beispiel soll im Detail zeigen, wie sich die von einem Web-Thermographen
gemessene Temperatur in eine Google Maps Karte einbinden lässt.
Sie haben noch keinen Web-Thermographen und möchten das vorgestellte
Beispiel einfach mal ausprobieren?
Kein Problem: Wir stellen Ihnen den Web-Thermographen NTC gerne
kostenlos für 30 Tage zur Verfügung. Einfach Musterbestellung
ausfüllen, wir liefern den Web-Thermographen zum Test auf offene
Rechnung. Wenn Sie das Gerät innerhalb von 30 Tagen zurück
schicken, schreiben wir die Rechnung komplett gut.
mit einer IP-Adresse versehen - mit WuTility
kein Problem
1. HTML-Grundaufbau der Webseite
Der Einfachheit halber soll die Webseite in diesem Beispiel als Inhalt
nur den Kartenausschnitt und die Temperatureinblendung enthalten. Dazu
wird im Body Bereich der Seite ein Div-Layer mit der ID map angelegt.
Über diese ID kann der Inhalt des Div-Layers nach Aufruf der Webseite
mit den Kartendaten von Google Maps gefüllt werden.
Eine Grundvoraussetzung für die Nutzung der Google Maps Dienste
ist die Registrierung bei Google. Registriert werden muss die Web-Domain,
über die Kartenmaterial angezeigt werden soll (in unserem Fall
z.B. www.WuT.de). Die Registrierung erfolgt über folgenden Link:
http://code.google.com/apis/maps/index.html.
Im Gegenzug bekommt man einen Zugangsschlüssel, der über einen
entsprechenden Script-Aufruf die Google API zugänglich macht.
3. Das PHP-Script zum Abruf der Temperatur vom Web-Thermographen
Das hier gezeigte Script muss als eigenes PHP-File auf dem selben PHP-Server
abrufbar sein, von dem auch die Webseite geladen wird. Es ist sehr universell
aufgebaut und kann gleichermaßen für die Kommunikation mit
Web-Thermographen als auch mit Web-IO genutzt werden. Das Script wird
bei Bedarf mittels eines AJAX-Requests vom Browser aus aufgerufen. Dabei
werden über die URL alle benötigten Parameter übergeben:
IP
:
IP-Adresse des Web-IO
PORT
:
TCP-Port des Web-IO (normalerweise 80)
COMMAND
:
mögliche Kommandos für Web-Thermographen sind: single,
wobei dem eigentlichen Kommando noch die Nummer des Sensors folgen
kann
mögliche Kommandos für Web-IO Digital sind:, output,
input oder counter, wobei dem eigentlichen Kommando noch die Nummer
des Inputs oder Outputs folgen kann. Das Web-IO gibt den Status
der Inputs oder Outputs zurück.
Als weiteres Kommando können mit outputaccess die Outputs
gesetzt werden
PW
:
Administrator oder Operator Passwort des Web-IO (nur
Web-IO Digital)
MASK
:
gibt in hexadezimaler Schreibweise an, welche Outputs
gesetzt werden sollen
(nur Web-IO Digital bei outputaccess)
STATE
:
gibt in hexadezimaler Schreibweise an, in welchen Zustand
die Outputs gesetzt werden sollen (nur Web-IO Digital bei outputaccess)
Der Aufruf für die Abfrage der Temperatur würde dann so aussehen:
webiorequest.php?IP=URL des Web-Thermographen&PORT=80&COMMAND=single&
Als Antwort gibt das Script die IP-Adresse, den Device Namen und die
aktuelle Temperatur durch Semikolon getrennt zurück:
Dieses Script wird auf den Server unter webiorequest.php gespeichert.
4. Zusammenführen und Anzeigen von Temperatur- und Kartendaten
Das Abrufen der benötigten Temperatur- und Kartendaten wird über
ein JavaScript mittels AJAX-Technik gesteuert.
Mit dem Laden der Webseite wird über eine entsprechende Anweisung
im Body-TAG die Funktion Load aufgerufen. Diese startet ihrerseits die
Funktion DataRequest und übergibt den Kommando-String, der für
den Abruf der Temperatur nötig ist.
Die Funktion DataRequest prüft zunächst, welcher Browser zugrundeliegt,
um die richtige Methode für den HTTPRequest zu benutzen (hier gibt
es Unterschiede zwischen Internet Explorer oder Firefox kompatiblen
Browsern).
Über das in Punkt 3. beschriebene PHP-Script wird anschließend
die aktuelle Temperatur abgefragt. Bei Empfang der Antwort wird automatisch
die eingebettete Funktion DataReceived aufgerufen.
Der Temperaturwert wird aus dem Empfangsstring ausgeschnitten und zusammen
mit der Aktuellen Uhrzeit neu in einen String gespeichert.
Erst jetzt wird die Karte generiert. Dazu wird für den gewünschten
Standort das endsprechende Koordinatenpaar in der Variablen point
festgelegt und die gewünschte Karte in das dafür vorgegebene
Div-Layer eingefügt.
Das Erscheinungsbild der Karte kann durch verschiedene Parameter vorgegeben
werden (Karte oder Satellitenbild, Bedienelement zum Navigieren, ....).
Zuletzt wird ein Marker an den entsprechenden Punkt gesetzt und der
String mit Temperatur und Uhrzeit über die Karte gelegt.
<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>
Das Beispiel unterstützt bewusst nur einige Basisfunktionen der
Mashup -Technik und ist für den Web-Thermographen 57609 bzw. 57610
optimiert. Für die anderen Web-IO Modelle müssen ggf. Anpassungen
an der Beispiel-Webseite vorgenommen werden. Auch die Google Maps API
bietet viele weitere Funktionen die hier nicht genutzt wurden.
Bitte beachten Sie, dass in das hier zum Download angebotene Beispiel,
der zur Domain passende Registrierungsschlüssel eingefügt werden
muss.
