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

[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 Arduino :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JSON :

Sélectionner tout - Visualiser dans une fenêtre à part

{"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 Arduino :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

@+

[f-leb]

Salut,

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 ?

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 c :

Sélectionner tout - Visualiser dans une fenêtre à part

_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 c :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Artemus24]

Salut à tous

Mais quelle est donc ton erreur ?

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

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.

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.

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.

@+

[f-leb]

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 !

[f-leb]

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

[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.

@+

[f-leb]

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 arduino :

Sélectionner tout - Visualiser dans une fenêtre à part

#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).

[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é.

@+

[f-leb]

Salut,

Len vers LittleFS pour ESP32 (dans l'EDI Arduino) 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.

[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.

@+

[f-leb]

Salut,

As-tu fait l'upload des fichiers avec le nouvel outil (menu Outils, puis ESP32 LittleFS data upload) ?

[Artemus24]

Salut f-leb.

Je n'y arrive pas.

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.

@+

[f-leb]

C'est vrai que c'est un peu planqué, 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

[Artemus24]

Quel bordel ! 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".

@+

[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 c :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

@+