Discussion :

[f-leb]

Je vous propose un programme de démonstration pour créer un serveur Web implanté dans un DevKit ESP32 (module ESP WROOM 32).

DevKit ESP32 de AZ-Delivery

La page Web dynamique permet d’ouvrir et fermer la trappe d’une serre (simulée par une LED qui s’allume ou s’éteint) et affiche la température de la serre grâce à une sonde de température DS18B20 (mise à jour toutes les 5 secondes).

Le principe du programme et les codes sont (fortement) inspirés par le tutoriel de naute en trois parties :
Le navigateur aux commandes de l’Arduino : Parties 1, 2 et 3

L’environnement de développement est celui de l’Arduino avec le package ESP32 d’installé (Arduino Core for the ESP32)

Les bibliothèques suivantes devront être installées :

• ESPASyncWebServer (avec sa dépendance AsyncTCP), le cœur du système pour la création et la gestion d’un serveur HTTP au fonctionnement asynchrone.
• Le système de fichier SPIFFS (SPI Flash File System) pour stocker les fichiers HTML, CSS, JavaScript et image dans la mémoire flash de l’ESP32 (Edit : ou bien le système de fichier LittleFS en remplacement de SPIFFS apparemment bientôt déprécié).
• Onewire et DallasTemperature pour la lecture de température relevée par la sonde DS18B20
• ArduinoJson pour la gestion du format JSON dans les réponses du serveur HTTP aux requêtes AJAX du client.

La plupart de ces bibliothèques sont rapidement accessibles depuis le gestionnaire de bibliothèque de l’EDI standard Arduino.

Une fois l’archive zip ci-jointe décompressée, vous trouverez :

• le répertoire data, avec les fichiers HTML, CSS, JavaScript… à téléverser dans la mémoire Flash de l’ESP32 grâce au gestionnaire SPIFFS ;
• le programme gestion_serre_v0_1.ino à ouvrir dans l’EDI Arduino. Les autres fichiers .cpp et .h devraient s’ouvrir dans des onglets.

Avant de téléverser le programme, il vous reste à :

• renseigner les SSID/mot de passe de la box ou routeur WiFi de votre réseau dans l’onglet du fichier credentials.h (en mode STA (station), l’ESP cherche un point d’accès auquel se connecter) ;
• renseigner les broches (pins) du DevKit où sont connectées la LED et la broche de données du DS18B20 dans l’onglet du fichier hardware.h.

Au démarrage du DevKit (éventuellement après un appui sur le bouton reset), le moniteur série (115200 bauds) affiche certaines informations, notamment l’adresse IP du serveur fournie par le service DHCP de votre box/routeur WiFi sur le réseau.

Il ne vous reste plus qu’à taper l’adresse IP du serveur dans un navigateur, et c’est tout

Principe : au chargement de la page d’abord, puis toutes les 5 secondes ou à chaque appui sur le bouton, une requête AJAX est envoyée à l’ESP. L’ESP traite la requête, et change l’état de la LED si l’utilisateur a appuyé sur le bouton. La réponse de l’ESP est au format JSON, par exemple : {"bouton":"ledOn", "temperature":23.5348} que le navigateur va utiliser pour rafraîchir la page.

N’hésitez pas à intervenir dans ce fil de discussion pour tout complément en rapport avec ce projet.

Enjoy !

Historique :
- v0.3 : nouveau système de fichier LittleFS pour remplacer le système SPIFFS bientôt déprécié.
- v0.2 : la température s'affiche aussi dans un graphique (bibliothèque HighCharts.js)
- v0.1 : version initiale