Afficheur météo, couleur tempo, conso élec, production solaire, etc

Pour ceux qui chercheraient à faire un truc dans le genre :
Voici mon projet d'affichage de différentes données d'origines diverses, assez mature pour que je puisse vous le présenter.
Le coeur (la station de base) est un LilyGo T-Display, un ESP32-S3 avec afficheur intégré de 320 x 170 pixels pouvant se mettre dans un petit boîtier.
Au début je voulais juste afficher les températures et hygrométries intérieures et extérieures (avec une sous-station extérieure), mais au fur et à mesure de la programmation (et de l'accroissement des connaissances qui va avec !) j'ai rapatrié les données d'un Shelly EM, un petit module doté d'une connexion WiFi situé dans mon tableau électrique qui mesure ce que consomme (ou rejette) ma maison et ce que produisent mes panneaux solaires. (requête HTTP Get avec extraction JSON)
J'ai ensuite ajouté un petit module qui me renvoie la tension de la batterie de stockage photovoltaïque qui se trouve dans ma cave. (requête HTTP Get vers AsyncWebserver)
Dernièrement, comme j'ai un contrat électrique tempo, j'ai ajouté le rapatriement des données pour afficher la couleur des jour J et J+1 à partir du site d'EDF. (requête HTTP Get avec extraction JSON)
Et pour finir, aujourd'hui j'ai rajouté une routine pour lire la température de mon chauffe-eau, à partir d'un TCW122, petit module domotique sur lequel est branché la sonde de température du chauffe-eau.
(requête HTTP Get qui renvoie une chaîne xml de laquelle j'extrais la température)
Tout cela fonctionne grâce à HTTPClient et AsyncWebserver. (il y a peut-être mieux mais pour l'instant j'utilise ça, je n'ai pas encore essayé ESP-NOW)
En prime Asyncwebserver me génère une page html qui reprend toutes mes données et consultable à partir de n'importe où.
C'est pour l'instant assez primitif, peut-être un jour que j'essaierai d'avoir un aspect plus "léché" avec un peu de CSS !
La page est consultable là : http://82.64.101.64:32802

Voici le synoptique de l'installation :

A noter que les 3 modules sont programmable en OTA (sans connexion physique au PC), c'est bien pratique !

Et voici à quoi ressemble l'affichage (bon, les goûts et les couleurs, hein... :smile: :

L'heure est rapatriée par un serveur NTP.
La barre rouge sous l'heure est un bargraph qui indique le RSSI entre -75 et -30 dBm
(là je suis près de ma box, le RSSI est quasi maximal)
Les ovales bleus J et J+1 de part et d'autres de la date sont la couleur du jour tempo actuel et du lendemain.
"P EDF" est la conso instantanée de la maison et "P sol" la production instantanée des panneaux solaires.
L'affichage de la température et de l'hygro externes passe en rouge quand la batterie du module déporté descend sous les 3,65 V, signalant qu'il est temps de la recharger.
L'affichage de la température intérieure et de la température du chauffe-eau est permuté toutes les 3 secondes par celui de l'hygrométrie intérieure et la tension de la batterie à la cave :


Le point jaune en haut à gauche clignote toutes les secondes, comme ça on voit de loin si l'ESP32 tourne.

En appuyant sur un touchpin en haut du boîtier un autre écran affiche les cumuls de conso et production du jour, automatiquement remis à 0 à minuit :

Les deux modules déportés (T° et hygro extérieures, tension batterie cave) sont construits autour de puces XIAO ESP32-C3 à peine plus grosses que le pouce et très pratiques pour de petits montages.

Les deux modules sont en temps normal en deep sleep, celui pour la tension se réveille toute les minutes, celui pour la T° et l'hygro toutes les 6 mn. Il est alimenté par une petite batterie LiPo 3,7 V 1000 mAh qui lui donne une autonomie d'un mois.
L'aspect extérieur du module extérieur :

Il manque encore une petite grille sur les trous et un "chapeau" pour protéger des gouttes. Le boîtier est un modèle étanche de 58 x 65 mm.
Le connecteur étanche sur le dessus sert à la recharge de la batterie.
La led rouge clignote à chaque mesure (3 clignotements rapides) et clignote lentement en continu, quand le module est prêt à être programmé en OTA (j'y reviens plus loin)

L'intérieur, câblé "en l'air", mais proprement :

Et voici le module pour la mesure de la tension de la batterie à la cave, simplement mis dans la boîte du LilyGo T-Display :


On voit les deux résistances du pont diviseur de la batterie à mesurer, et il y a aussi une petite led jaune, qui clignote de la même manière que la led rouge du module précédent.

Un petit mot sur la programmation par OTA des deux modules déportés qui sont quasiment tout le temps en deep sleep :
Bien sur en deep sleep la programmation par OTA ne marche pas. Pour sortir du deep sleep (ou plutôt pour ne pas y retourner quand les modules se réveillent) le module de mesure T°-Hygro extérieur dispose d'un petit relais reed, une sorte de contact qui se ferme quand on présente un aimant pas loin. Il suffit donc que je pose un aimant sur l'avant du boîtier (la led verte s'allume) pour qu'au prochain réveil il ne se rendorme plus (la led rouge clignote alors lentement en continu) et que je puisse lancer la programmation.
Même principe sur le module de mesure de la batterie, à part que là il y a un bête petit interrupteur qu'on voit sur la photo.

Pour une version définitive j'ai déjà prévu un montage qui reprend toutes les infos sur un seul écran plus grand de 320 x 240 pixels, à base d'un ESP32-S3 LilyGo T7-S3, il fonctionne déjà il ne me reste plus qu'à le monter dans un boîtier :

Voici encore les différents fichiers .ino du projet, ainsi que les polices utilisées pour l'affichage (elles doivent être placées dans le même répertoire que le .ino)
progs.zip (186,4 Ko)

Merci pour toute critique constructive !

Roland

2 Likes

Bonjour @rollmops67

Merci pour celle très belle réalisation !

1 Like

Bonjour @rollmops67
Magnifique réalisation ! Félicitation !
Bonnes bidouilles :wink:
Cordialement
Pandaroux007

1 Like

Salut.

C'est déjà assez léché comme cela.

Comme tu es demandeur de critiques, justement dans l'optique de créer des pages avec CSS et JS, pourquoi construire tes pages ainsi :

  String ptr = "<!DOCTYPE html><html lang='fr'>";
  ptr += "<head>";
  ptr +=   "<meta http-equiv='refresh' content='15' name='viewport' content='width=device-width, user-scalable=no' charset='UTF-8'/>";
  ptr +=   "<title>Serveur Web ESP32</title>";
  // ...
  request->send(200, "text/html", ptr);

Il serait plus simple de créer de vrais fichiers HTML, JS, etc. et de les stocker dans le filesystem de l'ESP32, LittleFS ou SPIFFS. Ensuite l'envoi se résume à une ligne :

  request->send(SPIFFS, "/index.html", "text/html", false, templateProcessor);

Où templateProcessor est une fonction fournissant les valeurs des variables nécessaires.

Par exemple, dans ton fichier HTML :

Température int. : TEMP_INT °C<br>

Dans le code :

String templateProcessor(const String& var)
{
  if (var == TEMP_INT) {
    return String(Temp_int);
  }
}
1 Like

Bonjour hbachetti et merci pour la critique constructive.

Je ne suis pas encore très au fait de ces pages placées dans le filesystem (je sais que ça peut se faire, mais mes connaissances s'arrêtent là), mais ça peut être une évolution ultérieure du projet effectivement !

Cordialement, Roland

Rebonjour hbachetti !

Alors voilà j'ai testé cette histoire de page html en mémoire SPIFFS, après avoir installé le petit outil qui permet d'uploader des fichiers en mémoire dans l'IDE d'Arduino.
Je n'ai pas essayé avec mon sketch, mais avec un exemple simple trouvé ici :
https://randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/

Ça fonctionne sans problème, maintenant je me pose quand même des questions métaphysiques sur l'utilité de la chose DANS LE CAS DE MON SKETCH...

Je m'explique : la page html dont je construit le string "ptr" dans mon sketch n'est pas si longue que ça (je l'ai encore simplifiée ce matin) et transmet 11 variables.
Donc pour commencer je me retrouverai avec un tout petit fichier html en mémoire SPIFFS...

D'autre part, dans la partie

String templateProcessor(const String& var)
{
  if (var == XXXXXX) {
    return String(xxxxxx);
  }
}

je vais devoir implémenter 11 tests "if (var ==XXXXXX" différents, ce qui va rendre mon sketch plus lourd qu'il ne l'est maintenant !

Et si un jour je rajoute une variable à afficher, il faudra de toute façon que je modifie le ficher html à mettre en mémoire SPIFFS mais aussi le sketch pour rajouter le code correspondant et une nouvelle condition "if (var ==XXXXXX"

Alors je me demande quel est l'intérêt de la chose DANS LE CAS DE MON SKETCH !
Je comprends bien que dans le cas de gros fichiers html, associés à des fichiers CSS et Javascript c'est bien plus propre.

Cela n'est pas du tout une critique de ta proposition, mais c'est juste les questions que ça me fait me poser, en tant que jeune Padawan de l'Arduino, et j'aimerai savoir comment toi tu vois cela avec ton expérience !

Cordialement, Roland

Non, puisque tu vas avoir des tartines de lignes client.println() qui vont disparaître.
Bien entendu, en partant d'un code élaboré comme le tien, cela ne vaut pas trop le coup, mais en partant de ZÉRO, c'est bien plus simple de créer des fichiers.

Oui, et surtout les fichiers HTML ou JS sont plus lisibles et plus facilement maintenables qu'en les envoyant avec des client.println().
Tes fichiers HTML peuvent aussi facilement être testés à l'aide de sites de validation de code HTML en ligne, ou à l'aide d'un navigateur, directement sur le PC.
Il y a aussi le cas des images, difficiles à gérer sans filesystem.

1 Like

Tu peux trouver un exemple ici :

Techtutorialsx est une bonne source d'information
Et bravo pour ta réalisation ! :+1:

Merci pour l'info lesept ! (j'avais déjà vu cette page hier en faisant des recherches sur le sujet)

C'est vrai que dans le cas de mon sketch ça fait quand même beaucoup de lignes avec une dizaines de "if" et "else if", ça prendra quasiment plus de place que ma chaîne string qui représente ma page html !!

Mais maintenant je sais au moins comment faire, le jour où ça se présentera, ou le jour où je voudrai améliorerer l'aspect visuel de ma page, avec un fichier html et un fichier css séparés.

En tout cas, AsyncWebserver est formidable !

Cordialement, Roland

Bravo pour ce beau projet.
Peut-être une source d'amélioration pour les capteurs extérieurs sur batterie, si c'était moi je les passerais sur LoraWan, un protocole radio longue portée très économe en énergie permettant des autonomies bien plus longues

1 Like

L'intérêt principal, c'est que tu peux modifier ta page HTML, sans devoir le redécouper et faire un tas de copier coller dans ton code.
Ce qui permet en même temps de pouvoir tester exactement ta page HTML, sans risquer de faire des erreurs de copier-coller.
Par contre si effectivement tu rajoutes des variables à ton template, il faudra les prendrezs en compte dans ton code.

1 Like

Bon, vous avez été plusieurs à me titiller avec les pages HTML mises en mémoire dans le SPIFFS.
Alors je me suis dit pourquoi pas essayer.
Et puis tant qu'à faire ça a été l'occasion de me mettre au CSS, que je n'ai jamais pratiqué.
(j'ai fait quelques sites en HTML à l'époque de AOL, de mygale.org et des modems RTC où il n'était pas encore trop question de CSS !)
Eh bien que dire, c'est fascinant toutes les possibilités qu'offre le CSS, et je suis bien conscient que pour l'instant je ne vois que la partie émergée de l'iceberg.
En tout cas, je suis plutôt content du résultat !
Pour bien faire j'ai aussi ajouté l'affichage des jours Tempo (jour J et jour J+1) dans des box qui changent de couleur selon le cas.
Ça donne ça sur l'écran d'un portable :


Dans ce exemple tôt le matin, le jour J+1 n'est pas encore connu, c'est pour ça que la box a la couleur du fond)
J'ai essayé de formater la page pour qu'elle s'affiche correctement sur PC et sur l'écran d'un GSM (testé avec Firefox et Chrome), si vous pouviez essayer et me dire si ça s'affiche bien chez vous, merci.
C'est à cette adresse : http://82.64.101.64:32802

Du côté de Arduino IDE j'ai remarqué un truc :
Quand je sélectionne comme carte "LilyGo T-Display-S3" (ce qui correspond à l'ESP utilisé) je n'ai comme "Partition Scheme" que "16MB Flash (3MB APP/9.9 MB FATFS)" ce qui a pour l'effet que je ne peux pas charger de fichiers dans le système de mémoire SPIFFS.
Je dois donc sélectionner comme carte "ESP32S Dev Module" (tout en haut de la liste des cartes ESP32), et avec les réglages suivants ça le fait bien, et l'OTA fonctionne aussi :

Eh bien merci à ceux qui m'ont rendu curieux, voici encore tous les fichiers utilisés par le projet :
fichiers.zip (230,9 Ko)

Bonne(s) bidouille(s) à tout le monde !

Roland

L'affichage est parfait sur mon petit Sony 5 pouces.
Content d'avoir titillé ta curiosité.

As tu utilisé la fonction debug(F12) de ton navigateur et joué soit avec le responsive ou les formats prédéfinies?

1 Like

Bonjour @rollmops67,
Affichage parfait

@terwal :
Non non j'ai simplement mis un

<meta name="viewport" content="height=device-height, initial-scale=0.75">

dans la page html, en jouant un peu sur l'initial scale pour que ça "rentre" bien dans divers types d'affichages.
Avec "height" plutôt que "width" car la page est plus haute que large.

Roland

Je parlais pour tester le rendu de ta page dans chrome, pas du HTML :slight_smile:

Bonjour !

Après quelques mois mon projet est enfin achevé.
L'écran à pas cher de chez Aliexpress ayant des angles de vision, un contraste et un rendu des couleurs plutôt prout-prout, j'ai investi dans un écran 5" de 800x480 pixels à dalle ISP de chez buydisplay.com, il n'y a pas photo, c'est un autre monde niveau qualité.
Et comme l'écran est plus spacieux j'y ai logé des indications supplémentaires ("bargraphs" ronds, éphémérides...).
Le tout mis dans un petit boîtier maison en contreplaqué de 1,5 mm, je suis plutôt content du résultat !
La luminosité de l'écran s'ajuste bien sûr à la luminosité ambiante.

Merci encore à tous ceux qui m'ont aidé à surmonter les écueils logiciels liés à ce projet (pas que dans ce fil de discussion) et en particulier à celui qui sait même réparer des tireuses à bière ! :upside_down_face:

Quelques photos du bidule :

L'arrière de l'écran avec l'ESP32 Lilygo T7-S3 collé dessus. (la résistance est le pull-up pour la LDR en face avant)

L'arrière une fois câblé, le cable rouge-bleu-blanc-jaune à droite est l'alim et le bus I2C de la sonde de T° intérieure que j'ai préféré déporter un petit peu, vu que l'ESP32 chauffe un peu, même à 80 MHz.
Le fil blanc va à la LDR soudée dans les trous d'un connecteur qui dans le cas de mon écran est inutilisé.

L'avant avant mise en boîte...

Et le tout fini...

2 Likes

Superbe réalisation :+1:

Bravo !