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

4 роки тому

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!

КОМЕНТАРІ: 106

@TD72PRO 4 роки тому

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

@samgranier6735 4 роки тому

Salut Tommy Voilà un lien où tu a une courte i fo sur une nouvelle façon d imprimer ukposts.info/have/v-deo/qoOohHiFrGh9ymw.html

@akhalfi 4 роки тому

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

@akhalfi 4 роки тому

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

@hoctrimededebutry8655 4 роки тому

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

@polartik1111 4 роки тому

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 !

@erickoeniguer7559 4 роки тому

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.

@rp7tech 7 місяців тому

Parfait, tu expliques vraiment bien ! J'ai mentionné tes tutos ESP32 sur mon forum, tellement ils sont bien fait et complets !

@Tsukay. 4 роки тому

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

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

@alainsolution4167 4 роки тому

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

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

@maitrealamine Рік тому

Bonsoir du Cameroun Tommy Et merci!

@melonp3515 4 роки тому

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

@christianskate8003 4 роки тому

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

@Floboss001 4 роки тому

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

@francoisparola5934 2 роки тому

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

@romainbarrier9618 4 роки тому

Super Tommy!!! Merci pour ton travail ;)

@francois-alexandrefrancois6334 3 роки тому

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

@dgogneaux Рік тому

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

@quidam2497 3 місяці тому

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

@lglinux79 4 роки тому

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

@Sebasuchan-IDF 4 роки тому

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

@reanom5574 4 роки тому

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

@azzattar8422 Рік тому

explications claires et concises. Merci beaucoup.

@rhayaraki5709 Рік тому

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

@SC-rn2jg 3 роки тому

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.

@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

@herrjonatan5436 2 роки тому

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

@Poil1958 4 роки тому

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

@MP-fv8iy 4 роки тому

C'est excellent ! Bravo !!!!

@didbru2231 3 роки тому

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.

@gillesgoux4337 8 місяців тому

super video

@jean-noelcollin9912 4 роки тому

excellent ! gros merci !

@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

@herrjonatan5436 2 роки тому

Parfait et très simple

@pierrejeanjean9355 4 роки тому

nice.... top comme projet merci!

@loicktoupin912 2 роки тому

merci beaucoup !

@cedricvdg7072 4 роки тому

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

@silexalger1284 3 роки тому

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

@jeanle1er 4 роки тому

WOW!!!!! Merci!

@ousmnououmarou4751 3 місяці тому

Merci 🤩

@ricouxstephane1628 4 роки тому

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 3 роки тому

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

@ninovladovic2937 4 роки тому

Génial !

@Soporis 4 роки тому

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

@JamesAdamsTech 4 роки тому

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

@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

@chbl-zy1vv 4 роки тому

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.

@joeguilian2829 4 роки тому

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

@dhivert 4 роки тому

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 4 роки тому

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

@MPElectronique 3 роки тому

Bravo! :o)

@mohamedaitmouali895 4 роки тому

thanks brother

@danielcristina6748 17 днів тому

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?

@alainsolution4167 4 роки тому

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

@lagrottedyves3485 4 роки тому

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

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

@michelritter5470 9 місяців тому

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.

@ugogirard6657 4 роки тому

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 4 роки тому

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

@paulmabille8112 3 роки тому

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

@just4callplus 3 роки тому

thanks

@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

@itromacoder3088 5 місяців тому

Lets goo, un quebecois qui fait de l'électronique sur youtube!!

@christophenguyen4503 4 роки тому

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 3 роки тому

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

@hamygeorges8044 4 роки тому

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.

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

@robinp.9886 4 роки тому

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 4 роки тому

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 4 роки тому

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

@esteban2036 4 роки тому

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 3 роки тому

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)

@pierrot5902 2 роки тому

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 2 роки тому

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

@antibullingl1032 2 роки тому

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

@nmagic88 Рік тому

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

@nmagic88 Рік тому

Je suis trop impatient ;-) Merci pour cette vidéo

@chrisonadchao1142 2 роки тому

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

@user-qp1xl3dd5l 11 місяців тому

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

@lelievrethomas7654 4 роки тому

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 4 роки тому

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.

@celianbedminster4082 2 роки тому

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

@mariogaboury1502 Рік тому

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

@Fred-Carpe_diem 2 місяці тому

👍

@cedricjung1899 4 роки тому

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 4 роки тому

Magnifique merci pas de lien vers le code?

@TD72PRO 4 роки тому

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

@didiersee 4 роки тому

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

@user-xe4dy4vi4h Рік тому

Comment accéder à ton site ? Merci !

@alixxila3296 2 роки тому

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