Débuter avec l'ESP8266 : Rendre la page WEB dynamique pour allumer ou éteindre la LED (AJAX)
HTML-код
- Опубликовано: 26 авг 2024
- Cette vidéo propose une amélioration de la vidéo présentant la mise en place d'une page Web permettant le contrôle d'une LED à distance.
La page n'est plus rechargée à chaque interaction de l'utilisateur. Seule l'information d'état de la LED est mise à jour à partir d'un appel au serveur pour allumer ou éteindre la LED par un mécanisme de type AJAX avec l'avantage de limiter le trafic entre l'objet connecté et le navigateur. Un autre atout important est la disparition du scintillement provoqué par les mises à jour de la page Web lorsque celles-ci concernent la totalité de la page.
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/
Une fois de plus merci pour votre sérénité pour expliquer. C'est très riche et j'ai bien reproduit le projet même si il n'est pas évident de suivre les subtilités de programmation.....mais ça marche...😅
Très bonne vidéo comme toujours, encore un pouce bleu.
En général sur les projets je préfère éviter l'Ajax hors JQuery (même si l'argument du poids est imparable). C'est trop pénible à débuger et sensible aux navigateurs. Mais c'est une affaire de goûts.
Cela dit pour prolonger l'idée de l'architecture pour un projets complet, je mettrais plutôt un serveur HTTP sur un serveur dédié (type NAS) et je le ferais parler via des websockets à/des ESP8266 qui eux piloteraient des capteurs ou des actionneurs.
En tous cas bravo pour toutes ces videos elles sont vraiment très bien faites.
Merci Cyrille pour le commentaire. On peut tout à fait utiliser jQuery. Le poids n'est pas un réel argument ici car cela reste assez léger. Je mets aussi Bootstrap parfois.
Après, je ne suis pas du tout un spécialiste js, css, php... Je me débrouille et essaie de rester pédagogique dans la présentation.
@@EricPeronnin vous réussissez car vos êtes TRÈS pédagogue.
Merci 😊
@@EricPeronnin Je pense que le plus efficace ici serait de déléguer la partie web à un serveur dédié à part et laisser le serveur de l'ESP transmettre uniquement de la data en json par exemple.
Merci beaucoup votre travail, vos tutoriels son très enrichissant !
Vidéo au top pour apprendre à utiliser l'esp8266 il faut être complet en code ( C++, html etc...) Merci ca fait du bien de me replonger dans un peu de soft.
Impec, merci pour la vidéo
Merci encore pour une autre belle formation. Dans le bloc html je n'arrivais pas à afficher l'état de la led. Donc j'ai changé par et bingo tout est parfais.
Etonnant. Cela devrait fonctionner avec la balise h2 de la même façon. Peut-être est-ce lié à votre écriture de etatLED au lieu de etatLed.
Bonjour,
Bravo pour la qualité de vos vidéos. Etant quasi débutant j'apprends beaucoup (j'occupe ma retraite) et je passe énormément de temps car on n'assimile pas aussi vite à 60 ans qu'à 20 ans.
J'ai décidé de m'attaquer à cette série de vos vidéos ESP8266 et depuis plusieurs semaines je bute sur la vidéo 5 avec une erreur que je ne parviens pas à éliminer. J'ai une erreur de définition de la variable "temp" que j'ai pourtant déclarée suivant ces lignes 49 à 53 :
void handleRoot() {
String temp(reinterpret_cast(index_html));
if (digitalRead(PIN_LED_VERTE) == HIGH) temp.replace("%LED%", "allumée"); else temp.replace("%LED%", "éteinte");
serverWeb.send(200, "text/html", temp);
}
J'ai un rapport d'erreur :
identifier "temp" is undefine C/C++ (20) [86, 31]
Ligne 86 :
serverWeb.on("/index.html", temp);
Merci par avance pour votre retour
Bonsoir Gérard. Merci de m'envoyer le code complet à eric at geii.eu pour que je comprenne où est le problème.
Eric
@@EricPeronnin Ok, je viens de vous envoyer le code, Merci encore
Gérard
Bonsoir, la méthode "on" attend en deuxième argument une fonction void. Vous lui rentrez en paramètre un objet de type String d'où l'erreur. La solution est donc de remplacer dans la méthode "on" l'objet temp par la fonction handleRoot.
J'espère avoir pu vous aider dans ce commentaire.
Bien à vous.
je rame mais je m'accroche ! merci bien!
Courage ! On verra après la modification d'objets existants.
Bonjour, et encore merci pour toutes ces connaissances !
A la fin de la vidéo vous parlez de la possibilité d'utiliser le système AJAX pour afficher des graphes. Auriez-vous des conseils ou des sources pour mettre cela en place par rapport à la configuration mise en place dans cette série de vidéos ?
Bonjour,
Super vidéo très instructive.
J'ai plusieurs questions :
- est ce qu'il est possible lors du démarrage de la carte de renseigner l’état actuel de la LED. autrement dit ne pas être obligé de l'allumer ou de l'eteindre pour avoir sa position.
-est ce que un affichage conditionnel des boutons est possible. par exemple si la LED est allumée on affiche que le bouton "éteindre" et inversement
En vous remerciant
Bonjour. Oui il est possible de mettre à jour le champ de la LED dès le premier appel sans presser les boutons. Il suffit gérer la réponse à la requête HTTP sur la page principale d'effectuer le traitement de la page avant envoi. On peut aussi exécuter une ligne de javascript au chargement de la page qui consulte l'API comme le fait l'appel au moment de l'appui sur le bouton.
Pour l'affichage conditionnel, vous pouvez ne laisser qu'un bouton et changer l'intitulé avec le code javascript effectuer au moment de l'appel de l'API pour basculer l'état de la LED.
@@EricPeronnin Bonjour,
Merci pour votre réponse, j'ai un peu galéré mais j'ai trouvé pour changer un bouton ou le faire disparaitre, ainsi que d'envoyer une requête au démarrage qui met à jour les champs.
J'ai une question subsidiaire...
Est ce que les informations qui sont envoyées de l'esp sont forcement des réponses à des requêtes envoyées par JS ou alors l'esp peut de son initiative envoyer des informations à traiter?
Je m'explique, j'ai fait un petit régulateur de température, aujourd'hui je règle mes consignes via un petit écran et des boutons poussoirs. J'ai implémenté un serveur web, mon seul problème, comment mettre à jour les valeurs dans mon serveur web au moment du changement de consigne via les boutons. aujourd'hui je m'en suis sortis en faisant un tache qui se répète via la fonction "setInterval" dans le JS. Mais est ce que l'esp pourrait lui même indiquer au JS qu'il a quelque chose à lui dire?
En vous remerciant
@@doubytchou4254 Bonjour, pouvez-vous préciser la solution que vous avez trouvée pour afficher l'état de la LED au démarrage ? Merci beaucoup
Thomas DI FRENZA
Bonjour, ce que j’ai fait c’est que dans le js il y a une fonction qui est :
« window.onload » qui detect le chargement de la page
J’ai fait un « window.onload=Init() »
Init() étant ma fonction qui envoie une requête l’esp pour demander l’état de la led et me renvois l’état de la led.
La requête que j’envoie et du même type que dans la vidéo.
J me ne sais pas si c’est la manière optimale de la faire mais ça marche bien chez moi.
En espérant avoir était assez clair.
bonjour, merci pour vos vidéos. Je n'est pas bien compris la fin avec le mode Point d'accès.
Je réussis bien à trouver et connecter avec mon smartphone en wifi "objet LED", mais lorsque je tape l'adresse 192.168.4.1 dans chrome de mon smartphone rien ne se passe.
On est bien censé retrouvé la page html ?
J'ai vérifié l'adresse IP précises en passant du statut Paramêtre IP d'"objet LED" de DHCP vers statique. il donnait adresse IP 192.168.4.2 et passerelle 192.168.4.1, j'ai bien modifié et enregistré du coup l'adresse IP en 192.168.4.1 mais toujours rien lorsque je tape cette adresse dans chrome.
Bonjour. Essayez avec 192.168.4.1/index.html (avec ou sans le l final car je ne sais plus si je l'avais mis).
Bonjour, très bonnes vidéos avec les explications. J'ai démarrer de la 1 a la 6 pour essayer de comprendre les modifications au fur et a mesure. Je n'arrive pas a ajouter le lecture d'un capteur. Comment faire apparaitre la température d'un capteur dht22 sur la page web dynamique. Merci d'avance.
Bonjour. Je vais voir ce que je faire comme vidéo sur le sujet. Etonnant que cela puisse poser la moindre difficulté.
@@EricPeronnin Bonjour, merci pour la future vidéo. je suppose que ce n'est pas compliqué la lecture du capteur dans cette programmation, mais je n'ai pas encore bien compris les rouages de la partie page web dynamique. Nouveau dans la programmation arduino. Merci encore pour votre travail.
C'est des vidéos top, mais je me rends compte que le fichier correspondant à la vidéo serait un GROS plus pour une meilleure compréhension.
Je vais les mettre en ligne prochainement. Merci pour le commentaire.
PS : il y a un lien dans les commentaires de la vidéo 9
Super, merci j'ai juste un petit souci concernant l'état de la LED sur la page WEB qui m'indique "
id="etatLED"> " j'ai du commettre une erreur en écrivant le code mais je ne trouve pas
Une erreur de balise certainement.
Bonjour, est'il possible d'afficher l'adresse IP de l'ESP dans la page web en utilisant PROGMEM ?
Bonjour. Oui, on peut le faire de la même façon qu'on affiche l'état de la LED.
Bonjour , Merci de montrer comment on peux faire la redirection vers la page web directement en se connectent sur l'ESP en mode asyncwebserver sans taper l'adresse IP SVP .
Salut :)
Est-ce que le code est dispo a quelque part sur le web?
Merci.
Marc.
Bonjour. Celui de la vidéo 8 est ici : www.geii.eu/TutosESP8266/ESP8266_api.zip
Super video, merci. Est ce qu'on peut récupérer le code quelque part ? Et a quand la suite ?
Bonsoir. Je vais créer un dépôt de zip pour les différentes étapes. Je ferai une annonce le moment venu. Eric
@@EricPeronnin Super, merci.
J'ai pourtant tout suivi mais l'état de la led reste muet. Merci pour les tutos. Ceux pour les profs me sont aussi utiles.
Etrange. Les vidéos précédentes fonctionnaient ?
@@EricPeronnin Oui très bien. Après c'est l'extension platformio qui cause cela peut être.
@@francoisguillou9995 Ce serait étonnant. Une erreur a du se glisser quelque part.
Narcisse, à quoi sert l'incrustation de bureau et TOI?
À te rendre désagréable