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.
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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /******************************************************************************************** | |
| Affichage dans une page web de l'état des broches GPIO 4, GPIO 5 | |
| et ADC d'un module ESP8266 ou ESP32. | |
| http://electroniqueamateur.blogspot.ca/2016/03/afficher-dans-une-page-web-letat-des.html | |
| ********************************************************************************************/ | |
| // inclusion des bibliothèques utiles | |
| // pour la communication WiFi | |
| #if defined ARDUINO_ARCH_ESP8266 // s'il s'agit d'un ESP8266 | |
| #include <ESP8266WiFi.h> | |
| #include <ESP8266WebServer.h> | |
| #elif defined ARDUINO_ARCH_ESP32 // s'il s'agit d'un ESP32 | |
| #include "WiFi.h" | |
| #include <WebServer.h> | |
| #endif | |
| #include <WiFiClient.h> | |
| const char* ssid = "**********"; | |
| const char* password = "**********"; | |
| #if defined ARDUINO_ARCH_ESP8266 // s'il s'agit d'un ESP8266 | |
| ESP8266WebServer server(80); | |
| #elif defined ARDUINO_ARCH_ESP32 // s'il s'agit d'un ESP32 | |
| WebServer server(80); | |
| #endif | |
| void handle_root() { | |
| int etatGPIO5, etatGPIO4, etatADC; | |
| etatGPIO4 = digitalRead(4); // lecture de l'état de la broche GPIO4 | |
| etatGPIO5 = digitalRead(5); // lecture de l'état de la broche GPIO5 | |
| etatADC = analogRead(A0); // lecture de l'état de la broche ADC/Tout (GPIO36 pour l'ESP32) | |
| // C'est ici qu'on construit la page web: | |
| server.send(200, "html", "<head> <title>ESP8266 / ESP32</title> <meta http-equiv=Refresh content=2></head> " | |
| "<body> <H1>ESP8266 / ESP32</H1>" | |
| "<p>Etat de la broche GPIO4: " + String(etatGPIO4) + "</p>" | |
| "<p>Etat de la broche GPIO5: " + String(etatGPIO5) + "</p>" | |
| "<p>Position du potentiomètre: " + String(etatADC) + "</p>" | |
| "<p>Visitez <a href=http://electroniqueamateur.blogspot.ca/>Électronique en Amateur</a>!</p></body>"); | |
| delay(100); | |
| } | |
| void setup(void) | |
| { | |
| // Affichage dans le moniteur série: | |
| Serial.begin(115200); | |
| // activation des résistances pullup internes | |
| pinMode(4, INPUT_PULLUP); | |
| pinMode(5, INPUT_PULLUP); | |
| // Connexion au réseau WiFi | |
| WiFi.begin(ssid, password); | |
| Serial.print("\n\r \n\rConnection au reseau en cours"); | |
| // On attend la connexion | |
| while (WiFi.status() != WL_CONNECTED) { | |
| delay(500); | |
| Serial.print("."); | |
| } | |
| Serial.println(""); | |
| Serial.print("Nom du reseau WiFi: "); | |
| Serial.println(ssid); | |
| Serial.print("Adresse IP de la page web: "); | |
| Serial.println(WiFi.localIP()); | |
| server.on("/", handle_root); | |
| server.begin(); | |
| Serial.println("Le serveur web est en fonction."); | |
| } | |
| void loop(void) | |
| { | |
| server.handleClient(); | |
| } |
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)
Excellent !
RépondreSupprimeret si je veux commander un moteur de chassis!!!!
RépondreSupprimerpar exp ( je veux faire une page web qui me permet de commander le robot avancer/reculer son besoin d'une liaison cable) deja j'ai vu ton voiture teleguidee mais je veux que la commande a travers dans la page web
merci de me laisse une reponse !!!!
merci pour le tuto
RépondreSupprimerdonc si je veux commander par exp les moteur d'un robot a travers une page web son besoin de soolution teleguide qui t as publier est c k sera possible ou nn ?
sil vous plait je n'arrive pas a installer la librairie ESP8266 dans l'IDE arduino. comment fair?
RépondreSupprimerBonjour,
RépondreSupprimerVotre Sketch apparaît en Html !
On ne peut pas voir les commandes en Arduino
Tout est normal de mon côté, pourtant.
Supprimer