NodeMcu DHT11 local Web Server

Projects Programming
1

I am trying to control the Relay using NodeMcu. With below peice of code i could show temperature & Humidity.

Now i would like to create Display parameter Set temperature. Where i can set my temperature from locally & displayed on Same local Web If temp> set temp turn on LED if not turn of LED

#include <ESP8266WiFi.h>
#include "DHT.h"

DHT dht;
 
const char* ssid = "esp8266";
const char* password = "Test123456";
 
int ledPin = 13; // GPIO13
WiFiServer server(80);
 
void setup() {
  Serial.begin(115200);
  delay(10);
 
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  dht.setup(D3);   /* D1 is used for data communication */
  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
 
  // Start the server
  server.begin();
  Serial.println("Server started");
 
  // Print the IP address
  Serial.print("Use this URL to connect: ");
  Serial.print("http://");
  Serial.print(WiFi.localIP());
  Serial.println("/");
 
}
 
void loop() {
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Wait until the client sends some data
  Serial.println("new client");
  while(!client.available()){
    delay(1);
  }


// New code has been added

 delay(dht.getMinimumSamplingPeriod());  /* Delay of amount equal to sampling period */

  float humidity = dht.getHumidity(); /* Get humidity value */
  float temperature = dht.getTemperature(); /* Get temperature value */

 // Serial.print(dht.getStatusString());  /* Print status of communication */

 
 
  // Read the first line of the request
  String request = client.readStringUntil('\r');
  Serial.println(request);
  client.flush();
 
  // Match the request
 
  int value = LOW;
  if (request.indexOf("/LED=ON") != -1)  {
    digitalWrite(ledPin, HIGH);
    value = HIGH;
  }
  if (request.indexOf("/LED=OFF") != -1)  {
    digitalWrite(ledPin, LOW);
    value = LOW;
  }
 
// Set ledPin according to the request
//digitalWrite(ledPin, value);
 
  // Return the response
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println(""); //  do not forget this one
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
 
  client.print("Led pin is now: ");
 
  if(value == HIGH) {
    client.print("On");
  } else {
    client.print("Off");
  }
  client.println("

");
  client.println("<a href=\"/LED=ON\"\"><button>Turn On </button></a>");
  client.println("<a href=\"/LED=OFF\"\"><button>Turn Off </button></a>
"); 
  client.println("</html>");

  client.println("DHT11_HumidityReading: ");
  client.println(humidity,1);
   client.println("

");
  client.println("DHT11_Temprature Reading: ");
  client.println(temperature,1);
   client.println("

");
 

 
 
  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");
 
}
2

It appears that you have gotten far enough along to reach the point that the html code for these esp8266 servers is your issue. You may be able to find cut and paste examples, but sooner or later you are going to have to learn how to create buttons, input fields, etc and make them mobile friendly. It can be a steep learning curve.

A good place to start is W3Schools Online Web Tutorials

3

I would like to Test this example . Where i would like to set my own temp If i declared in code it givesout error

client.print("</html>");
client.print("<head>");
client.print("<title>My Page</title>");
client.print("</head>");
client.print("<body>");
  client.print("

");
   client.print("Set_Temp: ");
    client.println("<input type=text name=textbox size=25 value=Enter Temp Here");
    client.println("
<input type=submit value=Send me your name!>
");
    client.println("</div>");
     client.println("</body>");
     client.println("</html>");

#include <ESP8266WiFi.h>
#include "DHT.h"

static float Set_Temp=30.0;
DHT dht;
 
const char* ssid = "esp8266";
const char* password = "Test123456";
 
int ledPin = 13; // GPIO13
WiFiServer server(80);
 
void setup() {
  Serial.begin(115200);
  delay(10);
 
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  dht.setup(D3);   /* D1 is used for data communication */
  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
 
  // Start the server
  server.begin();
  Serial.println("Server started");
 
  // Print the IP address
  Serial.print("Use this URL to connect: ");
  Serial.print("http://");
  Serial.print(WiFi.localIP());
  Serial.println("/");
 
}
 
void loop() {
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Wait until the client sends some data
  Serial.println("new client");
  while(!client.available()){
    delay(1);
  }


// New code has been added 

 delay(dht.getMinimumSamplingPeriod());  /* Delay of amount equal to sampling period */

  float humidity = dht.getHumidity(); /* Get humidity value */
  float temperature = dht.getTemperature(); /* Get temperature value */

 // Serial.print(dht.getStatusString());  /* Print status of communication */

  
 
  // Read the first line of the request
  String request = client.readStringUntil('\r');
  Serial.println(request);
  client.flush();
 
  // Match the request
 
  int value = LOW;
  if (request.indexOf("/LED=ON") != -1)  {
    digitalWrite(ledPin, HIGH);
    value = HIGH;
  }
  if (request.indexOf("/LED=OFF") != -1)  {
    digitalWrite(ledPin, LOW);
    value = LOW;
  }
 
// Set ledPin according to the request
//digitalWrite(ledPin, value);
 
  // Return the response
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println(""); //  do not forget this one
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
 
  client.print("Led pin is now: ");
 
  if(value == HIGH) {
    client.print("On");
  } else {
    client.print("Off");
  }
  client.println("

");
  client.println("<a href=\"/LED=ON\"\"><button>Turn On </button></a>");
  client.println("<a href=\"/LED=OFF\"\"><button>Turn Off </button></a>
");  
  client.println("</html>");
  

  

  client.println("DHT11_HumidityReading: ");
  client.println(humidity,1);
   client.println("

");
  client.println("DHT11_Temprature Reading: ");
  client.println(temperature,1);
   client.println("

");

  client.println("Set_Temp: ");
  client.println(Set_Temp);
   client.println("

");
  

  
 
  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");
 
}

Set_temp.jpg
Set_temp.jpg1366×768 101 KB

4

How to save data in set_temp. I could able to generate Textbox and button to set_temp

client.print("</html>");
client.print("<head>");
client.print("<title>My Page</title>");
client.print("</head>");
client.print("<body>");
  client.print("

");
   client.print("Set_Temp: ");
    client.println("<input type=text name=textbox size=25 value=Enter Temp Here");
    client.println("
<input type=submit value=Send me your name!>
");
    client.println("</div>");
     client.println("</body>");
     client.println("</html>");
5

I don't know enough html coding to really help you, but this seems wrong for a text box which is supposed to send a temperature value.

client.println("
<input type=submit value=Send me your name!>
");

How does this show up on the server when the request is read with

String request = client.readStringUntil('\r');

What are you using in your test of request.indexOf() to pick up the sent value?

6

My code updated.

My webpage window look like this. IF i manually change the relay get ON & OFF . But I am looking for action when Change button has been pressed. If change button pressed value of setvalue to be get updated.

Like action mentioned in

<form action="/action_page.php">

code syntax

<!DOCTYPE HTML>
<html>  
<body>

<form action="welcome_get.php" method="get">
Name: <input type="text" name="name">

E-mail: <input type="text" name="email">

<input type="submit">
</form>

</body>
</html>

#include <ESP8266WiFi.h>
#include "DHT.h"

static float Set_Temp=30.0;
DHT dht;
int value = LOW;
 
const char* ssid = "esp8266";
const char* password = "Test123456";
 
int ledPin = 13; // GPIO13
WiFiServer server(80);
 
void setup() {
  Serial.begin(115200);
  delay(10);
 
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);
  dht.setup(D3);   /* D1 is used for data communication */
  // Connect to WiFi network
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
 
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
 
  // Start the server
  server.begin();
  Serial.println("Server started");
 
  // Print the IP address
  Serial.print("Use this URL to connect: ");
  Serial.print("http://");
  Serial.print(WiFi.localIP());
  Serial.println("/");
 
}
 
void loop() {
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Wait until the client sends some data
  Serial.println("new client");
  while(!client.available()){
    delay(1);
  }


// New code has been added 

 delay(dht.getMinimumSamplingPeriod());  /* Delay of amount equal to sampling period */

  float humidity = dht.getHumidity(); /* Get humidity value */
  float temperature = dht.getTemperature(); /* Get temperature value */

 // Serial.print(dht.getStatusString());  /* Print status of communication */

if(temperature>=Set_Temp)
{

  digitalWrite(ledPin, HIGH);
    value = HIGH;

}else
{
  digitalWrite(ledPin, LOW);
    value = LOW;
}


  
 
  // Read the first line of the request
  String request = client.readStringUntil('\r');
  Serial.println(request);
  client.flush();
 
  // Match the request
 

 /* if (request.indexOf("/LED=ON") != -1)  {
    digitalWrite(ledPin, HIGH);
    value = HIGH;
  }
  if (request.indexOf("/LED=OFF") != -1)  {
    digitalWrite(ledPin, LOW);
    value = LOW;
  }*/
 
// Set ledPin according to the request
//digitalWrite(ledPin, value);
 
  // Return the response
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println(""); //  do not forget this one
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
 
  client.print("Relay_Turn_On_Status: ");
 
  if(value == HIGH) {
    client.print("On");
  } else {
    client.print("Off");
  }
 // client.println("

");
 // client.println("<a href=\"/LED=ON\"\"><button>Turn On </button></a>");
//  client.println("<a href=\"/LED=OFF\"\"><button>Turn Off </button></a>
");  
//  client.println("</html>");

  
client.print("</html>");
client.print("<head>");
client.print("<title>My Page</title>");
client.print("</head>");
client.print("<body>");
  client.print("

");
   client.print("Set_Temp: ");
    client.println("<input type=text name=textbox size=5 value=Enter_Temp_Here");
    client.println("
<input type=submit value=Change >
");
    client.println("</div>");
     client.println("</body>");
     client.println("</html>");
     



      
client.println("

");
  client.println("DHT11_HumidityReading: ");
  client.println(humidity,1);
   client.println("

");
  client.println("DHT11_Temprature Reading: ");
  client.println(temperature,1);
   client.println("

");

  client.println("Set_Temp: ");
  client.println(Set_Temp);
   client.println("

");
  

  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");
 
}

Code1.jpg
Code1.jpg1366×768 72.5 KB

7

If i use below syntax gives out error.How can use regular syntax HTMl here.

    Set_Temp:"
<input type=submit value=Change >
";
    //Set_Temp:"<input type=text name=textbox size=5 value=Enter_Temp_Here>";
    Serial.println(Set_Temp);

I tried regular HTML where i could save data into Set_temp but it gives -1

Set_Temp=readString.indexOf(2);

How can i convert String to Float value here.

HTML_OUT.jpg
HTML_OUT.jpg1366×768 68.8 KB

8

Is there any update. How can i get & post in arduino client server