La meilleure méthode pour héberger une interface web sur ESP32? (version avancée) [ESP32 Ép#4]
HTML-код
- Опубликовано: 10 сен 2024
- 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
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:
tommydesrocher...
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:
randomnerdtuto...
circuits4you.c...
VSCodium:
vscodium.com/
Ma vidéo sur PlatformIO:
• VS Code et PlatformIO:...
Bibliothèques nécessaires pour réaliser ce projet:
github.com/me-...
github.com/me-...
Uploader les fichiers dans le SPIFFS avec l'IDE Arduino:
randomnerdtuto...
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.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!
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 👍🏻
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 //
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 :) .
Vraiment un très grand merci pour votre aide ! Merci beaucoup 🤩
Je veux faire un projet avec ESP32 et je suis tombé sur ta chaîne. Tes vidéos sont hyper intérressantes et enrichissantes !
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 !
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
LE PLUS GRAND DES MERCI POUR CETTE VIDEO!!! Trés bien expliqué, drole, utile PARFAITE!!
Les 40 minutes sont passées si vites! MERCI!
Bravo.... J'ai été scotché. Je vais essayer d'adapter à mes besoins !
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 ? ^^
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
M. Desrochers (Je vouvoie les gens dignes de respect) Vous m'avez appris baucoup et fait avancer ma technicité. Merci mille fois. (Don effectué)
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é
Merci Mr Desrochers, clair, précis, conçis, sans bavures, j'ai beaucoup appris !
Inspirant, instructif, clair et concis! Qoi dire de plus! Bravo Tommy! Je suis impatient de voir la suite...
👍
Bonsoir Tommy
Merci pour cette nouvelle vidéo qui me donne des idées pour un projet. Encore bravo et merci.
Claude
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 !
Merci Tommy, ce que tu proposes est très agréable, clair et propre et en plus, pour changer, c'est en français !
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
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.
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
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.
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.
Merci les informations et la démonstration.
Baaah , je découvert lesp 32 aujourd’hui, ça c’est cool et simple a mettre en œuvre !! Merci ce tuto c’est top !
Je ressort mon ESP32 de la boite ou il dormait. J'ai un projet de simulateur de présence interfacé web. Super tutos. merci!
Vos explications sont toujours aussi propres merci 🤟
Merci pour cette vidéo toujours aussi passionnante. Ça rentre nickel dans mon projet de domotique.
félicitation, très bonne vidéo et impossible d’être plus clair, un grand merci :)
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 !
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......
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 😊😊
Encore une fois un super tuto.
Tout marche parfaitement après avoir corrigé mes quelques erreur de syntaxe.
Merci Tommy
Un grand merci pour cette vidéo ! J'ai appris énormément de choses très utiles !
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 !
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 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
Merci Tommy, ça marche du premier coup !
Fantastique !!! Super tuto !!
Merci pour ce partage ! 👍
Merci Tommy, c'est clair et ça fait plaisir. Continuez!
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 !).
Super tutoriel, très bien détaillé, et très pédagogique ; les débutants devraient s'en sortir très facilement. Excellent boulot !
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 !
Trés bonne explication pour les novices. bravo.
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
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.
toute ta série de vidéo est incroyable et très bien expliqué merci !
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 ! 👍
Au top comme toujours merci tommy
Excellent! Bravo super utile et très malin.
Bonjour Tommy, impressionnant la qualité de tes tutos!! Applaudissements!
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.
Bonjour et merci les explications sont clair et précise, on peut faire du pas à pas.. Bravo
Très bonne vidéo et pédagogique ; je crois que je vais tout copier pour mon application. Merci.
Génial ! Merci pour le code en live, très pédagogique !
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.
Juste, Bravo
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
Super tuto, encore merci Tommy 😉
Félicitations Tommy pour votre vidéo
Le 🔥🔥 ! Merci le 🩸
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.
Merci pour tes super tuto !!!
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 !
Bravo. Super vidéo, claire et précise. 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 :-)
C'est beau le génie!
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
Génial 🤩
Merci Tommy, pour l'astuce VSCodium =)
Bonjour, super vidéo comme toujours mais celle-ci est encore
plus cool que les autres. Encore merci et bravo...
bien !! me reste plus qu'a trouver du temps pour regarder la vidéo suivante !!, bonne continuation
Wow c'est bien nice le w3-spin ! Merci pour ce tuto !
tu es impeccable
C'est excellent. Bravo et merci.
Merci super cool ! Et maintenant "développer un apk Android pour piloter votre serveur" (afficher les pages) 🤗👍
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 ;)
Sur les claviers QWERTY, le W est juste en dessous du 2. J'essaie de taper trop rapidement 😁
@@TD72PRO :) faut pas aller si vite 😁
Very Nice ! Comme toujours Tommy ! 😁
Excellente vidéo, bravo !
Super meci ! Juste ca fait un bon gros bout de css pour deux boutons et un span ^^
Merci infiniment, vraiment précieux !
Bravo et merci
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 RUclips.
Merci , vidéo parfaite
Vraiment super que de travail merci 🙃
Super vidéo ! Merci !
Super boulot.
jai un probleme ça arrete pas de me dire Mounting SPIFFS failed! Error: -1
J'ai le même erreur
Merci pour tout tes vidéo
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.
Salut, super vidéo 👍 comme d'habitude ! +1 pour w3-spin 😁
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.
Est ce que c’est possible de donner une adresse url à ton esp32 à la place de l’adresse ip?
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
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
Merci, c'était très clair ;)
Merci Tommy
Bonjour Tommy et aux autres. Ta vidéo est géniale. J'ai suivi le tuto avec un module ESP32-CAM AI thinker . N'ayant pas la pin 34 sur ma carte, j'ai essayé avec une autre GPIO. Bien sûr, cela ne marche pas . Quelle idée de prendre des initiatives! la fonction analogRead est inutilisable avec les pin de l'ADC2 quand le WiFI est utilisée . La 34 que tu utilises fait partie de ADC1. En cherchant longtemps, j'ai trouvé un lien vers une solution . Si cela intéresse quelqu'un , voici les lignes à rajouter :
avant void setup() ajouter
uint64_t reg_b;
dans le setup() avant de lancer le wifi, sauvegarde d'un registre
reg_b = READ_PERI_REG(SENS_SAR_READ_CTRL2_REG);
et juste avant la ligne int val= analogRead(capteurLuminosite); ajouter les deux lignes
WRITE_PERI_REG(SENS_SAR_READ_CTRL2_REG, reg_b);
SET_PERI_REG_MASK(SENS_SAR_READ_CTRL2_REG, SENS_SAR2_DATA_INV);
je ne comprends pas tout, mais ça marche ,j'arrive à lire la valeur du capteur.
Je n'arrive pas à utiliser platformio avec VSCodium , il semble que platformio se soit macqué avec microsoft depuis la publication de ta vidéo. Dommage !