Parcourir le wiki

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  +
10  +
minute(s)  +
Attribution (CC-BY)  +
Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_12-18-07.png  +
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 !  +, <nowiki>Afin de voir notre jolie intAfin 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)
#include 
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)
void setup(){
WiFi.softAP("mon interface web", "motdepasse");
}
="s">"mon interface web"</span><span class="p">,</span> <span class="s">"motdepasse"</span><span class="p">);</span><br /><span class="p">}</span><br /></pre></div></nowiki>  +
, <nowiki>Si vous ne savez pas installSi 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

AsyncTCP
ESPAsyncWebServer
ArduinoJson
Pour un Wemos ou un ESP8266
ESPAsyncTCP
ESPAsyncWebServer
ArduinoJson

;ESPAsyncTCP</span><br /><span class="n">ESPAsyncWebServer</span><br /><span class="n">ArduinoJson</span><br /></pre></div><br/></nowiki>  +
  et <nowiki>Pour frankencoder cette biblPour 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) Pour un ESP32
1 //import de la bibliothèque
2 #include
3 //import des bibliothèques dépendantes
4 #include
5 #include
Pour un Wemos ou un ESP8266 :
1 //import de la bibliothèque
2 #include
3 //import des bibliothèques dépendantes
4 #include
5 #include
6 #include
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

#La création de ou des objets (avant le setup)
 8 /* Création des objets */
9 //création de l'objet serveur
10 AsyncWebServer server(80);
11
12 //Création de l'objet Dashboard (tableau d'affichage)
13 ESPDash dashboard(&server);
14
15 // Initialisation et création des Objets Card
16 Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
17 Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");

#L'initialisation et le démarrage de l'objet (dans le setup)
12 void setup() {
13 //demarrage du serveur
14 server.begin();
15 }

#L'utilisation de l'objet (dans le loop)
21 void loop() {
22 //Utilisation des objets
23
24 /* Ajout des valeurs dans les cartes d'affichage */
25 temperature.update(42);
26 humidity.update(12);
27
28 /* Mise a jour du panneau d'affichage) */
29 dashboard.sendUpdates();
30 delay(3000);
31 }

'''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 !'''
ty</span><span class="p">.</span><span class="n">update</span><span class="p">(</span><span class="mi">12</span><span class="p">);</span><br /><span class="lineno">27 </span><br /><span class="lineno">28 </span> <span class="cm">/* Mise a jour du panneau d'affichage) */</span><br /><span class="lineno">29 </span> <span class="n">dashboard</span><span class="p">.</span><span class="n">sendUpdates</span><span class="p">();</span><br /><span class="lineno">30 </span> <span class="nf">delay</span><span class="p">(</span><span class="mi">3000</span><span class="p">);</span><br /><span class="lineno">31 </span><span class="p">}</span><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>  
Installez la bibliothèque ESP-dash dans votre gestionnaire de bibliothèque  +, Le minimum Syndical  +, Frankencodez avec la bibliothèque WIFI  +  et Admirez le travail !  +
dashboard  +, Arduino  +, web  +, esp32  +  et tutoriel  +
Date de modification« Date de modification (Modification date) » est une propriété prédéfinie qui correspond à la date de la dernière modification d’un sujet et est fournie par MédiaWiki Sémantique.
15:52:18, 9 décembre 2020  +
⧼cs-comments⧽Cette propriété est une propriété spéciale dans ce wiki.
0  +
Créateur de la pageCette propriété est une propriété spéciale dans ce wiki.
I did itCette propriété est une propriété spéciale dans ce wiki.
0  +
FavorisCette propriété est une propriété spéciale dans ce wiki.
0  +
 
Aucune propriété ne pointe vers cette page.