Différences entre les pages « Le DebrouilloKit - Multipliez les expériences ! » et « Code minimal des fonctions réseau »

 
 
Ligne 1 : Ligne 1 :
 
{{Tuto Details
 
{{Tuto Details
|Main_Picture=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Anim1.gif
+
|Main_Picture=Code_minimal_des_fonctions_r_seau_WiKi_Reseau.png
 
|Licences=Attribution (CC-BY)
 
|Licences=Attribution (CC-BY)
|Description=Le "DebrouilloKit"  est composé d'un boitier de commande, d'un bloc servomoteur, et d'un bloc de leds. Sous sa forme "mallette pédagogique", leurs dimensions ont été calculées pour faciliter le transport d'un ensemble de 6 kits, comme on peut le voir dans l'animation à gauche. Le boitier de commande comporte 1 potentiomètre, deux boutons, et trois entrées/sorties numériques (via des borniers à vis), ce qui est largement suffisant pour de nombreuses applications. Les faces avant des éléments accueillent des fiches imprimées, à placer en fonction de l'application choisie.
+
|Description=Nous allons résumer ici les différentes façons d'utiliser les fonction réseau des cartes compatibles Arduino possédant une puce Wi-Fi (Wemos D1 mini, ESP32, ...). Ces fonctions vont permettre à ces cartes de discuter entre elles, d'accéder à un site web, ou même de se comporter elles-même comme un (mini) site web.
|Disciplines scientifiques=Arduino, Computing, Electricity
+
|Disciplines scientifiques=Arduino, Computing
 
|Difficulty=Technical
 
|Difficulty=Technical
|Duration=4
+
|Duration=10
 
|Duration-type=hour(s)
 
|Duration-type=hour(s)
|Tags=Wemos D1 mini, découpe laser
+
|Tags=Wi-Fi, HTTP, MQTT, JSON
 
}}
 
}}
 
{{Introduction
 
{{Introduction
|Introduction=L'idée de ce DebrouilloKit a germé suite au hackathon "Rudi", organisé par Les Petits Débrouillards Grand Ouest et L'Edulab de l'Université de Rennes 2 en décembre 2021, dans le cadre d'un appel à projet eRudi porté par le Réseau Canopé. L'objet du hackathon était de développer des POCL (Petits Objets Connectés Ludiques), sur base Arduino ou Wemos D1 mini, mettant à profit des données libres ("''Open Data''"). L'appel à projet indiquait également que Les Petits Débrouillards devaient ensuite concevoir et développer une mallette pédagogique sur la base des ces POCL.
+
|Introduction=Cette expérience regroupe différentes manières de bénéficier des capacités de communication des cartes compatibles Arduino possédant une puce Wi-Fi. 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. '''Toutes les étapes décrites ici sont en fait indépendantes''' :
  
 +
<br />
  
Nous avons alors conçu un '''DebrouilloKit générique''', utilisable en dehors de ce besoin particulier. Il est aujourd'hui composé de trois boitiers : <br />  
+
*Les deux premières étapes permettent à notre carte de se connecter au Wi-Fi, de façon basique ('''étape 1''') ou un peu plus évoluée, et souple ('''étape 2''') ;
 +
*L''''étape 3''' permet à la carte d'être dans un mode particulier, dit "AP"(Access Point") et se comporter comme une borne Wi-Fi.
 +
*Les étapes suivantes correspondent à des besoins différents :
 +
**'''étape 4''' : visualiser et/ou modifier des paramètres de notre carte via une interface web ;
 +
**'''étape 5''' : permettre à notre carte d'accéder à des données d'un site externe, utilisant le format standardisé '''JSON''' <sup>(1)</sup>
 +
**'''étape 6''' : permettre à notre carte d'envoyer et de recevoir des messages courts, via le protocole standardisé '''MQTT''' <sup>(1)</sup>
  
*la '''DebrouilloBox''' (boitier de commande), basée sur un Wemos D1 mini, un potentiomètre et deux boutons ;
+
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.
*la '''DebrouilloLight''', composée d'une bande de 12 leds multicolores ;
 
*le '''DebrouilloServo''', composé d'un mini servomoteur
 
  
  
A titre d'exemple, nous proposons 5 applications (les trois dernières étant issues du hackathon Rudi) :<br />
+
Il existe bien sûr déjà un tas de tutoriels avec des exemples similaires, sans compter bien sûr les exemples fournis avec les bibliothèques que l'on va utiliser <sup>(2)</sup>. La modeste contribution de de cette page est de tenter de regrouper les cas de figures les plus importants. S'il en manque, n'hésitez pas à mettre un commentaire, voire à ajouter une étape !
  
*une application de test, permettant de s'assurer que les utilisateurs ont réalisé les bonnes connexions entre les différents éléments
 
*une application de ping-pong individuel
 
*une application météo, affichant le temps des 5 prochains jours sur Rennes
 
*une application exploitant les données de trafic de la Rocade de Rennes
 
*une application "pokou", étendue à un jeu Pierre-Feuille-Ciseaux entre deux DebrouilloKits
 
  
Le passage d'une application à une autre est simple : on positionne le potentiomètre sur un n° d'application, et on appuie simultanément sur les deux boutons pendant plus de 3 secondes.               
+
'''(1)''' ''Pas d'inquiétude sur les "JSON "et autre "MQTT", on explique tout dans les étapes correspondantes''
 
 
Le coût de chaque kit (Box+Light+Servo) est inférieur à 10 €. En fonction des ateliers, on pourra proposer de réaliser un nouveau kit de bout en bout (électronique, découpage laser des boites, impression 3D des boutons, utilisation des applications existantes), ou utilisation de kits existants et réalisation de nouvelles applications. On peut également envisager la réalisation d'éléments complémentaires (à base de capteurs par exemple). A vous de jouer ! 
 
  
<br />
+
'''(2)''' ''On donnera d'ailleurs les liens vers les bibliothèques et leurs exemples à chaque étape.''
 
}}
 
}}
 
{{Materials
 
{{Materials
 
|ItemList={{ItemList
 
|ItemList={{ItemList
|Item=Servomoteur
 
}}{{ItemList
 
|Item=Ruban de Led - WS2812B
 
}}{{ItemList
 
 
|Item=D1 mini
 
|Item=D1 mini
 
}}{{ItemList
 
}}{{ItemList
|Item=Potentiomètre
+
|Item=Câble USB - micro-USB
}}{{ItemList
 
|Item=Bouton poussoir
 
}}{{ItemList
 
|Item=Découpeuse laser
 
 
}}{{ItemList
 
}}{{ItemList
|Item=Imprimante 3D
+
|Item=Logiciel Arduino
 
}}
 
}}
 
|Prerequisites={{Prerequisites
 
|Prerequisites={{Prerequisites
Ligne 59 : Ligne 48 :
 
}}
 
}}
 
{{Tuto Step
 
{{Tuto Step
|Step_Title=Boitier de commande : partie électronique
+
|Step_Title=Connexion Wi-Fi de base
|Step_Content=L'électronique du boitier de commande est basé sur un Wemos D1 Mini, auquel on ajoute deux boutons, un potentiomètre, une led multi-couleurs et quelques connecteurs. Afin de faciliter - et fiabiliser - le montage, nous avons conçu un circuit intégré (*) qui accueillera tous ces composants. (Cf. figure 1).
+
|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.
  
#Positionnez le jeu de borniers '''au verso''' du circuit intégré, les trous vers l'extérieur  (Cf. Figure 2), et soudez-les (au recto, donc). ''Les modèles de borniers utilisés se clipsent les uns aux autres pour composer un bornier de la longueur voulue, ici 9 connexions.''
 
#Positionnez les deux boutons, et les supports du D1 mini '''au recto''' du circuit imprimé (Cf. figure 3), et soudez-les (au verso).
 
#Soudez le potentiomètre (Cf. figure 4), en prévoyant 5 cm de fils souples. En regardant le potentiomètre sur le dessus (côté bouton), avec ses connexions vers soi, on doit connecter '''GND''' à la '''connexion de gauche , A0''' à la '''connexion centrale''', et '''3,3V''' à la '''connexion de droite'''.
 
#Soudez un élément du ruban de leds (Cf. figure 5) conformément aux indications du circuit imprimé. Prévoir là aussi 5 cm de fil souple.
 
#Soudez les petits connecteurs au D1 mini, et placez le sur les supports soudés - avec l'entrée USB située côté extérieur (Cf. figure 6).
 
  
 +
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.
  
''(*) Si ce circuit imprimé n'est pas disponible sur place, demandez à d'autres antennes Petits Debrouillards s'ils n'en n'ont pas en trop; et sinon, vous pouvez en recommander sur le site '''JLPCB.com''' en y téléchargeant le fichier '''DK_PCB.zip''' disponible dans la section "Fichiers" ci-dessus.''
+
{| class="wikitable" cellspacing="0" border="0"
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img101.jpg
+
| height="17" bgcolor="#999999" align="left" |
|Step_Picture_00_annotation={"version":"3.5.0","objects":[{"type":"image","version":"3.5.0","originX":"left","originY":"top","left":0,"top":0,"width":800,"height":600,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.75,"scaleY":0.75,"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/d/d4/Le_DebrouilloKit_-_Multipliez_les_exp_riences_DK_Img101.jpg","filters":[]}],"height":450,"width":600}
+
| valign="middle" bgcolor="#999999" align="center" |
|Step_Picture_01=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img102.jpg
+
| bgcolor="#999999" align="center" |Connexion Wi-Fi de base
|Step_Picture_02=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img103.jpg
+
|-
|Step_Picture_03=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img104.jpg
+
| rowspan="2" valign="middle" height="49" bgcolor="#999999" align="center" |Avant le Setup
|Step_Picture_04=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img105.jpg
+
| valign="middle" bgcolor="#999999" align="center" |Importation de la bibliothèque
|Step_Picture_05=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img106.jpg
+
| valign="middle" align="left" |#include <ESP8266WiFi.h> // Pour le Wemos D1 Mini, ou ...
}}
 
{{Tuto Step
 
|Step_Title=Découpe et montage de base des boitiers
 
|Step_Content=Les boitiers sont réalisés en bois, par découpe laser. Les découpes de chaque boitier sont définies dans un ou deux fichiers "svg",  disponibles dans la section "Fichiers" ci-dessus. Il faut prendre du bois d''''épaisseur 3 mm'''. Lors du transfert du fichier svg vers le logiciel de la découpeuse laser, il faudra spécifier :<br />
 
  
*couleur rouge --> découpe laser,
+
<nowiki>#</nowiki>include <WiFi.h>                      // Pour l'ESP32
*couleur noire --> gravure.
+
|-
 +
| 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" |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
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Test de la connexion
 +
| valign="middle" align="left" |if (WiFi.Status() == WL_CONNECTED) { (...) }
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Récupération de l'adresse IP
 +
|WiFi.localIP() ;
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Dans le Loop
 +
| valign="middle" bgcolor="#999999" align="center" |Utilisation
 +
|Le test de la connexion, et la récupération de l'adresse IP peuvent aussi être utilisés dans le loop().
 +
|}
  
Le montage des trois boitiers se fait de la même façon. <u>A cette étape 2 ne monter ensemble que le fond, les côtés des boites, et les cales intérieures.</u> '''Quelques point d'attention cependant''' (voir également photos à gauche) :
 
  
*Boitier de commande : l'encoche (qui accueillera les borniers de connexion)  dans le fond du boitier, doit être mise en correspondance avec le côté gravé ("USB", "- + L ..."), dont les inscriptions doivent bien sûr être à l'extérieur
+
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).
*Boitiers DebrouilloLight et DebrouilloServo : ils comportent une encoche sur le côté, et un trou dans la base, qui servent à faire passer les fils. Il faut mettre le trou du côté de l'encoche. Il faut également coller à l'intérieur de ces boitiers les cales qui empêcheront leurs façades de s'enfoncer.
 
*Boitier DebrouilloLight : l'intérieur du boitier doit faire 10mm de profondeur, tandis que le fond du boitier fera 6mm de profondeur.
 
  
Il est impératif de mettre de la bonne colle entre les éléments, car on pourra avoir à forcer un peu lors de la finalisation des boitiers (en particulier le boitier de commande).  
+
<br /><syntaxhighlight lang="arduino" line="1">
 +
/* =========================================================================================================
 +
*
 +
*                        CODE MINIMAL RESEAU - ETAPE 1 : connexion basique au Wi-Fi
 +
*
 +
* ---------------------------------------------------------------------------------------------------------
 +
* 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.
 +
// ATTENTION AUX MAJUSCULES & MINUSCULES ! Sinon d'autres bibliothèques, plus ou moins valides, seraient utilisées.
  
''Les boites de base ont été créés sur le site [https://www.festi.info/boxes.py/?language=fr https://www.festi.info/boxes.py/?language=fr,] puis adaptées à notre besoin.''
+
#include <ESP8266WiFi.h>          // A utiliser pour le D1 Mini
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img201.jpg
+
//#include <WiFi.h>              // A utiliser pour l'ESP32
|Step_Picture_01=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img202.jpg
 
|Step_Picture_02=Le_DebrouilloKit_-_Multipliez_les_exp_riences_DK_Img203.jpg
 
}}
 
{{Tuto Step
 
|Step_Title=Finalisation du boitier de commande
 
|Step_Content=<u>Montage de la structure intérieure</u> :
 
  
*Sélectionnez les pièces affichées en figure 1.A
+
// Définition du point d'accès Wi-Fi et de son mot de passe ("clé de sécurité")
*Insérez les deux petites pièces dans le support inférieur (1.B), puis placez le support supérieur (1.C)
+
// A REMPLACER PAR LES VERITABLES VALEURS CORRESPONDANT A VOTRE EMPLACEMENT
*Insérez le tout dans l'une des cales intérieures (1.D), puis placez la seconde cale intérieure (2.E)
+
       
*Insérez et vissez le potentiomètre, en tenant compte de la petite encoche (2.F)
+
const char* mySSID  = "MA_BOX_INTERNET";
 +
const char* mySecKey = "MA_CLE_DE_SECURITE";
  
<u>Finalisation du montage</u> :
+
/* --------------------------------------------------------------------------------------------------------
 +
*  SETUP : Initialisation
 +
*  -------------------------------------------------------------------------------------------------------- */
 +
void setup() {
  
*Placez la cale inférieure sous le circuit imprimé (2.G)
+
    // Initialisation de la liaison série, affichage 1er message
*Insérez le circuit avec sa cale dans le boitier, assurez-vous que les borniers soient bien en place, avec leurs connexions en face des trous ""- + L ...", puis insérez la structure intérieure (2.H)
 
*Collez la led sous la façade du boitier (3.I). Attention, contrairement à la photo, assurez-vous que la colle soit à plus de 3mm du bord - afin d'assurer un bon positionnement de la façade dans le boitier
 
*Insérez la façade dans la boitier (4.J)
 
  
<u>Réalisation des boutons</u> (dernière photo) :
+
    Serial.begin(115200);
 +
    delay(100) ;
 +
    Serial.println();
 +
    Serial.println("----------------------------------") ;
 +
    Serial.println("Exemple de connexion Wi-Fi basique") ;
 +
    Serial.println("----------------------------------") ;
  
*Ceux-ci ont été réalisés en impression 3D, à partir du fichier '''DK_3D.stl''' disponible dans la section "Fichiers" ci-dessus. Si vous souhaitez améliorer les boutons, le fichier Blender '''DK_3D.blend''' est également disponible.
+
    // Démarrage de la tentative de connexion, avec le nom du point d'accès Wi-Fi et son mot de passe
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences_DK_Img301.jpg
 
|Step_Picture_01=Le_DebrouilloKit_-_Multipliez_les_exp_riences_DK_Img302.jpg
 
|Step_Picture_02=Le_DebrouilloKit_-_Multipliez_les_exp_riences_DK_Img303.jpg
 
|Step_Picture_03=Le_DebrouilloKit_-_Multipliez_les_exp_riences_DK_Img304.jpg
 
|Step_Picture_04=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img305.jpg
 
}}
 
{{Tuto Step
 
|Step_Title=Finalisation de la DebrouilloLight
 
|Step_Content=<u>1/ Montage du dérouleur</u> (photo 1 à gauche)<br />
 
  
*Le dérouleur est constitué des deux rectangles arrondis, le plus petit étant le plus proche de la face arrière du boitier.
+
    WiFi.begin(mySSID, mySecKey) ;
*Nous avons utilisé des petites vis à bois, de longueur 10mm .
 
  
 +
    // Attente de la connexion pendant 10 secondes (20 x 500 ms)
  
<u>2/ Soudure du ruban de leds</u> (photo 2 à gauche)
+
    Serial.print("Connexion à "); Serial.print(mySSID) ; Serial.print(" ") ;
 +
    int tryNumber = 1 ;
 +
    while (WiFi.status() != WL_CONNECTED)
 +
    {
 +
        delay(500);
 +
        Serial.print(".");
 +
        if (++tryNumber > 20) {
 +
            Serial.println() ; Serial.println("Pas de connexion, abandon") ;
 +
            return ;
 +
        }
 +
    }
  
*Le ruban de leds est de type '''Adafruit NeoPixel''' (60 leds / mètre). Couper ce ruban de façon à garder 12 leds.
+
    // La connexion a réussi ! On affiche l'adresse IP obtenue.
*Prendre un ensemble de trois fils, idéalement rouge, noir, et autre couleur bien différenciée), d'une longueur de 40 à 60cm. souder le fil rouge sur le 5V, le fil noir sur le GND, et l'autre couleur sur le DIn.
+
   
 +
    Serial.println(); Serial.print("Connecté ! Adresse IP : ");
 +
    Serial.println(WiFi.localIP());
 +
   
 +
}
  
 +
/* --------------------------------------------------------------------------------------------------------------
 +
*  LOOP : fonction appelée régulièrement par le système
 +
*  ------------------------------------------------------------------------------------------------------------- */
 +
void loop() {
 +
  /* On ne fait rien de particulier sur cet exemple */
 +
}
  
<u>3/ Mise en place du ruban de leds</u> (photos 3 et 4 à gauche)<br />
 
  
*Mettre les leds sur le côté opposé à la face gravée de la façade. La première led (la plus proche des soudures des fils) doit se mettre dans le trou numéroté "1" sur la face opposée.
 
*Pour pouvoir faire tenir 12 leds dans un boitier pas trop long, les trous de la face avant ont un écartement inférieur à l'écartement réel des leds. Ceci oblige à mettre le ruban en accordéon. Au fur et à mesure de l'installation des leds, mettre un petit bout de scotch fort, puis finir en mettant du scotch tout du long.
 
*faire passer les fils dans le trou de la face arrière du boitier, et les enrouler autour du dérouleur en attendant une utilisation du DebrouilloLight.
 
  
Pour terminer (photo 5), insérer la façade dans le boitier. Si elle ne tient pas toute seule, on peut mettre des bouts de scotch double face - de faible épaisseur - sur la tranche des deux cales intérieures.
+
</syntaxhighlight><br />
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img401.jpg
 
|Step_Picture_01=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img402.png
 
|Step_Picture_02=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img403.jpg
 
|Step_Picture_03=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img404.jpg
 
|Step_Picture_04=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img405.jpg
 
 
}}
 
}}
 
{{Tuto Step
 
{{Tuto Step
|Step_Title=Finalisation du DebrouilloServo
+
|Step_Title=Oui, mais si mon Wi-Fi change ?
|Step_Content=<u>1/ Montage du dérouleur</u> (photo 1 à gauche)<br />
+
|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 ...
 +
*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 ...
 +
*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-Fisur lequel la carte a réussi à se connecter. Lors de l'appel à sa fonction autoconnect(), la bibliothèque va d'abord chercher à se connecter sur ce Point d'Accès. 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 permettant d'afficher les bornes Wi-Fi environnantes, et d'en sélectionner une.
 +
 
 +
 
 +
''Pour plus de détails, et présentation de l'interface utilisateur proposée par la bibliothèque, voir le chapitre "Explications" en bas de cette page.''
 +
 
 +
<br>
 +
{| class="wikitable" cellspacing="0" border="0"
 +
| height="17" bgcolor="#999999" align="left" |
 +
| valign="middle" bgcolor="#999999" align="center" |
 +
| bgcolor="#999999" align="center" |Wifimanager
 +
|-
 +
| 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;
 +
|-
 +
| valign="middle" height="17" bgcolor="#999999" align="center" |Dans le Setup
 +
| valign="middle" bgcolor="#999999" align="center" |Démarrage de l’objet
 +
| valign="middle" align="left" |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" |Utilisation
 +
| valign="middle" align="left" |
 +
|}
  
*Montage similaire à celui de la DebrouilloLight, avec les deux pièces circulaires.
 
  
<u>2/ Montage du servomoteur</u> (photos 2 et 3 à gauche)<br />
+
Pour connaître toutes les autres possibilités de cette bibliothèque, voir sa référence,  [https://jp112sdl.github.io/WiFiManager/ ici].
  
*Apposer les deux pièces supportant le servomoteur l'une contre l'autre
+
Code minimal : 2 cas sont donnés ci-dessous, le mode bloquant (par défaut), et le mode non bloquant.<br /><syntaxhighlight lang="arduino" line="1">
*Insérer le servomoteur et le visser (la longueur des vis fournies avec les servo moteur devraient permettre de coller ensemble les deux pièces en bois)
+
/* =========================================================================================================
*Connecter ou souder 40 à 60 cm de fils (idéalement rouge, noir, et autre couleur bien différenciée), aux fils sortant du servomoteur.
+
*
*Faire passer ces fils dans le trou situé à la base du boitier, et les enrouler autour du dérouleur en attendant une utilisation du DebrouilloServo.
+
*         CODE MINIMAL RESEAU - ETAPE 2 : Connexion à un point d'accès choisi par l'utilisateur
 +
*         
 +
*          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/
 +
* ========================================================================================================= */
  
Pour terminer (photo 4), insérez la façade dans le boitier (comme précédemment, un petit bout de scotch double face peut aider à la maintenir).
+
// Bibliothèque WiFiManager. Un seule bibibliothèque suffit ici, quelque soit la carte (ESP32 ou Wemos D1 Mini)
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DBK_Servo_Ph2.png
 
|Step_Picture_01=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DBK_Servo_Ph3.png
 
|Step_Picture_02=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DBK_Servo_Ph4.png
 
|Step_Picture_03=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img504.jpg
 
}}
 
{{Tuto Step
 
|Step_Title=Réalisation des fiches applicatives
 
|Step_Content=Des fiches sont associées à chaque application, et destinées à être placées sur les faces de la DebrouilloBox, du DebrouilloServo et du DebrouilloLight. A titre d'exemple, photo 1 : fiches de l'application "Météo", et photo 2 : "Rocade de Rennes". Dans le cadre d'un atelier ou d'un hackathon, les fiches peuvent être dessinées à la main ou sur un logiciel de dessin, puis imprimées sur du papier  épais.  Si on veut des fiches plus pérennes, voici comment on peut procéder :
 
  
 +
#include <WiFiManager.h>          // Gestion de la connexion Wi-Fi (recherche de points d'accès) 
 +
WiFiManager myWiFiManager;        // Création de mon instance de WiFiManager.
  
<u>Cas 1 : pour réaliser les fiches actuelles</u> :
+
// 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
  
#Imprimer le fichier '''DK_Fiches.pdf''' (Cf. photo 3) au format A4 ; plastifier la feuille, puis couper les bords à environ 2mm (côté extérieur) du centre des croix bleues (Cf. photo 4)
+
/* --------------------------------------------------------------------------------------------------------
#Placer et fixer un carton de grand format dans la découpeuse laser ; charger le fichier '''DK_Fiches.svg''' (Cf. photo 5), et configurez la gravure du calque "couleur bleue" en faible puissance de gravure, suffisante pour que les croix soient visibles sur le carton). La couleur rouge doit être ignorée (ie, pas de gravure).
+
* SETUP : Initialisation
#Positionner et fixer la feuille plastifiée sur le carton, afin de faire correspondre les guides bleus avec le carton ; relancer la gravure du même fichier '''DK_Fiches.svg''', mais cette fois-ci avec l'utilisation du calque associé à la couleur rouge.
+
  *  -------------------------------------------------------------------------------------------------------- */
 +
void setup() {
  
 +
    // Initialisation de la liaison série, affichage 1er message
  
<u>Cas 2 : pour réaliser de nouvelles fiches</u> :
+
    Serial.begin(115200);
 +
    delay(100) ;
 +
    Serial.println();
 +
    Serial.println("----------------------------------") ;
 +
    Serial.println("Exemple de connexion Wi-Fi évoluée") ;
 +
    Serial.println("----------------------------------") ;
  
#Ouvrir le fichier '''DK_Fiches.xcf''' (avec le logiciel libre GIMP); supprimer tous les calques sauf les deux du bas.
+
    // Tentative de connexion au Wi-Fi. Si la carte n'a pas réussi  se connecter au dernier Point d'Accès connu,
#Définir de nouveaux calques, en respectant les limites de chaque fiche, définies par le calque DK_Fiches.svg
+
    // alors elle va se positionner en mode Point d'Accès, demandera sur l'adresse 192.168.4.1 quel nouveau
#Sauvegardez vos modifications ; exportez le résultat dans un fichier pdf, et repartez à l'étape 1 du cas n° 1.<br />
+
    // 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.
  
''Notes :''
+
        Serial.println(); Serial.print("Connecté ! Adresse IP : ");
 +
        Serial.println(WiFi.localIP());
 +
       
 +
    }
 +
    else {
 +
        Serial.println("Connexion Wi-Fi KO :-(");   
 +
    }
 +
 
 +
}
  
*''un fichier DK_Fiches.jpg est également disponible pour imprimer les fiches sur du papier photo (mode "A4 sans marges").''
+
/* --------------------------------------------------------------------------------------------------------------
*''Le jeu de fiches a été mis à jour, afin d'ajouter une fiche "DebrouilloLed" pour le jeu Pierre/Ciseaux/Feuille. Les photos à gauche montrent le jeu de fiches initial.''<big><br /></big>
+
*  LOOP : fonction appelée régulièrement par le système
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img605.jpg
+
*  ------------------------------------------------------------------------------------------------------------- */
|Step_Picture_01=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img603.jpg
+
void loop() {
|Step_Picture_02=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img601.jpg
+
  /* On ne fait rien de particulier sur cet exemple */
|Step_Picture_03=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img604.jpg
+
}
|Step_Picture_04=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img602.jpg
+
</syntaxhighlight><br /><syntaxhighlight lang="arduino" line="1">
}}
+
/* =========================================================================================================
{{Tuto Step
+
*
|Step_Title=Téléchargement des applications
+
*          CODE MINIMAL RESEAU - ETAPE 2 : Connexion à un point d'accès choisi par l'utilisateur
|Step_Content=Nous supposons ici que la programmation d'un D1 mini et l’utilisation de l'environnement de développement Arduino n'a plus de secrets pour vous, Cf. "Expériences pré-requises" en début de cette page :-).  
+
*         
 +
*          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)
  
Les modules de base (DebrouilloBox.ino et DebrouilloNet.ino), et toutes les applications déjà développées sont disponibles dans le répertoire DebrouilloBox (photo n° 1)
+
#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
  
Dans  l'environnement de développement Arduino, chargez le module principal (DebrouilloBox.ino). Assurez-vous que que le gestionnaire de carte "Lolin D1 Mini"  est prise en compte (photo n°2). Branchez la Débrouillobox à l'ordinateur (câble USB) et vérifiez que  le port est visible (toujours photo n° 2).
+
// Pour les besoins de l'exemple (traces)
  
Téléverser ensuite les modules (photo n°3).
+
bool IAmNotConnected = true ;
  
<br />
+
/* --------------------------------------------------------------------------------------------------------
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img801.jpg
+
*  SETUP : Initialisation
|Step_Picture_01=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img803.jpg
+
*  -------------------------------------------------------------------------------------------------------- */
|Step_Picture_02=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img804.jpg
+
void setup() {
}}
 
{{Tuto Step
 
|Step_Title=Branchement des éléments
 
|Step_Content=Sous forme de mallette pédagogique, les éléments ne seront pas connectés. La connexion fera partie du travail réalisé par le public.
 
  
<br />
+
    // Initialisation de la liaison série, affichage 1er message
  
*Branchez la DebrouilloLight à la première série de trois connecteurs (la plus à gauche lorsqu'on  regarde la face gravée). <u>Tenir compte de codes de couleur adoptés lors de la fabrication de la DebrouilloLight</u> à l'étape 4. Dans notre cas (photo 1), nous n'avions plus de fil noir, qui a été remplacé par du fil bleu.
+
    Serial.begin(115200);
 +
    delay(100) ;
 +
    Serial.println();
 +
    Serial.println("----------------------------------") ;
 +
    Serial.println("Exemple de connexion Wi-Fi évoluée") ;
 +
    Serial.println("----------------------------------") ;
  
<br />
+
    // Déclaration du mode "non bloquant".
 +
   
 +
    myWiFiManager.setConfigPortalBlocking(false);     
  
*Faites de même pour le branchement du DebrouilloServo sur les trois connecteurs centraux.
+
    // 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.
  
<br />
+
        Serial.println(); Serial.print("Connecté ! Adresse IP : ");
 +
        Serial.println(WiFi.localIP());
 +
       
 +
    }
 +
    else {
  
*Sélectionnez  l'application n°1  (positionnez le potentiomètre sur le "1", puis appuyez simultanément sur les deux boutons pendant plus de trois secondes).
+
        // Wi-Fi standard KO, on est passé en mode AP, qui sera traité dans le loop().
 +
       
 +
        Serial.println("Pas de point Wi-Fi connu, passage en mode AP (identifiant \"" + String(mySSID) + "\")");   
 +
    }
 +
 
 +
}
  
<br />
+
/* --------------------------------------------------------------------------------------------------------------
 +
*  LOOP : fonction appelée régulièrement par le système
 +
*  ------------------------------------------------------------------------------------------------------------- */
 +
void loop() {
 +
 
 +
  // Obligatoire en mode non bloquant, pour que le WiFiManager continue sa tâche.
  
*Placez la fiche "Vérification Câblage" sur la DébrouilloBox,
+
  myWiFiManager.process() ;
  
<br />
+
  // Test pour savoir si on est enfin connecté - on ne l'affiche qu'une fois pour limiter les traces
  
*Jouez avec les boutons et le potentiomètre comme indiqué sur la fiche (photo n° 2).
+
  if (IAmNotConnected) {
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img701.jpg
+
      if (WiFi.status() == WL_CONNECTED) {
|Step_Picture_01=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img702.gif
+
          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 ?)
 
}}
 
}}
 
{{Tuto Step
 
{{Tuto Step
|Step_Title=Connexion Wi-Fi
+
|Step_Title=Et maintenant, on fait quoi avec le Wi-Fi ? (tiens, pourquoi pas un petit serveur web ?)
|Step_Content=Les deux premières applications n'ont pas besoin du Wi-Fi, au démarrage la led de la DebrouilloBox doit directement passer au vert.   
+
|Step_Content=... Site web pour allumer une led (à détailler)
 +
 
 +
'''METTRE LIEN(S) vers description et exemples'''
 +
{| class="wikitable" cellspacing="0" border="0"
 +
| height="17" bgcolor="#999999" align="left" |
 +
| valign="middle" bgcolor="#999999" align="center" |
 +
| bgcolor="#999999" align="center" |Site web
 +
|-
 +
| 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" |
 +
|-
 +
| valign="middle" bgcolor="#999999" align="center" |Création de l’objet
 +
| valign="middle" align="left" |
 +
|-
 +
| valign="middle" height="17" bgcolor="#999999" align="center" |Dans le Setup
 +
| valign="middle" bgcolor="#999999" align="center" |Démarrage de l’objet
 +
| valign="middle" align="left" |
 +
|-
 +
| valign="middle" height="41" bgcolor="#999999" align="center" |Dans le Loop
 +
| valign="middle" bgcolor="#999999" align="center" |Utilisation
 +
| valign="middle" align="left" |
 +
|}<br /><syntaxhighlight lang="arduino" line="1">
 +
////////////////////////
 +
//  *Code Minimal*  //
 +
//    Wi-Fi de base  //
 +
////////////////////////
 +
/*Les programmes "Code Minimal" des petits débrouillards sont conçu pour
 +
permettre la prise en main rapide d'un composant électronique.
 +
A retrouver sur https://www.wikidebrouillard.org
 +
 
 +
(...)
 +
   
 +
  ___
 +
/ ___ \
 +
|_|  | |
 +
    /_/
 +
    _  ___  _
 +
    |_| |___|_| |_
 +
        ___|_  _|
 +
        |___| |_|
 +
 
 +
Les petits Débrouillards - décembre 2020 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
  
 +
*/
  
Les autres applications vont chercher à se connecter (clignotement de la led en bleu). Nous avons ensuite deux possibilités :
+
// Déclaration des variables constantes
 +
(...)
  
*La led passe au vert,  ce qui signifie que la DebrouilloBox a réussi à se connecter sur un Wi-Fi qui était déjà connu.
+
// Boucle d'initialisation
 +
void setup() {
  
<br />
+
  (...)
 +
 
 +
}
  
*La Led passe en rouge, ce qui signifie que la maquette n'a pas trouvé de réseau connu.  Dans ce cas, elle s'est elle-même positionnée comme un point d'accès Wi-Fi, sur lequel il faudra d’abord se connecter (voir photo n° 1) :
+
//Boucle principale
*#Avec un téléphone ou ordinateur, connectez vous au point d'accès "DebrouilloBox_nnnn''"''. Il n'y a pas de mot de passe. Il y aura peut-être un message indiquant qu'Internet n'est pas disponible, c'est normal, ne pas en tenir compte.
+
void loop() {
*#Sur votre navigateur préféré, tapez "192.168.4.1". Vous aurez alors l’interface du Wi-Fi Manager. 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é avec son mot de passe, et cliquez sur Save.
 
  
Si tout se passe bien, la led repasse alors au vert.
+
  (...)
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences_DK_Img802.jpg
 
}}
 
{{Tuto Step
 
|Step_Title=Comment développer de nouvelles applications ?
 
|Step_Content=Une nouvelle application (n° 123 par exemple) devra être définie dans un nouveau module '''Module_123_MonAppli.ino'''. Au sein de ce module, on devra trouver au moins une fonction '''M123_Event,''' lui permettant de réagir à cinq types d’événements :                                                                                                                                               
 
  
*'''GL_EVENT_SETUP''' : appelé une seule fois, à l'initialisation de l'application. C'est là où votre nouvelle application va initialiser ses propres données, demander l'utilisation si Wifi si elle le souhaite, etc...
+
}
*'''GL_EVENT_POT''', lorsque la valeur du potentiomètre a changé
+
</syntaxhighlight><br />
*'''GL_EVENT_LEFT''', lorsque l'état du bouton gauche a changé
 
*'''GL_EVENT_RIGHT''', lorsque l'état du bouton droit a changé
 
*'''GL_EVENT_LOOP''', appelé régulièrement pour "réactiver" votre application
 
  
Le kit met à disposition un certain nombre de fonctions de base (utilisation du WiFi, interrogation d'un serveur, utilisation de la DebrouilloLight et du DebrouilloServo, ...) utilisables par votre nouvelle application.
+
Une application plus complète, permettant d'actionner plusieurs leds et un moteur, et de récupérer des données d'un capteur, est disponible [https://www.wikidebrouillard.org/wiki/Commander_un_D1_mini_avec_une_interface_web ici].
  
  
Pour plus de détails, voir les explications fournies dans le module '''Module_999_Exemple.ino'''. qui servira de base à votre propre module.
+
L'utilisation de notre carte en mode n'est qu'un exemple de ce qu'il est possible de faire, il existe plein d'autres possibilités, détaillées dans les étapes suivantes !
|Step_Picture_00=Le_DebrouilloKit_-_Multipliez_les_exp_riences___DK_Img901.jpg
+
}}
 +
{{Tuto Step
 +
|Step_Title=Interrogation de serveurs web (mode JSON)
 
}}
 
}}
 
{{Tuto Step
 
{{Tuto Step
|Step_Title=Comment développer de nouveaux boitiers ?
+
|Step_Title=Diffusion d'information (mode MQTT)
|Step_Content=Comme on a pu le voir, il reste une entrée/sortie disponible sur le boitier de commande. Elle est utilisable pour activer un autre élément (2ème servo moteur par exemple). On pourrait également envisager des données en entrée, par exemple fournies par un capteur (température, CO2, ...).
+
}}
 +
{{Notes
 +
|Explanations='''<u>Compléments d'information pour l'étape 2 "Oui, mais si mon Wi-Fi change ?"</u>'''
 +
 
 +
 
 +
Grace à la '''bibliothèque WiFiManager''', dans le cas où la carte n'a pas pu se connecter au dernier Wi-Fi connu, elle s'est elle-même positionnée comme un Point d'Accès Wi-Fi. La sélection de votre box Wi-Fi préfre se fait alors en trois étapes ::
 +
 
 +
<br />
  
 +
# Avec un téléphone ou ordinateur, connectez-vous au point d'accès "AP_PetitDeb"  et tapez le mot de passe associé (Cf. le code décrit à l'étape 2). 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
  
Idéalement le nouvel élément devra être intégré dans le même type de boitier en bois que ceux qui existent (la documentation devra alors fournir les fichiers svg). Les dimensions du nouveau boitier devront si possible être compatibles avec ceux existants (Cf. animation en tout début de page), par exemple un capteur pourrait facilement être intégré dans une boite de même taille qu'un DebrouilloServo.
 
  
 +
... Lors des prochaines réinitialisation, ou ré-allumage, de la carte, celle-ci cherchera d'abord à se connecter à ce nouveau Point d'Accès Wi-Fi.
  
Il faudrait également fournir au moins un exemple d'application du nouveau boitier, et les fiches cartonnées associées aux boitiers utilisés par cette nouvelle application.
+
<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}}<br />
 
}}
 
}}
{{Notes}}
 
 
{{Tuto Status
 
{{Tuto Status
 
|Complete=Draft
 
|Complete=Draft
 
}}
 
}}

Version du 23 novembre 2022 à 12:25

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

Code minimal des fonctions r seau WiKi Reseau.png
Nous allons résumer ici les différentes façons d'utiliser les fonction réseau des cartes compatibles Arduino possédant une puce Wi-Fi (Wemos D1 mini, ESP32, ...). Ces fonctions vont permettre à ces cartes de discuter entre elles, d'accéder à un site web, ou même de se comporter elles-même comme un (mini) site web.
Licence : Attribution (CC-BY)

Introduction

Cette expérience regroupe différentes manières de bénéficier des capacités de communication des cartes compatibles Arduino possédant une puce Wi-Fi. 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. Toutes les étapes décrites ici sont en fait indépendantes :


  • Les deux premières étapes permettent à notre carte de se connecter au Wi-Fi, de façon basique (étape 1) ou un peu plus évoluée, et souple (étape 2) ;
  • L'étape 3 permet à la carte d'être dans un mode particulier, dit "AP"(Access Point") et se comporter comme une borne Wi-Fi.
  • Les étapes suivantes correspondent à des besoins différents :
    • étape 4 : visualiser et/ou modifier des paramètres de notre carte via une interface web ;
    • étape 5 : permettre à notre carte d'accéder à des données d'un site externe, utilisant le format standardisé JSON (1)
    • étape 6 : permettre à notre carte d'envoyer et de recevoir des messages courts, via le protocole standardisé MQTT (1)

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.


Il existe bien sûr déjà un tas de tutoriels avec des exemples similaires, sans compter bien sûr les exemples fournis avec les bibliothèques que l'on va utiliser (2). La modeste contribution de de cette page est de tenter de regrouper les cas de figures les plus importants. S'il en manque, n'hésitez pas à mettre un commentaire, voire à ajouter une étape !


(1) Pas d'inquiétude sur les "JSON "et autre "MQTT", on explique tout dans les étapes correspondantes

(2) On donnera d'ailleurs les liens vers les bibliothèques et leurs exemples à chaque étape.
  • Expériences pré-requises

Étape 1 - Connexion Wi-Fi de base

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 mon Wi-Fi change ?

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 ...
  • 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 ...
  • 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-Fisur lequel la carte a réussi à se connecter. Lors de l'appel à sa fonction autoconnect(), la bibliothèque va d'abord chercher à se connecter sur ce Point d'Accès. 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 permettant d'afficher les bornes Wi-Fi environnantes, et d'en sélectionner une.


Pour plus de détails, et présentation de l'interface utilisateur proposée par la bibliothèque, voir le chapitre "Explications" en bas de cette page.


Wifimanager
Avant le Setup Importation de la bibliothèque #include <WiFiManager.h>
Création de l’objet WiFiManager myWiFiManager;
Dans le Setup Démarrage de l’objet if (myWiFiManager.autoConnect(Nom_AP, MotDePasse_AP)) { (... connexion OK !) }
Dans le Loop Utilisation


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

Code minimal : 2 cas sont donnés ci-dessous, le mode bloquant (par défaut), et le mode non bloquant.
 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 }

 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     
42      myWiFiManager.setConfigPortalBlocking(false);      
43 
44     // Tentative de connexion au Wi-Fi. Si la carte n'a pas réussi  se connecter au dernier Point d'Accès connu,
45     // alors elle va se positionner en mode Point d'Accès, demandera sur l'adresse 192.168.4.1 quel nouveau
46     // Point d'Accès choisir. Par défaut, on restera bloqué tant que l'utilisateur n'aura pas fait de choix.
47     
48     Serial.println("Connexion au Wi-Fi ...");
49     if (myWiFiManager.autoConnect(mySSID, mySecKey)) {
50       
51         // Wi-Fi en mode standard ok --> On affiche l'adresse IP obtenue.
52 
53         Serial.println(); Serial.print("Connecté ! Adresse IP : ");
54         Serial.println(WiFi.localIP());
55         
56     }
57     else {
58 
59         // Wi-Fi standard KO, on est passé en mode AP, qui sera traité dans le loop().
60         
61         Serial.println("Pas de point Wi-Fi connu, passage en mode AP (identifiant \"" + String(mySSID) + "\")");     
62     }
63    
64 }
65 
66 /* --------------------------------------------------------------------------------------------------------------
67  *  LOOP : fonction appelée régulièrement par le système
68  *  ------------------------------------------------------------------------------------------------------------- */
69 void loop() { 
70   
71   // Obligatoire en mode non bloquant, pour que le WiFiManager continue sa tâche.
72 
73   myWiFiManager.process() ;
74 
75   // Test pour savoir si on est enfin connecté - on ne l'affiche qu'une fois pour limiter les traces
76 
77   if (IAmNotConnected) {
78       if (WiFi.status() == WL_CONNECTED) {
79           Serial.print("Connecté au point d'accès " + String(WiFi.SSID()) + ", Adresse IP : ") ;
80           Serial.println(WiFi.localIP());
81           IAmNotConnected = false ;
82       }
83   }
84   
85 }

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

Étape 4 - Et maintenant, on fait quoi avec le Wi-Fi ? (tiens, pourquoi pas un petit serveur web ?)

... Site web pour allumer une led (à détailler)

METTRE LIEN(S) vers description et exemples

Site web
Avant le Setup Importation de la bibliothèque
Création de l’objet
Dans le Setup Démarrage de l’objet
Dans le Loop Utilisation

 1 ////////////////////////
 2 //   *Code Minimal*   //
 3 //    Wi-Fi de base   //
 4 ////////////////////////
 5 /*Les programmes "Code Minimal" des petits débrouillards sont conçu pour 
 6 permettre la prise en main rapide d'un composant électronique.
 7 A retrouver sur https://www.wikidebrouillard.org
 8 
 9 (...)
10  
11    ___
12  / ___ \
13 |_|   | |
14      /_/ 
15      _   ___   _ 
16     |_| |___|_| |_
17          ___|_   _|
18         |___| |_|
19 
20 Les petits Débrouillards - décembre 2020 - CC-By-Sa http://creativecommons.org/licenses/by-nc-sa/3.0/
21 
22 */
23 
24 // Déclaration des variables constantes
25 (...)
26 
27 // Boucle d'initialisation
28 void setup() {
29 
30   (...)
31 
32 }
33 
34 //Boucle principale
35 void loop() {
36 
37   (...)
38 
39 }

Une application plus complète, permettant d'actionner plusieurs leds et un moteur, et de récupérer des données d'un capteur, est disponible ici.


L'utilisation de notre carte en mode n'est qu'un exemple de ce qu'il est possible de faire, il existe plein d'autres possibilités, détaillées dans les étapes suivantes !

Étape 5 - Interrogation de serveurs web (mode JSON)

Étape 6 - Diffusion d'information (mode MQTT)

Comment ça marche ?


Explications



  1. Avec un téléphone ou ordinateur, connectez-vous au point d'accès "AP_PetitDeb" et tapez le mot de passe associé (Cf. le code décrit à l'étape 2). 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


... Lors des prochaines réinitialisation, ou ré-allumage, de la carte, celle-ci cherchera d'abord à se connecter à ce nouveau Point d'Accès Wi-Fi.


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



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

Commentaires

Draft