Bonjour a tous,
J'ai une ESP8266 Nodemcu, je la programme avec le l'ide arduino.
Ma page HTML se trouve dans le SPIFFS de l'esp, c'est la partie flash ou j'ai téléchargé mes fichiers HTML.
Je cherche la solution en javascript,XML, pour afficher une variable avec un refresh automatique, envoyé depuis le code arduino.
apres plusieurs recherche google j'ai trouver un code qui ne marche pas, je n'arrive pas a trouver un tuto ou autre code qui pourrait me faire l'affaire, la je viens a votre aide
La partie du code ESP que j’utilise, je l'ai couper en plusieurs partie pour que cela soit plus agréable a l’œil.
Code:#include <ESP8266WiFi.h> #include <WiFiClient.h> #include <ESP8266WebServer.h> #include <ESP8266mDNS.h> #include <FS.h> const char* ssid = "****"; const char* password = "****"; const String DISPLAY_DATA_HTML = "/html/display_data.html"; ESP8266WebServer server(80); #define Sensor1 A0
la fonction pour afficher la page display_data.html
le setupCode:void DisplayData() { String form = ""; File f = SPIFFS.open(DISPLAY_DATA_HTML, "r"); if (!f){ Serial.println("Can't open update html file"); server.send(404, "text/html", "File not found"); } else{ char buf[1024]; int siz = f.size(); while(siz > 0) { size_t len = std::min((int)(sizeof(buf) - 1), siz); f.read((uint8_t *)buf, len); buf[len] = 0; form += buf; siz -= sizeof(buf) - 1; } f.close(); server.send(200, "text/html", form); } }
le loopCode:void setup(void){ Serial.begin(115200); if (!SPIFFS.begin()) { Serial.println("Failed to mount file system"); return; } WiFi.begin(ssid, password); Serial.println(""); // Wait for connection while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.print("Connected to "); Serial.println(ssid); Serial.print("IP address: "); Serial.println(WiFi.localIP()); if (MDNS.begin("esp8266")) { Serial.println("MDNS responder started"); } server.on("/display_data",DisplayData); server.on("/reqEtatVariables", [&](){ server.send(200, "text/XML", String((int)Web_Soil_Sensor1)); // send to someones browser when asked }); server.serveStatic("/css", SPIFFS, "/html/css"); server.serveStatic("/display_data.html", SPIFFS, "/html/display_data.html"); server.begin(); Serial.println("HTTP server started"); if (!MDNS.begin(host)) { Serial.println("Error setting up MDNS responder!"); while(1){ delay(1000); } } Serial.println("mDNS responder started"); // Add service to MDNS-SD MDNS.addService("http", "tcp", 80); }
ma page htmlCode:void loop(void){ server.handleClient(); }
J’espère que j'ai bien poster au bon forum, ça doit être un problème de code.Code HTML:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta property="og:site_name" content="Script Tutorials" /> <meta property="og:title" content="Sliding single-level menu | Script Tutorials" /> <meta property="og:type" content="website" /> <meta name="description" content="Sliding single-level menu - Script Tutorials"> <script> function obtenirVariables() { var uniqueURL = "reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000); var request = new XMLHttpRequest(); // http://www.toutjavascript.com/reference/ref-xmlhttprequest.php // la fonction à appeler lors d'un changement d'avancement de la requête AJAX request.onreadystatechange = function() { if (this.readyState == 4) { // Indicateur de l'avancement de l'appel AJAX == 4 => Données complètement accessibles if (this.status == 200) { // Code retour du serveur après l'appel AJAX == 200 => OK, tout s'est bien passé if (this.responseXML != null) { // si on a bien obtenu une réponse non nulle // alors on va extraire du XML les éléments qui nous intéressent /*document.getElementById("boutonID").innerHTML = this.responseXML.getElementsByTagName('bouton')[0].childNodes[0].nodeValue; document.getElementById("digital1ID").innerHTML = this.responseXML.getElementsByTagName('digital1')[0].childNodes[0].nodeValue;*/ document.getElementById("analog1ID").innerHTML = this.responseXML.getElementsByTagName('sendsensor1')[0].childNodes[0].nodeValue; document.getElementById("analog2ID").innerHTML = this.responseXML.getElementsByTagName('sendsensor2')[0].childNodes[0].nodeValue; document.getElementById("analog3ID").innerHTML = this.responseXML.getElementsByTagName('sendsensor3')[0].childNodes[0].nodeValue; document.getElementById("analog4ID").innerHTML = this.responseXML.getElementsByTagName('sendsensor4')[0].childNodes[0].nodeValue; } } } } request.open("GET", uniqueURL , true); // ici on envoie la requête GET sur l'URL /reqEtatVariables request.send(null); setTimeout("obtenirVariables()", 1000); // on rappelle obtenirVariables() dans 1s } </script> <title>Irrigation System for Plants</title> <link href="css/style.css" rel="stylesheet"> </head> <body onload="obtenirVariables()"> <header> <div id="header"> <div id="header-top"> <h2>Welcome to your Irrigation System for Plants</h2> </div> <!-- close div header-top --> <div id="header-bottom"> <nav id="menu"> <ul> <li><a href="/config">Home</a></li> <li class="selected"><a href="/display_data">Display Data Sensor</a></li> <li><a href="">jQuery</a></li> <li><a href="">PHP</a></li> <li><a href="">System</a></li> <li><a href="">Design</a></li> <li><a href="/update">System</a></li> <div class="current"> <div class="ctoparr"></div> <div class="cback"></div> <div class="cbotarr"></div> </div> </ul> </nav> </div> <!-- close div header-bottom --> </div> <!-- close div header --> </header> <div class="container"> <div class="form-style-10"> <h1>Display Soil Sensors Datas<!-- <span>Sign up and tell us what you think of the site!</span> --></h1> <div class="section"><span>F</span>Display Soil Sensors Datas of your Plants</div> <div class="inner-wrap"> <!-- <p>le bouton est <span id="boutonID">...</span> maintenant</p> <p>la pin D4 vaut <span id="digital1ID">...</span></p> --> <p>Plant Soil Humidity Sensor1 <span id="analog1ID">...</span></p> <p>Plant Soil Humidity Sensor2 <span id="analog2ID">...</span></p> <p>Plant Soil Humidity Sensor3 <span id="analog3ID">...</span></p> <p>Plant Soil Humidity Sensor4 <span id="analog4ID">...</span></p> </div> </div> </div> <!-- close div container --> </body> </html>
Comment résoudre mon problème ?
-----