ESP8266 - OLED Clock

This tutorial instructs you how to create an OLED clock by using ESP8266, RTC module and OLED display. The tutorial provides instructions for both DS3231 and DS1307 RTC modules. In detail:

ESP8266 obtains the hour, minute, and second from a DS3231 RTC module and displaying it on an OLED
ESP8266 obtains the hour, minute, and second from a DS1307 RTC module and displaying it on an OLED

You can choose one of two RTC modules: DS3231 and DS1307. For more information, please refer to DS3231 vs DS1307.

Hardware Preparation

1	×	ESP8266 NodeMCU
1	×	Micro USB Cable
1	×	SSD1306 I2C OLED Display 128x64
1	×	Real-Time Clock DS3231 Module
1	×	(Optional) Real-Time Clock DS1307 Module
1	×	CR2032 battery
1	×	Breadboard
1	×	Jumper Wires
1	×	(Optional) 5V Power Adapter for ESP8266
1	×	(Optional) Screw Terminal Expansion Board for ESP8266

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, DS3231 and DS1307 RTC module

If you are unfamiliar with OLED, DS3231 and DS1307 (pinout, functionality, programming ...), the following tutorials can help you:

Install OLED and RTC Libraries

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.

You will be prompted to install additional library dependencies.
To install them all at once, click the Install All button.

ESP8266 NodeMCU Adafruit GFX sensor library

Search for “RTClib” and locate the RTC library from Adafruit. This library is compatible with both DS3231 and DS1307.
Press the Install button to install the RTC library.

Reading time from DS3231 RTC module and display it on OLED

Wiring Diagram

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 Code - DS3231 and 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-oled-clock */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <RTClib.h> #define OLED_WIDTH 128 // OLED display width, in pixels #define OLED_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // // create SSD1306 display object connected to I2C RTC_DS3231 rtc; String time; 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(1); // text size oled.setTextColor(WHITE); // text color oled.setCursor(0, 10); // position to display // SETUP RTC MODULE if (! rtc.begin()) { Serial.println("Couldn't find RTC"); Serial.flush(); while (true); } // automatically sets the RTC to the date & time on PC this sketch was compiled rtc.adjust(DateTime(F(__DATE__), F(__TIME__))); time.reserve(10); // to avoid fragmenting memory when using String } void loop() { DateTime now = rtc.now(); time = ""; time += now.hour(); time += ':'; time += now.minute(); time += ':'; time += now.second(); oled_display_center(time); } void oled_display_center(String text) { int16_t x1; int16_t y1; uint16_t width; uint16_t height; oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height); // center the display both horizontally and vertically oled.clearDisplay(); // clear display oled.setCursor((OLED_WIDTH - width) / 2, (OLED_HEIGHT - height) / 2); oled.println(text); // 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.
Copy the code and open it with the Arduino IDE.
Click the Upload button in the Arduino IDE to send the code to the ESP8266.
Place the sensor in hot and cold water, or hold it in your hand.
Check out the outcome on the OLED.

Reading time from DS1307 RTC module and display it on OLED

Wiring Diagram

This image is created using Fritzing. Click to enlarge image

ESP8266 Code - DS1307 and 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-oled-clock */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <RTClib.h> #define OLED_WIDTH 128 // OLED display width, in pixels #define OLED_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // // create SSD1306 display object connected to I2C RTC_DS1307 rtc; String time; 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(1); // text size oled.setTextColor(WHITE); // text color oled.setCursor(0, 10); // position to display // SETUP RTC MODULE if (! rtc.begin()) { Serial.println("Couldn't find RTC"); Serial.flush(); while (true); } // automatically sets the RTC to the date & time on PC this sketch was compiled rtc.adjust(DateTime(F(__DATE__), F(__TIME__))); time.reserve(10); // to avoid fragmenting memory when using String } void loop() { DateTime now = rtc.now(); time = ""; time += now.hour(); time += ':'; time += now.minute(); time += ':'; time += now.second(); oled_display_center(time); } void oled_display_center(String text) { int16_t x1; int16_t y1; uint16_t width; uint16_t height; oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height); // center the display both horizontally and vertically oled.clearDisplay(); // clear display oled.setCursor((OLED_WIDTH - width) / 2, (OLED_HEIGHT - height) / 2); oled.println(text); // text to display oled.display(); }

Detailed Instructions

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.
Copy the code and open it in the Arduino IDE.
Click the Upload button to transfer 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.

Video Tutorial

Learn More

※ 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!