ESP32/ESP8266: DHT Temperature and Humidity Readings in OLED Display

Learn how to display temperature and humidity readings from a DHT11/DHT22 sensor in an SSD1306 OLED display using an ESP32 or an ESP8266 with Arduino IDE.

The idea of using the OLED display with the ESP32 or ESP8266 is to ilustrate how you can create a physical user interface for your boards.

Project Overview

In this project we’ll use an I2C SSD1306 128×64 OLED display as shown in the following figure.

The temperature and humidity will be measured using the DHT22 temperature and humidity sensor (you can also use DHT11).

If you’re not familiar with the DHT11/DHT22 sensor, we recommend reading the following guide:

• ESP32 with DHT11/DHT22 Sensor (Arduino IDE)

Parts required

For this tutorial you need the following components:

• 0.96 inch OLED display 
• ESP32 or ESP8266 (read ESP32 vs ESP8266)
• DHT22 or DHT11 temperature and humidity sensor 
• Breadboard
• 10k Ohm resistor
• 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!

Schematic

The OLED display we’re using communicates via I2C communication protocol, so you need to connect it to the ESP32 or ESP8266 I2C pins.

By default, the ESP32 I2C pins are:

• GPIO 22: SCL
• GPIO 21: SDA

If you’re using an ESP8266, the default I2C pins are:

• GPIO 5 (D1): SCL
• GPIO 4 (D2): SDA

Follow the next schematic diagram if you’re using an ESP32 board:

Recommended reading: ESP32 Pinout Reference Guide

If you’re using an ESP8266 follow the next diagram instead.

In this case we’re connecting the DHT data pin to GPIO 14, but you can use any other suitable GPIO.

Recommended reading: ESP8266 Pinout Reference Guide

Installing Libraries

Before uploading the code, you need to install the libraries to write to the OLED display and the libraries to read from the DHT sensor.

Installing the OLED libraries

There are several libraries available to control the OLED display with the ESP8266. In this tutorial we’ll use the libraries from adafruit: the Adafruit_SSD1306 library and the Adafruit_GFX library. Follow the next steps to install these libraries:

1. Open your Arduino IDE and go to Sketch > Include Library > Manage Libraries. The Library Manager should open.

2. Type “SSD1306” in the Search box and install the SSD1306 library from Adafruit.

3. After installing the SSD1306 library from Adafruit, type “GFX” in the search box and install the library.

Installing the DHT Sensor libraries

To read from the DHT sensor we’ll use the libraries from Adafruit.

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.

Installing the ESP boards

We’ll program the ESP32/ESP8266 using Arduino IDE, so you must have the ESP32/ESP8266 add-on installed in your Arduino IDE. If you haven’t, follow the next tutorial first that fits your needs:

• Install the ESP32 Board in Arduino IDE (Windows instructions)
• Install the ESP32 Board in Arduino IDE (Mac OS X and Linux instructions)
• Install the ESP8266 Board in Arduino IDE

Finally, restart your Arduino IDE.

Code

After installing the necessary libraries, you can copy the following code to your Arduino IDE and upload it to your ESP32 or ESP8266 board.

/*********
  Rui Santos
  Complete project details at https://randomnerdtutorials.com  
*********/

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

#define DHTPIN 14     // 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);

void setup() {
  Serial.begin(115200);

  dht.begin();

  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000);
  display.clearDisplay();
  display.setTextColor(WHITE);
}

void loop() {
  delay(5000);

  //read temperature and humidity
  float t = dht.readTemperature();
  float h = dht.readHumidity();
  if (isnan(h) || isnan(t)) {
    Serial.println("Failed to read from DHT sensor!");
  }
  // clear display
  display.clearDisplay();
  
  // display temperature
  display.setTextSize(1);
  display.setCursor(0,0);
  display.print("Temperature: ");
  display.setTextSize(2);
  display.setCursor(0,10);
  display.print(t);
  display.print(" ");
  display.setTextSize(1);
  display.cp437(true);
  display.write(167);
  display.setTextSize(2);
  display.print("C");
  
  // display humidity
  display.setTextSize(1);
  display.setCursor(0, 35);
  display.print("Humidity: ");
  display.setTextSize(2);
  display.setCursor(0, 45);
  display.print(h);
  display.print(" %"); 
  
  display.display(); 
}

View raw code

How the code works

Let’s take a quick look on how the code works.

Importing libraries

The code starts by including the necessary libraries. The Wire, Adafruit_GFX and Adafruit_SSD1306 are used to interface with the OLED display. The Adafruit_Sensor and the DHT libraries are used to interface with the DHT22 or DHT11 sensors.

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>

Create a display object

Then, define your OLED display dimensions. In this case, we’re using a 128×64 pixel display.

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

Then, initialize a display object with the width and height defined earlier with I2C communication protocol (&Wire).

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

The (-1) parameter means that your OLED display doesn’t have a RESET pin. If your OLED display does have a RESET pin, it should be connected to a GPIO. In that case, you should pass the GPIO number as a parameter.

Create a DHT object

Then, define the DHT sensor type you’re using. If you’re using a DHT22 you don’t need to change anything on the code. If you’re using another sensor, just uncomment the sensor you’re using and comment the others.

//#define DHTTYPE    DHT11     // DHT 11
#define DHTTYPE    DHT22     // DHT 22 (AM2302)
//#define DHTTYPE    DHT21     // DHT 21 (AM2301)

Initialize a DHT sensor object with the pin and type defined earlier.

DHT dht(DHTPIN, DHTTYPE);

setup()

In the setup(), initialize the serial monitor for debugging purposes.

Serial.begin(115200);

Initialize the DHT sensor:

dht.begin();

Then, initialize the OLED display.

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Address 0x3D for 128x64
  Serial.println(F("SSD1306 allocation failed"));
  for(;;);
}

In this case, the address of the OLED display we’re using is 0x3C. If this address doesn’t work, you can run an I2C scanner sketch to find your OLED address. You can find the I2C scanner sketch here.

Add a delay to give time for the display to initialize, clear the display and set the text color to white:

delay(2000);
display.clearDisplay();
display.setTextColor(WHITE)

In the loop() is where we read the sensor and display the temperature and humidity on the display.

Get temperature and humidity readings from DHT

The temperature and humidity are saved on the t and h variables, respectively. Reading temperature and humidity is as simple as using the readTemperature() and readHumidity() methods on the dht object.

float t = dht.readTemperature();
float h = dht.readHumidity();

In case we are not able to get the readings, display an error message:

if (isnan(h) || isnan(t)) {
  Serial.println("Failed to read from DHT sensor!");
}

If you get that error message, read our troubleshooting guide: how to fix “Failed to read from DHT sensor”.

Display sensor readings on the OLED display

The following lines display the temperature on the OLED display.

  display.setTextSize(1);
  display.setCursor(0,0);
  display.print("Temperature: ");
  display.setTextSize(2);
  display.setCursor(0,10);
  display.print(t);
  display.print(" ");
  display.setTextSize(1);
  display.cp437(true);
  display.write(167);
  display.setTextSize(2);
  display.print("C");

We use the setTextSize() method to define the font size, the setCursor() sets where the text should start being displayed and the print() method is used to write something on the display.

To print the temperature and humidity you just need to pass their variables to the print() method as follows:

display.print(t);

The “Temperature” label is displayed in size 1, and the actual reading is displayed in size 2.

To display the º symbol, we use the Code Page 437 font. For that, you need to set the cp437 to true as follows:

display.cp437(true);

Then, use the write() method to display your chosen character. The º symbol corresponds to character 167.

display.write(167);

A similar approach is used to display the humidity:

display.setTextSize(1);
display.setCursor(0, 35);
display.print("Humidity: ");
display.setTextSize(2);
display.setCursor(0, 45);
display.print(h);
display.print(" %"); 

Don’t forget that you need to call display.display() at the end, so that you can actually display something on the OLED.

display.display(); 

Recommended reading: ESP32 with DHT11/DHT22 Temperature and Humidity Sensor using Arduino IDE

Demonstration

The following figure shows what you should get at the end of this tutorial. Humidity and temperature readings are displayed on the OLED.

Troubleshooting

If your DHT sensor fails to get the readings or you get the message “Failed to read from DHT sensor”, read our DHT Troubleshooting Guide to help you solve that problem.

If you get the “SSD1306 allocation failed” error or if the OLED is not displaying anything in the screen, it can be one of the following issues:

Wrong I2C address

The I2C address for the OLED display we are using is 0x3C. However, yours may be different. So, make sure you check your display I2C address using an I2C scanner sketch.

SDA and SCL not connected properly

Please make sure that you have the SDA and SCL pins of the OLED display wired correctly. If you’re using:

• ESP32: connect SDA pin to GPIO 21 and SCL pin to GPIO 22
• ESP8266: connect SDA pin to GPIO 4 (D2) and SCL pin to GPIO 5 (D1)

Wrapping Up

We hope you’ve found this tutorial about displaying sensor readings on the OLED display useful. The OLED display is a great way to add a user interface to your projects. If you like this project, you may also like to know how to display sensor readings in your browser using an ESP Web Server:

• ESP32 DHT Web Server (Arduino IDE)
• ESP8266 DHT Web Server (Arduino IDE)
• ESP32/ESP8266 DHT Web Server (MicroPython)

You can learn more about the ESP32 and ESP8266 with our courses:

• Learn ESP32 with Arduino IDE
• Home Automation using ESP8266

Thanks for reading.