Sensor DHT11 + Flotr2 (parte 2/2)

Buenas noches Leute! portada Para no dejar coja la anterior parte voy a proseguir con ella y terminar lo que comenté para dibujar los datos recibidos y almacenados en base de datos con la librería Flotr2 . Os mostraré la sencilla estructura de la base de datos,el esquema de conexiones y la librería. Lo primero es poner el esquema de arquitectura para aclararnos:

arquit

Como vemos el código en Python manda con un GET los valores a un script en php que solamente se encarga de guardar los datos en la BD. (hay mejores maneras de hacerlo, lo sé, pero aun no domino  la conexión a base de datos desde Python, que sería lo suyo, pero tiempo al tiempo :P). Posteriormente al entrar en la web para que nos muestre los valores se realiza de nuevo una consulta a la BD con php y se muestra mediante javascript con la librería flotr2. El script php es muy sencillo:
<?php

// Parametros de base de datos
$mysql_servidor = "-----------";
$mysql_base = "---------------";
$mysql_usuario = "------------";
$mysql_clave = "--------------";

// pillamos el valor del GET

$temp = $_GET["temp"];

// ajustamos la hora del servidor remoto a la hora española

$fecha=date("d-m-Y H:i:s");
$nuevafecha = strtotime ( '+1 hour' , strtotime ( $fecha ) ) ;
$nuevafecha = date ( 'Y-m-j H:i:s' , $nuevafecha );
echo $nuevafecha;

//conectamos a la BD

mysql_connect($mysql_servidor,$mysql_usuario,$mysql_clave) or die("Imposible conectarse al servidor.");
mysql_select_db($mysql_base) or die("Imposible abrir Base de datos");

//Hacemos la inserción de los valores

$sql = "INSERT INTO `josehervas_es`.`temperatura` (`id`, `temp`, `time`) VALUES (NULL, '$temp', '$nuevafecha');";
mysql_query($sql);

?>
La estructura de la BD es la que se ve en la imagen, donde únicamente genero dos tablas, humedad y temperatura, con 3 valores, el ID (necesario por ser clave primaria) el valor y el tiempo de adquisición.   humbd tembd   El código fuente de la dirección web es el que sigue, donde se mezcla HTML, php y javascript para el flotr2. Más información de la librería en www.humblesoftware.com/flotr2/documentation
<html>
<META HTTP-EQUIV="REFRESH" CONTENT="320;URL=http://josehervas.es/graficos/graftemphum.php"> 
<title>Real time y BBDD</title>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        width : 1200px;
        height: 400px;
        margin: 8px auto;
      }
    </style>
  </head>
  <body>
<br>  
<CENTER><br><IMG SRC=imagenes/NUEVO.png  ></IMG></CENTER>
<br>

<!-- AQUI SE HACE LA CONEXION CON LA BASE DE DATOS  -->

<?php
$mysql_servidor = "----";
$mysql_base = "--------";
$mysql_usuario = "-----";
$mysql_clave = "-------";

    mysql_connect($mysql_servidor,$mysql_usuario,$mysql_clave) or die("Imposible conectarse al servidor.");
    mysql_select_db($mysql_base) or die("Imposible abrir Base de datos");
	$sqlt = "SELECT * FROM temperatura ORDER BY temperatura.time DESC ;";
	$respt = mysql_query($sqlt);
    $nfilast = mysql_num_rows($respt);

	$sqlh = "SELECT * FROM humedad ORDER BY humedad.time DESC ;";
	$resph = mysql_query($sqlh);
    $nfilash = mysql_num_rows($resph);    

$maxt=0;

for($i=0;$i<$nfilast+1;$i++)
    {
        $rsEmpt = mysql_fetch_assoc($respt); 
        $vectorpt[]=$rsEmpt['temp'];
        $vectime[]=$rsEmpt['time'];

    } 
for($i=0;$i<$nfilash+1;$i++)
    {
        $rsEmph = mysql_fetch_assoc($resph); 
        $vectorph[]=$rsEmph['hum'];
        $vectime[]=$rsEmph['time'];

    }
?>

<!-- esta es la parte del tiempo real-->

<p><center><h2>TEMPERATURA=<font color="red"><?echo "$vectorpt[0]"?> C  </font>HUMEDAD=<font color="blue"><?echo "$vectorph[0]"?> %</font></h2></center></p>
<br>

<!-- aqui empieza la funcion de dibujar -->

<div id="container"></div>
<script type="text/javascript" src="flotr2.min.js"></script>
<script type="text/javascript" src="js/EventAdapter.js"></script>      
<script type="text/javascript">
(function () {

        var
          container = document.getElementById('container'),
          datat, datah, graph, i,j;
          datat = [];
          datah = [];
          vectimer= [];

<!-- ajustamos la hora del eje X --> 

        <?php   

             for($i=1;$i<$nfilast+1;$i++)            
                {
                 echo 'datat.push([new Date("'.$vectime[$nfilast-$i].'").getTime()+10800000,'.$vectorpt[$nfilast-$i].']);';
                }
             for($i=1;$i<$nfilash+1;$i++)            
                {
                 echo 'datah.push([new Date("'.$vectime[$nfilash-$i].'").getTime()+10800000,'.$vectorph[$nfilash-$i].']);';
                }

        ?>

<!-- llamamos a la funcion y ejecutamos --> 

          graph = Flotr.draw(container, [ {data : datat, label : 'Temperatura C', lines :{show:true , 
          fill : true, fillColor:['#DF0101','#FFFFFF']}, points : {show: false, radius :2}},
          {data : datah, label : 'Humedad C', yaxis : 2,lines :{show:true , 
          fill : true, fillColor:['#A9A9F5','#FFFFFF']}, points : {show: false, radius :2}}],

          {

            selection : { mode : 'xy', fps : 30 },
            title : "TEMPERATURA Y HR DEL HALL DE MI CASA EN TIEMPO REAL Y EN BBDD",
            colors: ['#FF0000', '#00A8F0'],
            yaxis : {
                 max : null,
                 min : 18,
                 autoscale: false},
            y2axis : {
                 max : null,
                 min : null,
                 autoscale: false},
            xaxis : {
                 noTicks: 15, mode : 'time', labelsAngle: 45
                    },
            mouse: {
                 track: true,          // => true to track the mouse, no tracking otherwise
                 trackAll: true,
                 //position: 'se',        // => position of the value box (default south-east)
                 relative: true,       // => next to the mouse cursor
                 trackFormatter: function(obj){ 

                    var t = parseInt(obj.x);
                    var myDate = new Date(t-7200000);
                    var string = myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();

                    return 'Hora = ' + string +'<br> Temp = ' + obj.y +' C'; }, 
                 margin: 5,             // => margin in pixels of the valuebox
                 lineColor: '#1AFF53',  // => line color of points that are drawn when mouse comes near a value of a series
                 trackDecimals: 1,      // => decimals for the track values
                 sensibility: 5,        // => the lower this number, the more precise you have to aim to show a value
                 trackY: true,          // => whether or not to track the mouse in the y axis
                 radius: 3,             // => radius of the track point
                 fillColor: null,       // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
                 fillOpacity: 0.4       // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill 
                    },
            legend : {
                    position : 'se',
                    backgroundColor : '#D2E8FF'
                    },
            HtmlText : false

          });

<!-- aqui se implementa la funcion del zoom -->     

            Flotr.EventAdapter.observe(container, 'flotr:select', function (area) {

            graph = Flotr.draw(container, [ {data : datat, label : 'Temperatura C', lines :{show:true , 
            fill : true, fillColor:['#DF0101','#FFFFFF']}, points : {show: true, radius :2}},
            {data : datah, label : 'Humedad C', yaxis : 2,lines :{show:true , 
            fill : true, fillColor:['#A9A9F5','#FFFFFF']}, points : {show: true, radius :2}}],
             {  
             selection : { mode : 'xy', fps : 30 },
             colors: ['#FF0000', '#00A8F0'],
              xaxis: {min:area.x1, max:area.x2, mode : 'time', labelsAngle: 45},
              yaxis: {min:area.y1, max:area.y2},
              y2axis: {min:null, max:null},
              mouse: {
                         track: true,          // => true to track the mouse, no tracking otherwise
                         trackAll: true,
                         //position: 'se',        // => position of the value box (default south-east)
                         relative: true,       // => next to the mouse cursor
                         trackFormatter: function(obj){ 

                            var t = parseInt(obj.x);
                            var myDate = new Date(t-7200000);
                            var string = myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();
                            return 'Hora = ' + string +'<br> Temp = ' + obj.y +' C'; },

                         margin: 5,             // => margin in pixels of the valuebox
                         lineColor: '#1AFF53',  // => line color of points that are drawn when mouse comes near a value of a series
                         trackDecimals: 1,      // => decimals for the track values
                         sensibility: 5,        // => the lower this number, the more precise you have to aim to show a value
                         trackY: true,          // => whether or not to track the mouse in the y axis
                         radius: 3,             // => radius of the track point
                         fillColor: null,       // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
                         fillOpacity: 0.4       // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill 
                            },
                    legend : {
                            position : 'se',
                            backgroundColor : '#D2E8FF'
                            },
                    HtmlText : false
                });

          });

 <!-- aqui se implementa la funcion de reset al pinchar -->  

          Flotr.EventAdapter.observe(container, 'flotr:click', function () 
          { 

          graph = Flotr.draw(container, [ {data : datat, label : 'Temperatura C', lines :{show:true , 
          fill : true, fillColor:['#DF0101','#FFFFFF']}, points : {show: false, radius :2}},
          {data : datah, label : 'Humedad C', yaxis : 2,lines :{show:true , 
          fill : true, fillColor:['#A9A9F5','#FFFFFF']}, points : {show: false, radius :2}}],

             {

            selection : { mode : 'xy', fps : 30 },
            title : "TEMPERATURA Y HR DEL HALL DE MI CASA EN TIEMPO REAL Y EN BBDD",
            colors: ['#FF0000', '#00A8F0'],
            yaxis : {
                 max : null,
                 min : 18,
                 autoscale: false},
            y2axis : {
                 max : null,
                 min : null,
                 autoscale: false},
            xaxis : {
                 noTicks: 15, mode : 'time', labelsAngle: 45
                    },
            mouse: {
                 track: true,          // => true to track the mouse, no tracking otherwise
                 trackAll: true,
                 //position: 'se',        // => position of the value box (default south-east)
                 relative: true,       // => next to the mouse cursor
                 trackFormatter: function(obj){ 

                    var t = parseInt(obj.x);
                    var myDate = new Date(t-7200000);
                    var string = myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds();

                    return 'Hora = ' + string +'<br> Temp = ' + obj.y +' C'; }, 
                 margin: 5,             // => margin in pixels of the valuebox
                 lineColor: '#1AFF53',  // => line color of points that are drawn when mouse comes near a value of a series
                 trackDecimals: 1,      // => decimals for the track values
                 sensibility: 5,        // => the lower this number, the more precise you have to aim to show a value
                 trackY: true,          // => whether or not to track the mouse in the y axis
                 radius: 3,             // => radius of the track point
                 fillColor: null,       // => color to fill our select bar with only applies to bar and similar graphs (only bars for now)
                 fillOpacity: 0.4       // => opacity of the fill color, set to 1 for a solid fill, 0 hides the fill 
                    },
            legend : {
                    position : 'se',
                    backgroundColor : '#D2E8FF'
                    } ,   
            HtmlText : false

          });

   }); 

   })(document.getElementById("editor-render-0"))

    </script>

</body>
</html>
  El resultado final lo podeis ver en este enlace: Enlace BD flotr2 Espero que guste!!!!! A dormir!

10 thoughts on “Sensor DHT11 + Flotr2 (parte 2/2)

  1. Leandro Ruiz

    Muy buen aporte Jose!! Un pregunta sencilla: por qué usas 2 tablas, una para la humedad y otra para la temperatura?
    Quedaría más compacto si lo almacenas todo en una tabla con 4 campos (id, temp, hum, fecha). ¿Hay algún impedimento en el tamaño de las tablas bases de datos?

     
    Reply
    1. josehervas

      Tienes toda la razón, pero lo hice así por si en algun momento me quiero cargar la humedad, que tampoco me aporta…además así he establecido un modelo de tabla estandar que me puede servir lo mismo para tª para HR para potencia para intensidad… Pero sí, tienes razón en que me he complicado la vida, maestro.

       
      Reply
  2. Iván Herrero

    Buenas Joseee!

    Oye te suena que haya algo así para el UNO? con algun modulo de expansión?
    tengo cosillas en las que ponerte al dia y tu a mi tb….

     
    Reply
  3. moscho

    Para estos usos es recomendable aplicarse con las Round Robin Databases (RRD). Mucho más eficiente y con archivos de tamaño estático. Para raspbian en RaspberryPi tengo montado algo parecido a lo que expones funcionando con rrdtools (tutorial en español, aquí).

    Por lo demás, gracias por tu estupenda aplicación que también me ha sido útil :)

     
    Reply
    1. Jose Hervás

      Hola moscho,

      hummm nunca he trabajado con ese tipo de bases de datos, tengo un par de proyectos en mente e intentaré aplicarlo para comprobar la mejoría. Muchas gracias por la recomendación!! Me alegra que mi entrada te haya sido útil :)

       
      Reply
    1. Jose Hervás

      Muchas gracias Carlos!

      La verdad es que como solo utilizo Chrome no me había percatado de que no funcionara en otros!, te lo agradezco, lo tengo en cuenta para próximos desarrollos, además usar el formato recomendado siempre es garantía de éxito.

      Un saludo!

       
      Reply

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>