Accueil / esp8266 / ESP8266 (Web Serveur – Partie 5) : gauges et graphiques Google Charts

ESP8266 (Web Serveur – Partie 5) : gauges et graphiques Google Charts

Maintenant que nous disposons d’un historique de mesures, nous allons ajouter des graphiques à l’interface Web de l’ESP8266 à l’aide de la librairie Google Charts. Il existe de très nombreuses librairies pour créer des graphiques et des gauges en Javascript / HTML5. Google Charts est une librairie très riche qui propose 28 modèles différents (ligne, gauge, histogramme horizontal ou vertical, gant, camembert, bulle, carte, radar…) suffisante pour débuter et créer une belle interface. Nous verrons dans un prochain tutoriel d’autres librairies avec un affichage plus moderne.

Préparer les données pour l’histogramme en barre

Nous allons commencer par créer un petit histogramme qui nous permettra de voir l’évolution de la température moyenne (et l’humidité) durant les 7 dernières heures (la période d’enregistrement définie dans le tutoriel précédent). Sauf erreur de ma part, il n’y a pas de librairie pour faire de la classification de mesures sur Arduino (dites le moi dans les commentaires sinon). Je vous propose un petit algorithme rapide qui permet de calculer la température et l’humidité moyenne pour 7 classes (1 classe par heure).

Cet algorithme n’est probablement pas le meilleur pour ça mais l’objectif de ce tutoriel est la mise en place de graphiques Google Charts et l’envoi des données depuis le code Arduino vers l’interface Web.

Comment ça marche ?

  1. On initialise deux tableaux (statTemp et statHumi) ayant comme valeur initiale -999 (ou toute autre valeur arbitraire).
  2. On calcul la taille d’une classe sizeClass = sizeHist / nbClass
  3. On parcours le tableau des données (uniquement lorsqu’il est plein, il faudra optimiser ça). la variable k donne la position dans le tableau
  4. Si la cellule est vide (-999) alors on lui attribue la valeur courante. Sinon on calcul la valeur moyenne (valeur actuelle + valeur précédente / 2)
  5. On test si on doit changer de classe ( k + 1 ) > sizeClass * ( currentClass + 1 )
  6. On met à jour les deux tableaux dans le JSON (bart et barh).

Ajouter des graphiques Google Charts à une interface Web ESP8266

Passons maintenant aux choses sérieuses.

La librairie Google Charts

Google est décidément partout. La librairie Google Charts est une librairie qui existe depuis 2008. Ce n’est pas la librairie la plus belle qui existe mais elle est assez simple à mettre en oeuvre et surtout il est assez facile de créer des graphiques temps réel (ou du moins qu’on va mettre à jour très souvent). Nous testerons d’autres librairies ultérieurement. La documentation (uniquement en anglais) et assez bien faite. Seul bémol, actuellement certains graphiques sont disponibles dans l’ancienne version et dans la nouvelle (Material Design). C’est assez facile de le repérer, par exemple pour tracer un graphique en ligne (Line Chart), on peut faire

ou pour la nouvelle version (Material Design)

Toutes les options ne sont pas encore disponibles dans la version Material Design, ce qui rend assez fastidieux la mise au point. Si l’aspect esthétique n’est pas primordial pour vous, je vous conseille de rester sur l’ancienne version.

esp8266 web server google charts graphiques

Code HTML

Pour charger la librairie, il suffit d’ajouter dans la section Head cette référence

Ajout d’un Panel Bootstrap

La classe panel de Bootstrap permet de présenter des données sous la forme d’une carte avec une entête (documentation Bootstrap). Nous allons nous en servir pour créer une entête contenant les mesures actuelles renvoyées par les capteurs (DHT22 et BMP180).

Le Panel est constitué d’une entête, classe panel-heading. Si on veut ajouter un titre, il faudra ajouter à la classe h1 (ou hx) la classe panel-title. Mais rien ne nous empêche de mettre d’autres choses dans le heading. Ici on va simplement ajouter une row qui sera découpée en 3 colonnes égales (col-md-4). Pour la rendre adaptable (responsive) sur les écrans de petite taille, on lui ajoute la classe col-xs-4 (par exemple). Dans chaque colonne, on place simplement un identifiant qui nous servira à afficher le contenu dès que des valeurs sont disponibles.

Ce qui donne le code Pug suivant

Voici ce qu’on va obtenir

esp8266 web server bootstrap panel title header

Ajout des graphiques (ligne, histogramme vertical, gauge) sur 2 colonnes

Les graphiques vont prendre place dans une autre div de classe panel-body. On va simplement ajouter 2 lignes découpées en 2 colonnes. Soit 4 cellules. Dans chaque cellule, on viendra y placer un Google Chart. Dan la code HTML, il n’y a rien a définir à part un style. Ici, on prend toute la largeur disponible (width: 100%) et on fixe une hauteur, par exemple height:300px. Pour la gauge, j’ai simplement ajouté une marge à gauche (margin-left:25%) car par défaut elle est collée sur le bord gauche.

Enfin vous avez du remarquer un titre h2 que l’on rendra visible s’il n’y a pas d’histogramme à afficher et inversement.

Code Javascript

En fonction du type de graphique désiré, on doit charger des packages complémentaires en plus du corechart.

Ensuite on indique la fonction qui sera lancée dès que la page aura été chargée et que les ressources auront été récupérées et chargées.

Pour créer un graphique, on doit déjà créer un objet en lui indiquant son type. On récupère sa destination avec la fonction document.getElementById (par exemple).

Ensuite, il existe plusieurs méthodes pour attribuer des options et des données, en voici une. On créé un tableau de données.

Puis on ajoute les colonnes qui contiendrons les valeurs du graphique. On doit indiquer le type de donnée pour chaque colonne. Il faut se reporter à la documentation pour connaitre les formats disponibles (data format) pour le graphique souhaité, ici par exemple pour un AreaChart. Ici le temps est de la forme timeofday (heure tout simplement !).

On peut aussi définir des options, par exemple la position de la légende (position: »bottom » pour la placer en dessous, « none » pour désactiver son affichage), le libellé des axes, etc… Un exemple pour l’AreaChart

Maintenant, il ne reste plus qu’à créer une fonction chargée de récupérer des données depuis l’ESP8266 et les afficher à l’écran. Pour cela, on va simplement utiliser la fonction jquery $.getJSON déjà utilisée dans le tutoriel précédent. Pour éviter de gaspiller les ressources de l’ordinateur, smartphone ou tablette et ESP8266, on vérifie que le panneau des graphiques est bien actif avant de faire une actualisation

Traitement du JSON envoyé par le Web Server ESP8266

On va récupérer les données sous la forme d’un JSON. Par exemple

On va devoir faire une petite boucle qui parcours le tableau timestamp pour ajouter à chaque fois une nouvelle ligne au tableau des données du graphique. Par exemple ici on prépare les données pour le graphique température / humidité du DHT22. La première colonne doit contenir une heure. Pour cela on va utiliser la fonction javascript new Date qui est capable de convertir un timestamp unix en une date. Il faut multiplier par 1000 car la fonction attend des milli-secondes, le timestamp est en secondes dans ce cas. Enfin, on indique la date sous la forme d’un tableau [HH,MM,SS]. Désolé, mais faut faire avec l’API Google ! Le traitement du temps est toujours un problème finalement !

On ajoute ce bloc de valeurs d’un coup avec la fonction addRows. Attention, la fonction addRow existe aussi (pour une seule ligne).

Ici, j’ai choisi de ne pas conserver les anciennes valeurs, on va donc les supprimer avec la fonction removeRows qui prend comme paramètre l’index et le nombre de lignes à supprimer.

Affichage et actualisation automatique des graphiques

Tout est prêt, on peut demander au navigateur d’afficher le graphique chartTemp.

On peut masquer un graphique s’il est vide et afficher un message d’information à la place. Il suffit de tester le nombre de ligne dans le tableau de données avec la méthode getNumberOfRows(). Ensuite un show() ou hide() sur l’élément concerné pour le rendre visible ou le masquer. Le tour est joué.

Il ne reste plus qu’à laisser au navigateur le soin d’actualiser régulièrement les graphiques en créant un timer à l’aide de la fonction setInterval(). On place le timer juste avant la fonction updateGraph().

Code Arduino

On va ajouter un appel à la fonction sendHistory() lorsque le serveur Web intercepte un appel sur la page /graph_temp.json.

Toutes les mesures sont stockées dans un objet JSON à l’aide de la librairie ArduinoJSON (tutoriel précédent). Il est très simple d’en générer une chaine de caractères à l’aide de la fonction printTo. qui stocke le résultat dans un buffer. Il faudra donc disposer d’assez de mémoire sinon l’export sera impossible. On envoi au client le JSON sérialisé de manière classique avec server.send().

Attention à rester raisonnable et ne pas demander une actualisation des graphiques chaque seconde. Avec peu de données, l’ESP8266 va encaisser, mais pour combien de temps… Pour connaitre la fréquence minimale à ne pas dépasser, regardez le temps pour obtenir une réponse avec les outils de développement d’un navigateur.

Code final du projet

Template Pug

Le Template Pug (ancien Jade) plus facile à comprendre, modifier, corriger que du code HTML.

Code HTML

Le code HTML généré à partir du template Pug ci-dessus.

Code Arduino

Et le code Arduino à téléverser dans l’ESP8266. Le code est prévu pour une Wemos D1 Mini équipée d’un Shield DHT22 ainsi qu’un BMP180 sur bus I2C.

Interface obtenue

Connectez-vous sur l’ESP8266 depuis un navigateur. Attendez quelques secondes pour obtenir les premières mesures. Le deux graphiques en haut permettent de suivre l’évolution de la température, de l’humidité et de la pression atmosphérique sur la période d’enregistrement (ici 40 minutes). La pression atmosphérique est également reportée sur une gauge. Les couleurs sont réelles (rouge pour risque de tempête et pluie), orange (temps variable), vert (beau temp). Il n’est pas possible de définir d’autres zones, ce qui est dommage. Enfin, l’histogramme permet de suivre l’évolution moyenne de la température et de l’humidité. Ici, chaque barre représente 6 minutes environ.

esp8266 web server spiffs bootstrap dht22 bmp180 google charts

Voilà, notre série de tutoriel sur la programmation Web Server des ESP8266 touche bientôt à sa fin. Dans le prochain tutoriel, nous verrons comment mettre à jour « dans les airs » (OTA) le programme Arduino.