Accueil / esp8266 / ESP8266 (Web Serveur – Partie 1) : stocker l’interface Web dans la zone SPIFFS (HTML, CSS, JS)

ESP8266 (Web Serveur – Partie 1) : stocker l’interface Web dans la zone SPIFFS (HTML, CSS, JS)

Nous continuons notre série d’articles sur la programmation de la partie Web Server (serveur web) des modules ESP8266. Dans les articles précédents, nous avons vu comment mettre en place le Web Server, puis comment améliorer l’affichage en utilisant le framework Bootstrap (et utiliser les thèmes Bootswatch). Dans les deux premiers épisodes, tout le code HTML était généré directement dans le code Arduino. Ca ne pose aucun problème pour un projet simple mais on ne profite pas totalement des capacités de l’ESP8266. Nous allons aller encore plus loin dans cette nouvelle série d’articles. Nous allons apprendre comment gérer séparément le code de l’interface Web et stocker tous les fichiers dans le système de fichier SPIFFS de l’ESP8266.

Présentation du projet

Nous allons aborder de nombreuses notions dans ce projet d’interface Web pour ESP8266. Il va donc y avoir plusieurs épisodes. Voici un tableau de synthèse qui récapitule les thèmes abordés dans chaque partie. Vous trouverez également un lien vers le dépôt GitHub (s’il existe) et un lien vers l’article.

Partie Sujets abordés Dépôt GitHub Article
Partie 1
  • Comment préparer le code HTML de interface Web
    • Pour cela, nous utiliserons le langage Pug (auparavant appelé Jade) qui permet de simplifier l’écriture
    • Nouvelles notions d’HTML : menu de navigation, image, fixer le bas de page (footer), meilleure gestion « responsive » pour les petits écrans
  • Comment changer le thème de l’interface
    • Comment stocker le choix pour recharger le thème au prochain chargement de l’interface
  • (1) Comment préparer et utiliser la zone SPIFFS pour stocker les fichiers HTML, JS, CSS, images
    • et les envoyer sur l’ESP8266
    • Premier test de l’interface WEB sur l’ESP8266
Partie 2 Comment interagir avec le code Arduino

  • Intercepter les actions sur les boutons de l’interface et actualiser les affichages lorsque l’action a été réalisée (Javascript + jQuery)
    • Récupérer les requêtes sur l’Arduino, exécuter la demande et envoyer la réponse
  • Actualiser régulièrement (et automatiquement) le tableau de mesures et les afficheurs (Javascript)
    • Mettre à jour les symboles si la valeur actuelle est supérieure ou inférieure à la précédente
Partie 3 Comment récupérer l’heure depuis internet
Partie 4 Comment créer un historique de mesures

  • Manipuler les données à l’aide de la librairie ArduinoJSON
  • Enregistrer des données (historique de mesure) dans un fichier sur la zone SPIFFS
  • Recharger le fichier historique au démarrage de l’ESP8266
Partie 5 Comment ajouter des graphiques et des gauges Google Charts

  • Evolution de la température et de l’humidité moyenne sur les 7 dernières heures (histogramme en barre)
  • Affichage de la mesure courante sous la forme d’une gauge thématique : thermomètre (température), goutte d’eau (humidité), gauge (pression atmosphérique)

Pour continuer les listes, voici les langages et API employés :

  • C++ (code Arduino)
    • Librairies : ESP8266WebServer, DHT, Adafruit_BMP085, ArduinoJSON, FS.h
  • Javascript et jQuey pour les interactions avec la page HTML
  • Pug
  • HTML
  • Bootstrap et thèmes Bootswatch
  • Bootstrap-table (plugin permettant de créer facilement des tables)

De quoi allez vous avoir besoin ?

Avant de rentrer dans le vif du sujet, vous allez avoir besoin d’un peu de matériel et d’une configuration logicielle adéquate.

Matériel utilisé

Coté matériel, nous allons rester dans le classique, l’objectif et d’avoir à disposition des données à afficher et des éléments pour simuler des interactions. J’ai donc opté pour un DHT22 pour récupérer des mesures de température et d’humidité ainsi qu’un BMP180 pour la pression atmosphérique. Pour simuler les sorties, de simples Led feront l’affaire. Pour l’ESP8266, j’ai opté pour la Wemos D1 mini qui dispose d’une zone SPIFFS de 3M.

esp8266 Wemos D1 mini Module ESP8266 ESP-12. Par exemple Wemos D1 Mini
chargeur raspbery pi 3 5v 3000ma Alimentation 5/3A micro-usb

L’ESP8266 est sensible à la qualité de l’alimentation (risque de plantage). Une alimentation de qualité est recommandée.

BMP180 Capteur de pression atmosphérique

BMP180

Broches DHT22 Capteur de température et d’humidité

DHT11 ou DHT22

jumper dupont Jumper Dupont
breadboard Breadboard

Environnement logiciel et plateforme

Comme vous le savez, il est possible de programmer l’ESP8266 à l’aide du langage Lua ainsi qu’en C++ depuis l’IDE Arduino. J’ai opté pour l’IDE Arduino car on trouve beaucoup plus facilement des exemples, informations, librairies, forums et l’accès aux débutants et plus facile. Comme je test les alternatives (bonnes ou mauvaises) au Raspberry Pi, tous les développements ont été fait sur un Orange Pi+ 2e fonctionnant sous Armbian basé sur Ubuntu 16.04 LTS. Mais tout fonctionnera à l’identique quelque soit votre environnement (Windows, macOS, Raspberry Pi…).

Pour l’écriture du code HTML, je vous conseille d’utiliser le langage Pug (ancien Jade) qui permet de simplifier la mise au point du code (on ne gère plus la fermeture des balises). Pug n’est pas vraiment un langage, on se contente d’écrire le balise et on respecte un formalisme d’écriture.

Pour résumé, voici la configuration utilisée et les renvoi vers les tutoriels à consulter s’il vous manque des infos.

Remarque. J’ai essayé de rendre le plus synthétique possible toutes les notions abordées pour que tout le monde puisse se les approprier. Les plus pointus d’entre vous trouveront certainement de meilleures manières d’écrire, n’hésitez pas à utiliser les commentaires pour donner des conseils.

Orange Pi Plus 2e fonctionnant sous Armbian (Ubuntu 16.04 LTS)

Quelques articles utiles : présentation, installer Armbian sur Orange Pi,

Geany : éditeur de texte orienté programmation (pour HTML, Pug, Javascript, jQuery)

Article : installation et découverte sur Raspberry Pi 

Pug : langage pour simplifier l’écriture du code HTML

Article : installation et découverte du langage

IDE Arduino 1.8.1

Articles :

Comment transférer des fichiers dans la zone SPIFFS depuis l’IDE Arduino ?

L’ESP8266 dispose d’une zone réservée appelée SPIFFS dont la taille varie d’un modèle à l’autre (certains modèles, les plus anciens, n’en proposent pas). Cette zone mémoire peut être utilisée pour héberger des fichiers. Nous n’allons pas aller plus loin sur le stockage SPIFFS dans cet article, un tutoriel dédié lui sera consacré. Afin de pouvoir télécharger des fichiers dans cette zone mémoire, il est nécessaire d’installer l’outil de téléchargement des fichiers dans la zone SPIFFS  à l’IDE Arduino disponible sur Github. Il suffit de le télécharger et décompresser le fichier dans le répertoire tools. S’il n’existe pas dans votre dossier Arduino, il suffit d’en créer un manuellement. Relancez l’IDE Arduino pour que l’outil de téléchargement soit ajouté au menu outil sous le nom ESP8266 Sketch Data Upload.

ide arduino esp8266fs tools spiffs upload

Préparation de l’interface WEB : code HTML

Nous allons donc utiliser le langage Pug pour préparer le code de l’interface HTML.

Entête de la page (header)

Pour créer notre interface, nous allons avoir besoin de nouvelles ressources. Dans un premier temps, nous allons simplement aller les chercher sur internet. Nous verrons dans le prochain tutoriel comment les ajouter dans la zone SPIFFS. On va donc créer une entête (Head) qui contient indique les ressources que doit charger le navigateur (jquery, bootstrap.js, bootstrap-table.js, bootstrap.css, bootstrap-table.css).

Quelques remarques :

  • L’ordre n’a aucune importance
  • On récupère les versions « minifiées », plus compactes mais difficile à comprendre
  • La balise name='viewport'  est réservée à Bootstrap.
  • La balise http-equiv='refresh'  qui permettait de demander au navigateur d’actualiser l’affichage régulièrement a été supprimée. Nous allons gérer l’actualisation de l’affichage autrement.

Ajout d’une barre de navigation (body)

Passons au corps de la page (body). En dessous du titre du projet (balise h1), nous allons ajouter une barre de navigation qui permet de regrouper les informations par thème (mesures, graphiques GPIO, configuration). Avec Bootstrap, elle est gérée par les classes .nav et .nav-tabs. Chaque onglet (tab) est composé d’une balise li. L’attribut active permet d’indiquer l’onglet actif par défaut. Une balise a permet d’indiquer le titre de l’onglet et surtout d’indiquer vers quel élément se rendre lorsqu’on clique (href= »#iddestination »). L’attribut data-toggle rend cliquable l’onglet.

Ensuite il ne reste plus qu’à créer une div de classe tab-content puis une div tab-pane pour chaque onglet. Ce qui donne par exemple

Pour rendre l’affichage plus sympa, on peut aussi ajouter une animation lorsqu’on passe d’un onglet à l’autre :

De même, on indique le premier onglet actif par défaut (pour la première ouverture de la page).

Il n’y a rien de plus à programmer pour créer une barre de navigation et naviguer d’un onglet à l’autre !

Ajout d’une table Bootstrap-table

Bootstrap-table est un plugin Bootstrap très connu et très puissant pour créer des tables et réaliser des opérations (page du projet sur GitHub). Elle permet entre autre d’être actualisée très facilement). Pour le moment, on va juste la poser dans l’onglet Mesures. On créé un champ table. On va simplement placer une balise th pour chaque colonne. On affecte à chaque colonne une source de données (data-field) qui sera associé à une clé du JSON envoyé par le code Arduino. Enfin on attribue un data-formatter, c’est une fonction qui est appelée à chaque fois qu’une ligne est ajoutée au tableau et qui permet de mettre en forme le contenu. Nous verrons dans le prochain tutoriel comment remplir cette table.

Voici ce qu’on va obtenir (avec le thème Bootstrap par défaut).

esp8266 bootstrap web server nav tab barre navigation onglets

Bas de page (footer)

Fonction gadget, mais utile pour apprendre d’autres notions d’HTML, un bas de page (footer) fixé. Le bas de page ne bouge pas lorsqu’on passe d’un onglet à l’autre. Vous pouvez utiliser cette zone pour indiquer toutes sortes d’informations (date, heure, qualité de réception Wi-Fi, charge CPU…) Pour fixer le bas de page, on va juste ajouter un ligne (row) et lui donner les paramètres dans l’attribut HTML style  :

  • position:absolute, la ligne (row) est positionnée de manière absolue
  • bottom:0, en bas de la page à 0 pixels du bords
  • width:100%, et cette ligne prend toute la largeur du navigateur disponible

Dans cette ligne on va ajouter 3 colonnes. La première va contenir une image (mon logo  🙂 ), et deux liens. Le contenu n’est pas important, ce qui est important est de voir comment rendre le contenu responsive, c’est à dire qu’il s’adapte à tous les écrans et comment on charge une image depuis la zone SPIFFS.

Pour afficher une image, on ajoute une balise img, dans la source (src), on indique le chemin sous la forme repertoire/image.jpg. On peut aussi imposer la taille width= »30″(largeur de 30 pixels) et height= »30″ (hauteur).

Bootstrap utilise un système de grilles. Si on diminue la taille du navigateur, les cellules vont commencer à se réduire puis et se mettre les unes sous les autres. Pour cela, on utilise les classes col-md-x. La somme des x ne doit pas dépasser 12 (l’écran est divisé en 12 colonnes). Pour s’adapter aux plus petits écrans (smartphone notamment), on peut par exemple combiner avec une classe col-xs-x. C’est une approche très simpliste mais ça fonctionne et ce n’est pas l’objectif principal de l’article.

Voici le rendu obtenu pour différentes largeurs d’écran. Taille normale

Taille réduite.

 footer bas de page ecran reduit

Smartphone (simulée)

Changer le thème Bootstrap dynamiquement

Dans le tutoriel précédent, il était très facile de changer le thème car il suffisait de passer le thème sélectionné lorsqu’on construisait le code HTML de la page. Ici il va falloir introduire un peu de javascript (et de jquery) pour y arriver. Je me suis inspiré du code proposé par wdfz dans ce tutoriel.

On va commencer par modifier la liste de sélection. Le champ caché qui servait à stocker le thème sélectionné puis envoyé au code Arduino à l’aide d’une requête HTTP de type POST n’est plus utile. On va intercepter un clic sur la classe change-style-menu-item et on va récupérer le style sélectionné contenu dans l’attribut rel. Le code HTML de la boite de sélection devient donc le suivant.

Maintenant on ajoute un script. Lorsqu’on intercepte un clic sur la classe change-style-menu-item à l’aide d’une commande jQuery. On récupère la valeur de l’attribut rel avec la commande $(this).attr(‘rel’). This contient l’objet qui vient d’être cliqué. On accède à l’attribut avec la méthode attr()

Pour comprendre et voir ce qui se passe, vous pouvez ouvrir les outils pour développeurs de votre navigateur et mettre un point d’arrêt.

esp8266 web server change theme bootstrap recupere attribut rel

Maintenant qu’on connait le thème sélectionné, on construit l’URL qui pointe vers le site internet correspondant. On en profite pour actualiser le libellé du bouton en y incluant le nom du nouveau thème. Enfin, si le stockage dans la base de données locale est disponible (cela va dépendre du navigateur utilisé, pas de l’ESP8266), en enregistre le thème.

Maintenant il ne reste plus qu’à reconstruire la page avec ce thème. Pour que cela puisse fonctionner, il faut ajouter un attribut title= »main » dans le lien vers le CDN Bootstrap

On modifie le href du link[title= »main »].

Il nous reste encore deux fonctions à écrire, la première retourne vrai si le stockage en ligne est disponible

Et enfin la dernière fonction qui permet de recharger le thème s’il a été enregistré dans la base locale.

Voilà, maintenant tout se passe directement sur le navigateur, l’ESP8266 n’est plus chargé de reconstruire la page à chaque changement d thème, ce rôle est dévolu au navigateur.

Tout assembler

Voici les codes Arduino et HTML. Rien n’est encore fonctionnel à ce stade du développement (à l’exception du changement dynamique du thème).

Code Arduino/ESP8266

Créez un nouveau projet et collez le code suivant. Voici les différences par rapport au tutoriel précédent :

  • On appel la librairie FS.h qui permet d’accéder à la zone SPIFFS
  • Pour pouvoir accéder aux fichiers stockés dans la zone SPIFFS, il faut initialiser la librairie en appelant la fonction SPIFFS.begin() dans le setup().
  • On indique au serveur les pages et les ressources statiques qui doivent être misent à disposition du navigateur, pour le moment /img et la racine du site (/) qui pointe vers la page index.html.

N’oubliez pas de changer le ssid et le password du réseau WiFi.

Sélectionnez l’ESP8266 (ici Wemos D1 mini) puis téléversez le projet dans l’ESP8266.

Générer le code HTML du projet

Allez dans le répertoire du projet et créez un nouveau dossier data. Ajouter un sous dossier img

Créer un nouveau document sous Geany et collez le code suivant. Enregistrez le fichier en lui donnant le nom index.pug à la racine du dossier data. Compilez le code HTML à l’aide de pug-cli (F8).

Sinon, créez un nouveau document avec un simple éditeur de texte et collez le code HTML du projet obtenu. Enregistrez le fichier en lui donnant le nom index.html dans le répertoire data du projet Arduino.

Si le moniteur série est ouvert, fermez le. Allez dans le menu Outils et sélectionnez la vitesse d’upload speed de 921600 bauds. Le téléchargement est assez long, alors autant aller le plus vite possible. Enfin, allez dans le menu Outils puis cliquez sur ESP8266 Sketch Data Upload. L’opération démarre immédiatement.

esp8266 upload spiffs sketch data ide arduino

Une fois le téléchargement achevé, repassez la vitesse d’upload à 115200 baud et ouvrez le terminal pour vérifier que l’ESP8266 est correctement connecté au réseau WiFi. Récupérez l’adresse IP. Ouvrez un navigateur et saisissez l’adresse IP de l’ESP8266. Bravo, ça fonctionne !

esp8266 spiffs wemos d1 mini web server bootstrap dht22 bmp180

En résumé, nous avons vu comment créer une interface HTML de toute pièce à l’aide du langage Pug. On peut changer dynamiquement le thème Bootstrap et stocker le choix dans la base de données du navigateur pour le prochain chargement. On a mis en place une barre de navigation qui permet de regrouper les éléments par thèmes. On sait comment utiliser la zone SPIFFS pour y stocker tous les fichiers nécessaires au fonctionnement de l’interface. Il reste encore beaucoup à faire !

  • visvic

    Hello,
    Je reprends les tutos de zéro ^^.
    J’ai un ESP8266-01 Version Noir, mais je n’ai pas réussi a trouver la taille de la mémoire :/
    Est-ce que tu connais aussi la manipulation a suivre pour supprimer les fichiers de la zone SPIFFS ?

    A plus tard, et encore congratulation pour tout le job que tu a fait et fera.

    • Bonjour visvic. Pour la taille mémoire, il faut passer par esptool.py (http://www.projetsdiy.fr/esptool-update-firmware-nodemcu-esp8266-osx). Accroche toi bien ! la commande esptool.py -p flash_id permet de récupérer le fabricant et son n° de device; faut ensuite aller ici https://code.coreboot.org/p/flashrom/source/tree/HEAD/trunk/flashchips.h. Par exemple sur une Wemos d1 mini pro, le fabricant est « ef » et l’id est « 4018 ». Faut pas s’occuper du fabricant, juste chercher 0x4018. On trouve plusieurs composants mais ce qui est important c’est de prendre les 2 (ou 3!) derniers chiffres du code. Par exemple 128 (GIGADEVICE_GD25Q128). Ca fait donc 128Mb (megabits), qu’il faut convertir en Moctets (https://www.unitjuggler.com/convertir-memory-de-Mbit-en-MB.html?val=128), ce qui fait bien 16MO (ou 16MB). Pour une Wemos classique, le device est 4016 => 0x4016 => GIGADEVICE_GD25Q32␉0x4016 => 32Mb => 4MO. Ouff :-). Pour effacer la zone SPIFFS, je ne suis pas certain que ça fonctionne mais tu peux essayer cette commande esptool.py –port COMx erase_flash. Sinon faudrait faire un petit programme C++. La librairie FS propose la fonction format. ca devrait faire l’affaire. Merci beaucoup et à très bientôt.