Contrôlez votre ESP32 à partir d'une page web! (version facile) [ESP32 Ép#3]
ฝัง
- เผยแพร่เมื่อ 13 ก.พ. 2020
- Pour soutenir mon travail: tommydesrochers.com/me-soutenir/
Faire un don: bit.ly/35TD7os
Venez discuter sur mon serveur Discord: / discord
Plateforme de développement ESP32: bit.ly/2PRyK8h
Flash deals Banggood: bit.ly/2upifb4
Pour voir les codes créés dans cette vidéo:
tommydesrochers.com/controlez...
Bonjour! Dans cette vidéo je vous présente un tutoriel pour apprendre comment héberger un serveur web sur un ESP32. Cette vidéo est la version "facile". Dans le futur je ferai une version un peu plus complexe et optimisée. Aujourd'hui vous explique comment afficher des pages web et comment créer des interactions entre la page web et l'ESP32. Après avoir écouté cette vidéo, vous saurez comment envoyer des commandes à l'ESP32 à partir d'une page web et aussi comment afficher les variables de l'ESP32 dans la page web. J'espère que vous apprécierez cette vidéo!
Pour me rejoindre:
- www.TommyDesrochers.com
- / td72pro
- / td72pro
- / td72pro
- / td72pro
Pour me soutenir:
- Faire un don: bit.ly/35TD7os
- Lien affilié Amazon.fr: amzn.to/2CcGn2t
- Lien affilié Amazon.ca: amzn.to/2CapxBc
- Lien affilié GearBest: bit.ly/2Eitk2h
- Lien affilié Banggood: bit.ly/2CImNwd
- Lien affilié PCBWay: bit.ly/2zt6MG6
***
La description de cette vidéo contient des liens affiliés. Cela signifie que je gagne une certaine commission sur les produits achetés à partir de ces liens. C'est majoritairement ainsi que je peux financer mes projets et partager gratuitement mes vidéos sur le web. Alors je souhaite remercier tous ceux qui me soutiennent. C'est grâce à vous que ces vidéos sont possibles! - วิทยาศาสตร์และเทคโนโลยี
![La meilleure méthode pour héberger une interface web sur ESP32? (version avancée) [ESP32 Ép#4]](http://i.ytimg.com/vi/DDMQbqPUliY/mqdefault.jpg)
![La meilleure méthode pour héberger une interface web sur ESP32? (version avancée) [ESP32 Ép#4]](/img/tr.png)
![Récupérer les valeurs d'un formulaire web sans rafraîchir la page (jQuery) [ESP32 Ép#5]](http://i.ytimg.com/vi/LkxCr_n3JOw/mqdefault.jpg)
![Premiers tests pour bien débuter avec l'ESP32 [ESP32 #1]](/img/n.gif)
J'espère que cette vidéo vous aidera avec vos projets 😀
Salut Tommy
Voilà un lien où tu a une courte i fo sur une nouvelle façon d imprimer
th-cam.com/video/rSwPBNu2Li8/w-d-xo.html
Comme toujours tes vidéos sont très ludique et m'aident énormément dans mon projet domotique DIY. Un grand merci à toi !
Un retour sur la function setContentLength => en effet cela améliore la vitesse de chargement
Merci Tommy pour transmettre ton savoir. Bonjour de France car je pense que nous sommes plusieurs à te suivre et je trouve que tu mérites largement largement largement plus d'abonnés.
Parfait, tu expliques vraiment bien ! J'ai mentionné tes tutos ESP32 sur mon forum, tellement ils sont bien fait et complets !
Hello from France :-) Merci Tommy pour tous tes tutos hyper pédagogiques et complets.
Très bonne vidéo. J'ai suivi le tuto et le résultat est impeccable.
Vivement la suite avec les styles CSS sur la carte ESP32.
Bravo !
je te suis depuis des années et je suis vraiment admiratif devant toutes tes precisions! ce n'est pas seulement une appli envoyée comme ca mais avec des explications comme les tiennes, ca tient vraiment la route
merci du sud de la france👋👋👋
Merci, grâce a toi, je me lance... Très professionnel tes vidéos
Merci Tommy je suis total novice mais je compte me lancer en suivant tes tuto et adapter a mon besoin.
Continu comme cela.
Franchement je te merci ça m'aide beaucoup pour mon projet de SIN en STI2D. Tout est bien expliqué, on ne peux que comprendre grâce à ta vidéo. Bonne continuation pour tes futures vidéo ! ^^
Super vidéo/série, c'est vraiment bien expliqué, continue comme ça !
Merci beaucoup Tommy pour ce tuto très complet, tu le rends vraiment accessible .Top hate de voir les autres tuto pour tout ce qui est iot.Bonne continuation à toi.
Super vidéo, je te découvre et faisant des recherche car je débute dans la programmation, les esp32 et tout le monde du code en fait. Grace à ton travail j'ai pu créer ma première page web reprenant les données de mon esp que j'ai appris à coder la semaine dernière. Un grand grand merci à toi. D'ailleurs je vais tout de suite soutenir ta chaine. Big Up...
Super vidéo comme toujours. Merci Tommy 👌👍🙂
Excellent... pour le débutant queje suis, tout est clair... Bravo et merci !!!
Super Tommy!!! Merci pour ton travail ;)
Merci pour ta vidéo, j’ai commencé à te suivre pour les imprimantes 3D, ensuite ta vidéo Arduino Leonardo. Maintenant, je comprends mieux tes vidéos pour serveur Wifi. Merci c’est clair et facile à faire, je vais essayer cela.
Merci Tommy pour cette vidéo, tes tutos sont géniaux! Ca me donne vraiment envie d'apprendre à coder! je vais la regarder de nombreuse fois avant que mon ESP ne fonctionne ....;)
Super vidéo, très intéressant merci.
Super vidéo très clair et super bien expliquée.
Merci, vous venez de me donner des beaux projets pour mon printemps.... Chu rouillé un peu mais....en vous regardant ca revient.... Merci encore
explications claires et concises. Merci beaucoup.
superbe vidéo et super boulot merci pour tout les conseils ;)
Très bonne vidéo, et toujours bien expliquer :D
C'est très bien expliqué 🙏🙏🙏
Bonsoir du Cameroun Tommy
Et merci!
C'est excellent ! Bravo !!!!
Super tuto....un peu compliqué mais ça donne une idée de la réalisation d'une connexion Wi-Fi, utilisation d'un esp 32 en mode serveur et pour couronner le tout création d'une page Web interactive pour allumer et éteindre une led..👏👏👏 bravo...Je vais essayer de relire plusieurs fois le tuto pour mieux assimilé
👍👍👍 Superbe travail
Merci pour tes tutos sur l'ESP32 je commençais à désespérer de faire fonctionner mon module car j'ai un message au moment du téléversement mais en regardant ta vidéo eurêka la solution c'était d'appuyer sur le Boot lors du téléversement.Bonne continuation pour tes vidéos car en français c'est très rare d'avoir des bons tutos.
Comme toujours, agréable sobre et efficace !
(Je vous suivais initialement sur la 3D... et encore)
excellent ! gros merci !
Merci 🤩
WOW!!!!!
Merci!
merci beaucoup !
super video
Super video, incroyable ce qu on peu faire avec ce ptit machin tu m ouvre les porte de la demotique esp32, le ptit truc en plus pour nous sur youtube, cest une play liste de ta série sur ESP*#1 #2 #3 #4 #5, youtube ne les sort pas dans l ordre.
Merci Merci pour tout
Génial !
Ce serait cool une vidéo sur le build d'un switch connecter car je cherche a en créer un pour allumer mon pc a distance :D
nice.... top comme projet merci!
Parfait et très simple
Avant toute chose merci infiniment pour ce que vous faites pour nous. Pour moi c'est nouveau car je ne sais même pas comment ça fonctionne sur le web et je ne sais même pas comment créer mon site web. ça reste félicitation pour la façon dont vous nous informer. Dommage je suis dans un pays où notre monnaie ne traverse pas les frontières autrement croyez moi je vais vous faire un don pour vous encourager
Vraiment, merci beaucoup Tommy! cela faisait des jours que mon projet traînait, mais j'avance grâce à vous! S'il vous plaît aidez moi actuellement à me connecter à ma base de données avec php et l'intégrer dans l'ESP32
Superbe vidéo.. Génial c est très compréhensible.. Je cherchait justement à faire une interface sens devoir passe par raspberry
Je suis sur un esp8266 ça serai cool que vous faite une avec la page html donc interface en progm dans le esp..
Merci et continuez c est jamais lacant ici
Super comme toujours 😉 y a plus cas ajouter une page Web de configuration du WiFi
Hello Tommy. Un grand bonjour et merci d'un cousin de Toulouse. Effectivement, SPIFF est le mieux pour servir les pages web. Particulièrement adapté dans le cas du CSS, qui lui va être statique ;-) (moi je suis fan de Bootstrap). Sachant qu'il y a aussi des css minimalistes comme celui de W3 : Pure, par exemple. Encore bravo et merci pour tout ce que tu partages.
Bravo! :o)
Pour copier le même texte dans plusieurs lignes avec notepad++, tu commences par copier ton texte dans le clipboard, puis tu te places sur la première ligne à la bonne colonne, puis tu presses shift + alt et tu descends avec la flêche du bas. Il ne reste plus qu'à faire un paste (ctrl + v) ;).
Bonjour Tommy,
Je profite de la situation actuelle pour me former à l'IoT avec l'ESP32. Grand merci pour tes vidéos.
Dans le code présent sur ton site, il me semble qu'il y a une petite coquille dans la ligne (cf dans la vidéo 28m22s)
page += " ÉTAT LED: "; page += texteEtatLed[etatLed]; + "";
au lieu
page += " ÉTAT LED: "; page += texteEtatLed[etatLed]; page += "";
Encore Bravo pour ta chaine.
Salut merci pour ce tuto ça fonctionne super depuis presque 2 ans sur ma superbe serrure electronique. Est-il possible d'ajouter un favicon ? Si oui que me conseillez vous ? Merci
thanks brother
Salut Tommy, petite suggestion et peut-être une petit défis par la même occasion... J'aimerais bien avoir une application sur android compatible avec tout les options de connexion et contrôle de l'Esp32 afin de contrôler certain objet de la maison à distance et à l'intérieur. Un peu comme Globe Suite... Voilà, je lance l'idée et je pense que cela serait une belle suite sur ton excellent travail avec l'Esp32... Merci et bonne continuation
ton code est intéressent , j'utilise des ESP8266 avec les mêmes fonctions. je passe par des If else pour l'etat des variables envoyé par le post du FORM html. passé par des fonctions me donne des idées que je vais tester
thanks
Comme d'habitude trés bon tuto Pourquoi sur Iphone obligé de taper 2 fois sur les fonctions ON/OFF La premiere fois on surligne et la deuxieme on active?
Super intéressant, on entre enfin dans le vif du sujet et de l'utilisation forte du composant.
Je dis une connerie, ou l'on aurait pu simplifier le code de "page" comme ceci :
String page = ""
+ ""
+ "....."
+ ""
.....
+ "ETAT LED : " + testeEtatLed[etatLed] + ""
.....
+ "
+ "";
Si je me souviens de mes cours de 'c' de l'époque, la concaténation de chaîne demande une recopie dans un espace vide suffisamment grand à chaque fois que l'on ajoute du texte, ce qui augmente sensiblement le temps de traitement, mais si ça se trouve String prend en compte ce type de fonctionnement.
Et surtout je trouve que le code est plus simple à lire.
On peut tout mettre en hexa les caracteres. et la chaine est faite de \x41 pour la lettre A et on remplace les variables par #%ETATLED%#
Merci super vidéo !
J'ai juste un soucis j'ai adapté le code ça fonctionne sauf quand j'éteins mes leds le serveur se déconnecte.
Une idée ?
Bonjour . Merci pour cette vidéo , qui m'a permis d'enfin, de créer un serveur WEB stable sur une ESP01 (8266) en adaptant légèrement le code et les librairies.Dommage que je ne sache pas configurer notepad++ avec l'IDE Arduino. Un peu nul le GEOGEO.
Super vidéo, en revanche il me semble qu'en C++ (j'en ai pas refait depuis 10 ans), tu peu faire une déspécialisation de caractère avec le /, du coup tu pourrais avoir les doubles quotes (guillemets) dans ton html, de même il me semble que tu peu faire une concaténation directe avec +, et cela permettrait d'utiliser moins de mémoire, du coup tu aurais une ligne du genre:
page += " La led est " + ledState[state] + "";
Mais j'avoue que pour un projet de contrôle de plus grande envergure, pouvoir up les fichier html/css/js directement sur l'ESP serait un plus. Sinon bonne continuation et continue de nous faire des vidéos, elles sont géniales.
Le caractère d'échappement c'est \, plutôt, non ?
@@fred-9929 oui c'est le back slash \ qui permet l'échappement.
Ugo GIRARD concernant l'upload de fichier, j'espérais trouver la solution dans les commentaires, mais vous êtes le seul à en parler, j'ai trouvé cette solution que je vais expérimenter.
randomnerdtutorials.com/esp32-web-server-spiffs-spi-flash-file-system/
Bonjour Tommy
Est il possible de faire la même chose mais au lieu du wifi le faire avec GPRS avec une carte de type t-call v1.4 je voudrais faire un projet dans mon jardin ou il n'y a pas de wifi
Merci Tommy, mais où est-ce que je pourrais télécharger la version IDE Arduino pour Android? Merci encore
Cool Tommy. Super vidéo. Pour info, moi j'ai fait ça sur un esp8266 générique LoLin: il faut adapter deux trois lignes. Le nom de librairie est ESP8266WiFi.h par exemple au lieu de wifi.h. Sans ça il compile pas.
bonne journée
Bonjour Christophe, effectivement, et si j'avais votre post plus tôt, je n'aurais pas perdu tout ce temps. Merci
Bonjour Tommy,
tes explication sont vraiment super et m'ont beaucoup appris, merci !
J'ai toutefois un soucis. Le serveur asynchrone sur l'ESP 32 n'étant pas stable je suis repassé en serveur normal avec le code HTML intégré au fichier main.cpp comme décrit dans ta vidéo (version facile).
Ayant chargé le fichier 3w.css sur mon ESP32 j'ai repris le code de ta vidéo version avancée pour déclarer le fichier CSS car je souhaite utiliser le dichier en local au lieu de devoir accéder à un site internet pour récupérer les éléments.
page += " ";
malheureusement cela ne fonctionne pas.😢
J'ai aussi essayé les syntaxe suivante
page += " ";
ou
page += " ";
mais aucune ne fonctionnent.
Quelle est la bonne syntaxe ? Faut il utiliser SPIFFS et si oui comment ?
D'avance merci pour ton aide.
Super mais à savoir que tu peux upload tes pages web directement dans la mémoire de l'arduino et donc comme ça, tu peux écrire des fichiers html, css et js sans souci !
Je voulais développer une liaison sans fil WIFI entre un ESP32 & un PC, la plus rapide possible avec une vérification du débit en temps réel !
J’ai besoin d’aide(documentation ou tuto)
J'aime !
Très dense et très intéressant !
Ça marche sur mon ESP32 - Restera à adapter sur ESP8266
un tout petit détail : je n'ai pas vu d'où venait : WiFi.persistent(false); ( ni à quoi ça sert )
J'espère trouver comment faire la même chose depuis mon smartphone mais quand je suis à 100km de mon réseau wifi et de mon ESP32 : as-tu expliqué ça dans une autre de tes vidéos ?
Encore Merci et sans doute à très bientôt sur d'autres vidéos : je m'abonne !
WiFi.persistent(false) : je découvre le lendemain que c'est expliqué dans la vidéo précédente ( la n°2 ) ( drôle d'idée de visionner la n°3 avant la n°2, non ? )
1) L'effet de retard est-il dû sans doute au fait du meta refresh qui n'est déclenché que tous les 60 s ?
2) la page CSS est téléchargée par le navigateur, donc pas besoin de copier celle-ci dans ESP32.
Merci Tommy pour cette vidéo très intéressante
Pourrais tu faire une vidéo qui permet d'accéder à un ESP ou un arduino en dehors du wifi, donc via la 4G ou depuis un ordi distant, je cherche désespérément pour le faire mais je coince. Je suis certain que cette information pourra en aider plus d'un, merci d'avance
Tout pareil pour moi. Merci bcp pour vos vidéos. Pouvoir accéderau serveur par la 4G en passant par le routeur et un vpn pour résoudre le problème IP dynamique
Bonjour, Il suffit d'ouvrir un port sur votre BOX . Pour mon cas, j'ai une BOX FREE avec une IP fixe (exemple 84,84,84,84 - IP fourni par l'opérateur), puis de créer une redirection de port vers l'IP de l'esp (192.168.0.230 par exemple . Donc config FREEBOX ou autre --> Gestion des ports ->ajouter une redirection -> IP de destination 192.168.0.230 -> IP source :Toutes (requête venant d'internet) -> Port de début et de fin 50 (ou autre suivant la plage disponible) -> Port de destination 80. voila. Maintenant aller sur votre téléphone (pas en WIFI) en 4g puis taper dans la barre de navigation 84.84.84.84:50. la box va rediriger le trafic vers le 192.168.0.230:80. . pour connaitre l'IP de votre BOX , monip.com
Hello.
Le style w3c est pas mal en effet, mais si l'ESP n'a pas accès à internet tu fais comment ?
Merci pour cette chouette vidéo
Je suis trop impatient ;-)
Merci pour cette vidéo
Super vidéo, bravo pour ta pédagogie ! Une question de novice : comment créer une architecture avec plusieurs esp32 sur le meme reseau wifi (connecté à internet). Un des Esp32 doit-il avoir 2 fonctions soit fonction serveur pour dialoguer avec autres ESP, et fonction client pour l'interface utilisateur ? Exemple d'application : ensemble de thermomètres connectés accessible depuis une page web unique sur internet.
Bonne idée de projet! Pour le serveur on pourrait effectivement utiliser un des ESP, ou utiliser un Raspberry Pi par exemple. L'utilisateur se connecte au serveur et les données de tous les ESP pourraient s'afficher sur l'interface.
Est ce qu'il est possible de lié eps 32 à une camera détaché (à part) ????
bonjour j'espere que vous allez me repondre:j'ai un projet en bts snir sur le kitsurf j'ai comme boulot de faire une page web qui affiche le stream des competitions de kitsurf et en dessous de la video je dois pouvoir faire de la surimpression cad afficher les donnée climatique (rafale vent et direction vent) j'ai pas d'idée comment faire si vous pouvez m'éclairer !merci
bonsoir de france
pour eviter les delais de calcul de la longueur de la page.... suffit de faire un tableau avec deux etats...
static char longPage [2 ];
void setup () ; {
longPage[0] = page.length()+7 // eteinte
longPage[1] = page.length()+7 // allumée
// etc ....
}
Lets goo, un quebecois qui fait de l'électronique sur youtube!!
👍
bonjour qu'elle est la bibliothèque de la page web je ne l'a trouve pas ?
j ai essayer d écrire dans ++ mais quand je save sa save pas sur l ide
Il existe des système comme "uncss" qui parse ton html et qui vire toutes les classes css inutilisés pour ton site: tu as un site plus léger ainsi.
Je ne sais pas si servir ton css depuis l'ESP32 est efficace et ne ralenti pas tu me le diras ;)
Magnifique merci pas de lien vers le code?
tommydesrochers.com/controlez-votre-esp32-a-partir-dune-page-web-version-facile-esp32-ep3/
@@TD72PRO merci super et parfait comme d'hab. Congratulations from Belgium ;o)
Comment accéder à ton site ? Merci !
bonjour monsieur trop compliquer pour je recherche juste Arduino blutoof portail coulissant avec temps arrêt et temps de pause merci d'avance iles de la reunion francaise desolé pour les fautes
Platforme io .. c'est payant ? juste ?