Aplicación a Web-IO:
Representar valores de medición y estados de los Web-IOs en Google Maps
¡Aquí debería visualizarse un mapa de Google-Maps!
Con el siguiente botón entra a un mapa de Google-Maps, y activa los servicios de Google, es decir que tiene lugar un envío de datos (bajo su responsabilidad desde el punto de vista de la protección de datos).
Quien desee evitar en el futuro esos clics extra, quizás consiga algo en:
eu-de-bonn@ec.europa.eu (representación regional de la Comisión Europea en Bonn)
o support-de@google.com.
La disponibilidad completa del Internet permite vías completamente nuevas en la visualización de valores de medición y datos de automatización. Mientras que antiguamente todos los objetos de una visualización tenían que proceder de la misma fuente, ahora pueden integrarse fácilmente contenidos de terceros en la aplicación propia.
En la arquitectura Web2.0 esta técnica se denomina Mashup. Datos, imágenes, sonidos y otros contenidos multimediales se pueden utilizar en la propia página Web a través de interfaces programables API.
Un ejemplo clásico de esta técnica es el servicio Google Maps. A través de los API de Google Maps se pueden integrar mapas de carreteras o imágenes de satélite de cualquier lugar en la página propia. Además de ello se pueden visualizar p. ej. valores de medición en el área de estos mapas.
El ejemplo siguiente va a mostrar en detalle cómo se puede visualizar la temperatura medida por un Web-termógrafo en un Google Maps.
No hay problema: Le ponemos a disposición el Web-Termómetro NTC gratis durante 30 días. Rellene sencillamente un pedido muestra y le enviaremos el Web-termógrafo para probar a cuenta abierta. Si nos devuelve el aparato dentro de los 30 días, le abonamos la factura completa.
Al pedido muestraPreparativos
Ya ha abastecido su Web-termógrafo
- con corriente
- conectado a su red
- dotado con una dirección IP - con WuTility no hay problemas
1. Estructura base HTML de la página web
- Por motivos de sencillez la página Web va a contener en este ejemplo sólo el recuadro del mapa y la visualización de temperatura. Para ello se pone en la parte cuerpo de la página un Div-Layer con el ID map. A través de este ID puede completarse el contenido del Div-Layer después de llamarse la página Web con los datos de mapas del 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. Uso de los servicios Google Maps
-
Un requisito previo para el uso de los servicios Google Maps es el registro en Google. Se tiene que registrar el dominio Web, a través del cual se debe visualizar el material de mapas (en nuestro caso p. ej. www.WuT.de). El registro se hace con el enlace siguiente: https://developers.google.com/maps/.
Por el contrario se recibe una clave de acceso, que permite el acceso a Google API a través de una llamada de escritura correspondiente.
.....
</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. La escritura PHP para llamar la temperatura del Web-Termógrafo
La escritura aquí mostrada tiene que ser llamable como archivo PHP propio en el mismo servidor PHP, del que se carga también la página Web. Está elaborada de manera muy universal y puede utilizarse igualmente tanto para la comunicación con Web-termógrafos como también con Web-IO. En caso necesario la escritura se llama con AJAX Request desde el Browser. Aquí se transmiten vía URL todos los parámetros necesarios:
- IP:
Dirección IP del Web-IO - PORT:
Puerto TCP del Web-IO (normalmente 80) - COMMAND:
Comandos posibles para Web-termógrafos son: single, pudiendo seguir todavía al comando propio el número del sensor
Comandos posible para Web-IO Digital son: output, input o counter, pudiendo seguir todavía al comando propio el número del Input o del Output. El Web-IO devuelve el estado de los Inputs o de los Outputs.
Como otro comando más pueden ponerse los Outputs con outputaccess
- PW:
Contraseña del administrador o del operador del Web-IO (sólo Web-IO Digital) - MASK:
indica en forma hexadecimal, qué Outputs deben ponerse (sólo Web-IO Digital con outputaccess) - STATE:
indica en forma hexadecimal, en qué estado deben ponerse los Outputs (sólo Web-IO Digital con outputaccess)
La llamada para consultar la temperatura tendría el siguiente aspecto:
webiorequest.php?IP=URL des Web-Thermographen&PORT=80&COMMAND=single&
Como respuesta la escritura devuelve la dirección IP, el nombre del dispositivo y la temperatura actual separados por punto y coma:
10.40.23.100;WEBIO-03A481;6,8°C
La escritura PHP posee la siguiente estructura:
<?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);
}
?>
Esta escritura se salva en el servidor en webiorequest.php.
4. Juntar e indicar datos de temperatura y mapas
- La llamada de los datos necesarios de temperatura y mapas se dirige a través de JavaScript con técnica AJAX.
Al cargar la página Web se llama la función Load a través de una instrucción correspondiente en el Body-TAG. Ésta inicia por su parte la función DataRequest y entrega el String de comando, que es necesario para llamar la temperatura.
La función DataRequest controla primero qué Browser existe para utilizar el método correcto para el HTTPRequest (aquí hay diferencias entre Internet Explorer o Browser compatibles Firefox).
A través de la escritura PHP descrita en el punto 3 se solicita a continuación la temperatura actual. Al recibir la respuesta se llama automáticamente la función depositada DataReceived.
El valor de temperatura se recorta del string de recepción y junto con la hora actual se salva de nuevo en un String.
Ahora se genera el mapa. Para ello se fija para el lugar deseado el par correspondiente de coordinadas en el Variable point y se añade el mapa deseado en el Div-Layer prefijado para ello.
El aspecto del mapa puede prefijarse con diversos parámetros (mapa o imagen de satélite, elemento de mando para navegar, ....).
Por último se pone una marca en el punto correspondiente y se coloca el string con temperatura y hora encima del mapa.
<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>
El ejemplo sólo apoya intencionadamente algunas funciones base de la técnica Mashup y está optimado para los Web-Termómetros 57714 ó 57715. Para los otros modelos Web-IO tienen que realizarse en caso necesario adaptaciones en la página Web ejemplo. También el Google Maps API ofrece muchas funciones más que no se utilizaron aquí.
Por favor observe que en el ejemplo aquí ofrecido para descargar, tiene que añadirse la clave de registro apta para el dominio.
No hay problema: Le ponemos a disposición el Web-Termómetro NTC gratis durante 30 días. Rellene sencillamente un pedido muestra y le enviaremos el Web-termógrafo para probar a cuenta abierta. Si nos devuelve el aparato dentro de los 30 días, le abonamos la factura completa.
Al pedido muestra