In this project you’ll create a standalone web server with an ESP8266 that displays the temperature and humidity with a DHT11 or DHT22 sensor using the Arduino IDE. The web server you’ll build can be accessed with any device that has a browser on your local network.
Throughout this tutorial we’ll show how to build two different web servers:
- Web Server #1: Asynchronous web server that updates the temperature and humidity automatically without the need to refresh the web page and with custom CSS to style the web page.
- Web Server #2: Simple HTTP web server that displays the latest sensor readings when the page is updated in a raw HTML page.
Recommended resources:
- How to Install the ESP8266 Board in Arduino IDE
- ESP8266 Web Server
- ESP8266 Boards Comparison
- DHT11/DHT22 Humidity and Temperature Sensor with Arduino
- ESP8266 Pinout: Ultimate GPIOs Guide
Learn more about the ESP8266 with our course: Home Automation using ESP8266.
Parts Required
To build this project, you need the following parts:
- ESP8266 development board (read ESP8266 development boards comparison)
- DHT22 or DHT11 Temperature and Humidity Sensor
- 4.7k Ohm Resistor
- Breadboard
- Jumper wires
You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!
ESP8266 and DHT11/DHT22 Schematic Diagram
Before proceeding with the tutorial, wire the DHT11 or DHT22 temperature and humidity sensor to the ESP8266 as shown in the following schematic diagram.
In this example, we’re wiring the DHT data pin to GPIO5 (D1), but you can use any other suitable GPIO. Read our ESP8266 GPIO Reference Guide to learn more about the ESP8266 GPIOs.
If you’re using an ESP-01, GPIO 2 is the most suitable pin to connect to the DHT data pin, as shown in the next diagram.
Installing the DHT Library for ESP8266
To read from the DHT sensor, we’ll use the DHT library from Adafruit. To use this library you also need to install the Adafruit Unified Sensor library. Follow the next steps to install those libraries.
1. Open your Arduino IDE and go to Sketch > Include Library > Manage Libraries. The Library Manager should open.
2. Search for “DHT” on the Search box and install the DHT library from Adafruit.
3. After installing the DHT library from Adafruit, type “Adafruit Unified Sensor” in the search box. Scroll all the way down to find the library and install it.
After installing the libraries, restart your Arduino IDE.
1. ESP8266 Asynchronous Web Server
To build the web server we’ll use the ESPAsyncWebServer library that provides an easy way to build an asynchronous web server. Building an asynchronous web server has several advantages. We recommend taking a quick look at the library documentation on its GitHub page.
Installing the ESPAsyncWebServer library
The ESPAsyncWebServer library is not available to install in the Arduino IDE Library Manager. So, you need to install it manually.
Follow the next steps to install the ESPAsyncWebServer library:
- Click here to download the ESPAsyncWebServer library. You should have a .zip folder in your Downloads folder
- Unzip the .zip folder and you should get ESPAsyncWebServer-master folder
- Rename your folder from
ESPAsyncWebServer-masterto ESPAsyncWebServer - Move the ESPAsyncWebServer folder to your Arduino IDE installation libraries folder
Installing the ESPAsync TCP Library
The ESPAsyncWebServer library requires the ESPAsyncTCP library to work. Follow the next steps to install that library:
- Click here to download the ESPAsyncTCP library. You should have a .zip folder in your Downloads folder
- Unzip the .zip folder and you should get ESPAsyncTCP-master folder
- Rename your folder from
ESPAsyncTCP-masterto ESPAsyncTCP - Move the ESPAsyncTCP folder to your Arduino IDE installation libraries folder
- Finally, re-open your Arduino IDE
Code
We’ll program the ESP8266 using Arduino IDE, so you must have the ESP8266 add-on installed in your Arduino IDE. If you haven’t, follow the next tutorial first:
Open your Arduino IDE and copy the following code.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide/
*********/
// Import required libraries
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
#define DHTPIN 5 // 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);
// current temperature & humidity, updated in loop()
float t = 0.0;
float h = 0.0;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Generally, you should use "unsigned long" for variables that hold time
// The value will quickly become too large for an int to store
unsigned long previousMillis = 0; // will store last time DHT was updated
// Updates DHT readings every 10 seconds
const long interval = 10000;
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" 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>ESP8266 DHT Server</h2>
<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">°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">%</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 ) ;
</script>
</html>)rawliteral";
// Replaces placeholder with DHT values
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
return String(t);
}
else if(var == "HUMIDITY"){
return String(h);
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// Connect to Wi-Fi
WiFi.begin(ssid, password);
Serial.println("Connecting to WiFi");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(".");
}
// Print ESP8266 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", String(t).c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(h).c_str());
});
// Start server
server.begin();
}
void loop(){
unsigned long currentMillis = millis();
if (currentMillis - previousMillis >= interval) {
// save the last time you updated the DHT values
previousMillis = currentMillis;
// Read temperature as Celsius (the default)
float newT = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
//float newT = dht.readTemperature(true);
// if temperature read failed, don't change t value
if (isnan(newT)) {
Serial.println("Failed to read from DHT sensor!");
}
else {
t = newT;
Serial.println(t);
}
// Read Humidity
float newH = dht.readHumidity();
// if humidity read failed, don't change h value
if (isnan(newH)) {
Serial.println("Failed to read from DHT sensor!");
}
else {
h = newH;
Serial.println(h);
}
}
}
Insert your network credentials in the following variables and the code will work straight away.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";How the Code Works
In the following paragraphs we’ll explain how the code works. Keep reading if you want to learn more or jump to the Demonstration section to see the final result.
Importing libraries
First, import the required libraries.
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>Setting your network credentials
Insert your network credentials in the following variables, so that the ESP8266 can connect to your local network.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Variables definition
Define the GPIO that the DHT data pin is connected to. In this case, it’s connected to GPIO5 (D1).
#define DHTPIN 5 // Digital pin connected to the DHT sensorThen, select the DHT sensor type you’re using. In our example, we’re using the DHT22. If you’re using another type, you just need to uncomment your sensor and comment all the others.
#define DHTTYPE DHT22 // DHT 22 (AM2302)Instantiate a DHTobject with the type and pin defined earlier.
DHT dht(DHTPIN, DHTTYPE);Create an AsyncWebServerobject on port 80.
AsyncWebServer server(80);Create float variables to hold the current temperature and humidity values. The temperature and humidity are updated in the loop().
float t = 0.0;
float h = 0.0;Create timer variables needed to update the temperature readings every 10 seconds.
unsigned long previousMillis = 0; // will store last time DHT was updated
// Updates DHT readings every 10 seconds
const long interval = 10000; Building the Web Page
Proceeding to the web server page.
As you can see in the above figure, the web page shows one heading and two paragraphs. There is a paragraph to display the temperature and another to display the humidity. There are also two icons to style the page.
Let’s see how this web page is created.
All the HTML text with styles included is stored in the index_html variable. Now we’ll go through the HTML text and see what each part does.
The following <meta> tag makes your web page responsive in any browser.
<meta name="viewport" content="width=device-width, initial-scale=1">The <link> tag is needed to load the icons from the fontawesome website.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">Styles
Between the <style></style> tags, we add some CSS to style the web page.
<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>Basically, we’re setting the HTML page to display the text with Arial font in block without margin, and aligned at the center.
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}We set the font size for the heading (h2), paragraph (p) and the units(.units) of the readings.
h2 { font-size: 3.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }The labels for the readings are styled as shown below:
dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}All of the previous tags should go between the <head> and </head> tags. These tags are used to include content that is not directly visible to the user, like the <meta> , the <link> tags, and the styles.
HTML Body
Inside the <body></body> tags is where we add the web page content.
The <h2></h2> tags add a heading to the web page. In this case, the “ESP8266 DHT server” text, but you can add any other text.
<h2>ESP8266 DHT Server</h2>Then, there are two paragraphs. One to display the temperature and the other to display the humidity. The paragraphs are delimited by the <p> and </p> tags. The paragraph for the temperature is the following:
<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">°C</sup>
</p>And the paragraph for the humidity is on the following snipet:
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>The <i> tags display the fontawesome icons.
How to display icons
To chose the icons, go to the Font Awesome Icons website.
Search the icon you’re looking for. For example, “thermometer”.
Click the desired icon. Then, you just need to copy the HTML text provided.
<i class="fas fa-thermometer-half">
To chose the color, you just need to pass the style parameter with the color in hexadecimal, as follows:
<i class="fas fa-tint" style="color:#00add6;"></i> Proceeding with the HTML text…
The next line writes the word “Temperature” into the web page.
<span class="dht-labels">Temperature</span>The TEMPERATURE text between % signs is a placeholder for the temperature value.
<span id="temperature">%TEMPERATURE%</span>This means that this %TEMPERATURE% text is like a variable that will be replaced by the actual temperature value from the DHT sensor. The placeholders on the HTML text should go between % signs.
Finally, we add the degree symbol.
<sup class="units">°C</sup>The <sup></sup> tags make the text superscript.
We use the same approach for the humidity paragraph, but it uses a different icon and the %HUMIDITY% placeholder.
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>Automatic Updates
Finally, there’s some JavaScript code in our web page that updates the temperature and humidity automatically, every 10 seconds.
Scripts in HTML text should go between the <script></script> tags.
<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 ) ;
</script>To update the temperature on the background, we have a setInterval() function that runs every 10 seconds.
Basically, it makes a request in the /temperature URL to get the latest temperature reading.
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;When it receives that value, it updates the HTML element whose id is temperature.
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}In summary, this previous section is responsible for updating the temperature asynchronously. The same process is repeated for the humidity readings.
Important: since the DHT sensor is quite slow getting the readings, if you plan to have multiple clients connected to an ESP8266 at the same time, we recommend increasing the request interval or remove the automatic updates.
Processor
Now, we need to create the processor() function, that will replace the placeholders in our HTML text with the actual temperature and humidity values.
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
return String(t);
}
else if(var == "HUMIDITY"){
return String(h);
}
return String();
}When the web page is requested, we check if the HTML has any placeholders. If it finds the %TEMPERATURE% placeholder, we return the temperature that is stored on the t variable.
if(var == "TEMPERATURE"){
return String(t);
}If the placeholder is %HUMIDITY%, we return the humidity value.
else if(var == "HUMIDITY"){
return String(h);
}setup()
In the setup(), initialize the Serial Monitor for debugging purposes.
Serial.begin(115200);Initialize the DHT sensor.
dht.begin();Connect to your local network and print the ESP8266 IP address.
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}Finally, add the next lines of code to handle the web server.
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", String(t).c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(h).c_str());
});When we make a request on the root URL, we send the HTML text that is stored on the index_html variable. We also need to pass the processorfunction, that will replace all the placeholders with the right values.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});We need to add two additional handlers to update the temperature and humidity readings. When we receive a request on the /temperature URL, we simply need to send the updated temperature value. It is plain text, and it should be sent as a char, so, we use the c_str() method.
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(t).c_str());
});The same process is repeated for the humidity.
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(h).c_str());
});Lastly, we can start the server.
server.begin();In the loop() is where we get new temperature readings from the sensor every 10 seconds.
Basically, we check if it is time to get new sensor readings:
if (currentMillis - previousMillis >= interval) {If it is, we store a new temperature reading on the newT variable
float newT = dht.readTemperature();If the newT variable is a valid temperature readings, we update the t variable.
else {
t = newT;
Serial.println(t);
}The same process is repeated for the humidity.
// Read Humidity
float newH = dht.readHumidity();
// if humidity read failed, don't change h value
if (isnan(newH)) {
Serial.println("Failed to read from DHT sensor!");
}
else {
h = newH;
Serial.println(h);
}That’s pretty much how the code works.
Uploading the code
After modifying the sketch with the necessary changes, if needed, upload the code to your ESP8266 (if you can’t upload code to your ESP8266, read this troubleshooting guide).
Make sure you have the right board and COM port select. Go to Tools> Board and select the ESP8266 model you’re using. In our case, we’re using the ESP8266 12-E NodeMCU Kit.
Go to Tools > Port and select the COM port the ESP8266 is connected to.
Press the Arduino IDE upload button.
Note: if you’re using an ESP-01, you need a serial adapter or an FTDI programmer to upload code.
ESP8266 IP Address
After uploading the code, open the Serial Monitor at a baud rate of 115200. Press the ESP8266 reset button. The ESP8266 IP address will be printed in the serial monitor as shown in the following figure.
Demonstration
In your local network, go to a browser and type the ESP8266 IP address. It should display the following web page with the latest sensor readings.
The temperature and humidity readings update automatically every 10 seconds without the need to refresh the web page.
2. ESP8266 Simple HTTP Web Server
In this section, we’ll show you how to build a simple HTTP web server that displays the temperature and humidity in a raw HTML page. This web server sends an HTTP response when your browser makes a request on the ESP8266 IP address.
Video Demonstration
First, you can watch the ESP8266 web server project video demonstration below.
Code
We’ll program the ESP8266 using Arduino IDE, so you must have the ESP8266 add-on installed in your Arduino IDE. If you haven’t follow the next tutorial first.
Open your Arduino IDE and copy the following code.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Including the ESP8266 WiFi library
#include <ESP8266WiFi.h>
#include "DHT.h"
// Uncomment one of the lines below for whatever DHT sensor type you're using!
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
// Replace with your network details
const char* ssid = "YOUR_NETWORK_NAME";
const char* password = "YOUR_NETWORK_PASSWORD";
// Web Server on port 80
WiFiServer server(80);
// DHT Sensor
const int DHTPin = 5;
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);
// Temporary variables
static char celsiusTemp[7];
static char fahrenheitTemp[7];
static char humidityTemp[7];
// only runs once on boot
void setup() {
// Initializing serial port for debugging purposes
Serial.begin(115200);
delay(10);
dht.begin();
// Connecting to WiFi network
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");
// Starting the web server
server.begin();
Serial.println("Web server running. Waiting for the ESP IP...");
delay(10000);
// Printing the ESP IP address
Serial.println(WiFi.localIP());
}
// runs over and over again
void loop() {
// Listenning for new clients
WiFiClient client = server.available();
if (client) {
Serial.println("New client");
// bolean to locate when the http request ends
boolean blank_line = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (c == '\n' && blank_line) {
// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
float h = dht.readHumidity();
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float f = dht.readTemperature(true);
// Check if any reads failed and exit early (to try again).
if (isnan(h) || isnan(t) || isnan(f)) {
Serial.println("Failed to read from DHT sensor!");
strcpy(celsiusTemp,"Failed");
strcpy(fahrenheitTemp, "Failed");
strcpy(humidityTemp, "Failed");
}
else{
// Computes temperature values in Celsius + Fahrenheit and Humidity
float hic = dht.computeHeatIndex(t, h, false);
dtostrf(hic, 6, 2, celsiusTemp);
float hif = dht.computeHeatIndex(f, h);
dtostrf(hif, 6, 2, fahrenheitTemp);
dtostrf(h, 6, 2, humidityTemp);
// You can delete the following Serial.print's, it's just for debugging purposes
Serial.print("Humidity: ");
Serial.print(h);
Serial.print(" %\t Temperature: ");
Serial.print(t);
Serial.print(" *C ");
Serial.print(f);
Serial.print(" *F\t Heat index: ");
Serial.print(hic);
Serial.print(" *C ");
Serial.print(hif);
Serial.print(" *F");
Serial.print("Humidity: ");
Serial.print(h);
Serial.print(" %\t Temperature: ");
Serial.print(t);
Serial.print(" *C ");
Serial.print(f);
Serial.print(" *F\t Heat index: ");
Serial.print(hic);
Serial.print(" *C ");
Serial.print(hif);
Serial.println(" *F");
}
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
// your actual web page that displays temperature and humidity
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head></head><body><h1>ESP8266 - Temperature and Humidity</h1><h3>Temperature in Celsius: ");
client.println(celsiusTemp);
client.println("*C</h3><h3>Temperature in Fahrenheit: ");
client.println(fahrenheitTemp);
client.println("*F</h3><h3>Humidity: ");
client.println(humidityTemp);
client.println("%</h3><h3>");
client.println("</body></html>");
break;
}
if (c == '\n') {
// when starts reading a new line
blank_line = true;
}
else if (c != '\r') {
// when finds a character on the current line
blank_line = false;
}
}
}
// closing the client connection
delay(1);
client.stop();
Serial.println("Client disconnected.");
}
}
Insert your network credentials in the following variables and the code will work straight away.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";How the Code Works
We’ve explained in great detail how a very similar web server works in a previous tutorial. Take a look at the folowing tutorial for an in-depth explanation of each line of code: Build an ESP8266 Web Server.
In this section, we’ll just take a look at the relevant parts for this example.
Importing libraries
Import the DHT libraries to read from the DHT sensor and the ESP8266WiFi library to build the web server:
#include <Adafruit_Sensor.h>
#include <DHT.h>DHT Sensor Type
Uncomment one of the following lines for the sensor type you’re using. If you’re using a DHT22 sensor, you don’t need to modify anything.
//#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321Setting your network credentials
Insert your network credentials in the following variables, so that the ESP8266 can connect to your local network.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Initialize DHT Sensor
Define the GPIO that the DHT data pin is connected to. In this case, it’s connected to GPIO5 (D1).
#define DHTPIN 5 // Digital pin connected to the DHT sensorInstantiate a DHT object with the type and pin defined earlier.
DHT dht(DHTPIN, DHTTYPE);setup()
In the setup(), initialize the DHT sensor.
dht.begin();loop()
In the loop(), we check whether there’s an new client making a request:
if (client) {
Serial.println("New client");
// bolean to locate when the http request ends
boolean blank_line = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();When a new client makes a request, we read the humidity, temperature in Celsius and Fahrenheit, and save them in the h, t and f variables:
float h = dht.readHumidity();
// Read temperature as Celsius (the default)
float t = dht.readTemperature();
// Read temperature as Fahrenheit (isFahrenheit = true)
float f = dht.readTemperature(true);Finally, you send the response to the client with the HTML text to build the page as well as the temperature and humidity:
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head></head><body><h1>ESP8266 - Temperature and Humidity</h1><h3>Temperature in Celsius: ");
client.println(celsiusTemp);
client.println("*C</h3><h3>Temperature in Fahrenheit: ");
client.println(fahrenheitTemp);
client.println("*F</h3><h3>Humidity: ");
client.println(humidityTemp);
client.println("%</h3><h3>");
client.println("</body></html>"); The temperature and humidity are sent to the client in these variables: celsiusTemp, fahrenheitTemp and humidityTemp.
Demonstration
After making any necessary changes, upload the code to the ESP8266 as described in an earlier section.
Open the Arduino IDE serial monitor at a baud rate of 115200. After a few seconds your IP address should show up. In our case it’s 192.168.1.95.
Open any browser from a device that is connected to the same router that your ESP is. Then type the IP address and click Enter!
Now you should see the latest temperature and humidity readings. To update the readings, you just need to refresh the web page.
Troubleshooting
If your DHT sensor fails to get the readings, read our DHT Troubleshooting Guide to help you fix the issue.
Wrapping Up
In this project we’ve shown you how to display sensor readings from a DHT sensor on a web page. We’ve provided two examples: a simple web server and an asynchronous web server with auto-updates.
Now, you can easily modify the examples provided to display readings from other sensors. If you like the ESP8266 and IoT projects take a look at some of our resources:
- Home Automation with ESP8266 (Course)
- Learn ESP32 with Arduino IDE (Course)
- MicroPython Programming with ESP32 and ESP8266 (ebook)
You may also like some of our most popular projects with the ESP8266:
- Hack a PIR Motion Sensor with an ESP8266
- Build a Multisensor Shield for ESP8266
- ESP8266 Wi-Fi Button – DIY Amazon Dash Button Clone
- 30+ ESP8266 Projects
Do you have any questions? Leave a comment below!
Thanks for reading.
Good tutorial,
But i have a question: why using Arduino? ESP8266 good do the ob on itself.
It’s using the Arduino IDE to program the ESP8266. The ESP is running the web server as a standalone device.
Thanks!
Hello Rui, first: thanks so much, the best explained tutorial about it I’ve ever saw!
I noticed it does use an internal ip address (LAN WiFi) not a real IP we can access from outside…I mean: did you try accessing it over internet outside same wifi network? Do you know how to do that?
Thanks
You would need to do router port forwarding to make your web server accessible from anywhere
is there anyway you could walk me through what to do once i forward the port
On the schema: Should not be the connection to ground instead tx?
Thanks for letting me know! I’ve just fixed the circuit
First, I wanted to thank you for your tutorials , already a real plaisur .
However, I have a question about mounting. How can we provide power to the system for a long time . I believe a single AA battery couple is not enough for more than two or three days. I’ve heard of a solution about hibernation, but is applicable to an ESP- 01 ? And finally, what other kind of battery can be used (regardless of model lipo ? A link to Ebay to provide ? ) . Thank you for all your answers.
Nice work here 🙂
Any chance of doing more demos with Node MCU based ESP8266 projects. Running a Lua Script on the ESP8266 allows the ESp8266 to run standalone… Just a thought 🙂
This script also allows the ESP8266 to run standalone! But thank you for the suggestion,
Rui
Rui
If you change this line in your code, the web page will auto update every 5 seconds! Change the “5” to how many seconds you want to wait for the next update!!
client.println(“ESP8266 – Temperature and HumidityTemperature in Celsius: “);
hallo John,
Would you please explain a little bit more to me what line i have change.
Regards Ton.
Are you sure about the schematics? Vcc and Gnd connections to 4.7 kohm, tx pin connected to gnd rail?, nothing connected to gnd pin?
Regards
I’ve just fixed the schematics, it was a mistake! Thanks for letting me know
Hi Rui, I am not sure if this reply will be duplicate or not, first draft was accidentally disappeared, so I write again.
First of all thanks for your great postings, which help me a lot.
This circuit schematics still has a mistake. 4.7 K should be a pull up resistor, whereas your sketch shows it as a pull down to GND. It does not work like this, I tried it.
BR
Hi, I do not know if I have to physically connect a cable with the ESP8266 12E form with your smartphone.
Thank you .
Why would you want to connect like that? What’s the goal of the project? Thanks!
Great sketch!
I need to refresh my browser to get the updated data.
How to made the sketch to update my browser data automatically say every 5 minutes?
Thanks.
Search for HTML auto refresh page and you’ll find a snippet of code that you can add to this project
please i use esp32 this code doesn’t it work what should i do
Hi.
You can follow this project with the ESP32 and DHT22:
https://randomnerdtutorials.com/esp32-dht11-dht22-temperature-humidity-web-server-arduino-ide/
I hope this helps.
Regards.
Sara
what is the problem if my esp isn’t react with the serial monitor?
i use esp8266 as in the link below:
encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwg3ohvTuCUk2iTloQKOVM0-tB3lT_7Ps_j3rrURKmV1_DMXIESg
best regards and thanks for good tutorial !
Make sure you select the right com port and serial baud rate in your Arduino IDE
Hi Rui, I try your tutorial with this esp8266 banggood.com/ESP8266-Web-Server-Port-WiFi-Expansion-Board-ESP-13-Compatible-With-Arduino-p-1008124.html?rmmds=myorder
but I have this error loading your script on esp8266 board:
Arduino:1.6.12 (Windows 7), Scheda:”Generic ESP8266 Module, 80 MHz, 40MHz, DIO, 115200, 512K (64K SPIFFS), ck, Disabled, None”
Lo sketch usa 236.389 byte (54%) dello spazio disponibile per i programmi. Il massimo è 434.160 byte.
Le variabili globali usano 32.568 byte (39%) di memoria dinamica, lasciando altri 49.352 byte liberi per le variabili locali. Il massimo è 81.920 byte.
C:\Users\user\AppData\Local\Arduino15\packages\esp8266\tools\esptool\0.4.9/esptool.exe -vv -cd ck -cb 115200 -cp COM13 -ca 0x00000 -cf C:\Users\user\AppData\Local\Temp\arduino_build_921673/remoteTemp.ino.bin
esptool v0.4.9 – (c) 2014 Ch. Klippel
setting board to ck
setting baudrate from 115200 to 115200
setting port from COM1 to COM13
setting address from 0x00000000 to 0x00000000
espcomm_upload_file
espcomm_upload_mem
setting serial port timeouts to 1000 ms
opening bootloader
resetting board
…
trying to connect
flush start
setting serial port timeouts to 1 ms
setting serial port timeouts to 1000 ms
flush complete
espcomm_send_command: sending command header
espcomm_send_command: sending command payload
serialport_receive_C0: 00 instead of C0
warning: espcomm_sync failed
error: espcomm_open failed
error: espcomm_upload_mem failed
error: espcomm_upload_mem failed
Can you help me to understand what is the problem and to solve it? Thanks.
Hi,
I’ve never used that board, but it sounds like your Arduino IDE is not establishing a serial communication with your ESP8266 board.
To upload a new firmware/sketch to your ESP8266 GPIO 0 must be connected to GND on boot
Hi yes i connect the 2 GPIO on off and i think it means GND.
Trying with esptool i have the error A fatal error occurred: Failed to connect to ESP8266..
Any idea?
Thanks.
hy, I can’t get ip address when trying to open the Arduino IDE serial monitor?.. why?
thanks
Check the baud rate, restart your ESP8266 while your ESP8266 is connected to your computer or check if you’ve entered the right network credentials.
https://randomnerdtutorials.com/esp8266-troubleshooting-guide/
hy, I can’t get ip address when trying to open the Arduino IDE serial monitor? why?
Check the baud rate, restart your ESP8266 while your ESP8266 is connected to your computer or check if you’ve entered the right network credentials.
https://randomnerdtutorials.com/esp8266-troubleshooting-guide/
iam doing a small project with arduino uno with help of ultrasonic sensor and buzzer(home alaram system ) i need help to add esp8266 to my project so that i can get message if the buzzer goes on any idea how to movie on or anything u have did already
I don’t have any tutorials on that exact subject.
Here’s all my tutorials related to the ESP8266: https://randomnerdtutorials.com/tutorials-esp8266/
Hi Rui. When trying to compile using IDE 1.6.8 I get the following error.
WARNING: Spurious .github folder in ‘DHT sensor library’ library
In file included from C:\Users\user\Documents\Arduino\libraries\DHT\DHT_U.cpp:22:0:
C:\Users\user\Documents\Arduino\libraries\DHT\DHT_U.h:25:29: fatal error: Adafruit_Sensor.h: No such file or directory
#include
The only change I made was to Rem out the DHT11 define and replace it with DHT21.
Thanks for any help
^
compilation terminated.
exit status 1
Error compiling for board Generic ESP8266 Module.
I have the same issue! Please tell me how can I fix it. Thanks
Had the same issue, so I had to install (download and unzip and restart IDE like DHT.zip)
https://github.com/adafruit/Adafruit_Sensor/archive/master.zip
keep hackin’
Kresse
Hi Rui, I can connect to the IP address of my ESP8266 using the Arduino Serial Monitor but I keep getting the message:
New client
Failed to read from DHT sensor!
Client disconnected.
Any thoughts on why this might be?
I’m using the NodeMCU V3 with the DH11 (3pin) connecting directly.
You either have the connections to your DHT sensor wrong or it’s not supplying enough current and the sensor can’t read its temperature successfully
Hi Rui, thanks for the response, I disconnected the power from the VIN and connected it to the 3V and it worked. Readings coming through.
i’ve got the same issue as well. how do i increase the current?
i’m using ESP8266-01 with the 3pins DHT11.
Please help. Much appreciated.
You need to use a power supply that provides more current…
I’m using the V3 also. the V3’s Vin pin is not supplying power or enough power to the dht sensor. Mine is the AM2302 and I had to power it separately but it worked fine after that
I think on the V3 the Vin pin is at 5volts only if you power the board via that pin. if you power it via usb it wont power the dht sensor through that pin. when I applied an external 5 volts there it began to work.
Hello, Thanks for a great tutorial. What do we need to do to make the web page automatically refresh or only refresh if there is a change in the temperature?
I added this line in the html code.
client.println(“”);
I dont know if its exactly the correct way to do it. I borrowed it from some of the example code that comes with the IDE. It works on my V3
Thanks Ken. Where did you put that line of code to make the page auto refresh?
Great job!! I have a question about the deep sleep mode, if you already used it in an ESP project.
What instructions you did use for deepsleep and to wake the esp up?
Thanks.
Hi.
You can check this post about ESP8266 deep sleep: ESP8266 Deep Sleep with Arduino IDE
Regards,
Sara
Hi Rui,
Thanks for this tutorial.
Despite it’s age 😉 I am now using it as a starting point and move on to programming the Arduino, ESP8266 and possibly Raspberry Pi using (Micro-)Python.
I made a few personal modifications to your Code to better satisfy my “needs”, but one in particular might be useful for others as well.
This one is NOT directly related to the ESP8266, the DHT11 etc, but it might be useful if people want to “monitor” the temperature.
If you add (be aware of the twin double-quotes) in between the tags, the resulting WebPage will refresh every 5 seconds showing different readings of the temperature sensor 😉
Thanks for providing these great tutorials!
Regards,
Rob.
Hi, how do u open the serial monitor when there is no port avaliable?
I keep getting error messages:
Arduino: 1.8.2 (Mac OS X), Board: “Generic ESP8266 Module, 80 MHz, 40MHz, DIO, 115200, 512K (64K SPIFFS), ck, Disabled, None”
Build options changed, rebuilding all
Archiving built core (caching) in: /var/folders/m_/s61mbj4s2qx7k7y9xxntjvzr0000gn/T/arduino_cache_671719/core/core_esp8266_esp8266_generic_CpuFrequency_80,FlashFreq_40,FlashMode_dio,UploadSpeed_115200,FlashSize_512K64,ResetMethod_ck,Debug_Disabled,DebugLevel_None_____d36531614ebe222a45d35a594f73c3ee.a
Sketch uses 236301 bytes (54%) of program storage space. Maximum is 434160 bytes.
Global variables use 32472 bytes (39%) of dynamic memory, leaving 49448 bytes for local variables. Maximum is 81920 bytes.
warning: espcomm_sync failed
error: espcomm_open failed
error: espcomm_upload_mem failed
error: espcomm_upload_mem failed
This report would have more information with
“Show verbose output during compilation”
option enabled in File -> Preferences.
I’ve tried this on a MAC and LINUX machine, same error. What am I doing wrong?
Hi Christopher.
The following lines:
warning: espcomm_sync failed
error: espcomm_open failed
error: espcomm_upload_mem failed
error: espcomm_upload_mem failed
Mean that your ESP8266 is not establishing a serial communication with your computer, or it’s not in flashing mode.
If you’re using an ESP-01 make sure GPIO0 is connected to GND on power up.
If you’re using another board, make sure you hold down the BOOT/FLASH button when uploading.
I hope this helps,
Regards,
Sara
First of all a big thanks to you. I almost completed. Nodemcu was connected to my mobile hotspot. But data is not displayed on the browser. Please help
Hi.
Is your sensor working properly?
Maybe it is not able to get readings and you don’t see them on the web page.
Hi!
This is a great manual. But I faced some problem when I disconnect TLL converter form PC my esp8266 doesn’t connect to wifi, with converter everything works like a charm. Do you have an idea what it can be?
Hi Anton.
I think you may be facing some power issues. How are you powering the ESP8266?
“In file included from C:\Users\COMPUTER\Documents\Arduino\libraries\DHT_sensor_library\DHT_U.cpp:22:0:
C:\Users\COMPUTER\Documents\Arduino\libraries\DHT_sensor_library\DHT_U.h:25:29: fatal error: Adafruit_Sensor.h: No such file or directory
#include
^
compilation terminated.”
I use the esp8266-12 and faulty as above. Can you help me fix it?
Hi Phú.
You need to install the Adafruit Sensor library.
You can find the Adafruit Sensor library here: github.com/adafruit/Adafruit_Sensor
Regards,
Sara
Hi, I have done everything that was written on this tutorial but when I enter in my IP address into a browser it says
Temperature in Celsius: Failed *C
Temperature in Fahrenheit: Failed *F
Humidity: Failed %
Is there any way to know the reason that it’s not working?
Hi Austin.
That means that the web server is working properly, but the sensor isn’t.
Try to upload a code that only reads the temperature and humidity and see if you can have any results: https://randomnerdtutorials.com/complete-guide-for-dht11dht22-humidity-and-temperature-sensor-with-arduino/
If you aren’t able to get temperature and humidity readings, your sensor may be faulty, or it is not properly wired.
Regards,
Sara 🙂
I had the same problem. I thought maybe the sensor is bad. But I get all the readings when running “DHTTester” from the Arduino library (file/examples). I replaced:
const int DHTPin = 5;
with:
#define DHTPin 2
It works now.
(that is from the DHTTester)
HI,
I found that if we place the sensor at a sudden change of temperature/humidity environment, we will require to refresh the webpage twice in order to receive the correct data.
The first refresh data is not correct as the data shown did not update according to the environment change. It is still at old environment.
Any suggestion?
Good tutorial, but if i have a dht11 with a 3 pin?
Hi Mario.
I think you have a DHT sensor module.
In that case, you just need to take a look at the labels on the part. It should have VCC, OUT and GND.
Connect VCC to the Vin pin, GND to GND, and out to D1. I think that with these modules you don’t need to add the 4.7kOhm resistor.
I hope this helps,
Regards,
Sara 🙂
“Failed to read from DHT sensor!” Possible errors?
I’m getting -999 in values (Failed to read from DHT sensor). Works great connected to my Arduino Uno, but the ESP8266 won’t read the DHT22. Any ideas? I’ve tried multiple libraries, all the same thing. I know the ESP8266 is working because it sends the -999 to Thingspeak.com. Thank you for any help.
Hi Al.
Please check that the sensor is being properly powered (5V to the Vin pin of the sensor).
Regards,
Sara
I find that 3.3v works fine too as the DHT22 works from 3v – 5v range
Hi. I have noticed that DHT22 does not necessarily work with your 3.3 volts supply, especially if your regulator gives actually something much below that. It is wise to choose 5V or something higher that 3.3V always when you have it.
Hi Rui
Thank you for sharing this tutorial. It works great!
Cheers, Thomas
That’s great!
Regards,
Sara
Hi Rui & Sara – this is a great tutorial, I usually find I have to tweak Arduino tutorials but this one just works! 🙂
Best
Andrew
Hi Andrew.
That’s great!
I’m glad it works.
Thank you.
Regards,
Sara
Very good post, even me I understood 🙂
How to store values to make a chart (for example) by days, weeks or months?
Thank you!
Excuse my English, it is not my native language!
Hi Catalin.
Unfortunately, we don’t have any tutorial about that at the moment.
Regards,
Sara
sadly many compilation errors on compiling the first example. The 2nd one works.
These are my errors they mainly seem to have to do with conversion errors:
C:\Users\ik\Documents\Arduino\DHTWebserver2\DHTWebserver2.ino: In lambda function:
DHTWebserver2:184: error: invalid conversion from ‘const char*’ to ‘const uint8_t* {aka const unsigned char*}’ [-fpermissive]
In file included from C:\Users\ik\Documents\Arduino\DHTWebserver2\DHTWebserver2.ino:12:0:
C:\Users\ik\Documents\Arduino\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:397:10: error: initializing argument 3 of ‘void AsyncWebServerRequest::send_P(int, const String&, const uint8_t*, size_t)’ [-fpermissive]
void onNotFound(ArRequestHandlerFunction fn); //called when handler is not assigned
^
DHTWebserver2:184: error: invalid conversion from ‘String (*)(const String&)’ to ‘size_t {aka unsigned int}’ [-fpermissive]
In file included from C:\Users\ik\Documents\Arduino\DHTWebserver2\DHTWebserver2.ino:12:0:
C:\Users\ik\Documents\Arduino\libraries\ESPAsyncWebServer\src/ESPAsyncWebServer.h:397:10: error: initializing argument 4 of ‘void AsyncWebServerRequest::send_P(int, const String&, const uint8_t*, size_t)’ [-fpermissive]
void onNotFound(ArRequestHandlerFunction fn); //called when handler is not assigned
^
exit status 1
invalid conversion from ‘const char*’ to ‘const uint8_t* {aka const unsigned char*}’ [-fpermissive]
Could it be that maybe some libraries have changed since you designed this program
Could it be that the statement PROGMEM = R”rawliteral is a bit garbled?
OK, sorry for all the previous comments, problem seems solved.
What happened is that I had an old copy of the ESPAsyncWebServer and although my compilation monitor said it was using the new one, I guess it got confused and may have picked up a file from the old one. Deleted the old one and compiles fine now
Hi ed.
That’s fine. I’m glad you’ve solved the problem.
Regards,
Sara
When I try and go to the web page in my browser, the program seems to crash. I’ve redownloaded the latest TCP and WebServer packages as well as the code.
Here’s the serial com output when it happens:
Connecting to WiFi
.
.
.
.
192.168.1.18
Panic C:\Users\ClifS\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.5.1\cores\esp8266\core_esp8266_main.cpp:103 __yield
>>>stack>>>
ets Jan 8 2013,rst cause:2, boot mode:(3,6)
load 0x4010f000, len 1384, room 16
tail 8
chksum 0x2d
csum 0x2d
vac02aff5
~ld
Hi.
Please follow this topic: github.com/esp8266/Arduino/issues/2414
They provide some solutions that may help, including erasing the ESP8266 flash.
I hope this helps.
Regards,
Sara
Hi, I have had exactly the same problem. Finally I have discovered what’s wrong there and how to solve it but it took me whole day 🙂 . The problem is with Adafruit’s DHT library. It calls yield() function in dht.cpp, which is prohibited inside a AsynchronousWebserver request handler. The solution is just to comment-out the yield() call in dht.cpp library source (in my version on line 159). Then it will work just fine.
Hey Radek,
Thank you so much for working through that. As you said, once I commented out the yield() in the dht.cpp library, I stopped getting the stack errors.
Best regards,
Clif
I using Nodemcu as AP Mode, It shows on serial monitor “Failed to read from DHT sensor”. I have checked with only DHT code it shows the readings.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
// Import required libraries
#include
#include
#include
#include
#include
#include
#include
// Replace with your network credentials
const char* ssid = “Weather”;
const char* password = “12345678”;
#define DHTPIN D1 // 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);
// 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();
delay(1000);
// 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.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.println(h);
return String(h);
}
}
const char index_html[] PROGMEM = R”rawliteral(
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;
}
ESP8266 DHT Server
Temperature
%TEMPERATURE%
°C
Humidity
%HUMIDITY%
%
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 ) ;
)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();
}
return String();
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// Connect to Wi-Fi
WiFi.softAP(ssid, password);
IPAddress myIP = WiFi.softAPIP();
Serial.println(“AP IP address: “);
Serial.println(myIP);
delay(1000);
// Print ESP8266 Local IP Address
// 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());
});
// Start server
server.begin();
}
void loop(){
}
Hi.
You can read our troubleshooting guide and try to understand why it doesn’t work: https://randomnerdtutorials.com/solved-dht11-dht22-failed-to-read-from-dht-sensor/
Regards,
Sara
Hi.
Please read our troubleshooting guide: https://randomnerdtutorials.com/solved-dht11-dht22-failed-to-read-from-dht-sensor/
Regards,
Sara
Hey Sara,
Thank you for the pointers. I’ve been through both troubleshooting guides, but have not been able to resolve my problem of the software crashing. I have placed print statements in the setup section and found that its reading the temperature and humidity from the DHT properly.
I also set it up to erase the entire flash, and that didn’t seem to help.
The program only crashes when I try to connect to the server from my phone. So it appears to be something with the web server software.
Hi Rui / Sara
Your ESP8266 and DHT11/DHT22 Schematic Diagram seems to be incorrectly connected – the other side of the 4k7 resistor connected to the data pin should be connected to +V. not Gnd.
Regards,
Leon
Hi Leon.
You are right. Thanks for noticing.
I’ve replaced the schematic with the correct one.
Regards,
Sara
Hey Sara, Thank u very much for the tutorial.
A question: What should I change if I must use a DHT11 sensor?
Hi Luis.
You just need to uncomment the sensor type you’re using in the code.
So, replace the next lines:
//#define DHTTYPE DHT11 // DHT 11
#define DHTTYPE DHT22 // DHT 22 (AM2302)
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
With this ones:
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302)
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
I hope this helps.
Regards,
Sara
My main interest was with the Async website as I have made regular straight http websites sort of like your webserver nr 2 already.
There is one thing I would like to add though regarding your temp&humidity webserver nr 2:
Normally, when one opens a regular webpage on a mobile, the font is pretty small and you have to manually zoom in to be able to read it. Sadly though, on the next refresh, you have to zoom in again and again and again.
You seem to have solved it by putting the text in between header tags, so the font becomes bigger.
There might however be a more elegant method, by adding ‘viewport’ to the metadata one sends in the http page.
In my program I send the following in the header:
As this has some “fish hooks” in it, I am not sure if this page will leave it ungarbled as is
So I will also print it here as well without the enclosing “fish hooks”
meta name=\”viewport\” content=\”width=device-width, initial-scale=1\” /
, but just in case it is explained here as well: https://www.w3schools.com/html/html_responsive.asp
mind you that in the w3school example wherever you come across a quote sigh, you probably need to ‘escape’ it so ” becomes \”
Anyway, what it does is to already set an initial scale for the text.
Hi there,
Instead of the ESP8266 12-E NodeMCU Kit, I am using the ESP8266 12-F NodeMCU Kit, and I cannot get it to work. I read that the only difference between the two was the wifi aerial layout, and that the 12-E sketch should work – am I mistaken?
Fantastic project. Thank you.
Having an issues that have not been able to resolve yet. Any suggestions appreciated. The error message is “xtensa-lx106-elf-g++: error: CreateProcess: No such file or directory”
Have turned AV off, run as admin, confirmed permissions for the IDE but still get the same error. Would love to use this project so any help very appreciated.
Awesome awsomeness! This works great. For some reason my IDE has to have the 8266 boards deleted and then reinstalled to avoid the “xtensa-lx106-elf-g++: error: CreateProcess: No such file or directory”. But now that I know that it works perfect.
An observation and feedback if any ideas: the same DHT11 reads locally with an attiny 3 degrees lower than the web server.
Also, is there a way to permanently assign the ip address within the 8266 sketch? Or query the IP address of the 8266 from a browser?
Thanks again. Great project!
Hi Fred.
Do you mean having a static IP address? For that, you can follow this tutorial: https://randomnerdtutorials.com/esp32-static-fixed-ip-address-arduino-ide/
I hope this helps.
Regards,
Sara
Hi Sara, Hi Rui,
what should be changed to host the web page on a web site instead of on ESP8266 web server?
Hi.
We don’t have a tutorial about that specific subject.
We have something similar. This creates a database with your sensor readings that you can access from anywhere (uses your own website).
https://randomnerdtutorials.com/esp32-esp8266-mysql-database-php/
Regards,
Sara
Hi Rui, Hi Sara, please let me know what I have to change in order to add another further variable on the web server, for exaple I would add “Heat Index”, I modified the sketch but, I see regularly shown on the serial monitor my heat index, but not on the server.
I added the function:
String readDHTHeatindex() {
//Calcolo dell’indice di calore in gradi Celsius (Fahreheit = false)
float h = dht.readHumidity();
float t = dht.readTemperature();
float hic = dht.computeHeatIndex(t, h, false);
//Verifica se la lettura è andata a buon fine.
if (isnan(hic)) {
Serial.println(“Errore lettura sensore DHT!”);
return “–“;
}
else {
Serial.println(hic);
return String(hic);
}
And I made some modification on the web server code:
(…)
All the rest is the same made from you.
PS: please be so kind tell me whats does mean this row
if (this.readyState == 4 && this.status == 200)
what is 4 and what is 200?
Hi.
From what I see, you seem to be doing the right procedures.
Do you get any errors on the Serial Monitor?
About 4 and 200 you can read more here: stackoverflow.com/questions/17561463/readystate-vs-status-200
Regards,
Sara
Good morning Sara, no, I’m not receiving any error feedback
I just wonder why it is not working…
Rui,
Super job and thanks for all the responses from other contributors. The DHT yield() comments really helped.
Hello, thank you for the excellent tutorial. I managed to get is working with the DHT22 and I have tried to add a LDR but unfortunately cant get the value to display on the web server.
Really appreciate if you could have a look at my code and see where I have gone wrong. The web server is only displaying temp and humidity despite adding an extra paragraph for the LDR. I am seeing the value from the LDR in serial monitor.
(…)
Thanks a lot
Hi.
Do you still have that issue?
Can you please share the code using pastebin? https://pastebin.com/
Thanks.
Regards,
Sara
Hi Sara, thanks for getting back to me sorry I have only just noticed. I pasted the code into pastebin but cant see how to share it with you. I have gone over it again and again and cant see where I am going wrong. Really appreciate any help that you can give. This is the code:
// Import required libraries
#include
#include
#include
#include
#include
#include
#include
#include
#include
// Address
Adafruit_ADS1115 ads(0x48);
// Replace with your network credentials
const char* ssid = “Pixel_8744”;
const char* password = “12345678”;
#define DHTPIN 2 // 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);
// current temperature & humidity, updated in loop()
const int analogInPin = A0;
float t = 0.0;
float h = 0.0;
float LDR1Value = 0.0;
float LDR1MappedValue = 0.0;
float Voltage = 0.0; //For ADC
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Generally, you should use “unsigned long” for variables that hold time
// The value will quickly become too large for an int to store
unsigned long previousMillis = 0; // will store last time DHT was updated
// Updates DHT readings every 5 seconds
const long interval = 5000;
const char index_html[] PROGMEM = R”rawliteral(
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h3 { 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: 5px;
}
Settlement Tester
Temperature
%TEMPERATURE%
°C
ldr1
%LDR1%
%
Humidity
%HUMIDITY%
%
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();
}, 5000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“ldr1”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “/ldr1”, true);
xhttp.send();
}, 5000 ) ;
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();
}, 5000 ) ;
)rawliteral”;
// Replaces placeholder with DHT values
String processor(const String& var){
//Serial.println(var);
if(var == “TEMPERATURE”){
return String(t);
}
else if(var == “LDR1”){
return String(LDR1MappedValue);
}
else if(var == “HUMIDITY”){
return String(h);
}
return String();
}
void setup(){
ads.begin();
ads.setGain(GAIN_ONE);
// Serial port for debugging purposes
Serial.begin(115200);
dht.begin();
// Connect to Wi-Fi
WiFi.begin(ssid, password);
Serial.println(“Connecting to WiFi”);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println(“.”);
}
// Print ESP8266 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”, String(t).c_str());
});
server.on(“/humidity”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, String(h).c_str());
});
server.on(“/ldr1”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, String(LDR1MappedValue).c_str());
});
// Start server
server.begin();
}
void loop(){
unsigned long currentMillis = millis();
if (currentMillis – previousMillis >= interval) {
// save the last time you updated the DHT values
previousMillis = currentMillis;
// Read temperature as Celsius (the default)
float newT = dht.readTemperature();
// read the analog in value:
// Read temperature as Fahrenheit (isFahrenheit = true)
//float newT = dht.readTemperature(true);
// if temperature read failed, don’t change t value
if (isnan(newT)) {
Serial.println(“Failed to read from DHT sensor!”);
}
else {
t = newT;
Serial.print(“\t Temperature = “);
Serial.println(t);
}
// Read LDR1
// float LDR1Value = analogRead(analogInPin);
// float newLDR1MappedValue = map(LDR1Value, 0, 1023, 0, 1000);
int16_t adc0;
adc0 = ads.readADC_SingleEnded(0);
float newLDR1MappedValue = (adc0 * 1);
// if LDR1 read failed, don’t change h value
if (isnan(newLDR1MappedValue)) {
Serial.println(“Failed to read from LDRisnan arduino!”);
}
else {
LDR1MappedValue = newLDR1MappedValue;
Serial.print(“\t LDR Mapped Value = “);
Serial.println(LDR1MappedValue);
}
// Read Humidity
float newH = dht.readHumidity();
// if humidity read failed, don’t change h value
if (isnan(newH)) {
Serial.println(“Failed to read from DHT sensor!”);
}
else {
h = newH;
Serial.print(“\t Humidity = “);
Serial.println(h);
}
}
}
Its okay I’ve worked it out 🙂 thanks
Thank you for an excellent program and guide. works great on an adafruit feather huzzah with only a few timing changes. The chip is a power pig so I will need to provide a solar panel to charge the lithium bat. I will also add the auto update (client.println(“”); statement to send updates automatically. Otherwise it is as advertised!
Thanks so much for the tutorial! This is exactly what I needed. I just wanted to set up two NodeMCUs with DHT11s as cheap remote temperature/humidity monitors, and this did the trick. Took me a little bit to figure out I needed to change the default DHT22 definition to DHT11, but after that, flawless.
Thanks again
Hi Nick.
That’s great! Thank you for following our projects 😀
Regards,
Sara
Nice project. Thank you.
Thanks 😀
Nice one again.
I wanted to timestamp this, but found that NTP gets really wrong data when under an Asynchronous server. Is there a fix for this?
Well, Async might be ok….Went to a static IP and it went bad.???
Yep Async is ok, fixed IP not ok.
Thanks to both of you…I combined this and the Lora program. I redid the html to show temp, humidity, and pressure and uploaded it to the SPIFFS. Used a BME280 with a Wemos D1, put on a circuit board with a breadboard buddy, and put it in my observatory. Works great! Fixed the IP with a reservation on the router. Still have no idea why a static IP causes the NPT stuff to go wonky.
Finally found if you add:
IPAddress dns1(8, 8, 8, 8 ); //dns 1
IPAddress dns2(8, 8, 4, 4 ); //dns 2 in declarations, and:
WiFi.setAutoConnect(false); // Disconnect any previous config
WiFi.config(staticIP, gateway, subnet, dns1, dns2); before WiFi.begin,
then I add:
timeClient.setTimeOffset(utcOffsetInSeconds);
right after the timeClient.update(); statement.
The time and the date are now correct with StaticIP. I also added an OLED display so when in my Observatory, I have the correct date and time.
Thanks,
Joe
Hi Sara,
Update:
This has been working in my Observatory where temp vary from below freezing to over 100 degrees in summer. Found OLED fades out over time. Changed sketect at the end to :
display.display();
delay(5000);
display.clearDisplay();
display.display();
This way, the display is lit for about 5 sec out of every 30 (interval).
Long enough to get the time when I need it and the oled should last much longer.
Great!
Thanks for sharing that.
Regards,
Sara
Hi, I’m newbie on esp2866 + dht22 topic.
I read all the instructions but I have ‘Failed to read from DHT sensor!’ message.
I’m running an ESP2866 (nodemcu v3) supplied by AZDelivery and a DHT22 supplied by DollaTek.
I omitted the resistor because it should be integrated with the dht module.
The wifi connection and web server is working fine.
Do you have suggestions?
Thankyou
Hi.
Take a look at this article and see if it helps: https://randomnerdtutorials.com/solved-dht11-dht22-failed-to-read-from-dht-sensor/
Regards,
Sara
All done already.
Waiting for another set of three DHT22.
I’ll try again in few days.
Thank you for now
Received new DHT22 from AZDelivery and it works perfectly as suggested in the guide. Previous DHTs have something wrong.
Thankyou.
Stefano
Hi,
I’ve built he DH12 and it works fine, would it be possible to give some advice on using a different sensor, say the HC-04 Ultrasonic ?
Hi Brian.
You just need to replace the DHT readings with the Ultrasonic sensor readings. The web server remains the same.
To read from the ultrasonic sensor, you can read this tutorial (it’s for Arduino, but I think it should be compatible with the ESP8266): https://randomnerdtutorials.com/complete-guide-for-ultrasonic-sensor-hc-sr04/
Regards,
Sara
Hi~
I am building a web server. But I can not find arduino.h~
Would you mind please let me know where the library is?
Thank you~
Hi Roy. You don’t need to include that.
Only if you’re using platformIO.
Regards,
Sara
Bonjour.
J’ai aucun retour T°c ni de Humidité sur mon écrans
Ma carte et un ESP-01.
j’ai connecter le OUT du DHT11 en GPIO2 je ne serais pas comment le modifier sur le programme:
il semble qui faut modiier la ligne 19 :
#define DHTPIN 1
avez vous un idée de modification du code
bonne soirée
Hi.
Search for the following line
#define DHTPIN 5 // Digital pin connected to the DHT sensor
replace with
#define DHTPIN 2 // Digital pin connected to the DHT sensor
Regards,
Sara
buenas tardes, no consigo medidas con DHT22, si mide correctamente con DHT1, alguien sabe si hay alguna problema con la librería de Adafruit para este sensor
Hi Jesus.
Take a look at this guide and see if you find something that solves your problem: https://randomnerdtutorials.com/solved-dht11-dht22-failed-to-read-from-dht-sensor/
Double check that you selected the right sensor in your code:
#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
Regards,
Sara
muchas gracias por la contestación, el código se ha modificado para que reconozca el sensor DHT22, he probado dos DHT22 y no funciona ninguno y solo cambiando la linea de código #define DHTTYPE DHT22, por su correspondiente para el DHT11 y cambiado el sensor en el circuito, funciona, por lo que me surgía la duda si la librería funciona correctamente para el sensor DHT22
Hi.
It should also work for the DHT22.
I don’t know why you can’t get it working if you have the right pin definition and correct wiring.
It may be a problem with the sensor itself…
Regards,
Sara
Amazing job … again!
Quick question for you. I’ve seen that many times in your different tutorials. If I compare the 2 different diagrams with either the ESP-01 and the NodeMCU, does that mean you don’t need to power the NodeMCU as it is shown in the ESP-01?
Thank you and sorry in advance because I have a feeling it’s a stupid question 🙂
Hi.
To power the ESP8266 NodeMCU, you can simply use a USB cable.
Alternatively, you can provide power through the VIN and GND pins.
I hope this is clear.
Regards,
Sara
Very clear.
Thank you!
Everything worked like a charm!! Now I can go to next step and send my data to a distant server. You guys rock! Thanks a lot again for these amazing tutos.
Laurent
That’s great!
Thanks 🙂
Awesome tutorial. Thank you. One small change. In the html code you have
%HUMIDITY%
%
The % sign is interpreted as something else as a literal % and adding another block (in my case a moisture sensor) doesn’t work. Replace with
%HUMIDITY%
%
Yes, you are right.
Thanks for pointing that out.
Regards,
Sara
Sara, Rui, another winner. I was able to modified your web server code (2) with ease to work with a DHT22 and an ESP8266 01s.
Thank you!
That’s great! 😀
Hi Rui & Sara,
Might I suggest that instead of
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
you use the HTML Character entity code for % instead, so …
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
I’ve just spent a day ripping my hair out with a fascinating issue caused by having used >%< for text a couple of times in a page and boy does the processor function and the page display gets messed up … and it did take me over a day to work out why it was all going crazy … bt hey at least I learned something!!
I know it would be a pain for you as you have this code in quite a few projects and it would be better with the HTML entity code … and to be browser safe maybe use the numbers instead so instead of % somebody could use % or %
and likewise for ° the numbers are ° or °
All found @ dev.w3.org/html5/html-author/charref
Hope this finds you both safe and well …
Pete
Thanks for the tip! It’s definitely the best method using HTML character entities.
Another workaround on the % issue is to change the placeholder used by the ESPAsyncWebServer library.
#define TEMPLATE_PLACEHOLDER ‘~’
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
And then use
~TEMPERATURE~
This allows HTML or CSS tags such as
table { width: 100%; }
Web reference
https://github.com/me-no-dev/ESPAsyncWebServer/blob/master/src/WebResponseImpl.h#L62
Great project, thank you for sharing with us.
I got it up and running and it looks great. Do you have a easy way to convert this over to fahrenhei? Thank you .
Hi.
Replace this
float newT = dht.readTemperature();
with this
float newT = dht.readTemperature(true);
Regards,
Sara
Thank you very much. Some reason i did not see your replay.
After read a little on the code i found it. For anyone else that might want to know. You have to change 2 lines. This really is a great project.
// float newT = dht.readTemperature(); <—— Add // to this line.
// Read temperature as Fahrenheit (isFahrenheit = true)
float newT = dht.readTemperature(true); <——–Remove // from this line
Great tutorial – thanks.
I modified it to also display the time, which I got from a different one of your tutorials. I put the time after the Humidity display. I couldn’t get it to work correctly until I replaced the ‘%’ sign after Humidity with
%. I thought I’d tell you; do errant%mess up HTML code?Hi.
Yes, it is better to use the HTML entity instead.
Regards,
Sara
This way of building html is great. Now I can test the code in mine html-editor and than download in the arduino IDE as one copy.
thanks for you example
Futher I tried to extend the number of variables, but that fails.
I add the items in respectively the paragraph, the interval, the processor and 1 float.
But this didn’t work. It only represent 2 variables. If I changed the order than the only the 2 first in order were represented.
How can I extend the number of variables
Hi Radek Štrébl,
Just to thank you for your research.
Had the same problem with the dallas ccp file.
After deleting them it works fine know.
Nice
Hello, Mine problem has been solved.
It was the % which makes the troubles
regards
Ed
If you’re using an DHT22 on ESP-01, GPIO 2 is NOT the most suitable pin to connect to the DHT data pin. GPIO 2 is HIGH during boot and this causes the DHT22 to crash. If you briefly disconnect it from power it starts working ok, but every time you reset the ESP-01, the problem occurs again.
My solution: Use GPIO 0 instead. This one is not effected by boot.
How to see just one digit after decimal point on the web server? Like 25.6 and not 25.66.
In the processor function change
return String(temperature, 2);
with
return String(temperature, 1);
Hello,
how can i add multiple temperature sensors to this code? I assign them to the pins, but i have no idea how to make them appear in the HTML.
You need to duplicate the html and assign unique span id for each temp/humidity value. You need to duplicate the string processor and set interval to include the second sensor.
The ESPAsyncWebServer library has a difficult time dealing with the percent sign. My previous comment about replacing the TEMPLATE_PLACEHOLDER only partially works. A better work around is to use repeated percent signs such as
table { width: 100%%; }
in the style sheet and the HTML entity
& percnt; (without the space between & and percent;)
in the body.
HI, thanks lot for this very cool project?
is it possible to meassure 2 DHT22 sensors with one ESP?
Yes.
You need to create two different DHT instances on different pins.
Regards,
Sara
how can i impemitade the ESP8266 web server project code ?
My DHT22 code runs and i see the temprate an humidity. but i would the HTTP Server too to implemitate in my Homebridge.
where i must place it in the code ? i dont know ….
or the complete HTTP Server code in a new tab ?
im new in this coding
Greets Tom
Thanks alot for cool project. I have integrated this code with simple soil moisture sensor which controls a small motor automatically.
I am new to this iot things, I need help with adding analog soil moisture sensor value to the webserver. and motor on off button.
below is serial read out.
2:16:01.801 -> 192.168.160.215
22:16:01.801 -> 915
22:16:03.821 -> 28.90
22:16:03.821 -> 78.00
22:16:03.821 -> 912
22:16:05.835 -> 913
22:16:07.853 -> 908
22:16:09.868 -> 28.90
22:16:09.868 -> 78.00
hi may I know how to set IP address always get the same when push the reset button
thanks
Hi.
You can follow this tutorial to set a fixe dip address: https://randomnerdtutorials.com/esp8266-nodemcu-static-fixed-ip-address-arduino/
Regards,
Sara
Hello everyone,
Thanks for this great tutorial, I was able to start with my project. I do have a small issue, I added a Resistive soil moisture sensor and add to my code, in the serial monitor I can display that soil moisture percentage correctly (0…100%) but in the webpage it displays 123% and so on. Can someone please help me with this issue?
Thanks
Hi.
In your code, the serial monitor shows only 0 to 100% because you added conditions to check when it is higher or lower than 100%.
In those conditions, you didn’t update the value of the soilmoisturepercent variable. That’s why it shows higher values.
Another issue is because you’re getting higher or lower values than the values you’ve set for higher and upper limits on the map() function.
I hope this helps.
Regards,
Sara
Hello,
I’m having a problem with an ESP project i’m working on and i’m hoping you can help me. I’ve tried to ask for help in a lot of forums, but no help was found.
i want to make an ESP send sensor data to a web page and also save the data onto a online spreadsheet so i have some history. I merged together two codes from two different guides (this is one of them) to do this and it runs, but when i run it, it comes up with this in the Serial Monitor:
Fejlbody {background-color: #fff; margin: 0; padding: 0;}.errorMessage {font-family: Arial,sans-serif; font-size: 12pt; font-weight: bold; line-height: 150%; padding-top: 25px;}
TypeError: Cannot read property 'getEvents' of undefined (linje 141, fil "Kode")
i would have posted a screenshot of the Serial Monitor, but unfortunately, i dont think that is possible here. There is a pattern:
First it writes “POST or SEND Sensor data to Google Spreadsheet:”, followed by the line i pasted earlier in this message.
And it does that 3 times. then it writes this:
“Failed to read from DHT sensor!” 2 times and then it starts over with the first 3 messages. I tried looking through the code, and with my (limited) knowledge i would say all is fine. Unfortunately, im only a beginner and all this is way over my head, so i’m looking for you pro’s that can lend me a hand. I’m hoping you can and will help me! 🙂
Hi.
The first error is related to your HTML/JavaScript. You are trying to use the getEvents() function on an object that was not defined.
For the DHT error, take a look at the following troubleshooting guide:https://randomnerdtutorials.com/solved-dht11-dht22-failed-to-read-from-dht-sensor/
Regards,
Sara
Hello,
Thanks for your work, this article is very clear and helping me for my project.
I’m trying to set the ESP8266 as a web server that can handle GET requests from another website (working as an API), but this doesn’t work. The final goal is to get temperature/humidity from 2 or more ESP8266.
The idea here is, when the website sends a GET to “/temperature”, the server should send back the temperature, either as text (or JSON response). So i have this in the setup() :
server.on(“/temperature”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, String(t).c_str());
});
When calling http://the_ip_of_esp8266/temperature, the temperature is sent back, no problem.
When calling a webpage (http://localhost/index.html as i’m working with WAMP) that includes a fetch(url) javascript function, i always get a CORS error message. Whatever i try to set on server side as the header, nothing seems to work 🙁 Here is the javascript :
var url = ‘http://192.168.104.198/temperature’;
// Call fetch(url) with default options.
var aPromise = fetch(url);
aPromise
.then(function(response) {
console.log(“OK! Server returns a response object:”);
console.log(response);
if(!response.ok) {
throw new Error(“HTTP error, status = ” + response.status);
}
// Get JSON Promise from response object:
var myJSON_promise = response.json();
// Returns a Promise object.
return myJSON_promise;
})
.then(function(myJSON) {
console.log(“OK! JSON:”);
console.log(myJSON);
})
.catch(function(error) {
console.log(“Noooooo! Something error:”);
console.log(error);
});
The output in the chrome console is :
Access to fetch at ‘http://the_ip_of_esp8266/temperature’ from origin ‘http://localhost’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
the_ip_of_esp8266/temperature:1 Failed to load resource: net::ERR_FAILED
test.html:56 Noooooo! Something error:
test.html:57 TypeError: Failed to fetch
at test.html:36
I replaced the real ip adress of the ESP8266 with “the_ip_of_esp8266” in the error log.
Could you please give me some hints about setting this kind of API web server ?
Thank you for your help !
François
Rui and Sara,
This tutorial is well done as always. Thank you for the great work.
This DHT tutorial uses the AsyncWebServer library but it gets a DHCP IP address.
I was wondering how to set a static IP using an ESP8266NodeMCU board.
I saw the tutorial on setting a static for the ESP8266 board but it looks like I would have to eliminate the Async web server library.
I tried adding the code for a static IP but errored with a “conflicting declaration ‘AsyncWebServer server’.
Thoughts?
Thanks, Steve
Hi.
That method works fine with the AsyncWebServer.
You should have implemented something wrong.
Does the error give more information?
Regards,
Sara
Thanks for the reply Sara.
I was able to get it to work. I programmed a new board with the DHT code and added the static IP code.
Then I also changed the Asyncserver port to 82 so I can set a port forwarding entry in my router to get the temp away from home.
Thanks again.
Steve
Please can you share the code for port forwarding using Asyncserver.
Thanks for the tuto, I have to use the VU (V USB 5V) pin of the NodeMCU and a direct power supply (not USB computer port).
Everything flawless, just a small problem with a large difference measured – the actual temperature and humidity. DHT11 Aliexpress + 6C and 12% humidity. Too bad I didn’t find a reduction option in the code. Perfect!
Thank you for the great tutorial!
I would like to know is the database be used in this project? Do I need to use XAMPP and PHP MySQL server for this project as I want to display the data on my localhost page and I am not sure if the database is used in this project?
Looking forward to your reply and thank you.
Hi.
This specific project doesn’t use database.
If you want to use a database, you can check the following tutorials:
https://randomnerdtutorials.com/cloud-weather-station-esp32-esp8266/
https://randomnerdtutorials.com/raspberry-pi-apache-mysql-php-lamp-server/
https://randomnerdtutorials.com/esp32-esp8266-mysql-database-php/
Regards,
Sara
How to show the temperature and humidity, without decimals. 20.00 / 56.00. 20/56 ?
You can use int instead of float.
Specify the number of decimals.
// Replaces placeholder with DHT values
String processor(const String& var) {
//Serial.println(var);
if (var == "TEMPERATURE") {
return String(temp, 1);
}
else if (var == "HUMIDITY") {
return String(humid, 0);
}
and
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, "text/plain", String(temp, 1).c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send_P(200, "text/plain", String(humid, 0).c_str());
});
Hello. I would like to read a new analog data from A0 and show it in a third paragraph along with DHT datas. But, when I try to do this it doesn’t appear on web page. I just appear on the second paragraph. Could you please help me how can add a third data on this example?
Here are my code:
ESP8266 DHT Server
Temperature
%TEMPERATURE%
°C
Humidity
%HUMIDITY%
%
<p>
<i class="fas fa-tint" style="color:#00add6;"></i>
<span class="dht-labels">Toprak</span>
<span id="toprak">%TOPRAK%</span>
<sup class="units">%</sup>
Hello Sara,
Please help with this issue.
Replace the % signs as in this “%” with the HTLM entity for percent. Like this – “%”
The async processor gets confused by a solitary percent sign.
If you have to use a percent sign (as in the CSS) then use two percent signs together. Like this – “table { width: 100%%; }”
It stripped out the HTLM – try again
replace this
%
with this
%
Hi.
Don’t use a % sign in your Units. Use a HTML entity. Search for “% HTML entity” and use that instead of the %. Otherwise, the % signs in your HTML will break the % for the placeholders.
Regards,
Sara
It works, thank you Sara and Alan.
Fixed mine too, Thanks!
How can i change color of text according to value of the temperature?
Ex: If Temperature >=35
text color is red
else it is green
Hi Raul;
Thanks for the great info, i bought few of your books and I liked so far, althought Im not as intellignet as you and the folks here. Anyways, I tried your code and I was able to get the IP on serial monitor – 192.168.0.164 but i wasnt able to open the page – using google chrome on my windows 10, as well Chrome on Mac (12.5.1).
What am i doing wrong? can you help please?
Cheers
Hi.
What happens when you open the web page?
Do you get any errors on the Serial Monitor?
And on the web browser, what do you see?
Regards,
Sara
I added moisture in index_html but on the web I got an error that was inserted text on the line above
Great tutorial even years later. I had a bunch of ESP-01 laying around and this worked out very well.
There might be a more eloquent way (I’m a novice programmer) but I changed the display precision to one decimal like so. String(t) >> String(t, 1)
110: return String(t, 1);
113: return String(h, 1);
139: request->send_P(200, “text/plain”, String(t, 1).c_str());
142: request->send_P(200, “text/plain”, String(h, 1).c_str());
What a great text!I’m a chinese student who is doing some DIY.I cannot find text better than this one in chinese language website and many texts are just copy others,which makes me almost lost confidence.But I see this.Thanks!!
Hello,
when I compile this code (and some others for esp8266) I have same error.
Traceback (most recent call last):
File “/home/bernard/.arduino15/packages/esp8266/hardware/esp8266/3.1.0/tools/mkbuildoptglobals.py”, line 846, in
sys.exit(main())
File “/home/bernard/.arduino15/packages/esp8266/hardware/esp8266/3.1.0/tools/mkbuildoptglobals.py”, line 759, in main
if time.time_ns() < os.stat(commonhfile_fqfn).st_mtime_ns:
AttributeError: module ‘time’ has no attribute ‘time_ns’
exit status 1
Erreur de compilation pour la carte LOLIN(WEMOS) D1 mini Pro
Hi.
Double-check your ESP8266 boards’ installation in your Arduino IDE.
You may need to update.
Regards,
Sara
Hello Sara,
thanks for the help. As I had the problem on 3 different computers, after rollbacks, other boards, desinstalls, reinstalls, I decided to install the latest version.V2.0.3. I find it less clear than the 1.8 but this IS the solution.
Have a nice day. Bonjour de la Belgique.
There’s some issue with ESP8266 boards version 3.1.* – https://github.com/esp8266/Arduino/issues/8803
I downgraded to ESP8266 boards v. 3.0.2 and it resolved compilation error.
Thanks Obernon.
Have a nice day.
Yes Thanks Oberon, fixed it for me too.
John
I am trying with with D1 board, just get this output repeating ?
ets Jan 8 2013,rst cause:4, boot mode:(3,6)
wdt reset
load 0x4010f000, len 3424, room 16
tail 0
chksum 0x2e
load 0x3fff20b8, len 40, room 8
tail 0
chksum 0x2b
csum 0x2b
v0004b1a0
~ld
Co⸮ to WiFi
Hi.
check all your connections and power source.
Regards,
Sara
Thanks, it was a power issue with a clone D1 board, the voltage regulator was 150mA type 4B2K (should be 500mA) I had to add a 220μF capacitor between 3v3 and Ground and WiFi connected.
Hello I want to use wifiManager to configure the ssid and password. I try but it gives me errors. Could you explain to me what I should do?
What project are you following and what error do you get?
Tenho uma questão é possivel adicionar um ldr a este codigo certo?
pos eu faço %LDR% crio a variavel l faço server.on(“/ldr”, HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, “text/plain”, String(l).c_str());
});
porem aparece me sempre junto a humidade escrito ldr e nao separado
Olá.
Como assim?
Pode explicar melhor o problema?
Regards,
Sara
Hi, I have uploaded the code but i get everty time the same error:
serial.serialutil.SerialTimeoutException: Write timeout
The error shows up after i try to connect my esp8266.
Bonjour,
merci pour ce tuto très très bien fait.
Je l’ai réalisé et quelle joie de voir la page web mise à jour automatiquement.
Merci encore.
Martial du 02
Hi,
thank you very much. This all works great except one thing:
The unit part of the humidity paragraph in html should not be “%” but “%”. Otherwise one gets in trouble if a third paragraph gets added (like WiFi Signal strength). The % sign causes a wrong html interpretation.
Thanks
Joerg
I’m trying to use the code, but when I try to verify the code, I get this error;
Compilation error: ESP8266WiFi.h: No such file or directory
where do I find this library ?
Hi.
That library is part of the ESP8266 core by default.
Just make sure you have an ESP8266 board selected in Tools > Board before compiling the code.
Regards,
Sara
I have an issue with my project.
I tried compiling the esp8266 and while i go to serial monitor the results everything is nan.
How to fix it. am i wrong?
Hi.
Probably the sensor is not properly attached or you didn’t select the right sensor (DHT11 or DHT22) in the code.
Regards,
Sara
Did you import the required libraries for your project:
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <WiFiManager.h>
#include <Hash.h>
#include <Adafruit_Sensor.h>
#include <BlynkSimpleEsp8266.h>
#include “blynk.h”
#include <DHT.h>
And did you initialize the sensor?
// Initialize sensor.
dht.begin();
The example code I provided previously is from another project I did; so my included libraries are likely much more then you require.
However make sure you initialize the sensor in the setup routine. If you leave that out you will definitely get nans.
Thanks. Great tutorial and well explained.
Hello, put the tutorial for setting up the Wi-Fi module with gas sensor model mq9. Thank
Hello,
I have successfully installed and programmed the project.
But the DHT22 shows a temperature that is about 2 degrees Celsius too high.
How can this be compensated?
Thanks Jürgen
(This text was translated with Google)
ESP8266 / DHT22 / AsyncWebServer
Hello. I’m trying to compile code for ESP8266 WiFi, but the compilation stops at ” float hic = dht.computeHeatIndex(t, h, false);” Please help. Best regards.
Hi.
Which error exactly do you get?
Regards,
Sara
Hi Sara & Rui,
It is amazing to see that you have been supporting this tutorial for many years. I am very impressed.
However, I am having a problem with the first example. The web page displays perfectly the first time but 10 seconds later the update fails leaving random character in the place of the temperature and humidity values.
I have tried this on Firefox, Chrome and Edge and get the same result.
Do you have any idea what may be wrong?
Thanks.
Best regards, Nigel
Hi.
Do you get any errors on the Serial Monitor?
Regards,
Sara
Hi Sara,
No the serial values are correct.
The only change I have made to the original code is to change DHTPIN to 2.
Thanks for your help.
Nigel
Hi Sara,
I’ve solved it!
I had not installed the ESPAsyncWebServer library correctly. The library was not in the Arduino\libraries folder yet it still compiled. I guess the compiler found the functions it needed somewhere else.
Thanks for a great tutorial. I can now study how this all works.
Best regards, Nigel