Parcourir le wiki

  1 /* =========================================================================================================
  2  * 
  3  *                              CODE MINIMAL RESEAU - ETAPE 4 : site WEB
  4  *          
  5  *              CAS B : Page HTML plus évoluéee, et modification d'une variable de la carte
  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èques WiFi et WebServer: ATTENTION, choisir celles correspondant à votre matériel. 
 12 // ATTENTION AUX MAJUSCULES & MINUSCULES ! Sinon d'autres bibliothèques, plus ou moins valides, seraient utilisées.
 13 
 14 #include                 // A utiliser pour le D1 Mini 
 15 #include            // A utiliser pour le D1 Mini
 16 //#include                      // A utiliser pour l'ESP32
 17 //#include                 // A utiliser pour l'ESP32
 18 
 19 const char* mySSID = "AP_PetitDeb" ;    // On va utiliser le mode "Access Point" pour cet exemple
 20 const char* mySecKey = "PSWD1234" ;
 21 
 22 // Déclaration de notre serveur web interne, qui écoutera sur le port 80.
 23 
 24 ESP8266WebServer myWeb(80);           // A utiliser pour le D1 Mini 
 25 // WebServer myWeb(80) ;              // A utiliser pour l'ESP32
 26 
 27 // Variable qui sera affichée et modifiée depuis notre interface web.
 28 
 29 int myValue = 0 ;
 30 
 31 /* --------------------------------------------------------------------------------------------------------
 32  *  webPage01 : formattage HTML de la page web. 
 33  *  - En fait cette fonction doit rendre une chaîne (String) contenant l'intégralité du code HTML qui sera
 34  *    envoyé au navigateur de l'utilisateur.
 35  *  - Comme dans l'exemple précédent (Exemple_4A), on insère dans cette chaîne une information de la carte,
 36  *    ici la valeur de notre variable 'my value'. Mais on va aussi ajouter des boutons permettant de modifier
 37  *    cette valeur sur la carte. 
 38  * - Idem Exemple_4A : pour pouvoir débugger facilement le code HTML/Javascript sur un browser (par exemple 
 39  *   Firefox / Outils supplémentaires / Outils de développement Web), il est préférable d'indenter le code à
 40  *   l'intérieur de la chaîne de caractère, et de mettre des sauts de ligne ("\n") à la fin de chaque ligne 
 41  *   de code HTML. 
 42  *  -------------------------------------------------------------------------------------------------------- */
 43 String webPage01() {
 44 
 45     String p;  
 46 
 47     // Début de construction de la page web (entête, titre, paramètres)
 48     
 49     p =  "\n" ; 
 50     p += "\n" ;              // Titre de la page
 51     p += "    \n" ;           // Codage des caractères, UTF-8 est fortement recommandé
 52     p += "\n" ;
 53 
 54     // Définitions CSS (), qui permettent de décrire le format des objets sur la page web. 
 55     // Si vous voulez tout savoir sur CSS, on peut trouver une bonne introduction ici : https://developer.mozilla.org/fr/docs/Learn/CSS
 56     // et une référence complète ici : https://developer.mozilla.org/fr/docs/Web/CSS/Reference
 57     
 58     p  += "\n" ;
 62 
 63     // Début du code javascript. Javascript est le langage utilisé au niveau des navigateurs web (Firefox, Microsoft Edge, Google Chrome, ...)
 64     // pour introduire un peu de dynamisme et d'intelligence dans les pages web. Cela peut permettre, par exemple, de réaliser une action 
 65     // locale et immediate, telle que l'agrandissement d'une image, le changement d'un texte, etc ... sans avoir à réinterroger le serveur web.
 66     // 
 67     // Dans notre cas, la fonction 'addition(val)' ci-dessous va ajouter le paramètres 'val' à l'adresse du serveur web, et va ensuite appeler
 68     // 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
 69     // 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 
 70     // fonction runPage01() définie plus bas. 
 71     //
 72     // 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'
 73 
 74     p += "\n" ;
 79 
 80     // 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'.
 81     // La fonction addition() définie dans le code javascript ci-dessus, sera appelée lorsqu'on appuie sur ces boutons.
 82     
 83     p += "\n" ;
 84     p += "    

Valeur actuelle : " + String(myValue) + "

\n";                 
 85     p +=  "   
\n";  
 86     p +=  "         \n" ;
 87     p +=  "         \n" ;
 88     p +=  "   
\n";
 89     p += "" ;
 90 
 91     // ça y est, la page web est complètement constituée !
 92 
 93     return p;
 94   
 95 }
 96 
 97 /* --------------------------------------------------------------------------------------------------------
 98  *  runPage01 : gestion de la page web
 99  *  -------------------------------------------------------------------------------------------------------- */
100 void runPage01() {
101 
102     // Si la page a un paramètre 'add', alors on récupère sa valeur, et on l'ajoute à notre variable 'myValue'.
103   
104     if ( myWeb.hasArg("add") ) { 
105         Serial.println("Traitement pge web, arg = '" + String(myWeb.arg("add")) + "'") ;
106         int myArg = myWeb.arg("add").toInt() ; 
107         myValue = myValue + myArg ;
108         Serial.println("Traitement page web, arg = '" + String(myWeb.arg("add")) + "' --> Nouvelle valeur : " + String(myValue)) ;
109     }
110 
111     // On renvoie la page Web.
112     myWeb.send ( 200, "text/html", webPage01() ); 
113 }
114 
115 /* --------------------------------------------------------------------------------------------------------
116  *  SETUP : Initialisation
117  *  -------------------------------------------------------------------------------------------------------- */
118 void setup() {
119 
120     // Initialisation de la liaison série, affichage 1er message
121 
122     Serial.begin(115200);
123     delay(100) ;
124     Serial.println(); 
125     Serial.println("----------------------") ;
126     Serial.println("Exemple de serveur WEB") ;
127     Serial.println("----------------------") ;
128 
129     // Déclaration du mode "Point d'Accès". On s'arrête là si échec.
130 
131     Serial.println("Déclaration Mode AP, SSID \"" + String(mySSID) + "\"") ;
132     if (!WiFi.softAP(mySSID,mySecKey)) {
133         Serial.println("Mode AP KO ... :-(") ;
134         return ;
135     }
136 
137     // Affichage de l'adresse IP principale du Point d'Accès.
138 
139     Serial.print("Mode AP OK, IP Address : ") ;
140     Serial.println(WiFi.softAPIP()) ;
141 
142     // Définition des points d'entrée du serveur Web (un seul ici), 
143     // et démarrage du serveur.
144   
145     myWeb.on ( "/", runPage01 );
146     myWeb.begin();
147     
148 }
149 
150 /* --------------------------------------------------------------------------------------------------------------
151  *  LOOP : fonction appelée régulièrement par le système
152  *  ------------------------------------------------------------------------------------------------------------- */
153 void loop() { 
154   
155     // Traitement des requêtes web.
156     myWeb.handleClient(); 
157       
158 }