Publié le 11 mars 2020 - par

Piloter un ESP8266 via une page WEB

Comment allumer une LED (mais si on sait allumer une LED on peut faire plein d’autres choses 🙂 ) avec un ESP8266 à distance ? C’est possible sur le même réseau WiFi mais quand on est loin et qu’on veut utiliser son smartphone, comment faire ? Je n’ai pas configuré d’accès externe sur la box et j’ai voulu passer par une page web du site framboise314.

Comme d’habitude, quand on veut créer un objet connecté, on trouve PLEIN de solutions… dont beaucoup ne fonctionnent pas. Vous trouverez une partie des sources en bas de l’article, mais le site qui m’a vraiment décoincé c’est macami.fr que je remercie, bien entendu, ainsi que le github esp8266/Arduino.
Réaliser un projet c’est bien, en faire profiter les autres, c’est mieux !
Voici donc une présentation de cette réalisation. Certains diront que c’est trop facile et qu’ils en font 3 comme ça en une heure sur un coin de table… Bin moi j’ai dû chercher, galérer, essayer des solutions qui fonctionnaient partiellement, bien ou… pas du tout. Plusieurs journées d’amusement.
Mon idée est finalisée, la voici pour ceux que ça intéresse.
Pour les autres, passez votre chemin 😉 .

Allumer une LED à distance avec un ESP8266

L’idée c’est d’avoir un ESP8266 (NodeMCU v3 de LoLin) à la maison, pilotant une LED. L’ESP8266 se connecte à la box (1) avec les identifiants WiFi. Il va lire cycliquement une page sur le site web de framboise314, hébergé chez Yulpa (2). Il récupère un fichier .json qui lui indique si la LED doit être allumée ou éteinte. Depuis un navigateur connecté sur une page web (3) il est possible de modifier le contenu du fichier .json pour indiquer si la LED doit être allumée ou éteinte.
On va procéder par étapes :

1) Programme ESP8266 pour

  • se connecter à la box
  • lire le fichier sur un site en HTTPS
  • Commander la LED

2) Source de la page web pour gérer la LED

3) Utilisation de l’ensemble

Connecter la LED

La carte NodeMCU utilisée pilotera une LED branchée entre la borne D7 (GPIO 13) et une masse G.

Connexion de la LED sur la carte NodeMCU

Programme de l’ESP8266

Se connecter à la box

Le programme ESP_LED.ino est disponible en téléchargement sur ce lien : ESP_LED

Pour se connecter à la box on utilise le SSID et la passphrase que vous utilisez habituellement pour connecter vos appareils au WiFi.

C’est ici qu’il faudra mettre vos identifiants.

Accéder au site HTTPS

Pour pouvoir accéder au site il faut d’abord récupérer le hash SHA1 du certificat utilisé sur le site

 

Pour récupérer ce hash (opération faite sous Windows) : Rendez vous sur la page
https://www.framboise314.fr/HTTP/light.json
et cliquez sur le cadenas. Cliquez sur la flèche à côté de Connexion sécurisée

Cliquez sur Plus d’informations

Cliquez sur Afficher le certificat

Relevez le Hash SHA-1, sans faire d’erreur.

Remplacez maintenant chaque octet dans fingerprint() par exemple le premier octet 64 deviendra 0x64 (hexadécimal).

Il faudra remplacer la page framboise314 par la votre si vous mettez ce système sur votre site web. Ensuite on va informer la bibliothèque de la valeur du hash.

Ceci permettra d’accéder au site.

Le programme peut avec ces éléments se connecter au site HTTPS et récupérer le fichier .json.
Il va récupérer dans le fichier la partie qui l’intéresse :
Si le fichier contient “on” on allume la LED
S’il contient “off” on l’éteint.

Commande de la LED

On met simplement la sortie à l’état 1 ou à l’état 0 pour allumer ou éteindre la LED.

Puis le programme reboucle pour lire à nouveau le fichier sur le site web. J’ai mis un intervalle d’une seconde pour pouvoir observer rapidement les modifications mais vous pourrez adapter en fonction des besoins.

Attention aux collisions
Si plusieurs ESP8266 se connectent en même temps sur la page, vous aurez des résultats bizarres puis que chacun pourra allumer/éteindre la LED de l’autre 🙂

Programme source de la page web

Le programme installé sur le site web LED_on_off.php est disponible en téléchargement LED_on_off

Le programme affiche 2 boutons : ON et OFF. Quand on clique sur un des boutons, il modifie le fichier light.json qui contient l’état de la LED.

Pour ordonner la modification de light.json, le programme s’appelle lui-même en se passant la commande en paramètre quand on clique sur un des boutons :

Ici la LED doit s’allumer, le début du programme analyse le paramètre reçu après le signe ?

En fonction du paramètre reçu, il écrit le contenu du fichier .json soit

ou

C’est cette information que l’ESP8266 vient récupérer pour allumer/éteindre la LED.

Utilisation de l’ensemble

Dans l’ordre il va falloir charger le programme de l’ESP, si vous utilisez un Raspberry Pi, cet article vous explique comment faire. C’est un fichier .ino qui va être téléversé et exécuté. l’outil Moniteur série vous permet de surveiller ce qui se passe :

N’hésitez pas à utiliser la commande Serial.print() pour afficher des valeurs intermédiaires, c’est un bon moyen pour apprendre comment fonctionne le programme et trouver des erreurs.

Ensuite si vous pouvez accéder à un site web, créez un fichier light.json vide et chargez le fichier LED_on_off.php sur le site avec FileZilla par exemple et ouvrez la page dans un navigateur.

Vous avez maintenant les 2 boutons qui vous permettent de piloter la LED, en changeant la valeur écrite dans le fichier light.json. LE programme de l’ESP viendra lire ce fichier et agira sur la LED en conséquence.

La page web sur le blog framboise314 est accessible sur
https://www.framboise314.fr/HTTP/LED_on_off.php

Vidéo

Là j’ai honte 🙄 j’ai scotché l’ESP8266 et la LED sur l’écran pour qu’on voie bien comment ça fonctionne…

Conclusion

Une fois que ça fonctionne avec une page web, ça fonctionne aussi depuis un téléphone (bin oui on accède à la même page web) et c’est l’objectif que je m’étais fixé.

La prochaine étape sera de mettre un petit serveur web dans un ESP8266 avec un AP (Access Point), pour faire la même chose mais cette fois directement sur le réseau local.

Si cet article vous a plus n’hésitez pas à le dire. S’il vous a déplu… dites le aussi

ps : ne montrez pas ça à votre compagnon/compagne … Le commentaire c’est : “Bin oui quoi, tu cliques sur ON et ça allume la LED 😥

Sources

Share Button

À propos François MOCQ

Électronicien d'origine, devenu informaticien, et passionné de nouvelles technologies, formateur en maintenance informatique puis en Réseau et Télécommunications. Dès son arrivée sur le marché, le potentiel offert par Raspberry Pi m’a enthousiasmé j'ai rapidement créé un blog dédié à ce nano-ordinateur (www.framboise314.fr) pour partager cette passion. Auteur de plusieurs livres sur le Raspberry Pi publiés aux Editions ENI.

23 réflexions au sujet de « Piloter un ESP8266 via une page WEB »

  1. Ruben

    Bonjour,

    En labo j’utilise Node-red sur un raspberry pi 4 4gb pour faire du controle/commande et de l’acquisition avec des appareils en rs232/485. Le dashboard permet l’accès à distance. Il doit être possible de faire la même chose avec un ESP8266.

    Répondre
  2. Yoann

    Quitte à utiliser du Json, pourquoi ne pas passer par la lib dédiée https://arduinojson.org/v6/example/ (surtout si on utilise le système pour échanger des infos plus compliqué qu’une seule variable) ?

    Par contre une question : avec ce code, l’ESP va télécharger toute les secondes un fichier, ça pas le plus efficient comme système non ? pourquoi ne pas avoir choisit la solution “site web -> box -> redirection sur l’esp” et donc d’agir directement sur l’ESP plutot que d’attendre qu’il télécharge le fichier ? et avec cette méthode on peut indiquer à la box de limiter la redirection pour une IP bien spécifique (celle du serveur). Perso c’est ce que je fais. Du coup je suis curieux de savoir pourquoi vous avez choisi cette option 😉

    Cordialement,

    Répondre
    1. François MOCQ Auteur de l’article

      Bonjour Yoann
      merci pour votre message.
      je découvre l’ESP, ce sont mes premiers pas (encore chancelants 🙂 ). Le blog me sert de bloc notes et je partage mes expériences. j’admets qu’elles ne sont pas forcément “top”
      je voulais voir si je pouvais me connecter à un serveur web et récupérer des infos (c’était mon cahier des charges). La LED est un prétexte et la connexion toutes les secondes est pratique pour observer la réaction en “presque” temps réel.
      C’est pour ça aussi que je n’ai pas utilisé de bibli json mais je note précieusement l’adresse.
      J’ai créé un compte NoIP et j’attends que le DNS soit actif pour paramétrer la livebox. Ce sera sans doute une prochaine étape… en attendant je m’amuse avec un GPS.
      Mais si vous avez envie de partager vos compétences n’hésitez pas, les pages de framboise314 sont ouvertes et ce sera avec plaisir !
      cordialement
      François

      Répondre
      1. Yoann

        ok je comprends mieux si le but c’était de tester ^^ effectivement si vous n’êtes pas sur une ip fixe c’est plus chiant à faire :s

        Perso j’utilise le meme principe que vous quand je veux récupérer des infos sur mon site, j’ai notamment mis en place un petit site pour gérer mes bobines de PLA via une balance maison avec un ESP8266 et un lecteur de code barre sur mon téléphone. Ca me permet notamment de savoir combien de filament il me reste pour chaque bobine (je tourne pas mal) et de garder un historique des impressions (via octoprint)

        En gros dans l’idée ça donne : ajout d’une bobine -> scan telephone -> requete sur l’esp -> recupération des infos de la bobine sur le site web -> affichage sur un ecran oled | fin d’impression via octoprint -> mise à jour sur le site de la quantité restante et mise à jour de la BDD contenant le listing des impressions.
        Le tout via une API REST maison (donc https + echange de fichier json).

        Bref on fait vite des trucs marrant en couplant web/esp (je suis complétement amateur de mon côté, à la base je suis docteur en biologie moi ^^)

        Bonne continuation et encore merci pour votre blog

        Répondre
  3. Gordon

    Salut M. François Mocq.

    C’est ce que j’attends de vous, des exemples basiques de l’utilisation de composants, comme ce NodeMCU/ESP8266. Je dis bravo !

    La problématique de votre exemple se résume à deux questions :
    1) comment connaitre l’état de ce commutateur ?
    2) comment agir sur ce commutateur ?

    Quand je parle de ce commutateur, je parle de celui dans l’ESP8266 qui va actionner la led en la positionnant à allumer ou à éteint.
    Que se passe-t-il si ce commutateur interne est un système à plusieurs voies ?
    Si vous préférez, je soulève la question du fonctionnement d’un va-et-vient.

    Faire une boucle de 1 seconde pour interroger un fichier json n’est pas la bonne approche. Pourquoi ?
    Parce que vous ne connaissait pas l’état de ce commutateur avant d’agir sur lui.
    Mais le plus important, cette approche est consommatrice de temps CPU qui ne sert, en grande partie, à rien.
    Cette question a déjà été soulevée par Bud Spencer dans un autre billet de ce blog.

    A chaque intervention, il faut agir sur ce ESP8266 mais par l’extérieur.
    Ou si vous préférez, un dialogue doit se faire entre celui qui interroge et l’ESP8266.
    Le dialogue sera au plus simple :

    +————+————-+————-+————-+————–+
    | Dialogue | Etat Led | ESP8266 | Echange | Smartphone |
    +————+————-+————-+————-+————–+
    | 1 Question | Off | En attente | | Ok |
    +————+————-+————-+————-+————–+
    | 2 Question | Off | En attente | | Ok |
    +————+————-+————-+————-+————–+

    Imaginez maintenant, que nous ayons plusieurs leds et donc plusieurs commutateurs.
    Nous devons interroger la led portant un numéro et agir sur l’interrupteur du même numéro.
    Le dialogue n’est pas plus compliqué à faire, sauf que “Etat Led” devient “Etat Led N°”.
    Autrement dit, ce n’est plus un identifiant du dialogue que nous échangeons, mais aussi une information, celle du N° de la led.
    La réponse ne sera pas plus compliqué, dans le sens qu’elle peut se résumer à OUI ou à NON, en fonction de la question posée.

    En langage C, sur une raspberry, j’aurai utilisé les sockets pour gérer le dialogue.
    Cela permet de créer un canal de communication bi-directionnel entre deux appareils (ou plus).
    On transforme l’ESP8266 en serveur et le smartphone en client, soit deux programmes qui vont dialoguer entre eux.

    Après quelques recherches sur le net, la librairie se nomme “websocket” pour l’ESP8266.
    Il est même possible de conserver la structure json pour l’échange de vos messages (ou dialogue).

    Pourquoi gérer un socket ? Parce que l’échange sera beaucoup plus rapide !

    Cordialement.
    Artemus24.
    @+

    Répondre
    1. François MOCQ Auteur de l’article

      merci 🙂
      c’étaient mes premiers pas avec l’ESP
      j’ai mis une seconde d’intervalle pour que le temps de réaction soit rapide pour les tests 🙂
      mon cahier des charges était d’aller lire un fichier sur le site en https.
      Contrat rempli. Après je suis bien conscient qu’il y a plein d’autres solutions mais…
      “chi va piano va sano”

      Répondre
      1. Gordon

        Salut M. François Mocq.

        Je tiens à nouveau à vous féliciter pour les explications ainsi que l’exemple basique de ce microcontrôleur.
        Je suis bien conscient que c’est votre première prise en main avec ce NodeMCU/ESP8266.

        Je constate que NodeMCU est à la fois la carte mais aussi le firmware.
        Le microcontrôleur est le ESP8266 et le microprocesseur Tensilica LX106.
        Dois-je comprendre que c’est le firmware NodeMCU qui rend l’ESP8266 compatible avec l’IDE arduino ?
        Dois-je comprendre aussi que le langage qui est utilisé est nécessairement le LUA ? Ou bien, puis-je utiliser le C ou le C++ ?
        C’est une question importante pour moi !

        En quoi ce microcontrôleur est mieux (ou moins bien) qu’un Arduino (il possède déjà le wifi, non) ?
        Un prochain sujet serait de comparer l’Arduino à ce NodeMCU/ESP8266, afin de voir les avantages (le prix) et les inconvénients.

        Je constate que le wifi sait gérer l’IPv4 mais pas l’IPv6.
        Avec la restriction des adresses IPv4, cela peut être un problème dans l’avenir.

        Cordialement.
        Artemus24.
        @+

        Répondre
        1. Yoann

          Bonjour,
          pour info j’utilise l’ESP8266 depuis 3 ans et il est directement compatible avec l’IDE arduino (suffit d’ajouter le bon package : http://arduino.esp8266.com/stable/package_esp8266com_index.json).
          L’esp8266 peut être programmer directement via un arduino UNO (en branchant correctement certaines broches et via Rx/Tx) et ensuite en OTA (librairie ESP8266HTTPUpdateServer)
          Par rapport à un arduino on a la combinaison atmega+wifi et une compatibilité d’à peut près toutes les librairies, le tout pour 2€ (l’arduino n’a pas de wifi sans carte annexe), c’est déjà pas mal je trouve 😉

          Lle point limitant c’est les broches analogiques : 1 seule sur un ESP8266 et limité à 1V. Mais on peut vraiment faire pas mal de truc avec cette bestiole : pour ma part actuellement j’ai 2 capteurs de mouvements (attention sur ce point tout les capteur type PIR/radar sont problématiques et inutilisable avec un esp), 1 alarme avec lecteur rfid, 1 ecran déporté pour octoprint, 1 balance connectée (pour l’imprimante 3D) et 1 machine à café connectée.

          Répondre
          1. Gordon

            Salut Yoann.

            Merci pour ce retour d’expérience.

            A bien regarder, le NodeMCU/ESP8266 est assez similaire à un raspberry pi zéro W.
            Les GPIO fonctionnent en 3.3Vcc comme dans la Raspberry. Il aurait été plus judicieux de le faire en 5Vcc.
            Coté prix, c’est presque pareil. Raspberry Pi W chez Kubii à 10€ et Module NodeMCU ESP8266 chez Gotronic à 9,35€. On le trouve à 2€ chez Aliexpress !
            Inversement, c’est bien moins cher que l’Arduino Uno Wifi qui est à 40,20€.

            Je me pose la question du pourquoi de la Raspberry Pi zéro W.
            A-t-elle été créé afin de faire de la concurrence à l’ESP8266 ?

            Coté développement, on n’a pas la souplesse de ce que propose Raspbian.
            On est limité par la taille de la RAM ESP8266 à 64KB (source Gotronic) contre la Raspberry PI zéro W à 1Go.
            Le NodeMCU/ESP8266 ne sait pas gérer l’IPv6, ni SSL. Et puis, il faut apprendre un nouveau langage LUA.

            Il existe aussi un ESP32 bien plus performant et est compatible avec l’IPv6, SSL voire même FTP.
            Le ESP32 est moins consommateur d’énergie 4 fois moins) et possède aussi le bluetooth.

            Pour un bidouilleur qui va juste faire mumuse, la Raspberry Pi Zéro W reste abordable, même si plus cher.
            Inversement, si vous avez besoin d’une très grande quantité de ESP8266, la chine reste très attractive en tant que prix.

            En ce qui me concerne, hormis le prix, je ne voie pas l’avantage qu’il peut me procurer vis-à-vis d’un Raspberry Pi zéro W.
            Mais comme je n’ai aucune expérience avec l’ESP8266 ou avec l’ESP32, il m’est difficile de m’y retrouver.

            Pour revenir sur le problème du fichier json, je pense qu’il serait intéressant de transformer le NodeMCU/ESP8266 en serveur WEB.
            C’est par l’intermédiaire d’une page web que l’on peut allumer ou éteindre la led.
            Voici une vidéo de Mr. Tommy Desrochers https://www.youtube.com/watch?v=J557GmCArrc qui explique comment faire.

            Cordialement.
            Artemus24.
            @+

            Répondre
            1. Yoann

              ce n’est pas vraiment la même chose en fait. Un esp8266 c’est vraiment comme un atmega : très pratique pour controler à bas niveau (capteur/actionneur) mais pas du tout utilisable pour un truc avec GUI. Pour ma part j’utilise mon W pour controler mon imprimante 3D avec octoprint. J’ai aussi des Rpi pour gérer ma domotique, mais la partie capteur/actionneur est faite avec des ESP8266 notamment car ils ne valent pas grand chose et permettent de faire bcp (effectivement y a aussi les ESP32 mais plus chère et plus encombrant)

              Répondre
              1. Gordon

                Tout ce que peut faire un microcontrôleur, comme Arduino ou ESP8266, une Raspberry peut le faire aussi, non ?
                Yoann, tu dis “très pratique pour contrôler à bas niveau”.
                En quoi la Raspberry n’est pas adapté à cette tâche ?

                @+

                Répondre
                1. Yoann

                  je suis pas vraiment spécialiste, mais pour moi un Rpi pour surveiller l’état d’une broche c’est pas forcément le plus adapter (notamment côté timing, un processeur sera forcément plus asynchone) mais après why not.
                  P
                  our ma part le choix rpi/esp ne fait surtout par rapport au prix (sur ali, un esp8266 c’est 1€) et l’encombrement (pour un esp8266 monté soit meme, il faut juste un regu 3.3, un condo pour le régu et c’est tout) sans compter le transo (1A suffit) et l’absence de carte sd (cout réduit).

                  Donc si j’ai besoin d’un bon serveur apache et de progamme avec GUI, je me trouve vers un rpi (W ou 3), si j’ai juste besoin d’actionner un relais ou regarder un capteur, un esp8266 suffit.
                  En gros je les vois plus comme complétmentaire que comme étant en concurrence.

                  Répondre
                  1. Gordon

                    Comme je l’ai dit précédemment, le critère ne doit pas être le prix.
                    L’avantage du ESP8266 est de pouvoir s’installer sur une breadboard, d’avoir le wifi et de faire un montage électronique assez simple, genre capteur de température, relais …
                    L’inconvénient est la taille de sa RAM, sa vitesse, et aussi le langage LUA.
                    Encore que, on peut l’utiliser comme une carte embarquée, à savoir téléverser un exécutable écrit en “C/C++”.
                    C’est sur ce point que vous ne m’avez pas répondu.
                    Vu que je ne possède pas l’ESP8266, je ne sais pas trop ce que l’on peut faire en tant que programmation.
                    Inversement, je possède plusieurs Raspberry, je sais les programmer en “C/C++”.
                    Je connais les techniques pour faire de la communications genre client/serveur. Il n’est pas nécessaire d’avoir des grosses ressources, mais la souplesse de la programmation pour arriver à ses fins.

                    @+

                    Répondre
                    1. Yoann

                      Alors :
                      – on put tout à fait programme en c++. ici est présenté une plateforme (que j’ai perso jamais utilisé) mais l’esp en lui meme peut tout à fait etre codé via l’ide d’arduino (donc en c++)
                      – concernant la ram dispo et la vitesse, encore une fois vu qu’on fait tourner des programmes sans GUI, j’ai pas encore eu de limite, autre que le ombre de broche. Mais lire un capteur, actionner un relais, afficher des infos sur un ecrn oled, tout ça c’est très simple
                      – pour le prix je suis pas forcément d’accord, comme dis j’ai 6 circuits actuellement, j’aurai tout à fait pu prendre un Rpi à chaque fois c’est ça fait une sacré somme et surtout mais comparer un à W, un esp8266 seul prend nettement moins de place

                      mais encore une fois c’est juste mon avis, si j’avais les moyens et la place peut être que j’aurai mis des rpi partout 😉

  4. Stéphane

    Bonjour à tous,
    Merci pour cet article très intéressant et qui ouvre des perspectives. C’est génial.

    Ma question est simple : quid de la sécurité ? Quelqu’un peut-il aller modifier le fichier JSON par exemple ? Parce que éclairer une DEL pas de souci, mais si on a un peu plus “lourd” derrière ?

    Répondre
    1. François MOCQ Auteur de l’article

      Bonjour Stéphane
      là aucune garantie. si le fichier est modifié (et ça peut arriver) c’est le bazar
      je ne sais pas après il faudrait voir avec des spécialistes (chiffrer le contenu et vérifier à la réception…?)
      cet article est un aide mémoire, je démarre tout juste avec l’ESP 😉
      cdt
      françois

      Répondre
      1. Stéphane

        Merci François.
        J’attends effectivement l’avis de spécialistes en la question.
        Bonne journée à vous et bonne journée à tous.

        Répondre
  5. Gordon

    Salut Yoann.

    Il n’y a plus suffisamment de place pour poursuivre notre conversation.
    Je te propose de me contacter par mon adresse email : artemus @ jcz.fr

    Cordialement.
    Artemus24.
    @+

    Répondre
  6. PHILIPPE BRONCHART

    Bonjour,
    Merci François pour cet excellent tuto qui me permet de découvrir et comprendre la bête. Super !. Amitiés.
    Bronche

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Complétez ce captcha SVP * Time limit is exhausted. Please reload CAPTCHA.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.