ESP32 Tutorial 53/55 - Build an LCD Internet Clock | SunFounder's ESP32 IoT Learning kit

This lesson is part of: ESP32 Arduino Course based on SunFounder's ESP32 IoT Learning kit (55 Tutorials/Videos)

Jump to:

All Lessons

ESP32 Tutorial 53/55 - Build an LCD Internet Clock | SunFounder's ESP32 IoT Learning kit

In this tutorial, we will build an Internet-connected LCD clock using the ESP32 microcontroller from SunFounder. This clock will automatically sync to the current time via the Internet, displaying the time in either 12-hour or 24-hour format, along with the day of the week, date, and month. The use of the Network Time Protocol (NTP) ensures that the clock remains accurate without manual adjustments.

This project leverages the ESP32's built-in Wi-Fi capabilities to fetch the current time from an NTP server. We will be utilizing a Liquid Crystal Display (LCD) to showcase the time, which can be formatted according to user preferences. For further clarification on any steps, please refer to the video at (in video at 00:30).

Hardware Explained

The primary components for this project include the ESP32 microcontroller, a 20x4 LCD display, and a power source. The ESP32 is a powerful microcontroller with built-in Wi-Fi and Bluetooth, making it suitable for IoT projects. The LCD is used to display the time and date, and it can be configured for different display sizes.

The LCD operates via the I2C protocol, which allows for communication over two wires (SDA and SCL). This simplifies wiring and reduces the number of pins needed on the ESP32. The connection to the NTP server is made using the Wi-Fi capabilities of the ESP32, enabling real-time updates.

Ensure correct power supply voltage (5 V).
Use decoupling capacitors near the power pins for stability.
Be cautious with I2C connections to avoid bus conflicts.
Verify the I2C address of the LCD (0x27 or 0x3F).
Check Wi-Fi credentials for accurate connection.
Handle daylight saving time adjustments in your code.
Utilize the correct NTP server for your geographical location.
Always clear the LCD before updating the display.

Wiring Instructions

To wire the ESP32 with the LCD, start by connecting the power pins. Connect the LCD's VCC to the 5V pin on the ESP32 and the GND pin of the LCD to the GND pin on the ESP32. For the I2C communication, connect the SDA pin of the LCD to GPIO 21 on the ESP32 and the SCL pin to GPIO 22. Ensure the connections are secure to avoid any communication issues.

When setting up the wiring, use male-to-female jumper wires for easy connections. If your LCD has a different I2C address or pin configuration, adjust the code accordingly. Refer to the video at (in video at 05:30) for alternative wiring options if necessary.

Code Examples & Walkthrough

The code initializes the LCD and sets up the Wi-Fi connection to fetch time data from the NTP server. Key identifiers such as ssid and password are used to connect to the Wi-Fi network, while ntpServer1 and ntpServer2 specify the NTP servers to use.

const char* ssid = "dars";
const char* password = "llllllllllllll";
const char* ntpServer1 = "pool.ntp.org";
const char* ntpServer2 = "time.nist.gov";

This snippet shows the network credentials and server addresses. Ensure you enter your Wi-Fi SSID and password accurately, as any mistake will prevent the ESP32 from connecting to the Internet.

In the printLocalTime() function, the current time is formatted for display. The structure tm is used to store time information, while strftime helps format the time into a readable string.

void printLocalTime() {
  struct tm timeinfo;
  if(!getLocalTime(&timeinfo)) {
    Serial.println("No time available (yet)");
    return;
  }
  char timeHour[5];
  strftime(timeHour, 5, "%H", &timeinfo);

This code checks if the local time is available and retrieves the hour. The formatted hour is then used to display the current time on the LCD. If time is not yet available, it prints a message to the Serial Monitor.

Finally, the setup() function initializes the LCD and connects to Wi-Fi. It also configures the NTP server settings and sets a callback for time synchronization.

void setup() {
  Serial.begin(115200);
  lcd.init(); // initialize the lcd 
  lcd.backlight(); // Turns on the LCD backlight.
  Serial.printf("Connecting to %s ", ssid);
  WiFi.begin(ssid, password);

This excerpt initializes the Serial Monitor for debugging, sets up the LCD, and attempts to connect to the specified Wi-Fi network. The connection status will be printed to the Serial Monitor, allowing you to verify the connection.

Demonstration / What to Expect

Upon successful setup, the LCD will display the current time, day of the week, and the date. You can expect the time to update every 5 seconds, thanks to the loop() function. If the connection to the NTP server fails, a message will appear on the Serial Monitor indicating that the time is not yet available (in video at 12:00).

Common pitfalls include incorrect wiring, wrong I2C addresses, and incorrect Wi-Fi credentials. Ensure all connections are secure and that the NTP server is reachable from your network.