Différences entre les pages « Code Minimal Réseau - (2) Héberger un site web sur mon Wemos D1 mini » et « Code Minimal Réseau - (1) Connecter le Wemos D1 mini à internet en wifi »

 
 
Ligne 3 : Ligne 3 :
 
|Licences=Attribution (CC-BY)
 
|Licences=Attribution (CC-BY)
 
|Description=Utilisation des fonction réseau des cartes compatibles Arduino, possédant une puce Wi-Fi  
 
|Description=Utilisation des fonction réseau des cartes compatibles Arduino, possédant une puce Wi-Fi  
<br/>===  Episode n° 2 : Héberger un site web sur mon Wemos D1 Mini ===
+
<br/>===  Episode n° 1 : Connecter le Wemos D1 Mini à Internet en Wi-Fi ===
 
|Disciplines scientifiques=Arduino, Computing
 
|Disciplines scientifiques=Arduino, Computing
 
|Difficulty=Technical
 
|Difficulty=Technical
|Duration=2
+
|Duration=1
 
|Duration-type=hour(s)
 
|Duration-type=hour(s)
 
}}
 
}}
 
{{Introduction
 
{{Introduction
|Introduction=Cette expérience fait partie d'une série de '''4 épisodes''', présentant différentes façons de bénéficier des capacités de communication des cartes compatibles Arduino possédant une puce Wi-Fi (Wemos D1 mini, ESP32, ...). On suppose (''Cf.  "Expériences ré-requises" ci-après'') que vous avez déjà manipulé une carte Arduino et son environnement de développement.  Ces 4 épisodes sont les suivants :
+
|Introduction=Cette expérience fait partie d'une série de '''4 épisodes''', présentant différentes façons de bénéficier des capacités de communication des cartes compatibles Arduino possédant une puce Wi-Fi (Wemos D1 mini, ESP32, ...). On suppose (''Cf.  "Expériences ré-requises" ci-après'') que vous avez déjà manipulé une carte Arduino et son environnement de développement.  Ces 4 épisodes sont les suivants :<br />
  
<br />
+
#Connecter le Wemos D1 Mini à internet en Wi-Fi --- ''cette page''.
 
+
#[https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(2)_H%C3%A9berger_un_site_web_sur_mon_Wemos_D1_mini Héberger un site web sur mon Wemos D1 Mini]
#[https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(1)_Connecter_le_Wemos_D1_mini_%C3%A0_internet_en_wifi Connecter le Wemos D1 Mini à internet en Wi-Fi].
 
#Héberger un site web sur mon Wemos D1 Mini --- ''cette page''.
 
 
#[https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(3)_Mon_D1_Mini_r%C3%A9cup%C3%A8re_des_donn%C3%A9es_sur_Internet_(Json) Mon Wemos D1 Mini récupère des données sur Internet  (format Json)].
 
#[https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(3)_Mon_D1_Mini_r%C3%A9cup%C3%A8re_des_donn%C3%A9es_sur_Internet_(Json) Mon Wemos D1 Mini récupère des données sur Internet  (format Json)].
 
#[https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(4)_Mes_Wemos_D1_Mini_discutent_sur_Internet_avec_MQTT Mes Wemos D1 Mini discutent sur Internet (protocole MQTT)]
 
#[https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(4)_Mes_Wemos_D1_Mini_discutent_sur_Internet_avec_MQTT Mes Wemos D1 Mini discutent sur Internet (protocole MQTT)]
Ligne 24 : Ligne 22 :
  
 
Dans la même philosophie que les expériences "[https://www.wikidebrouillard.org/wiki/Code_minimal_des_capteurs_pour_Arduino Code minimal des capteurs pour Arduino]" et "[https://www.wikidebrouillard.org/wiki/Code_minimal_des_actionneurs_pour_Arduino Code minimal des actionneurs pour Arduino]", <u>nous fournirons ici uniquement le code relatif à nos besoins de connexion</u>, sans mettre au point une quelconque application. Donc, ici, pas besoin de connecter une led ou un capteur, donc <u>pas de schéma de montage</u> : vous branchez simplement votre carte en USB sur votre ordinateur, et les résultats seront visibles en mode texte dans le moniteur série de l'environnement de développement Arduino.
 
Dans la même philosophie que les expériences "[https://www.wikidebrouillard.org/wiki/Code_minimal_des_capteurs_pour_Arduino Code minimal des capteurs pour Arduino]" et "[https://www.wikidebrouillard.org/wiki/Code_minimal_des_actionneurs_pour_Arduino Code minimal des actionneurs pour Arduino]", <u>nous fournirons ici uniquement le code relatif à nos besoins de connexion</u>, sans mettre au point une quelconque application. Donc, ici, pas besoin de connecter une led ou un capteur, donc <u>pas de schéma de montage</u> : vous branchez simplement votre carte en USB sur votre ordinateur, et les résultats seront visibles en mode texte dans le moniteur série de l'environnement de développement Arduino.
 +
 +
<br />
 
}}
 
}}
 
{{Materials
 
{{Materials
Ligne 45 : Ligne 45 :
 
}}
 
}}
 
{{Tuto Step
 
{{Tuto Step
|Step_Title=Mise en place d'un serveur Web (consultation)
+
|Step_Title=Connexion Wi-Fi en environnement stable
|Step_Content=Une première possibilité d'utilisation du Wi-Fi sur nos cartes, est d'y définir un mini-serveur web , qui nous permettra d'afficher voire de modifier,  depuis n'importe quel navigateur,  des données gérées par la carte - et par conséquent de récupérer la valeur de  capteurs (température, ...) ou gérer des actionneurs (moteurs, leds, ...).
+
|Step_Content=Cette première étape permet à un Wemos D1 mini (ou autre carte compatible Arduino avec puce Wi-Fi) de se connecter au Wi-Fi dans un environnement connu, et qui ne change pas ; C'est-à-dire que l'on à accès à une borne Wi-Fi, on connait son mot de passe - aka "clé de sécurité réseau", et a priori la carte va rester dans cet environnement.
 
 
 
 
On peut trouver quelques exemples d'applications de ce type, réalisée par des Petits Débrouillards, en particulier le [https://github.com/julienrat/petitbot Petit Bot], petit robot commandable, ou encore [https://www.wikidebrouillard.org/wiki/Commander_un_D1_mini_avec_une_interface_web Commander un D1 mini avec une interface web], permettant d'animer des leds, de gérer un moteur, et de récupérer des données du D1 mini sur une interface web.
 
  
  
 +
Ces bibliothèques sont pré-chargées dans l'environnement Arduino, il n'est pas nécessaire d'aller les chercher dans le gestionnaire de bibliothèques.
 
{| class="wikitable" cellspacing="0" border="0"
 
{| class="wikitable" cellspacing="0" border="0"
 
| height="17" bgcolor="#999999" align="left" |
 
| height="17" bgcolor="#999999" align="left" |
 
| valign="middle" bgcolor="#999999" align="center" |
 
| valign="middle" bgcolor="#999999" align="center" |
| bgcolor="#999999" align="center" |Site web
+
| bgcolor="#999999" align="center" |Connexion Wi-Fi de base
 
|-
 
|-
 
| rowspan="2" valign="middle" height="49" bgcolor="#999999" align="center" |Avant le Setup
 
| rowspan="2" valign="middle" height="49" bgcolor="#999999" align="center" |Avant le Setup
 
| valign="middle" bgcolor="#999999" align="center" |Importation de la bibliothèque
 
| valign="middle" bgcolor="#999999" align="center" |Importation de la bibliothèque
| valign="middle" align="left" |#include <ESP8266WebServer.h>     // Pour le D1 Mini, ou ...
+
| valign="middle" align="left" |#include <ESP8266WiFi.h> // Pour le Wemos D1 Mini, ou ...
 
+
<nowiki>#</nowiki>include <WiFi.h>                       // ... Pour l'ESP32
<nowiki>#</nowiki>include <WebServer.h>   // ... pour l'ESP32
+
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Création de l’objet
 +
| valign="middle" align="left" |
 
|-
 
|-
| valign="middle" bgcolor="#999999" align="center" |Création du serveur web (sur le port 80)
+
| rowspan="3" valign="middle" height="17" bgcolor="#999999" align="center" |Dans le Setup
| valign="middle" align="left" |ESP8266WebServer myWeb(80);           // Pour le D1 Mini , ou ...
+
| valign="middle" bgcolor="#999999" align="center" |Démarrage de la connexion
 
+
| valign="middle" align="left" |WiFi.begin(SSID, SecKey) ; // Où SSID est le nom du point d'accès Wi-Fi, et SecKey son mot de passe
// WebServer myWeb(80) ;              // ... pour l'ESP32
 
 
|-
 
|-
| rowspan="2" valign="middle" height="17" bgcolor="#999999" align="center" |Dans le Setup
+
| valign="middle" bgcolor="#999999" align="center" |Test de la connexion
| valign="middle" bgcolor="#999999" align="center" |Déclaration de la fonction qui s'occupera
+
| valign="middle" align="left" |if (WiFi.Status() == WL_CONNECTED) { (...) }
de la génération de la page web
 
| valign="middle" align="left" |myWeb.on ( "/", runPage01 );
 
 
|-
 
|-
| valign="middle" bgcolor="#999999" align="center" |Démarrage du serveur web
+
| valign="middle" bgcolor="#999999" align="center" |Récupération de l'adresse IP
|myWeb.begin();
+
|WiFi.localIP() ;
 
|-
 
|-
| valign="middle" height="41" bgcolor="#999999" align="center" |Dans le Loop
+
| valign="middle" bgcolor="#999999" align="center" |Dans le Loop
| valign="middle" bgcolor="#999999" align="center" |Traitement des requêtes web
+
| valign="middle" bgcolor="#999999" align="center" |Utilisation
| valign="middle" align="left" |myWeb.handleClient();
+
|Le test de la connexion, et la récupération de l'adresse IP peuvent aussi être utilisés dans le loop().
|}<br />'''Code Minimal 4a : affichage d'un paramètre de la carte.'''
+
|}
 
 
 
 
La page web hébergée sur notre carte doit être codée en HTML. La page peut être assez évoluée, intégrer du code javascript, être formatée en mode CSS, etc ... Dans l'exemple "minimal" ci-dessous, on se contente d'une page HTML basique.
 
 
 
''Une fois le code téléversé sur votre carte, pour voir le résultat, connectez-vous (avec un ordinateur ou un mobile) sur le point d'accès "AP_PetitDeb" (mot de passe "PSWD1234"), puis lancez votre navigateur préféré et tapez 192.168.4.1.''
 
<br />{{#annotatedImageLight:Fichier:Code minimal des fonctions reseau Ecran-Etape-4.png|0=785px|hash=|jsondata=|mediaClass=Image|type=frameless|alt=Ecran-Etape-4A|align=center|src=https://www.wikidebrouillard.org/images/9/98/Code_minimal_des_fonctions_reseau_Ecran-Etape-4.png|href=./Fichier:Code minimal des fonctions reseau Ecran-Etape-4.png|resource=./Fichier:Code minimal des fonctions reseau Ecran-Etape-4.png|caption=Ecran-Etape-4A|size=785px}}
 
 
 
  
  
 +
Pour connaître toutes les autres possibilités de ces bibliothèques, voir leurs références, respectivement [https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WiFi ici] (D1 Mini) et [https://github.com/espressif/arduino-esp32/tree/master/libraries/WiFi ici] (ESP32).
 
<br /><syntaxhighlight lang="arduino" line="1">
 
<br /><syntaxhighlight lang="arduino" line="1">
 
/* =========================================================================================================
 
/* =========================================================================================================
 
  *  
 
  *  
  *                             CODE MINIMAL RESEAU - ETAPE 4 : site WEB
+
  *                         CODE MINIMAL RESEAU - ETAPE 1 : connexion basique au Wi-Fi
*         
+
  *  
*              CAS A : Page HTML Basique, consultation d'une variable de la carte
 
  *        
 
 
  * ---------------------------------------------------------------------------------------------------------
 
  * ---------------------------------------------------------------------------------------------------------
 
  * Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 
  * Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 
  * ========================================================================================================= */
 
  * ========================================================================================================= */
  
// Bibliothèques WiFi et WebServer: ATTENTION, choisir celles correspondant à votre matériel.  
+
// Bibliothèques WiFi : UNE SEULE EST NECESSAIRE, choisir celle correspondant à votre matériel.  
 
// ATTENTION AUX MAJUSCULES & MINUSCULES ! Sinon d'autres bibliothèques, plus ou moins valides, seraient utilisées.
 
// ATTENTION AUX MAJUSCULES & MINUSCULES ! Sinon d'autres bibliothèques, plus ou moins valides, seraient utilisées.
  
#include <ESP8266WiFi.h>               // A utiliser pour le D1 Mini
+
#include <ESP8266WiFi.h>         // A utiliser pour le D1 Mini  
#include <ESP8266WebServer.h>          // A utiliser pour le D1 Mini
+
//#include <WiFi.h>               // A utiliser pour l'ESP32
//#include <WiFi.h>                     // A utiliser pour l'ESP32
 
//#include <WebServer.h>                // A utiliser pour l'ESP32
 
  
const char* mySSID = "AP_PetitDeb" ;    // On va utiliser le mode "Access Point" pour cet exemple
+
// Définition du point d'accès Wi-Fi et de son mot de passe ("clé de sécurité")
const char* mySecKey = "PSWD1234" ;
+
// A REMPLACER PAR LES VERITABLES VALEURS CORRESPONDANT A VOTRE EMPLACEMENT
 
+
       
// Déclaration de notre serveur web interne.
+
const char* mySSID   = "MA_BOX_INTERNET";
 
+
const char* mySecKey = "MA_CLE_DE_SECURITE";
ESP8266WebServer myWeb(80);          // A utiliser pour le D1 Mini
 
// WebServer myWeb(80) ;              // A utiliser pour l'ESP32
 
 
 
/* --------------------------------------------------------------------------------------------------------
 
*  webPage01 : formattage HTML de la page web.
 
*  - En fait cette fonction doit rendre une chaîne (String) contenant l'intégralité du code HTML qui sera
 
*    envoyé au navigateur de l'utilisateur.
 
*  - On peut y insérer des informations de la carte, comme ici par exemple, le nom du Point d'accès (mySSID).
 
*    Dans une véritable application, ça pourrait être la valeur d'un capteur de température.
 
* - Pour pouvoir débugger facilement le code HTML/Javascript sur un browser (par exemple Firefox / Outils
 
*  supplémentaires / Outils de développement Web), il est préférable d'indenter le code à l'intérieur de la chaîne
 
*  de caractère, et de mettre des sauts de ligne ("\n") à la fin de chaque ligne de code HTML.
 
*  -------------------------------------------------------------------------------------------------------- */
 
String webPage01() {
 
 
 
    String p;
 
    p =  "<html lang=fr-FR><head><title>ETAPE 4 (Mini-Web)</title></head>\n" ;
 
    p += "<body>\n" ;
 
    p += "    <br><br><br><center><font size=\"12\">\n" ;
 
    p += "    Bonjour, je suis " + String(mySSID) + "...\n" ;          // C'est ici qu'on place l'information SSID.
 
    p += "   <br>... tr&egrave;s heureux de te rencontrer !\n" ;
 
    p += "    </center>\n" ;
 
    p += "</body></html>\n" ;
 
    return p;
 
 
 
}
 
 
 
/* --------------------------------------------------------------------------------------------------------
 
*  runPage01 : gestion de la page web
 
*  -------------------------------------------------------------------------------------------------------- */
 
void runPage01() {
 
 
 
    // Affichage de la page Web.
 
    myWeb.send ( 200, "text/html", webPage01() );
 
}
 
  
 
/* --------------------------------------------------------------------------------------------------------
 
/* --------------------------------------------------------------------------------------------------------
Ligne 159 : Ligne 111 :
 
     delay(100) ;
 
     delay(100) ;
 
     Serial.println();  
 
     Serial.println();  
     Serial.println("----------------------") ;
+
     Serial.println("----------------------------------") ;
     Serial.println("Exemple de serveur WEB") ;
+
     Serial.println("Exemple de connexion Wi-Fi basique") ;
     Serial.println("----------------------") ;
+
     Serial.println("----------------------------------") ;
  
     // Déclaration du mode "Point d'Accès". On s'arrête là si échec.
+
     // Démarrage de la tentative de connexion, avec le nom du point d'accès Wi-Fi et son mot de passe
  
     Serial.println("Déclaration Mode AP, SSID \"" + String(mySSID) + "\"") ;
+
     WiFi.begin(mySSID, mySecKey) ;
    if (!WiFi.softAP(mySSID,mySecKey)) {
 
        Serial.println("Mode AP KO ... :-(") ;
 
        return ;
 
    }
 
  
     // Affichage de l'adresse IP principale du Point d'Accès.
+
     // Attente de la connexion pendant 10 secondes (20 x 500 ms)
  
     Serial.print("Mode AP OK, IP Address : ") ;
+
     Serial.print("Connexion à "); Serial.print(mySSID) ; Serial.print(" ") ;
     Serial.println(WiFi.softAPIP()) ;
+
     int tryNumber = 1 ;
 +
    while (WiFi.status() != WL_CONNECTED)
 +
    {
 +
        delay(500);
 +
        Serial.print(".");
 +
        if (++tryNumber > 20) {
 +
            Serial.println() ; Serial.println("Pas de connexion, abandon") ;
 +
            return ;
 +
        }
 +
    }
  
     // Définition des points d'entrée du serveur Web (un seul ici), et démarrage du serveur.
+
     // La connexion a réussi ! On affiche l'adresse IP obtenue.
 
+
   
     myWeb.on ( "/", runPage01 );
+
     Serial.println(); Serial.print("Connecté ! Adresse IP : ");
     myWeb.begin();
+
     Serial.println(WiFi.localIP());
 
      
 
      
 
}
 
}
Ligne 187 : Ligne 144 :
 
  *  ------------------------------------------------------------------------------------------------------------- */
 
  *  ------------------------------------------------------------------------------------------------------------- */
 
void loop() {  
 
void loop() {  
    
+
   /* On ne fait rien de particulier sur cet exemple */
    // Traitement des requêtes web.
 
    myWeb.handleClient();
 
     
 
 
}
 
}
  
</syntaxhighlight><br />
+
 
 +
 
 +
</syntaxhighlight>
 
}}
 
}}
 
{{Tuto Step
 
{{Tuto Step
|Step_Title=Mise en place d'un serveur Web (modification)
+
|Step_Title=Oui, mais si je dois changer de borne Wi-Fi ?
|Step_Content=<br />'''Code Minimal 4b : actionner la carte via l'interface web'''
+
|Step_Content=Dans l'étape précédente on supposait que le Wi-Fi était permanent (cas où les cartes ne quittent pas notre labo, par exemple). Mais si on souhaite faire voyager nos cartes (démos dans des écoles, etc ...), on a trois possibilités :                                               
 +
 
 +
*On vient avec son environnement de développement Arduino, on met à jour le code Arduino avec les nouvelles informations Wi-Fi, et on téléverse le code sur toutes nos cartes ... un peu laborieux, n'est-il pas ?
 +
*ou bien, on dispose en permanence d'un téléphone mobile avec forfait données (4G ou +), et on utilise systématiquement celui-ci en mode "Point d'accès mobile". C'est donc ce téléphone qui sera vu en permanence comme le point d'accès Wi-Fi préféré de votre carte (D1 mini ou ESP32), quelque soit l'endroit où vous vous trouvez. Pas toujours possible ...
 +
*et sinon, on utilise la bibliothèque "WiFiManager", qui nous simplifie grandement la tâche !
 +
 
 +
En effet,  cette bibliothèque permet d'enregistrer de façon pérenne (même si on débranche la carte) le dernier Point d'Accès Wi-Fi sur lequel la carte a réussi à se connecter. La bibliothèque va d'abord chercher à se connecter sur ce Point d'Accès "connu". Et si ça ne fonctionne pas (on a changé de lieu, par exemple), alors elle va se positionner elle-même en mode "Point d'Accès", et va proposer sur l'adresse 192.168.4.1 une interface web permettant d'afficher les Points d'Accès Wi-Fi environnants, et d'en sélectionner un. Le nouveau Point d'Accès choisi sera sauvegardé pour les fois suivantes.
 +
 
 +
 
 +
<u>Interface web du WiFi Manager :</u>
 +
 
 +
#Avec un téléphone ou ordinateur, connectez-vous au point d'accès "AP_PetitDeb"  et tapez le mot de passe associé. Il y aura probablement un message indiquant qu'Internet n'est pas disponible, c'est normal, ne pas en tenir compte ;
 +
#Sur votre navigateur préféré, tapez "192.168.4.1", ce qui fera apparaître l'interface web générée par la bibliothèque WiFiManager. Cliquez sur "Configure WiFi", vous arrivez sur le choix du point d'accès.
 +
#Choisissez alors votre point d'accès Wi-Fi préféré, son nom sera reporté dans la case "SSID", complétez avec le mot de passe dans la case "Password", et cliquez sur Save
 +
 
 +
<br />{{#annotatedImageLight:Fichier:Code minimal des fonctions r seau WiKi WiFiManager S.png|0=800px|hash=|jsondata=|mediaClass=Image|type=frameless|alt=Image permettant de comprendre l'utilisation de la bibliothèque WiFiManager|align=center|src=https://www.wikidebrouillard.org/images/f/f8/Code_minimal_des_fonctions_r_seau_WiKi_WiFiManager_S.png|href=./Fichier:Code minimal des fonctions r seau WiKi WiFiManager S.png|resource=./Fichier:Code minimal des fonctions r seau WiKi WiFiManager S.png|caption=Utilisation du WiFiManager|size=800px}}
 +
 
 +
 
 +
'''Bibliothèque'''
 +
 
 +
<br>
 +
La bibliothèque doit être rajoutée à l'environnement Arduino dans le gestionnaire de Bibliothèques (voir [https://www.wikidebrouillard.org/wiki/Importer_des_biblioth%C3%A8ques_dans_l%27interface_Arduino ici] pour le mode d'emploi) :
  
 +
<br />{{#annotatedImageLight:Fichier:Code minimal des fonctions reseau Image.png|0=756px|hash=|jsondata=|mediaClass=Image|type=frameless|alt=Image de la Bibliothèque WiFiManager dans le Gestionnaire de Bibliothèques Arduino|align=left|src=https://www.wikidebrouillard.org/images/5/53/Code_minimal_des_fonctions_reseau_Image.png|href=./Fichier:Code minimal des fonctions reseau Image.png|resource=./Fichier:Code minimal des fonctions reseau Image.png|caption=Bibliothèque WiFiManager|size=756px}}
  
Dans l'exemple précédent, on se contente de récupérer un paramètre de la carte. Mais il est également possible de modifier un paramètre (par exemple l'état d'une des sorties de la carte, et donc d'agir sur un de ses périphériques : led, moteur, ...).
 
  
 +
{| class="wikitable" cellspacing="0" border="0"
 +
| height="17" bgcolor="#999999" align="left" |
 +
| valign="middle" bgcolor="#999999" align="center" |
 +
| bgcolor="#999999" align="center" |Bibliothèque Wifi Manager
 +
|-
 +
| rowspan="2" valign="middle" height="49" bgcolor="#999999" align="center" |Avant le Setup
 +
| valign="middle" bgcolor="#999999" align="center" |Importation de la bibliothèque
 +
| valign="middle" align="left" |#include <WiFiManager.h>
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Création de l’objet
 +
| valign="middle" align="left" |WiFiManager myWiFiManager;
 +
|-
 +
| rowspan="3" valign="middle" height="17" bgcolor="#999999" align="center" |Dans le Setup
 +
| valign="middle" bgcolor="#999999" align="center" |Déclaration du mode bloquant
 +
| valign="middle" align="left" |myWiFiManager.setConfigPortalBlocking(true);  // ... ou  rien (mode par défaut)
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Déclaration du mode non bloquant
 +
|myWiFiManager.setConfigPortalBlocking(false);
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Tentative de connexion à un PA Wi-Fi
 +
|if (myWiFiManager.autoConnect(Nom_AP, MotDePasse_AP)) { (... connexion OK !)  }
 +
|-
 +
| valign="middle" height="41" bgcolor="#999999" align="center" |Dans le Loop
 +
| valign="middle" bgcolor="#999999" align="center" |Activation régulière pour le mode non bloquant
 +
| valign="middle" align="left" |myWiFiManager.process() ;  // Obligatoire en mode non bloquant
 +
|}
  
Le code ci-dessous présente donc un code "moins minimal", permettant d'afficher et de modifier une variable du programme Arduino. Dans une application réelle, il suffira alors d'utiliser cette variable pour afficher et agir sur sur l'état d'une des entrées/sorties de la carte.
+
Pour connaître toutes les autres possibilités de cette bibliothèque, voir sa référence, [https://jp112sdl.github.io/WiFiManager/ ici].
  
La partie HTML  est un peu plus complexe, car on va y définir une fonction javascript, qui permettra de faire passer des informations du navigateur au serveur web hébergé. Voir les explications complémentaires dans le code lui-même. 
 
  
{{#annotatedImageLight:Fichier:Code minimal des fonctions reseau Ecran-Etape4B.png|0=790px|hash=|jsondata=|mediaClass=Image|type=frameless|alt=Ecran-Etape4B|align=center|src=https://www.wikidebrouillard.org/images/2/27/Code_minimal_des_fonctions_reseau_Ecran-Etape4B.png|href=./Fichier:Code minimal des fonctions reseau Ecran-Etape4B.png|resource=./Fichier:Code minimal des fonctions reseau Ecran-Etape4B.png|caption=Ecran-Etape4B|size=790px}}   
 
  
<syntaxhighlight lang="arduino" line="1">
+
'''Code minimal  : mode bloquant (par défaut)'''
 +
<br /><syntaxhighlight lang="arduino" line="1">
 
/* =========================================================================================================
 
/* =========================================================================================================
 
  *  
 
  *  
  *                             CODE MINIMAL RESEAU - ETAPE 4 : site WEB
+
  *         CODE MINIMAL RESEAU - ETAPE 2 : Connexion à un point d'accès choisi par l'utilisateur
*         
 
*              CAS B : Page HTML plus évoluéee, et modification d'une variable de la carte
 
 
  *           
 
  *           
 +
*          CAS A : MODE BLOQUANT - On attend tant que l'utilisateur n'a pas choisi son Point d'Accès Wi-Fi
 +
*
 
  * ---------------------------------------------------------------------------------------------------------
 
  * ---------------------------------------------------------------------------------------------------------
 
  * Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 
  * Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 
  * ========================================================================================================= */
 
  * ========================================================================================================= */
  
// Bibliothèques WiFi et WebServer: ATTENTION, choisir celles correspondant à votre matériel.  
+
// Bibliothèque WiFiManager. Un seule bibibliothèque suffit ici, quelque soit la carte (ESP32 ou Wemos D1 Mini)
// ATTENTION AUX MAJUSCULES & MINUSCULES ! Sinon d'autres bibliothèques, plus ou moins valides, seraient utilisées.
+
 
 +
#include <WiFiManager.h>          // Gestion de la connexion Wi-Fi (recherche de points d'accès) 
 +
WiFiManager myWiFiManager;        // Création de mon instance de WiFiManager.
 +
 
 +
// Définition de la carte lorsqu'elle se positionne en mode "Point d'Accès".
 +
       
 +
const char* mySSID  = "AP_PetitDeb" ;      // Nom du point d'accès
 +
const char* mySecKey = "PSWD1234" ;        // Mot de passe, 8 caractères au minimum
 +
 
 +
/* --------------------------------------------------------------------------------------------------------
 +
*  SETUP : Initialisation
 +
*  -------------------------------------------------------------------------------------------------------- */
 +
void setup() {
 +
 
 +
    // Initialisation de la liaison série, affichage 1er message
 +
 
 +
    Serial.begin(115200);
 +
    delay(100) ;
 +
    Serial.println();
 +
    Serial.println("----------------------------------") ;
 +
    Serial.println("Exemple de connexion Wi-Fi évoluée") ;
 +
    Serial.println("----------------------------------") ;
 +
 
 +
    // Tentative de connexion au Wi-Fi. Si la carte n'a pas réussi  se connecter au dernier Point d'Accès connu,
 +
    // alors elle va se positionner en mode Point d'Accès, demandera sur l'adresse 192.168.4.1 quel nouveau
 +
    // Point d'Accès choisir. Par défaut, on restera bloqué tant que l'utilisateur n'aura pas fait de choix.
 +
   
 +
    Serial.println("Connexion au Wi-Fi ...");
 +
    if (myWiFiManager.autoConnect(mySSID, mySecKey)) {
 +
     
 +
        // Wi-Fi en mode standard ok --> On affiche l'adresse IP obtenue.
 +
 
 +
        Serial.println(); Serial.print("Connecté ! Adresse IP : ");
 +
        Serial.println(WiFi.localIP());
 +
       
 +
    }
 +
    else {
 +
        Serial.println("Connexion Wi-Fi KO :-(");   
 +
    }
 +
 
 +
}
 +
 
 +
/* --------------------------------------------------------------------------------------------------------------
 +
*  LOOP : fonction appelée régulièrement par le système
 +
*  ------------------------------------------------------------------------------------------------------------- */
 +
void loop() {
 +
  /* On ne fait rien de particulier sur cet exemple */
 +
}
 +
</syntaxhighlight>
 +
 
  
#include <ESP8266WiFi.h>                // A utiliser pour le D1 Mini
 
#include <ESP8266WebServer.h>          // A utiliser pour le D1 Mini
 
//#include <WiFi.h>                    // A utiliser pour l'ESP32
 
//#include <WebServer.h>                // A utiliser pour l'ESP32
 
  
const char* mySSID = "AP_PetitDeb" ;    // On va utiliser le mode "Access Point" pour cet exemple
+
'''Code minimal  : mode non bloquant'''<br /><syntaxhighlight lang="arduino" line="1">
const char* mySecKey = "PSWD1234" ;
+
/* =========================================================================================================
 +
*
 +
*          CODE MINIMAL RESEAU - ETAPE 2 : Connexion à un point d'accès choisi par l'utilisateur
 +
*         
 +
*          CAS B : MODE NON BLOQUANT - On peut faire autre chose en attendant que l'utilisateur ait choisi
 +
*                  son Point d'Accès Wi-Fi
 +
*
 +
* ---------------------------------------------------------------------------------------------------------
 +
* Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 +
* ========================================================================================================= */
 +
 
 +
// Bibliothèque WiFiManager. Un seule bibibliothèque suffit ici, quelque soit la carte (ESP32 ou Wemos D1 Mini)
  
// Déclaration de notre serveur web interne, qui écoutera sur le port 80.
+
#include <WiFiManager.h>          // Gestion de la connexion Wi-Fi (recherche de points d'accès) 
 +
WiFiManager myWiFiManager;        // Création de mon instance de WiFiManager.
  
ESP8266WebServer myWeb(80);          // A utiliser pour le D1 Mini
+
// Définition de la carte lorsqu'elle se positionne en mode "Point d'Accès".
// WebServer myWeb(80) ;             // A utiliser pour l'ESP32
+
       
 +
const char* mySSID  = "AP_PetitDeb" ;      // Nom du point d'accès
 +
const char* mySecKey = "PSWD1234" ;         // Mot de passe, 8 caractères au minimum
  
// Variable qui sera affichée et modifiée depuis notre interface web.
+
// Pour les besoins de l'exemple (traces)
  
int myValue = 0 ;
+
bool IAmNotConnected = true ;
  
 
/* --------------------------------------------------------------------------------------------------------
 
/* --------------------------------------------------------------------------------------------------------
  *  webPage01 : formattage HTML de la page web.
+
  *  SETUP : Initialisation
*  - En fait cette fonction doit rendre une chaîne (String) contenant l'intégralité du code HTML qui sera
 
*    envoyé au navigateur de l'utilisateur.
 
*  - Comme dans l'exemple précédent (Exemple_4A), on insère dans cette chaîne une information de la carte,
 
*    ici la valeur de notre variable 'my value'. Mais on va aussi ajouter des boutons permettant de modifier
 
*    cette valeur sur la carte.
 
* - Idem Exemple_4A : pour pouvoir débugger facilement le code HTML/Javascript sur un browser (par exemple
 
*  Firefox / Outils supplémentaires / Outils de développement Web), il est préférable d'indenter le code à
 
*  l'intérieur de la chaîne de caractère, et de mettre des sauts de ligne ("\n") à la fin de chaque ligne
 
*  de code HTML.
 
 
  *  -------------------------------------------------------------------------------------------------------- */
 
  *  -------------------------------------------------------------------------------------------------------- */
String webPage01() {
+
void setup() {
 +
 
 +
    // Initialisation de la liaison série, affichage 1er message
  
     String p;
+
     Serial.begin(115200);
 +
    delay(100) ;
 +
    Serial.println();
 +
    Serial.println("----------------------------------") ;
 +
    Serial.println("Exemple de connexion Wi-Fi évoluée") ;
 +
    Serial.println("----------------------------------") ;
  
     // Début de construction de la page web (entête, titre, paramètres)
+
     // Déclaration du mode "non bloquant".
 +
    // Bonus : suppression des traces fournies par le WiFiManager (il est très bavard)
 
      
 
      
     p =  "<html lang=fr-FR><head>\n" ;
+
    myWiFiManager.setConfigPortalBlocking(false);
     p += "<title>ETAPE 4B</title>\n" ;              // Titre de la page
+
    myWiFiManager.setDebugOutput(false);   
     p += "   <meta charset='UTF-8'>\n" ;           // Codage des caractères, UTF-8 est fortement recommandé
+
 
    p += "</head>\n" ;
+
     // Tentative de connexion au Wi-Fi. Si la carte n'a pas réussi  se connecter au dernier Point d'Accès connu,
 +
    // alors elle va se positionner en mode Point d'Accès, demandera sur l'adresse 192.168.4.1 quel nouveau
 +
     // Point d'Accès choisir. On ne reste pas bloqué, la suite du setup() va se dérouler, et le WiFiManager
 +
    // traitera les demandes ultérieurement, dans la fonction loop().
 +
   
 +
     Serial.println("Connexion au Wi-Fi ...");
 +
    if (myWiFiManager.autoConnect(mySSID, mySecKey)) {
 +
     
 +
        // Wi-Fi en mode standard ok --> On affiche l'adresse IP obtenue.
  
    // Définitions CSS (), qui permettent de décrire le format des objets sur la page web.  
+
        Serial.println(); Serial.print("Connecté ! Adresse IP : ");
    // Si vous voulez tout savoir sur CSS, on peut trouver une bonne introduction ici : https://developer.mozilla.org/fr/docs/Learn/CSS
+
        Serial.println(WiFi.localIP());
    // et une référence complète ici : https://developer.mozilla.org/fr/docs/Web/CSS/Reference
+
       
   
+
     }
    p  += "<style>\n" ;
+
     else {
    p += "    body { background-color: #000088; color: white; font-size: 25px; }\n";          // couleur fond écran (bleu foncé) et textes (blanc).
 
     p += "    input { width:25%; margin:10px; font-size:20px; border-radius: 5px; }\n";        // format des boutons (taille, coins arrondis, ...).
 
     p += "</style>\n" ;
 
  
    // Début du code javascript. Javascript est le langage utilisé au niveau des navigateurs web (Firefox, Microsoft Edge, Google Chrome, ...)
+
        // Wi-Fi standard KO, on est passé en mode AP, qui sera traité dans le loop().
    // pour introduire un peu de dynamisme et d'intelligence dans les pages web. Cela peut permettre, par exemple, de réaliser une action
+
       
    // locale et immediate, telle que l'agrandissement d'une image, le changement d'un texte, etc ... sans avoir à réinterroger le serveur web.
+
        Serial.println("Pas de point Wi-Fi connu, passage en mode AP (identifiant \"" + String(mySSID) + "\")");   
    //
+
     }
    // Dans notre cas, la fonction 'addition(val)' ci-dessous va ajouter le paramètres 'val' à l'adresse du serveur web, et va ensuite appeler
+
 
    // la page web de notre carte, avec ce paramètre. Par exemple, si l'adresse du site web de notre carte est 192.168.4.1, l'appel à la fonction
+
}
    // addition(-1) va demander la page '192.168.4.1?add=-1'. Le paramètre 'add' de valeur '-1' sera alors exploité par la carte dans la
 
     // fonction runPage01() définie plus bas.
 
    //
 
    // Dans un exemple réel on pourrait bien sûr définir plusieurs paramètres, du style '192.168.4.1?voyant=vert&servo1=90&servo2=0'
 
  
    p += "<script>\n" ;
+
/* --------------------------------------------------------------------------------------------------------------
    p += "function addition(val) {\n";                                           
+
*  LOOP : fonction appelée régulièrement par le système
    p +=  "    window.location = window.location.pathname + '?add=' + val ;\n";   
+
  *  ------------------------------------------------------------------------------------------------------------- */
    p +=  "}\n";
+
void loop() {  
    p += "</script>\n" ;
+
 
 +
  // Obligatoire en mode non bloquant, pour que le WiFiManager continue sa tâche.
  
    // Corps de la page web : affichage de la valeur récupérée sur la carte, et de deux boutons 'ajouter 1' et 'enlever 1'.
+
  myWiFiManager.process() ;
    // La fonction addition() définie dans le code javascript ci-dessus, sera appelée lorsqu'on appuie sur ces boutons.
 
   
 
    p += "<body><center>\n" ;
 
    p += "    </br></br>Valeur actuelle : " + String(myValue) + "</br></br>\n";               
 
    p +=  "  <form>\n"; 
 
    p +=  "        <input type='submit' value='ajouter 1' formaction='javascript:addition(1);' formmethod=post>\n" ;
 
    p +=  "        <input type='submit' value='enlever 1' formaction='javascript:addition(-1);' formmethod=post>\n" ;
 
    p +=  "  </form>\n";
 
    p += "</center></body></html>" ;
 
  
    // ça y est, la page web est complètement constituée !
+
  // Test pour savoir si on est enfin connecté - on ne l'affiche qu'une fois pour limiter les traces
  
    return p;
+
  if (IAmNotConnected) {
 +
      if (WiFi.status() == WL_CONNECTED) {
 +
          Serial.print("Connecté au point d'accès " + String(WiFi.SSID()) + ", Adresse IP : ") ;
 +
          Serial.println(WiFi.localIP());
 +
          IAmNotConnected = false ;
 +
      }
 +
  }
 
    
 
    
 
}
 
}
 +
</syntaxhighlight><br />
 +
}}
 +
{{Tuto Step
 +
|Step_Title=Et si je veux rester en mode AP (Access Point) Wi-Fi ?
 +
|Step_Content=Il existe des cas particuliers où une application n'a en fait pas besoin du Wi-Fi pour aller envoyer ou recevoir des données d'Internet, mais souhaite être juste être considérée comme un Point d'Accès Wi-Fi.  Ce mode est suffisant si l'on souhaite commander notre carte depuis un système proche. Par exemple pour commander un système domotique en mode web depuis notre mobile ... petit "spoiler" de l'épisode 2 :-)   
 +
 +
 +
Pour utiliser le mode "Point d'Accès", on garde les librairies de base, vues à l'étape 1, en utilisant d'autres fonctions. <br />
 +
{| class="wikitable" cellspacing="0" border="0"
 +
| height="17" bgcolor="#999999" align="left" |
 +
| valign="middle" bgcolor="#999999" align="center" |
 +
| bgcolor="#999999" align="center" |Mode Point d'Accès
 +
|-
 +
| rowspan="2" valign="middle" height="49" bgcolor="#999999" align="center" |Avant le Setup
 +
| valign="middle" bgcolor="#999999" align="center" |Importation de la bibliothèque
 +
| valign="middle" align="left" |#include <ESP8266WiFi.h> // Pour le Wemos D1 Mini, ou ...
 +
<nowiki>#</nowiki>include <WiFi.h>                      // ... Pour l'ESP32
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Création de l’objet
 +
| valign="middle" align="left" |
 +
|-
 +
| rowspan="3" valign="middle" height="17" bgcolor="#999999" align="center" |Dans le Setup
 +
| valign="middle" bgcolor="#999999" align="center" |Lancement du mode AP
 +
avec mot de passe
 +
| valign="middle" align="left" |if (WiFi.softAP(SSID, SecKey)) { (... succès ... } ; // Où SSID est le nom du point d'accès Wi-Fi, et SecKey son mot de passe
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Lancement du mode AP
 +
sans mot de passe<br />
 +
| valign="middle" align="left" |if (WiFi.softAP(SSID)) { (... succès ... } ; // Où SSID est le nom du point d'accès Wi-Fi
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Récupération de l'adresse IP de base
 +
|WiFi.softAPIP() ;
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Dans le Loop
 +
| valign="middle" bgcolor="#999999" align="center" |Utilisation
 +
|La récupération de l'adresse IP peut aussi être utilisée dans le loop().
 +
|}
 +
 +
 +
Pour connaître toutes les autres possibilités de ces bibliothèques, voir leurs références, respectivement [https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WiFi ici] (D1 Mini) et [https://github.com/espressif/arduino-esp32/tree/master/libraries/WiFi ici] (ESP32).
 +
<br /><syntaxhighlight lang="arduino" line="1">
 +
/* =========================================================================================================
 +
*
 +
*          CODE MINIMAL RESEAU - ETAPE 3 : Configuration en mode Point d'Accès
 +
*         
 +
* ---------------------------------------------------------------------------------------------------------
 +
* Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 +
* ========================================================================================================= */
  
/* --------------------------------------------------------------------------------------------------------
+
// Bibliothèques WiFi : UNE SEULE EST NECESSAIRE, choisir celle correspondant à votre matériel.
*  runPage01 : gestion de la page web
+
// ATTENTION AUX MAJUSCULES & MINUSCULES ! Sinon d'autres bibliothèques, plus ou moins valides, seraient utilisées.
*  -------------------------------------------------------------------------------------------------------- */
 
void runPage01() {
 
  
    // Si la page a un paramètre 'add', alors on récupère sa valeur, et on l'ajoute à notre variable 'myValue'.
+
#include <ESP8266WiFi.h>          // A utiliser pour le D1 Mini
 
+
//#include <WiFi.h>              // A utiliser pour l'ESP32
    if ( myWeb.hasArg("add") ) {
 
        Serial.println("Traitement pge web, arg = '" + String(myWeb.arg("add")) + "'") ;
 
        int myArg = myWeb.arg("add").toInt() ;
 
        myValue = myValue + myArg ;
 
        Serial.println("Traitement page web, arg = '" + String(myWeb.arg("add")) + "' --> Nouvelle valeur : " + String(myValue)) ;
 
    }
 
  
    // On renvoie la page Web.
+
const char* mySSID = "AP_PetitDeb" ;
    myWeb.send ( 200, "text/html", webPage01() );  
+
const char* mySecKey = "PSWD1234" ;
}
 
  
 
/* --------------------------------------------------------------------------------------------------------
 
/* --------------------------------------------------------------------------------------------------------
Ligne 334 : Ligne 432 :
 
     delay(100) ;
 
     delay(100) ;
 
     Serial.println();  
 
     Serial.println();  
     Serial.println("----------------------") ;
+
     Serial.println("-----------------------------") ;
     Serial.println("Exemple de serveur WEB") ;
+
     Serial.println("Exemple en mode Point d'Accès") ;
     Serial.println("----------------------") ;
+
     Serial.println("-----------------------------") ;
  
     // Déclaration du mode "Point d'Accès". On s'arrête là si échec.
+
     // Déclaration du mode "Point d'Accès"
  
 
     Serial.println("Déclaration Mode AP, SSID \"" + String(mySSID) + "\"") ;
 
     Serial.println("Déclaration Mode AP, SSID \"" + String(mySSID) + "\"") ;
     if (!WiFi.softAP(mySSID,mySecKey)) {
+
 
 +
     if (WiFi.softAP(mySSID,mySecKey)) {
 +
 
 +
        // Voilà, nous somme en mode "Point d'Accès", notre carte sera visible des systèmes Wi-Fi environnants,
 +
        // au même titre que les autres box Wi-Fi du voisinage. Par contre, ça s'arrête là, et si une fois
 +
        // connecté sur ce Point d'Accès "AP_PetitDeb" on cherche à joindre notre carte sur l'adresse IP obtenue
 +
        // ci-dessous par WiFi.softAPIP(), on aura droit à un beau "ERR_CONNECTION_REFUSED". Normal, on n'a pas
 +
        // précisé dans l'application ce qu'il faut faire : voir exemple suivant Code_Minimal_Etape4.
 +
       
 +
        Serial.print("Mode AP OK, IP Address : ") ;
 +
        Serial.println(WiFi.softAPIP()) ;
 +
    }
 +
    else {
 
         Serial.println("Mode AP KO ... :-(") ;
 
         Serial.println("Mode AP KO ... :-(") ;
        return ;
 
 
     }
 
     }
 
    // Affichage de l'adresse IP principale du Point d'Accès.
 
 
    Serial.print("Mode AP OK, IP Address : ") ;
 
    Serial.println(WiFi.softAPIP()) ;
 
 
    // Définition des points d'entrée du serveur Web (un seul ici),
 
    // et démarrage du serveur.
 
 
 
    myWeb.on ( "/", runPage01 );
 
    myWeb.begin();
 
 
      
 
      
 
}
 
}
Ligne 364 : Ligne 462 :
 
void loop() {  
 
void loop() {  
 
    
 
    
     // Traitement des requêtes web.
+
     // Rien de spécial dans cet exemple
    myWeb.handleClient();
 
 
        
 
        
 
}
 
}
Ligne 372 : Ligne 469 :
 
{{Tuto Step
 
{{Tuto Step
 
|Step_Title=La suite, la suite ! ... :-)
 
|Step_Title=La suite, la suite ! ... :-)
|Step_Content=*'''Episode 3 :''' [https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(3)_Mon_D1_Mini_r%C3%A9cup%C3%A8re_des_donn%C3%A9es_sur_Internet_(Json) Mon Wemos D1 mini récupère des donnée sur Internet  (Json)].
+
|Step_Content=*'''Episode 2 :''' [https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(2)_H%C3%A9berger_un_site_web_sur_mon_Wemos_D1_mini Héberger un site web sur mon Wemos D1 mini].
 +
*'''Episode 3 :''' [https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(3)_Mon_D1_Mini_r%C3%A9cup%C3%A8re_des_donn%C3%A9es_sur_Internet_(Json) Mon Wemos D1 mini récupère des donnée sur Internet  (Json)].
 
*'''Episode 4 :''' [https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(4)_Mes_Wemos_D1_Mini_discutent_sur_Internet_avec_MQTT Mon Wemos D1 mini discute sur Internet avec MQTT].
 
*'''Episode 4 :''' [https://www.wikidebrouillard.org/wiki/Code_Minimal_R%C3%A9seau_-_(4)_Mes_Wemos_D1_Mini_discutent_sur_Internet_avec_MQTT Mon Wemos D1 mini discute sur Internet avec MQTT].
  
''Ces épisodes sont indépendants les uns des autres''.
+
''Ces trois épisodes sont indépendants les uns des autres''.
 
}}
 
}}
 
{{Notes}}
 
{{Notes}}
 
{{Tuto Status
 
{{Tuto Status
|Complete=Draft
+
|Complete=Published
 
}}
 
}}

Version du 1 février 2023 à 17:35

Auteur avatarPhilippe Blusseau | Dernière modification 6/02/2023 par Philby

Code minimal des fonctions r seau WiKi Reseau1.png
Utilisation des fonction réseau des cartes compatibles Arduino, possédant une puce Wi-Fi
=== Episode n° 1 : Connecter le Wemos D1 Mini à Internet en Wi-Fi ===
Licence : Attribution (CC-BY)

Introduction

Cette expérience fait partie d'une série de 4 épisodes, présentant différentes façons de bénéficier des capacités de communication des cartes compatibles Arduino possédant une puce Wi-Fi (Wemos D1 mini, ESP32, ...). On suppose (Cf. "Expériences ré-requises" ci-après) que vous avez déjà manipulé une carte Arduino et son environnement de développement. Ces 4 épisodes sont les suivants :

  1. Connecter le Wemos D1 Mini à internet en Wi-Fi --- cette page.
  2. Héberger un site web sur mon Wemos D1 Mini
  3. Mon Wemos D1 Mini récupère des données sur Internet  (format Json).
  4. Mes Wemos D1 Mini discutent sur Internet (protocole MQTT)


Il est nécessaire de commencer par l'épisode 1, par contre les épisodes suivants peuvent être consultés dans n'importe quel ordre.


Dans la même philosophie que les expériences "Code minimal des capteurs pour Arduino" et "Code minimal des actionneurs pour Arduino", nous fournirons ici uniquement le code relatif à nos besoins de connexion, sans mettre au point une quelconque application. Donc, ici, pas besoin de connecter une led ou un capteur, donc pas de schéma de montage : vous branchez simplement votre carte en USB sur votre ordinateur, et les résultats seront visibles en mode texte dans le moniteur série de l'environnement de développement Arduino.


  • Expériences pré-requises
  • Fichiers

Étape 1 - Connexion Wi-Fi en environnement stable

Cette première étape permet à un Wemos D1 mini (ou autre carte compatible Arduino avec puce Wi-Fi) de se connecter au Wi-Fi dans un environnement connu, et qui ne change pas ; C'est-à-dire que l'on à accès à une borne Wi-Fi, on connait son mot de passe - aka "clé de sécurité réseau", et a priori la carte va rester dans cet environnement.


Ces bibliothèques sont pré-chargées dans l'environnement Arduino, il n'est pas nécessaire d'aller les chercher dans le gestionnaire de bibliothèques.

Connexion Wi-Fi de base
Avant le Setup Importation de la bibliothèque #include <ESP8266WiFi.h> // Pour le Wemos D1 Mini, ou ...

#include <WiFi.h> // ... Pour l'ESP32

Création de l’objet
Dans le Setup Démarrage de la connexion WiFi.begin(SSID, SecKey) ; // Où SSID est le nom du point d'accès Wi-Fi, et SecKey son mot de passe
Test de la connexion if (WiFi.Status() == WL_CONNECTED) { (...) }
Récupération de l'adresse IP WiFi.localIP() ;
Dans le Loop Utilisation Le test de la connexion, et la récupération de l'adresse IP peuvent aussi être utilisés dans le loop().


Pour connaître toutes les autres possibilités de ces bibliothèques, voir leurs références, respectivement ici (D1 Mini) et ici (ESP32).


 1 /* =========================================================================================================
 2  * 
 3  *                         CODE MINIMAL RESEAU - ETAPE 1 : connexion basique au Wi-Fi
 4  * 
 5  * ---------------------------------------------------------------------------------------------------------
 6  * Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 7  * ========================================================================================================= */
 8 
 9 // Bibliothèques WiFi : UNE SEULE EST NECESSAIRE, choisir celle correspondant à votre matériel. 
10 // ATTENTION AUX MAJUSCULES & MINUSCULES ! Sinon d'autres bibliothèques, plus ou moins valides, seraient utilisées.
11 
12 #include <ESP8266WiFi.h>          // A utiliser pour le D1 Mini 
13 //#include <WiFi.h>               // A utiliser pour l'ESP32
14 
15 // Définition du point d'accès Wi-Fi et de son mot de passe ("clé de sécurité")
16 // A REMPLACER PAR LES VERITABLES VALEURS CORRESPONDANT A VOTRE EMPLACEMENT
17         
18 const char* mySSID   = "MA_BOX_INTERNET";
19 const char* mySecKey = "MA_CLE_DE_SECURITE";
20 
21 /* --------------------------------------------------------------------------------------------------------
22  *  SETUP : Initialisation
23  *  -------------------------------------------------------------------------------------------------------- */
24 void setup() {
25 
26     // Initialisation de la liaison série, affichage 1er message
27 
28     Serial.begin(115200);
29     delay(100) ;
30     Serial.println(); 
31     Serial.println("----------------------------------") ;
32     Serial.println("Exemple de connexion Wi-Fi basique") ;
33     Serial.println("----------------------------------") ;
34 
35     // Démarrage de la tentative de connexion, avec le nom du point d'accès Wi-Fi et son mot de passe
36 
37     WiFi.begin(mySSID, mySecKey) ;
38 
39     // Attente de la connexion pendant 10 secondes (20 x 500 ms)
40 
41     Serial.print("Connexion à "); Serial.print(mySSID) ; Serial.print(" ") ;
42     int tryNumber = 1 ;
43     while (WiFi.status() != WL_CONNECTED)
44     {
45         delay(500);
46         Serial.print(".");
47         if (++tryNumber > 20) {
48             Serial.println() ; Serial.println("Pas de connexion, abandon") ;
49             return ;
50         }
51     } 
52 
53     // La connexion a réussi ! On affiche l'adresse IP obtenue.
54     
55     Serial.println(); Serial.print("Connecté ! Adresse IP : ");
56     Serial.println(WiFi.localIP());
57     
58 }
59 
60 /* --------------------------------------------------------------------------------------------------------------
61  *  LOOP : fonction appelée régulièrement par le système
62  *  ------------------------------------------------------------------------------------------------------------- */
63 void loop() { 
64   /* On ne fait rien de particulier sur cet exemple */
65 }

Étape 2 - Oui, mais si je dois changer de borne Wi-Fi ?

Dans l'étape précédente on supposait que le Wi-Fi était permanent (cas où les cartes ne quittent pas notre labo, par exemple). Mais si on souhaite faire voyager nos cartes (démos dans des écoles, etc ...), on a trois possibilités :

  • On vient avec son environnement de développement Arduino, on met à jour le code Arduino avec les nouvelles informations Wi-Fi, et on téléverse le code sur toutes nos cartes ... un peu laborieux, n'est-il pas ?
  • ou bien, on dispose en permanence d'un téléphone mobile avec forfait données (4G ou +), et on utilise systématiquement celui-ci en mode "Point d'accès mobile". C'est donc ce téléphone qui sera vu en permanence comme le point d'accès Wi-Fi préféré de votre carte (D1 mini ou ESP32), quelque soit l'endroit où vous vous trouvez. Pas toujours possible ...
  • et sinon, on utilise la bibliothèque "WiFiManager", qui nous simplifie grandement la tâche !

En effet, cette bibliothèque permet d'enregistrer de façon pérenne (même si on débranche la carte) le dernier Point d'Accès Wi-Fi sur lequel la carte a réussi à se connecter. La bibliothèque va d'abord chercher à se connecter sur ce Point d'Accès "connu". Et si ça ne fonctionne pas (on a changé de lieu, par exemple), alors elle va se positionner elle-même en mode "Point d'Accès", et va proposer sur l'adresse 192.168.4.1 une interface web permettant d'afficher les Points d'Accès Wi-Fi environnants, et d'en sélectionner un. Le nouveau Point d'Accès choisi sera sauvegardé pour les fois suivantes.


Interface web du WiFi Manager :

  1. Avec un téléphone ou ordinateur, connectez-vous au point d'accès "AP_PetitDeb" et tapez le mot de passe associé. Il y aura probablement un message indiquant qu'Internet n'est pas disponible, c'est normal, ne pas en tenir compte ;
  2. Sur votre navigateur préféré, tapez "192.168.4.1", ce qui fera apparaître l'interface web générée par la bibliothèque WiFiManager. Cliquez sur "Configure WiFi", vous arrivez sur le choix du point d'accès.
  3. Choisissez alors votre point d'accès Wi-Fi préféré, son nom sera reporté dans la case "SSID", complétez avec le mot de passe dans la case "Password", et cliquez sur Save

Image permettant de comprendre l'utilisation de la bibliothèque WiFiManager


Bibliothèque


La bibliothèque doit être rajoutée à l'environnement Arduino dans le gestionnaire de Bibliothèques (voir ici pour le mode d'emploi) :


Image de la Bibliothèque WiFiManager dans le Gestionnaire de Bibliothèques Arduino


Bibliothèque Wifi Manager
Avant le Setup Importation de la bibliothèque #include <WiFiManager.h>
Création de l’objet WiFiManager myWiFiManager;
Dans le Setup Déclaration du mode bloquant myWiFiManager.setConfigPortalBlocking(true); // ... ou rien (mode par défaut)
Déclaration du mode non bloquant myWiFiManager.setConfigPortalBlocking(false);
Tentative de connexion à un PA Wi-Fi if (myWiFiManager.autoConnect(Nom_AP, MotDePasse_AP)) { (... connexion OK !) }
Dans le Loop Activation régulière pour le mode non bloquant myWiFiManager.process() ; // Obligatoire en mode non bloquant

Pour connaître toutes les autres possibilités de cette bibliothèque, voir sa référence, ici.


Code minimal  : mode bloquant (par défaut)


 1 /* =========================================================================================================
 2  * 
 3  *          CODE MINIMAL RESEAU - ETAPE 2 : Connexion à un point d'accès choisi par l'utilisateur
 4  *          
 5  *          CAS A : MODE BLOQUANT - On attend tant que l'utilisateur n'a pas choisi son Point d'Accès Wi-Fi
 6  * 
 7  * ---------------------------------------------------------------------------------------------------------
 8  * Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 9  * ========================================================================================================= */
10 
11 // Bibliothèque WiFiManager. Un seule bibibliothèque suffit ici, quelque soit la carte (ESP32 ou Wemos D1 Mini)
12 
13 #include <WiFiManager.h>          // Gestion de la connexion Wi-Fi (recherche de points d'accès)  
14 WiFiManager myWiFiManager;        // Création de mon instance de WiFiManager.
15 
16 // Définition de la carte lorsqu'elle se positionne en mode "Point d'Accès".
17         
18 const char* mySSID   = "AP_PetitDeb" ;      // Nom du point d'accès
19 const char* mySecKey = "PSWD1234" ;         // Mot de passe, 8 caractères au minimum
20 
21 /* --------------------------------------------------------------------------------------------------------
22  *  SETUP : Initialisation
23  *  -------------------------------------------------------------------------------------------------------- */
24 void setup() {
25 
26     // Initialisation de la liaison série, affichage 1er message
27 
28     Serial.begin(115200);
29     delay(100) ;
30     Serial.println(); 
31     Serial.println("----------------------------------") ;
32     Serial.println("Exemple de connexion Wi-Fi évoluée") ;
33     Serial.println("----------------------------------") ;
34 
35     // Tentative de connexion au Wi-Fi. Si la carte n'a pas réussi  se connecter au dernier Point d'Accès connu,
36     // alors elle va se positionner en mode Point d'Accès, demandera sur l'adresse 192.168.4.1 quel nouveau
37     // Point d'Accès choisir. Par défaut, on restera bloqué tant que l'utilisateur n'aura pas fait de choix.
38     
39     Serial.println("Connexion au Wi-Fi ...");
40     if (myWiFiManager.autoConnect(mySSID, mySecKey)) {
41       
42         // Wi-Fi en mode standard ok --> On affiche l'adresse IP obtenue.
43 
44         Serial.println(); Serial.print("Connecté ! Adresse IP : ");
45         Serial.println(WiFi.localIP());
46         
47     }
48     else {
49         Serial.println("Connexion Wi-Fi KO :-(");     
50     }
51    
52 }
53 
54 /* --------------------------------------------------------------------------------------------------------------
55  *  LOOP : fonction appelée régulièrement par le système
56  *  ------------------------------------------------------------------------------------------------------------- */
57 void loop() { 
58   /* On ne fait rien de particulier sur cet exemple */
59 }


Code minimal  : mode non bloquant
 1 /* =========================================================================================================
 2  * 
 3  *          CODE MINIMAL RESEAU - ETAPE 2 : Connexion à un point d'accès choisi par l'utilisateur
 4  *          
 5  *          CAS B : MODE NON BLOQUANT - On peut faire autre chose en attendant que l'utilisateur ait choisi
 6  *                  son Point d'Accès Wi-Fi
 7  * 
 8  * ---------------------------------------------------------------------------------------------------------
 9  * Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
10  * ========================================================================================================= */
11 
12 // Bibliothèque WiFiManager. Un seule bibibliothèque suffit ici, quelque soit la carte (ESP32 ou Wemos D1 Mini)
13 
14 #include <WiFiManager.h>          // Gestion de la connexion Wi-Fi (recherche de points d'accès)  
15 WiFiManager myWiFiManager;        // Création de mon instance de WiFiManager.
16 
17 // Définition de la carte lorsqu'elle se positionne en mode "Point d'Accès".
18         
19 const char* mySSID   = "AP_PetitDeb" ;      // Nom du point d'accès
20 const char* mySecKey = "PSWD1234" ;         // Mot de passe, 8 caractères au minimum
21 
22 // Pour les besoins de l'exemple (traces)
23 
24 bool IAmNotConnected = true ;
25 
26 /* --------------------------------------------------------------------------------------------------------
27  *  SETUP : Initialisation
28  *  -------------------------------------------------------------------------------------------------------- */
29 void setup() {
30 
31     // Initialisation de la liaison série, affichage 1er message
32 
33     Serial.begin(115200);
34     delay(100) ;
35     Serial.println(); 
36     Serial.println("----------------------------------") ;
37     Serial.println("Exemple de connexion Wi-Fi évoluée") ;
38     Serial.println("----------------------------------") ;
39 
40     // Déclaration du mode "non bloquant".
41     // Bonus : suppression des traces fournies par le WiFiManager (il est très bavard)
42     
43      myWiFiManager.setConfigPortalBlocking(false); 
44      myWiFiManager.setDebugOutput(false);     
45 
46     // Tentative de connexion au Wi-Fi. Si la carte n'a pas réussi  se connecter au dernier Point d'Accès connu,
47     // alors elle va se positionner en mode Point d'Accès, demandera sur l'adresse 192.168.4.1 quel nouveau
48     // Point d'Accès choisir. On ne reste pas bloqué, la suite du setup() va se dérouler, et le WiFiManager
49     // traitera les demandes ultérieurement, dans la fonction loop().
50      
51     Serial.println("Connexion au Wi-Fi ...");
52     if (myWiFiManager.autoConnect(mySSID, mySecKey)) {
53       
54         // Wi-Fi en mode standard ok --> On affiche l'adresse IP obtenue.
55 
56         Serial.println(); Serial.print("Connecté ! Adresse IP : ");
57         Serial.println(WiFi.localIP());
58         
59     }
60     else {
61 
62         // Wi-Fi standard KO, on est passé en mode AP, qui sera traité dans le loop().
63         
64         Serial.println("Pas de point Wi-Fi connu, passage en mode AP (identifiant \"" + String(mySSID) + "\")");     
65     }
66    
67 }
68 
69 /* --------------------------------------------------------------------------------------------------------------
70  *  LOOP : fonction appelée régulièrement par le système
71  *  ------------------------------------------------------------------------------------------------------------- */
72 void loop() { 
73   
74   // Obligatoire en mode non bloquant, pour que le WiFiManager continue sa tâche.
75 
76   myWiFiManager.process() ;
77 
78   // Test pour savoir si on est enfin connecté - on ne l'affiche qu'une fois pour limiter les traces
79 
80   if (IAmNotConnected) {
81       if (WiFi.status() == WL_CONNECTED) {
82           Serial.print("Connecté au point d'accès " + String(WiFi.SSID()) + ", Adresse IP : ") ;
83           Serial.println(WiFi.localIP());
84           IAmNotConnected = false ;
85       }
86   }
87   
88 }

Étape 3 - Et si je veux rester en mode AP (Access Point) Wi-Fi ?

Il existe des cas particuliers où une application n'a en fait pas besoin du Wi-Fi pour aller envoyer ou recevoir des données d'Internet, mais souhaite être juste être considérée comme un Point d'Accès Wi-Fi. Ce mode est suffisant si l'on souhaite commander notre carte depuis un système proche. Par exemple pour commander un système domotique en mode web depuis notre mobile ... petit "spoiler" de l'épisode 2 :-)


Pour utiliser le mode "Point d'Accès", on garde les librairies de base, vues à l'étape 1, en utilisant d'autres fonctions.

Mode Point d'Accès
Avant le Setup Importation de la bibliothèque #include <ESP8266WiFi.h> // Pour le Wemos D1 Mini, ou ...

#include <WiFi.h> // ... Pour l'ESP32

Création de l’objet
Dans le Setup Lancement du mode AP

avec mot de passe

if (WiFi.softAP(SSID, SecKey)) { (... succès ... } ; // Où SSID est le nom du point d'accès Wi-Fi, et SecKey son mot de passe
Lancement du mode AP

sans mot de passe

if (WiFi.softAP(SSID)) { (... succès ... } ; // Où SSID est le nom du point d'accès Wi-Fi
Récupération de l'adresse IP de base WiFi.softAPIP() ;
Dans le Loop Utilisation La récupération de l'adresse IP peut aussi être utilisée dans le loop().


Pour connaître toutes les autres possibilités de ces bibliothèques, voir leurs références, respectivement ici (D1 Mini) et ici (ESP32).


 1 /* =========================================================================================================
 2  * 
 3  *          CODE MINIMAL RESEAU - ETAPE 3 : Configuration en mode Point d'Accès
 4  *          
 5  * ---------------------------------------------------------------------------------------------------------
 6  * Les petits Débrouillards - décembre 2022 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
 7  * ========================================================================================================= */
 8 
 9 // Bibliothèques WiFi : UNE SEULE EST NECESSAIRE, choisir celle correspondant à votre matériel. 
10 // ATTENTION AUX MAJUSCULES & MINUSCULES ! Sinon d'autres bibliothèques, plus ou moins valides, seraient utilisées.
11 
12 #include <ESP8266WiFi.h>          // A utiliser pour le D1 Mini 
13 //#include <WiFi.h>               // A utiliser pour l'ESP32
14 
15 const char* mySSID = "AP_PetitDeb" ;
16 const char* mySecKey = "PSWD1234" ;
17 
18 /* --------------------------------------------------------------------------------------------------------
19  *  SETUP : Initialisation
20  *  -------------------------------------------------------------------------------------------------------- */
21 void setup() {
22 
23     // Initialisation de la liaison série, affichage 1er message
24 
25     Serial.begin(115200);
26     delay(100) ;
27     Serial.println(); 
28     Serial.println("-----------------------------") ;
29     Serial.println("Exemple en mode Point d'Accès") ;
30     Serial.println("-----------------------------") ;
31 
32     // Déclaration du mode "Point d'Accès"
33 
34     Serial.println("Déclaration Mode AP, SSID \"" + String(mySSID) + "\"") ;
35 
36     if (WiFi.softAP(mySSID,mySecKey)) {
37 
38         // Voilà, nous somme en mode "Point d'Accès", notre carte sera visible des systèmes Wi-Fi environnants,
39         // au même titre que les autres box Wi-Fi du voisinage. Par contre, ça s'arrête là, et si une fois
40         // connecté sur ce Point d'Accès "AP_PetitDeb" on cherche à joindre notre carte sur l'adresse IP obtenue
41         // ci-dessous par WiFi.softAPIP(), on aura droit à un beau "ERR_CONNECTION_REFUSED". Normal, on n'a pas
42         // précisé dans l'application ce qu'il faut faire : voir exemple suivant Code_Minimal_Etape4.
43         
44         Serial.print("Mode AP OK, IP Address : ") ;
45         Serial.println(WiFi.softAPIP()) ;
46     }
47     else {
48         Serial.println("Mode AP KO ... :-(") ;
49     }
50     
51 }
52 
53 /* --------------------------------------------------------------------------------------------------------------
54  *  LOOP : fonction appelée régulièrement par le système
55  *  ------------------------------------------------------------------------------------------------------------- */
56 void loop() { 
57   
58     // Rien de spécial dans cet exemple
59       
60 }

Étape 4 - La suite, la suite ! ... :-)

Ces trois épisodes sont indépendants les uns des autres.


Dernière modification 6/02/2023 par user:Philby.

Commentaires

Published