Get To Know ESP32 #8: Weather Station using DHT22 as Weather Sensor

Feeling lazy staying at home? Take your microcontroller and make this project with me — your very own web server displaying weather measurements.

6 min readMar 30, 2020

Yo, nice to see you again! How are you doing? I’m doing fine — well, not really, there are too many projects being assigned and it seems I can’t handle them. But I decided to do this one (and thankfully, suceed too). As you can see in the title, we’re going to look into making a weather station, in this case, using DHT22.

Preparation:

Hardware:

1 NodeMCU ESP-32S development board with 30 pins (or any ESP32)
1 USB-A to Micro-USB cable
1 Laptop with Arduino IDE installed and configured
1 4.7k Ohm resistor
1 Breadboard
2 Male-to-Male Wire Jumpers
3 Male-to-Female Wire Jumpers

Library:

Adafruit Unified Sensor library to prepare readings from any sensor;
DHT Sensor library to prepare readings from DHT;
Async TCP library as a requirement to install ESPAAsyncWebServer library;
ESPAAsyncWebServer library to build asynchronous web server

Circuit

Next step, we’re going to build the circuit necessary to handle the code.

As you can see, it requires 4.7k Ohm resistor, which was never told to buy by my teacher. I didn’t have one, so how to resolve this problem?

[or at least try to resolve]

We tried using 10k Ohm resistor to replace 4.7k Ohm resistor, and as we thought, it didn’t work. Then, we tried to think how can we use resistors that we have to build a 4.7k Ohm resistor? We looked that perhaps using 2 of 10k ohm resistors would work if parallelized, because it’ll make a 5k resistor. Unfortunately, this didn’t work too. I asked my friend in Electrical Engineering, Daffa, and he said it’s likely to fail since the current might be too small.

I was really curious about where I did wrong, therefore I checked the DHT by uploading a program to only measure weather and it turned out to be working fine. I read the code and I thought there was nothing wrong with it, so I finally decided to buy 4.7k Ohm resistor. Spent about Rp1.500,00 (equals to 0.0938 USD with currency rate 1 USD = Rp15.999,65) to buy it online with free shipping. Here’s some pictures of my circuit with 4.7k Ohm resistor.

UPDATE: I tried to use the circuit without additional resistor (I’m using built in resistor in DHT22) and it also works. Now I feel like a clown. But it’s okay, though. Here’s the circuit without resistor.

Code

Here’s the code that I get from randomnerdtutorials. I only fill the SSID and Password according to the network I’m using. Also, don’t forget to check the DHTType that’s being used in the code.

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/// Import required libraries
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>// Replace with your network credentials
const char* ssid = "[fill with yours]";
const char* password = "[fill with yours]";#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);// 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.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(
<!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>ESP32 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">&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">%</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 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.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());
  });// Start server
  server.begin();
}
 
void loop(){
  
}

Demonstration

This is how my project went. As always, pick up the Type-A to MicroUSB cable and connect the microcontroller to laptop. Upload the code, then open Tools>Serial Monitor or simply press Ctrl+Shift+M. This is how it should look like. If you didn’t see anything, press EN button on ESP32.

After we receive the IP address, we’ll have to input the IP address on search bar on browser.

Tada! It’s done. You can also open the IP address with every devices connected to the network. Below is my video demonstration, with and without resistor.

Note: the ‘Failed to read from DHT Sensor!’ can be handled by checking if the wire jumpers are well-connected.

WebServer_DHT.mp4

With resistor

drive.google.com

WebServer_DHT_WithoutResistor.mp4

Edit description