W&T verbindet
Interfaces für TCP/IP, Ethernet, RS-232, RS-485, USB, 20mA, Glas- und Kunststoff-LWL, http, SNMP, OPC, Modbus TCP, I/O digital, I/O analog, ISA, PCI

Applikation zu Web-IO:

Meßwerte und Zustände von Web-IOs in Google-Maps Karten darstellen

Weitere Links

Hier sollte eine Google Maps Karte dargestellt werden!

Sie aktivieren die Karte von Google Maps über folgenden Button, mit dem Sie den Anbieter Google in Anspruch nehmen und (datenschutzrechtlich auf eigene Gefahr ;) diesem Daten übermitteln.

Google Maps betreten

Wer solche Extra-Klicks zukünftig vermeiden möchte erreicht vielleicht etwas unter:
eu-de-bonn@ec.europa.eu (Regionalvertretung der Europäischen Kommission in Bonn)
oder support-de@google.com.

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.

Netzwerk

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-Thermometer und möchten das vorgestellte Beispiel einfach mal ausprobieren?

Kein Problem: Wir stellen Ihnen den Web-Thermometer 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.

Zur Musterbestellung

Vorbereitungen

Sie haben Ihren Web-Thermographen bereits

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.

						<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. Nutzung der Google Maps Dienste

  • 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: https://developers.google.com/maps/.

    Im Gegenzug bekommt man einen Zugangsschlüssel, der über einen entsprechenden Script-Aufruf die Google API zugänglich macht. 
					
						.....
						</head>
						<script src="http://maps.google.com/?file=api
						&amp;ie=iso-8859-1
						&amp;oe=iso-8859-1&amp;v=2.x
						&amp;key=Registrierungsschlüssel"
						type="text/javascript">
						</script>
						<body onload="load();">
						.....

 

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:
10.40.23.100;WEBIO-03A481;6,8°C

Das PHP-Script hat folgenden Aufbau:

					
						<?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);
								}
						?>

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 zugrunde liegt, 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-Thermometer 57714 bzw. 57715 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.

Programmbeispiel herunterladen  

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

Kein Problem: Wir stellen Ihnen den Web-Thermometer 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.

Zur Musterbestellung