ESP8266 – mesurer, stocker et afficher un graphique de température

La semaine dernière, nous avons réalisé un abreuvoir connecté ! Dans cet article, nous avons vu comment utiliser la capacité de l’ESP à servir de webserveur pour héberger une application.

Cette semaine, on reste dans ce thème… Cette fois-ci, nous ne réaliserons pas un web serveur qui interagira avec l’utilisateur, mais une page web qui affichera des données reçues de manière unidirectionnelle.

En réalité, nous allons utiliser l’ESP comment un moyen d’afficher, mais aussi de stocker des données.

L’époque des ESP01 qui embarquaient seulement 512ko de mémoire flash est maintenant loin. La carte wemos d1 mini par exemple à communément 4Mo ! Cette mémoire est largement suffisante pour utiliser la mise à jour OTA, stocker des fichiers de configuration et enregistrer périodiquement des mesures de températures.

Rappelez-vous de l’article ou nous avons réalisé une courbe de température avec node-red. Dans celui-ci, j’ai montré comment récupérer la température puis l’envoyer à un raspberry. Le raspberry servait en quelque sorte de base de données pour stocker puis afficher les données ainsi recueillies (grâce à node-red).

Cette semaine, on oublie tout ça puisque nous allons tout faire sur l’ESP ! Je suis plutôt fière du résultat qui je pense est plus aboutie que dans l’article sur node-red en termes d’affichage. L’idée de ce projet m’est venue du magazine Hackable n°29 !

Code arduino

Cet article comme vous l’aurez deviné traitera en grande partie de programmation. Le montage électrique est très simple comme vous pouvez le voir ci-dessous :

Si toutefois, vous avez des problèmes pour utiliser le bus I2C vous pouvez toujours jeter un œil à mon ancien article sur le BME280 dans lequel j’en parle plus longuement.

Avant de rentrer dans le vif du programme, voici un petit algorigramme qui résume ce que nous allons réaliser :

Dans le programme arduino, vous retrouverez la classique option pour mettre à jour notre code à distance (mise à jour OTA). Pour me connecter à ma box internet j’ai cette fois-ci opté pour un stockage en mémoire.

Voici un lien vers le code à lancer pour permettre de stocker votre SSID et votre mot de passe dans la mémoire de l’ESP. Grâce à cette fonctionnalité, vous n’aurez plus besoin de l’écrire par la suite.

Étant donné que notre but est d’afficher de manière chronologique sous forme de graphique la température, j’ai aussi utilisé la librairie timeClient. Elle va nous permettre de récupérer la date et l’heure grâce à des serveurs NTP mis à disposition.

Cette librairie est elle aussi simple à utiliser, voici un lien vers une courte documentation.

Pour récupérer la température mesurée par le BME j’utilise la classique libraire d’adafruit. Je ne reviens pas dessus non plus, voici un tuto pour apprendre à l’utiliser.

Avant d’aller plus loin, nous allons charger les fichiers qui vont nous être utiles dans la suite du programme. Nous aurons donc un fichier index.html pour la page web et un fichier temperature.csv qui contiendra la température en fonction du timestamp.

Pour ce faire nous devons créer un dossier /data à la racine du projet. Dans celui-ci nous déposerons les fichiers que l’on souhaite.

Stockage

Une fois cela fait, il faut qu’on les charge dans la mémoire de l’ESP8266. Nous ne pouvons pas les charger comme nous faisons avec le code puisque la mémoire flash est divisée en plusieurs espaces dédiés à tel ou telle fonctionnalité (comme ArduinoOTA par exemple).

Avec platformio nous devrons exécuter la commande suivante : paltformio run –target uploadfs.

Celle-ci va charger nos fichiers à partie de la case mémoire qui correspond à l’espace de stockage SPIFFS (qui est un système de gestion de ficher comme vous avez sur windows).

Si tout se passe bien vous pouvez maintenant utiliser la librairie SPIFFS pour pouvoir interagir avec ces fichiers pratiquement comme dans une arborescence linux ou windows.

La fonction loop() ira donc stocker toute les X secondes, la température et le timestamp dans le fichier temperature.csv.

Pour que l’on puisse par la suite traiter le contenue du fichier j’ai arbitrairement décidé séparer chaque timestamp de la température par une virgule puis de séparer chaque lot de donnée par un point-virgule.

La partie arduino est presque terminée à vrai dire… Il ne nous reste plus qu’à déterminer les chemins vers les fichiers de la mémoire SPIFFS dans la fonction setup().

Code Javascript

Le code JavaScript a été pour moi plus complexe à réaliser que le code arduino…

Pour faire de superbes graphiques interactifs, j’ai utilisé le framework Highcharts. C’est un framework qui offre la possibilité d’afficher esthétiquement et simplement vos données. Highcharts offre un éventail assez vaste d’affichage (pas forcément en courbe) qui remplira à coup sûr vos envies.

Parmi les services proposés, une catégorie de graphique a retenu mon attention. Le service Highstocks est spécialisé pour réaliser des graphiques sur une longue période de temps.

Le site propose de nombreuses démos de graphiques qui vont servir de base pour créer celui qui nous plait.

Ce que j’ai beaucoup aimé avec l’une de des démos de graphique highstocks c’est la flexibilité de l’accès à une certaine plage de donnée. Vous pouvez sélectionner une plage en touchants aux boutons sur la partie supérieure ou sélectionner manuellement votre plage en utilisateur le slider de la partie inférieur.

C’est maintenant que vient la partie galère ahah… Nous devons donc récupérer les données stockées dans le fichier temperature.csv, les ajouter à un tableau qui sera le lot de données sur lequel reposera le graphique.

La documentation de highcharts montre comment sont organisés les éléments d’un tableau. Vous y trouverez de tout ! Des boutons, au quadrillage du tableau vous pourrez presque tout personnaliser. Je me suis personnellement appuyé sur un exemple basique. J’ai ensuite, petit à petit ajouté/modifié les fonctionnalités que je trouvais sympas. A vous de créer votre propre graphique final).

Programmer avec highcharts

C’est l’option data de la section série qui se verra attribué notre tableau. Il devra obligatoirement être de la forme suivante :

TableauGénéral [

TableauData-0[timestamp, température],

TableauData-1[timestamp, température],

Ect…

]

Pour ce faire, j’ai tout d’abord extrait le contenue brute du fichier temperature.csv en simulant toute les X secondes (X qui sera de préférence égale au X d’ajout des données) une requête XMLhttp vers le fichier.

Ces données brutes vont ensuite être « splitter » puis ajouter dans un tableau intermédiaire qui aura la forme suivante :

[timestamp, température]

Puis dans un tableau final!

A NOTER:

Le timestamp fourni par le serveur NTP est en seconde alors que le timestamp que Highcharts attend est en milliseconde ! Pensez à multiplier celui-ci par 1000 avant d’ajouter le tout au tableau final.

Après cela (à la fin du script) on appelle cette fonction ! N’oubliez pas dans le header de la page d’ajouter les sources JavaScript nécessaires pour faire fonctionner highcharts. Il faut également ajouter une meta qui rafraichira la page automatique toute les X secondes. Cette dernière est utile si vous avez ajouté très régulièrement des données et/ou que vous prévoyez un écran dédier à l’affichage de la température par exemple.

Avec la mémoire dédiée à SPIFFS de la wemos D1 mini ne vous attendez pas à stocker un an de température ! À vrai dire, tout dépend du temps entre chaque ajout.

C’est pourquoi je pense faire dans une seconde partie dans laquelle j’expliquerai comment ajouter un système permettant d’éviter les saturations. Si cela vous intéresse, abonnez-vous à ma newsletter vite (c’est ici que je publierai le complément d’article) ! Si vous tombez sur cet article dans un futur plus ou moins lointain vous pouvez toujours vous abonner. Je partage chaque jeudi des trucs cools 😉.

Voici le genre de résultat que j’ai obtenue après quelques heures de fonctionnement !

-> CODE <-

Reçois 1 un petit guide de réalisation DIY par semaine!

+

Du contenu bonus offert à chaque nouvel article!