]> 2026-05-13T21:17:57+02:00 Créer une Interface Web pour ESP32 0 fr Published Pour aller plus loin dans la doc : https://ayushsharma82.github.io/ESP-DASH Dans ce petit tutoriel, nous allons utiliser la bibliothèque ESP-DASH pour créer une petite page Web permettant d'afficher différentes valeurs de capteur par exemple Easy Arduino 10 minute(s) Attribution (CC-BY) Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_12-18-07.png <nowiki>Si vous ne savez pas installer une bibliothèque reportez vous au tutoriel d'installation de bibliothèque. [[Importer des bibliothèques dans l'interface Arduino]]<br /><br /><br />Si vous savez, recherchez "ESP DASH" dans le gestionnaire de bibliothèque. puis installez la dernière version.<br /><br /><br />Installez en complément les bibliothèques suivantes <br /><br /><div class="mw-highlight mw-content-ltr" dir="ltr"><pre>AsyncTCP<br />ESPAsyncWebServer<br />ArduinoJson</pre></div>Pour un Wemos ou un ESP8266<div class="mw-highlight mw-content-ltr" dir="ltr"><pre>ESPAsyncTCP<br />ESPAsyncWebServer<br />ArduinoJson</pre></div><br/></nowiki> <nowiki>Pour frankencoder cette bibliothèque, toujours la même technique :<br /><br />Ouvrez un exemple et repérez les lignes suivantes :<br /><br />#L'importation des bibliothèques (avant le setup) Pour un ESP32<div class="mw-highlight mw-content-ltr" dir="ltr"><pre>//import de la bibliothèque<br />#include <ESPDash.h><br />//import des bibliothèques dépendantes<br />#include <AsyncTCP.h><br />#include <ESPAsyncWebServer.h></pre></div>Pour un Wemos ou un ESP8266 :<div class="mw-highlight mw-content-ltr" dir="ltr"><pre>//import de la bibliothèque<br />#include <ESPDash.h><br />//import des bibliothèques dépendantes<br />#include <ESP8266WiFi.h><br />#include <ESPAsyncTCP.h><br />#include <ESPAsyncWebServer.h></pre></div>Intégrez la bibliothèque : ESPAsyncTCP     https://github.com/me-no-dev/ESPAsyncTCP/archive/master.zip         ESPAsyncWebserver      https://github.com/me-no-dev/ESPAsyncWebServer/archive/master.zip<br/><br />#La création de ou des objets (avant le setup)<div class="mw-highlight mw-content-ltr" dir="ltr"><pre>/* Création des objets */<br />//création de l'objet serveur<br />AsyncWebServer server(80);<br /><br />//Création de l'objet Dashboard (tableau d'affichage)<br />ESPDash dashboard(&server);<br /><br />// Initialisation et création des Objets Card<br />Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");<br />Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");</pre></div><br />#L'initialisation et le démarrage de l'objet (dans le setup) <br/><div class="mw-highlight mw-content-ltr" dir="ltr"><pre>void setup() {<br />//demarrage du serveur<br />server.begin();<br />}</pre></div><br />#L'utilisation de l'objet (dans le loop)<div class="mw-highlight mw-content-ltr" dir="ltr"><pre>void loop() {<br /> //Utilisation des objets<br /><br /> /* Ajout des valeurs dans les cartes d'affichage */<br /> temperature.update(42);<br /> humidity.update(12);<br /><br /> /* Mise a jour du panneau d'affichage) */<br /> dashboard.sendUpdates();<br /> delay(3000);<br />}</pre></div><br/>'''Une fois compilée, rien ne se passe, c'est normal, il va falloir connecter notre ESP au réseau ! et donc frankencoder avec le code minimal de connexion au réseau !'''</nowiki> <nowiki>Afin de voir notre jolie interface sur notre navigateur préféré, il va falloir connecter notre ESP à un réseau ou bien le mettre en Point d'accès ! <br /><br />Pour se faire reportez vous sur le tuto [[Configurez le réseau Wifi sur un ESP]], dans cet exemple, nous allons créer un Point d'acces, c'est à dire que notre ESP se comportera comme une BOX internet, mais sans internet ;-).<br /><br /><br />Nous allons ajouter les lignes suivantes suivant toujours la même recette !<br /><br />1 - L'importation des bibliothèques Wifi (avant le setup)<div class="mw-highlight mw-content-ltr" dir="ltr"><pre>#include <WiFi.h></pre></div>2 - La création de l'objet<br /><br />Ici point besoin de le créer, il est unique et est géré nativement par la bibliothèque, son petit nom sera '''WiFi''' .<br /><br /><br /><br />3 - L'initialisation et le démarrage de l'objet (dans le setup) <div class="mw-highlight mw-content-ltr" dir="ltr"><pre>void setup(){<br /> WiFi.softAP("mon interface web", "motdepasse");<br />}</pre></div></nowiki> Une fois votre code téléversé dans l'esp, connectez vous en Wifi au réseau "mon interface web" et entrez le mot de passe "mot de passe". Rendez-vous dans votre navigateur préféré et entrez l'adresse suivante http://192.168.4.1 Admirez ! Installez la bibliothèque ESP-dash dans votre gestionnaire de bibliothèque Le minimum Syndical Frankencodez avec la bibliothèque WIFI Admirez le travail ! dashboard Arduino web esp32 tutoriel 2020-12-09T15:52:18Z 2459193.1613194 Créer une Interface Web pour ESP32 0 0 0