Actualisation page Web avec Java Script sketch ino

Bonjour,
Je travaille sur une alarme maison qui utilise 6 détecteurs de présence. Mon sketch Arduino sur Méga 2650 identifie le détecteur activé, allume la diode correspondante et actualise la variable (ex indexData[4]=1 pour le détecteur 4) que je voudrais récupérer avec le Java-Script pour que la page Web chargée depuis la carte SD checke la case à cocher correspondante et affiche le texte précisant la date et l’heure de l’événement dans la zone texte cible (ces données sont enregistrées dans un fichier memopres.txt sur la carte SD).
Je ne sais si le JS doit être écrit dans le sketch lui-même (ce qui rendrait peut être la variable accessible) ou dans le code de la page (comme je l’ai fait pour le bouton de réinitialisation des cases à cocher et des zones texte.
Voici ma page index.htm avec son code source et mon sketch arduino.
Merci, si vous pouvez m’aider à rédiger les quelques lignes de JS qui me manquent pour cela.

Citation:

---

Envoyé par Yakuza34

Voici ma page index.htm avec son code source et mon sketch arduino.
Merci, si vous pouvez m’aider à rédiger les quelques lignes de JS qui me manquent pour cela.

---

Bonjour,

Les images sont totalement inexploitables si l'on souhaite étudier le code et proposer des évolutions.
Il faut poster le code sous forme de texte à l'intérieur du message en l'encadrant de balises "code". Pour cela, il vous suffit d'utiliser le bouton Code (#) juste au dessus de la zone de saisie des messages.

Par ailleurs, s'il s'agit d'écrire du code JS, la question n'est pas postée au bon endroit...

Bonjour al1_24,

Merci pour ta réponse.
Où dois-je rédiger ma requête ?

Bonne journée.

Citation:

---

Je ne sais si le JS doit être écrit dans le sketch lui-même (ce qui rendrait peut être la variable accessible) ou dans le code de la page

---

Votre arduino n'exécute pas de Javascript...


ce serait bien d'expliquer aussi comment tout cela est organisé (plusieurs arduino qui pilotent chacun un capteur et émettant leurs données vers un serveur central ? un seul arduino qui a des fils allant à chaque capteur ? ...)

en supposant que vous n'avez qu'un seul Arduino qui écoute les capteurs et propose la page web:

Votre Arduino est complètement séparé du/des navigateurs web qui ont chargé la page: en pratique vous ouvrez un navigateur sur votre Mac/PC/Tablette/Smartphone et effectuez une requête HTTP vers votre arduino (qui doit donc être accessible et je suppose publie cette page web). La page est envoyée par l'Arduino, et le navigateur web interprète le document reçu pour peindre la page. Généralement ensuite la connexion entre le navigateur web et le serveur (arduino) est rompue.

Si vous voulez un rafraîchissement de la page, il faut que le navigateur effectue une nouvelle demande. Pour éviter de faire clignoter la page, on fait cela souvent avec AJAX - donc on met dans le code de la page web un script qui tourne régulièrement et qui va demander par exemple toutes les 5 secondes à l'arduino "Hey, peux tu me dire quels sont les états des checkboxes?". Cette information arrive (souvent en JSON) dans le script qui utilise le DOM pour aller modifier la présentation de certains éléments (ici les checkboxes et les textfields).

c'est donc plus une question Web (AJAX) que Arduino. (côté Arduino vous allez recevoir une requête HTTP et vous allez construire le JSON et le renvoyer en réponse)

Bonjour Jay M,

Merci pour ta réponse.
J'ai suivi bien des exemples de projets et des tutos utilisant le JS et les sketches arduino. Ils partent d'une action sur la page Web (action sur un bouton, une saisie de texte...) qui appelle une fonction JS écrite dans le "HEAD" ou le "BODY". Cette fonction actualise la page en conséquence. Dans ma page Web, je sais gérer par exemple le bouton de réinitialisation.
Je cherche en fait à faire "l'inverse" ; c'est à dire récupérer une variable mise à jour dans le sketch et l'envoyer dans le script JS de la page (ou dans le sketch lui-même - je ne sais ?).
Mon sketch reçoit les émissions des détecteurs de présence ou d'ouverture de portes etc... Un variable est alors mise à jour qui identifie l'émetteur. Je cherche alors à ce que mon script JS la prenne en compte pour cocher dans la page Web la case à cocher du détecteur identifié.

Remarque : les projets qui détectent l'action d'un switch utilisent les fonctions d'événements qui récupèrent par exemple l'état d'un pin. Dans mon cas mon "événement est l'actualisation d'une variable !

Alors, comment se débrouiller ?

Merci pour ta réponse et celle du groupe.

Voici le code du sketch :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185

<!-- Chargement de la page avec bouton de réinitialisation des cases à cocher et des textes d'événements --> <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>ALARME CHALET</title> <script>                         function GetArduinoIO()                         {                                 nocache = "&nocache=" + Math.random() * 1000000;                                 var checkboxes = document.querySelectorAll(".check_LEDs > input[type='checkbox']");                                   var textes = document.querySelectorAll(".Data_ALARM > input[type='text']");                                 var annee = now.getFulYear();                                 var mois = getMonth() + 1;                                 var jour = getDate();                                 var heure = getHours();                                 var minutes = getMinutes();                                   for (var i=0; i<6; i++)                                 {                                         if (pinsLeds[i]=HIGH)                                         {                                                 document.checkboxes[i].checked = true;                                                 document.textes[i].value = année + "-" + mois + "-" + jour + "  " + heure + ":" + minutes;                                         }                                         else                                         {                                                 document.checkboxes[i].checked = false;                                                 document.textes[i].value = "Evénement " + (i+1);                                         }                                 }                                   setTimeout('GetArduinoIO()', 1000);                         }                     </script>   <!-- CSS --> <style>                 body                 {                         background-color: rgba(153, 204, 255, 0.5); /* Fond rouge à moitié transparent */                 }                 .out_box1 {                         float: right;                         margin: 0 50px 10px 10px;                           /*border: 1px solid blue;*/                         padding: 0 0 10px 10px;                         min-width: 250px;                 }                 .out_box2 {                         float: left;                         margin: 10px 50px 10px 10px;                           /*border: 1px solid blue;*/                         padding: 20px 5px -10px 100px;                         min-width: 200px;                 }                 input {                         margin: 0;                         vertical-align: -3px;                 }                 h1 {                         font-size: 150%;                         font-style: bold;                         text-decoration: underline;                         color: blue;                         margin: 30px 0 30px 200px;                 }                 h2 {                         font-size: 150%;                         font-style: bold;                         color: mediumpurple;                         margin: 0 0 0 30px;                   }                 .Titre {                         font-size: 150%;                         color: maroon;          <!--#5734E6;-->                 }                 .liste {                         font-size: 1.3em;                         font-style: italic;                         text-align: center;                         color: purple;                 }                 p, form {                         font-size: 90%;                         color: #252525;                 }                 .button {                         float: left;                         width: 200px;                         height: 40px;                         font-size: 1.3em;                         color: blue;                 }                 .Data_ALARM {                         max-width: 250px;                         font-size: 0.7em;                 }                 table                 {                     border-collapse: collapse;                 }                 td, th /* Mettre une bordure sur les td ET les th */                 {                     border: 1px solid black;                 }                 th                 {                         /*background-color: grey; */                         background-color: rgba(37, 146, 255, 0.5); /* Fond rouge à moitié transparent */                 }           </style>   </head>   <body onload="GetArduinoIO()"> <h1>ALARME CHALET</h1> <!-- <h2>Identification des détecteurs actifs</h2> --> <Table> <caption>Identification des détecteurs actifs - Informations événements</caption> <tr> <!-- Titres des colonnes --> <th>Liste des détecteurs d'intrusion.</th> <th>Détails des événements</th> </tr> <tr> <!-- Une seule ligne --> <td> <!-- Premiere boite dans colonne 1--> <div class="out_box1"> <form class="check_LEDs" name="LED_form1"> <input type="checkbox" name="LED1" id= "LED" /> LED 1 (Pin 22)<strong>---Porte d'entrée</strong><br /><br /> <input type="checkbox" name="LED2" id= "LED" /> LED 2 (Pin 26)<strong>---Fenêtre Salle de Bains</strong><br /><br /> <input type="checkbox" name="LED3" id= "LED" /> LED 3 (Pin 30)<strong>---Porte-Fenêtre-Salon</strong><br /><br /> <input type="checkbox" name="LED4" id= "LED" /> LED 4 (Pin 34)<strong>---Porte-Fenêtre-Bureau</strong><br /><br /> <input type="checkbox" name="LED5" id= "LED" /> LED 5 (Pin 38)<strong>---Porte Garage Ouest</strong><br /><br /> <input type="checkbox" name="LED6" id= "LED" /> LED 6 (Pin 42)<strong>---Porte Garage Est</strong><br /> </form> </div> </td> <td> <!-- Deuxième boite dans colonne 2--> <div class="out_box2"> <!-- <p class="liste">Date-Heure-Détecteur</p> --> <form class="Data_ALARM" name="Data_ALARM"> <input id="text" type="text" value="Evénement 1" /><br /><br /> <input id="text" type="text" value="Evénement 2" /><br /><br /> <input id="text" type="text" value="Evénement 3" /><br /><br /> <input id="text" type="text" value="Evénement 4" /><br /><br /> <input id="text" type="text" value="Evénement 5" /><br /><br /> <input id="text" type="text" value="Evénement 6" /><br /><br /> </form> </div> </td> </tr> </Table><br />   <!-- Bouton de réinitialisation des cases à cocher --> <input type="button" value="Réinitialisation" id ="unCheck" onclick="document.getElementById('LED').change();" /> <script>                         var buttonUnCheck   = document.getElementById('unCheck'),                 buttonUncheck = document.getElementById('unCheck');                                 if (buttonUnCheck) {                             buttonUnCheck.addEventListener('click', function() {                                 var checkboxes = document.querySelectorAll(".check_LEDs > input[type='checkbox']");                                  // (".check_LEDs > input[type='checkbox']") va chercher les éléments input de la classe                                 for (var i=0, c=checkboxes.length; i<c; i++) {                                     checkboxes[i].checked = false;                                 }                                     }, false);                         }                         if (buttonUnCheck) {                                 buttonUnCheck.addEventListener('click', function() {                                         var textes = document.querySelectorAll(".Data_ALARM > input[type='text']");                                 for (var i=0, c=textes.length; i<c; i++) {                                         textes[i].value = "Evénement " + (i+1);                                 }                               }, false);                         }                 </script>   </body> </html>

---

****************************************************************************************************
Et le code ino :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360

/*   Simple example for receiving   - Quatre detecteurs d'ouverture C1 & C2, AD1 et AD2   - Deux détecteurs de présence A et B   -LEDs A, B,C1,C2, AD1 et AD2 en pins 22, 24, 26, 28, 30 et 32   -Reception signaux du RX en pin 2   -Pin 3 pour melodie   -Pin 4 pour carte SD   -Pin 8 pour inter commande effacement fichier SD pour enregistrement des alarmes   -Pin 10 pour carte SD (11, 12 et 13 pour la Carte SD)   - Pins TX : 5 (GND),6 (VCC) et 7 (Data)   */   #include <Ethernet.h> byte mac[] = {0x90, 0xA2, 0xDA, 0x00, 0x1A, 0x71}; //physical mac address byte ip[] = { 192, 168, 1, 17 }; // ip in lan EthernetServer server(80); //server port   //Identification detecteur #include <RCSwitch.h> RCSwitch mySwitch = RCSwitch(); #define detecteurA 3535302 #define detecteurB 9406502 #define detecteurC1 16391086 //defines incoming data set by user which is transmitted : 111110100001101110101110 = code detecteur ouverture porte C1!!!!! #define detecteurC2 4030638 //defines incoming data set by user which is transmitted : 001111011000000010101110 = code detecteur ouverture porte C2!!!!! #define detecteurAD1 12894079 #define detecteurAD2 12893567 String detecteur = "";   //Module temps reel #include <Wire.h> #include "RTClib.h" RTC_DS3231 rtc;   // Declaration des types de variables à concatener pour afficher la date String dateActuelle=""; String heureActuelle=""; String stringSlash = "/"; String stringPoints= ":"; String stringTiret= "-"; String dataEvent= "";   //Carte SD #include <SPI.h> #include <SD.h>   File webFile; File monFichier; int tailleFichier=0; boolean messageOK=1; boolean optionEffacement=0; int x = 0; //rang enregistrement int pinBouton = 8; // Pin du bouton poussoir commande effacement au depart boolean etatBouton;   const byte pinsLeds[]= {22,24,26,28,30,32};     void gestionClient() { // Create a client connection EthernetClient client = server.available(); if (client) { boolean currentLineIsBlank = true; Serial.println("Client en ligne !"); if (client.connected()) { while (client.available()) { char c = client.read(); delay(1); // last line of client request is blank and ends with \n // respond to client only after last line received if (c == '\n' && currentLineIsBlank) { // send a standard http response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); client.println(); // send web page webFile = SD.open("index.htm"); // open web page file if (webFile) { while(webFile.available()) { client.write(webFile.read()); // send web page to client } webFile.close(); } break; } // every line of text received from the client ends with \r\n if (c == '\n') { // last character on line of received text // starting new line with next character read currentLineIsBlank = true; } else if (c != '\r') { // a text character was received from client currentLineIsBlank = false; }   } //End while(client.available()) } //End if (client.connected()) //if (c == '\n') delay(1); //stopping client client.stop(); //Serial.println("Communication avec le Cient interrompue !"); } //End if (client) } // End gestion client     void setup() { //start Ethernet //////Ethernet.begin(mac, ip, gateway, subnet); Ethernet.begin(mac, ip); server.begin(); Serial.print ("*\n -> Le serveur est sur l'adresse : "); Serial.println(Ethernet.localIP()); //enable serial data print Serial.begin(9600); Serial.println("servertest1"); // so I can keep track of what is loaded   mySwitch.enableReceive(0); // Receiver on interrupt 0 => that is pin #2 pinMode(led,OUTPUT); //mySwitch.setPulseLength(338); POUR UNE EMISSION ! et non une réception   //Time reel if (! rtc.begin()) { Serial.println("Couldn't find RTC"); while (1); }   //Carte SD pinMode(10,OUTPUT); // laisse la broche SS en sortie - obligatoire avec librairie SD digitalWrite(10,HIGH); // mais désactive le circuit intégré W5100 du module ethernet! message("Initialisation"); if (!SD.begin(4)) //Test du début de la communication avec la carte sur le pin 4 { Serial.println("Communication impossible !"); return; } Serial.println("Communication etablie !"); // check for index.htm file if (!SD.exists("index.htm")) { Serial.println("ERROR - Can't find index.htm file!"); return; // can't find index file } Serial.println("SUCCESS - Found index.htm file."); if (!SD.exists("MEMOPRES.TXT")) { Serial.println("ERROR - Can't find MEMOPRES.TXT file!"); return; // can't find index file } Serial.println("SUCCESS - Found MEMOPRES.TXT file.");     pinMode(8,INPUT_PULLUP); // pour effacer le contenu avant d'enregistrer int root = SD.open("/"); //ouvre la SD Card a la racine //Paramétrage des Leds detecteurs   // NEW for (int i= 0; i<6 ; i++) { pinMode(pinsLeds[i], OUTPUT); digitalWrite(pinsLeds[i], LOW); } }     void loop() { // Connexion Internet et chargement de la page WEB "index.htm" de lacarte SD gestionClient();   //Verif commande effacement carte //lecture et attribution de l'état du bouton etatBouton = digitalRead(pinBouton); if (!etatBouton) { optionEffacement=1; message("Effacement"); Effacement(); x=0; //remise a 0 du compteur de series }   //Reception signaux if (mySwitch.available()) { Serial.println("Reception"); Serial.println(" *** "); int value = mySwitch.getReceivedValue(); if (value == 0) { Serial.print("Codage non reconnu !"); } else { // used for checking received data Serial.print("Received "); Serial.println(value); Serial.print(" / "); Serial.print( mySwitch.getReceivedBitlength() ); Serial.print("bit "); Serial.print("Protocol: "); Serial.println( mySwitch.getReceivedProtocol() ); }   if (mySwitch.getReceivedValue()) { process(); } mySwitch.resetAvailable(); Serial.println(" "); } delay(100); }     void process() { unsigned long res = mySwitch.getReceivedValue();   switch (res) { case detecteurA: Serial.println("Emetteur de presence A !"); detecteur = "Bureau"; digitalWrite(pinsLeds[0],HIGH);   break; case detecteurB: Serial.println("Emetteur de presence B !"); detecteur = "Salon"; digitalWrite(pinsLeds[1],HIGH); break; case detecteurC1: Serial.println("Emetteur d'ouverture C1 !"); detecteur = "Porte Entree"; digitalWrite(pinsLeds[2],HIGH); break; case detecteurC2: Serial.println("Emetteur d'ouverture C2 !"); detecteur = "Porte fenetre Est"; digitalWrite(pinsLeds[3],HIGH); break; case detecteurAD1: Serial.println("Emetteur d'ouverture AD1 !"); detecteur = "Porte garage Est"; digitalWrite(pinsLeds[4],HIGH); break; case detecteurAD2: Serial.println("Emetteur d'ouverture AD2 !"); detecteur = "Porte garage ouest"; digitalWrite(pinsLeds[5],HIGH); break; }   // Carte SD DateEtHeure(); //definition date et heure avec le module DS3231 ouvertureFichier(); ecritureFichier(); dataEvent = dateActuelle + stringTiret + heureActuelle + stringTiret + detecteur; Serial.println(dataEvent); fermetureFichier(); detecteur = ""; }     void DateEtHeure() { DateTime now = rtc.now(); //recuperation date et heure // Recuperation date et heure int jour= now.day(), mois=now.month() , an = now.year(); dateActuelle = jour + stringSlash + mois + stringSlash + an; Serial.print(dateActuelle); Serial.print(" "); int heure = now.hour() , minut = now.minute(); heureActuelle = heure + stringPoints + minut; Serial.println(heureActuelle); Serial.println(); delay(3000); }     void ouvertureFichier() { // **************** OUVERTURE du FICHIER *******************   Serial.println("Ouverture du fichier"); if (!( monFichier = SD.open("MEMOPRES.TXT",FILE_WRITE))) { message("Erreur de fichier"); return; } else { message("Fichier ouvert"); } }     void ecritureFichier() { // **************** ECRITURE ******************** Serial.println("Option effacement = : " + optionEffacement); Serial.println(tailleFichier); if ((optionEffacement) || (tailleFichier == 0)) // le fichier a ete vide donc on ecrit la 1ere ligne { monFichier.print("Rang;Date;h:min;Detecteur"); } Serial.println(); Serial.println("Enregistrements en cours");   monFichier.println(); x++; //Rang monFichier.print(x),monFichier.print(";"),monFichier.print(dateActuelle),monFichier.print(";"),monFichier.print(heureActuelle), monFichier.print(";"),monFichier.print(detecteur); tailleFichier=monFichier.size(); Serial.println("Taille du fichier : " + tailleFichier); }   void fermetureFichier() { monFichier.close(); message("Fichier clos"); optionEffacement = 0;   }   void Effacement() // **************** EFFACEMENT OU NON *******************   { if (optionEffacement) { message("Effacement du fichier s'il existe"); } if (SD.exists("MEMOPRES.TXT")) { message("Destruction du fichier"); SD.remove("MEMOPRES.TXT"); optionEffacement = 0; } }   void message(String s) { if (messageOK) { Serial.println(s); } }

---

Désolé pour tous ce nouveau message.
Le premier CODE est bien celui de la page Web.
Dans ce nouvel essai, je tente d'utiliser le passage des pins à "HIGH" en guise d'événements que je traite avec JS dans le code page.

Qu'en pensez-vous ?
Merci pour votre aide.

Comme je l'ai déjà expliqué, l'arduino ne peut pas contacter le navigateur web, c'est dans l'autre sens que ça se passe. Donc il faut que le navigateur fasse des demandes.

Soit vous avez un bouton à appuyer et ça met à jour la page, soit on est un peu malin :wow:

En Javascript on a une minuterie (qui peut appeler une fonction quand elle expire): la fonction setTimeout()

par exemple on peut mettre dans la page (dans la partie des scripts)

Code:

---

setTimeout("GetArduinoIO()", 5000); // minuterie qui appelle GetArduinoIO() dans 5s (en ms)

---

Si maintenant la fonction GetArduinoIO avait la bonne idée d'activer la minuterie comme dernière instruction et que vous mettiez cette fonction (comme vous avez fait) dans le onload

Code:

---

<body onload="GetArduinoIO()">

---

Lorsque la page est chargée, la fonction est appellée puisque c'est le onload, la page est dessinée et vous redéclenchez la fonction à nouveau dans 5s --> vous avez inventé le mouvement perpétuel :) .

Si cette fonction avait la bonne idée d'utiliser AJAX pour récupérer depuis le serveur web (en JSON, XML, ...) des informations et s'en servir pour modifier le DOM, alors votre page sera maintenue à jour automatiquement tant qu'elle est ouverte.

Si vous cherchez un peu je suis sûr qu'il y a des tutos avec des exemples - je n'en ai pas un sous le coude juste là.

Comme c'est nouveau pour vous, je vous conseille de mettre votre projet de côté un moment et de faire un petit exemple tout simple qui ne fait qu'envoyer la valeur d'une pin analogique par exemple - sans fioritures.

Je vous ai fait un petit exemple en tapant un peu au kilomètre donc ce n'est pas très documenté mais ça vous fera un exercice pour comprendre :)

Le principe est d'envoyer un page web qui dit

Le Bouton 1 est en attente
Le Bouton 2 est en attente
Le Bouton 3 est en attente

chaque morceau du DOM en attente est repéré par un identifiant B0, B1 ou B2 - le vrai HTML c'est

Code:

---

1 2 3

Le Bouton 1 est <span id="B0">en attente</span><br> Le Bouton 2 est <span id="B1">en attente</span><br> Le Bouton 3 est <span id="B2">en attente</span><br>

---

Ensuite on va de demander par AJAX toutes les secondes de modifier le texte en attente pour le remplacer par un texte qui correspond à l'état d'une pin associée au bouton.

On fait cela comme expliqué précédemment avec une requête GET envoyée à l'arduino toutes les secondes. Cette requête est bâtie comme cela

Code:

---

var uniqueURL = "lecture" + "&a=" + Math.trunc(Math.random() * 1000000);

---

et quand on va l'envoyer on aura sur le serveur un "GET /lecture&a=680865 HTTP/1.1"

la partie après le & on s'en fiche un peu, on génère un nombre aléatoire en paramètre. Il est là pour éviter que le navigateur web ou des caches intermédiaires se disent "hey, j'ai déjà vu cette requête, je connais la réponse que j'ai conservée en cache" et nous renvoie un état précédent.

La requête AJAX retourne un JSON qui est formaté comme cela: {"etats": [0,0,0]}

Le Script Javascript va parser le JSON et parcourir le tableau (array) nommé etats et utiliser la valeur lue pour remplacer le texte dans le DOM.

Code:

---

1 2 3

var jsonData = JSON.parse(this.responseText); for(var i = 0; i < jsonData.etats.length; i++) { document.getElementById('B'+i).innerHTML = jsonData.etats[i] == '0' ? "Relâché" : "Appuyé";

---

On voit le parse qui analyse le JSON, puis on a une boucle où i est l'indice de parcours du tableau

document.getElementById('B'+i) va chercher donc le bout du DOM qui a pour identifiant B0 B1 B2 etc (obtenu par une concatenation de 'B' avec l'indice)

le .innerHTML sert à dire qu'on veut remplacer donc le HTML associé à cet identifiant par ce qui suit et là on a l'opérateur Javascript ternaire ?: qui compare si on a un 0 dans le tableau à cet indice et si oui on retourne "Relâché" sinon "Appuyé".

Voilà pour le côté navigateur Web.

----

Le code arduino devra donc différencier un "GET / HTTP/1.1" lorsque l'on ira chercher la page principale et un "GET /lecture&a=xxxx HTTP/1.1" quand le navigateur demandera la mise à jour de l'état.

On va donc dans la loop() écouter si on a un client qui se connecte et si oui, obtenir la trame de requête. Dans cette trame on va ignorer le header HTTP pour se concentrer sur la requête (la partie qui commence donc par "GET ...."

Une fois reçue on analyse et on bâtit la bonne réponse (soit la page web, soit le JSON). C'est ce que fait la fonction envoiReponse() dans le code.

Une dernière astuce comme c'est pénible de taper du HTML brut en C++, un truc c'est d'utiliser ce qu'on appelle une String literal. ça permet de définir du texte au kilomètre sans se soucier des guillemets, passage à la ligne etc... C'est ce que j'ai mis dans le fichier html.h (il y a 3 String literal).

Pour le montage:
Prenez un Arduino + shield Ethernet
Connectez 3 boutons sur les pins 7,8 et 9: pin <==> bouton <==> GND
connectez un câble ethernet
connectez un câble USB

Lancez l'IDE et ouvrez un nouveau sketch.
Dans le programme principal mettez ceci:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

#include <Ethernet.h> #include "html.h"   const byte pins[] = {7, 8, 9};   EthernetServer serveurWeb(80); byte adresseMacServeur[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xF0, 0x0D}; IPAddress adresseIPServeur(192, 168, 1, 17);   void envoiReponse(const char * httpRequest, EthernetClient& client) { Serial.print(F("Requête : ")); Serial.println(httpRequest); if (strncmp(httpRequest, "/ ", 2) == 0) { client.println((const __FlashStringHelper*) enTeteHTTP); client.println((const __FlashStringHelper*) page1); } else if (strncmp(httpRequest, "/lecture&", 9) == 0) { client.println((const __FlashStringHelper*) enTeteJSON); client.print(F("{\"etats\": [")); for (byte p = 0; p < sizeof pins; p++) { client.write((digitalRead(pins[p]) == LOW) ? '1' : '0'); if (p != sizeof pins - 1) client.write(','); } client.println(F("]}")); } else client.println((const __FlashStringHelper*) enTeteHTTP); }   void setup() { for (auto && p : pins) pinMode(p, INPUT_PULLUP); Serial.begin(115200); Serial.println(); Ethernet.begin(adresseMacServeur, adresseIPServeur); serveurWeb.begin(); Serial.print("IP du Serveur : "); Serial.println(Ethernet.localIP()); }   void loop() { EthernetClient client; const size_t tailleMaxURL = 30; char httpRequest[tailleMaxURL + 1]; unsigned int httpRequestIndex; boolean recuGET, ligneVide;   client = serveurWeb.available(); if (client) { httpRequestIndex = 0; httpRequest[0] = '\0'; recuGET = false; ligneVide = true;   while (client.connected()) { if (client.available()) { char recu = client.read(); if (recu != '\r') { if ((char) recu != '\n') { ligneVide = false; if (!recuGET) { // on mémorise httpRequest[httpRequestIndex++] = recu; httpRequest[httpRequestIndex] = '\0'; if (httpRequestIndex >= tailleMaxURL) httpRequestIndex = tailleMaxURL - 1; } } else { if (ligneVide) break; else { ligneVide = true; recuGET = strncmp(httpRequest, "GET", 3) == 0; if (!recuGET) { httpRequest[0] = '\0'; httpRequestIndex = 0; } } } } } } envoiReponse(httpRequest + 4, client); // +4 pour sauter "GET " delay(5); client.stop(); } }

---

clickez sur la petite flèche à haut à droite dans l'IDE (sous la loupe du moniteur série) et choisissez "Nouvel Onglet"
nommez le nouvel onglet "html.h" et dans cet onglet mettez ce texte

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

#ifndef _HTML_ #define _HTML_   const char enTeteHTTP[] PROGMEM = R"--(HTTP/1.1 200 OK Content-Type: text/html Connection: close   )--";   const char enTeteJSON[] PROGMEM = R"--(HTTP/1.1 200 OK Content-Type: application/json Connection: keep-alive   )--";   const char page1[] PROGMEM = R"--( <!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>DEMO AJAX</title> <script> function lectureAJAX() { var uniqueURL = "lecture" + "&a=" + Math.trunc(Math.random() * 1000000); var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var jsonData = JSON.parse(this.responseText); for(var i = 0; i < jsonData.etats.length; i++) { document.getElementById('B'+i).innerHTML = jsonData.etats[i] == '0' ? "Relâché" : "Appuyé"; }}} req.open("GET", uniqueURL , true); req.send(null); setTimeout("lectureAJAX()", 1000); } </script> </head> <body onload="lectureAJAX()"> Le Bouton 1 est <span id="B0">en attente</span><br> Le Bouton 2 est <span id="B1">en attente</span><br> Le Bouton 3 est <span id="B2">en attente</span><br> </body></html> )--";   #endif

---

compilez et chargez le code.

ouvrez un navigateur web et tapez l'url http://192.168.1.17

vous devriez voir

Le Bouton 1 est Relâché
Le Bouton 2 est Relâché
Le Bouton 3 est Relâché


appuyez sur le bouton de la pin 7 et vous devriez voir

Le Bouton 1 est Appuyé
Le Bouton 2 est Relâché
Le Bouton 3 est Relâché


idem pour les autres.

---


ça devrait fonctionner - je n'ai pas testé en détail, j'ai vu que ça compilait...


Jouez avec cela, une fois que vous avez compris le principe de la requête AJAX ensuite ce n'est plus que du "bidouillage" pour fabriquer la bonne réponse en JSON comme ici (ou en XML ou juste du texte) côté Arduino et jouer du Javascript de l'autre côté pour décoder ce que l'on a reçu et remplacer les bouts de HTML adéquats dans le DOM, ce qui met à jour la page sans la repeindre.


En espérant que ça vous aide !

bonne soirée

Merci infiniment Jay M pour cette copieuse réponse !
J'en ai en effet assez depuis ces derniers jours de tenter diverses solutions. Ma dernière a été justement de créer un bouton mais je ne sais pas encore traiter l'ajax, le xml...
Je vais m'atteler à la tâche que tu me proposes. Ce sera très formateur.

A suivre.

Encore merci pour tout le temps que tu m'as consacré.

Bonjour chers developpeurs,

Merci encore pour votre contribution et la disponibilité de Al1_24 et de Jay_M qui m’ a permis de retrouver la commande « Progrem » fort utile pour intégrer les codes Json, JS et HTML et la découverte de la création de leur page dans un nouvel onglet.
J’ai compris que je ne pouvais agir sur les objets du DOM. J’ai alors repris des exemples affichant directement les valeurs des E/S analogiques et me suis dit qu’il n’y avait pas de raison de ne point afficher les états des autres pins. J’ai donc abandonné ma page laborieusement élaborée « index.htm » chargée depuis la carte SD.
J’obtiens le résultat escompté dans mon nouveau sketch arduino Méga.
J’affiche dans cet essai les valeurs des pins analogiques A0 à A5, les états de trois boutons poussoirs, et seul l’état du pin 6 d’une LED mis à HIGH avec le message souhaité. J’intègrerai ceux qui m’intéressent ensuite. (Je n'affiche pour l'instant pas l'heure).
Reste seulement deux problèmes dans le void "gestion client" :
- L’affichage parasite du « connexion Type-alive » et
- la non prise en compte du rafraîssissement de la page toutes les 5 s (encore que je puisse m’en passer).
Votre dernier coup de pouce serait la bienvenue !
Encore merci à vous.

Voici le nouveau code du sketch :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426

/*   Simple example for receiving   - Quatre detecteurs d'ouverture C1 & C2, AD1 et AD2   - Deux détecteurs de présence A et B   -LEDs A, B,C1,C2, AD1 et AD2 en pins 22, 24, 26, 28, 30 et 32   -Reception signaux du RX en pin 2   -Pin 3 pour melodie   -Pin 4 pour carte SD   -Pin 8 pour inter commande effacement fichier SD pour enregistrement des alarmes   -Pin 10 pour carte SD (11, 12 et 13 pour la Carte SD)   - Pins TX : 5 (GND),6 (VCC) et 7 (Data)   */   #include <Ethernet.h> byte mac[] = {0x90, 0xA2, 0xDA, 0x00, 0x1A, 0x71}; //physical mac address byte ip[] = { 192, 168, 1, 17 }; // ip in lan EthernetServer server(80); //server port   //Identification detecteur #include <RCSwitch.h> RCSwitch mySwitch = RCSwitch(); #define detecteurA 3535302 #define detecteurB 9406502 #define detecteurC1 16391086 //defines incoming data set by user which is transmitted : 111110100001101110101110 = code detecteur ouverture porte C1!!!!! #define detecteurC2 4030638 //defines incoming data set by user which is transmitted : 001111011000000010101110 = code detecteur ouverture porte C2!!!!! #define detecteurAD1 12894079 #define detecteurAD2 12893567 String detecteur = "";   //Module temps reel #include <Wire.h> #include "RTClib.h" RTC_DS3231 rtc;   // Declaration des types de variables à concatener pour afficher la date String dateActuelle=""; String heureActuelle=""; String stringSlash = "/"; String stringPoints= ":"; String stringTiret= "-";   //Carte SD #include <SPI.h> #include <SD.h>   File webFile; File monFichier; int tailleFichier=0; boolean messageOK=1; boolean optionEffacement=0; int x = 0; //rang enregistrement int pinBouton = 8; // Pin du bouton poussoir commande effacement au depart boolean etatBouton;   int pinLed; const byte pinsLeds[]= {22,24,26,28,30,32};   //*** int pinLED= 6; const byte pinsBoutons[] = {7, 8, 9};     void gestionClient() { // Create a client connection EthernetClient client = server.available(); if (client) { boolean currentLineIsBlank = true; Serial.println("Client en ligne !"); if (client.connected()) { while (client.available()) { char c = client.read(); delay(1); // last line of client request is blank and ends with \n // respond to client only after last line received if (c == '\n' && currentLineIsBlank) { // send a standard http response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); //client.println("Connection: close"); client.println();   //*** client.println("Connection: keep-alive"); // the connection will be closed after completion of the response client.println("Refresh: 5"); // refresh the page automatically every 5 sec client.println(); client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<br />"); // output the value of each analog input pin for (int analogChannel = 0; analogChannel < 6; analogChannel++) { int sensorReading = analogRead(analogChannel); client.print("Analog input A"); client.print(analogChannel); client.print(" is "); client.print(sensorReading); client.println("<br />"); client.println("<br />"); } int sensorReading = digitalRead(6); sensorReading = digitalRead(6); client.print("Digital input "); client.print(" is "); client.print(sensorReading); if (sensorReading==1) { client.println(" Declenchement Detecteur du SALON"); // + dateActuelle + " " + heureActuelle); } else { client.println(" Detecteur du SALON au REPOS"); // + dateActuelle + " " + heureActuelle); } client.println("<br />"); client.println("<br />");   for (int i = 0; i < 3; i++) { int sensorReading = digitalRead(pinsBoutons[i]); client.print("Digital input Bouton " + i); client.print(pinsBoutons[i]); client.print(" is at "); client.print(sensorReading); client.println("<br />"); client.println("<br />"); } client.println("<br />");   client.println("</html>");   // // send web page // webFile = SD.open("index.htm"); // open web page file // if (webFile) // { // while(webFile.available()) // { // client.write(webFile.read()); // send web page to client // } // webFile.close(); // } break; } // every line of text received from the client ends with \r\n if (c == '\n') { // last character on line of received text // starting new line with next character read currentLineIsBlank = true; } else if (c != '\r') { // a text character was received from client currentLineIsBlank = false; }   } //End while(client.available()) } //End if (client.connected()) //if (c == '\n') delay(1); //stopping client client.stop(); //Serial.println("Communication avec le Cient interrompue !"); } //End if (client) } // End gestion client     void setup() { //start Ethernet //////Ethernet.begin(mac, ip, gateway, subnet); Ethernet.begin(mac, ip); server.begin(); Serial.print ("*\n -> Le serveur est sur l'adresse : "); Serial.println(Ethernet.localIP()); //enable serial data print Serial.begin(9600); Serial.println("servertest1"); // so I can keep track of what is loaded   mySwitch.enableReceive(0); // Receiver on interrupt 0 => that is pin #2 pinMode(led,OUTPUT); //mySwitch.setPulseLength(338); POUR UNE EMISSION ! et non une réception   //Time reel if (! rtc.begin()) { Serial.println("Couldn't find RTC"); while (1); }   //Carte SD pinMode(10,OUTPUT); // laisse la broche SS en sortie - obligatoire avec librairie SD digitalWrite(10,HIGH); // mais désactive le circuit intégré W5100 du module ethernet! message("Initialisation"); if (!SD.begin(4)) //Test du début de la communication avec la carte sur le pin 4 { Serial.println("Communication impossible !"); return; } Serial.println("Communication etablie !"); // check for index.htm file if (!SD.exists("index.htm")) { Serial.println("ERROR - Can't find index.htm file!"); return; // can't find index file } Serial.println("SUCCESS - Found index.htm file."); if (!SD.exists("MEMOPRES.TXT")) { Serial.println("ERROR - Can't find MEMOPRES.TXT file!"); return; // can't find index file } Serial.println("SUCCESS - Found MEMOPRES.TXT file.");     pinMode(8,INPUT_PULLUP); // pour effacer le contenu avant d'enregistrer int root = SD.open("/"); //ouvre la SD Card a la racine //Paramétrage des Leds detecteurs   for (int i= 0; i<6 ; i++) { pinMode(pinsLeds[i], OUTPUT); digitalWrite(pinsLeds[i], LOW); } }   void loop() { DateEtHeure(); //definition date et heure avec le module DS3231 // Connexion Internet et chargement de la page WEB (old : "index.htm" de la carte SD) gestionClient();   //Verif commande effacement carte //lecture et attribution de l'état du bouton etatBouton = digitalRead(pinBouton); if (!etatBouton) { optionEffacement=1; message("Effacement"); Effacement(); x=0; //remise a 0 du compteur de series }   //Reception signaux if (mySwitch.available()) { Serial.println("Reception"); Serial.println(" *** "); int value = mySwitch.getReceivedValue(); if (value == 0) { Serial.print("Codage non reconnu !"); } else { // used for checking received data Serial.print("Received "); Serial.println(value); Serial.print(" / "); Serial.print( mySwitch.getReceivedBitlength() ); Serial.print("bit "); Serial.print("Protocol: "); Serial.println( mySwitch.getReceivedProtocol() ); }   if (mySwitch.getReceivedValue()) { process(); } mySwitch.resetAvailable(); Serial.println(" "); } delay(100); }   void process() { unsigned long res = mySwitch.getReceivedValue();   switch (res) { case detecteurA: Serial.println("Emetteur de presence A !"); detecteur = "Bureau"; digitalWrite(pinsLeds[0],HIGH); pinLed = pinsLeds[0]; break; case detecteurB: Serial.println("Emetteur de presence B !"); detecteur = "Salon"; digitalWrite(pinsLeds[1],HIGH); pinLed = pinsLeds[1]; break; case detecteurC1: Serial.println("Emetteur d'ouverture C1 !"); detecteur = "Porte Entree"; digitalWrite(pinsLeds[2],HIGH); pinLed = pinsLeds[2]; break; case detecteurC2: Serial.println("Emetteur d'ouverture C2 !"); detecteur = "Porte fenetre Est"; digitalWrite(pinsLeds[3],HIGH); pinLed = pinsLeds[3]; break; case detecteurAD1: Serial.println("Emetteur d'ouverture AD1 !"); detecteur = "Porte garage Est"; digitalWrite(pinsLeds[4],HIGH); pinLed = pinsLeds[4]; break; case detecteurAD2: Serial.println("Emetteur d'ouverture AD2 !"); detecteur = "Porte garage ouest"; digitalWrite(pinsLeds[5],HIGH); pinLed = pinsLeds[5]; break; }   // Carte SD ////DateEtHeure(); //definition date et heure avec le module DS3231 ouvertureFichier(); ecritureFichier(); dataEvent = dateActuelle + stringTiret + heureActuelle + stringTiret + detecteur; Serial.println(dataEvent); fermetureFichier(); detecteur = ""; for (int i= 0;i<=6 ;i++) { digitalWrite(pinLed, HIGH); delay(300); digitalWrite(pinLed, LOW); delay(300); } digitalWrite(pinLed, HIGH); delay(2000); digitalWrite(pinLed, LOW); }     void DateEtHeure() { DateTime now = rtc.now(); //recuperation date et heure // Recuperation date et heure int jour= now.day(), mois=now.month() , an = now.year(); dateActuelle = jour + stringSlash + mois + stringSlash + an; Serial.print(dateActuelle); Serial.print(" "); int heure = now.hour() , minut = now.minute(); heureActuelle = heure + stringPoints + minut; Serial.println(heureActuelle); Serial.println(); delay(3000); }   void ouvertureFichier() { // **************** OUVERTURE du FICHIER *******************   Serial.println("Ouverture du fichier"); if (!( monFichier = SD.open("MEMOPRES.TXT",FILE_WRITE))) { message("Erreur de fichier"); return; } else { message("Fichier ouvert"); } }   void ecritureFichier() { // **************** ECRITURE ******************** Serial.println("Option effacement = : " + optionEffacement); Serial.println(tailleFichier); if ((optionEffacement) || (tailleFichier == 0)) // le fichier a ete vide donc on ecrit la 1ere ligne { monFichier.print("Rang;Date;h:min;Detecteur"); } Serial.println(); Serial.println("Enregistrements en cours");   monFichier.println(); x++; //Rang monFichier.print(x),monFichier.print(";"),monFichier.print(dateActuelle),monFichier.print(";"),monFichier.print(heureActuelle), monFichier.print(";"),monFichier.print(detecteur); tailleFichier=monFichier.size(); Serial.println("Taille du fichier : " + tailleFichier); }   void fermetureFichier() { monFichier.close(); message("Fichier clos"); optionEffacement = 0;   }   void Effacement() // **************** EFFACEMENT OU NON *******************   { if (optionEffacement) { message("Effacement du fichier s'il existe"); } if (SD.exists("MEMOPRES.TXT")) { message("Destruction du fichier"); SD.remove("MEMOPRES.TXT"); optionEffacement = 0; } }   void message(String s) { if (messageOK) { Serial.println(s); } }

---

quand vous bâtissez la réponse il faut respecter le standard HTTP qui dit que un header se termine par une ligne vide et que ensuite commence le document

donc quand vous faites

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// send a standard http response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); //client.println("Connection: close"); client.println(); //*** client.println("Connection: keep-alive"); // the connection will be closed after completion of the response client.println("Refresh: 5"); // refresh the page automatically every 5 sec client.println();

---

le client.println(); est justement cette ligne vide.

Donc votre client.println("Connection: keep-alive"); qui suit fait partie du document

idem le refresh 5 n'est pas dans le header donc il n'est pas pris en compte. on mettrait sans doute un truc du genre

Code:

---

1 2 3

<head> <meta http-equiv="refresh" content="5"> </head>

---

Bonsoir Jay M,

Encore merci. Je n'ai pas encore appris le fonctionnement du serveur pour l'analyse des requêtes.
Je me permets de te soumettre ma dernière évolution.
- Voici la page que j'obtenais au départ avec différents tests, dont le pinLed 6. -(voir Page1.jpg). Super !
- Avec le nouveau code sketch ci-dessous, j'arrive à obtenir les affichages des messages que je souhaite.
Mais :
- Dans toutes les situations suivantes, l'info concernant le 1er pinLed 22 pour le salon n'apparaît jamais au départ
- Avec 0 détection (voir Page "Affichage pour 0 detecteurs activés") : les réponses sont pertinentes mais apparaît à la fin le code du sketch au kilomètre !
- Avec 1 ou 2 détections, le(s) déclenchement s'affiche, mais après son état INACTIF qui reste affiché à la ligne précédente (voir page "Affichage pour 2 detecteurs activés"),
- Avec 4 détections, l'affichage du code disparaît en fin de page (voir page "Affichage pour 4 detecteurs activés"),
- Avec tous les 6, l'affichage du "salon" tant attendu s'affiche mais sans le message de déclenchement, et sans retour de ligne (Voir (voir page Affichage pour 6 detecteurs activés").

Voici les captures d'écran et le sketch :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410

* Simple example for receiving - Quatre detecteurs d'ouverture C1 & C2, AD1 et AD2 - Deux détecteurs de présence A et B -LEDs A, B,C1,C2, AD1 et AD2 en pins 22, 24, 26, 28, 30 et 32 -Reception signaux du RX en pin 2 -Pin 4 pour carte SD -Pin 8 pour inter commande effacement fichier SD pour enregistrement des alarmes -Pin 10 pour carte SD (11, 12 et 13 pour la Carte SD) - Pins TX : 5 (GND),6 (VCC) et 7 (Data) - Les pins des LEDs sont raccordées aux A0-A5 */   #include <Ethernet.h> byte mac[] = {0x90, 0xA2, 0xDA, 0x00, 0x1A, 0x71}; //physical mac address byte ip[] = { 192, 168, 1, 17 }; // ip in lan EthernetServer server(80); //server port   //Identification detecteur #include <RCSwitch.h> RCSwitch mySwitch = RCSwitch(); #define detecteurA 3535302 #define detecteurB 9406502 #define detecteurC1 16391086 //defines incoming data set by user which is transmitted : 111110100001101110101110 = code detecteur ouverture porte C1!!!!! #define detecteurC2 4030638 //defines incoming data set by user which is transmitted : 001111011000000010101110 = code detecteur ouverture porte C2!!!!! #define detecteurAD1 12894079 #define detecteurAD2 12893567 String detecteur = "";   //Module temps reel #include <Wire.h> #include "RTClib.h" RTC_DS3231 rtc;   // Declaration des types de variables à concatener pour afficher la date String dateActuelle=""; String heureActuelle=""; String stringSlash = "/"; String stringPoints= ":"; String stringTiret= "-"; String dataEvent= "";   //Carte SD #include <SPI.h> #include <SD.h>   File webFile; File monFichier; int tailleFichier=0; boolean messageOK=1; boolean optionEffacement=0; int x = 0; //rang enregistrement int pinBouton = 8; // Pin du bouton poussoir commande effacement au depart boolean etatBouton; // Bouton d'effacement ou non du fichier MEMOPRES.TXT   int pinLed; const byte pinsLeds[]= {22,24,26,28,30,32};   String evenementsPins[]= { "Declenchement Detecteur du SALON", "Declenchement Detecteur du BUREAU", "Declenchement Detecteur de la PORTE ENTREE", "Declenchement Detecteur de la PORTE-FENETRE EST", "Declenchement Detecteur de la PORTE GARAGE OUEST", "Declenchement Detecteur de la PORTE GARAGE EST" "Detecteur du SALON INACTIF", "Detecteur du BUREAU INACTIF", "Detecteur de la Porte Entree INACTIF", "Detecteur de la Porte-Fenetre Est INACTIF", "Detecteur de la Porte Garage Ouest INACTIF", "Detecteur de la Porte Garage Est INACTIF" };   void gestionClient() { // Create a client connection EthernetClient client = server.available(); if (client) { boolean currentLineIsBlank = true; Serial.println("Client en ligne !"); if (client.connected()) { while (client.available()) { char c = client.read(); delay(1); // last line of client request is blank and ends with \n // respond to client only after last line received if (c == '\n' && currentLineIsBlank) { // send a standard http response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); //client.println(); // supprimé car il faut respecter le standard HTTP qui dit que un header se termine // par une ligne vide. Le "client.println();" est justement cette ligne vide. // Donc votre "client.println("Connection: keep-alive");" qui suit fait partie du document // idem le refresh 5 n'est pas dans le header donc il n'est pas pris en compte   //*** client.println("Connection: keep-alive"); // the connection will be closed after completion of the response client.println("Refresh: 5"); // refresh the page automatically every 5 sec client.println(); client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<br />"); client.println("ETATS D'ACTIVATION DES DETECTEURS"); client.println("<br />"); client.println("<br />"); client.println("<br />");   //Essai précédent avec lecture directe des pins LEDs for (int i= 0; i<6; i++) { int sensorReading = digitalRead(pinsLeds[i]); sensorReading = digitalRead(pinsLeds[i]); if (sensorReading == 1) { client.println(evenementsPins[i]); // + dateActuelle + " " + heureActuelle); } if (sensorReading == 0) { client.println(evenementsPins[i+6]); // + dateActuelle + " " + heureActuelle); } client.println("<br />"); client.println("<br />"); } client.println("</html>"); break; } // every line of text received from the client ends with \r\n if (c == '\n') { // last character on line of received text // starting new line with next character read currentLineIsBlank = true; } else if (c != '\r') { // a text character was received from client currentLineIsBlank = false; }   } //End while(client.available()) } //End if (client.connected()) //if (c == '\n') delay(1); //stopping client client.stop(); //Serial.println("Communication avec le Cient interrompue !"); } //End if (client) } // End gestion client     void setup() { //start Ethernet //////Ethernet.begin(mac, ip, gateway, subnet); Ethernet.begin(mac, ip); server.begin();   Serial.print("*\n -> Le serveur est sur l'adresse : "); Serial.println(Ethernet.localIP()); //enable serial data print Serial.begin(9600); Serial.println("servertest1"); // so I can keep track of what is loaded   mySwitch.enableReceive(0); // Receiver on interrupt 0 => that is pin #2 pinMode(led,OUTPUT); //mySwitch.setPulseLength(338); POUR UNE EMISSION ! et non une réception   //Time reel if (! rtc.begin()) { Serial.println("Couldn't find RTC"); while (1); }   //Carte SD pinMode(10,OUTPUT); // laisse la broche SS en sortie - obligatoire avec librairie SD digitalWrite(10,HIGH); // mais désactive le circuit intégré W5100 du module ethernet! message("Initialisation"); if (!SD.begin(4)) //Test du début de la communication avec la carte sur le pin 4 { Serial.println("Communication impossible !"); return; } Serial.println("Communication etablie !");   //Recherche fichier des enregistrements if (!SD.exists("MEMOPRES.TXT")) { Serial.println("ERROR - Can't find MEMOPRES.TXT file!"); return; // can't find index file } Serial.println("SUCCESS - Found MEMOPRES.TXT file.");     pinMode(8,INPUT_PULLUP); // Bouton de commande de l'effacement du fichier MEMOPRES.TXT int root = SD.open("/"); //ouvre la SD Card a la racine //Paramétrage des Leds detecteurs   for (int i= 0; i<6 ; i++) { pinMode(pinsLeds[i], OUTPUT); digitalWrite(pinsLeds[i], LOW); } }   void loop() { // Définition de la date et de l'heure avec le module DS3231 DateEtHeure(); // Connexion Internet gestionClient();   //Verif commande effacement carte //lecture et attribution de l'état du bouton etatBouton = digitalRead(pinBouton); if (!etatBouton) { optionEffacement=1; message("Effacement"); Effacement(); x=0; //remise a 0 du compteur de series }   //Reception signaux if (mySwitch.available()) { Serial.println("Reception"); Serial.println(" *** "); int value = mySwitch.getReceivedValue(); if (value == 0) { Serial.print("Codage non reconnu !"); } else { // used for checking received data Serial.print("Received "); Serial.println(value); Serial.print(" / "); Serial.print( mySwitch.getReceivedBitlength() ); Serial.print("bit "); Serial.print("Protocol: "); Serial.println( mySwitch.getReceivedProtocol() ); }   if (mySwitch.getReceivedValue()) { process(); // Traitement des emissions des détecteurs } mySwitch.resetAvailable(); Serial.println(" "); } delay(100); }   void process() { unsigned long res = mySwitch.getReceivedValue();   switch (res) { case detecteurA: Serial.println("Emetteur de presence A !"); detecteur = "Bureau"; digitalWrite(pinsLeds[0],HIGH); pinLed = pinsLeds[0]; break; case detecteurB: Serial.println("Emetteur de presence B !"); detecteur = "Salon"; digitalWrite(pinsLeds[1],HIGH); pinLed = pinsLeds[1]; break; case detecteurC1: Serial.println("Emetteur d'ouverture C1 !"); detecteur = "Porte Entree"; digitalWrite(pinsLeds[2],HIGH); pinLed = pinsLeds[2]; break; case detecteurC2: Serial.println("Emetteur d'ouverture C2 !"); detecteur = "Porte fenetre Est"; digitalWrite(pinsLeds[3],HIGH); pinLed = pinsLeds[3]; break; case detecteurAD1: Serial.println("Emetteur d'ouverture AD1 !"); detecteur = "Porte garage Est"; digitalWrite(pinsLeds[4],HIGH); pinLed = pinsLeds[4]; break; case detecteurAD2: Serial.println("Emetteur d'ouverture AD2 !"); detecteur = "Porte garage ouest"; digitalWrite(pinsLeds[5],HIGH); pinLed = pinsLeds[5]; break; }   // Carte SD ////DateEtHeure(); //definition date et heure avec le module DS3231 ouvertureFichier(); ecritureFichier(); dataEvent = dateActuelle + stringTiret + heureActuelle + stringTiret + detecteur; Serial.println(dataEvent); fermetureFichier(); detecteur = "";   // // Clignottement des LEDs // for (int i= 0;i<=6 ;i++) // { // digitalWrite(pinLed, HIGH); // delay(300); // digitalWrite(pinLed, LOW); // delay(300); // } // digitalWrite(pinLed, HIGH); // delay(2000); // digitalWrite(pinLed, LOW); }     void DateEtHeure() { DateTime now = rtc.now(); //recuperation date et heure // Recuperation date et heure int jour= now.day(), mois=now.month() , an = now.year(); dateActuelle = jour + stringSlash + mois + stringSlash + an; Serial.print(dateActuelle); Serial.print(" "); int heure = now.hour() , minut = now.minute(); heureActuelle = heure + stringPoints + minut; Serial.println(heureActuelle); Serial.println(); delay(3000); }   void ouvertureFichier() { // **************** OUVERTURE du FICHIER *******************   Serial.println("Ouverture du fichier"); if (!( monFichier = SD.open("MEMOPRES.TXT",FILE_WRITE))) { message("Erreur de fichier"); return; } else { message("Fichier ouvert"); } }   void ecritureFichier() { // **************** ECRITURE ******************** Serial.println("Option effacement = : " + optionEffacement); Serial.println(tailleFichier); if ((optionEffacement) || (tailleFichier == 0)) // le fichier a ete vide donc on ecrit la 1ere ligne { monFichier.print("Rang;Date;h:min;Detecteur"); } Serial.println(); Serial.println("Enregistrements en cours");   monFichier.println(); x++; //Rang monFichier.print(x),monFichier.print(";"),monFichier.print(dateActuelle),monFichier.print(";"),monFichier.print(heureActuelle), monFichier.print(";"),monFichier.print(detecteur); tailleFichier=monFichier.size(); Serial.println("Taille du fichier : " + tailleFichier); }   void fermetureFichier() { monFichier.close(); message("Fichier clos"); optionEffacement = 0;   }   void Effacement() // **************** EFFACEMENT OU NON *******************   { if (optionEffacement) { message("Effacement du fichier s'il existe"); } if (SD.exists("MEMOPRES.TXT")) { message("Destruction du fichier"); SD.remove("MEMOPRES.TXT"); optionEffacement = 0; } }   void message(String s) { if (messageOK) { Serial.println(s); } }

---

pourquoi faire

Code:

---

1 2 3

client.println("Connection: close"); client.println("Connection: keep-alive"); // the connection will be closed after completion of the response

---

c'est l'un ou l'autre. Dans le cas présent vous n'avez pas besoin du keep-alive (et le commentaire est faux)


lorsque vous avez atteint la fin de l'en tête de la requête HTTP (la ligne vide) vous balancez la réponse et faites un break mais vous n'avez pas pour autant vidé le buffer d'entrée du client et donc le client.stop() ne va pas libérer l'instance du client et ça va mettre le bazar ensuite

Pourquoi ne pas utiliser le code que je vous ai proposé précédemment pour écouter la requête?

Vous utilisez la classe String un peu partout, elle est connue pour mettre aussi la pression sur la mémoire dynamique de votre Arduino, et vous n'en avez pas beaucoup. Je recommande de ne pas l'utiliser. faites simplement des print() séparés au lieu de faire des concaténation et utilisez des cString.

Pourquoi 3 seconde d'attente dans DateEtHeure() ? pourquoi mettre à jour ces éléments à chaque tour de loop, faites le uniquement quand vous en avez besoin. Evitez au maximum d'utiliser delay(). le processeur ne fait rien d'utile et pendant ce temps là des évènements peuvent se produire que vous allez rater


Séparez les problèmes, faites fonctionner l'interface web complète et ensuite rajoutez la carte SD

Bonjour Jay_M,
Pour mon dernier essai qui me satisfaisait, il suffirait peut-être d’utiliser le
« var uniqueURL = "lecture" + "&a=" + Math.trunc(Math.random() * 1000000); »
Pour éviter la panique à l’affichage. Mais je ne sais où l’intégrer et comment…

J’ai donc repris votre proposition de codes avec le json. Je ne l’avais pas prise en compte, cherchant à me débrouiller comme un grand, et ne comprenant pas la codification du json que je ne connais pas.
Après étude en détail, j’ai essayé d’intégrer un nouveau bouton (pin 5) qui commande une LED (pin 6). J’arrive à afficher les messages d’états de trois boutons poussoirs et celui de la LED de manière séparée.
Tout ceci est lié aux actions des boutons poussoir.

J’ai donc essayé d’ajouter une commande dans le sketch qui met le pin 3 d’une seconde LED2 à HIGH, en tentant de récupérer l’état de ce pin dans le « htm.h ». Cela ne marche bien sûr pas !
Je vous joins la capture d’écran et les CODES. Tous les éléments des codes que j’ai expérimentés pour la LED2 sont commentés dans le sketch et le fichier « htm.h »

Comment vous offrir du champagne si nous parvenons à mes fins ?

Encore, et encore merci !

Voici le sketch :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128

/*  * ESSAIS avec trois boutons et une LED commandée par un 4ème  * avec des messages différents pour vérifier la prise en compte de l'état HIGH  * du pin de la LED  */   #include <Ethernet.h> #include "html.h"   const byte pins[] = {7, 8, 9, 5};   // ESSAI avec bouto en 5 commande LED en 6 int pinLED = 6; boolean etatBouton;   //*****int pinLED2 = 3;   EthernetServer serveurWeb(80); byte adresseMacServeur[] = {0x90, 0xA2, 0xDA, 0x00, 0x1A, 0x71}; IPAddress adresseIPServeur(192, 168, 1, 17);   void envoiReponse(char * httpRequest, EthernetClient& client) { Serial.print(F("Requête : ")); Serial.println(httpRequest); if (strncmp(httpRequest, "/ ", 2) == 0) { client.println((const __FlashStringHelper*) enTeteHTTP); client.println((const __FlashStringHelper*) page1); } else if (strncmp(httpRequest, "/lecture&", 9) == 0) { client.println((const __FlashStringHelper*) enTeteJSON); client.print(F("{\"etats\": [")); for (byte p = 0; p < sizeof pins; p++) { client.write((digitalRead(pins[p]) == LOW) ? '1' : '0'); if (p != sizeof pins - 1) client.write(','); } client.println(F("]}")); } else client.println((const __FlashStringHelper*) enTeteHTTP); }   void setup() { pinMode(pinLED,OUTPUT); digitalWrite(pinLED,LOW);   //*****pinMode(pinLED2,OUTPUT); //*****digitalWrite(pinLED2,LOW);   for (auto && p : pins) pinMode(p, INPUT_PULLUP); Serial.begin(115200); Serial.println(); Ethernet.begin(adresseMacServeur, adresseIPServeur); serveurWeb.begin(); Serial.print("IP du Serveur : "); Serial.println(Ethernet.localIP()); }   void loop() { EthernetClient client; const size_t tailleMaxURL = 30; char httpRequest[tailleMaxURL + 1]; unsigned int httpRequestIndex; boolean recuGET, ligneVide;   client = serveurWeb.available(); if (client) { httpRequestIndex = 0; httpRequest[0] = '\0'; recuGET = false; ligneVide = true;   while (client.connected()) { if (client.available()) { char recu = client.read(); if (recu != '\r') { if ((char) recu != '\n') { ligneVide = false; if (!recuGET) { // on mémorise httpRequest[httpRequestIndex++] = recu; httpRequest[httpRequestIndex] = '\0'; if (httpRequestIndex >= tailleMaxURL) httpRequestIndex = tailleMaxURL - 1; } } else { if (ligneVide) break; else { ligneVide = true; recuGET = strncmp(httpRequest, "GET", 3) == 0; if (!recuGET) { httpRequest[0] = '\0'; httpRequestIndex = 0; } } } } } } envoiReponse(httpRequest + 4, client); // +4 pour sauter "GET " delay(5); client.stop(); }   //*** etatBouton = digitalRead(5); if (!etatBouton) { digitalWrite(pinLED,HIGH); } else { digitalWrite(pinLED,LOW); }   //*****digitalWrite(pinLED2,HIGH);   }

---

Voici le fichier "htm.h" :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

#ifndef _HTML_ #define _HTML_   const char enTeteHTTP[] PROGMEM = R"--(HTTP/1.1 200 OK Content-Type: text/html Connection: close )--";   const char enTeteJSON[] PROGMEM = R"--(HTTP/1.1 200 OK Content-Type: application/json Connection: keep-alive )--";   const char page1[] PROGMEM = R"--( <!DOCTYPE html> <html>   <head>   <meta charset="utf-8" />   <title>DEMO AJAX</title>   <h2>ETATS TROIS BOUTONS<h2><br>   <script>   function lectureAJAX()   {   var uniqueURL = "lecture" + "&a=" + Math.trunc(Math.random() * 1000000);   var req = new XMLHttpRequest();   req.onreadystatechange = function()   {   if (this.readyState == 4 && this.status == 200)   {   var jsonData = JSON.parse(this.responseText);   for(var i = 0; i < jsonData.etats.length; i++)   {   if (i < (jsonData.etats.length -1))   {   document.getElementById('B'+i).innerHTML = jsonData.etats[i] == '0' ? "Relâché" : "Appuyé";   }   else   {   document.getElementById('B'+i).innerHTML = jsonData.etats[i] == '0' ? "Eteinte" : "Allumée";   }     /* ESSAI étét du pin LED2 (= 3)   var sensorReading = digitalRead(3);   var jsonData = JSON.parse(this.responseText);   if (sensorReading =='1')   {   document.getElementById('LED').innerHTML = "Allumée";   }   else   {   document.getElementById('LED').innerHTML = "Eteinte";   } */     }   }   }     req.open("GET", uniqueURL , true);   req.send(null);   setTimeout("lectureAJAX()", 1000);   }   </script>   </head>     <body onload="lectureAJAX()">   Le Bouton 1 est <span id="B0">en attente</span><br><br>   Le Bouton 2 est <span id="B1">en attente</span><br><br>   Le Bouton 3 est <span id="B2">en attente</span><br><br>   La LED est <span id="B3">en attente</span><br><br>   La LED est <span id="LED">en attente</span><br>   </body> </html> )--";

---

il y a de l'idée mais pourquoi avez vous dans le HTML

Code:

---

1 2	La LED est <span id="B3">en attente</span><br><br> La LED est <span id="LED">en attente</span><br>

---

Un JSON c'est un moyen d'échange de données structurées, adapté au javascript à l'origine (le JS de JSON c'est pour JavaScript —*JavaScript Object Notation).

En gros on peut mettre dans un JSON une paire clé/valeur entre accolades {clé : valeur}
Une valeur peut être une valeur de vérité, un nombre, une chaîne de caractères par exemple {"age" : 22}
Une valeur peut aussi être un tableau, on met alors les valeurs entre deux crochets, séparés par des virgules {"pins" : [2,3,4]}
Enfin, une valeur peut aussi être un JSON c'est donc récursif comme définition.

cf https://fr.wikipedia.org/wiki/JavaSc...bject_Notation



Le code de la fonction qui est appelée tous les ∆t par le navigateur est lectureAJAX()

Dans ce code on construit une requête GET avec l'URL dynamique comme expliqué et on a défini que une fois que la requête (XMLHttpRequest) a été exécuté et que le navigateur web a reçu la réponse, on exécute un bout de code (c'est la fonction définie dans req.onreadystatechange)



Dans mon exemple j'ai choisi de générer côté Arduino le JSON suivant {"etats": [0,0,0]}
la clé c'est "etats" et la valeur c'est un tableau de 3 nombres qui vont représenter l'état 1 pour appuyé 0 pour relâché
c'est ce qui est donc envoyé au navigateur web en réponse à la requête


dans ce code on fait d'abord un test pour voir si la requête s'est bien passée, c'est le

Code:

---

if (this.readyState == 4 && this.status == 200) {

---

si oui on demande à JavaScript de décoder le JSON, c'est la ligne

Code:

---

var jsonData = JSON.parse(this.responseText);

---

On a alors dans la variable jsonData accès à la structure du JSON. comme la clé c'était etats, jsonData.etats représente la valeur qui est un tableau dans notre cas. En Javascript pour aller chercher un élément d'un tableau, c'est comme en C ou C++, on utilise un indice:
jsonData.etats[0] sera le premier élément de ce tableau


Dans la page HTML on a écrit pour le moment

Le Bouton 1 est <span id="B0">en attente</span><br><br>

un span c'est un truc invisible à l'affichage mais qui porte un nom. Ici on dit que le bout de HTML qui est entre les balises span s'appelle B0. cet HTML c'est le texte brut "en attente"

Javascript permet d'accéder à la structure HTML du document qui est affiché (ce qu'on appelle le DOM). On peut demander d'avoir l'objet qui porte un certain nom. par exemple

document.getElementById("B0") c'est un objet correspondant à notre span.

Si on veut le code HTML de cet objet, on lui demande son innerHTML

document.getElementById("B0").innerHTML c'est donc le texte brut "en attente"

Si on veut remplacer le HTML qui est identifié par le nom B0 par un nouveau code HTML:

document.getElementById("B0").innerHTML = ICI LE NOUVEL HTML

donc si je veux remplacer dans ma page web le en attente par relâché ou appuyé il suffit de faire un test sur la valeur de l'entrée du tableau correspondant à B0 qui est comme on l'a vu dans jsonData.etats[0] on fait

Code:

---

document.getElementById("B0").innerHTML = jsonData.etats[0] == '0' ? "Relâché" : "Appuyé";

---

votre HTML devrait sans doute pouvoir ressembler à cela:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

#ifndef _HTML_ #define _HTML_   const char enTeteHTTP[] PROGMEM = R"--(HTTP/1.1 200 OK Content-Type: text/html Connection: close )--";   const char enTeteJSON[] PROGMEM = R"--(HTTP/1.1 200 OK Content-Type: application/json Connection: keep-alive )--";   const char page1[] PROGMEM = R"--( <!DOCTYPE html> <html>   <head>   <meta charset="utf-8" />   <title>DEMO AJAX</title>   <h2>ETATS TROIS BOUTONS<h2><br>   <script>   function lectureAJAX() {   var uniqueURL = "lecture" + "&a=" + Math.trunc(Math.random() * 1000000);   var req = new XMLHttpRequest();   req.onreadystatechange = function() {   if (this.readyState == 4 && this.status == 200) {   var jsonData = JSON.parse(this.responseText);   // de B0 à B3   for(var i = 0; i < jsonData.etats.length; i++)   document.getElementById('B'+i).innerHTML = jsonData.etats[i] == '0' ? "Relâché" : "Appuyé";   // remplacement de L3   document.getElementById('L'+jsonData.etats.length-1).innerHTML = jsonData.etats[jsonData.etats.length-1] == '0' ? "Eteinte" : "Allumée"   }   }   }     req.open("GET", uniqueURL , true);   req.send(null);   setTimeout("lectureAJAX()", 1000);   }   </script>   </head>     <body onload="lectureAJAX()">   Le Bouton 1 est <span id="B0">en attente</span><br><br>   Le Bouton 2 est <span id="B1">en attente</span><br><br>   Le Bouton 3 est <span id="B2">en attente</span><br><br>   Le Bouton 4 est <span id="B3">en attente</span><br><br>   La LED est <span id="L3">en attente</span><br><br>   </body> </html> )--";

---

pour la LED je lui ai donné le nom L3 et dans le javascript je vais chercher la dernière valeur du tableau pour définir le texte

Code:

---

document.getElementById('L'+jsonData.etats.length-1).innerHTML = jsonData.etats[jsonData.etats.length-1] == '0' ? "Eteinte" : "Allumée"

---

c'est plus clair ?

Bonjour Jay_M,

L'élève que je suis suit en ce moment des cours plus approfondis sur le JS. Vous avez été un véritable tremplin pour moi en me permettant d'entrer plus avant dans ce domaine de programmation que j'avais abordé succinctement.
Je reprendrai ensuite mon projet d'alarme et vous ferai part de son évolution, si cela ne vous gêne pas.

Encore merci !

Bonjour JAY_M,

Je libère l'espace de discussion en déclarant le problème résolu.
J'avance à mon rythme, mais sûrement. Si besoin, je me reconnecterai.

Merci et merci encore.

Bonne continuation ; et bonnes fêtes.
:D

très bien

Bonnes fêtes à toutes et tous !