Tutorial ini adalah bagian dari: Matriks LED RGB ESP32-S3
Proyek keren untuk dibuat untuk bersenang-senang dan aplikasi praktis menggunakan modul matriks RGB ESP32-S3. Tautan ke video lain ada di bawah artikel ini.
Proyek Jam Internet Matriks LED RGB ESP32-S3 - 5 Warna Pelangi
Jam Internet ESP32-S3 dengan Efek Warna Pelangi
Proyek ini adalah Jam Internet RGB Matrix ESP32-S3 yang terhubung ke Wi-Fi, menyinkronkan waktu lokal dari server NTP, dan menampilkan waktu berjalan dalam format HH:MM melintasi NeoMatrix RGB 8×8 bawaan. Berbeda dengan versi warna solid atau acak, jam ini menggunakan efek warna pelangi yang halus, di mana setiap karakter terus bergeser melalui spektrum RGB saat berjalan. Jam ini juga secara berkala menampilkan tanggal dan secara otomatis menyesuaikan kecerahan antara siang dan malam.

Cara kerja jam ini
Setelah dinyalakan melalui USB-C, ESP32-S3 terhubung ke jaringan Wi-Fi Anda dan mengambil waktu lokal saat ini dari internet. Layar biasanya menampilkan waktu berjalan, tetapi pada interval tertentu beralih untuk menampilkan tanggal. Baik waktu maupun tanggal dirender menggunakan efek pelangi dinamis, menciptakan tampilan yang hidup dan beranimasi pada matriks 8×8 yang kecil.
Pustaka yang digunakan
Sketsa ini bergantung pada pustaka berikut:

#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. Dependensinya, termasuk Adafruit GFX Library dan Adafruit NeoPixel, akan terinstal secara otomatis.

Konfigurasi pengguna yang penting
Pin data matriks (matriks RGB bawaan)
Meskipun matriks RGB terpasang pada papan ESP32-S3, pin data tetap harus didefinisikan dalam kode:

#define MATRIX_PIN 14
GPIO 14 umumnya digunakan pada papan matriks RGB ESP32-S3. Jika varian papan Anda menggunakan pin yang berbeda, perbarui nilai ini.
SSID dan kata sandi Wi-Fi (peka huruf besar/kecil)
Ganti kredensial Wi-Fi dengan detail jaringan Anda sendiri:
const char* WIFI_SSID = "WIFI Anda";
const char* WIFI_PASSWORD = "kataSandi0";
Penting: SSID Wi-Fi bersifat peka huruf besar/kecil. SSID bernama "Book" tidak sama dengan "book". Jika kapitalisasi tidak cocok persis, ESP32-S3 akan gagal terhubung.
Server NTP, zona waktu, dan waktu musim panas
Jam menyinkronkan waktu menggunakan server NTP internet:
const char* ntpServer = "pool.ntp.org";
Waktu lokal dihitung menggunakan offset berikut:
// Seperti Toronto: UTC-5, ditambah 1 jam DST
const long gmtOffset_sec = -5 * 3600;
const int daylightOffset_sec = 3600;
gmtOffset_sec: Offset UTC dalam detik (contoh: UTC-5 =-5 * 3600)daylightOffset_sec: Gunakan3600jika DST aktif, atau0jika tidak digunakan
Nilai-nilai ini diterapkan menggunakan:
configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
Kecerahan otomatis siang / malam
Kecerahan berubah secara otomatis berdasarkan jam saat ini:
const int DAY_BRIGHTNESS = 40;
const int NIGHT_BRIGHTNESS = 5;
const int NIGHT_START_HOUR = 22;
const int NIGHT_END_HOUR = 6;
Antara pukul 10 malam dan 6 pagi, matriks meredup untuk mengurangi silau. Selama jam siang, kecerahan normal dipulihkan.
Efek warna pelangi
Proyek ini menggunakan roda warna RGB klasik untuk menghasilkan warna pelangi yang halus. Setiap karakter digambar dengan offset warna yang sedikit berbeda, dan warna-warna tersebut bergeser seiring waktu, menghasilkan animasi pelangi yang mengalir.
// Pembantu untuk membuat Warna Pelangi
uint32_t Wheel(byte WheelPos) {
WheelPos = 255 - WheelPos;
if (WheelPos < 85) {
return matrix.Color(255 - WheelPos * 3, 0, WheelPos * 3);
}
if (WheelPos < 170) {
WheelPos -= 85;
return matrix.Color(0, WheelPos * 3, 255 - WheelPos * 3);
}
WheelPos -= 170;
return matrix.Color(WheelPos * 3, 255 - WheelPos * 3, 0);
}
Saat teks berjalan, setiap karakter maju melalui spektrum RGB, menciptakan efek pelangi berkelanjutan yang terlihat sangat mengesankan pada layar 8×8 yang kecil.
Perilaku tampilan waktu dan tanggal
Jam mempertahankan buffer terpisah untuk waktu dan tanggal:
- Waktu:
HH:MM - Tanggal:
MMM DD(contohJAN 08)
Tanggal ditampilkan pada interval tetap:
const uint32_t dateIntervalMs = 60000; // Tampilkan tanggal setiap 1 menit
Di akhir setiap siklus gulir penuh, kode memutuskan apakah akan terus menampilkan waktu atau beralih ke tanggal.
Logika pengguliran pada matriks 8×8
Karena layar hanya selebar 8 piksel, teks bergulir dengan halus dari kanan ke kiri. Setelah teks sepenuhnya keluar dari layar, kursor diatur ulang dan konten berikutnya (waktu atau tanggal) dimuat untuk lintasan berikutnya.
Demonstrasi
Setelah mengunggah sketsa dan menyalakan papan melalui USB-C:
- ESP32-S3 terhubung ke jaringan Wi-Fi Anda
- Waktu disinkronkan dari internet
- Waktu berjalan dalam format
HH:MM - Tanggal muncul secara berkala
- Semua teks dirender dengan efek pelangi beranimasi yang halus
- Layar secara otomatis meredup di malam hari dan mencerahkan di siang hari
Unduhan dan tautan
Kode sumber lengkap disediakan di bawah artikel ini. Alat dan referensi yang berguna, termasuk Pemilih Warna RGB, juga ditautkan di bawah artikel ini.
Tutorial ini adalah bagian dari: Matriks LED RGB ESP32-S3
- Proyek Matriks LED RGB ESP32-S3 1- Titik Dasar
- Proyek Matriks LED RGB ESP32-S3 2 - Teks Berjalan
- Proyek Matriks LED RGB ESP32-S3 3 - Teks dari ponsel
- Proyek Matriks LED RGB ESP32-S3 4 - Titik miring
- Proyek Matriks LED RGB ESP32-S3 5 - Panah selalu ke atas
- Proyek Matriks LED RGB ESP32-S3 6 - Permainan Cible
- Proyek Jam Wi-Fi + NTP dengan Matriks LED RGB ESP32-S3 -1 Jam Dasar
- Proyek Jam Internet Matriks LED RGB ESP32-S3 - 2 Jam Tampilan Waktu & Tanggal Multi Warna
- Proyek Jam Internet Matriks LED RGB ESP32-S3 - 3 Warna Malam dengan Tanggal
- Proyek Jam Internet Matriks LED RGB ESP32-S3 - 4 Warna acak
- ESP32-S3 RGB LED Matrix test for RGB, GRB setting
/*
* =====================================================================================
* ESP32-S3 CLOCK - RAINBOW DATE & SOLID TIME - Project 5- RAINBOW MODE
* =====================================================================================
watch video https://youtube.com/shorts/4iWjLiD7fS8
📚⬇️ Download and resource page https://robojax.com/RJT842
* Author: Gemini (AI Thought Partner) & Ahmad Shamshiri (Robojax.com)
* Date: 07 Jan 2026
* =====================================================================================
* ESP32-S3 INTERNET RGB CLOCK - RAINBOW MODE
* * FEATURES:
* - Full Rainbow: Time and Date use flowing rainbow colors.
* - Auto-Brightness: Dims at night (22:00 to 06:00).
* - Custom WiFi: Robust connection logic with retries.
* =====================================================================================
*/
#include <WiFi.h>
#include "time.h"
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>
#define MATRIX_PIN 14
// 👇 REPLACE these with your real home WiFi name & password
const char* WIFI_SSID = "your WIFI";
const char* WIFI_PASSWORD = "passW0rd";
// 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
// --- BRIGHTNESS CONFIGURATION ---
const int DAY_BRIGHTNESS = 40;
const int NIGHT_BRIGHTNESS = 5;
const int NIGHT_START_HOUR = 22;
const int NIGHT_END_HOUR = 6;
// --- INTERVALS & TRACKING ---
unsigned long lastDateShowMs = 0;
const uint32_t dateIntervalMs = 60000; // Show date every 1 minute
bool isShowingDate = false;
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";
char dateText[10] = "";
char currentDisplayText[12] = "";
int16_t scrollX = 8;
unsigned long lastScrollMs = 0;
const uint16_t scrollIntervalMs = 100;
unsigned long lastTimeUpdateMs = 0;
// Helper to create Rainbow Colors
uint32_t Wheel(byte WheelPos) {
WheelPos = 255 - WheelPos;
if(WheelPos < 85) {
return matrix.Color(255 - WheelPos * 3, 0, WheelPos * 3);
}
if(WheelPos < 170) {
WheelPos -= 85;
return matrix.Color(0, WheelPos * 3, 255 - WheelPos * 3);
}
WheelPos -= 170;
return matrix.Color(WheelPos * 3, 255 - WheelPos * 3, 0);
}
void updateClockData() {
struct tm timeinfo;
if (!getLocalTime(&timeinfo)) return;
// Update Time and Date strings
snprintf(timeText, sizeof(timeText), "%02d:%02d", timeinfo.tm_hour, timeinfo.tm_min);
strftime(dateText, sizeof(dateText), "%b %d", &timeinfo);
for (int i = 0; dateText[i]; i++) dateText[i] = toupper(dateText[i]);
// Handle Night Dimming
if (timeinfo.tm_hour >= NIGHT_START_HOUR || timeinfo.tm_hour < NIGHT_END_HOUR) {
matrix.setBrightness(NIGHT_BRIGHTNESS);
} else {
matrix.setBrightness(DAY_BRIGHTNESS);
}
}
void scrollDisplay() {
matrix.fillScreen(0);
int len = strlen(currentDisplayText);
int16_t x = scrollX;
// Draw each character with a shifting rainbow color
for (int i = 0; i < len; i++) {
uint8_t colorPos = (uint8_t)((i * 30) + (millis() / 5));
matrix.setTextColor(Wheel(colorPos));
matrix.setCursor(x + (i * 6), 0);
matrix.print(currentDisplayText[i]);
}
matrix.show();
scrollX--;
int16_t textWidth = len * 6;
if (scrollX < -textWidth) {
scrollX = matrix.width();
// Switch between Date and Time at end of cycle
if (millis() - lastDateShowMs > dateIntervalMs) {
strcpy(currentDisplayText, dateText);
lastDateShowMs = millis();
isShowingDate = true;
} else {
strcpy(currentDisplayText, timeText);
isShowingDate = false;
}
}
}
void setup() {
Serial.begin(115200);
delay(1000);
Serial.println("\nESP32-S3 Rainbow Clock Initializing...");
// 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());
}
// Configure time via NTP
configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
Serial.println("Waiting for time...");
delay(2000); // small wait for initial sync
matrix.begin();
matrix.setTextWrap(false);
matrix.setBrightness(DAY_BRIGHTNESS);
updateClockData();
strcpy(currentDisplayText, timeText); // Load initial time
}
void loop() {
unsigned long now = millis();
// Update time digits and check brightness every second
if (now - lastTimeUpdateMs >= 1000) {
lastTimeUpdateMs = now;
updateClockData();
}
// Handle the scrolling animation
if (now - lastScrollMs >= scrollIntervalMs) {
lastScrollMs = now;
scrollDisplay();
}
}
Sumber daya & referensi
-
Video
-
Internal🎨 Color picker Toolrobojax.com
Berkas📁
File Fritzing
-
esp32-S3-supermini-tht fritzing part
esp32-S3-supermini-tht.fzpz0.02 MB