Débuter avec l'ESP8266 : Créer une page Web pour changer l'état d'une LED à distance
HTML-код
- Опубликовано: 12 сен 2024
- Cette vidéo fait suite à la vidéo expliquant comment mettre en place un serveur Web dans l'ESP8266 pour traiter des requêtes html permettant de piloter le module par le WiFi. Pour rappel, cette vidéo avait été diffusée en direct et se trouve disponible dans la playlist Débuter avec l'ESP8266.
Elle présente l'usage de la directive PROGMEM pour stocker la page html dans la mémoire flash de l'ESP8266 et également comment importer cette page dans un objet String pour la modifier et indiquer l'état de la LED.
Le code source est disponible ici : geii.eu/index.p...
Site internet :
Mon site internet : geii.eu pour découvrir mes vidéos sous une forme plus structurée. Faire un don sur PayPal
Matériel utilisé dans les vidéos :
🚀 Kit Eleegoo Arduino UNO utilisé dans la vidéo : amzn.to/3hZ5dG7
🧮 Analyseur logique : amzn.to/3q6VpfX
Carte Zybo Z7 Zynq : amzn.to/3pCMjHV
Oscilloscope Siglent SDS 1104X-E
Matériels évoqués et prévus pour de futurs tests et tutoriaux :
Carte Arduino MKR Vidor 4000 : amzn.to/36qFRfG
trenz ZynqBerry : fr.rs-online.c...
Matériel utilisé pour réaliser les vidéos :
💻 DELL Precision 5530 : www.dell.com
📹 Webcam Logitech : amzn.to/3qE9l1f
📺 Ecran tactile avec stylet HUYON GT191 : amzn.to/39P8Ni7
📺 Ecran DELL 25" QHD : amzn.to/39O5FDb
⌨ Pédalier USB 3 pédales pour les changements de scènes sur OBS : amzn.to/3pqHVLS
Logiciels :
OBS : obsproject.com/
Gimp : www.gimp.org/
VS Code : code.visualstu...
PlatformIO : platformio.org/
Série super intéressante... Qui vulgarise des notions qui me paraissaient très obscures. Bon, va falloir y regarder en plusieurs fois mais l'essentiel est là... C'est clairement expliqué, bravo.
Un énorme merci pour vos vidéos qui guident mes premiers pas dans la découverte de l'ESP8266/32. Simples et bien expliquées, elles sont un support idéal pour l'apprentissage.
Bonjour, merci pour ce tuto ! on voit le coté "prof" , bien expliqué, détaillé et plein de pédagogie.
Merci Didier
Bonjour, super vidéo !
Concernant la page HTML il y a un raccourci clavier grâce à Emmet qui permet d'écrire directement les balises de départ.
Il suffit d'écrire un "!" suivi de la touche TAB, c'est beaucoup plus rapide et ça nous évite d'oublier certaines choses ;)
Merci pour l'information.
Merci beaucoup. je pense utiliser toutes vos explications pour la création d'une station météo.
Que dire... la qualité des cours et les explications sont excellentes. merci a vous pour ces explications. je vais finir par mettre un pouce bleu a chaque....
Merci Pierre. Bientôt une suite à cette série laissée un peu en jachère depuis le début du confinement
@@EricPeronnin Ce que j'aurais souhaité Découvrir c'est l'Interaction entre plusieurs Modules ESP 8266 Merci pour la suite
C'est indirectement prévu avec la vidéo qui viendra expliquer la consultation d'un serveur en mode client.
Vraiment bien.
Un cours par l'exemple, comme je les aime. 😀
Tu es vraiment vraiment le meilleur, on apprend facilement avec toi. Un grand merci.
bonjour, encore merci pour les tuto. Comme je vous disais en mode point d'accès je n'arrivais pas à afficher la page html. intuitivement et en tatonnant je me suis dis que peut être il fallait indiquer dans la partie loop que si on ne se connectait pas par mode wifi ALORS on se met en mode point d'accès et j'ai rajouté dans le else après "digitalWrite(PIN_LED_ROUGE, LOW);
" le code suivant
" serverWeb.handleClient();
WiFi.softAP("objet LED");"
Je n'y connais rien c'est sans doute très vilain comme bout de code mais ça a marché !!!
Bonjour. Je n'avais pas rencontré ce souci. J'y regarderai de plus près. Merci pour votre remarque.
@@EricPeronnin ok j'ai trouvé, je travaillais avec le partage 4g de mon smartphone, j'ai testé avec la livebox plus de soucis. d'ailleurs si on travaille avec le smartphone, le hostname de la dernière vidéo ne marche pas non plus.
Merci pour votre retour. Je ferai mention de ces problèmes lorsque le reprendrai cette série restée un peu en friche depuis un long moment.
Chez moi ça ne change rien, ma page de site ne s'affiche pas.
Bonjour, je suis votre série avec PlatformIO et j'ai été obligé, pour éviter une erreur, de déplacer la fonction handleRoot() avant les fonctions switchLedOn() et switchLedOff ce qui est tout à fait logique car la fonction était utilisée avant d'avoir été déclarée. Bravo et merci pour vos explications très pédagogiques.
C'est normal. L'IDE Arduino ou VS Code+extension Arduino permettent de programmer en plaçant les fonctions n'importe où. En C, il faut normalement qu'une fonction soit déclarée avant d'être utilisée d'où la modification que vous avez été amenée à réaliser.
Le contenu a vraiment beaucoup de valeur !!! Merci !!!
Merci Alexandre pour ce commentaire élogieux.
trop top ton cours du Québec
Merci pour ce cours
Excellent!
Merci. La suivante explique comment faire la même chose avec une requête Ajax pour ne pas recharger la totalité de la page Web à chaque interaction.
Bonjour M. Peronnin,
je suis avec beaucoup d'intérêt ces vidéos. Sur ce sujet, je suis confronté à quelque chose que je ne comprends pas. J'utilise la directive PROGMEM avec le %LED% et la fonction temp.replace, pour afficher un état réflétant le digitalRead sur la pin verte. Preuve que la modification est prise en compte c'est que l'état indiqué sur la page web est "Led allumée", mais cet état reste invariable et même dès le chargement de la page alors que la LED est éteinte.
Mon code, sur le handleRoot est le suivant: void handleRoot(){
String temp(reinterpret_cast(index_html));
if(digitalRead(PIN_LED_VERTE) == HIGH) temp.replace("%LED%", "Led allumée"); else temp.replace("%LED%", "Led éteinte");
serverWeb.send(200, "text/html", temp);
}
Les actions sur les boutons sont conformes, mais l'état n'est pas renvoyé en fonction de la valeur lue par digitalRead.
Ce qui m'étonne c'est que l'état qui est renvoyé dès le chargement de la page "Led allumée" l'est dans la branche conditionnelle ouverte par ce digitalRead...
J'ai beau relire le code, je ne comprends pas...
Merci si vous pouvez m'aiguiller...
Votre site est formidable.
Bonjour. J'ai peu de temps en ce moment. Envoyez moi le projet complet par email. Je regarderai dès que possible
Merci beaucoup pour ce tuto je suis nouveau est ce que je peux poser des questions en cas de Malcom préhension ?
Bonjour! Je suis à la 5eme vidéo, c'est passionant et vous être vraiment très pédagogue, c'est génial. Puis-je néanmoins vous sugerer de faire un mini zoom sur le code? Je me tue les yeux. Merci beaucoup pour le partage!!!
Bonjour et merci pour le commentaire. J'ai prévu de changer la taille de la police pour les prochaines vidéos.
@@EricPeronnin Merci! Désolé de vous re-déranger mais j'ai un message d'erreur que je n'arrive pas à résoudre: "reinterpret_cast from type 'const char*' to type '__FlashStringHelper*' casts away qualifiers"
Sur cette ligne: " String temp ( reinterpret_cast (index_html)); "
:/
Cela empêche la compilation ou c'est juste souligné ?
@@EricPeronnin Oui, ça empêche la compilation... Et c'est souligné alors que sur votre code ça ne l'est pas... J'ai bien fait attention aux chevrons, parenthèses, et autres guillemets... mystère.
Ne vous embêtez pas, je vais finir par trouver... je trouve toujours ;-p
Je précise que je suis novice, il y a peut-être un truc évident qui m'échappe.
@@EricPeronnin C'est bon: en mettant le mot clé const devant __FlashStringHelper, ça marche
Bonjour,
Excellent tuto !
Mais une petite question : Ou peut on trouver la documentation sur la directive de compilation PROGMEM = R"=====( )====="; ?
Idem pour l'objet __FlashStringHelper. Tout ceci est il spécifique aux cartes compatible Arduino ?
Merci bien
~
Hello ! Serait-il possible d'avoir les fichier du projet? J'aimerai faire un interrupteur automatique pour la recharge de mon iPhone (Utiliser le ESP8266 pour contrôler une prise pour couper la recharge automatiquement...)
J'ai suivi les videos et ton blog mais je ne trouve pas tes fichiers...
Merci pour ton boulot remarquable !
Bonjour, très intéressant..
Y aurait-il moyen de mettre la page html dans le code avec un #include à la place d'un copier-coller ?
Bonjour. Oui, voir les vidéos suivantes... :)
Supers tutos en Francais !
Questions.
Dans un projet en cours je ne veux pas passer par une box mais communiquer soit par un 2eme ESP soit par web . Quoi changer dans la com WiFi ?
Encore Merci pour la maniere de rendre accessible du code tres specialisé en simplifiant la compréhension sur du concret.
Pierre
Bonjour Pierre,
il faut qu'un des 2 ESP se comporte en point d'accès. Jusqu'à 12 autres ESP pourront alors s'y connecter sur le même principe qui est exposé dans cette série de vidéos.
Super abonné + 1 Question : Peut-on styliser la page avec tu CSS et de même utiliser du JavaScript ? et faire de belle page avec un ESP8266 ? : Hésiter pas à mettre un lien vers vous sources pour qu’on puissent tester. Merci
Bonjour Stéphane. Je donne un lien vers la fin de la vidéo 7 ( ou 9) et on y voit comment styliser les pages.
Eric Peronnin d’abord merci de votre réponse et pardon je n’ai pas était plus loin encore , je vais bien sûr le faire mais plutôt se week-end afin d’avoir plus de temps ;).
Merci pour vos vidéos ! C’est très très cool de partager vos expériences et avancée ! 👏
Bonjour, j'ai voulu aller sur votre site pour utiliser le code source mais ça m'a affiché ça :
Database connection error (1): The MySQL adapter 'mysql' is not available.
J'ai recharger la page, je l'ai fermée puis rouverte, j'ai mis mon PC en mode avion puis désactivé ce mode et enfin j'ai désactivé-activé le wifi de mon PC : rien à faire ça refait la même chose.
Bonsoir Evan. J'ai fait quelques tests pour l'installation de Moodle sur mon site et cela a momentanément interrompu le fonctionnement du site geii.eu
Le problème n'a pas duré longtemps mais désolé que vous ayez rencontré le problème.
@@EricPeronnin ok
Bonjour, j'ai voulu changer le nom de la fonction qui allume la LED comme ceci :
void Bouton 1()
digitalWrite(PIN_LED_VERTE, HIGH);
handleRoot();
a href=/Bouton 1
button>Allumer la LED
bonsoir Eric, j'ai une erreur dans la compilation au niveau de l'initiation de la page HTML, mais je n'ai pas bien compris l'écriture avec ce R "souligné par ~, je ne sais pas faire peux tu m'expliquer?
Je me répond à moi même je n'avais pas rajouté les signes = à la fin. ça marche
Top. Les questions et les réponses. Utile parfois à d'autres qui peuvent avoir fait la même erreur car cette syntaxe n'a rien de classique.
Le %LED% ne se remplace pas dans le code. Cela pourrait-il venir du faîtes que le module ne possède pas de mémoire flash ? C'est un petit module avec platine relai bleu
Ou cela pourrait-il venir de la carte sélectionné lorsque je vais créer le projet
Non, je ne pense pas. Généralement, c'est plutôt une erreur de frappe...
Vous pouvez récupérer le code ici : geii.eu/index.php?option=com_content&view=article&id=225&Itemid=935
@@EricPeronnin Bien joué. J'ai mis un moment quand même à trouvé l'erreur, je n'avais pas remplacé la string par temp et laissé index_html. Nickel donc et merci de cette réponse ultra rapide
Et autre question tient : J'ai voulu créer une fonction ou la led s'allume, reste allumer 5s et s'éteint
La fonction Timer dans laquelle j'ai mis Delay(5000) est OK
Mais je me dis que pendant que ce Delay s'exécute, rien d'autres ne peut se passer. Du style si j'avais à coté un BP pour allumer une led bleue je ne pourrais pas car le delay est en cours. Une idée de comment il serait possible de traiter plusieurs actions en parallèle.
C'est bon, j'ai résolu mon problème : il fallait mettre switch et ne pas mettre d'espaces dans le nom de la fonction
Bonjour, J'avance avec vous sur ce projet passionnant. J'ai un soucis et je ne vois pas où j'ai raté qqchose. Sur ma page Web à l'écran les accents ne ressortent pas correctement "Led éteinte" s'écrit "Led éteinte" et "Led allumée" s'écrit "Led allumée", c'est un petit soucis certes, mais surprenant. Merci d'avance pour vos éclaircissements.
Bonjour. C'est lié à l'encodage des fichiers. Je fais une recherche demain et vous en dis plus car je n'ai pas la solution en tête.
Bonjour, j'ai trouvé en regardant la vidéo suivante, une parenthèse de trop dans mon code avant UTF-8. pas eu d'erreur de compilation pourtant. Mais bon ça marche maintenant.
1 er
Rapide :-)
Bonjour est-il possible d'obtenir le code ?
Bonjour. Je vais ajouter un lien dans le descriptif de la vidéo dans la journée.
Super merci
@@EricPeronnin : snif.. toujours pas le lien pour le code :D
Bonjour augmente la taille de la police dans l'éditeur on voit que dalle , cela serait plus lisible .
Ok. Ce sera fait pour la prochaine
@@EricPeronnin Merci ,
Tu regardes sur un smartphone ?
@@EricPeronnin Pas du tout sur mon PC je suis basé a l’île de Réunion et suis électronicien de métier .
Belle île... Tu as de la chance. Mon meilleur ami y vit et enseigne à l'iut après avoir enseigné en bts électronique
j'ai une application web qui envoie des données et j'ai besoin d'un code sur esp8266 et arduino pour lire chaque donnée à envoyée, pouvais vous m'aidez ?
Répondu par email...
Bonjour. Une fois de plus Merci.
Je suis en WIFIAP et je n'ai pas d'autre réseaux wifi autour de moi, mon tel voit le SSID de l'ESP, il s'y connecte. Mon tel a pris l'IP 192.168.4.2.
Dans le Navigateur (les 2 navigateurs testés du smartphone), je met en URL 192.168.4.1 ou 192.168.4.1/index.html (puisque j'ai bien déclaré
ServeurWeb.on("/",handleroot);
ServeurWeb.on("/index.html",handleroot); ) et Handleroot est codé :
void handleroot(){
String Temp(reinterpret_cast(index_html));
if (digitalRead(PinLedD2) == HIGH) Temp.replace("%LED%","Led Allumée."); else Temp.replace("%LED%","Led éteinte.");
ServeurWeb.send(200, "text/html", Temp);
}
et Index_html est codé :
const char index_html[] PROGMEM = R"=====(
Commande LED
Etat de la LED
%LED%
Commande de la LED
Allumer la LED
Eteindre la LED
)=====";
Mais le navigateur répond : Ce site est inaccessible;
Idem pour le PC qui a pris l'IP 192.168.4.3 ( vu pa CMD et IpConfig, passerelle 192.168.4.1, mais Edge attend une connexion.
Je révise mes leçons, je reprend la vidéo , mais peut-être avez vous une idée plus rapide.
Encore merci.
Ce soir je test sur mon wif maison.
Vos vidéos sont motivantes.
Bonsoir. Le programme fonctionne-t-il en mode mixte Point d'accès et Station ?
@@EricPeronnin
Bonsoir.
Je suis rentré à la maison. L'ESP s'est connecté à mon réseau wifi maison.
Sur mon smartphone, quand j'appelle l'IP de l'ESP 192.168.1.60, la page web s'affiche.
Les 2 boutons fonctionnent. Sur Smartphone tous est OK.
Enfin, je viens de choisir le SSID sur mon smartphone de l'ESP, et j'ai entré en URL 192.168.4.1, et ça fonctionne.
Pour aller au bout, je suis sorti dans la rue(y caille dehors :) ), jusqu'a perdre mon réseau maison, et en essayant, ça focntionne.
Conclusion tous fonctionne, mais je ne sais pas ce qui s'est passé ce midi.
Je profite quand même pour poser une question.
Est ce qu'il est possible de mettre un port différent pour appeler différents ESP dans la maison ?
J'imagine 192.168.4.1:81 pour le premier
J'imagine 192.168.4.1:82 pour le éme, etc
Je vais maintenant utiliser , le module pour piloter les velux, les volets roulants, la port du garage, et plus tard lire un capteur sec, pour savoir si j'ai bien fermé tous les volet panneaux, quand je pense en avoir oublié un et que je suis déjà au chaud dans mon lit ;)
Est 'il possible de sécuriser l'accès direct 192.168.4.1 ?
Peut on lire les MAC adresses ? et les utiliser pour améliorer encore la sécurité ?
Encore merci pour votre aide.
@@EricPeronnin
Est ce qu'il est possible de mettre un port différent pour appeler différents ESP dans la maison ?
J'imagine 192.168.4.1:81 pour le premier
J'imagine 192.168.4.1:82 pour le éme, etc
Est 'il possible de sécuriser l'accès direct 192.168.4.1 ?
clef wpa2 ou
Peut on lire les MAC adresses ? et les utiliser pour améliorer encore la sécurité ?
Merci
Je réponds a la 2eme question :)
Wifi AP:
WiFi.softAP("ESP8266_1","AAAAAAAA",1,1);
"ESP8266_1" : Le SSID que j'ai mis pour accéder directement sur l'esp sans passer par mon routeur.
"AAAAAAAA" : Le mot de passe (pour essayer), il est trop facile.
1 : c'est le canal choisi
1 : Pour ne pas le diffuser.
Les paramètre ci dessous
Paramètres :
ssid - Pointer to the SSID (max 31 char).
passphrase - For WPA2 min 8 char, for open use NULL (max 63 char).
channel - WiFi channel number, 1 - 13.
ssid_hidden - Network cloaking (0 = broadcast SSID, 1 = hide SSID)
max_connection - Max simultaneous connected clients, 0 - 8. bbs.espressif.com/viewtopic.php?f=46&t=481&p=1832&hilit=max_connection#p1832
Et encore merci à Eric pour son aide.
Pour la première question, pas possible. On ne peut pas avoir plusieurs clients sur une même adresse IP. Les ports permettent à un client de traiter différents flux par différentes applications qui écoutent chacune un port ou plusieurs ports spécifiques.
Pour la sécurisation, il est possible de rendre aussi les pages web accessibles par mot de passe.
Enfin, c'est vrai qu'une solution peut consister à relier plusieurs modules sur un point d'accès à base d'ESP8266 également, ou ESP32 qui gère plus de clients. Le point d'accès pouvant être relié à la box sur la classe d'adresse de la box. En fait on peut facilement réaliser une box domotique avec un ESP8266 si on ne cherche pas à faire des choses trop compliquées.