Interface météo

image_interface_accueil

Bonjour à tous !

Aujourd’hui je vais vous parler de mon interface web de visualisation météo. En effet, je vous ai parlé dans d’autres articles de ma station météo fait maison qui envoyait des données sur Thingspeak,et qu’ensuite je venais récupérer ces données dans une interface. Je vais donc vous parler de cette interface de visualisation de données.

Aimant beaucoup le web, j’ai décidé de créer cette interface de A à Z avec des langages basiques comme le PHP, le JavaScript et le HTML/CSS pour la mise en forme. Pour faciliter quand même la mise en forme j’ai décidé d’utiliser Foundation Zurb (lien) qui est un framework de mise en page. Il est du même type que Bootstrap (lien) ou d’autres framework, mais j’ai décidé d’utiliser celui-ci pour changer de Bootstrap.

Le système de mise en page est assez simple, comme tous les framework CSS il utilise le principe de grilles.

image_grid_foundation

Pour positionner des éléments sur la page, on crée un container principal et ensuite on divise cette page en plusieurs parties pour placer l’élément voulu au bon endroit.

On va maintenant rentrer dans le vif du sujet qu’est mon interface météo. Voici la page qui affiche la dernière donnée de météo enregistrée sur Thingspeak:

image_interface_last

On peut donc voir sur cette interface les trois modules: le bureau, le salon et l’extérieur. Et chaque module est divisé en deux parties, la première est la température et la deuxième est l’humidité.

Cette première page permet de voir les dernières données enregistrées sur Thingspeak, et donc la température/humidité des différents endroits à une ou deux minutes d’intervalles.

Et sur une deuxième page je peux voir les moyennes heure par heure sur une ou deux journées ou sur une semaine:

image_interface_median

Je n’ai pas mis l’intégralité de l’interface étant donné que les deux autres graphiques sont du même type.

Maintenant je vais un peu plus m’attarder sur le développement même de ces interfaces.

Pour commencer, concernant la récupération des données pour afficher la dernière donnée de ThingSpeak (lien) j’ai tout simplement fait appel à l’API comme ceci:

$url_exterieur = "https://api.thingspeak.com/channels/261091/feeds.json?results=1&timezone=Europe%2FParis"; 

$jsondata_exterieur = file_get_contents($url_exterieur);
$obj_exterieur = json_decode($jsondata_exterieur, true);
for ($i = 0; $i < count($obj_exterieur['feeds']); $i++) {
    $hum_exterieur[] = $obj_exterieur['feeds'][$i]['field2'];
    $temp_exterieur[] = $obj_exterieur['feeds'][$i]['field1'];
    $date = list($year, $month, $day) = explode("-", explode("T", $obj_exterieur['feeds'][$i]['created_at'])[0]);
    $date_exterieur = $day . "/" . $month . "/" . $year;
    $heure_exterieur = explode("+", explode("T", $obj_exterieur['feeds'][$i]['created_at'])[1])[0];
}

Donc je récupère l’url de l’API avec le channel dans l’url, j’importe le JSON avec le file_get_contents, et je parcours mon tableau pour récupérer les données qui m’intéressent.

Ensuite pour faire les moyennes c’est un peu différent, en effet j’ai préféré le faire en JavaScript:

function getData(place, duration){
    if (( place !== "") & (duration !== "")){
        var days = duration;
        var channel;
        var url;
        switch (place){
            case "salon":
                channel = 202142;
                url = 'https://api.thingspeak.com/channels/'+channel+'/feeds.json?average=60&days='+days+'&timezone=Europe%2FParis';
                console.log(url);
                break;
            case "bureau":
                channel = 202140;
                url = 'https://api.thingspeak.com/channels/'+channel+'/feeds.json?api_key=C7GLOK1EY3C4GXVY&average=60&days='+days+'&timezone=Europe%2FParis';
                console.log(url);
                break;
            case "exterieur":
                channel = 261091;
                url = 'https://api.thingspeak.com/channels/'+channel+'/feeds.json?average=60&days='+days+'&timezone=Europe%2FParis';
                console.log(url);
                break;
        }
    }

    jQuery.getJSON(url, function (data) {
        console.log(data);
        var toto = JSON.stringify(data);
        var jsonData = JSON.parse(toto);
        console.log(jsonData);
        var hum = [];
        var temp = [];
        var time = [];
        for (var i = 0; i < jsonData.feeds.length; i++) {
            var counter = jsonData.feeds[i];
            temp.push(Math.trunc(counter.field1));
            hum.push(Math.trunc(counter.field2));
            time.push(counter.created_at.slice(11, 16));

        }
        highchart(time, temp, hum, place);
    });

}

function highchart(time, temp, hum, place){
    var placeTo;
    switch(place){
        case "bureau":
            placeTo = 'cond_bureau';
            break;
        case "exterieur":
            placeTo = 'cond_exterieur';
            break;
        case "salon":
            placeTo = 'cond_salon';
            break;
    }
    Highcharts.chart(placeTo, {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Average Temperature and Humidity'
        },

        xAxis: {
            categories: time
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        series: [{
            name: 'Temperature (°C)',
            data: temp
        }, {
            name: 'Humidity (%)',
            data: hum
        }]
    });
}

J’ai donc crée des fonctions pour effectuer l’import de mes données. La première fonction se nomme getData avec en paramètres l’endroit (place) et la durée (duration), ce qui me permet de demander le nombre de données que je veux et l’endroit où je veux les récupérer.

Pour rentrer dans la boucle, je vérifie que place et duration soient pas vides. Et je fais un switch/case pour conditionner où je veux récupérer les données ce qui me permet de créer les url pour récupérer les données. Une fois cette condition terminée, je sors de la fonction et JQuery.getJSON récupère l’url créée par getData en créant 3 tableaux (temp, hum, time) et ajoute les valeurs moyennes tronquées à l’entier à la fin de chaque tableau. Une fois l’ajout terminé, on fait appel à la fonction highchart() avec en paramètres les trois tableaux et l’endroit demandé au début.

Highchart() va donc créer les graphiques avec les valeurs des moyennes en propriétés. Si vous voulez plus d’informations sur HighCharts je vous laisse aller ici.

Voilà, je pense avoir suffisamment expliqué comment j’avais fais pour récupérer et afficher mes données de météo sur un site personnel. J’espère que ça vous aura plu, n’hésitez pas à laisser un commentaire si vous avez des questions.

Si vous voulez voir la dernière version de la station météo je vous laisser aller voir ici et si vous voulez voir la première version cliquez ici.

A bientôt !

F.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.