Contrôlez votre ESP32 à partir d'une page web! (version facile) [ESP32 Ép#3]

Pour soutenir mon travail: tommydesrocher...
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:
tommydesrocher...
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.TommyDesro...
/ 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!

[@TD72PRO]

J'espère que cette vidéo vous aidera avec vos projets 😀

[@samgranier6735]

Salut Tommy Voilà un lien où tu a une courte i fo sur une nouvelle façon d imprimer kzbin.info/www/bejne/qITagXWEqpd_n5o

[@akhalfi]

Comme toujours tes vidéos sont très ludique et m'aident énormément dans mon projet domotique DIY. Un grand merci à toi !

[@akhalfi]

Un retour sur la function setContentLength => en effet cela améliore la vitesse de chargement

[@charlesnemo4325]

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👋👋👋

[@erickoeniguer7559]

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.

[@Jacques-pr2vm]

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

[@dgogneaux]

Excellent... pour le débutant queje suis, tout est clair... Bravo et merci !!!

[@hoctrimededebutry8655]

Hello from France :-) Merci Tommy pour tous tes tutos hyper pédagogiques et complets.

[@alainsolution4167]

Merci, grâce a toi, je me lance... Très professionnel tes vidéos

[@SC-rn2jg]

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.

[@christianskate8003]

Merci Tommy je suis total novice mais je compte me lancer en suivant tes tuto et adapter a mon besoin. Continu comme cela.

[@melonp3515]

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 ! ^^

[@francoisparola5934]

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...

[@didbru2231]

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.

[@rodolphe8859]

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.

[@polartik1111]

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 !

[@maitrealamine]

Bonsoir du Cameroun Tommy Et merci!

[@silexalger1284]

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

[@quidam2497]

Comme toujours, agréable sobre et efficace ! (Je vous suivais initialement sur la 3D... et encore)

[@Poil1958]

Merci, vous venez de me donner des beaux projets pour mon printemps.... Chu rouillé un peu mais....en vous regardant ca revient.... Merci encore

[@samanand3824]

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

[@azzattar8422]

explications claires et concises. Merci beaucoup.

[@herrjonatan5436]

C'est très bien expliqué 🙏🙏🙏

[@francois-alexandrefrancois6334]

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 ....;)

[@joeguilian2829]

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) ;).

[@rhayaraki5709]

Très bonne vidéo, et toujours bien expliquer :D

[@dhivert]

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.

[@antibullingl1032]

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%#

[@Floboss001]

Super vidéo comme toujours. Merci Tommy 👌👍🙂

[@Sebasuchan-IDF]

Super vidéo très clair et super bien expliquée.

[@Tsukay.]

Super vidéo/série, c'est vraiment bien expliqué, continue comme ça !

[@chbl-zy1vv]

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.

[@romainbarrier9618]

Super Tommy!!! Merci pour ton travail ;)

[@MP-fv8iy]

C'est excellent ! Bravo !!!!

[@cedricvdg7072]

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

[@ricouxstephane1628]

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.

[@atlasstudy2375]

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

[@danielcristina6748]

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?

[@herrjonatan5436]

Parfait et très simple

[@lglinux79]

Super vidéo, très intéressant merci.

[@reanom5574]

superbe vidéo et super boulot merci pour tout les conseils ;)

[@Salem_mohammed_Amin]

Merci pour la video

[@ugogirard6657]

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.

[@fred-9929]

Le caractère d'échappement c'est \, plutôt, non ?

[@paulmabille8112]

@@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/

[@jean-noelcollin9912]

excellent ! gros merci !

[@pierrejeanjean9355]

nice.... top comme projet merci!

[@hervepeyre6561]

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

[@ninovladovic2937]

Génial !

[@ousmnououmarou4751]

Merci 🤩

[@loicktoupin912]

merci beaucoup !

[@robindesssat]

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

[@dannymenard9542]

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 ?

[@SyllaMoustapha-i5h]

Est ce qu'il est possible de lié eps 32 à une camera détaché (à part) ????

[@jeanle1er]

WOW!!!!! Merci!

[@sololalolo7380]

Merci Tommy, mais où est-ce que je pourrais télécharger la version IDE Arduino pour Android? Merci encore

[@JeanDAVID]

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.

[@alainsolution4167]

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

[@gillesgoux4337]

super video

[@BenoitClary]

Bonjour Tommy J ai beaucoup appris avec votre video, bravo. Mais j ai un problème, au lieu d'activer la Led, j'aimerais activer un relais via un GPIO et rien ne se passe. J'utilise un ESP8266MOD. Merci. Benoît

[@michelritter5470]

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.

[@chrisonadchao1142]

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

[@JamesAdamsTech]

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

[@barbapapazes]

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 !

[@manoundjim5929]

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)

[@celianbedminster4082]

bonjour qu'elle est la bibliothèque de la page web je ne l'a trouve pas ?

[@robinp.9886]

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

[@moriergael2023]

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

[@hamygeorges8044]

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

[@MPElectronique]

Bravo! :o)

[@mariogaboury1502]

j ai essayer d écrire dans ++ mais quand je save sa save pas sur l ide

[@Soporis]

Super comme toujours 😉 y a plus cas ajouter une page Web de configuration du WiFi

[@hamygeorges8044]

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.

[@alixxila3296]

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

[@antibullingl1032]

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 .... }

[@pierrot5902]

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 !

[@pierrot5902]

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 ? )

[@christophenguyen4503]

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

[@MrTbernard]

Bonjour Christophe, effectivement, et si j'avais votre post plus tôt, je n'aurais pas perdu tout ce temps. Merci

[@lagrottedyves3485]

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

[@did3d523]

le telechargement du programme est trop long comparé a un arduino eliminatoir quand on fais du developement avec modif tous les 5 minutes ...plus de 1 minute pour telecgarger sur la carte c innutilisable

[@just4callplus]

thanks

[@lelievrethomas7654]

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.

[@TD72PRO]

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.

[@cedricjung1899]

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 ;)

[@didiersee]

Magnifique merci pas de lien vers le code?

[@TD72PRO]

tommydesrochers.com/controlez-votre-esp32-a-partir-dune-page-web-version-facile-esp32-ep3/

[@didiersee]

@@TD72PRO merci super et parfait comme d'hab. Congratulations from Belgium ;o)

[@mohamedaitmouali895]

thanks brother

[@Jean-PierreHallaux]

Comment accéder à ton site ? Merci !

[@Fred-Carpe_diem]

👍

[@foxtrottone]

Platforme io .. c'est payant ? juste ?