ESP32-S3 RGB LED Matrix Internet Clock Project - 2 Clock multi color Time & Date Display

This tutorial is part of: ESP32-S3 RGB LED Matrix

Cool project to create for fun and practical applications using ESP32-S3 RGB Matrix module.

ESP32-S3 RGB LED Matrix Internet Clock Project - 2 Clock multi color Time & Date Display

ESP32-S3 RGB NeoMatrix Internet Clock with Time & Date Display

This project is an enhanced ESP32-S3 RGB Matrix Internet Clock that not only shows the current time but also periodically displays the date. The ESP32-S3 connects to Wi-Fi, synchronizes time from an NTP server, and scrolls either HH:MM or the date (for example SEP 21) across an 8×8 RGB NeoMatrix. The display supports automatic day/night brightness control and customizable RGB colors.

What this clock does

After connecting to your Wi-Fi network, the ESP32-S3 fetches the current local time from the internet. The clock normally scrolls the time, but at a fixed interval it switches to show the date. Text color can be fixed to one color or automatically cycle through multiple user-defined colors. Brightness is automatically reduced at night to make the display easier on the eyes.

Libraries used

This sketch depends on the following libraries:

#include <WiFi.h>
#include "time.h"
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>

Install Adafruit NeoMatrix from the Arduino Library Manager. All required dependencies such as Adafruit GFX Library and Adafruit NeoPixel will be installed automatically.

Important user configuration

Wi-Fi SSID and password (case-sensitive)

You must replace the Wi-Fi credentials with your own network information:

const char* WIFI_SSID     = "WiFi";
const char* WIFI_PASSWORD = "passW0rd";

Important: Wi-Fi SSIDs are case-sensitive. For example, an SSID named "Book" is not the same as "book". If the capitalization does not match exactly, the ESP32 will fail to connect.

NTP server, time zone, and daylight saving

The clock uses an internet time server:

const char* ntpServer = "pool.ntp.org";

Local time is calculated using these offsets:

const long  gmtOffset_sec     = -5 * 3600; 
const int   daylightOffset_sec = 3600;

gmtOffset_sec: Your UTC offset in seconds (example: UTC-5 = -5 * 3600)
daylightOffset_sec: Use 3600 for DST or 0 if DST is not used

These settings are applied using:

configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

Brightness control (day / night)

This project automatically adjusts brightness based on the hour of the day:

const int DAY_BRIGHTNESS = 40;
const int NIGHT_BRIGHTNESS = 5;
const int NIGHT_START_HOUR = 22;
const int NIGHT_END_HOUR = 6;

Between 10 PM and 6 AM, brightness is reduced to make the display less distracting in dark environments. You can adjust these values to suit your preference.

RGB color configuration

The clock supports both fixed color mode and automatic color cycling. User-defined RGB colors are stored in an array:

uint8_t userColors[][3] = {
  {17, 43, 171},  // Light Blue
  {255, 0, 0},    // Red
  {0, 255, 0},    // Green
  {255, 165, 0},  // Orange
  {255, 0, 255}   // Magenta
};

Each color uses RGB (Red, Green, Blue) values ranging from 0 to 255. By changing these numbers, you can create virtually any color for the display. If useFixedColor is set to true, the clock always uses one color. If set to false, the color automatically changes after each full scroll.

To quickly find accurate RGB values for any color you want, use the RGB Color Picker tool Color Picker .

Time and date formatting

The time is formatted as HH:MM and stored in a small character buffer. The date is formatted as an uppercase string such as SEP 21. The display automatically switches between time and date at a fixed interval.

Scrolling logic on an 8×8 display

Because an 8×8 matrix is too small to show the full text at once, the sketch scrolls the text horizontally. Once the text fully leaves the display, the color is updated and the content switches between time and date when needed.