Search Code

Proyek Jam Internet Matriks LED RGB ESP32-S3 - 4 Warna acak

Proyek Jam Internet Matriks LED RGB ESP32-S3 - 4 Warna acak

Jam Internet ESP32-S3 dengan Warna RGB Acak

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 di NeoMatrix RGB 8×8 bawaan. Pada versi ini, jam, titik dua, dan menit masing-masing dirender dalam warna acak yang dipilih pada setiap siklus gulir penuh, menciptakan tampilan jam yang dinamis dan menyenangkan yang terus berubah.

Animasi_jam_internet_ESP32-s3

Cara kerja jam ini

Setelah menyalakan board melalui USB-C, ESP32-S3 terhubung ke jaringan Wi-Fi Anda dan mengambil waktu lokal saat ini dari internet. Waktu dibagi menjadi tiga bagian—jam, titik dua, dan menit—dan setiap bagian digambar secara terpisah pada matriks RGB. Saat teks bergulir sepenuhnya keluar layar, warna acak baru dipilih untuk putaran berikutnya.

Pustaka yang digunakan

Sketsa ini menggunakan pustaka berikut:

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

Instal Adafruit NeoMatrix dari Arduino Library Manager. Dependensi yang diperlukan seperti Adafruit GFX Library dan Adafruit NeoPixel akan terinstal secara otomatis.

Konfigurasi pengguna yang penting

Pin data matriks (matriks RGB bawaan)

Meskipun matriks RGB terintegrasi di board, pin data tetap harus didefinisikan dalam kode:

#define MATRIX_PIN 14

GPIO 14 umumnya digunakan pada board matriks RGB ESP32-S3. Jika varian board Anda menggunakan pin yang berbeda, perbarui nilai ini sesuai.

SSID dan kata sandi Wi-Fi (peka huruf besar/kecil)

Ganti kredensial Wi-Fi dengan detail jaringan Anda sendiri:

const char* WIFI_SSID     = "SSID WiFi Anda";
const char* WIFI_PASSWORD = "kataSandi";

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

Sinkronisasi waktu dilakukan menggunakan server NTP internet:

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

Waktu lokal dihitung menggunakan offset UTC dan waktu musim panas:

// 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 (sesuaikan dengan lokasi Anda)
  • daylightOffset_sec: Gunakan 3600 saat DST aktif, atau 0 jika tidak

Pengaturan ini diterapkan menggunakan:

configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

Kecerahan siang / malam otomatis

Jam secara otomatis menyesuaikan kecerahan 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, tampilan meredup untuk mengurangi silau di lingkungan gelap. Selama jam siang, matriks kembali ke kecerahan normal.

Perilaku warna RGB acak

Daftar warna RGB yang telah ditentukan disimpan dalam array, di mana setiap warna didefinisikan menggunakan nilai Merah, Hijau, dan Biru mulai dari 0 hingga 255:

uint8_t userColors[][3] = {
  {255, 0, 0},    // Merah
  {0, 255, 0},    // Hijau
  {0, 0, 255},    // Biru
  {255, 165, 0},  // Oranye
  {255, 0, 255},  // Magenta
  {0, 255, 255},  // Cyan
  {255, 255, 0}   // Kuning
};

Pada setiap siklus gulir penuh:

  • Digit jam diberi warna acak
  • Titik dua menerima warna acak yang berbeda
  • Digit menit menerima warna acak lainnya

Ini menghasilkan kombinasi warna yang terus berubah yang membuat jam tetap menarik secara visual. Untuk membuat warna khusus Anda sendiri, Anda dapat menggunakan alat RGB Color Picker: RGB Color Picker.

Logika rendering waktu

Waktu dibagi menjadi tiga komponen:

  • Jam: HH
  • Titik dua: :
  • Menit: MM

Setiap bagian digambar secara individual sehingga dapat memiliki warnanya sendiri, sementara semua bagian bergerak bersama untuk membentuk animasi gulir yang halus di layar 8×8.

Generasi warna acak

Untuk memastikan keacakan warna, sketsa menginisialisasi generator angka acak saat startup menggunakan pin analog yang tidak terhubung:

randomSeed(analogRead(0));

Ini memastikan bahwa kombinasi warna berbeda pada setiap penyalaan dan setiap siklus gulir.

Demonstrasi

Setelah mengunggah sketsa dan menyalakan board melalui USB-C:

  • ESP32-S3 terhubung ke jaringan Wi-Fi Anda
  • Waktu disinkronkan dari internet
  • Waktu bergulir dalam format HH:MM
  • Jam, titik dua, dan menit berubah menjadi warna acak setiap siklus
  • Tampilan secara otomatis meredup di malam hari

Unduhan dan tautan

Kode sumber lengkap disediakan di bawah artikel ini. Alat dan referensi yang berguna ditautkan di bawah artikel ini.

Gambar

ESP32 S3 Matrix
ESP32 S3 Matrix
ESP32 S3 Matrix  pin out
ESP32 S3 Matrix pin out
ESP32-S3_RGB_8x8_matrix-3
ESP32-S3_RGB_8x8_matrix-3
ESP32-S3_RGB_8x8_matrix1
ESP32-S3_RGB_8x8_matrix1
ESP32-S3_RGB_8x8_matrix-2
ESP32-S3_RGB_8x8_matrix-2
ESP32-s3_internet_clock_animation
ESP32-s3_internet_clock_animation
873-ESP32-S3 RGB LED Matrix Internte Clock Project 4 - Random Color
Bahasa: C++
/*
 * =====================================================================================
 * ESP32-S3 INTERNET RGB CLOCK (8x8 Matrix) - Project 4- Random Color
 * =====================================================================================
 watch video https://youtube.com/shorts/4iWjLiD7fS8
 📚⬇️ Download and resource page https://robojax.com/RJT843
 * Author: Gemini (AI Thought Partner) & Ahmad Shamshiri (Robojax.com)
 * Date: 07 Jan 2026

 * * FEATURES:
 * 1. WiFi/NTP Time: Syncs automatically with internet time servers.
 * 2. Cycle-Based Color: Color changes ONLY after the time finishes a full scroll.
 * 3. Auto-Brightness: Dims the LEDs during night hours (User-configurable).
 * =====================================================================================
 */
/*
 * =====================================================================================
 * ESP32-S3 INTERNET CLOCK - MULTI-COLOR ELEMENTS
 * =====================================================================================
 * Each part of the time (HH : MM) gets a different random color from your list.
 * Colors only change once the full scroll cycle is finished.
 * =====================================================================================
 */

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

#define MATRIX_PIN 14

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

uint8_t userColors[][3] = {
  {255, 0, 0},    // Red
  {0, 255, 0},    // Green
  {0, 0, 255},    // Blue
  {255, 165, 0},  // Orange
  {255, 0, 255},  // Magenta
  {0, 255, 255},  // Cyan
  {255, 255, 0}   // Yellow
};
int totalColors = sizeof(userColors) / sizeof(userColors[0]);

// Variables to store the current random color indices
int hourColorIdx = 0;
int colonColorIdx = 1;
int minColorIdx = 2;

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

char hourText[3], minText[3];
int16_t scrollX = 8;
unsigned long lastScrollMs = 0;
const uint16_t scrollIntervalMs = 100;

// 👇 REPLACE these with your real home WiFi name & password
const char* WIFI_SSID     = "your WiFi SSID";
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


void updateTimeParts() {
  struct tm timeinfo;
  if (!getLocalTime(&timeinfo)) return;
  
  snprintf(hourText, sizeof(hourText), "%02d", timeinfo.tm_hour);
  snprintf(minText, sizeof(minText), "%02d", timeinfo.tm_min);

  if (timeinfo.tm_hour >= NIGHT_START_HOUR || timeinfo.tm_hour < NIGHT_END_HOUR) {
    matrix.setBrightness(NIGHT_BRIGHTNESS);
  } else {
    matrix.setBrightness(DAY_BRIGHTNESS);
  }
}

void scrollTime() {
  matrix.fillScreen(0);
  
  int x = scrollX;

  // 1. Draw Hours
  matrix.setTextColor(matrix.Color(userColors[hourColorIdx][0], userColors[hourColorIdx][1], userColors[hourColorIdx][2]));
  matrix.setCursor(x, 0);
  matrix.print(hourText);
  x += 12; // Move 12 pixels (2 digits * 6px)

  // 2. Draw Colon
  matrix.setTextColor(matrix.Color(userColors[colonColorIdx][0], userColors[colonColorIdx][1], userColors[colonColorIdx][2]));
  matrix.setCursor(x, 0);
  matrix.print(":");
  x += 6; // Move 6 pixels

  // 3. Draw Minutes
  matrix.setTextColor(matrix.Color(userColors[minColorIdx][0], userColors[minColorIdx][1], userColors[minColorIdx][2]));
  matrix.setCursor(x, 0);
  matrix.print(minText);

  matrix.show();
  scrollX--;

  // Total width is roughly 30 pixels (HH=12, :=6, MM=12)
  if (scrollX < -30) {
    scrollX = matrix.width(); 
    
    // Pick NEW random colors for the next cycle
    hourColorIdx = random(0, totalColors);
    colonColorIdx = random(0, totalColors);
    minColorIdx = random(0, totalColors);
  }
}

void setup() {
  Serial.begin(115200);
  
  // Seed the random generator using an unconnected analog pin
  randomSeed(analogRead(0));

  WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
  while (WiFi.status() != WL_CONNECTED) delay(500);
  
  // 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);
}

void loop() {
  if (millis() % 1000 == 0) updateTimeParts();

  if (millis() - lastScrollMs >= scrollIntervalMs) {
    lastScrollMs = millis();
    scrollTime();
  }
}

Sumber daya & referensi

Berkas📁

File Fritzing