Real-Time OLED Clock With RTC DS3231 and ESP32

by sarful in Circuits > Arduino

142 Views, 0 Favorites, 0 Comments

Real-Time OLED Clock With RTC DS3231 and ESP32

DS3231-Module-based-ESP32-Real-Time-Clock-circuit-diagram.png

Objective

Create a real-time OLED clock using the DS3231 RTC module and display it on an SSD1306 OLED with the ESP32 microcontroller.

System Overview

  1. Displays real-time hours, minutes, seconds, and date.
  2. Uses an RTC DS3231 module for accurate timekeeping.
  3. Compatible with ESP32 for low power consumption and wireless connectivity.
  4. Displays weekday names along with date and time.


Supplies

Required Components

  1. Arduino Uno: Buy on Amazon
  2. RTC DS3231 Module: Buy on Amazon
  3. OLED Display (SSD1306): Buy on Amazon
  4. ESP32: Buy on Amazon
  5. Jumper Wires: Buy on Amazon
  6. Breadboard: Buy on Amazon
Affiliate Link Disclaimer: Links are affiliate links, meaning that purchases made through them help support free tutorials and projects, at no additional cost to you.



Circuit Connection

  1. RTC DS3231 Connections:
  2. SDA → GPIO21 (ESP32)
  3. SCL → GPIO22 (ESP32)
  4. VCC → 3.3V (ESP32)
  5. GND → GND (ESP32)
  6. OLED SSD1306 Display Connections:
  7. MOSI → GPIO23
  8. CLK → GPIO18
  9. DC → GPIO4
  10. CS → GPIO5
  11. RESET → GPIO2

Circuit Connection Analysis

The DS3231 provides accurate real-time clock data to the ESP32 through I2C communication, while SPI protocol drives the SSD1306 OLED display. The ESP32 retrieves data from the RTC and sends it to the OLED, allowing the time to refresh continuously.

Setting Up the ESP32

  1. Install ESP32 Board Support in Arduino IDE:
  2. Go to File > Preferences.
  3. Add the URL to "Additional Boards Manager URLs": https://dl.espressif.com/dl/package_esp32_index.json.
  4. Go to Tools > Board > Boards Manager, search for "ESP32", and install it.
  5. Required Libraries:
  6. Adafruit GFX and Adafruit SSD1306 for the OLED display.
  7. RTClib for the DS3231 RTC module.

Building the Web Interface Code (HTML and PHP)

If desired, the ESP32 can serve a basic HTML page to show time data.


<!DOCTYPE html>
<html>
<head>
<title>Real-Time Clock</title>
<meta http-equiv="refresh" content="1">
</head>
<body>
<h1>Current Time</h1>
<p id="time"></p>
<script>
fetch('http://your_esp32_ip/time')
.then(response => response.text())
.then(data => document.getElementById("time").innerHTML = data);
</script>
</body>
</html>

Arduino Board and Library Configuration

  1. Libraries Needed:
  2. SPI for the OLED screen communication.
  3. Wire for I2C communication with the RTC.
  4. Adafruit GFX, Adafruit SSD1306, and RTClib.
  5. Board Configuration: Select ESP32 Dev Module under Tools > Board.

Arduino Code


#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include "RTClib.h"

RTC_DS3231 rtc;
char daysOfTheWeek[7][12] = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};

#define OLED_MOSI 23
#define OLED_CLK 18
#define OLED_DC 4
#define OLED_CS 5
#define OLED_RESET 2

Adafruit_SSD1306 display(OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);

void setup() {
Serial.begin(9600);
if (!rtc.begin()) {
Serial.println("Couldn't find RTC");
while (1);
}
rtc.adjust(DateTime(__DATE__, __TIME__));
display.begin(SSD1306_SWITCHCAPVCC);
display.clearDisplay();
display.setTextColor(WHITE);
display.setTextSize(2);
display.setCursor(0,5);
display.print(" Clock ");
display.display();
delay(3000);
}

void loop() {
DateTime now = rtc.now();
display.clearDisplay();
display.setTextSize(2);
display.setCursor(75,0);
display.println(now.second(), DEC);
display.setCursor(25,0);
display.println(":");
display.setCursor(65,0);
display.println(":");
display.setCursor(40,0);
display.println(now.minute(), DEC);
display.setCursor(0,0);
display.println(now.hour(), DEC);

display.setTextSize(1);
display.setCursor(0,15);
display.println(now.day(), DEC);
display.print(daysOfTheWeek[now.dayOfTheWeek()]);
display.setCursor(25,15);
display.println("-");
display.setCursor(40,15);
display.println(now.month(), DEC);
display.setCursor(55,15);
display.println("-");
display.setCursor(70,15);
display.println(now.year(), DEC);
display.display();
}

Steps to Upload

  1. Connect ESP32 to your computer.
  2. Go to Tools > Board and select ESP32 Dev Module.
  3. Choose the correct port under Tools > Port.
  4. Click Upload.

Run

  1. Ensure all connections are secure.
  2. Power on the ESP32 and open the Serial Monitor at 9600 baud.
  3. Check for the real-time display on the OLED screen.

Check Output

  1. Verify that the OLED shows the current time and date.
  2. Ensure data updates every second.
  3. Cross-check date information for accuracy.

Frequently Asked Questions (FAQ)

  1. How do I adjust the time on the RTC?
  2. You can use rtc.adjust(DateTime(__DATE__, __TIME__)); in setup().
  3. What if the RTC loses power?
  4. The DS3231 includes a battery backup that retains time data during power interruptions.
  5. Is this project compatible with other microcontrollers?
  6. Yes, the code and connections can be adapted for other microcontrollers.
  7. Can I add extra information to the OLED display?
  8. Absolutely. Modify the display.print functions to show additional data.

Recommended Book

Arduino Programming for Absolute Beginners

Perfect for beginners, this book covers Arduino programming basics through practical projects, making it an ideal start for those new to electronics.

For more free tutorials and projects on Arduino, ESP8266, ESP32, and Raspberry Pi, visit: MechatronicsLab.net