|
|
Ligne 1 : |
Ligne 1 : |
− | {{Tuto Details
| + | Initier_des_jeunes___Arduino-_la_boite_noire_Capture_d_cran_du_2020-12-04_13-44-45 |
− | |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><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
| |
− | }}
| |