Create an Internet Clock with ESP32 & OLED 128×64 Display | Live Date & Time Tutorial

Creating an internet-connected clock to display live date and time is a fantastic project for anyone looking to incorporate the functionality of real-time information into their electronics projects. Whether you’re a beginner or a DIY enthusiast, this step-by-step tutorial will guide you through using an ESP32 NodeMCU and a 128×64 OLED display to build your very own internet clock.

Materials Needed for the Project:

• ESP32 NodeMCU: A powerful microcontroller with WiFi capability.
• 128×64 OLED Display: A small screen to display live time and date.
• Arduino IDE: For programming the ESP32 and uploading the code.
• USB Cable: To connect the ESP32 to your PC for uploading code.
• Libraries: U8g2 and NTPClient libraries (for interfacing the OLED display and retrieving time from an NTP server).

Step 1: Setting Up the Hardware

Start by connecting the 128×64 OLED display to the ESP32 NodeMCU. These two components communicate over the I2C protocol, which simplifies the wiring process. Here’s how to connect the display to the ESP32:

• VCC Pin (OLED): Connect this to the 3.3V pin on the ESP32.
• GND Pin (OLED): Connect this to the GND pin on the ESP32.
• SCL Pin (OLED): Connect this to GPIO22 (the default I2C clock pin on the ESP32).
• SDA Pin (OLED): Connect this to GPIO21 (the default I2C data pin on the ESP32).

After making sure the connections are secure, connect the ESP32 to your PC using the USB cable. This will power the ESP32 and allow you to upload the code via the Arduino IDE.

Step 2: Installing Required Libraries

To interface with the OLED display and fetch live time from an NTP (Network Time Protocol) server, you’ll need to install two libraries: U8g2 and NTPClient. Here’s how to install them:

1. Open Arduino IDE and navigate to Sketch > Include Library > Manage Libraries.
2. Search for U8g2 and click Install.
3. Do the same for NTPClient.

These libraries allow you to control the OLED screen and retrieve real-time data from the internet, which is critical for displaying accurate time.

Step 3: Coding the ESP32

Now, it’s time to modify and upload the code to the ESP32. Use the code provided in the video description. Here are some important things to keep in mind:

• WiFi Credentials: Open the code and enter your WiFi SSID (network name) and password in the designated fields. Ensure the SSID and password are accurate and case-sensitive for a successful connection.
• NTP Server & GMT Offset: You will also need to adjust the NTP server settings and provide the correct GMT Offset for your country. This ensures the clock displays the time accurately based on your location. The GMT Offset values for different countries are available in the video description, so make sure to update the code accordingly.
• Compilation: Once you’ve entered your WiFi credentials and the correct GMT Offset, it’s important to check for errors. After verifying the code, click the Verify button to ensure there are no issues with the code.

Step 4: Uploading the Code

After verifying that the code is free of errors, click the Upload button in Arduino IDE. The ESP32 will compile the code and upload it via the USB connection to your board.

Once the upload is complete, the ESP32 will automatically run the program. The OLED display will now show the live date and time, based on the correct GMT Offset for your region.

#include <U8g2lib.h>
#include <Wire.h>
#include <WiFi.h>
#include <NTPClient.h>
#include <WiFiUdp.h>
#include <time.h>

// Replace with your WiFi credentials
const char* ssid     = "Your_wifi_SSID";   
const char* password = "Wifi_password";  

// Initialize OLED display (128x64 SH1106)
U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);

// NTP Client Setup
WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org", 19800, 3600000); // Timezone offset (19800 seconds = UTC +5:30)

void setup() {
  // Start serial communication for debugging
  Serial.begin(115200);
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");

  // Initialize the OLED
  u8g2.begin();
  
  // Start the NTP client
  timeClient.begin();
  timeClient.setTimeOffset(19800); // Indian Standard Time (UTC +5:30)
}

void loop() {
  timeClient.update(); // Update time from NTP server

  // Get current time in seconds
  unsigned long currentEpoch = timeClient.getEpochTime();
  
  // Convert epoch time (unsigned long) to time_t (signed long)
  time_t currentTime = (time_t)currentEpoch;

  // Convert time to time structure
  struct tm* timeInfo;
  timeInfo = localtime(&currentTime);  // Convert to time structure
  
  // Extract time components
  int hours = timeInfo->tm_hour;
  int minutes = timeInfo->tm_min;
  int seconds = timeInfo->tm_sec;

  // Extract date components
  int day = timeInfo->tm_mday;
  int month = timeInfo->tm_mon + 1;  // tm_mon is zero-based, so add 1
  int year = timeInfo->tm_year + 1900;  // tm_year is years since 1900, so add 1900

  // Extract day of the week (0 = Sunday, 1 = Monday, etc.)
  String daysOfWeek[] = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};
  String dayOfWeek = daysOfWeek[timeInfo->tm_wday];

  // Clear the display
  u8g2.clearBuffer();

  // Set font size for the clock
  u8g2.setFont(u8g2_font_ncenB18_tr);  // Larger font (18px)

  // Format the time
  String timeStr = String(hours) + ":" + (minutes < 10 ? "0" + String(minutes) : String(minutes)) + ":" + (seconds < 10 ? "0" + String(seconds) : String(seconds));

  // Calculate the width of the time text to center it
  int textWidth = u8g2.getStrWidth(timeStr.c_str());

  // Set the cursor position to center the time text
  int x = (128 - textWidth) / 2;  // Center horizontally on 128x64 screen
  int y = 24;  // Set Y position to the middle of the screen for time

  // Draw the time at the center of the screen
  u8g2.setCursor(x, y);
  u8g2.print(timeStr);

  // Set font size for the date
  u8g2.setFont(u8g2_font_ncenB10_tr);  // Smaller font (10px) for the date

  // Format the date as DD/MM/YYYY with leading zeroes if necessary
  String dayStr = (day < 10) ? "0" + String(day) : String(day);
  String monthStr = (month < 10) ? "0" + String(month) : String(month);
  String dateStr = dayStr + "/" + monthStr + "/" + String(year);

  // Calculate the width of the date text to center it
  int dateTextWidth = u8g2.getStrWidth(dateStr.c_str());

  // Set the cursor position to center the date text
  int dateX = (128 - dateTextWidth) / 2;  // Center horizontally
  int dateY = 40;  // Move the date 2px up from the previous position

  // Draw the date below the time
  u8g2.setCursor(dateX, dateY);
  u8g2.print(dateStr);

  // Set font size for the day of the week
  u8g2.setFont(u8g2_font_ncenB10_tr);  // Smaller font (10px) for the day of the week

  // Calculate the width of the day of the week text to center it
  int dayOfWeekWidth = u8g2.getStrWidth(dayOfWeek.c_str());

  // Set the cursor position to center the day of the week text
  int dayOfWeekX = (128 - dayOfWeekWidth) / 2;  // Center horizontally
  int dayOfWeekY = 56;  // Set Y position below the date text

  // Draw the day of the week below the date
  u8g2.setCursor(dayOfWeekX, dayOfWeekY);
  u8g2.print(dayOfWeek);

  // Send the buffer to the display
  u8g2.sendBuffer();

  delay(1000);  // Update every second
}

Wi-Fi Setup:

const char* ssid     = "Your_wifi_SSID";   
const char* password = "Wifi_password";  

• These lines define your Wi-Fi credentials that the ESP32 will use to connect to your wireless network.

NTP Client Setup:

NTPClient timeClient(ntpUDP, "pool.ntp.org", 19800, 3600000); // Timezone offset (19800 seconds = UTC +5:30)

• The NTPClient object is configured to use the “pool.ntp.org” server to get the current time. The offset of 19800seconds (which equals UTC +5:30) is specified, which corresponds to the Indian Standard Time (IST).

GMT Offsets for Various Countries : click here

Troubleshooting Tips

If you face any issues during the project, here are a few things to check:

• Ensure that your WiFi credentials are correctly entered and that the ESP32 is connected to your network.
• Make sure the SCL and SDA pins are correctly connected to GPIO22 and GPIO21, respectively, for I2C communication.
• Verify that the correct board is selected under Tools > Board in the Arduino IDE.

Step 5: Exploring Additional Features

This internet clock project provides a solid foundation for beginners, but there’s plenty of room to expand! In future tutorials, we’ll dive deeper into adding advanced features such as:

• Customizing the display: Add more information like temperature or location-based data.
• Designing a vibrant, interactive clock face.
• Integrating other sensors like temperature or humidity sensors.

If you enjoyed this project, stay tuned for more in-depth tutorials that explore the full potential of the ESP32 and OLED displays.

Conclusion

By following this tutorial, you’ve learned how to build an internet clock using the ESP32 NodeMCU and 128×64 OLED display, displaying real-time date and time. This project is a great starting point for beginners interested in working with WiFi-enabled devices and displays.

If you found this tutorial helpful, please support us by liking, sharing, or subscribing to our channel. Your support helps us continue creating content and tutorials like this one to empower and educate the DIY electronics community. Thank you for your support, and happy building!

Explore More Tutorials

• Learn how to create more advanced clocks and displays with ESP32.
• Dive into using additional sensors with your projects.
• Check out our playlist for more tutorials on OLED displays and microcontroller-based projects.

Don’t forget to subscribe for future tutorials and more exciting electronics projects!