ESP8266: Contrôler une LED à partir d'une page WEB

N.B.: Avec les années, cet article est devenu quelque peu désuet. Je vous conseille de consulter cette version plus récente et améliorée: Piloter des LEDs par WiFi (ESP32 / ESP8266).

Hé oui: comme vous l'avez deviné en lisant le titre, l'ouverture d'une page WEB à partir de n'importe quel appareil (ordinateur, tablette) nous permettra d'allumer ou d'éteindre une LED branchée à un module WiFi ESP8266 situé sur le même réseau.

Ce que le titre ne dit pas (sinon, il serait trop long), c'est que nous allons programmer le module ESP8266 au moyen de l'IDE Arduino pour que l'ESP8266 agisse ensuite de façon autonome.   La LED sera branchée à la pin GPIO2 de l'ESP8266.

Une autre possibilité (que j'espère bien avoir l'occasion d'explorer dans un futur article) serait d'utiliser l'ESP8266 comme périphérique d'une carte Arduino (nous programmerions alors l'Arduino et non l'ESP8266, et la LED serait branchée à l'Arduino).

Préparation de l'IDE

Tout d'abord, si vous n'avez jamais programmé l'ESP8266 au moyen de l'IDE Arduino, il faut télécharger et installer dans l'IDE les composants nécessaires (ils ne sont pas inclus au départ dans l'IDE).  Vous trouverez ici une marche à suivre détaillée.


Circuit permettant d'uploader le sketch dans l'ESP8266

Le même article vous présente un circuit comportant une carte Arduino et un convertisseur de niveau logique 4050 qui permettra de télécharger un sketch dans l'ESP8266 (il ne s'agit que d'une des façons possibles de procéder; une méthode plus conventionnelle consisterait à utiliser un convertisseur USB/UART de 3,3 V).

N'oubliez pas que la pin "GPIO0" de l'ESP8266 doit être liée au GND pendant l'upload du sketch.

Ouverture, modification et upload du sketch

À cette étape, inutile de réinventer la roue:  nous allons simplement ouvrir l'exemple intitulé "WiFiWebServer" (vous y accédez par le menu Fichier - Exemples - ESP8266WiFi - WiFiWebServer)

Avant de pouvoir utiliser ce sketch, il est important le remplacer la mention your-ssid par le nom de votre réseau WiFi, et your-password par le mot de passe de votre réseau WiFi (conservez les guillemets).

Vous êtes maintenant prêts à téléverser le sketch dans l'ESP8266:  avant de déclencher l'upload, assurez-vous que vous avez sélectionné "Generic ESP8266 Module" comme "Type de carte", que vous avez sélectionné le bon port série, que la pin GPIO0 de l'ESP8266 est reliée à GND, et que l'ESP8266 est alimenté.  C'est une bonne idée aussi de faire un petit reset de l'ESP8266 (en reliant temporairement la pin RST à GND) avant de faire l'upload.

Utilisation du sketch

Maintenant que le sketch a été téléversé dans l'ESP8266, nous allons devoir apporter quelques modifications au circuit:  après avoir coupé l'alimentation de l'ESP8266, déconnectez la pin GPIO0 de GND (vous pouvez la brancher à 3,3 volts, ou la laisser débranchée).  Il faut aussi brancher une LED ainsi qu'une résistance de protection à la pin GPIO2 de l'ESP8266.

Au départ, j'avais utilisé une résistance de 150 Ω et j'ai fait face à tout un tas de problèmes: impossible d'uploader un sketch dans l'ESP8266 pendant que la LED était branchée, impossible pour l'ESP8266 de se connecter au réseau WiFi pendant que la LED était branchée, et connexion au réseau WiFi plutôt instable pendant que la LED était branchée...  En supposant qu'il s'agissait d'un problème liée à l'alimentation de l'ESP8266, j'ai augmenté la résistance pour que la LED consomme moins de courant, et ça a fonctionné.  Avec une résistance de 1 kΩ, tout fonctionne à la perfection.

Affichez le moniteur série de l'IDE Arduino (réglé à 115200 bauds puisque c'est ce qui est prévu dans le sketch), puis alimentez à nouveau l'ESP8266:  le moniteur série devrait afficher un message indiquant que l'ESP8266 est en train de se brancher au réseau WiFi.  De plus, l'adresse IP assignée à l'ESP8266 est indiquée.

Il ne vous reste plus qu'à taper cette adresse IP dans n'importe quel fureteur web hébergé par un appareil se trouvant sur votre réseau local.

Dans mon cas, l'adresse IP indiquée est 192.168.1.69 , donc j'écris dans un fureteur :

                 http:/192.168.1.69/gpio/1

La LED s'allume, et une page web (assez minimaliste) me confirme que la pin GPIO est maintenant au niveau logique haut.

Et voici ce qu'affiche le moniteur série s'il est toujours en fonction:

Nous n'avons pas à nous inquiéter concernant la mention "invalid request" qui concerne, si j'ai bien compris, l'absence d'icône associée à notre page web.

Retour à mon fureteur web, ou j'écris maintenant:

                 http://192.168.1.69/gpio/0

... la LED s'éteint, et une nouvelle page web m'indique que la pin GPIO est maintenant au niveau logique bas.

Voilà qui constitue un bon point de départ!  Vous pouvez continuer d'étudier l'exemple WiFiWebServer et le modifier afin qu'il construise une page web convenant mieux à vos besoins.  La LED peut être remplacée par autre chose (un relai!).  J'ai utilisé la carte ESP-01, qui ne comporte que deux pins GPIO, mais d'autres cartes ESP8266 comportent un nombre beaucoup plus grand d'entrées et de sorties.

Si vous désirez plutôt afficher dans une page web l'état de capteurs branchés à l'ESP8266, voir cet article.

Yves Pelletier   (Twitter, Facebook)