La meilleure méthode pour héberger une interface web sur ESP32? (version avancée) [ESP32 Ép#4]
ฝัง
- เผยแพร่เมื่อ 1 มี.ค. 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
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
Pour voir le code complet sur mon site web:
tommydesrochers.com/la-meille...
Je me suis inspiré de ces deux tutoriels que j'ai en quelque sorte fusionnés ensemble et ensuite personnalisés pour créer cette vidéo:
randomnerdtutorials.com/esp32...
circuits4you.com/2018/11/20/w...
VSCodium:
vscodium.com/
Ma vidéo sur PlatformIO:
• VS Code et PlatformIO:...
Bibliothèques nécessaires pour réaliser ce projet:
github.com/me-no-dev/ESPAsync...
github.com/me-no-dev/AsyncTCP
Uploader les fichiers dans le SPIFFS avec l'IDE Arduino:
randomnerdtutorials.com/insta...
Bonjour! Dans cette vidéo je vais vous montrer ce qui est (selon moi) la meilleure méthode pour créer et héberger une interface web sur un ESP32/ESP8266. Dans cette vidéo je programme sur PlatformIO (une vidéo au sujet de cet IDE est disponible sur ma chaîne). Je vais vous montrer comment programmer une interface web simple qui fait allumer/éteindre une LED avec des boutons et qui affiche une lecture de capteur. La différence avec mon précédent tutoriel à ce sujet, c'est que dans cette vidéo chaque langage de programmation sera dans son propre fichier et sera uploadé dans la mémoire flash de l'ESP32 grâce au SPIFFS. Du javascript sera utilisé pour envoyer en arrière-plan les requêtes HTTP qui contrôleront la LED et qui mettront à jour la valeur d'un capteur. Plus besoin d'ajouter le code HTML directement dans le code C++ et plus besoin de faire rafraîchir l'entièreté de la page périodiquement pour la mettre à jour et pour envoyer des requêtes. J'espère que cette vidéo vous sera utile!
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! - วิทยาศาสตร์และเทคโนโลยี
![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)
![Récupérer les valeurs d'un formulaire web sans rafraîchir la page (jQuery) [ESP32 Ép#5]](/img/tr.png)
![[TH]FFWS SEA Spring 2024 Knockout Stage - Day 15](http://i.ytimg.com/vi/_Mz16BkXaNA/mqdefault.jpg)
![[Live] : ONE FIGHT NIGHT 22 วันนี้!! "สมิลลา vs นาตาเรีย"](http://i.ytimg.com/vi/Hmzh7heFvx8/mqdefault.jpg)
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
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?
@@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();
}
}
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?
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.
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 👍🏻
Inspirant, instructif, clair et concis! Qoi dire de plus! Bravo Tommy! Je suis impatient de voir la suite...
👍
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 !
Vos explications sont toujours aussi propres merci 🤟
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.
toute ta série de vidéo est incroyable et très bien expliqué merci !
Bonsoir Tommy
Merci pour cette nouvelle vidéo qui me donne des idées pour un projet. Encore bravo et merci.
Claude
Super tutoriel, très bien détaillé, et très pédagogique ; les débutants devraient s'en sortir très facilement. Excellent boulot !
félicitation, très bonne vidéo et impossible d’être plus clair, un grand merci :)
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 😊😊
Merci Tommy, ce que tu proposes est très agréable, clair et propre et en plus, pour changer, c'est en français !
Merci Tommy, c'est clair et ça fait plaisir. Continuez!
Merci pour cette vidéo toujours aussi passionnante. Ça rentre nickel dans mon projet de domotique.
Bonjour Tommy, impressionnant la qualité de tes tutos!! Applaudissements!
Merci Mr Desrochers, clair, précis, conçis, sans bavures, j'ai beaucoup appris !
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 !
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
Génial ! Merci pour le code en live, très pédagogique !
Bravo. Super vidéo, claire et précise. Merci
Encore une fois un super tuto.
Tout marche parfaitement après avoir corrigé mes quelques erreur de syntaxe.
Merci Tommy
Fantastique !!! Super tuto !!
Merci pour ce partage ! 👍
Vraiment un très grand merci pour votre aide ! Merci beaucoup 🤩
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é
Super tuto, encore merci Tommy 😉
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 !
Excellent.
Super travail.
Félicitations Tommy pour votre vidéo
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
Au top comme toujours merci tommy
Excellente vidéo, bravo !
Bonjour et merci les explications sont clair et précise, on peut faire du pas à pas.. Bravo
Merci Tommy, ça marche du premier coup !
Wow c'est bien nice le w3-spin ! Merci pour ce tuto !
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.
Very Nice ! Comme toujours Tommy ! 😁
Merci les informations et la démonstration.
Un grand merci pour cette vidéo ! J'ai appris énormément de choses très utiles !
Baaah , je découvert lesp 32 aujourd’hui, ça c’est cool et simple a mettre en œuvre !! Merci ce tuto c’est top !
Super vidéo ! Merci !
Vraiment super que de travail merci 🙃
Très bonne vidéo et pédagogique ; je crois que je vais tout copier pour mon application. Merci.
Bravo.... J'ai été scotché. Je vais essayer d'adapter à mes besoins !
Merci infiniment, vraiment précieux !
Excellent! Bravo super utile et très malin.
LE PLUS GRAND DES MERCI POUR CETTE VIDEO!!! Trés bien expliqué, drole, utile PARFAITE!!
Les 40 minutes sont passées si vites! MERCI!
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 :-)
Superbe vidéo, merci beaucoup.
Merci pour tes super tuto !!!
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 :) .
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
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 !
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
Bonjour, super vidéo comme toujours mais celle-ci est encore
plus cool que les autres. Encore merci et bravo...
Merci, c'était très clair ;)
Merci pour tout tes vidéo
C'est excellent. Bravo et merci.
Je veux faire un projet avec ESP32 et je suis tombé sur ta chaîne. Tes vidéos sont hyper intérressantes et enrichissantes !
Le 🔥🔥 ! Merci le 🩸
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 !
C'est une excellente vidéo. Bravo et merci......
bien !! me reste plus qu'a trouver du temps pour regarder la vidéo suivante !!, bonne continuation
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 ! 👍
Trés bonne explication pour les novices. bravo.
Merci , vidéo parfaite
Génial 🤩
Merci Tommy, pour l'astuce VSCodium =)
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 !).
merci pour cette vidéo Tommy !! tu es d'une aide inestimable !
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
M. Desrochers (Je vouvoie les gens dignes de respect) Vous m'avez appris baucoup et fait avancer ma technicité. Merci mille fois. (Don effectué)
C'est beau le génie!
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.
Juste, Bravo
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
Un petit partage ? ^^
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.
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!
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 !
Magic Tommy !
Merci Tommy
Salut, super vidéo 👍 comme d'habitude ! +1 pour w3-spin 😁
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
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
Excellent !
Bravo et merci
Super meci ! Juste ca fait un bon gros bout de css pour deux boutons et un span ^^
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...
À 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
@@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
Vivement la prochaine vidéo...
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.
Je ressort mon ESP32 de la boite ou il dormait. J'ai un projet de simulateur de présence interfacé web. Super tutos. merci!
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.
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.
C'est vraiment bien
Salut, WoW! Beau boulot! T’as pas une animation Harlem Shake au lieu de spin? 😂
tu es impeccable
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 TH-cam.
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.
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 ?
Merci beaucoup
excellente explication👍 mais le dossier data n'est pas uploadé dans mon esp ??? je comprend pas
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 !
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.
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.