La meilleure méthode pour héberger une interface web sur ESP32? (version avancée) [ESP32 Ép#4]

[@TD72PRO]

J'espère que cette vidéo vous aidera à propulser vos projets au prochain niveau! Vous avez des conseils/trucs/astuces? N'hésitez pas à les partager en commentaire! Allez voir mon site web pour toutes les infos complémentaires à cette vidéo et pour voir le code en entier: tommydesrochers.com/la-meilleure-methode-pour-heberger-une-interface-web-sur-esp32-version-avancee-esp32-ep4/ TIMESTAMPS: - Intro 00:20 - Préparation du projet 03:30 - CSS 08:21 - HTML 09:06 - JAVASCRIPT 17:42 - C++ 23:34 - Upload avec le SPIFFS 34:06 - Test/démonstration 36:54 - ??? 38:48 - Conclusion 39:41

[@mnd4022]

Bonjour Tommy, j'ai essayé de refaire la vidéo et tout se passe bien jusqu'au moment ou je déclare la communication série çà bloque en affichant tentative de connexion avec des points sans afficher l'adresse IP pouvez vous me dire c'est quoi mon problème svp?

[@eddymaue]

@@mnd4022 remplace la boucle while (WiFi.status() != WL_CONNECTED) { ... } pac ce bout de code int i = 0; while (WiFi.status() != WL_CONNECTED) { i++; Serial.print("."); delay(100); if (i > 10) { ESP.restart(); } }

[@flofly13]

Salut Tommy. Merci encore pour cette vidéo que je vais essayé demain à mettre en place pour un projet. Aurais tu une solution pour changer le ssid et le mot de passe via un interface de gestion en WiFi ad-hoc?

[@nizarismael6954]

Tout d’accord merci beaucoup. J’ai suis les étapes mais à la fin je vois pas le nom du wifi pour me connecter. Je sais pas si c’est ma carte. Ma carte a une seule led. Esp-room-32. Si vous pouvez m’aider.

[@osamozilla7898]

LE PLUS GRAND DES MERCI POUR CETTE VIDEO!!! Trés bien expliqué, drole, utile PARFAITE!! Les 40 minutes sont passées si vites! MERCI!

[@romainbarrier9618]

Merci Tommy, ta chaîne est une très bonne source d’information qui ouvre le chemin de la réalisation de nos idées 👍🏻

[@thebateur8632]

bonjour, j'ai 17 ans et je me lance dans un petit projet personel. Je connais vraiment pas beaucoup de language de programation et donc je sais encore moins les comprendre et les utlisés. Je voulais te remercier car tu expliques très bien toutes les lignes de code une par une et ca m'a permis déjà d'apprendre et en plus de comprendre tous ce que tu fais. Cela m'a vraiment beaucoup aider pour mon projet :) .

[@jean-pierrep9340]

Bonjour Tommy, j'ai réalisé avec succès le contenu du votre tuto, merci pour tous ces enseignements qui propulsent effectivement vers un niveau supérieur ... et ouvrent la voie vers pas mal de nouvelles applications concrètes . A très bientôt pour de nouveaux sujets. Cdlt

[@brunobilame2528]

franchement super ton tuto. Enormement d'informations très claires. Mon projet est de réaliser un système de chauffage via réseau Mesh avec des esp32, capteurs de température dans chaque pièce de la maison, un peu d'électronique pour activer/désactiver les radiateurs. Ainsi qu'une page web pour centraliser les infos et gérer les radiateurs en fonction de l'heure et de la température relevée. avec ton tuto j'ai 70% des infos :) merci !

[@bertrandnadeau3254]

Inspirant, instructif, clair et concis! Qoi dire de plus! Bravo Tommy! Je suis impatient de voir la suite... 👍

[@Ricardo-Royco]

Fantastique !!! Super tuto !! Merci pour ce partage ! 👍

[@Thomas-ff8ed]

Je veux faire un projet avec ESP32 et je suis tombé sur ta chaîne. Tes vidéos sont hyper intérressantes et enrichissantes !

[@scool971]

Vos explications sont toujours aussi propres merci 🤟

[@jean-pierrep9340]

Bonjour Tommy, et pour tous ceux que cela intéresse, j'ai finalement trouvé une solution pour utiliser les 2 librairies WiFiManager ET ESPAsyncWebServer. Il suffit de rajouter un "#define WEBSERVER_H" avant "#include ESPAsyncWebServer.h" comme ci-dessous : - #include "WiFiManager.h" - #define WEBSERVER_H //

[@vascocap3607]

Merci Mr Desrochers, clair, précis, conçis, sans bavures, j'ai beaucoup appris !

[@renobodyrenobody]

Merci Tommy, ce que tu proposes est très agréable, clair et propre et en plus, pour changer, c'est en français !

[@claudeemery7518]

Bonsoir Tommy Merci pour cette nouvelle vidéo qui me donne des idées pour un projet. Encore bravo et merci. Claude

[@TheDudule01]

Je rejoins l'ensemble des avis, ta vidéo est très claire, bien construite et très utile. Merci beaucoup pour ce travail de grande qualité

[@weetoz6436]

Bonjour Tommy, impressionnant la qualité de tes tutos!! Applaudissements!

[@maquettesetlumiere1489]

Hello Tommy, Merci pour tes vidéos très bien construites et très enrichissantes. Je débute avec l'ESP32 et elles sont nickels pour cela. Bravo pour la pédagogie, la clarté et l'humour. Patrick Dutruc

[@ChristopheDeZanet]

Merci beaucoup Tommy. Vraiment très instructif et inspirant. Je pense que les commentaires en disent long sur la qualité de cette vidéo...mais aussi de l'ensemble de ton travail. Merci du temps que tu consacres à la réalisation et au partage de tes vidéos. Longue vie à ta chaîne.

[@nicola7874]

Merci Tommy, c'est clair et ça fait plaisir. Continuez!

[@jean-pierrep9340]

Merci pour cette video (et les autres sur ESP32 aussi)... je découvre tout ça avec plaisir, et bravo pour le coté effort pédagogique.

[@ctom_gaming]

Baaah , je découvert lesp 32 aujourd’hui, ça c’est cool et simple a mettre en œuvre !! Merci ce tuto c’est top !

[@cochiseka]

Excellente vidéo, bravo, j'ai fait une petite modification très simple pour utiliser l'ESP32 en HotSpot et ca fonctionne très bien

[@MaralSabbagh]

Un petit partage ? ^^

[@hervelechat7432]

Bravo.... J'ai été scotché. Je vais essayer d'adapter à mes besoins !

[@harvey_ripley]

Salut môssieur Tommy ! Merci pour tes vidéos elles sont tops elles m'ont vraiment bien initié sur ESP32 !!! J'ai réalisé une serrure électronique (pêne au sol motorisé) avec servomoteurs, lecteur de badge RFID à l'extérieur, touch à l'intérieur, et serveur web pour l'actionner aussi (version facile pour l'instant mais ça me démange d'uploader les fichiers HTML/CSS/JS). Elle est stable, je vais la poser prochainement. Merci !

[@ousmnououmarou4751]

Vraiment un très grand merci pour votre aide ! Merci beaucoup 🤩

[@polartik1111]

Encore une fois un super tuto. Tout marche parfaitement après avoir corrigé mes quelques erreur de syntaxe. Merci Tommy

[@JoeSmith-wu3yz]

Super tuto, encore merci Tommy 😉

[@cedric9901]

Merci pour cette vidéo toujours aussi passionnante. Ça rentre nickel dans mon projet de domotique.

[@clementrx4744]

toute ta série de vidéo est incroyable et très bien expliqué merci !

[@olivierfournet4250]

félicitation, très bonne vidéo et impossible d’être plus clair, un grand merci :)

[@nicolassibille1738]

Un grand merci pour cette vidéo ! J'ai appris énormément de choses très utiles !

[@jean-pierreeberhart1581]

Félicitations Tommy pour votre vidéo

[@syncro66500]

Génial ! Merci pour le code en live, très pédagogique !

[@yannberthier8335]

franchement merci pour ces excellentes videos et pour tout le travail que tu y investis, je t'encourage à continuer sur les esp c'est vraiment super utile, beaucoup d'informations condensées, claires et précises. Au plaisir 😊😊

[@imSylou]

Bonsoir, C'est vraiment agréable d'avoir quelqu'un qui nous accompagne en écrivant le code en direct et qui explique chaque ligne ! On comprend bien à quoi sert chaque ligne et comment le tout s'articule ! ne change pas ce format tu es un des rares à proposer ce genre de contenu, c'est super ! Je me demandais d'ailleurs suite à ce tuto, comment afficher les valeurs analogiques sous forme de graphique dans l'interface web ? Peut-être une idée de tuto ? Bonne soirée en tout cas !

[@jean-paulzimmermann6366]

M. Desrochers (Je vouvoie les gens dignes de respect) Vous m'avez appris baucoup et fait avancer ma technicité. Merci mille fois. (Don effectué)

[@sebgoffin]

Au top comme toujours merci tommy

[@jrioublanc]

Très bonne vidéo et pédagogique ; je crois que je vais tout copier pour mon application. Merci.

[@tutodetiti]

Merci pour cette vidéo. J'ai vraiment eu peur de voir l'interface IDE abandonnée. Il n'en est rien. Merci. Vous avez un véritable talent. PlatformIO est d'une complexité rebutante pour un amateur comme moi. Sans votre aide, je ne vois pas comment j'aurais pu avancé sur l'ESP. Thierry de l'autre coté de l'Atlantique.

[@hervepeyre6561]

Merci Tommy, ça marche du premier coup !

[@cani77]

Merci les informations et la démonstration.

[@alainsolution4167]

Salut Tommy, merci, très beau projet... Vraiment top comme d'habitude. P.S j'ai remarqué que tu n'a pas trouvé de plante rouge lolll, un peu d'humour au passage... Longue vie à ta chaine...

[@TD72PRO]

À vrai dire je possède un petit cactus rouge 😁 Ou du moins c'est une plante avec des piques qui ressemble à une sorte de cactus lol

[@alainsolution4167]

@@TD72PRO mdrrr sa m'avais bien fait rire ton histoire de découpe rouge à la déco... Faudra bien nous le présenter ton cactus lolll

[@ricouxstephane1628]

Pédagogique, accessible et plaisant. Je connaissait déjà SPIFFS. Et je connaissait déjà le codage en asynchrone. Par contre j'ai appris pour VSCodium ! Bravo en tous cas pour la simplicité des explications et le partage ! Ainsi que les 'corrections' en temps réel dans le code. On voit que ça te demande aussi pas mal de pas de travail en post-prod. Un salut d'un cousin Toulousain qui apprécie ta chaine et tes vidéos ... sans oublier le bonjour aussi au lave vaisselle ... (perso on l'entend presque pas !).

[@cedricvdg7072]

C est génial c est exactement ce que j avais demander dans la vidéo précédente.. Je part sur la même chose sauf que le style CSS ne sera pas dans le code html mais dans un fichier CSS.. Un grand merci j ai plein plein d idée que je vais pouvoir mettre en application merci pour se super contenu.. J'ai aussi entendu parler de atom pour la partie ide

[@ngoumezongzoguimramezemarc3181]

salut ! Je suis particulierement satisfait des videos que vous faites et j'ai trouvé celle ci meilleur. Merci Je m'intéresse dépuis peu à l'internet des objets et en suivant cette vidéos je pense pouvoir très rapidement avancer

[@fred-9929]

Super tutoriel, très bien détaillé, et très pédagogique ; les débutants devraient s'en sortir très facilement. Excellent boulot !

[@theyodaben]

Bonjour et merci les explications sont clair et précise, on peut faire du pas à pas.. Bravo

[@FlyBy2507]

Alors là, j'en reviens pas. J'ai rencontré un souci au boulot et ce soir, tu me sers la solution sur un plateau (XMLHttpRequest) pour lancer une requête synchrone. Merci Tommy !

[@jeanclaudelefloch650]

Trés bonne explication pour les novices. bravo.

[@Fire_Blaim]

Very Nice ! Comme toujours Tommy ! 😁

[@jdva12]

Bravo. Super vidéo, claire et précise. Merci

[@francois-alexandrefrancois6334]

merci pour cette vidéo Tommy !! tu es d'une aide inestimable !

[@francois-alexandrefrancois6334]

j'ai cette erreur sur la console de ma page web : en plus de la requête qui a l'air de fonctionner correctement: script.js:26 GET file:///C:/Users/faf39/OneDrive/Documents/PlatformIO/Projects/InterfaceWebSPIFFS/data/lireLuminosite net::ERR_FAILED getData @ script.js:26

[@scarabe-ing]

C'est un plaisir de regarder tes vidéos, merci ! La seule difficulté c'est quand on veut sortir de tes pas pour rajouter d'autres fonctionnalités : il faut apprendre le Html, le CSS, le Javascript, ça fait beaucoup d'heures de recherche et ça peut décourager. Existe-t-il des moyens de parvenir au même résultat avec une interface de programmation "nocode"? Je te souhaite le meilleur pour cette nouvelle année ! 👍

[@ericcottencin3281]

Excellent. Super travail.

[@Tibrus74]

Impeccable il me manquait une commande pour recharger la page / et nickel tu l'as donne dans cet exemple Merci beaucoup pour cette vidéo et ces explications

[@Tibrus74]

Par contre question que je me pose, comment ferais-tu dans cet exemple pour n'avoir qu'un bouton et donc en fonction de l'état de la led mettre le bouton inverse. Si led ON alors bouton est OFF et vice versa ? En gros comment tu ajoutes dans ton index.html des tests de variables pour afficher ou non des infos

[@ElectroLIB]

Merci beaucoup! Vous m'avez fait découvrir VScode mais là, j’avoue que pour ma part, je préfère de loin écarter les bouts de code Microsoft! Merci pour le partage de VSCodium!

[@fabricemotard4312]

Super vidéo !! Vraiment bravo pour l'effort fourni et ton travail 👍👏 génial maintenant il n'y a plus qu'a trouver des projets à réaliser 😁😉 encore merci !

[@qwer.ty.]

Wow c'est bien nice le w3-spin ! Merci pour ce tuto !

[@EmmanuelLieurain]

Excellente vidéo, bravo !

[@feralz_vox]

Merci Tommy, pour l'astuce VSCodium =)

[@PierreDelore]

Super vidéo. Très didactique. Il faudrait la compléter avec l'ajout ,dans la page, du réglage d'un paramètre numérique (saisie de valeur). Par exemple, le réglage d'un seuil de déclenchement lié à la luminosité. Cela serait très utile pour régler des paramètres de l'ESP depuis l'interface WEB.

[@alexlebrun6781]

Je ressort mon ESP32 de la boite ou il dormait. J'ai un projet de simulateur de présence interfacé web. Super tutos. merci!

[@MP-fv8iy]

C'est excellent. Bravo et merci.

[@POYOBRO]

jai un probleme ça arrete pas de me dire Mounting SPIFFS failed! Error: -1

[@lone_wolf243]

J'ai le même erreur

[@sth481818]

Bonjour, super vidéo comme toujours mais celle-ci est encore plus cool que les autres. Encore merci et bravo...

[@lucriche6357]

Merci pour tes super tuto !!!

[@Lunolux]

bien !! me reste plus qu'a trouver du temps pour regarder la vidéo suivante !!, bonne continuation

[@dhivert]

Voilà, je kiff. Enfin du codding badasse. PS : il semble qu'il fasse meilleure chez moi que chez toi, même si je trouve que le paysage blanc c'est bien sympa. PS2 : Je ne comprendrais jamais pourquoi les vidéos contenant plein de conneries recueillent plus de vue que celles qui ont un vrai intérêt.

[@VincentVanZgegh]

Le 🔥🔥 ! Merci le 🩸

[@djabdjibril5869]

Génial 🤩

[@gregorymichel2945]

Super vidéo ! Pour compléter la série ce serait interessant de parler de l' "OTA" afin de pouvoir uploader le code sans avoir brancher le bidule à chaque fois à son ordi :-)

[@davidmaillot2253]

Excellente video. Une idée future d'amélioration pour actualiser en temps réel avec moins de consommation ressource serait d'utiliser le protocole Websocket. Le rafraichissement sera donc effectué au moment opportun et non toutes les 2 secondes.

[@RupekSMAC]

Whaoouu ! Alors là, pour un débutant, c'est un peu rude.... mais tu mets tellement d'ardeur dans tes explications que je vais au moins faire l'effort de copier tout ça et essayer de comprendre l'ensemble. Merci pour tes efforts de pédagogie et continue comme ça.

[@Electro-Info-Tech]

Vraiment super que de travail merci 🙃

[@DomoticDIY]

Superbe vidéo, merci beaucoup.

[@AbcDef-hl2ic]

Super vidéo ! Merci !

[@nabilkarame6999]

Juste, Bravo

[@deaaz3983]

C'est beau le génie!

[@fredericguerne2402]

Merci infiniment, vraiment précieux !

[@imanelendani361]

Merci , vidéo parfaite

[@lglinux79]

Un grand merci pour cette vidéo et ce tutoriel très bien fait.Merci aussi pour le partage de vscodium . Vivement la suite ;)Dans le code html sur ton site il y a la même erreur ici : W3-padding-24 et non 23-padding-24 ;)

[@TD72PRO]

Sur les claviers QWERTY, le W est juste en dessous du 2. J'essaie de taper trop rapidement 😁

[@lglinux79]

@@TD72PRO :) faut pas aller si vite 😁

[@vincentlap09]

Merci pour tout tes vidéo

[@bastiencatil2509]

Super meci ! Juste ca fait un bon gros bout de css pour deux boutons et un span ^^

[@djangel2164]

Salut, super vidéo 👍 comme d'habitude ! +1 pour w3-spin 😁

[@gilbertduranton5279]

Merci Tommy pour cette vidéo. Elle m'a permis de réaliser une interface Web pour un routeur solaire (un autre tuto du très bon Prof' solaire) Cette application permet de router le surplus d'électricité solaire sur un chauffe eau. 2 modes de marche sont possible: - Auto : le chauffe eau reçoit uniquement le surplus via un triac - Manu : je peux piloter la puissance envoyée par le triac avec un slider Tout marche bien. Je selectionne Auto ou Manu via 2 boutons. Mais je voudrais afficher le mode qui est sélectionné. Merci de ton aide Gilbert

[@ugogirard6657]

Bravo, encore une vidéo aussi intéressante qu'instructive, j'aurais cependant qqes questions/commentaires: 1/ Est-il possible grâce a la même boucle que tu fais pour le listage des fichiers, de créé les lignes pour le routage de ces mêmes fichiers? 2/ Pour les routes "on" et "off", un retour 204 serai plus approprié (dans la norme HTTP le 204 correspond à une requête qui c'est bien passé mais qui ne renvoi rien, voir fr.wikipedia.org/wiki/Liste_des_codes_HTTP pour plus de détails) 3/ Une bonne pratique web consiste à ne plus utilisé l'attribut "style" directement dans le html, mais d'utilisé des "class" qui serons défini dans un fichier css 4/ Continu de nous faire des vidéos, elles sont toutes plus géniales les unes que les autres

[@Youssef_BigYt]

Est ce que c’est possible de donner une adresse url à ton esp32 à la place de l’adresse ip?

[@bizarrocebola]

Bonjour Impossible d'installer PlatformIO sur VScodium, je l'ai installé en fichier vsix, parce qu'il n'est pas dans la liste des extensions. Avez vous une solution? Merci.

[@pierregramont7755]

Bonjour Tommy, J'ai repris ta video excellente un an après l'avoir vue une premiere fois,. J'ai trouvé une information sur l'ESP32 qui pourrait t'intéresser ainsi que tous ceux qui te suivent. Cela concerne les temps de latence de l'ESP32 observés parfois lorsque on envoie une commande par le réseau. Ce temps de latence est du à la fonction powersave qui semble être active par défaut sur l'ESP32. Lorsque on désactive le power save, on observe une latence très faible comme c'est le cas sur l'ESP8266. Pour désactiver le powersave : #include esp_wifi_set_ps (WIFI_PS_NONE); Merci encore pour tes vidéos !

[@joeguilian2829]

Merci, c'était très clair ;)

[@totopops98]

Hi, merci très pédagogique comme exemple de tuto. A la fin je ne comprends pas comment les variations du capteur de luminosité sont remontées en temps réel sur l affichage du site web ? je croyais que pour avoir une com bidirectionnelle, il fallait un serveur websocket ...

[@l.t.tolome6734]

salut , super sympa cette vidéo, tu va me faire dépenser des sous pour acheter un ESP32..... :D j'attends la prochaine avec impatience.

[@pierregramont7755]

Bonjour Tommy, Tout d'abord, merci pour tes vidéos vraiment excellentes qui m'apprennent beaucoup de choses ! Je viens de suivre et réaliser point par point ton tuto avec un kit "esp32-pico-kit-v4" très similaire à celui que tu as utilisé. Tout fonctionne parfaitement, mais j'ai quand même rencontré 2 "difficultés". 1 - Les dernières versions de VSCodium ne permettent plus d'installer l'extension PlatformIO (une volonté de Microsoft semble-t-il). 2 - J'ai testé "UnCSS Online!" avec ce projet (à partir des fichiers index.html et w3.css) et le résultat n'est pas probant ! (ou alors je m'y suis mal pris ?). Mais encore un grand merci pour la qualité de ta chaine KZbin.

[@ninovladovic2937]

Magic Tommy !

[@yoyo59175]

Est-il possible d'utiliser la technologie websocket au lieu du setinterval toutes les 2 secondes pour récupérer la valeur de luminosité. En bref faire du push au lieu de faire du pull ?

[@TD72PRO]

Probablement que c'est possible et c'est quelque chose que je veux étudier, je crois que ça pourrait être très intéressant.

[@SpinaRCSpeed]

Comment faire pour avoir le serveur web sans se connecter au routeur mais directement sur l'esp ? En station

[@khalidamazari428]

merci beaucoup pour l'explication , j'ai eu un souci quand j'ai crée le projet ,il ne s'enregistre pas avec l'extension de l'arduino ,ce qui fait je n'arrive pas à faire la suite (à partir de la minute 36.54)

[@chtipigeon7991]

Bonjour Tommy, J'ai chargé VScodium 1.47 sur Manjaro KDE et je ne comprends pas car je ne retrouve pas les mêmes extensions qu'avec le VScode standard. Pas de package langue française, pas de platformio ! Y'a t'il une astuce pour retrouver ces extensions ? J'ai cherché avant de poser la question mais je n'ai rien trouvé de pertinent. Merci à toi de me répondre si tu as une piste ;) Bonne journée

[@JulieDjimalngar]

tu es impeccable

[@duboisnicolas3643]

Excellent !