Voir la source de Créer une Interface Web pour ESP32

{{Tuto Details
|Main_Picture=Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_12-18-07.png
|Main_Picture_annotation={"version":"3.5.0","objects":[{"type":"image","version":"3.5.0","originX":"left","originY":"top","left":109,"top":2,"width":1212,"height":570,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.63,"scaleY":0.63,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://www.wikidebrouillard.org/images/7/7b/Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_12-18-07.png","filters":[]}],"height":281.3627254509018,"width":600}
|Licences=Attribution (CC-BY)
|Description=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
|Disciplines scientifiques=Arduino
|Difficulty=Easy
|Duration=10
|Duration-type=minute(s)
|Tags=dashboard, Arduino, web, esp32, tutoriel
}}
{{Introduction}}
{{Materials}}
{{Tuto Step
|Step_Title=Installez la bibliothèque ESP-dash dans votre gestionnaire de bibliothèque
|Step_Content=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]]


Si vous savez, recherchez "ESP DASH" dans le gestionnaire de bibliothèque. puis installez la dernière version.


Installez en complément les bibliothèques suivantes 

<syntaxhighlight lang="arduino">
AsyncTCP
ESPAsyncWebServer
</syntaxhighlight>Pour un Wemos ou un ESP8266<syntaxhighlight lang="arduino">
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
</syntaxhighlight><br />
|Step_Picture_00=Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_12-18-07.png
|Step_Picture_01=Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_12-24-28.png
}}
{{Tuto Step
|Step_Title=Le minimum Syndical
|Step_Content=Pour frankencoder cette bibliothèque, toujours la même technique :

Ouvrez un exemple et repérez les lignes suivantes :

#L'importation des bibliothèques (avant le setup)<syntaxhighlight lang="arduino" line="1" start="1">
//import de la bibliothèque
#include <ESPDash.h>
//import des bibliothèques dépendantes
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
</syntaxhighlight>
#La création de ou des objets (avant le setup)<syntaxhighlight lang="arduino" line="1" start="8">
/* Création des objets */
//création de l'objet serveur
AsyncWebServer server(80);

//Création de l'objet Dashboard (tableau d'affichage)
ESPDash dashboard(&server);

// Initialisation et création des Objets Card
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");

</syntaxhighlight>
#L'initialisation et le démarrage de l'objet (dans le setup) <br /><syntaxhighlight lang="arduino" line="1" start="12">
void setup() {
//demarrage du serveur
server.begin();
}
</syntaxhighlight>
#L'utilisation de l'objet (dans le loop)<syntaxhighlight lang="arduino" line="1" start="21">
void loop() {
  //Utilisation des objets

  /* Ajout des valeurs dans les cartes d'affichage */
  temperature.update(42);
  humidity.update(12);

  /* Mise a jour du panneau d'affichage) */
  dashboard.sendUpdates();
  delay(3000);
}
</syntaxhighlight><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 !'''
|Step_Picture_00=Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_13-09-33.png
}}
{{Tuto Step
|Step_Title=Frankencodez avec la bibliothèque WIFI
|Step_Content=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 ! 

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 ;-).


Nous allons ajouter les lignes suivantes suivant toujours la même recette !

1 - L'importation des bibliothèques Wifi  (avant le setup)<syntaxhighlight lang="arduino">
#include <WiFi.h>
</syntaxhighlight>2 - La création de l'objet

Ici point besoin de le créer, il est unique et est géré nativement par la bibliothèque, son petit nom sera '''WiFi''' .



3 - L'initialisation et le démarrage de l'objet (dans le setup) <syntaxhighlight lang="arduino">
void setup(){
  WiFi.softAP("mon interface web", "motdepasse");
}
</syntaxhighlight>
|Step_Picture_00=Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_13-22-52.png
}}
{{Tuto Step
|Step_Title=Admirez le travail !
|Step_Content=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 !
|Step_Picture_00=Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_12-18-07.png
}}
{{Notes}}
{{Tuto Status
|Complete=Published
}}