Publié le

Station météo maison couplée à une station Netatmo Part.1

Les modules additionnels Netatmo étant un peu cher, j’ai décidé de me faire des petits modules maison avec un ESP8266 et des ds18b20/DHT11-22.

Bien sur, je n’ai pas envie de faire un truc tout moche, donc pour les graphiques je me suis penché sur Highstocks.

Alors d’entrée j’ai bloqué : on doit utiliser du Javascript et moi je sais pas en faire… Ça commence bien…

Alors j’ai essayé de comprendre quand même, mais l’import des données avec json.encode() dans le php m’a un peu saoulé car sur les démos de Highstocks, c’était pas encodé pareil… Du coup sauce maison !

Pour la partie base de donnée, il suffit de regarder mes tutos précédents pour alimenter la BDD avec les relevés Netamo.

1. Encodage des données pour Highstock :

En regardant les démos, j’ai vu que le format des données étaient du style :

[
[data1,data2],
[data1,data2],
[data1,data2],
[data1,data2],
[data1,data2],
[data1,data2],
[data1,data2]
]

Du coup, je me suis fait un fichier temperaturenetatmo.php qui quand je l’exécute m’affiche les données sous cette forme :

<?php
include('connexionDB.php');

$date = 1445538928*1000;
echo "[";
$i=0;
$sth = mysql_query("SELECT datemesure, temp_int, temp_ext, pres, hum_int, hum_ext FROM netatmo");
$rows = array();

while($r = mysql_fetch_array($sth)) {
    if (date("I",time())==0){
    	if (($r["datemesure"]+3600)*1000-$date > 30*60*1000)
    	{
    		$date2 = $date + 1000;
    		$rows[] = "[".$date2.",null,null,null,null,null]";
    		$i = $i +1;
    	}
    	$date = ($r['datemesure']+3600)*1000 ;
    	$rows[] = "[".$date.",".$r["temp_int"].",".$r["temp_ext"].",".$r["pres"].",".$r["hum_int"].",".$r["hum_ext"]."]";
    	$i = $i +1;
	}
	else {
		if (($r["datemesure"]+3600)*1000-$date > 10*360*1000)
    	{
    		$date2 = $date + 1000;
    		$rows[] = "[".$date2.",null]";
    		$i = $i +1;
    	}
		$date = ($r['datemesure']+3600)*1000 ;
		$rows[] = "[".$date.",".$r["temp_int"].",".$r["temp_ext"].",".$r["pres"].",".$r["hum_int"].",".$r["hum_ext"]."]";
        $i = $i+1;
	}
}
for ($j = 0 ; $j<$i-1; $j ++){
	echo $rows[$j];
	echo ",";
}
echo $rows[$i-1];
echo "]";

mysql_close($con);
?>

Quelques précisions :

$date = 1445538928*1000;

Est la PREMIERE date de ma table (elle me permet de définir mes « null » quand il n’y a pas de données dans un intervalle de 30 minutes.

On remarque aussi que je multiplie toutes mes dates par 1000 : le temps en javascript prend en compte les milisecondes, on multiplie donc le timestamp php qui lui ne les prend pas.

Voici un extrait de la sortie :

[
[1428155100000,20.4,14.4,1015.1,67,61],
[1428156900000,20.5,14.3,1014.9,67,63],
[1428158700000,20.2,14.4,1014.6,68,63],
[1428158701000,null,null,null,null,null],
[1428176700000,20.4,12.1,1014.1,67,74]
]

La première partie est finie (j’y ai passé 3 jours quand même (en comptant le temps passé avec json.encode() ).

2. La partie Highstock :

Avant de vous dire le pourquoi du comment, voilà ce que je voulais obtenir :

chart

C’est là que la déprime a commencé… Heureusement que les démos sur Highstocks sont pas mal, je me suis inspiré de :

Et voilà mon code :

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Surveillance maison</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>



<script type="text/javascript">



$(function () {
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({
lang: {

months: ["Janvier "," Février ","Mars "," Avril "," Mai "," Juin "," Juillet "," Août "," Septembre ",
" Octobre "," Novembre "," Décembre"],
weekdays: ["Dim "," Lun "," Mar "," Mer "," Jeu "," Ven "," Sam"],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
decimalPoint: ',',
resetZoom: 'Reset zoom',
resetZoomTitle: 'Reset zoom à 1:1',
downloadPNG: "Télécharger au format PNG image",
downloadJPEG: "Télécharger au format JPEG image",
downloadPDF: "Télécharger au format PDF document",
downloadSVG: "Télécharger au format SVG vector image",
exportButtonTitle: "Exporter image ou document",
printChart: "Imprimer le graphique",
loading: "Chargement...",
rangeSelectorFrom: "Du",
rangeSelectorTo: "au"
 }

});
    $.getJSON('temperaturenetatmo.php', function (data) {

        // split the data set into temp_int and temp_ext
        var temp_int = [],
            temp_ext = [],
            rose = [],
            pression = [],
            hum_int = [],
            hum_ext = [],
            dataLength = data.length,
            // set the allowed units for data grouping


            i = 0;

        for (i; i < dataLength; i += 1) {
            temp_int.push([
                data[i][0], // the date
                data[i][1], // température intérieure

            ]);

            temp_ext.push([
                data[i][0], // the date
                data[i][2] // température extérieure
            ]);

            rose.push([
                data[i][0], // the date
                (Math.pow(data[i][5] /100,0.125)  )*(112+0.9*data[i][2])+0.1*data[i][2]-112 // point de rosée
            ]);

             pression.push([
                data[i][0], // the date
                data[i][3] // pression
            ]);
            hum_int.push([
                data[i][0], // the date
                data[i][4] // hum int
            ]);
            hum_ext.push([
                data[i][0], // the date
                data[i][5] // hum ext
            ]);
            }


        // create the chart
        $('#container2').highcharts('StockChart', {

             rangeSelector : {
                buttons : [ {
                    type : 'hour',
                    count : 12,
                    text : '12h'
                },{
                    type : 'day',
                    count : 1,
                    text : '1j'
                },{
                    type : 'day',
                    count : 7,
                    text : '1s'
                },{
                    type : 'month',
                    count : 1,
                    text : '1m'
                }, {
                    type : 'all',
                    count : 1,
                    text : 'Tout'
                }],
                selected : 1
            },

            title: {
                text: 'Données Netatmo'
            },

            yAxis: [{

                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'Température'
                },
                height: '30%',
                lineWidth: 2
            }, {
                labels: {
                    align: 'right',
                    x: -3
                },
                height: '30%',
                offset: 0,
                lineWidth: 2
            },{
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'Pression'
                },
                top: '35%',
                height: '30%',
                offset: 0,
                lineWidth: 2,
                plotLines: [{
                value: 1015,
                width: 1,
                color: 'red',
                zIndex : 2,
            }],
            },{
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'Humidité'
                },
                top: '70%',
                height: '25%',
                offset: 0,
                lineWidth: 2
            },{
                labels: {
                    align: 'right',
                    x: -3
                },
                top: '70%',
                height: '25%',
                offset: 0,
                lineWidth: 2
            }],
            xAxis: {
                ordinal: false,
                alternateGridColor: '#F0FFFF'
            },
            tooltip: {
                    xDateFormat: '%a %d %b %H:%M'

                },
            plotOptions: {
                line: {
                    connectNulls: false
                        }
            },
            series: [{
                name: 'T° Intérieure',
                data: temp_int,
                tooltip: {
                    valueDecimals: 2,
                    valueSuffix:' °C'
                }
            }, {
                name: 'T° Extérieure',
                data: temp_ext,
                yAxis:0,
                tooltip: {
                    valueDecimals: 2,
                    valueSuffix:' °C'
                }
            },{
                name: 'Point de Rosée',
                data: rose,
                yAxis:0,
                tooltip: {
                    valueDecimals: 2,
                    valueSuffix:' °C'
                }
            },{
                name: 'Pression',
                data: pression,
                yAxis: 2,
                tooltip: {
                    valueDecimals: 0,
                    valueSuffix:' hPa'
                }
            },
            {
                name: 'Humidité intérieur',
                data: hum_int,
                yAxis: 3,
                tooltip: {
                    valueDecimals: 0,
                    valueSuffix:' %'
                }
            },{
                name: 'Humidité extérieur',
                data: hum_ext,
                yAxis: 3,
                tooltip: {
                    valueDecimals: 0,
                    valueSuffix:' %'
                }
            }]
        });
    });
});


</script>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    </head>
    <body>

       <div id="container2" style="width: 50%; height: 95%; float: left; "></div>


    </body>
</html>

 

Une réflexion au sujet de « Station météo maison couplée à une station Netatmo Part.1 »

  1. […] des données Netatmo et ajouter la pluviométrie (Que je vais devoir aller ajouter dans Station météo maison couplée à une station Netatmo Part. 1 ça sera donc la partie […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *