|
|
| Ligne 1 : |
Ligne 1 : |
| − | {{Tuto Details
| + | Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_13-09-33 |
| − | |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 <WiFi.h>
| |
| − | #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 ou avant 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_12-39-07.png
| |
| − | }}
| |
| − | {{Tuto Step}}
| |
| − | {{Notes}}
| |
| − | {{Tuto Status
| |
| − | |Complete=Draft
| |
| − | }}
| |
