• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

Asynchronous Webserver DHT22

Q&A Forum › Category: ESP32 › Asynchronous Webserver DHT22
0 Vote Up Vote Down
Nick Pettefar asked 4 years ago

I added another sensor, an LDR, but it doesn’t refresh automatically, even though I copied the DHT22 code.
 
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Import required libraries
#include “WiFi.h”
IPAddress local_IP(10,10,19,7);
IPAddress gateway(10,10,19,100);
IPAddress subnet(255, 255, 255, 0);
IPAddress primaryDNS(10,10,19,144);
IPAddress secondaryDNS(8, 8, 8, 8);
#include “ESPAsyncWebServer.h”
#include <Adafruit_Sensor.h>
#include <DHT.h>
// Replace with your network credentials
const char* ssid = “Nick”;
const char* password = “********”;
#define DHTPIN 27 // Digital pin connected to the DHT sensor
// Uncomment the type of sensor in use:
//#define DHTTYPE DHT11 // DHT 11
#define DHTTYPE DHT22 // DHT 22 (AM2302)
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
DHT dht(DHTPIN, DHTTYPE);
const int LDR = A0;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
String readDHTTemperature() {
// Sensor readings may also be up to 2 seconds ‘old’ (its a very slow sensor)
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
//float t = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(t)) {
Serial.println(“Failed to read from DHT sensor!”);
return “–“;
}
else {
Serial.print(“Temperature = “); Serial.println(t);
return String(t);
}
}
String readDHTHumidity() {
// Sensor readings may also be up to 2 seconds ‘old’ (its a very slow sensor)
float h = dht.readHumidity();
if (isnan(h)) {
Serial.println(“Failed to read from DHT sensor!”);
return “–“;
}
else {
Serial.print(“Humidity = “); Serial.println(h);
return String(h);
}
}
String readLDR() {
int LightLevel = analogRead(LDR) / 33;
Serial.print(“Light Level = “); Serial.println(LightLevel);
return String(LightLevel);
}
const char index_html[] PROGMEM = R”rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.2/css/all.css&#8221; integrity=”sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr” crossorigin=”anonymous”>
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
</style>
</head>
<body>
<h2>Nick’s ESP32 DHT22 Server</h2>
<H3>Radio Room sensor</H3>
<p>
<i class=”fas fa-thermometer-half” style=”color:#059e8a;”></i>
<span class=”dht-labels”>Temperature</span>
<span id=”temperature”>%TEMPERATURE%</span>
<sup class=”units”>&deg;C</sup>
</p>
<p>
<i class=”fas fa-tint” style=”color:#00add6;”></i>
<span class=”dht-labels”>Humidity</span>
<span id=”humidity”>%HUMIDITY%</span>
<sup class=”units”>&percnt;</sup>
</p>
<p>
<span style=”font-size: 260%; color: gold;position: relative;top: 44px;”>*</span>
<span class=”dht-labels”>Light Level</span>
<span id=”humidity”>%LIGHTLEVEL%</span>
<sup class=”units”>&percnt;</sup>
</p>

</body>
<script>
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“temperature”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “/temperature”, true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“humidity”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “/humidity”, true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“lightlevel”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “/lightlevel”, true);
xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral”;
// Replaces placeholder with DHT values
String processor(const String& var){
//Serial.println(var);
if(var == “TEMPERATURE”){
return readDHTTemperature();
}
else if(var == “HUMIDITY”){
return readDHTHumidity();
}
else if(var == “LIGHTLEVEL”){
return readLDR();
}

return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();

// Connect to Wi-Fi
WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(“Connecting to WiFi..”);
}
// Print ESP32 Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on(“/”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/html”, index_html, processor);
});
server.on(“/temperature”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, readDHTTemperature().c_str());
});
server.on(“/humidity”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, readDHTHumidity().c_str());
});
server.on(“/lightlevel”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, readLDR().c_str());
});
// Start server
server.begin();
}

void loop(){

}

Question Tags: ESP32 Asynchronous Web Server
1 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 4 years ago

Hi.
In your code, search for this section:

<p>
<span style="font-size: 260%; color: gold;position: relative;top: 44px;">*</span>
<span class="dht-labels">Light Level</span>
<span id="humidity">%LIGHTLEVEL%</span> THE ID IS WRONG
<sup class="units">&percnt;</sup>
</p><p>

Then replace it with this:

<p>
<span style="font-size: 260%; color: gold;position: relative;top: 44px;">*</span>
<span class="dht-labels">Light Level</span>
<span id="lightlevel">%LIGHTLEVEL%</span>
<sup class="units">&percnt;</sup>
</p>

Basically, you forgot to change the id of the place that holds the light reading.
Now, it should work.
Regards,
Sara

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025
  • [New Edition] Build ESP32-CAM Projects eBook – 2nd Edition April 16, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.