Evitar parpadeo al actualizar

#1 (**permalink**) 05/05/2015, 05:48

Buenas tardes a todos.

Estoy intentando actualizar una pagina cada segundo pero que no me haga el molesto parpado en blanco.

Lo que hace el código es usar la api de google para generar una esfera con una aguja, y me gustaría que solo se moviera la aguja cuando se actualizar, no ese molesto parpadeo

El codigo es el siguiente:

Código PHP:

 
<html> 
  <head> 
<!--        <meta http-equiv="refresh" content="2" > refresco web --> 
        <title>PUE</title> 
  </head> 
  <body> 
    <?php 
 
    $resultado= system('/etc/nagios3/scrips/pue'); 
 
    ?> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
 
          var valor = "<?php echo ($resultado); ?>" ; 
 
          google.load("visualization", "1", {packages:["gauge"]}); 
          google.setOnLoadCallback(function() { drawChart(valor); }); 
 
      function drawChart(valor) { 
 
//                valor = parseInt(valor); 
                valor = parseFloat(valor); 
        var data = google.visualization.arrayToDataTable([ 
          ['Label', 'Value'], 
          ['PUE', valor], 
        ]); 
 
        var options = { 
          width: 400, height: 140, 
          redFrom: 3, redTo: 4, 
          yellowFrom:2, yellowTo: 3, 
          greenFrom: 0, greenTo: 2, 
          min: 0, max: 4, 
          minorTicks: 5 
        }; 
 
        var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
        chart.draw(data, options); 
 
      } 
    </script> 
        <center><div id="chart_div" style="width: 400px; height: 140px;"></div></center> 
  </body> 
</html>

¿Alguien me echa una mano por favor?

Saludos y gracias

hhs · #2 (**permalink**) 05/05/2015, 07:18

Puedes usar ajax, busca por long polling.

#3 (**permalink**) 05/05/2015, 08:37

La cosa es que estoy perdido en ajax, ¿sabrias como implementarlo al codigo?

hhs · #4 (**permalink**) 05/05/2015, 08:59

Si desconoces sobre el tema te sugiero que realices esta pregunta en el foro de javascript

#5 (**permalink**) 05/05/2015, 14:45

Solicite la ayuda pero tampoco veo que me puedan ayudar
¿Alguien me echa una mano?

Saludos

pateketrueke · #6 (**permalink**) 05/05/2015, 15:30

Cita:

Iniciado por todasontodas

Solicite la ayuda pero tampoco veo que me puedan ayudar
¿Alguien me echa una mano?

Saludos

Si te animas a publicar en el lugar correcto seguro alguien te ayuda.

#7 (**permalink**) 06/05/2015, 00:11

La cosa es que allí ni siquiera me dado alguna pista. Pensaba que era algo no tan dificil de solucionar.
No me queda otra que darle vueltas yo.

BanNsS1 · #8 (**permalink**) 06/05/2015, 08:51

Deberías especificar más como usas cada variable y si cambian en el tiempo o definir el objetivo de recargar la página de ésta forma. Si lo he entendido bien sería esto lo que quieres:

Código Javascript:

Ver original//$.get() Requiere de la librería JS jQuery
    var options = {                     //Variable fija, no hace falta declararla cada vez que se ejecuta la función drawChart.
        width: 400, height: 140, 
        redFrom: 3, redTo: 4, 
        yellowFrom:2, yellowTo: 3, 
        greenFrom: 0, greenTo: 2, 
        min: 0, max: 4, 
        minorTicks: 5 
    };
        
    function drawChart() { 
        var valor = parseFloat($.get("file.php")); //Fichero PHP que imprime en pantalla el valor de $resultado; (SOLO SI $RESULTADO ES VARIABLE).
        var data = google.visualization.arrayToDataTable([['Label', 'Value'],['PUE', valor],]); 
        var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
        chart.draw(data, options); 
    } 
    
    reload = setInterval(drawChart(), 2000);

Te advierto que recargar la página de ésta manera podría suponer a medio-largo plazo que se sature el navegador o empiece a utilizar más memoria RAM de lo normal.

#9 (**permalink**) 07/05/2015, 02:54

Muchas gracias por la ayuda pero no me funciono. Te explico un poco el codigo para ver si asi comprendes mejor lo que quiero conseguir, añadi lo tu codigo asi vaya a ser que lo añadiera mal:

Código PHP:

 
<html> 
  <head> 
        <title>PUE</title> 
  </head> 
  <body> 
    <?php 
 
    $resultado= system('/etc/nagios3/scrips/pue'); //la variable obtiene un numero de un scrips que va variando cada vez que se refresca la pagina 
 
    ?> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
 
          var valor = "<?php echo ($resultado); ?>" ; 
 
          google.load("visualization", "1", {packages:["gauge"]}); 
          google.setOnLoadCallback(function() { drawChart(valor); }); 
 
      var options = {                     //Variable fija, no hace falta declararla cada vez que se ejecuta la función drawChart. 
        width: 400, height: 140,  
        redFrom: 3, redTo: 4,  
        yellowFrom:2, yellowTo: 3,  
        greenFrom: 0, greenTo: 2,  
        min: 0, max: 4,  
        minorTicks: 5  
    }; 
         
    function drawChart() {  
        var valor = parseFloat($.get("file.php")); //Fichero PHP que imprime en pantalla el valor de $resultado; (SOLO SI $RESULTADO ES VARIABLE). 
        var data = google.visualization.arrayToDataTable([['Label', 'Value'],['PUE', valor],]);  
        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));  
        chart.draw(data, options);  
    }  
     
    reload = setInterval(drawChart(), 2000); 
    </script> 
        <center><div id="chart_div" style="width: 400px; height: 140px;"></div></center> 
  </body> 
</html>

Te dejo una foto para que tambien comprendas lo que quiero conseguir.
Seria que se refrescara la pagina y no diera el molesto parpadeo y que solo se moviera la aguja. Con la variable anterior se obtiene el valor el cual hace mover a la aguja con esa cantidad

pateketrueke · #10 (**permalink**) 07/05/2015, 06:52

La llamada a system() es bloqueante, así que detiene la carga de la pagina hasta que se completa.

Ese es precisamente el problema, así que tu código tal cual no tiene solución.

Debes implementar una llamada asíncrona (ajax) para obtener los datos de system(), y dejar la pagina ya cargada: así te evitas recargarla.

BanNsS1 · #11 (**permalink**) 07/05/2015, 11:57

Cita:

Iniciado por todasontodas

Muchas gracias por la ayuda pero no me funciono. Te explico un poco el codigo para ver si asi comprendes mejor lo que quiero conseguir, añadi lo tu codigo asi vaya a ser que lo añadiera mal:

Te dejo una foto para que tambien comprendas lo que quiero conseguir.
Seria que se refrescara la pagina y no diera el molesto parpadeo y que solo se moviera la aguja. Con la variable anterior se obtiene el valor el cual hace mover a la aguja con esa cantidad

Como te va a funcionar si ni lo has revisado!!!!!
Fíjate en ésta línea:

Código Javascript:

Ver originalvar valor = parseFloat($.get("file.php")); //Fichero PHP que imprime en pantalla el valor de $resultado; (SOLO SI $RESULTADO ES VARIABLE).

crea un archivo llamado "file.php" y dentro de él pon:

Código PHP:

  echo system('/etc/nagios3/scrips/pue'); 
exit;

#12 (**permalink**) 12/05/2015, 00:45

Lo siento pero copie mal el código al ponerlo en el post, te pongo los dos ficheros que tengo creado con los datos que me facilitaste para ver si tengo algo mal:

fichero index.php

Código PHP:

  <html> 
  <head> 
<!--        <meta http-equiv="refresh" content="2" > refresco web --> 
        <title>PUE</title> 
  </head> 
  <body> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script src="jquery.js"></script> 
    <script type="text/javascript"> 
 
 
          google.load("visualization", "1", {packages:["gauge"]}); 
          google.setOnLoadCallback(function() { drawChart(valor); }); 
 
 
    //$.get() Requiere de la librería JS jQuery 
    var options = {                     //Variable fija, no hace falta declararla cada vez que se ejecuta la función drawChart. 
        width: 400, height: 140, 
        redFrom: 3, redTo: 4, 
        yellowFrom:2, yellowTo: 3, 
        greenFrom: 0, greenTo: 2, 
        min: 0, max: 4, 
        minorTicks: 5 
    }; 
 
    function drawChart() { 
        var valor = parseFloat($.get("file.php")); //Fichero PHP que imprime en pantalla el valor de $resultado; (SOLO SI $RESULTADO ES VARIABLE). 
        var data = google.visualization.arrayToDataTable([['Label', 'Value'],['PUE', valor],]); 
        var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 
        chart.draw(data, options); 
    } 
 
    reload = setInterval(drawChart(), 2000); 
    </script> 
        <center><div id="chart_div" style="width: 400px; height: 140px;"></div></center> 
  </body> 
</html>

fichero file.php

Código PHP:

  echo system('/etc/nagios3/scrips/pue'); 
exit;

Me sale en blanco la pagina
¿Se te ocurre cual puede ser el problema?
Saludos y gracias por ayudarme.

#13 (**permalink**) 13/05/2015, 00:05

Alguien me echa un a mano?
Saludoss