ESP32-S3 RGB LED-matrix Wi-Fi + NTP-tijdklokproject -1 Basisklok

ESP32-S3 RGB LED-matrix Wi-Fi + NTP-tijdklokproject -1 Basisklok

ESP32-S3 internetklok met 8×8 NeoMatrix (Wi-Fi + NTP-tijd)

Dit project verandert een ESP32-S3 en een 8×8 RGB NeoMatrix (NeoPixel/WS2812) in een kleine internetklok. De ESP32 maakt verbinding met Wi-Fi, synchroniseert de lokale tijd van een NTP-server en scrollt vervolgens de tijd als HH:MM over het 8×8-display.

Hoe het werkt (op hoog niveau)

1) ESP32-S3 maakt verbinding met je router met behulp van <WiFi.h>.
2) Het synchroniseert de tijd van een NTP-server met behulp van "time.h" en configTime().
3) De tijd wordt opgemaakt als HH:MM en opgeslagen in een kleine tekstbuffer.
4) De NeoMatrix rendert de tekst en scrollt deze over het 8×8-paneel.

RGB-kleur

De tekstkleur van de klok wordt aangestuurd met RGB-waarden (Rood, Groen, Blauw), waarbij elk kleurkanaal varieert van 0 tot 255 en verschillende combinaties verschillende kleuren op de NeoMatrix creëren. Door de variabelen color_RED, color_GREEN en color_BLUE aan te passen, kun je het uiterlijk van de klok eenvoudig aanpassen naar elke gewenste kleur. Om snel de exacte RGB-waarden voor een specifieke kleur te vinden, kun je de online RGB-kleurkiezer Kleurkiezer gebruiken.

Gebruikte bibliotheken

Deze includes vertellen je precies waar de sketch van afhankelijk is:

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

Installeer Adafruit NeoMatrix via de Arduino-bibliotheekbeheerder. Het zal ook vereiste afhankelijkheden zoals Adafruit GFX Library en Adafruit NeoPixel meenemen.

Belangrijke gebruikersinstellingen die je MOET bewerken

1) Tekstkleur (RGB)

Stel de tekstkleur van je klok in met waarden van 0–255:

//stel de kleur van het display in, bestaande uit Rood, Groen en Blauw
unsigned int color_RED = 17;
unsigned int color_GREEN = 43;
unsigned int color_BLUE = 171;

Deze waarden worden hier gebruikt:

matrix.setTextColor(matrix.Color(color_RED, color_GREEN, color_BLUE));

Opmerking: Als je alle kleuren op 0 (zwart) instelt, wordt de tekst onzichtbaar. De sketch bevat een veiligheidscontrole:

// als de gebruiker alle kleuren op 0 heeft ingesteld, wordt het display uitgeschakeld, dus zet het op groen
if (color_RED == 0 && color_GREEN == 0 && color_BLUE == 0) {
  color_GREEN = 200;
}

Dit zorgt ervoor dat de matrix nooit “dood” lijkt door een onzichtbare kleurinstelling.

2) Wi-Fi SSID en wachtwoord

Vervang deze door je echte Wi-Fi-naam en wachtwoord:

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

Tijdens het opstarten print de ESP32 de verbindingsvoortgang in de Seriële Monitor en verloopt deze na ongeveer 15 seconden (30 pogingen × 500 ms).

3) NTP-server

De standaard NTP-server is:

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

Je kunt dit zo laten. Als je ooit een lokale server wilt gebruiken, vervang dan de hostnaam door je voorkeurs-NTP-server.

4) Tijdzone-offset en zomertijd-offset

Deze twee instellingen bepalen de lokale tijd:

// Toronto-achtig: UTC-5, plus 1 uur zomertijd
const long  gmtOffset_sec      = -5 * 3600;  // -5 uur
const int   daylightOffset_sec = 3600;       // +1 uur voor zomertijd

Hoe stel je ze in:

• gmtOffset_sec = (UTC-offset in uren) × 3600. Voorbeeld: UTC-5 → -5*3600, UTC+2 → 2*3600.
• daylightOffset_sec = 0 als je geen zomertijdcorrectie wilt, of 3600 als je regio momenteel zomertijd hanteert (+1 uur).

Deze worden hier toegepast:

configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

Displayconfiguratie

Matrix-datapin

De datapin is hier gedefinieerd:

#define MATRIX_PIN 14

Als je bedrading een andere GPIO gebruikt, wijzig dit nummer dan zodat het overeenkomt.

NeoMatrix-layout + kleurvolgorde

Je matrix wordt als volgt geïnitialiseerd:

Adafruit_NeoMatrix matrix(8, 8, MATRIX_PIN,
  NEO_MATRIX_TOP    + NEO_MATRIX_LEFT +
  NEO_MATRIX_ROWS   + NEO_MATRIX_PROGRESSIVE,
  NEO_RGB           + NEO_KHZ800);

Twee veelvoorkomende redenen waarom het display er “verkeerd” uitziet:

• Rotatie / bedradingsrichting: Als tekst ondersteboven of gespiegeld verschijnt, pas dan de NEO_MATRIX_*-vlaggen aan (TOP/BOTTOM, LEFT/RIGHT, ROWS/COLUMNS, PROGRESSIVE/ZIGZAG).
• Kleurvolgorde: Deze code gebruikt NEO_RGB. Sommige panelen zijn NEO_GRB. Als rood/groen/blauw niet overeenkomen, wijzig dan NEO_RGB naar de juiste volgorde.

Helderheid

Helderheid wordt ingesteld in initMatrix():

matrix.setBrightness(40);

Verhoog dit voor een helderder display, verlaag het om warmte en stroomverbruik te verminderen.

Hoe de tijd wordt gegenereerd als HH:MM

De klok slaat de opgemaakte tijd op in een buffer van 6 tekens:

char timeText[6] = "00:00";

Vervolgens leest updateTimeText() de NTP-gesynchroniseerde lokale tijd en schrijft de tekst:

// Formaat HH:MM
snprintf(timeText, sizeof(timeText), "%02d:%02d",
         timeinfo.tm_hour,
         timeinfo.tm_min);

Dit wordt één keer per seconde bijgewerkt in de hoofdloop.

Hoe scrollen werkt op een 8×8-display

Een 8×8-matrix is te smal om HH:MM in één keer te tonen, dus de sketch laat de tekst scrollen. Het tekent de tijd op een veranderende X-positie (scrollX) en verplaatst deze vervolgens bij elke update één pixel naar links.

int16_t scrollX = 8;
const uint16_t scrollIntervalMs = 120;

Elke scrollstap:

matrix.fillScreen(0);
matrix.setCursor(scrollX, 0);
matrix.print(timeText);
matrix.show();
scrollX--;

Wanneer de tekst volledig aan de linkerkant is verdwenen, reset de code deze om opnieuw vanaf de rechterrand te beginnen:

int16_t textWidth = 30;
if (scrollX < -textWidth) {
  scrollX = matrix.width();
}

Seriële monitoruitvoer (debuggen)

Deze sketch print nuttige berichten:

• Wi-Fi-verbindingsvoortgang en IP-adres
• Of tijdsynchronisatie is geslaagd
• De geformatteerde tijdstring (bijv. Tijdtekst: 14:32)

Als het display leeg is, is de seriële monitor de eerste plek om te controleren om te bevestigen dat Wi-Fi en NTP werken.

Projectdemonstratie

Na upload en reset:

• ESP32 maakt verbinding met Wi-Fi
• Synchroniseert tijd van pool.ntp.org
• Toont kort OK op de matrix
• Laat continu de huidige tijd scrollen als HH:MM

Downloads en links

De volledige code staat hieronder in dit artikel. Onderdelen, gereedschappen en datasheets zijn ook hieronder in dit artikel gelinkt.

Afbeeldingen

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-s3_internet_clock_animation

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix-3

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-s3_internet_clock_animation

/*
This is ESP32 sketch that connects to the internet, gets the time and displays it on the RGB matrix
you must set your WiFi correctly to make sure it gets connected. 
 watch video https://youtube.com/shorts/4iWjLiD7fS8
 📚⬇️ Download and resource page https://robojax.com/RJT838
 * Author:  Ahmad Shamshiri (Robojax.com)
 * Date: 07 Jan 2026
www.Robojax.com
https://youTube.com/@robojax


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

//set the color of diplay make of Red, Green and Blue 
unsigned int color_RED = 17;
unsigned int color_GREEN = 43;
unsigned int color_BLUE = 171;

// 👇 REPLACE these with your real home WiFi name & password
const char* WIFI_SSID     = "WiFi";
const char* WIFI_PASSWORD = "passW0rd";



#define MATRIX_PIN 14

Adafruit_NeoMatrix matrix(8, 8, MATRIX_PIN,
  NEO_MATRIX_TOP    + NEO_MATRIX_LEFT +
  NEO_MATRIX_ROWS   + NEO_MATRIX_PROGRESSIVE,
  NEO_RGB           + NEO_KHZ800);

char timeText[6] = "00:00";
int16_t scrollX = 8;
unsigned long lastScrollMs = 0;
const uint16_t scrollIntervalMs = 120;

unsigned long lastTimeUpdateMs = 0;
const uint16_t timeUpdateIntervalMs = 1000;

//prototypes
bool updateTimeText();  // forward declaration
void scrollTime();      // forward declaration



// NTP (time) server
const char* ntpServer = "pool.ntp.org";

// Toronto-ish: UTC-5, plus 1 hour DST
const long  gmtOffset_sec     = -5 * 3600;  // -5 hours
const int   daylightOffset_sec = 3600;      // +1 hour for DST



bool updateTimeText() {
  struct tm timeinfo;
  if (!getLocalTime(&timeinfo)) {
    Serial.println("Failed to obtain time for display");
    return false;
  }

  // Format HH:MM
  snprintf(timeText, sizeof(timeText), "%02d:%02d",
           timeinfo.tm_hour,
           timeinfo.tm_min);

  Serial.print("Time text: ");
  Serial.println(timeText);
  return true;
}

void scrollTime() {
  matrix.fillScreen(0);
  matrix.setCursor(scrollX, 0);
  matrix.print(timeText);
  matrix.show();

  scrollX--;

  // Rough width: 5 characters ("HH:MM") × 6 pixels each ≈ 30 px
  int16_t textWidth = 30;
  if (scrollX < -textWidth) {
    scrollX = matrix.width();  // reset to right edge (8)
  }
}


void initMatrix() {
  matrix.begin();
  matrix.setBrightness(40);        // be careful with heat
  matrix.setTextWrap(false);
  matrix.setTextColor(matrix.Color(color_RED, color_GREEN, color_BLUE)); // color of text
}

void showMessage(const char* msg) {
  matrix.fillScreen(0);
  matrix.setCursor(0, 0);  // top-left
  matrix.print(msg);
  matrix.show();
}


void printLocalTime() {
  struct tm timeinfo;
  if (!getLocalTime(&timeinfo)) {
    Serial.println("Failed to obtain time");
    return;
  }
  // Format: 2025-11-18 14:35:12
  Serial.printf("%04d-%02d-%02d %02d:%02d:%02d\n",
                timeinfo.tm_year + 1900,
                timeinfo.tm_mon + 1,
                timeinfo.tm_mday,
                timeinfo.tm_hour,
                timeinfo.tm_min,
                timeinfo.tm_sec);
}

void setup() {
  Serial.begin(115200);
  delay(1000);
  Serial.println();
  Serial.println("ESP32-S3 Internet Clock - WiFi + NTP test");

  // Connect to WiFi
  Serial.print("Connecting to WiFi: ");
  Serial.println(WIFI_SSID);
  WiFi.mode(WIFI_STA);
  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);

  int retries = 0;
  while (WiFi.status() != WL_CONNECTED && retries < 30) { // ~15s timeout
    delay(500);
    Serial.print(".");
    retries++;
  }
  Serial.println();

  if (WiFi.status() != WL_CONNECTED) {
    Serial.println("WiFi connection FAILED");
  } else {
    Serial.print("WiFi connected. IP: ");
    Serial.println(WiFi.localIP());
  }

// if user set all colors to 0, the dispaly will be turned off so set it green
  if(color_RED ==0 & color_GREEN ==0 && color_BLUE ==0)
  {
    color_GREEN = 200;
  }

  // Configure time via NTP
  configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
  Serial.println("Waiting for time...");
  delay(2000); // small wait for initial sync

  printLocalTime(); // print once at startup

    // NEW: init the LED matrix and show a test message
  initMatrix();
  showMessage("OK");
}

void loop() {
  unsigned long now = millis();

  // Update the time string "HH:MM" once per second
  if (now - lastTimeUpdateMs >= timeUpdateIntervalMs) {
    lastTimeUpdateMs = now;
    updateTimeText();  // fills timeText[], e.g. "14:32"
  }

  // Scroll the time across the 8×8 every scrollIntervalMs
  if (now - lastScrollMs >= scrollIntervalMs) {
    lastScrollMs = now;
    scrollTime();      // uses timeText and scrollX
  }
}