Ver en YouTube

Proyecto de reloj de internet con matriz de LED RGB ESP32-S3 - 5 colores del arcoíris

Reloj de Internet ESP32-S3 con efecto de color arcoíris

Este proyecto es un reloj con matriz RGB ESP32-S3 que se conecta a Wi-Fi, sincroniza la hora local desde un servidor NTP y desplaza la hora enHH:MMformato a través del NeoMatrix RGB integrado de 8×8. A diferencia de las versiones de color sólido o aleatorio, este reloj utiliza una transición suaveefecto de color arcoíris, donde cada carácter cambia continuamente a través del espectro RGB mientras se desplaza. El reloj también muestra periódicamente la fecha y ajusta automáticamente el brillo entre el día y la noche.

Cómo funciona este reloj

Una vez alimentado a través de USB-C, el ESP32-S3 se conecta a su red Wi-Fi y recupera la hora local actual de internet. La pantalla normalmente desplaza el tiempo, pero en un intervalo definido cambia para mostrar la fecha. Tanto la hora como la fecha se representan utilizando un efecto de arcoíris dinámico, creando una exhibición vibrante y animada en la pequeña matriz de 8×8.

Bibliotecas utilizadas

El boceto se basa en las siguientes bibliotecas:

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

InstalarAdafruit NeoMatrixusando el Administrador de bibliotecas de Arduino. Sus dependencias, incluyendoAdafruit GFX LibraryyAdafruit NeoPixel, se instalará automáticamente.

Configuración de usuario importante

Pin de datos de matriz (matriz RGB integrada)

Aunque la matriz RGB está conectada a la placa ESP32-S3, el pin de datos aún debe definirse en el código:

#define MATRIX_PIN 14

El GPIO 14 se utiliza comúnmente en placas de matriz RGB ESP32-S3. Si tu variante de placa utiliza un pin diferente, actualiza este valor.

SSID de Wi-Fi y contraseña (sensible a mayúsculas y minúsculas)

Reemplace las credenciales de Wi-Fi con los detalles de su propia red:

const char* WIFI_SSID     = "your WIFI";
const char* WIFI_PASSWORD = "passW0rd";

Importante:Los SSIDs de Wi-Fi sonsensible a mayúsculas y minúsculasUn SSID llamado"Book"no es lo mismo que"book". Si la capitalización no coincide exactamente, el ESP32-S3 no se conectará.

Servidor NTP, zona horaria y horario de verano

El reloj sincroniza la hora utilizando un servidor NTP de internet:

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

La hora local se calcula utilizando estos desfases:

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

• gmtOffset_sec: Desplazamiento UTC en segundos (ejemplo: UTC-5 =-5 * 3600)
• daylightOffset_secUsar3600si DST está activo, o0si no se utiliza

Estos valores se aplican utilizando:

configTime(gmtOffset_sec, daylightOffset_sec, ntpServer);

Brillo automático día/noche

El brillo cambia automáticamente según la hora actual:

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

Entre las 10 PM y las 6 AM, la matriz se atenúa para reducir el deslumbramiento. Durante las horas del día, se restaura el brillo normal.

Efecto de color arcoíris

Este proyecto utiliza una rueda de colores RGB clásica para generar colores de arcoíris suaves. Cada carácter se dibuja con un ligero desplazamiento de color y los colores cambian con el tiempo, produciendo una animación de arcoíris fluida.

// 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);
}

A medida que el texto se desplaza, cada carácter avanza a través del espectro RGB, creando un efecto arcoíris continuo que se ve especialmente impresionante en la pequeña pantalla de 8×8.

Comportamiento de la visualización de la hora y la fecha

El reloj mantiene búferes separados para la hora y la fecha:

• Tiempo: HH:MM
• Fecha: MMM DDpor ejemploJAN 08)

La fecha se muestra en un intervalo fijo:

const uint32_t dateIntervalMs = 60000; // Show date every 1 minute

Al final de cada ciclo completo de desplazamiento, el código decide si continuar mostrando la hora o cambiar a la fecha.

Lógica de desplazamiento en una matriz de 8×8

Debido a que la pantalla solo tiene 8 píxeles de ancho, el texto se desplaza suavemente de derecha a izquierda. Una vez que el texto sale completamente de la pantalla, el cursor se restablece y el siguiente contenido (hora o fecha) se carga para el siguiente pase.

Demostración

Después de subir el boceto y alimentar la placa a través de USB-C:

• El ESP32-S3 se conecta a tu red Wi-Fi.
• El tiempo está sincronizado desde Internet.
• El tiempo avanza.HH:MMformato
• La fecha aparece periódicamente.
• Todo el texto se muestra con un suave efecto arcoíris animado.
• La pantalla se atenúa automáticamente por la noche y se ilumina durante el día.

Descargas y enlaces

El código fuente completo se proporciona a continuación de este artículo. Herramientas y referencias útiles, incluido el Selector de Color RGB, también están enlazadas a continuación de este artículo.

Imágenes

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

/*
 * =====================================================================================
 * 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();
  }
}