asynchronous web controlled thermostat

ESP32 thermostat Web contrôlé asynchrone

Ce projet est sorti d'une discussion que j'ai eue avec Yves Bourdon, sur le Forum aléatoire de laboratoire de tutoriel NERD, sur la façon d'implémenter une interface Web mise à jour pour contrôler un ESP32, sans avoir besoin de recharger toute la page ou de soumettre un formulaire. En d'autres termes, l'idée ici est d'effectuer des demandes asynchrones du navigateur client pour interroger le microcontrôleur sur l'état des données à afficher, puis pour effectuer des mises à jour locales de l'interface utilisateur dès que les données fournies par l'ESP32 sont reçues.

Il existe plusieurs techniques pour y parvenir, notamment l'utilisation de webockets, que je préfère de loin aux méthodes traditionnelles qui reposent sur l'Ajax. Néanmoins, Yves voulait comprendre comment mettre en œuvre cette technique avec Ajax. C'est le but de ce projet. Un autre suivra pour illustrer comment procéder avec WebSockets ...

Aperçu du projet

Pour répondre à la demande initiale de Yves pour un thermostat connecté, j'ai choisi de configurer un circuit assez simple avec un capteur de température ESP32 et DHT11 (mais tout capteur peut faire le travail). J'ai également ajouté une LED à indiquer par un flash les moments où le navigateur interroge l'ESP32 pour obtenir la température actuelle. Et l'interface utilisateur pour contrôler l'ESP32 est compatible avec tout navigateur moderne. Surtout sur un smartphone:

L'interface Web permet à l'utilisateur d'ajuster la plage de température du thermostat. Dès que l'un des seuils est modifié, une demande HTTP asynchrone est envoyée à l'ESP32 pour stocker la nouvelle plage de température dans sa mémoire EEPROM. De cette façon, si l'ESP32 devait redémarrer pour quelque raison que ce soit (après une panne de courant par exemple), le thermostat serait initialisé avec la dernière plage de température enregistrée. Un bouton Reboot permet de tester cette fonctionnalité en redémarrant la commande ESP32 sur.

Chaque fois que la lecture de température actuelle est prise, l'interface est mise à jour de manière totalement transparente, sans avoir besoin de recharger la page. Et l'affichage de température s'adapte automatiquement à la situation en changeant de couleur pour indiquer si tout va bien ou si vous êtes hors de la plage autorisée. Une erreur de lecture sur le capteur peut également se produire. L'affichage en tiendra compte:

Lectures préliminaires

Pour bien comprendre ce que nous faisons ici, je vous suggère de jeter un œil au tutoriel suivant sur les tutoriels de nerd aléatoires:

ESP32 / ESP8266 Serveur Web de thermostat - sortie de contrôle en fonction de la température

Si vous n'êtes pas familier avec l'utilisation de Spiffs, je vous encourage à lire également ce tutoriel:

Serveur Web ESP32 à l'aide de SPIFFS (SPI Flash File System)

Pièces requises

• 1 ESP32
• 1 capteur de température DHT11
• 1 LED
• 2 résistances (220 Ω et 4,7 kΩ)

Schéma de câblage et brochages

• GPIO23 est connecté à l'anode de la LED
• La cathode de la LED est connectée au sol à travers une résistance de 220 Ω
• GPIO32 est connecté à la broche de données du capteur de température DHT11
• DHT11 est tiré sur sa broche de données avec une résistance de 4,7 kΩ

Le code

J'ai développé mon code avec l'éditeur de code Paltformio IDE et Visual Studio. Par conséquent, le programme principal est appelé main.cpp et est situé dans le répertoire src . Si vous utilisez l'ide Arduino, vous devrez déplacer ce programme à la racine du projet et le renommer en tant que tel:

 mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino

La structure du code

Le code est divisé en trois répertoires:

• src contient le code C ++ pour compiler et télécharger sur ESP32
• data contient le code source de l'interface utilisateur Web à télécharger sur les SPIFFS ESP32
• scss contient le code source des feuilles de style CSS au format SCSS

L'interface utilisateur Web sera stockée sur le système de fichiers de mémoire flash ESP32 comme 5 fichiers séparés:

• index.html (la structure d'interface)
• index.css (la disposition graphique de l'interface)
• index.js (le programme de gestion de l'interface dynamique)
• D7MR.woff2 (la police utilisée pour les écrans numériques)
• favicon.ico (l'icône minuscule pour le navigateur)

L'interface Web est formatée graphiquement par une feuille de style CSS. Le code source est écrit au format SCSS (Sassy CSS) et compilé à l'aide du programme sass pour obtenir le fichier CSS. Voir le site officiel du SASS pour en savoir plus.

En général, la syntaxe SCSS est très proche du CSS. Si vous souhaitez modifier le fichier source, vous devrez installer l'outil sass et recompiler le fichier CSS comme suit:

 sass -t compressed --sourcemap=none --update scss:data

Mais vous pouvez également modifier directement le fichier CSS si vous ne souhaitez pas installer un outil supplémentaire.

Implémentation AJAX

Je propose ici deux techniques pour implémenter des échanges asynchrones entre le navigateur client et le serveur Web en cours d'exécution sur l'ESP32:

• Une méthode classique qui utilise l'objet XMLHttpRequest de JavaScript
• Une méthode plus moderne qui utilise le protocole async / Await de JavaScript

Vous avez donc le choix d'utiliser l'un ou l'autre.

J'ai soigneusement commenté l'intégralité du code pour vous permettre de comprendre plus facilement. N'hésitez pas à venir poser des questions sur le Forum en répondant à cet article dédié au projet.

Crédits

• Je voudrais particulièrement me remercier No Dev , auteur de la fantastique bibliothèque ESP32asyncwerverver qui facilite notre vie lorsque nous voulons interagir avec ESP32 via une application Web.

• Je tiens également à remercier Keshikan pour sa police régulière moderne DSEG7 que j'ai utilisée pour les affichages numériques de l'interface.