Archives

ESP32 : Le Hub Ultime de Tutos et Playlists Complets

Miniature-pour-le-hub-esp32-tuto

Tutoriels ESP32 : vidéos, projets et ressources RedOhm

Bienvenue dans l’espace RedOhm consacré aux tutoriels ESP32 !

Cette page rassemble nos tutoriels, des premières applications aux projets techniques plus avancés. Vous y découvrirez différentes cartes ESP32, leur programmation avec l’IDE Arduino et leurs nombreuses possibilités.

Nous abordons notamment la communication Wi-Fi, les serveurs Web, la domotique, la robotique, les interfaces graphiques LVGL et le pilotage de matériels électroniques.

Ressources disponibles pour nos tutoriels ESP32

Chaque chapitre donne accès à une vidéo explicative. Selon les projets, vous pourrez également retrouver les codes sources, les schémas électriques, les fiches techniques et les documents nécessaires à leur réalisation.

Certains tutoriels sont principalement théoriques et ne comportent donc pas de code à télécharger.Les fichiers proposés au téléchargement peuvent être regroupés dans des archives ZIP ou RAR.

Une bibliothèque technique en évolution

Notre objectif est de centraliser les ressources pédagogiques RedOhm afin de faciliter vos recherches et votre apprentissage.Cette bibliothèque évolue au rythme de nos nouveaux tutoriels et des projets développés sur notre chaîne YouTube.

Vous pouvez partager vos remarques ou suggestions dans les commentaires des vidéos concernées

Sommaire des tutoriels ESP32

  1. ESP32-S3 Tuto 1 : Connexion Wi-Fi et contrôle de LED avec ESP32-S3
  2. ESP32-S3 & Écran tactile 7″ Viewe | Tuto 1 : changez d’échelle dans vos projets
  3. ESP32-S3 & Écran tactile 7″ Viewe | LVGL Tuto 1.1 : Les Fondamentaux 
  4. ESP32-S3 & Écran tactile 7″ Viewe | LVGL Tuto 1.2 : premier bouton LVGL interactif 
  5. ESP32 simulateur LVGL Tuto 2 : installer le simulateur LVGL pas à pas 
  6. ESP32 Tuto 2 : Comprendre WebSocket et la Communication Bidirectionnelle
  7. ESP32 Tuto 3 : Intégrer une image dans l’ESP32 et l’afficher sur une page web interactive
  8. ESP32 Tuto 4 : Station météo ESP32 connectée avec API Météo Concept
  9. ESP32 Tuto 5 : Créez une page web et piloter un servomoteur en temps réel en Wi-Fi local
  10. ESP32-P4 & C6 Tuto 1 : Découverte complète de la carte JC-ESP32P4-M3
  11. ESP32-P4 & C6 Tuto 3 : Piloter un Moteur Pas à Pas et Régler TH/TB en Temps Réel
  12. ESP32-P4 & C6 Tuto 5 : Pilotage Wi-Fi de 4 relais pour vos projets domotiques
  13. ESP32-P4 & C6 Tuto 8 : Géoréférencer une carte et positionner un point GPS
  14. ESP32-P4 & C6 Tuto 10 : créer un assistant vocal avec ChatGPT en HTTPS ( voir le projet )
  15. ESP32-P4 & C6 Tuto 10.1 : créer un serveur Web sécurisé en HTTPS
  16. ESP32-C3 Tuto 1 : installation Arduino, USB stable et premiers pas en Wi-Fi
  17. ESP32-C3 Tuto 5 : système domotique configurable, pilotage et réglage des relais
  18. KS5016 Tuto 1 : Étude de la carte ESP32 + réalisation d’une calculatrice avec un clavier 4×4
  19. KS5016 Tuto 2 : contrôle d’une serre en Wi-Fi sur esp 32 avec suivi de température 
  20. KS5016 Tuto 3 : comprendre l’interface OPMSA04_NPN entre ESP32 et le 24 V 
  21. ESP32 Wrover Tuto 1 : Passer d’une boucle unique à FreeRTOS, étape par étape
  22. ESP32 Wrover Tuto 4 : Caméra OV3660 – Streaming MJPEG en Wi-Fi (Arduino + PSRAM)
  23. Retour à la page d’accueil    

Dans cette première réalisation, nous allons découvrir comment utiliser l’ESP32-S3 pour contrôler sa LED intégrée directement depuis une interface Web.Tout d’abord, nous verrons comment connecter la carte à un réseau Wi-Fi. Ensuite, nous apprendrons à configurer un serveur Web sur l’ESP32-S3 afin de piloter cette LED sans ajouter de composants externes.Enfin, nous expliquerons les différentes étapes nécessaires à la création d’une page Web interactive.

Retour au sommaire

ESP32-S3 & Écran tactile 7″ Viewe 
Tuto 1 : changez d’échelle dans vos projets

Dans cette présentation, nous découvrons un écran tactile de 7 pouces basé sur l’ESP32-S3, capable de gérer l’affichage graphique, les interactions tactiles et la connexion Wi-Fi avec un seul microcontrôleur.Tout d’abord, nous présentons les caractéristiques du matériel. Ensuite, nous réalisons une démonstration associant la bibliothèque LVGL, un serveur Web et une communication WebSocket.

Vous trouverez ci-dessous le lien vers la page du produit qui a servi de base matérielle pour la réalisation de ce tutoriel. : Wieve Display

Retour au sommaire

ESP32-S3 & Écran 7″ Viewe
LVGL Tuto 1.1 : Les Fondamentaux

Dans ce premier tutoriel consacré à LVGL sur écran tactile 7 pouces piloté par un ESP32-S3, nous allons poser les bases indispensables pour comprendre comment se construit une interface graphique embarquée. À partir d’un exemple volontairement simple , l’affichage d’un premier bouton , nous allons découvrir la logique des objets, la hiérarchie parent-enfant et le rôle de LVGL dans la chaîne d’affichage.

Retour au sommaire

ESP32-S3 & Écran tactile 7″ Viewe 
LVGL Tuto 1.2 :
premier bouton LVGL interactif 

Dans ce tutoriel LVGL 1-2, nous faisons évoluer notre premier bouton affiché sur l’écran tactile ESP32-S3 afin de le rendre interactif. L’objectif est de comprendre comment LVGL détecte un appui utilisateur grâce à son système d’événements, puis comment notre code transmet cette action vers une page Web hébergée directement par l’ESP32. Grâce au WiFi, au serveur Web et au WebSocket, nous visualisons en temps réel la liaison entre l’interface LVGL locale et un voyant affiché dans le navigateur.

Retour au sommaire

ESP32 simulateur LVGL Tuto 2 
installer le simulateur LVGL pas à pas

Dans ce tutoriel RedOhm, l’installation de l’environnement nécessaire au simulateur LVGL sur PC est présentée afin de faciliter le développement d’interfaces graphiques pour ESP32.Tout d’abord, l’intérêt d’utiliser un simulateur plutôt que de travailler directement sur le microcontrôleur est expliqué, notamment pour réduire les temps de compilation.Ensuite, l’installation de Visual Studio et de Git est détaillée afin que l’environnement de développement puisse être correctement préparé.Par ailleurs, la récupération automatisée des sources du simulateur LVGL, ainsi que des bibliothèques associées, est mise en œuvre grâce à la méthode Git.Enfin, l’environnement complet est validé afin que la compilation du simulateur et la création des premières interfaces LVGL puissent être réalisées dans le tutoriel suivant.

Retour au sommaire

   

ESP32 Tuto 1 :
Créez votre premier serveur Web embarqué pas à pas

 

Dans ce tutoriel dédié à l’ESP32-WROOM-32, apprenez à créer une page web dynamique et interactive ! Nous couvrons la configuration de l’ESP32, y compris l’installation du driver CP210x et le paramétrage de l’IDE Arduino. Vous découvrirez comment connecter l’ESP32 à un réseau Wi-Fi et configurer un serveur HTTP sur le port 80 pour répondre aux requêtes. Enrichissez vos projets avec du contenu HTML dynamique et une gestion efficace des requêtes clients. Ce tutoriel vous guide pas à pas pour comprendre et personnaliser chaque ligne de code selon vos besoins.

Retour au sommaire

ESP32 Tuto 2 :
Comprendre WebSocket et la Communication Bidirectionnelle

Si vous avez toujours rêvé de rendre vos projets connectés plus dynamiques et réactifs, vous êtes au bon endroit ! Dans le précédent épisode, nous avons appris à créer une page web dynamique hébergée sur un ESP32, mais cette fois-ci, nous allons franchir un nouveau cap. Grâce aux WebSockets, nous allons mettre en place une communication asynchrone et bidirectionnelle, idéale pour des interactions fluides en temps réel entre votre microcontrôleur et une page web.

Retour au sommaire

ESP32 Tuto 3 :
Intégrer une image dans l’ESP32 et l’afficher sur une page web interactive

Nous allons créer une page web interactive avec une image intégrée et des valeurs affichées en temps réel, sans rechargement, grâce à l’utilisation des WebSockets. Un projet idéal pour vos applications en domotique, monitoring ou affichage de capteurs !

Retour au sommaire

ESP32 Tuto 4 :
Station météo ESP32 connectée avec API Météo Concept

Dans ce tutoriel, on ne se contente pas de lire la température : on apprend à faire parler une API météo professionnelle, à dialoguer avec elle depuis un ESP32, et à présenter les données de manière élégante dans une interface Web locale.

Retour au sommaire

ESP32 Tuto 5 :
Créez une page web pour piloter un servomoteur en temps réel en Wi-Fi local

Depuis le premier épisode, nous avons progressivement construit les bases de notre projet : un serveur HTTP embarqué, une communication WebSocket bidirectionnelle et une interface Web réactive.Aujourd’hui, nous franchissons une nouvelle étape. Notre ESP32 devient un véritable poste de commande capable de piloter un servomoteur en temps réel depuis une page Web locale, sans cloud ni service externe.

Tout d’abord, nous utilisons une interface simple associant des boutons de positionnement et un curseur de réglage continu. Ensuite, chaque action passe instantanément par WebSocket, ce qui permet de synchroniser tous les navigateurs connectés.

De plus, notre programme conserve les réglages dans la mémoire NVS. Ainsi, le système retrouve automatiquement sa configuration après chaque redémarrage.Cependant, notre réalisation ne se limite pas à une simple démonstration. Elle constitue également un banc d’essai réutilisable pour la robotique et l’animatronique.Nous pouvons ainsi calibrer la plage d’angle réelle du servomoteur, observer la linéarité et la réactivité du PWM, puis valider son comportement avant toute intégration.

Enfin, qu’il s’agisse d’un bras articulé, d’un droïde inspiré de R2-D2 ou du futur T800 de notre playlist, nous conservons les mêmes principes : une interface homme-machine claire, une communication fiable et un contrôle précis.

 

Retour au sommaire

ESP32-P4 & C6 Tuto 1 :
Découverte complète de la carte JC-ESP32P4-M3

Dans ce tutoriel RedOhm, découvrez la carte JC-,ESP32P4-M3 qui associe la puissance du processeur ESP32-P4 (architecture RISC-V) à la connectivité Wi-Fi 6 et Bluetooth 5 assurée par l’ESP32-C6.

Nous explorons ses interfaces clés  RS-485 industrielle, codec audio ES8311 et microSD native  tout en comparant ses performances à celles de l’ESP32-S3.Vous apprendrez à configurer l’IDE Arduino, gérer la partition mémoire FATFS, et mettre en œuvre un serveur web Wi-Fi avec mDNS.
Une présentation claire et technique, pensée pour les créateurs, ingénieurs et étudiants souhaitant exploiter la nouvelle génération ESP32-P4 Dev Module dans leurs projets IoT, multimédia ou embarqués.
(ESP32-P4 tutorial · Arduino IDE setup · Wi-Fi 6 / RS-485 / ES8311 board review)

Retour au sommaire

ESP32-P4 & C6 Tuto 3 :
Piloter un Moteur Pas à Pas et Régler TH/TB en Temps Réel

Découvrez comment concevoir un contrôleur haute précision pour moteur pas à pas, exploitant la puissance du processeur ESP32-P4 (pour une gestion temporelle à la microseconde) et de l’ESP32-C6 (pour une connectivité Wi-Fi fluide et sécurisée).

Ce que vous allez réaliser :

  • Générer un signal STEP stable et régulier, piloté en temps réel via une interface web interactive.
  • Ajuster dynamiquement le temps haut (TH) et le temps bas (TB) des impulsions, pour optimiser la vitesse et la fluidité du mouvement.
  • Comprendre les secrets matériels : utilisation des timers, optimisation de la mémoire IRAM, et configuration avancée de l’IDE pour une précision inégalée.

Un tutoriel complet, alliant théorie et pratique, pour des résultats professionnels.

Retour au sommaire

Vous souhaitez créer une interface Web sur ESP32 pour piloter quatre relais.Vous voulez aussi conserver vos réglages, même après une coupure de courant.Dans ce tutoriel, vous apprenez à construire un panneau de contrôle domotique complet.Chaque sortie possède un nom personnalisé, stocké en mémoire NVS sur la JC-ESP32P4-M3.Ainsi, vous passez d’un simple test à un système autonome et intelligent.Vous pouvez ensuite piloter votre installation depuis n’importe quel smartphone.

Retour au sommaire

ESP32-P4 & C6 Tuto 8 :
Géoréférencer une carte et positionner un point GPS

Dans cette nouvelle réalisation, nous découvrons comment géoréférencer une carte avec l’ESP32-P4 et y positionner un repère à partir de coordonnées GPS saisies.Tout d’abord, nous utilisons une image cartographique stockée sur une carte microSD et accessible depuis un serveur Web local.

Ensuite, nous définissons trois points de référence afin de permettre au navigateur de calculer la position du repère sur l’image.

Enfin, nous mettons à votre disposition notre code paramétrable et des fiches techniques pour comprendre les calculs et adapter cette méthode à vos propres cartes.

Retour au sommaire

ESP32-P4 & C6 Tuto 10 :
créer un assistant vocal avec ChatGPT en HTTPS

Cette série de tutoriels présente la création progressive d’un système capable de faire communiquer un ESP32-P4, son interface réseau ESP32-C6, une page Web sécurisée et une intelligence artificielle.

Le Tuto 10 présente le projet dans son ensemble : l’utilisateur écrit ou prononce une question depuis un ordinateur, une tablette ou un téléphone. Le navigateur transforme la voix en texte, puis transmet la question à l’ESP32 par une liaison HTTPS. L’ESP32 interroge ensuite l’intelligence artificielle, récupère sa réponse et la conserve dans un historique horodaté.

Les tutoriels 10.1, 10.2, 10.3, et suivants, reprendront séparément chaque difficulté du projet : création du serveur HTTPS, utilisation du microphone, transmission des chaînes de caractères, communication avec l’API OpenAI, traitement des données JSON, gestion de la mémoire, stockage sur microSD et sécurisation des informations sensibles.

La série évoluera ensuite vers des applications plus avancées. Nous ajouterons des capteurs, des actionneurs et des commandes structurées afin que l’intelligence artificielle puisse analyser plusieurs paramètres, proposer une action et, selon le niveau d’autonomie choisi, participer au pilotage réel d’un équipement.

Nous étudierons également la possibilité d’utiliser une intelligence artificielle locale, installée sur un ordinateur ou un mini-PC du réseau, afin de limiter la dépendance à Internet et de conserver certaines données localement.

Communication sécurisée et interface Web

  • ESP32-P4 & C6 Tuto 10.1 : créer un serveur Web sécurisé en HTTPS

Dans cette nouvelle réalisation, nous allons créer un serveur Web sécurisé en HTTPS sur une carte ESP32-P4 associée à un ESP32-C6.

Tout d’abord, nous générons un certificat TLS à l’aide de l’outil mkcert. Ensuite, nous configurons le service mDNS afin d’accéder à notre serveur avec l’adresse assistant-esp32.local, sur le port 443. Enfin, nous intégrons le certificat et sa clé privée dans notre projet Arduino pour permettre les communications HTTPS sécurisées.

Retour au sommaire

  • ESP32-P4 & C6 Tuto 10.2 : utiliser le micro et convertir la voix en texte
  • ESP32-P4 & C6 Tuto 10.3 : envoyer une phrase de la page Web vers l’ESP32

Communication avec l’intelligence artificielle

  • ESP32-P4 & C6 Tuto 10.4 : comprendre l’API OpenAI et créer une clé API
  • ESP32-P4 & C6 Tuto 10.5 : envoyer une première question à ChatGPT
  • ESP32-P4 & C6 Tuto 10.6 : extraire la réponse GPT d’un fichier JSON
  • ESP32-P4 & C6 Tuto 10.7 : afficher la réponse GPT sur la page Web
  • ESP32-P4 & C6 Tuto 10.8 : attendre la réponse de l’IA sans bloquer l’ESP32

Mémorisation des échanges

  • ESP32-P4 & C6 Tuto 10.9 : mémoriser les questions et réponses de ChatGPT
  • ESP32-P4 & C6 Tuto 10.10 : créer une mémoire circulaire de 30 échanges
  • ESP32-P4 & C6 Tuto 10.11 : horodater les échanges avec un serveur NTP
  • ESP32-P4 & C6 Tuto 10.12 : stocker l’historique en PSRAM ou sur microSD

Fiabilité et sécurité

  • ESP32-P4 & C6 Tuto 10.13 : résoudre les erreurs HTTPS, TLS et mémoire
  • ESP32-P4 & C6 Tuto 10.14 : protéger les clés API et les données sensibles
  • ESP32-P4 & C6 Tuto 10.15 : gérer les erreurs et les pertes de connexion

Transformation des réponses en commandes

  • ESP32-P4 & C6 Tuto 10.16 : obtenir une commande structurée depuis ChatGPT
  • ESP32-P4 & C6 Tuto 10.17 : vérifier une commande avant de l’exécuter
  • ESP32-P4 & C6 Tuto 10.18 : piloter une lampe par la voix avec ChatGPT
  • ESP32-P4 & C6 Tuto 10.19 : commander plusieurs équipements en langage naturel

Capteurs et aide à la décision

  • ESP32-P4 & C6 Tuto 10.20 : envoyer plusieurs mesures de capteurs à ChatGPT
  • ESP32-P4 & C6 Tuto 10.21 : utiliser l’IA comme aide à la décision
  • ESP32-P4 & C6 Tuto 10.22 : donner progressivement de l’autonomie à l’IA

Intelligence artificielle locale

  • ESP32-P4 & C6 Tuto 10.23 : installer une intelligence artificielle locale
  • ESP32-P4 & C6 Tuto 10.24 : faire dialoguer l’ESP32 avec une IA locale
  • ESP32-P4 & C6 Tuto 10.25 : basculer entre une IA locale et une IA distante
  • ESP32-P4 & C6 Tuto 10.26 : intégrer une IA légère directement dans l’ESP32

Projet final

  • ESP32-P4 & C6 Tuto 10.27 : système complet avec capteurs, actionneurs et IA

Retour au sommaire

 

Prêt à découvrir l’ESP32-C3 Super Mini ? Cette carte ESP32 compacte intègre le Wi-Fi, le Bluetooth 5.0 et une architecture RISC-V moderne pour un coût très réduit. Cependant, lors du premier branchement sous Windows, de nombreux utilisateurs rencontrent une instabilité du port USB. Par conséquent, la programmation de l’ESP32 devient impossible.

Dans ce tutoriel, nous présentons d’abord les capacités de l’ESP32-C3 : performances, 13 GPIO accessibles, PWM et ADC. Ensuite, nous expliquons la manipulation BOOT + RESET afin de forcer le mode bootloader et stabiliser le port COM. Puis, nous configurons correctement l’IDE Arduino pour l’ESP32, notamment le type de carte et l’option USB CDC On Boot. Enfin, nous validons le fonctionnement avec un premier programme : LED clignotante et connexion Wi-Fi hébergée par l’ESP32.

Retour au sommaire

ESP32-C3 Tuto 5 :
système domotique configurable, pilotage et réglage des relais

Dans cette démonstration, nous commençons par tester notre contrôleur domotique ESP32-C3 et ses huit relais en conditions réelles.

Tout d’abord, nous présentons le câblage complet, étape par étape. Ensuite, nous configurons l’IDE Arduino pour compiler et téléverser notre programme. Nous détaillons également le code permettant d’établir la connexion Wi-Fi. Puis, nous mettons en place le serveur HTTP et ses différentes routes. Par ailleurs, nous activons le service mDNS pour accéder à notre contrôleur par un nom de domaine local.

Nous abordons ensuite la gestion des impulsions non bloquantes afin de préserver la réactivité du système. De plus, nous utilisons la mémoire NVS pour conserver l’état des relais.Enfin, nous synchronisons notre interface Web grâce à des échanges de données JSON en temps réel.

Retour au sommaire

KS5016 Tuto 1 :
Étude de la carte ESP32 + réalisation d’une calculatrice avec un clavier 4×4

Dans cette première présentation, nous découvrons les caractéristiques de la carte de développement KS5016, équipée d’un microcontrôleur ESP32-WROOM-32.

Tout d’abord, nous étudions les particularités de cette carte au format Arduino Uno. Ensuite, nous réalisons une petite calculatrice à l’aide d’un clavier matriciel 4 × 4. Ainsi, nous montrons comment exploiter les performances d’un ESP32 double cœur, tout en bénéficiant de ses connexions Wi-Fi et Bluetooth intégrées.

Retour au sommaire

 

KS5016 Tuto 2 :
contrôle d’une serre en Wi-Fi sur esp 32 avec suivi
de température et graphique

Dans cette vidéo, nous réalisons un système complet de surveillance de serre avec un ESP32 et deux sondes DS18B20.Nous présentons d’abord le logiciel, avec l’affichage des températures, l’heure synchronisée, le graphique et l’état de la connexion.Ensuite, nous détaillons le schéma électrique, le câblage des sondes et leur identification dans notre code.Puis, nous expliquons le rôle des principales bibliothèques ainsi que la gestion du Wi-Fi, du NTP et du watchdog.Enfin, ce tutoriel vous donne toutes les bases nécessaires pour comprendre, câbler et adapter notre projet à votre propre installation.

Retour au sommaire

KS5016 Tuto 3 :
comprendre l’interface OPMSA04_NPN entre ESP32 et le 24 V

Dans ce tutoriel, nous utilisons une carte KS5016 avec ESP32 pour piloter des charges en 24 V grâce à l’interface OPMSA04_NPN. D’abord, nous expliquons le rôle de cette carte interface, l’isolation par optocoupleur et la commutation par MOSFET. Ensuite, nous montrons les précautions à respecter entre le 3,3 V de l’ESP32 et le 24 V côté puissance.Enfin, trois programmes de démonstration permettent de vérifier le câblage, de piloter les relais depuis une page Web et d’attribuer une fonction différente à chaque sortie.

Retour au sommaire

ESP32 Wrover Tuto 1 :
Passer d’une boucle unique à FreeRTOS, étape par étape

Dans ce tutoriel ESP32, nous voyons pourquoi une boucle unique finit par montrer ses limites dès que le Wi-Fi et le réseau deviennent imprévisibles. Nous apprenons à structurer notre programme avec FreeRTOS : tâches, priorités et piles (stack), pilotées par le planificateur (scheduler). Démonstration à l’appui : même résultat visible (LED + page web “Bonjour”), mais une architecture bien plus robuste et évolutive.

Retour au sommaire

ESP32 Wrover Tuto 4 :
Caméra OV3660 – Streaming MJPEG en Wi-Fi (Arduino + PSRAM)

Dans cet épisode, nous posons d’abord les bases nécessaires pour obtenir un flux vidéo stable avec une caméra sur ESP32. Ensuite, nous abordons le streaming MJPEG ainsi que l’affichage sur une page web. Puis, nous détaillons le choix du matériel afin de garantir la compatibilité et la stabilité. De plus, nous expliquons la configuration de l’IDE Arduino, notamment le profil ESP32 WROVER, la gestion de la PSRAM et le partitionnement mémoire. Enfin, nous analysons les paramètres critiques qui conditionnent la fiabilité du système.

Retour au sommaire

Pour tout problème de téléchargement ou pour nous suivre sur les réseaux sociaux voici les plateformes  sur lesquelles nous éditons.
Cliquez sur celles qui vous intéressent .

Facebook Twitter Youtube 

Grabcad Thingiverse Cults  

Retour : Nos tuto en vidéo

RedOhm – Électronique, ESP32, Arduino, Robotique & Domotique

Créer des Pages Web Dynamiques sur ESP32 : Affichage des Données en Temps Réel

.

Bienvenue dans ce tutoriel dédié à la programmation sur l’ESP32. Contrairement à nos explorations précédentes avec des cartes comme l’Arduino, nous entrons maintenant dans un domaine légèrement différent : la création de pages web pour afficher des données en temps réel.

Dans ce projet, nous n’allons pas simplement acquérir une mesure, comme nous le ferions sur une carte Arduino avec du code en C. Avec l’ESP32, nous allons plus loin. Nous utilisons cette mesure pour la visualiser dynamiquement sur une page web hébergée directement par le microcontrôleur. C’est cette capacité à créer des serveurs web et à afficher des données en temps réel qui rend l’ESP32 si polyvalent et le distingue des autres cartes de développement que vous avez peut-être déjà utilisées.

La création d’une page web sur l’ESP32 nécessite de comprendre et d’intégrer différents concepts : HTML, CSS et JavaScript, ainsi que l’utilisation de techniques comme AJAX pour actualiser les données sans recharger la page. C’est une approche complètement différente de ce que nous avons vu avec l’Arduino, et il est essentiel de construire une base solide pour maîtriser ces techniques.

L’objectif de ce tutoriel est donc de vous guider pas à pas dans la construction de cette page web. Nous examinerons chaque ligne de code en détail, afin que vous compreniez non seulement ce que chaque ligne fait, mais aussi pourquoi elle est importante pour atteindre notre objectif : afficher une mesure de puissance en temps réel via une interface web simple et efficace.

Je tiens à souligner que ce tutoriel ne se limite pas à vous présenter une solution, mais qu’il pose également les bases nécessaires à toute personne souhaitant approfondir sa compréhension de l’interaction entre un serveur web et un ESP32. Certes, le code que nous utilisons ici est minimal pour la gestion des mesures et ressemble à ce que nous avons déjà vu avec Arduino ou en C. Cependant, la véritable innovation réside dans la façon dont nous structurons une page web et comment nous mettons en place une communication entre le serveur (ESP32) et le client (navigateur web) pour offrir une expérience fluide et interactive.

En apprenant ces techniques étape par étape, vous serez capable de maîtriser la création d’interfaces web embarquées sur des systèmes comme l’ESP32, ce qui peut avoir des applications aussi variées que la domotique, la surveillance de systèmes ou l’affichage de capteurs en temps réel.

Considérez donc ce tutoriel comme une base solide, non seulement pour ce projet, mais pour tous vos futurs développements nécessitant une interface web sur l’ESP32. Comprendre comment passer d’une simple acquisition de données à une visualisation web dynamique est un atout précieux, et ce tutoriel vous fournira les fondations essentielles pour aller encore plus loin.

Pour tout problème de téléchargement ou pour nous suivre sur les réseaux sociaux voici les plateformes  sur lesquelles nous éditons.
Cliquez sur celles qui vous intéressent .

Facebook Twitter Youtube 

Grabcad Thingiverse Cults  

Retour : Nos tuto en vidéo