ESP32 - OLED Clock

In this tutorial, we will guide you through the process of creating an OLED clock using an ESP32 by covering the following steps:

You have the flexibility to choose between two RTC modules: DS3231 and DS1307. To help you make an informed decision, you can refer to the comparison outlined in DS3231 vs DS1307.

This tutorial will provide a comprehensive guide to implement an OLED clock, showcasing the integration of ESP32 with either the DS3231 or DS1307 RTC module to display accurate time information on an OLED screen.

Hardware Used In This Tutorial

1×ESP-WROOM-32 Dev Module
1×USB Cable Type-C
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×(Recommended) ESP32 Screw Terminal Adapter

Or you can buy the following sensor kit:

1×DIYables Sensor Kit 30 types, 69 units
Disclosure: some of these links are affiliate links. We may earn a commission on your purchase at no extra cost to you. We appreciate it.

Introduction to OLED, DS3231 and DS1307 RTC module

Unfamiliar with OLED, DS3231 and DS1307, including their pinouts, functionality, and programming? Explore comprehensive tutorials on these topics below:

Install OLED and RTC Libraries

  • Click to the Libraries icon on the left bar of the Arduino IDE.
  • Search “SSD1306”, then find the SSD1306 library by Adafruit
  • Click Install button to install the library.
ESP32 OLED library
  • You will be asked for intalling some other library dependencies
  • Click Install All button to install all library dependencies.
ESP32 Adafruit GFX sensor library
  • Search “RTClib”, then find the RTC library by Adafruit
  • Click Install button to install RTC library.
ESP32 RTC library
  • You may be asked to install dependencies for the library
  • Install all dependencies for the library by clicking on Install All button.
ESP32 Adafruit BusIO library

Reading time from DS3231 RTC module and display it on OLED

Wiring Diagram

ESP32 DS3231 OLED Wiring Diagram

This image is created using Fritzing. Click to enlarge image

If you're unfamiliar with how to supply power to the ESP32 and other components, you can find guidance in the following tutorial: How to Power ESP32.

ESP32 Code - DS3231 and OLED

/* * This ESP32 code is created by esp32io.com * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-oled-clock */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <RTClib.h> #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_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(); oledDisplayCenter(time); } void oledDisplayCenter(String text) { int16_t x1; int16_t y1; uint16_t width; uint16_t height; oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height); // display on horizontal and vertical center oled.clearDisplay(); // clear display oled.setCursor((SCREEN_WIDTH - width) / 2, (SCREEN_HEIGHT - height) / 2); oled.println(text); // text to display oled.display(); }

Quick Instructions

  • If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE.
  • Do the wiring as above image.
  • Connect the ESP32 board to your PC via a micro USB cable
  • Open Arduino IDE on your PC.
  • Select the right ESP32 board (e.g. ESP32 Dev Module) and COM port.
  • Copy the above code and open with Arduino IDE
  • Click Upload button on Arduino IDE to upload code to ESP32
  • See the result on OLED

Reading time from DS1307 RTC module and display it on OLED

Wiring Diagram

ESP32 DS1307 OLED Wiring Diagram

This image is created using Fritzing. Click to enlarge image

ESP32 Code - DS1307 and OLED

/* * This ESP32 code is created by esp32io.com * * This ESP32 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-oled-clock */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <RTClib.h> #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_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(); oledDisplayCenter(time); } void oledDisplayCenter(String text) { int16_t x1; int16_t y1; uint16_t width; uint16_t height; oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height); // display on horizontal and vertical center oled.clearDisplay(); // clear display oled.setCursor((SCREEN_WIDTH - width) / 2, (SCREEN_HEIGHT - height) / 2); oled.println(text); // text to display oled.display(); }

Quick Instructions

  • If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE.
  • Do the wiring as above image.
  • Connect the ESP32 board to your PC via a micro USB cable
  • Open Arduino IDE on your PC.
  • Select the right ESP32 board (e.g. ESP32 Dev Module) and COM port.
  • Copy the above code and open with Arduino IDE
  • Click Upload button on Arduino IDE to upload code to ESP32
  • See the result on OLED

Video Tutorial

Making video is a time-consuming work. If the video tutorial is necessary for your learning, please let us know by subscribing to our YouTube channel , If the demand for video is high, we will make the video tutorial.

※ OUR MESSAGES