[Résolut]Demande aide ESP8266 envoyer variables INT vers HTML SPIFFS

Demande aide ESP8266 envoyer variables INT vers HTML SPIFFS [Résolut] - Domotique et maison connectée - Electronique, domotique, DIY

Marsh Posté le 22-12-2017 à 07:26:04    

Bonjour a tous,
 
J'utilise une ESP8266 Nodemcu, mon code avec l'arduino ide 1.8.5
Je connais quelques code C qui m'a bien aidé pour l'arduino, comme je ne suis pas programmeur j'ai des difficulté de comprendre certaine explication.
Après plusieurs jours de recherche sur le Net et d'avoir essayé plusieurs codes que j'ai trouvé en ligne cela ne marche pas, ,c'est pour ça que je viens a votre aide [:madix]
 
je cherche a comprendre comment faire et bien sur d'arriver a le faire :)
 
Mes fichiers HTML, CSS sont stocké sur le SPIFFS, (après plusieurs jours de recherche j'ai réussi  [:alienmaster02]), j'arrive bien a afficher ma page web en accédant a l'ip du ESP reçu par mon routeur.
 
J'utilise la librairie ESP8266WebServer.h.
Je cherche a envoyer 4 données de type INT vers ma page WEB.
J'ai regarder plusieurs exemple ils n'utilisent pas le même libraire que moi, d’après ce que j'ai compris il faut utiliser du XML coté ESP8266 et du cote HTML envoyer un HTTP vers l'esp pour qu'il envoie les données, ça c'est la théorie, en pratique alors comment faire  :??:
 
mon code est le suivant

Code :
  1. #include <ESP8266WiFi.h>
  2. #include <WiFiClient.h>
  3. #include <ESP8266WebServer.h>
  4. #include <ESP8266mDNS.h>
  5. #include <FS.h>
  6. const char *host = "serverweb1";
  7. const char* ssid = "Mon SSID";
  8. const char* password = "MON PASS";
  9. const String DISPLAY_DATA_HTML = "/html/display_data.html";
  10. const char *configUsername = "admin";
  11. const char *configPwd = "admin";
  12. ESP8266WebServer server(80);
  13. int data1;
  14. String XML; // pour envoyer le code XML a ma page web
  15. void handleRoot() {
  16.   server.send(200, "text/plain", "Welcome to my Irrigation System!" );
  17. }
  18. void DisplayData()
  19. {
  20. String form = "";
  21. File f = SPIFFS.open(DISPLAY_DATA_HTML, "r" );
  22. if (!f)
  23. {Serial.println("Can't open update html file" );
  24.    server.send(404, "text/html", "File not found" );   
  25. }
  26.   else
  27. {char buf[1024];
  28.    int siz = f.size();
  29.    while(siz > 0)
  30.   {size_t len = std::min((int)(sizeof(buf) - 1), siz);
  31.     f.read((uint8_t *)buf, len);
  32.     buf[len] = 0;
  33.     form += buf;
  34.     siz -= sizeof(buf) - 1;
  35.    }
  36.    f.close();
  37.    server.send(200, "text/html", form);
  38.   }
  39. }
  40. // code XML que j'essaye, je ne sais pas si c'est correct
  41. void handleXML()
  42. {XML="<?xml version='1.0'?>";
  43.   XML+="<response>";
  44.   XML+="data1";
  45.   XML+="</response>";
  46.   server.send(200,"text/xml",XML);
  47. }
  48. void setup(void)
  49. {Serial.begin(115200);
  50. Serial.println("..." );
  51. Serial.println("Mounting FS..." );
  52. if (!SPIFFS.begin())
  53. {Serial.println("Failed to mount file system" );
  54.   return;
  55. }
  56. WiFi.begin(ssid, password);
  57. Serial.println("" );
  58. // Wait for connection
  59. while (WiFi.status() != WL_CONNECTED) {
  60. delay(500);
  61. Serial.print("." );
  62. }
  63. Serial.println("" );
  64. Serial.print("Connected to " );
  65. Serial.println(ssid);
  66. Serial.print("IP address: " );
  67. Serial.println(WiFi.localIP());
  68. if (MDNS.begin("esp8266" ))
  69. {Serial.println("MDNS responder started" );
  70. }
  71. server.on("/", handleRoot);
  72. server.on("/display_data", [&](){
  73. if(!server.authenticate(configUsername, configPwd))
  74. {return server.requestAuthentication();
  75.   }else
  76.    {DisplayData(); // display the page
  77.    }
  78. });
  79. server.on("/reqEtatVariables",handleXML);
  80. server.serveStatic("/css", SPIFFS, "/html/css" );
  81. server.serveStatic("/display_data.html", SPIFFS, "/html/display_data.html" );
  82. server.begin();
  83. Serial.println("HTTP server started" );
  84. if (!MDNS.begin(host))
  85.   {Serial.println("Error setting up MDNS responder!" );
  86.     while(1)
  87.      {delay(1000);
  88.      }
  89.    }
  90.   Serial.println("mDNS responder started" );
  91.   // Add service to MDNS-SD
  92.   MDNS.addService("http", "tcp", 80);
  93. }
  94. void loop(void)
  95. {server.handleClient();
  96. data1 = variable INT qui change;
  97. }


 
mon code HTML

Code :
  1. <html lang="en">
  2. <head>
  3. <meta charset="utf-8" />
  4. <script>
  5. function obtenirVariables()
  6. {
  7.   var uniqueURL = "reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);
  8.   var request = new XMLHttpRequest(); // http://www.toutjavascript.com/refe [...] equest.php
  9.    // la fonction à appeler lors d'un changement d'avancement de la requête AJAX
  10.    request.onreadystatechange = function()
  11.    {
  12.     if (request.readyState == 4)
  13.     {
  14.      // Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles  
  15.      if (request.status == 200)
  16.      {
  17.       // Code retour du serveur après l'appel AJAX == 200 => OK, tout s'est bien passé
  18.       xmlResponse=request.responseXML;
  19.       xmldoc = xmlResponse.getElementsByTagName('response');
  20.       message = xmldoc[0].firstChild.nodeValue;
  21.       document.getElementById('runtime').innerHTML=message;
  22.      }
  23.     }
  24.    }
  25.    request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
  26.    request.send(null);
  27.    setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables() dans 1s
  28. }
  29. </script>
  30. <link href="css/style.css" rel="stylesheet">
  31. </head>
  32. <body onload="obtenirVariables()">
  33. <div id="header">
  34. <div id="header-top">
  35.   <h2>Recuperation du Data depuis le ESP</h2>
  36. </div> <!-- close div header-top -->
  37. <div id="header-bottom">
  38. <nav id="menu">
  39. CODE DE MON MENU
  40. </nav>
  41. </div> <!-- close div header-bottom -->
  42. </div> <!-- close div header -->
  43. </header>
  44. <p id="runtime"></p>  cela devrais afficher le data dans ma page, ça le fais pas
  45. </body>
  46. </html>


Dans mes codes il y a un envoie d'une variable INT, si ça marchera avec une, ça marchera aussi avec 4 :)
 
Merci pour tous ceux qui m'aide, me guide, m'explique, bien sur je cherche a comprendre comment faire et bien sur d'arriver a le faire :)


Message édité par noam76 le 23-12-2017 à 20:19:57
Reply

Marsh Posté le 22-12-2017 à 07:26:04   

Reply

Marsh Posté le 22-12-2017 à 08:25:03    

Qu'est-ce qui ne marche pas ? Tu as un retour d'erreur quelque part ?
 
Vu que c'est ta page web qui envoie les variables vers le serveur, tu peux déjà regarder avec un inspecteur web (Ctrl + Maj + J) et regarder dans l'onglet "Réseau" que l'appel XHR se fasse bien, et vérifier ce que tu obtiens en retour (un code 200 si tout est bon).
 
Essaie pour commencer de rajouter un "/" devant "reqEtatVariables" (ligne 7 de ton HTML) vu que le service que tu appelles est à la racine de ton serveur.
 
Et fais gaffe à l'indentation :o

Reply

Marsh Posté le 22-12-2017 à 15:02:19    

MossieurPropre a écrit :

Qu'est-ce qui ne marche pas ? Tu as un retour d'erreur quelque part ?
Vu que c'est ta page web qui envoie les variables vers le serveur, tu peux déjà regarder avec un inspecteur web (Ctrl + Maj + J) et regarder dans l'onglet "Réseau" que l'appel XHR se fasse bien, et vérifier ce que tu obtiens en retour (un code 200 si tout est bon).


Je connaissais pas l'inspecteur web, J'ai remonter mon code HTML su le spiffs après changement.
Selon l'inspecteur WEB : error 404  
 

MossieurPropre a écrit :

Essaie pour commencer de rajouter un "/" devant "reqEtatVariables" (ligne 7 de ton HTML) vu que le service que tu appelles est à la racine de ton serveur.


J'ai rajouter un "/" devant "reqEtatVariables".
 

MossieurPropre a écrit :

Et fais gaffe à l'indentation :o


Désolé j'ai essayé de réorganiser, j’espère que c'est plus lisible.
 
J'ai fais une recherche pour voir si j'ai bien configurer le code XML du coté ESP
Apres plusieurs essaie j'ai réussi :)
 
du coté esp j'ai changé le code suivant  

Code :
  1. void handleXML()
  2. {XML="<?xml version='1.0'?>";
  3.   XML+="<response>";
  4.   XML+="data1";
  5.   XML+="</response>";
  6.   server.send(200,"text/xml",XML);
  7. }


 
Par

Code :
  1. void handleXML()
  2. {XML="<?xml version='1.0'?>";
  3. XML+="<xml>";
  4. XML+="<response>";
  5. XML+= Web_Soil_Sensor1;
  6. XML+="</response>";
  7. XML+="</xml>";
  8. server.send(200,"text/xml",XML);
  9. }


 
Sur ma page web j'ai mis ce code

Code :
  1. <script>
  2. function obtenirVariables()
  3. {var uniqueURL = "/reqEtatVariables";
  4.   //var uniqueURL = "/reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);
  5.   var request = new XMLHttpRequest(); // http://www.toutjavascript.com/refe [...] equest.php
  6.    // la fonction à appeler lors d'un changement d'avancement de la requête AJAX
  7.   request.onreadystatechange = function()
  8.   {
  9.    if (request.readyState == 4)
  10.   {
  11.     // Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles  
  12.    if (request.status == 200)
  13.    {
  14.     document.getElementById("runtime" ).innerHTML = this.responseXML.getElementsByTagName('response')[0].childNodes[0].nodeValue;
  15.    }
  16.   }
  17. }
  18. request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
  19. request.send(null);
  20. setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables() dans 1s
  21. }
  22. </script>


 :bounce:  ça marche :)

Reply

Marsh Posté le 23-12-2017 à 08:13:50    

noam76 a écrit :


Je connaissais pas l'inspecteur web, J'ai remonter mon code HTML su le spiffs après changement.
Selon l'inspecteur WEB : error 404  
 


 

noam76 a écrit :


Désolé j'ai essayé de réorganiser, j’espère que c'est plus lisible.
 
J'ai fais une recherche pour voir si j'ai bien configurer le code XML du coté ESP
Apres plusieurs essaie j'ai réussi :)
 
[...]
 
Sur ma page web j'ai mis ce code

Code :
  1. <script>
  2. function obtenirVariables()
  3. {var uniqueURL = "/reqEtatVariables";
  4.   //var uniqueURL = "/reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);
  5.   var request = new XMLHttpRequest(); // http://www.toutjavascript.com/refe [...] equest.php
  6.    // la fonction à appeler lors d'un changement d'avancement de la requête AJAX
  7.   request.onreadystatechange = function()
  8.   {
  9.    if (request.readyState == 4)
  10.   {
  11.     // Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles  
  12.    if (request.status == 200)
  13.    {
  14.     document.getElementById("runtime" ).innerHTML = this.responseXML.getElementsByTagName('response')[0].childNodes[0].nodeValue;
  15.    }
  16.   }
  17. }
  18. request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables
  19. request.send(null);
  20. setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables() dans 1s
  21. }
  22. </script>


 :bounce:  ça marche :)


 
Top !
 
J'ai trouvé ton erreur initiale qui te donne une 404 :
 

Code :
  1. var uniqueURL = "/reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);


 
Une query doit commencer par "?" et non "&" qui sert à chainer les multiples paramètres.
 

Code :
  1. var uniqueURL = "/reqEtatVariables" + "?aleatoire=" + Math.trunc(Math.random() * 1000000);


 
doit marcher :jap:
 
Le changement de code côté ESP ne change rien, vu qu'il n'était de toutes façons pas appelé :D


Message édité par MossieurPropre le 23-12-2017 à 08:14:58
Reply

Marsh Posté le 23-12-2017 à 20:19:01    

Merci, j'ai fais le changement cela marche de façon impeccable.
 
J'ai donnés un chiffre de façon aléatoire a ma variable sur le esp avec

Citation :

Web_Soil_Sensor1 = random(300);

sur ma page web cela affiche bien en ligne le numéro généré.
 
Merci pour l'aide  :pt1cable:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed