[SOLVED]Search help ESP8266 how display int value to my web

Post topics, source code that relate to the Arduino Platform
 Reply

User avatar

[SOLVED]Search help ESP8266 how display int value to my web

By Noam76
- Thu Dec 21, 2017 7:20 am #72630 Hello everybody,
I am searching a few days how can I display an int value on my webpage, storing in the SPIFFS.
I am not a programmer knowing some #C code.
I use the ESP8266 Nodemcu with arduino IDE software, intsall the last stable library from the list.
The library I using ESP8266WebServer.h, all my HTML, CSS files are store in the SPIFFS.

I found a code that using another library I try to adjust it for my code, but I don;t know how to do that, I am here to learning, receive an explain for code, the most important thing is to succeed what I want to do with your help :)

my ESP arduino IDE code
Code: Select all#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);

int MyValue = 0;


Code to display my disply_page.html
Code: Select allvoid 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);
  }
}


The setup Code
Code: Select allvoid 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)MyValue)); // 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);
}


Loop code
Code: Select allvoid loop(void){
 server.handleClient();
MyValue = random(1,1000); // generate random number between 1 & 1000
}


My HTML file
Code: Select all<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
 
    <script>
   function obtenirVariables()
   {
      var uniqueURL = "reqEtatVariables" + "&aleatoire=" + Math.trunc(Math.random() * 1000000);
      var request = new XMLHttpRequest();
      request.onreadystatechange = function()
      {
         if (this.readyState == 4) {
            if (this.status == 200) {
               if (this.responseXML != null) {                 
  document.getElementById("DataFromEsp").innerHTML =
                  this.responseXML.getElementsByTagName('send_data')[0].childNodes[0].nodeValue;
               }
            }
         }
      }
      request.open("GET", uniqueURL , true);
      request.send(null);
      setTimeout("obtenirVariables()", 1000);
   }
   </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>My Data is<span id="DataFromEsp">...</span></p>
    </div>
 </div>
 </div> <!-- close div container -->
</body>
</html>


Who could help me ? :roll:
 Reply
Return to Arduino