ESP32 : servir une image
Lorsque l'on développe un WebServer sur ESP32, on utilise différentes librairies :
- WifiServer
- WebServer
- EspAsyncWebServer
- etc.
Je ne vais pas rappeler les multiples avantages d'EspAsyncWebServer, mais il peut entre autres :
- servir des fichiers HTML, JavaScript, images, etc. à partir du système de fichiers en FLASH
- gérer des templates à la manière de Cheetah sur un serveur PC
Le cas de WifiServer est à part. Son utilisation se rapproche de celle de la librairie Arduino Ethernet, ce qui veut dire que l'effort de développement est très important. Il n'est même pas capable de récupérer les arguments au sein d'une URL de manière simple. Je n'en parlerai donc pas.
Voyons le cas d'une image.
1. Avec EspAsyncWebServer
EspAsyncWebServer n'est pas une librairie présente dans le package ESP32 standard. Il faut l'installer :
- en la téléchargeant depuis https://github.com/me-no-dev/ESPAsyncWebServer
- à l'aide du gestionnaire de bibliothèques de l'IDE ARDUINO
Ce petit exemple renvoie une image au client :
Ce code renvoie une image nommée arduino.jpg située à la racine du système de fichiers SPIFFS. Deux lignes suffisent (en gras).
2. Avec WebServer
WebServer est la librairie par défaut présente dans le package ESP32 standard.
Elle nécessite un effort de programmation un peu plus conséquent :
#include <WiFi.h>
Le code utilisé pour la gestion de l'image est également en gras. Il est un peu plus complexe. Il faut bien connaître la librairie WebServer pour s'en sortir, en particulier l'existence de la méthode streamFile().
3. Les points communs
Dans les deux cas, le fichier arduino.jpg doit être chargé dans le système de fichier SPIFFS. Ce fichier doit être créé dans un sous-répertoire data du projet :
projet / projet.ino
........../ data / arduino.jpg
Le fichier doit être chargé dans la mémoire FLASH de l'ESP32 à l'aide du menu "Outils/ESP32 Sketch Data Upload".
Avant cela, si ce n'est pas déjà fait, il faut installer le plugin :
https://github.com/me-no-dev/arduino-esp32fs-plugin
Pour essayer ces deux exemples, il suffit de les charger dans un ESP32, après avoir modifié ces deux lignes :
Il suffit de remplacer xxxxx par vos identifiants WIFI.
Ensuite entrez dans votre navigateur l'adresse IP affichée dans le serial monitor. Il affichera ceci :
hello from esp32!
Si vous ajoutez /arduino.jpg à l'URL (exemple : http://192.168.1.27/arduino.jpg) Il affichera l'image que vous avez choisi.
On peut bien évidemment intégrer l'image dans une page HTML de son choix à l'aide de la balise adéquate :
<img src="arduino.jpg">
4. Conclusion
Bien que la version WebServer ne soit pas d'une complexité insurmontable, la version EspAsyncWebServer est nettement préférable, surtout si l'on considère que l'on pourra stocker dans SPIFFS non seulement des images, mais aussi le code HTML, et éventuellement JavaScript.
Servir un fichier HTML ou JavaScript sera extrêmement simple :
Ensuite il reste à explorer les templates, qui prendront en charge les données variables des pages HTML.
https://techtutorialsx.com/2018/07/22/esp32-arduino-http-server-template-processing/
Les templates sont le point fort d'EspAsyncWebServer, et permettent de développer très simplement des serveurs assez conséquents.
Cordialement
Henri
Aucun commentaire:
Enregistrer un commentaire