Afficher dans une page web l'état des broches GPIO de l'ESP8266 ou de l'ESP32

N.B.: Cet article a été mis à jour le 30 juillet 2019 (ajout d'informations sur l'ESP32).

Dans ce tuto, nous allons afficher dans une page web l'état de quelques-unes des broches GPIO d'un module ESP8266 ou ESP32 programmé au moyen de l'IDE Arduino.  Il sera donc possible de consulter à distance ce que mesurent des capteurs branchés à l'ESP8266/ESP32.

IDE Arduino

Pour être en mesure de programmer votreESP8266 / ESP32 avec l'environnement de programmation intégré Arduino, il est important que vous ayez installé dans le logiciel les extensions nécessaires.  Vous pouvez vous référer à cette marche à suivre pour l'ESP8266, et à celle-ci pour l'ESP32.

Le montage

Pour nos tests, nous brancherons un premier bouton poussoir à la broche GPIO 4, un deuxième bouton à la broche GPIO 5, et un potentiomètre à l'entrée analogique "A0" (qui est la GPIO 36  sur l'ESP32, et l'unique entrée analogique sur l'ESP8266.

Voici le schéma du circuit pour ma carte de développement ESP32 (sur cette carte, la broche GPIO 36 porte le symbole "VP".

Voici le schéma du circuit pour un module Wemos D1 Mini (sur ce module, la broche GPIO 4 porte le symbole D2, alors que la broche GPIO 5 porte le symbole D1.

Dans la version initiale de ce tutoriel, j'utilisais un module ESP-12 branché à un ordinateur par l'entremise d'un convertisseur USB-UART fonctionnant en 3,3 V. Le circuit était un peu plus complexe, puisqu'il fallait gérer des broches du module pour l'alimenter et le programmer.

Pour le branchement du potentiomètre au module ESP-12, il fallait ajouter une résistance supplémentaire afin que que la tension ne dépasse pas 1 V. (Cette précaution n'est pas nécessaire sur les cartes de développement complètes, car les concepteurs en on tenu compte).

Le sketch

Le sketch n'est pas très long, car ce sont les bibliothèques qui font tout le travail. Au démarrage, les résistances pull-up internes des broches GPIO 4 et GPIO 5 sont activés (le niveau logique est donc haut quand on ne presse pas le bouton, et il devient pas quand on presse le bouton).


Le résultat

Lors du démarrage du programme, si le moniteur série est ouvert, votre module ESP8266 y affiche l'adresse IP qui lui a été assignée (au besoin, vous pouvez faire un reset pour redémarrer le programme).

Vous accédez à cette adresse IP au moyen de n'importe quel navigateur web pour afficher une page web comportant l'état des pins GPIOs de votre ESP.

Si vous faites des changements (en tournant le potentiomètre ou en appuyant sur un bouton), les modifications seront visibles sur la page web (elle se met à jour automatiquement toutes les 2 secondes).

Yves Pelletier   (Twitter, Facebook)