Proyek Jam Wi-Fi + NTP dengan Matriks LED RGB ESP32-S3 -1 Jam Dasar

Proyek Jam Wi-Fi + NTP dengan Matriks LED RGB ESP32-S3 -1 Jam Dasar

Jam Internet ESP32-S3 dengan NeoMatrix 8×8 (Wi-Fi + Waktu NTP)

Proyek ini mengubah ESP32-S3 dan NeoMatrix RGB 8×8 (NeoPixel/WS2812) menjadi jam Internet mungil. ESP32 terhubung ke Wi-Fi, menyinkronkan waktu lokal dari server NTP, lalu menampilkan waktu berjalan sebagai HH:MM melintasi layar 8×8.

Cara kerjanya (tingkat tinggi)

1) ESP32-S3 terhubung ke router Anda menggunakan <WiFi.h>.
2) Ini menyinkronkan waktu dari server NTP menggunakan "time.h" dan configTime().
3) Waktu diformat sebagai HH:MM dan disimpan ke dalam buffer teks kecil.
4) NeoMatrix merender teks dan menggulirkannya melintasi panel 8×8.

Warna RGB

Warna teks jam dikontrol menggunakan nilai RGB (Merah, Hijau, Biru), di mana setiap saluran warna berkisar dari 0 hingga 255 dan kombinasi yang berbeda menghasilkan warna yang berbeda pada NeoMatrix. Dengan menyesuaikan variabel color_RED, color_GREEN, dan color_BLUE, Anda dapat dengan mudah menyesuaikan tampilan jam ke warna apa pun yang Anda suka. Untuk menemukan nilai RGB yang tepat untuk warna tertentu dengan cepat, Anda dapat menggunakan Pemilih Warna RGB online Pemilih Warna .

Pustaka yang digunakan

Include ini memberi tahu Anda dengan tepat apa yang menjadi ketergantungan sketsa:

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

Instal Adafruit NeoMatrix menggunakan Arduino Library Manager. Ini juga akan menarik dependensi yang diperlukan seperti Adafruit GFX Library dan Adafruit NeoPixel.

Pengaturan pengguna penting yang HARUS Anda edit

1) Warna teks (RGB)

Atur warna teks jam Anda menggunakan nilai 0–255:

//atur warna tampilan yang terdiri dari Merah, Hijau dan Biru 
unsigned int color_RED = 17;
unsigned int color_GREEN = 43;
unsigned int color_BLUE = 171;

Nilai-nilai ini digunakan di sini:

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

Catatan: Jika Anda mengatur semua warna ke 0 (hitam), teks menjadi tidak terlihat. Sketsa ini menyertakan pemeriksaan keamanan:

// jika pengguna mengatur semua warna ke 0, tampilan akan dimatikan jadi atur ke hijau
if (color_RED == 0 && color_GREEN == 0 && color_BLUE == 0) {
  color_GREEN = 200;
}

Ini memastikan matriks tidak pernah terlihat “mati” karena pengaturan warna yang tidak terlihat.

2) SSID dan kata sandi Wi-Fi

Ganti ini dengan nama dan kata sandi Wi-Fi asli Anda:

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

Selama startup, ESP32 mencetak progres koneksi di Serial Monitor dan habis waktu setelah sekitar 15 detik (30 percobaan × 500ms).

3) Server NTP

Server NTP default adalah:

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

Anda dapat membiarkannya apa adanya. Jika Anda ingin menggunakan server lokal, ganti nama host dengan server NTP pilihan Anda.

4) Offset zona waktu dan offset waktu musim panas

Dua pengaturan ini mengontrol waktu lokal:

// Seperti Toronto: UTC-5, ditambah 1 jam DST
const long  gmtOffset_sec      = -5 * 3600;  // -5 jam
const int   daylightOffset_sec = 3600;       // +1 jam untuk DST

Cara mengaturnya:

• gmtOffset_sec = (jam offset UTC) × 3600. Contoh: UTC-5 → -5*3600, UTC+2 → 2*3600.
• daylightOffset_sec = 0 jika Anda tidak ingin penyesuaian DST, atau 3600 jika wilayah Anda saat ini sedang menerapkan DST (+1 jam).

Ini diterapkan di sini:

configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

Konfigurasi tampilan

Pin data matriks

Pin data didefinisikan di sini:

#define MATRIX_PIN 14

Jika kabel Anda menggunakan GPIO yang berbeda, ubah angka ini agar sesuai.

Tata letak NeoMatrix + urutan warna

Matriks Anda diinisialisasi seperti ini:

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

Dua alasan umum tampilan terlihat “salah”:

• Rotasi / arah kabel: Jika teks muncul terbalik atau terpantul, sesuaikan flag NEO_MATRIX_* (TOP/BOTTOM, LEFT/RIGHT, ROWS/COLUMNS, PROGRESSIVE/ZIGZAG).
• Urutan warna: Kode ini menggunakan NEO_RGB. Beberapa panel menggunakan NEO_GRB. Jika merah/hijau/biru tidak cocok, ubah NEO_RGB ke urutan yang benar.

Kecerahan

Kecerahan diatur dalam initMatrix():

matrix.setBrightness(40);

Tingkatkan untuk tampilan yang lebih terang, kurangi untuk menurunkan panas dan konsumsi daya.

Bagaimana waktu dihasilkan sebagai HH:MM

Jam menyimpan waktu yang diformat dalam buffer 6 karakter:

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

Kemudian updateTimeText() membaca waktu lokal yang disinkronkan dengan NTP dan menulis teksnya:

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

Ini diperbarui sekali per detik di loop utama.

Cara kerja scroll pada layar 8×8

Matriks 8×8 terlalu sempit untuk menampilkan HH:MM sekaligus, jadi sketsa ini menggulir teksnya. Teks digambar pada posisi X yang berubah (scrollX), lalu digeser ke kiri satu piksel setiap pembaruan.

int16_t scrollX = 8;
const uint16_t scrollIntervalMs = 120;

Setiap langkah scroll:

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

Saat teks sepenuhnya keluar dari sisi kiri, kode meresetnya untuk mulai lagi dari tepi kanan:

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

Output Serial Monitor (debugging)

Sketsa ini mencetak pesan yang berguna:

• Progres koneksi Wi-Fi dan alamat IP
• Apakah sinkronisasi waktu berhasil
• String waktu yang diformat (misalnya, Teks waktu: 14:32)

Jika layar kosong, Serial Monitor adalah tempat pertama yang perlu diperiksa untuk memastikan Wi-Fi dan NTP berfungsi.

Demonstrasi proyek

Setelah upload dan reset:

• ESP32 terhubung ke Wi-Fi
• Sinkronisasi waktu dari pool.ntp.org
• Menampilkan OK sebentar di matriks
• Terus menggulir waktu saat ini sebagai HH:MM

Unduhan dan tautan

Kode lengkap disediakan di bawah artikel ini. Komponen, alat, dan lembar data juga ditautkan di bawah artikel ini.

Gambar

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
  }
}