-1

I'm totaly new to Arduino, I'm using ESP2866 NodeMCU and dht22 to display temperature and humidity in a web page, it is autorefresh (using AJAX) and it works perfectly, I wanted to add 2 buttons to it so I can control 2 Leds but when I tried that I couldn't control them and even the values of temperature and humidity stopped refreshing. Can you tell me what is wrong in the code ? here it is :

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHT.h"
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

 /*Put your SSID & Password*/
 const char* ssid = "xxx";  // Enter SSID here
 const char* password = "xxx";  //Enter Password here

  ESP8266WebServer server(80);

 // DHT Sensor
 uint8_t DHTPin = D6; 

  // Initialize DHT sensor.
  DHT dht(DHTPin, DHTTYPE);                

  float Temperature;
  float Humidity;
  float reading;
  float percentage;
  // Auxiliar variables to store the current output state
  String output5State = "off";
  String output4State = "off";

 // Assign output variables to GPIO pins
 const int output5 = 5;
 const int output4 = 4;
 void setup() {
 Serial.begin(115200);
 delay(100);

 pinMode(DHTPin, INPUT);
 dht.begin();              

// Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
 pinMode(output4, OUTPUT);
 // Set outputs to LOW
 digitalWrite(output5, LOW);
 digitalWrite(output4, LOW);
 Serial.println("Connecting to ");
 Serial.println(ssid);

//connect to your local wi-fi network
WiFi.begin(ssid, password);

//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

server.on("/", handle_OnConnect);
server.onNotFound(handle_NotFound);

server.begin();
Serial.println("HTTP server started");

}
void loop() {

server.handleClient();
}

void handle_OnConnect() {

Temperature = dht.readTemperature(); // Gets the values of the temperature
Humidity = dht.readHumidity(); // Gets the values of the humidity 

//Serial.println(reading); 
String header=SendHTML( Temperature,Humidity,percentage);

server.send(200, "text/html",header); 
// turns the GPIOs on and off
        if (header.indexOf("GET /5/on") >= 0) {
          Serial.println("GPIO 5 on");
          output5State = "on";
          digitalWrite(output5, HIGH);
        } else if (header.indexOf("GET /5/off") >= 0) {
          Serial.println("GPIO 5 off");
          output5State = "off";
          digitalWrite(output5, LOW);
        } else if (header.indexOf("GET /4/on") >= 0) {
          Serial.println("GPIO 4 on");
          output4State = "on";
          digitalWrite(output4, HIGH);
        } else if (header.indexOf("GET /4/off") >= 0) {
          Serial.println("GPIO 4 off");
          output4State = "off";
          digitalWrite(output4, LOW);
        }

      }

   void handle_NotFound(){
   server.send(404, "text/plain", "Not found");
    }

   String SendHTML(float TempCstat,float Humiditystat, float  percentage){
    String ptr = "<!DOCTYPE html> <html>\n";
    ptr +="<head><meta name=\"viewport\" content=\"width=device-width, 
    initial-scale=1.0, user-scalable=no\">\n";
    // ptr +="<meta http-equiv=\"refresh\" content=\"2\" >\n";
   ptr +="<link href=\"https://fonts.googleapis.com/css? 
    family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
    ptr +="<title>ESP8266 Weather Report</title>\n";
    ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: 
    block; margin: 0px auto; text-align: center;color: #333333;}\n";
    ptr +="body{margin-top: 50px;}\n";
    ptr +="h1 {margin: 50px auto 30px;}\n";
    ptr +=".side-by-side{display: inline-block;vertical-align: 
     middle;position: relative;}\n";
    ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 
    30px;border-radius: 50%;line-height: 36px;}\n";
     ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 
     19px;width: 160px;text-align: left;}\n";
     ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
     ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 
     30px;border-radius: 50%;line-height: 40px;}\n";
     ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 
     19px;width: 160px;text-align: left;}\n";
     ptr +=".temperature{font-weight: 300;font-size: 60px;color: 
     #f39c12;}\n";
     ptr +=".superscript{font-size: 17px;font-weight: 600;position: 
     absolute;right: -20px;top: 15px;}\n";
     ptr +=".data{padding: 10px;}\n";
     ptr +="</style>\n";
     ptr +="<script>\n";
     ptr +="setInterval(loadDoc,200);\n";
     ptr +="function loadDoc() {\n";
     ptr +="var xhttp = new XMLHttpRequest();\n";
     ptr +="xhttp.onreadystatechange = function() {\n";
     ptr +="if (this.readyState == 4 && this.status == 200) {\n";
     ptr +="document.getElementById(\"webpage\").innerHTML 
     =this.responseText}\n";
     ptr +="};\n";
     ptr +="xhttp.open(\"GET\", \"/\", true);\n";
     ptr +="xhttp.send();\n";
     ptr +="}\n";
     ptr +="</script>\n";

     ptr +="</head>\n";
     ptr +="<body>\n";

     ptr +="<div id=\"webpage\">\n";

     ptr +="<h1>ESP8266 Weather Report</h1>\n";
     ptr +="<div class=\"data\">\n";
     ptr +="<div class=\"side-by-side temperature-icon\">\n";
     ptr +="<svg version=\"1.1\" id=\"Layer_1\" 
     xmlns=\"http://www.w3.org/2000/svg\" 
     xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
     ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" 
     enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
      ptr +="<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877- 
      0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
      ptr+= 
       "c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,
        12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
      ptr +="c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038- 
      2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
      ptr +="c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26- 
      0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
      ptr +="c0.013-3.44,0-6.881,0.007- 
      10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
      ptr +="</svg>\n";
      ptr +="</div>\n";
      ptr +="<div class=\"side-by-side temperature- 
      text\">Temperature</div>\n";
      ptr +="<div class=\"side-by-side temperature\">";
      ptr +=(int)TempCstat;
      ptr +="<span class=\"superscript\">°C</span></div>\n";
      ptr +="</div>\n";  
      ptr +="<div class=\"data\">\n";
      ptr +="<div class=\"side-by-side humidity-icon\">\n";
      ptr +="<svg version=\"1.1\" id=\"Layer_2\" 
      xmlns=\"http://www.w3.org/2000/svg\" 
      xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\"; 
      width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable- 
      background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
      ptr +="<path fill=\"#FFFFFF\" 
     d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,
      2.926,2.133,5.05,1.571,7.057\n";
     ptr +="c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107- 
     6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
     ptr +="</svg>\n";
     ptr +="</div>\n";
     ptr +="<div class=\"side-by-side humidity-text\">Humidity</div>\n";
     ptr +="<div class=\"side-by-side humidity\">";
     ptr +=(int)Humiditystat;
     ptr +="<span class=\"superscript\">%</span></div>\n";
     ptr +="</div>\n";

    //Buttons

     ptr +="<div class=\"data\">\n";
     ptr +="<div class=\"side-by-side button-text\">Button</div>\n";
     ptr +="<div class=\"side-by-side Button\">";
     ptr +=" <p><a href=\"/5/on\"><button class=\"button\">ON</button></a> 
     </p>";
     // If the output5State is off, it displays the ON button       
        if (output5State=="off") {
          ptr +="<p><a href=\"/5/on\"><button class=\"button\">ON</button> 
       </a></p>";
        } else {
          ptr +="<p><a href=\"/5/off\"><button class=\"button 
        button2\">OFF</button></a></p>";
        } 
         // If the output4State is off, it displays the ON button       
        if (output4State=="off") {
          ptr +="<p><a href=\"/4/on\"><button class=\"button\">ON</button> 
         </a></p>";
        } else {
          ptr +="<p><a href=\"/4/off\"><button class=\"button 
          button2\">OFF</button></a></p>";
          } 
           ptr +="<span class=\"superscript\">%</span></div>\n";
           ptr +="</div>\n";
           ptr +="</div>\n";
           ptr +="</body>\n";
           ptr +="</html>\n";
           return ptr;
          }
  • Why are you searching for request parameters inside your generated response HTML? – gre_gor Feb 19 at 0:52
  • Where shoulf I search ! – Al Ma Feb 19 at 12:25
  • @AlMa, did you read the answer? – Juraj Feb 23 at 12:25
0

Write handlers for different URLs

server.on("/5/on", led5On); 
server.on("/5/off", led5off);

do you get the concept?

or you could write one handler server.on("/setLED", setLED);, if you would send "/setLED?num=5&state=on". and then in setLED function get the parameters values as

String num = sever.arg("num");
String state = sever.arg("state");

see the SimpleAuthentication example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.