Autor Tema: Actualización con Ajax de una página web (método scripts Saratoga)  (Leído 1774 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado jmviper

  • Moderador Global
  • Hero Member
  • *****
  • Mensajes: 1.684
  • "Vortex Complex"
    • Ver Perfil
    • www.meteoarchena.es
  • Estación: Archena - ESMUR3000000030600B
Actualización con Ajax de una página web (método scripts Saratoga)
« en: 27 de Diciembre del 2016, 19:47:03 pm »
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>&nbsp;</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> <!--End class "stats" -->

       </div> <!--End class "stats_group" -->

      <div id="content">
       
          <div id="plots">
     
          <img src="daypond.png"      alt="Pond Temperatures" />
         
        </div> <!-- End id "plots" -->
      </div> <!-- End id "content" -->

     
    </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 = "&deg;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  >:(


Archena, Valle de Ricote (Murcia). 120 msnm. 18.771 hab.
Davis Vantage Pro2 Plus

www.meteoarchena.es

Desconectado kocher

  • Moderador Global
  • Hero Member
  • *****
  • Mensajes: 675
    • Ver Perfil
    • Meteo San Sebastian - Arriola
  • Estación: San Sebastian, Arriola ESEUS2000000020018A
Re:Actualización con Ajax de una página web (método scripts Saratoga)
« Respuesta #1 en: 27 de Diciembre del 2016, 23:00:05 pm »
Muy bueno el tutorial sobre ajax

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

Código: [Seleccionar]
10.3°C|22:56 27-12-2016|18.8°C|14:44|3.6°C|04:29 |25
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




“La mente es como un paracaídas… Solo funciona si la tenemos abierta”.

“La formulación de un problema, es más importante que su solución”.

“Si buscas resultados diferentes, no hagas siempre lo mismo" . -Albert Einstein-

Desconectado jmviper

  • Moderador Global
  • Hero Member
  • *****
  • Mensajes: 1.684
  • "Vortex Complex"
    • Ver Perfil
    • www.meteoarchena.es
  • Estación: Archena - ESMUR3000000030600B
Re:Actualización con Ajax de una página web (método scripts Saratoga)
« Respuesta #2 en: 28 de Diciembre del 2016, 00:16:43 am »
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



Archena, Valle de Ricote (Murcia). 120 msnm. 18.771 hab.
Davis Vantage Pro2 Plus

www.meteoarchena.es

Desconectado FBR

  • Newbie
  • *
  • Mensajes: 3
    • Ver Perfil
  • Estación: En Proyecto
Re:Actualización con Ajax de una página web (método scripts Saratoga)
« Respuesta #3 en: 04 de Enero del 2017, 10:14:44 am »
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?

Desconectado jmviper

  • Moderador Global
  • Hero Member
  • *****
  • Mensajes: 1.684
  • "Vortex Complex"
    • Ver Perfil
    • www.meteoarchena.es
  • Estación: Archena - ESMUR3000000030600B
Re:Actualización con Ajax de una página web (método scripts Saratoga)
« Respuesta #4 en: 04 de Enero del 2017, 10:43:03 am »
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


Archena, Valle de Ricote (Murcia). 120 msnm. 18.771 hab.
Davis Vantage Pro2 Plus

www.meteoarchena.es

Desconectado Xavi-EA5ZF

  • Full Member
  • ***
  • Mensajes: 181
  • Ham Radio Operator EA5ZF
    • Ver Perfil
    • MeteoLaVall
  • Estación: ESPVA1200000012600A
Re:Actualización con Ajax de una página web (método scripts Saratoga)
« Respuesta #5 en: 05 de Enero del 2017, 18:00:18 pm »
jmviper, entiendo que entonces para actualizar en plan "rapidfire" cada minuto o así, modificas el periodo de generación a 60 segundos, cosa que tardándome con una raspi B casi un minuto en generar cada página me solaparía una generación con otra.
Confírmame que es así o como lo haces.
Con wview, creo recordar que había cosas que se leían del loop y cosas que se generaban periodicamente, hace ya tiempo, pero recuerdo que generaba algo cada minuto y los gráficos cada 5.
Yo utilizo algo de Ajax en mi página, pero lo hago de una forma totalmente estrambótica, para llamar a unas rutinas que muestran las alertas de Eumet/AEMET.
No conozco casi nada de java y así me guió mi jefe que conoce ajax mejor que yo.
Xavi

Desconectado jmviper

  • Moderador Global
  • Hero Member
  • *****
  • Mensajes: 1.684
  • "Vortex Complex"
    • Ver Perfil
    • www.meteoarchena.es
  • Estación: Archena - ESMUR3000000030600B
Re:Actualización con Ajax de una página web (método scripts Saratoga)
« Respuesta #6 en: 05 de Enero del 2017, 19:23:08 pm »
Exactamente Xavi, se trata de generar un pequeño archivo quizás un poco más grande que la plantilla que se envía a meteoclimatic con los valores a actualizar en la página sin que weewx tenga que procesar toda la página entera y subirla al servidor.

Una cosa es cada cuanto se genera y se sube la plantilla al servidor y otra el tiempo en que es llamada la función Ajax para actualizar el valor en la página.
Por ejemplo se puede poner que se genere y se suba cada minuto la plantilla y la llamada a la función Ajax sea cada 5 segundos de modo que se actualizaran los datos en cuanto se subiese la plantilla al servidor.

Esa pequeña plantilla por ejemplo Cumulus y WD son capaces de generarla cada 3 ó 4 segundos tipo rapidfire de WU para actualizarse en tiempo real.

Habría que ver cada cuanto tiempo podría generarla weewx y programarla en el crontab para subirla al FTP en un intervalo igual de tiempo. Si se tiene la raspi como servidor web local y se sirve la página desde ella misma no habría necesidad de subirla al FTP y simplemente sería crear la plantilla localmente.

Todo esto es JavaScript que es un lenguaje de script bastante fácil de aprender. También se puede aprender su famosa librería JQuery con la que simplificar código.

Por cierto Java no tiene nada que ver con JavaScript... a JS le pusieron ese nombre para aprovechar el tirón que tenía Java.

Cuando quieras me vas comentando lo del tiempo de generación. Podemos hacer una plantilla para la página "Standard" de weewx y que la genere y suba al FTP. Sería cuestión de modificar la página standard con el código JavaScript y las funciones Ajax.


Archena, Valle de Ricote (Murcia). 120 msnm. 18.771 hab.
Davis Vantage Pro2 Plus

www.meteoarchena.es

Desconectado Xavi-EA5ZF

  • Full Member
  • ***
  • Mensajes: 181
  • Ham Radio Operator EA5ZF
    • Ver Perfil
    • MeteoLaVall
  • Estación: ESPVA1200000012600A
Re:Actualización con Ajax de una página web (método scripts Saratoga)
« Respuesta #7 en: 06 de Enero del 2017, 18:26:00 pm »
Hola, entiendo lo que me dices, pero te contaba que en mi caso y supongo que en el de muchos, se leen los datos de la estación cuando se hace la generación, que por costumbre es cada 5 minutos, con lo cual no valdría de nada actualizar en tiempo real, ya que solo leemos real cada 5 minutos.
Preguntaba el como lo hacías para tener los datos cada minuto, si hacías lecturas del loop de la estación o como se hacía.
Una vez se obtienen los datos es cuando viene el generar cada 5 minutos normalmente la plantilla o modificarla si tenemos datos del loop para actualizar en tiempo real cada 5 segundos si se quiere.
Xavi

Desconectado jmviper

  • Moderador Global
  • Hero Member
  • *****
  • Mensajes: 1.684
  • "Vortex Complex"
    • Ver Perfil
    • www.meteoarchena.es
  • Estación: Archena - ESMUR3000000030600B
Re:Actualización con Ajax de una página web (método scripts Saratoga)
« Respuesta #8 en: 06 de Enero del 2017, 20:51:57 pm »
En WD y en Cumulus por ejemplo el looping es muy rápido de alrededor de 1 a 2 segundos por lo que así se pueden tener los datos en tiempo real.

Si weewx hace como WL que lee el datalogger de la estación para generar los archivos pues supongo que lo más rápido que los podrá generar es cada minuto.


Archena, Valle de Ricote (Murcia). 120 msnm. 18.771 hab.
Davis Vantage Pro2 Plus

www.meteoarchena.es