[ESP32] Créer un serveur Web

Version imprimable

04/07/2020, 01h10
f-leb

2 pièce(s) jointe(s)

[ESP32] Créer un serveur Web
:salut:

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

Pièce jointe 574373
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).

https://www.youtube.com/watch?v=peCxoAypy8w

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
06/07/2020, 16h07
Artemus24
Salut f-leb.

Merci à toi de nous avoir communiqué ton exemple de serveur web.

Après l'avoir chargé et téléverser, je me suis aperçu que ce code est destiné à de l'arduino. J'ai eu une erreur de compilation.
Bon ben, je fais de l'ESP32 avec comme carte "NodeMCU-ESP32S".

Je trouve que la partie consacré à ajax et en particulier JSON est bien compliqué.
Il n'est pas nécessaire d'utiliser les "#include" suivants :
Code:

1 2 #include "AsyncJson.h" #include "ArduinoJson.h"
qui surcharge inutilement le sketch. Pourquoi ? Deux raisons à cela :

1) le JSON, c'est juste une chaîne de caractères avec un formatage particulier, genre :

Code:

{"clef1":val1,"clef2":val2}

On peut très bien faire de la mise en forme au format JSON sans utiliser ces "#include".

2) l'envoi se fait tout simplement en précisant qu'il s'agit d'une "application/json" avec la chaîne de caractères JSON formaté :

Code:

request->send(200, "application/json", _json);

Comme j'ai ouvert un sujet consacré à "NodeMCU ESP32", j'indique ci-après le lien de mon sketch :
--> Mon petit Projet.

A vous de me dire ce qui ne va pas, comment l'améliorer ou quoi que ce soit d'autre.

@+
06/07/2020, 20h22
f-leb
Salut,

Citation:

Envoyé par Artemus24

Après l'avoir chargé et téléverser, je me suis aperçu que ce code est destiné à de l'arduino. J'ai eu une erreur de compilation.

Oui, je suis dans l'EDI Arduino standard avec "ESP32 Dev Module" comme type de carte. Mais quelle est donc ton erreur ?

Citation:

Envoyé par Artemus24

Je trouve que la partie consacré à ajax et en particulier JSON est bien compliqué.

La librairie json est peut-être too much pour passer seulement deux paramètres, mais j'y vois des avantages si la structure s'allonge, plus tard...

Et puis, toute la concaténation :

Code:

_json = "{\"temp\":\"" + String(_dTemp) + "°C\", \"touche\":\"" + _sTouche + "\"}";

comme tu fais dans ton projet n'est pas si simple non plus avec ces \":\"" etc.

Alors que préparer le json :
Code:

1 2 3 _json["temp"] = _dTemp; _json["touche"] = _sTouche; ...
avant de sérialiser est assez sympathique je trouve.

Je regarde ton projet plus en détail ;)
07/07/2020, 09h23
Artemus24

Salut à tous

Citation:

Envoyé par f-leb

Mais quelle est donc ton erreur ?

Il me manquait les deux bibliothèques JSON. Je ne les ai pas installé !

Citation:

Envoyé par f-leb

La librairie json est peut-être too much pour passer seulement deux paramètres, mais j'y vois des avantages si la structure s'allonge, plus tard...

Je te rappelle que nous sommes limités en taille par les exécutables que nous devons téléverser.
Il est inutile de perdre de l'espace mémoire, juste pour gagner en souplesse.

Citation:

Envoyé par f-leb

Et puis, toute la concaténation ... comme tu fais dans ton projet n'est pas si simple non plus avec ces \":\"" etc.

Si ce n'est que ça, c'est pas bien grave.

Citation:

Envoyé par f-leb

Alors que préparer le json ... avant de sérialiser est assez sympathique je trouve.

Dans mon sketch, créer la structure JSON et l'envoyé tient sur un seule ligne.

Faire de l'AJAX consiste à envoyer une structure de données (JSON ou autre) vers le client.
En Javascript, le client intercepte cette trame et récupère les données afin des introduire dans la page web.

J'ai complété mon projet afin d'ajouter la date et l'heure ainsi que la led de l'ESP32 et rafraîchir les données venant de l'ajax quand on clique sur les boutons.

Il y a un truc que je ne comprends pas bien dans mon sketch. Il arrive que mes boutons ne s'affichent plus du tout.
Je suis obligé de rafraîchir la page web pour qu'ils reviennent.

@+
07/07/2020, 20h45
f-leb

Citation:

Envoyé par Artemus24

Je te rappelle que nous sommes limités en taille par les exécutables que nous devons téléverser.
Il est inutile de perdre de l'espace mémoire, juste pour gagner en souplesse.

Avec les 4Mo de mémoire Flash d'un ESP32 WROOM 32, je prends mes aises !
08/07/2020, 20h40
f-leb

1 pièce(s) jointe(s)

Petite mise à jour côté client avec un graphique de température en temps réel (bibliothèque highcharts.js).

https://www.youtube.com/watch?v=8G2hq8CwI34

;)
08/07/2020, 23h08
Artemus24

Salut f-leb.

J'ai mis à jour mon petit projet. J'ai ajouté dans AJAX l'état des boutons.
Et au lien d'avoir trois variables par bouton, je n'en ai plus qu'une.
Ce qui se résume à neuf variables.
Le bouton sert à inverser l'état de la led ou du relais.
Si j'ouvre deux pages, quand je modifie l'état d'un bouton de la première page, le même bouton se met à jour dans la seconde page.

Je m'arrête là car le graphique ne m'intéresse pas.

Hormis la led de l'ESP32 (GPIO 2), y-a-t-il autre chose que je peux exploiter ?
Je crois qu'il existait avant un capteur de température interne du ESP32, mais il n'existe plus.

@+
09/07/2020, 22h07
f-leb

1 pièce(s) jointe(s)

:salut:

Encore une nouvelle version.

Le système de fichier SPIFFS sera bientôt déprécié, au profit de LittleFS.

Cette version V0.3 utilise donc le nouveau système LittleFS.
Si vous souhaitez conserver le système SPIFFS, il suffit de mettre en commentaire la ligne suivante dans le fichier HandleWebServer.h :

Code:

#define USE_LittleFS

(Les deux systèmes peuvent cohabiter dans l'EDI Arduino. Bien entendu, pour un projet donné, il faudra utiliser l'un ou l'autre).
10/07/2020, 00h29
Artemus24

Salut f-leb.

Je suis dans Espressif NodeMCU ESP32 et non dans l'arduino.
J'ai modifié mon projet en faisant passer SPIFFS à LittleFS, et j'ai une erreur car "#include <LittleFS.h>" n'existe pas.
J'ai voulu le chargé en tant que bibliothèque et je ne l'ai pas trouvé.

@+
10/07/2020, 07h59
f-leb

Salut,

Len vers LittleFS pour ESP32 (dans l'EDI Arduino) :fleche: https://github.com/lorol/LITTLEFS

Il y a le zip de la bibliothèque à décompresser dans le dossier des sketchs,
un fichier .jar et un binaire exécutable.
10/07/2020, 23h05
Artemus24

Salut f-leb.

J'ai installé LittleFS. J'ai remplacé SPIFFS par LITTLEFS dans mon programme et j'ai compilé. Aucune erreur.
Par contre, il ne trouve pas ma page web. J'ai réinstallé ma page web dans l'ESP32 mais j'ai toujours le même problème.

Il manque certainement quelque chose.

@+
11/07/2020, 17h45
f-leb

Salut,

As-tu fait l'upload des fichiers avec le nouvel outil (menu Outils, puis ESP32 LittleFS data upload) ?
11/07/2020, 20h11
Artemus24

Salut f-leb.

Je n'y arrive pas. :weird:

1) "LittleFS" se trouve ci-après :
--> https://github.com/lorol/LITTLEFS

Cliquez sur le bouton "code" puis sur "Download zip".

On décompresse, on supprime la partie "-master" et l'on déplace le répertoire dans "L:\Arduino\libraires".

C'est fait et ça fonctionne.

2) "ESP32 LittleFS data upload" se trouve ci-après :
--> https://github.com/lorol/arduino-esp...32littlefs.jar

Créer dans "C:\Program Files\arduino-1.8.13\tools", le répertoire :
--> \ESP32LittleFS\tool
et y placer le fichier jar.

redémarrer l'IDE arduino.

C'est fait. J'ai bien là ligne "ESP32 LittleFS data upload" qui apparait dans l'IDE Arduino.

3) installer "mklittlefs" qui se trouve ici :
--> https://github.com/earlephilhower/mklittlefs

Cliquez sur le bouton "code" puis sur "Download zip".

J'ai aussi téléchargé la version : x86_64-w64-mingw32-mklittlefs-1c43629.zip

C'est là que j'ai des difficultés. Je ne sais pas où se trouve la plate-forme esp32.

@+
11/07/2020, 20h18
f-leb

C'est vrai que c'est un peu planqué:mouarf:, chez moi (Windows 10) l'utilitaire mklittlefs.exe est dans le dossier :

C:\Users\f-leb\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\tools\mklittlefs
11/07/2020, 20h31
Artemus24

Quel bordel ! :weird: Franchement, la procédure d'installation est très mal expliquée.
En relisant, je comprends que cela se met dans "C:\Users\Patron\AppData\Local\Arduino15\packages\esp32\tools

Du coup, je n'ai pas besoin d'installer :
--> https://github.com/earlephilhower/mklittlefs
mais juste l'exécutable. Est-ce bien cela ?

J'ai fait le test et ça fonctionne !

Si je comprends bien, "LittleFS" s'utilise comme "SPIFFS".

@+
11/07/2020, 20h40
f-leb
Oui, c'est un peu confus. Il semble que le projet a été porté que très récemment sur ESP32, il y a sans doute des évolutions à venir...

Sinon, oui, il suffit a priori de remplacer SPIFFS par LITTLEFS, ou utiliser l'astuce proposée :
Code:

1 2 3 4 5 6 7 8 9 #define USE_LittleFS #include <FS.h> #ifdef USE_LittleFS #define SPIFFS LITTLEFS #include <LITTLEFS.h> #else #include <SPIFFS.h> #endif
11/07/2020, 20h49
Artemus24

Je n'utilise pas l'astuce. Comme je l'ai dit, je remplace la chaîne "SPIFFS" par "LITTLEFS" et c'est tout.

Dans mon autre sujet, j'ai installé l'IDE Arduino à partir de Microsoft Store.
J'ai ce répertoire "I:\document\ArduinoData" qui est devenu obsolète.

Et comme, je ne savais pas comment installer "ESP32 sketch data upload", j'ai supprimé l'ancienne version et je l'ai remplacé par l'IDE Arduino version administrateur.
J'ai mis le répertoire "mkspiffs" dans :
--> C:\Users\Patron\AppData\Local\Arduino15\packages\esp32\tools\mkspiffs\0.2.3

J'ai refais exactement la même chose avec "mklittlefs" mais cela n'a pas fonctionné.

Remarque : que ce soit dans le forum framboise314 ou ici, il n'y a pas grand monde qui fréquente les forums arduino et raspberry.
Est-ce dû à l'été ou bien le sujet est en désaffection ?

@+