ESP8266 - Temperature Humidity Sensor - OLED

This tutorial instructs you how to use ESP8266 to read the temperature and humidity from DHT11/DHT22 sensor and displaying it on an OLED.

ESP8266 NodeMCU DHT11/DHT22 temperature humidity sensor OLED display

Hardware Preparation

1×ESP8266 NodeMCU
1×Micro USB Cable
1×SSD1306 I2C OLED Display 128x64
1×SSD1306 I2C OLED Display 128x32
1×DHT11 Temperature and Humidity Sensor
1×DHT11 Temperature Humidity Sensor Module (short)
1×Jumper Wires
1×Breadboard
1×(Optional) 5V Power Adapter for ESP8266
1×(Optional) Screw Terminal Expansion Board for ESP8266

You can use DHT22 sensor instead of DHT11 sensor.

Or you can buy the following sensor kits:

1×DIYables Sensor Kit (30 sensors/displays)
1×DIYables Sensor Kit (18 sensors/displays)
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables.

Overview of OLED display, DHT11 and DHT22 Temperature Humidity Sensor

If you are unfamiliar with OLED display, DHT11 and DHT22 temperature humidity sensor (including pinout, functionality, programming, etc.), the following tutorials can help you:

Wiring Diagram

ESP8266 - DHT11 Module LCD Wiring

The wiring diagram between ESP8266 NodeMCU and DHT11 Sensor OLED

This image is created using Fritzing. Click to enlarge image

See more in ESP8266's pinout and how to supply power to the ESP8266 and other components.

ESP8266 - DHT22 Module LCD Wiring

The wiring diagram between ESP8266 NodeMCU and DHT22 Sensor OLED

This image is created using Fritzing. Click to enlarge image

ESP8266 Code - DHT11 Sensor - OLED

/* * This ESP8266 NodeMCU code was developed by newbiely.com * * This ESP8266 NodeMCU code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/esp8266/esp8266-temperature-humidity-sensor-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <DHT.h> #define OLED_WIDTH 128 // OLED display width, in pixels #define OLED_HEIGHT 64 // OLED display height, in pixels #define DHT_PIN 2 // pin connected to DHT11 sensor #define DHT_TYPE DHT11 Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C DHT dht(DHT_PIN, DHT_TYPE); String temperature; String humidity; void setup() { Serial.begin(9600); // initialize OLED display with address 0x3C for 128x64 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true) ; } delay(2000); // wait for initializing oled.clearDisplay(); // clear display oled.setTextSize(3); // text size oled.setTextColor(WHITE); // text color oled.setCursor(0, 10); // position to display dht.begin(); // initialize DHT11 the temperature and humidity sensor temperature.reserve(10); // to avoid fragmenting memory when using String humidity.reserve(10); // to avoid fragmenting memory when using String } void loop() { float humi = dht.readHumidity(); // read humidity float tempC = dht.readTemperature(); // read temperature // check if any reads failed if (isnan(humi) || isnan(tempC)) { temperature = "Failed"; humidity = "Failed"; } else { temperature = String(tempC, 1); // one decimal places temperature += char(247); // degree character temperature += "C"; humidity = String(humi, 1); // one decimal places humidity += "%"; } Serial.print(tempC); // print to Serial Monitor Serial.print("°C | " ); // print to Serial Monitor Serial.print(humi); // print to Serial Monitor Serial.println("%"); // print to Serial Monitor oledDisplayCenter(temperature, humidity); // display temperature and humidity on OLED } void oledDisplayCenter(String temperature, String humidity) { int16_t x1; int16_t y1; uint16_t width_T; uint16_t height_T; uint16_t width_H; uint16_t height_H; oled.getTextBounds(temperature, 0, 0, &x1, &y1, &width_T, &height_T); oled.getTextBounds(temperature, 0, 0, &x1, &y1, &width_H, &height_H); // display on horizontal and vertical center oled.clearDisplay(); // clear display oled.setCursor((SCREEN_WIDTH - width_T) / 2, SCREEN_HEIGHT / 2 - height_T - 5); oled.println(temperature); // text to display oled.setCursor((SCREEN_WIDTH - width_H) / 2, SCREEN_HEIGHT / 2 + 5); oled.println(humidity); // text to display oled.display(); }

Detailed Instructions

To get started with ESP8266 on Arduino IDE, follow these steps:

  • Check out the how to setup environment for ESP8266 on Arduino IDE tutorial if this is your first time using ESP8266.
  • Wire the components as shown in the diagram.
  • Connect the ESP8266 board to your computer using a USB cable.
  • Open Arduino IDE on your computer.
  • Choose the correct ESP8266 board, such as (e.g. NodeMCU 1.0 (ESP-12E Module)), and its respective COM port.
  • Click to the Libraries icon on the left bar of the Arduino IDE.
  • Search for “SSD1306” and locate the SSD1306 library from Adafruit.
  • Then, press the Install button to complete the installation.
ESP8266 NodeMCU OLED library
  • You will be prompted to install additional library dependencies.
  • To install all of them, click the Install All button.
ESP8266 NodeMCU Adafruit GFX sensor library
  • Search for “DHT” and locate the DHT sensor library by Adafruit.
  • Press the Install button to install the library.
ESP8266 NodeMCU DHT sensor library
  • You will be requested to install some other library dependencies.
  • Click the Install All button to install all of the library dependencies.
ESP8266 NodeMCU Adafruit Unified sensor library
  • Copy the code and open it with the Arduino IDE.
  • Click the Upload button in the Arduino IDE to compile and upload the code to the ESP8266.
  • Place the sensor in hot and cold water, or hold it in your hand.
  • Check out the result on the OLED display and in the Serial Monitor.

※ NOTE THAT:

The code in question will center the text both horizontally and vertically on an OLED display.

ESP8266 Code - DHT22 Sensor - OLED

/* * This ESP8266 NodeMCU code was developed by newbiely.com * * This ESP8266 NodeMCU code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/esp8266/esp8266-temperature-humidity-sensor-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <DHT.h> #define OLED_WIDTH 128 // OLED display width, in pixels #define OLED_HEIGHT 64 // OLED display height, in pixels #define DHT_PIN 2 // pin connected to DHT22 sensor #define DHT_TYPE DHT22 Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C DHT dht(DHT_PIN, DHT_TYPE); String temperature; String humidity; void setup() { Serial.begin(9600); // initialize OLED display with address 0x3C for 128x64 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true) ; } delay(2000); // wait for initializing oled.clearDisplay(); // clear display oled.setTextSize(3); // text size oled.setTextColor(WHITE); // text color oled.setCursor(0, 10); // position to display dht.begin(); // initialize DHT22 the temperature and humidity sensor temperature.reserve(10); // to avoid fragmenting memory when using String humidity.reserve(10); // to avoid fragmenting memory when using String } void loop() { float humi = dht.readHumidity(); // read humidity float tempC = dht.readTemperature(); // read temperature // check if any reads failed if (isnan(humi) || isnan(tempC)) { temperature = "Failed"; humidity = "Failed"; } else { temperature = String(tempC, 1); // one decimal places temperature += char(247); // degree character temperature += "C"; humidity = String(humi, 1); // one decimal places humidity += "%"; Serial.print(tempC); // print to Serial Monitor Serial.print("°C | " ); // print to Serial Monitor Serial.print(humi); // print to Serial Monitor Serial.println("%"); // print to Serial Monitor } oledDisplayCenter(temperature, humidity); // display temperature and humidity on OLED } void oledDisplayCenter(String temperature, String humidity) { int16_t x1; int16_t y1; uint16_t width_T; uint16_t height_T; uint16_t width_H; uint16_t height_H; oled.getTextBounds(temperature, 0, 0, &x1, &y1, &width_T, &height_T); oled.getTextBounds(temperature, 0, 0, &x1, &y1, &width_H, &height_H); // display on horizontal and vertical center oled.clearDisplay(); // clear display oled.setCursor((SCREEN_WIDTH - width_T) / 2, SCREEN_HEIGHT / 2 - height_T - 5); oled.println(temperature); // text to display oled.setCursor((SCREEN_WIDTH - width_H) / 2, SCREEN_HEIGHT / 2 + 5); oled.println(humidity); // text to display oled.display(); }

※ NOTE THAT:

The code for the DHT11 and DHT22 is the same, apart from a single line. The library for both of these is the same too.

Video Tutorial

※ OUR MESSAGES

  • As freelancers, We are AVAILABLE for HIRE. See how to outsource your project to us
  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!