Bonjour, cliquez-ici pour vous inscrire et participer au forum.
  • Login:



+ Répondre à la discussion
Affichage des résultats 1 à 1 sur 1

ESP8266 arduino je n'arrive pas a envoyer les données sur ma page HTML,XML,JS

  1. noam

    Date d'inscription
    juin 2003
    Messages
    242

    ESP8266 arduino je n'arrive pas a envoyer les données sur ma page HTML,XML,JS

    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
    Code:
    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 setup
    Code:
    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);
    }
    le loop
    Code:
    void loop(void){
     server.handleClient();
    }
    ma page html
    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>
    J’espère que j'ai bien poster au bon forum, ça doit être un problème de code.
    Comment résoudre mon problème ?

    -----

    Dernière modification par noam ; 19/12/2017 à 21h50.
     


    • Publicité







Sur le même thème :


    301 Moved Permanently

    301 Moved Permanently


    nginx/1.2.1



 

Discussions similaires

  1. connexion android + esp8266 + arduino
    Par farahoth dans le forum Électronique
    Réponses: 1
    Dernier message: 25/05/2017, 13h23
  2. [Programmation] arduino+ESP8266
    Par emnakh dans le forum Électronique
    Réponses: 1
    Dernier message: 24/05/2017, 23h03
  3. [Programmation] Page Web générée via ESP8266 et Arduino : problème !
    Par kilouxa dans le forum Électronique
    Réponses: 2
    Dernier message: 01/05/2016, 20h41
  4. [Programmation] Caractère étrange ESP8266 et Arduino Uno
    Par kilouxa dans le forum Électronique
    Réponses: 5
    Dernier message: 28/04/2016, 22h30
  5. Base de données, page html
    Par stiflerbassist dans le forum Programmation et langages, Algorithmique
    Réponses: 9
    Dernier message: 01/06/2011, 09h28