|
|
| Ligne 1 : |
Ligne 1 : |
| | {{Tuto Details | | {{Tuto Details |
| − | |Main_Picture=Cr_er_une_Interface_Web_pour_ESP32_Capture_d_cran_du_2020-12-02_12-18-07.png | + | |Main_Picture=Configurez_le_r_seau_Wifi_sur_un_ESP_Untitled_Diagram.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) | | |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 | + | |Description=Dans ce tutoriel nous allons voir ensemble comment configurer le réseau sur un ESP |
| − | |Disciplines scientifiques=Arduino | + | |Disciplines scientifiques=Arduino, Computing |
| | |Difficulty=Easy | | |Difficulty=Easy |
| − | |Duration=10 | + | |Duration=5 |
| | |Duration-type=minute(s) | | |Duration-type=minute(s) |
| − | |Tags=dashboard, Arduino, web, esp32, tutoriel | + | |Tags=wifi, esp, arduino, esp8266, reseaux, esp32 |
| | + | }} |
| | + | {{Introduction |
| | + | |Introduction=Les microcontrolleurs de typer ESP (32 ou 8266) on l'avantage de posséder la capacité de se connecter à un réseau Wifi ou de générer leurs propres réseaux Wifi, nous allons voir comment tirer partie de cette fonctionnalité pour connecter ces derniers au réseau. |
| | }} | | }} |
| − | {{Introduction}}
| |
| | {{Materials}} | | {{Materials}} |
| | {{Tuto Step | | {{Tuto Step |
| − | |Step_Title=Installez la bibliothèque ESP-dash dans votre gestionnaire de bibliothèque
| + | |Step_Title=Le Mode Point D'accès (AP Access Point) |
| − | |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]]
| + | |Step_Picture_00=Configurez_le_r_seau_Wifi_sur_un_ESP_Untitled_Diagram_1_.png |
| − | | |
| − | | |
| − | 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 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 "Réseaux et 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}} | | {{Notes}} |
| | {{Tuto Status | | {{Tuto Status |
| − | |Complete=Published | + | |Complete=Draft |
| | }} | | }} |
