This tutorial is part of: ESP32-S3 RGB LED Matrix
โปรเจ็กต์เจ๋งๆ ที่สร้างได้ทั้งเพื่อความสนุกและการใช้งานจริง โดยใช้โมดูล ESP32-S3 RGB Matrix ลิงก์ไปยังวิดีโออื่นๆ อยู่ด้านล่างบทความนี้
โปรเจกต์นาฬิกาอินเทอร์เน็ต RGB LED Matrix ESP32-S3 - 4 สีสุ่ม
นาฬิกาอินเทอร์เน็ต ESP32-S3 พร้อมสี RGB แบบสุ่ม
โปรเจกต์นี้เป็นนาฬิกาอินเทอร์เน็ต RGB Matrix ของ ESP32-S3 ที่เชื่อมต่อกับ Wi-Fi ซิงโครไนซ์เวลาท้องถิ่นจากเซิร์ฟเวอร์ NTP และเลื่อนเวลาในรูปแบบ HH:MM ผ่าน NeoMatrix RGB 8×8 ในตัว ในเวอร์ชันนี้ ชั่วโมง เครื่องหมายโคลอน และนาที จะถูกแสดงผลด้วยสีแบบสุ่มที่เลือกใหม่ในทุกรอบการเลื่อนเต็มรูปแบบ ทำให้เกิดการแสดงนาฬิกาที่มีชีวิตชีวาและสนุกสนานซึ่งเปลี่ยนแปลงอยู่ตลอดเวลา

นาฬิกานี้ทำงานอย่างไร
หลังจากจ่ายไฟให้บอร์ดผ่าน USB-C แล้ว ESP32-S3 จะเชื่อมต่อกับเครือข่าย Wi-Fi ของคุณและดึงเวลาท้องถิ่นปัจจุบันจากอินเทอร์เน็ต เวลาจะถูกแบ่งออกเป็นสามส่วน ได้แก่ ชั่วโมง เครื่องหมายโคลอน และนาที และแต่ละส่วนจะถูกวาดแยกกันบน RGB matrix เมื่อข้อความเลื่อนออกจากหน้าจอจนหมด จะมีการเลือกสีสุ่มใหม่สำหรับรอบถัดไป
ไลบรารีที่ใช้
สเก็ตช์นี้ใช้ไลบรารีต่อไปนี้:

#include <WiFi.h>
#include "time.h"
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>
ติดตั้ง Adafruit NeoMatrix จาก Arduino Library Manager ไลบรารีที่จำเป็น เช่น Adafruit GFX Library และ Adafruit NeoPixel จะถูกติดตั้งโดยอัตโนมัติ

การกำหนดค่าที่สำคัญสำหรับผู้ใช้
พินข้อมูล Matrix (RGB matrix ในตัว)
แม้ว่า RGB matrix จะรวมอยู่ในบอร์ดแล้ว แต่ยังต้องกำหนดพินข้อมูลในโค้ด:

#define MATRIX_PIN 14
GPIO 14 มักใช้กับบอร์ด ESP32-S3 RGB matrix หากบอร์ดรุ่นของคุณใช้พินอื่น โปรดอัปเดตค่านี้ให้เหมาะสม
SSID และรหัสผ่าน Wi-Fi (ตัวพิมพ์ใหญ่-เล็กมีความสำคัญ)
แทนที่ข้อมูลรับรอง Wi-Fi ด้วยรายละเอียดเครือข่ายของคุณเอง:
const char* WIFI_SSID = "your WiFi SSID";
const char* WIFI_PASSWORD = "passW0rd";
สำคัญ: SSID ของ Wi-Fi เป็นแบบตัวพิมพ์ใหญ่-เล็กมีความสำคัญ SSID ที่ชื่อ "Book" ไม่เหมือนกับ "book" หากตัวพิมพ์ใหญ่ไม่ตรงกันทุกตัว ESP32-S3 จะไม่สามารถเชื่อมต่อได้
เซิร์ฟเวอร์ NTP เขตเวลา และเวลาออมแสง
การซิงโครไนซ์เวลาทำได้โดยใช้เซิร์ฟเวอร์ NTP บนอินเทอร์เน็ต:
const char* ntpServer = "pool.ntp.org";
เวลาท้องถิ่นคำนวณโดยใช้ค่า offset ของ UTC และเวลาออมแสง:
// แบบโตรอนโต: UTC-5 บวกเวลาออมแสง 1 ชั่วโมง
const long gmtOffset_sec = -5 * 3600;
const int daylightOffset_sec = 3600;
gmtOffset_sec: ค่า offset ของ UTC ในหน่วยวินาที (ปรับตามตำแหน่งของคุณ)daylightOffset_sec: ใช้3600เมื่อเปิดเวลาออมแสง หรือ0ในกรณีอื่น
การตั้งค่าเหล่านี้ถูกนำไปใช้ด้วย:
configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);
ความสว่างกลางวัน/กลางคืนอัตโนมัติ
นาฬิกาจะปรับความสว่างโดยอัตโนมัติตามชั่วโมงปัจจุบัน:
const int DAY_BRIGHTNESS = 40;
const int NIGHT_BRIGHTNESS = 5;
const int NIGHT_START_HOUR = 22;
const int NIGHT_END_HOUR = 6;
ระหว่าง 22:00 น. ถึง 06:00 น. จอแสดงผลจะลดความสว่างลงเพื่อลดแสงสะท้อนในสภาพแวดล้อมที่มืด ในช่วงเวลากลางวัน matrix จะกลับสู่ความสว่างปกติ
พฤติกรรมสี RGB แบบสุ่ม
รายการสี RGB ที่กำหนดไว้ล่วงหน้าจะถูกเก็บในอาร์เรย์ โดยแต่ละสีถูกกำหนดด้วยค่าแดง เขียว และน้ำเงิน ตั้งแต่ 0 ถึง 255:
uint8_t userColors[][3] = {
{255, 0, 0}, // แดง
{0, 255, 0}, // เขียว
{0, 0, 255}, // น้ำเงิน
{255, 165, 0}, // ส้ม
{255, 0, 255}, // ม่วงแดง
{0, 255, 255}, // ฟ้า
{255, 255, 0} // เหลือง
};
ในทุกรอบการเลื่อนเต็มรูปแบบ:
- ตัวเลขชั่วโมง จะถูกกำหนดสีแบบสุ่ม
- เครื่องหมายโคลอน จะได้รับสีสุ่มที่แตกต่างกัน
- ตัวเลขนาที จะได้รับสีสุ่มอีกสีหนึ่ง
สิ่งนี้สร้างการผสมสีที่เปลี่ยนแปลงตลอดเวลา ทำให้นาฬิกาดูน่าสนใจอยู่เสมอ หากต้องการสร้างสีที่กำหนดเอง คุณสามารถใช้เครื่องมือ RGB Color Picker: RGB Color Picker
ตรรกะการแสดงเวลา
เวลาจะถูกแบ่งออกเป็นสามส่วน:
- ชั่วโมง:
HH - เครื่องหมายโคลอน:
: - นาที:
MM
แต่ละส่วนจะถูกวาดแยกกันเพื่อให้มีสีของตัวเอง ในขณะที่ทุกส่วนเคลื่อนที่ไปด้วยกันเพื่อสร้างแอนิเมชันการเลื่อนที่ราบรื่นบนจอแสดงผล 8×8
การสร้างสีแบบสุ่ม
เพื่อให้แน่ใจว่าสีมีความสุ่ม สเก็ตช์จะ seed ตัวสร้างตัวเลขสุ่มเมื่อเริ่มต้นโดยใช้พินอนาล็อกที่ไม่ได้เชื่อมต่อ:
randomSeed(analogRead(0));
สิ่งนี้ทำให้แน่ใจว่าการผสมสีจะแตกต่างกันในทุกครั้งที่เปิดเครื่องและทุกรอบการเลื่อน
การสาธิต
หลังจากอัปโหลดสเก็ตช์และจ่ายไฟให้บอร์ดผ่าน USB-C:
- ESP32-S3 เชื่อมต่อกับเครือข่าย Wi-Fi ของคุณ
- เวลาถูกซิงโครไนซ์จากอินเทอร์เน็ต
- เวลาเลื่อนในรูปแบบ
HH:MM - ชั่วโมง เครื่องหมายโคลอน และนาที เปลี่ยนเป็นสีสุ่มในทุกรอบ
- จอแสดงผลจะลดความสว่างโดยอัตโนมัติในเวลากลางคืน
ดาวน์โหลดและลิงก์
บทความนี้มีซอร์สโค้ดฉบับสมบูรณ์อยู่ด้านล่าง เครื่องมือและเอกสารอ้างอิงที่เป็นประโยชน์มีลิงก์อยู่ด้านล่างบทความนี้
This tutorial is part of: ESP32-S3 RGB LED Matrix
- โปรเจกต์ ESP32-S3 RGB LED Matrix 1- จุดพื้นฐาน
- โปรเจกต์ ESP32-S3 RGB LED Matrix 2 - ข้อความเลื่อน
- โปรเจกต์ ESP32-S3 RGB LED Matrix 3 - ข้อความจากโทรศัพท์มือถือ
- โปรเจกต์ ESP32-S3 RGB LED Matrix 4 - จุดเอียง
- โปรเจกต์ ESP32-S3 RGB LED Matrix 5 - ลูกศรชี้ขึ้นเสมอ
- โปรเจกต์ ESP32-S3 RGB LED Matrix 6 - เกม Cible
- โปรเจกต์นาฬิกา ESP32-S3 RGB LED Matrix Wi-Fi + NTP Time Clock -1 นาฬิกาพื้นฐาน
- โปรเจกต์นาฬิกาอินเทอร์เน็ต RGB LED Matrix ESP32-S3 - จอแสดงเวลาและวันที่หลากสี 2 นาฬิกา
- โปรเจกต์นาฬิกาอินเทอร์เน็ต RGB LED Matrix ESP32-S3 - 3 สีกลางคืนพร้อมวันที่
- โครงการนาฬิกาอินเทอร์เน็ตจอ LED Matrix RGB ESP32-S3 - 5 สีรุ้ง
- ESP32-S3 RGB LED Matrix test for RGB, GRB setting
/*
* =====================================================================================
* 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();
}
}
แหล่งข้อมูลและเอกสารอ้างอิง
-
วิดีโอ
-
ภายใน🎨 Color picker Toolrobojax.com
ไฟล์📁
ไฟล์ Fritzing
-
esp32-S3-supermini-tht fritzing part
esp32-S3-supermini-tht.fzpz0.02 MB