Actualización con Ajax de una página web (método scripts Saratoga)

Bricolaje y otras manualidades > Creacion de páginas personales meteorológicas

(1/2) > >>

jmviper:
Abro este hilo con la intención de crear o transformar nuestras páginas webs con datos estáticos que tienen que recargarse y subirse al FTP enteramente a hacerlo dinámicamente con Ajax iniciales de Asynchronous JavaScript And XML (JavaScript asíncrono y XML).

Ajax no hace falta instalarse de ningún sitio ya que viene implementado en cualquier navegador con JavaScript. Consiste básicamente en solicitar los datos al servidor por parte del navegador (cliente) en un segundo plano y eso es lo que le hace especialmente atractivo... el que actualice datos en la página sin necesidad de tener que recargar toda la página de nuevo. Actualmente todos los navegadores modernos lo soportan ya que está desde hace bastante tiempo.

Para entender mejor el funcionamiento hacen falta unas nociones básicas de HTML y JavaScript mayormente.

Los sitios web basados en los scripts de Saratoga usan esta técnica pero veamos cómo trabaja con un ejemplo...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Archena, Murcia Tiempo</title>
<link rel="stylesheet" type="text/css" href="weewx.css"/>
<link rel="icon" type="image/png" href="favicon.ico" />

</head>

<body>
<div id="container">
<div id="masthead">
<h1>Archena, Murcia</h1>
<h2>Condiciones actuales</h2>
<h2> <span class="ajax" id="ajaxfecha"></span> </h2>
<h3>Temp CPU: <span class="ajax" id="ajaxtempcpu"></span> </h3>
     </div>

<div id="stats_group">

<div class="stats">
<div class="stats_header">
Condiciones actuales
</div>

<table>
<tbody>
<tr>
<td class="stats_label">Temperatura</td>
<td class="stats_data"> <span class="ajax" id="ajaxtemp"></span> </td>
</tr>
</tbody>
</table>
</div>

<p> </p>

<div class="stats">
<div class="stats_header">
Máx/Mín
</div>
<table>
<tbody>
<tr>
<td class="stats_label">
Temp máxima

Temp mínima
</td>
<td class="stats_data">
<span class="ajax" id="ajaxmaxtemp"></span> a las <span class="ajax" id="ajaxmaxtemptime"></span>

<span class="ajax" id="ajaxmintemp"></span> a las <span class="ajax" id="ajaxmintemptime"></span>
</td>
</tr>

</tbody>
</table>
</div> 

</div> 

<div id="content">

<div id="plots">

<img src="daypond.png" alt="Pond Temperatures" />

</div> 
</div> 

</div>
<script>
var clientrawFile = 'realtime.php'; // Ubicación de la plantilla con los datos

var flashtime = 2000; // Tiempo en milisegundos que dura el flasheo

var flashcolor = "green"; // Color con el que se flashea

var reloadTime = 10000; // Tiempo en milisegundos en que actualiza los datos (se ejecuta la función ajaxLoader)

var uomTemp = "°C"; // Unidad de temperatura

function get_ajax_tags ( ) {
// search all the span tags and return the list with class="ajax" in it
//

var elem = document.getElementsByTagName('span');
   var lookfor = 'class';

var arr = new Array();
    var iarr = 0;
for(var e = 0; e < elem.length; e++) {
var att = elem[e].getAttribute(lookfor);
if(att == 'ajax') {
arr[iarr] = elem[e];
iarr++;
}
}

    return arr;

}

function reset_ajax_color( usecolor ) {
// reset all the <span class="ajax"...> styles to have no color override
var elements = get_ajax_tags();
     var numelements = elements.length;
     for (var index=0;index!=numelements;index++) {
var element = elements[index];
       element.style.color = usecolor;
     }
}

function set_ajax_obs( name, value, title ) {
// store away the current value in both the doc and the span as lastobs="value"
// change color if value != lastobs

      var element = document.getElementById(name);
      if (! element ) { return; } // V1.04 -- don't set if missing the <span id=name> tag
      var lastobs = element.getAttribute("lastobs");
      element.setAttribute("lastobs",value);
      if (value != unescape(lastobs)) {
   element.style.color=flashcolor;}
      if(!title) title = "";
      element.innerHTML = value;
      }

function ajaxLoader(url) {

if (document.getElementById) {

var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(url);

}

if (x) {

x.onreadystatechange = function() {

if (x.readyState == 4 && x.status == 200) {

var wx30 = x.responseText.split('|'); // Se guardan los datos en un array en una variable

   var temp = parseFloat(wx30[0]); // Se accede a cada dato según su posición en el array y se trata con javascript
   var fecha = wx30[1];
   var maxtemp = parseFloat(wx30[2]);
   var maxtemptime = wx30[3];
   var mintemp = parseFloat(wx30[4]);
   var mintemptime = wx30[5];
   var tempcpu = wx30[6];

   set_ajax_obs("ajaxtemp", temp.toFixed(1) + uomTemp); // Se asigna cada valor al span con el id que queremos
   set_ajax_obs("ajaxfecha", fecha);
   set_ajax_obs("ajaxmaxtemp", maxtemp.toFixed(1) + uomTemp);
   set_ajax_obs("ajaxmaxtemptime", maxtemptime);
   set_ajax_obs("ajaxmintemp", mintemp.toFixed(1) + uomTemp);
   set_ajax_obs("ajaxmintemptime", mintemptime);
   set_ajax_obs("ajaxtempcpu", tempcpu.trim() + uomTemp);
   document.title = "Temp: " + temp.toFixed(1) + "°C";
   }
}
}

x.open("GET", url, true);

x.send(null);

setTimeout(function(){ajaxLoader(clientrawFile + '?' + new Date().getTime());}, reloadTime); // Se inicia el temporizador de la función
setTimeout(function(){reset_ajax_color('');},flashtime); // Se inicia también el temporizador del flasheo

}

ajaxLoader(clientrawFile + '?' + new Date().getTime()); // Se pone en marcha la función

</script>

</body>

</html>

http://www.meteoarchena.es/weewx/

Esta es una sencilla página web alojada en mi servidor con un sensor de temperatura DS18B20 con weewx en una Orange Pi PC para explicar el funcionamiento y ver las distintas partes. Seguro que a los que tengan página con weewx les resulta familiar el código HTML.

En el código HTML tenemos etiquetas <span> con class="ajax" e id="nombre" como atributos. Ahí es donde saldrán los datos actualizados con ajax.
Por ejemplo <span class="ajax" id="ajaxtemp"> para la temperatura.

En las variables he puesto comentarios para saber qué cambiar y personalizar tiempos y color de flasheo a nuestras necesidades y/o gustos.

Después vienen una serie de funciones que son necesarias para el funcionamiento. Por ejemplo la función get_ajax_tags coge todos los elementos con la etiqueta <span> y reset_ajax_color resetea todos esos valores al color por defecto que tenían al flashearse.
La función set_ajax_obs es muy importante ya que almacena el dato en un atributo y si el nuevo dato leído no es iguala que guardó en el atributo lo flashea con el color que hayamos puesto en la variable flashcolor.
Por último viene la función ajaxLoader que es la más importante ya que recoge los datos y los actualiza en el intervalo de tiempo que esté puesto en la variable reloadTime.

La creación de la plantilla la podemos hacer con una plantilla personalizada separados en este caso los valores a rellenar por el símbolo "|" (Alt Gr + 1) que ayuda a separar los valores mejor.
En este caso la plantilla es: www.meteoarchena.es/weewx/realtime.php que es un archivo php que tiene la ventaja de poder "incluir" diferentes archivos de texto como plantillas u otros archivos de datos para hacerlos uno sólo. Por supuesto se puede poner una plantilla en formato txt o html como está en meteoclimatic.

En el caso que he puesto el script está al final de la página ya que se deben de cargar todos los elementos de la página implicados (los spans) para que funcione correctamente.
Si se quiere poner en la cabecera deberá o bien encerrarse en un evento onload (onload = function{...} Se puede crear un archivo js con el script y enlazarlo de esa manera en la cabecera de la página.

Se pueden crear plantillas personalizadas y crear tantas funciones ajaxLoader como se quieran (por ejemplo ajaxLoader2, ajaxLoader3 etc etc) con diferentes plantillas, archivos o por ejemplo actualizar las imágenes con diferentes tiempos de actualización.

P.D. La página puesta como ejemplo puede tener problemas de actualización ya que la Orange Pi PC casi no tiene cobertura del wifi >:(

kocher:
Muy bueno el tutorial sobre ajax

La plantilla que contiene los datos, realtime.php, tiene esta estructura:

--- Código: ---10.3°C|22:56 27-12-2016|18.8°C|14:44|3.6°C|04:29 |25
--- Fin del código ---

Se supone que puedo fabricar este tipo de plantilla con mi propia estación.
Con tus explicaciones, ya es posible empezar a jugar un poco jjjjj :D

Muchísimas gracias

jmviper:
De nada kocher ;D

La intención es que se vaya familiarizando uno con este tipo de tecnologías que ayudan y mucho a ver los datos "casi" en tiempo real (como mucho unos 4 segundos de haber recogido el dato la consola de la estación) si se hace con WD o con Cumulus que son los más rápidos generando archivos y subiendo.

Con weewx o WL por ejemplo creo que sería cada minuto como mínimo como en la página que he puesto de prueba.

La gran ventaja es que es un archivo muy pequeño el de la plantilla y muy rápido en la generación y envío por FTP comparado con una página web entera rellenada y subida y actualizada cada 5 minutos por ejemplo.

Si se riza el rizo y se tiene un servidor web local en el Pc de la estación no habría ya que subir a FTP aunque si se tiene un hosting contratado siempre se puede abrir un puerto del Pc con Apache por ejemplo (generalmente el 80 que es el puerto web aunque se puede abrir cualquier otro disponible) y tomar los datos directamente mediante script php (con file_get_contents() ) del Pc de la estación.

Las posibilidades son muchas :D

FBR:
Actualmente tengo en funcionamiento una Davis+WEEWX+WD+Saratoga. Si la pongo en modo simulación los datos no aparecen en la plantilla de Saratoga, tampoco si la estación es una PCE-FWS 20. ¿Es posible hacer funcionar la plantilla Saratoga con una estación que no sea la Davis, o desisto del intento?

jmviper:
Buenas FBR

Lamentablemente en esta sección sólo se da soporte a aquellos usuarios que tienen activa la estación en meteoclimatic.

Si tienes la estación operativa crea una estación en meteoclimatic para subir datos.

No es por nada pero algunos usuarios piden soporte para sus webs y no ponen estación ni suben datos a meteoclimatic.

Saludos

Navegación

[0] Índice de Mensajes

[#] Página Siguiente

Ir a la versión completa