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.

[@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 :) .

[@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!

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

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

[@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 !

[@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 !

[@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 !

[@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é

[@bertrandnadeau3254]

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

[@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 ! 👍

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

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

[@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 !

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

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

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

[@weetoz6436]

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

[@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 !

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

[@vascocap3607]

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

[@scool971]

Vos explications sont toujours aussi propres merci 🤟

[@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 !

[@clementrx4744]

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

[@polartik1111]

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

[@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 😊😊

[@olivierfournet4250]

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

[@cedric9901]

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

[@Ricardo-Royco]

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

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

[@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 !

[@sebgoffin]

Au top comme toujours merci tommy

[@nicola7874]

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

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

[@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é)

[@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 :-)

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

[@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!

[@hervelechat7432]

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

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

[@nicolassibille1738]

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

[@syncro66500]

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

[@jean-pierreeberhart1581]

Félicitations Tommy pour votre vidéo

[@hervepeyre6561]

Merci Tommy, ça marche du premier coup !

[@ousmnououmarou4751]

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

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

[@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!

[@JoeSmith-wu3yz]

Super tuto, encore merci Tommy 😉

[@jrioublanc]

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

[@Fire_Blaim]

Very Nice ! Comme toujours Tommy ! 😁

[@cani77]

Merci les informations et la démonstration.

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

[@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 !

[@theyodaben]

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

[@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 !

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

[@jdva12]

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

[@ericcottencin3281]

Excellent. Super travail.

[@jeanclaudelefloch650]

Trés bonne explication pour les novices. bravo.

[@sth481818]

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

[@EmmanuelLieurain]

Excellente vidéo, bravo !

[@Tsukay.]

Super vidéo très intéressante et bien expliqué comme d'habitude ! J'avais 2 questions : - es-ce possible d'upload aussi des images avec Spiff ? - pourrais tu faire un petit point sur les pointeurs dans une prochaine vidéo ^^ Merci beaucoup pour ces super tutos !

[@TD72PRO]

Tout à fait possible oui! Par contre les images devront être très légères pour entrer dans la mémoire flash. Sinon il y a toujours la possibilité de brancher un lecteur de carte SD sur l'ESP et là on ne manquera plus de place! C'est quelque chose que j'aimerais essayer.

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

[@feralz_vox]

Merci Tommy, pour l'astuce VSCodium =)

[@Lunolux]

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

[@bastiencatil2509]

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

[@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 😁

[@VincentVanZgegh]

Le 🔥🔥 ! Merci le 🩸

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

[@deaaz3983]

C'est beau le génie!

[@ericsousou7831]

Tes 3 premières vidéo sur l'ESP32 sont super ! Je commence celle-ci, je pense ne pas être déçu^^ Merci à toi pour tout ce travail !

[@MP-fv8iy]

C'est excellent. Bravo et merci.

[@lucriche6357]

Merci pour tes super tuto !!!

[@michelritter5470]

Merci Tommy pour ces vidéos sur l'ESP32, pour moi qui débute c'est vraiment agréable de suivre tes tutos, ils sont très bien fait. J'aurais toutefois une question. Il semble que WifiManager (très utile pour paramétrer facilement son SSID/PW) ne soit pas compatible avec ESPAsyncWebServer... .Aurais tu une solution à nous proposer. D'avance merci.

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

[@Youssef_BigYt]

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

[@DomoticDIY]

Superbe vidéo, merci beaucoup.

[@nabilkarame6999]

Juste, Bravo

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

[@AbcDef-hl2ic]

Super vidéo ! Merci !

[@Electro-Info-Tech]

Vraiment super que de travail merci 🙃

[@djabdjibril5869]

Génial 🤩

[@POYOBRO]

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

[@lone_wolf243]

J'ai le même erreur

[@raphglc7521]

Superbe boulot, très didactique : une petite idée sur comment éviter les warning CORS dans les navigateurs actuels qui bloquent le debug en console de FF par exemple ?

[@fredericguerne2402]

Merci infiniment, vraiment précieux !

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

[@imanelendani361]

Merci , vidéo parfaite

[@vincentlap09]

Merci pour tout tes vidéo

[@OneillF]

vscodium c'est intéressante mais comment as-tu réussi à faire tourner platformio dessus ? je sais qu'il faut installer via unfichier vsix mais après vscodium ne veut pas ouvrir l'extension de platformio? sinon super tes videos , mon projet est de créer une pointeuse de temps avec un esp32 .ce va être chaud pour moi lol

[@hardelot10]

Super les vidéos, regardée mais pas encore essayée. Que conseille tu pour faire fonctionner une led (sortie) d une heure à une autre ? Je l ai fais avec l application Blynk mais je voudrais mettre de la couleur ? 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 //

[@SpinaRCSpeed]

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

[@joeguilian2829]

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

[@valentingon]

Merci pour ces 2 tuto Maintenant est ce qu il serait possible d avoir le site web stocker sur une carte sd pour ne plus être limité au 4 mo de l esp32 ?

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