Ver en YouTube

Proyecto 2 de matriz de LED RGB ESP32-S3 - Texto en desplazamiento

Proyecto 2 - Desplazamiento de texto en matriz LED RGB ESP32-S3

En este proyecto convertimos la matriz de LED RGB ESP32-S3 en una pequeña pancarta de texto. Un mensaje corto (por ejemploRobojax) se desplaza por la pantalla RGB de 8×8, y puedes cambiar fácilmente el texto, el color, el brillo y la velocidad de desplazamiento directamente en el código. Esto es muy útil para notificaciones simples, etiquetas con nombres o pequeños mensajes de estado.

Todos los seis proyectos de esta serie se demuestran y explican en un único video de YouTube. El mismo video está incrustado en esta página, por lo que puedes ver exactamente cómo se ve el desplazamiento del texto en tiempo real y cómo cada configuración afecta la animación. El código completo para este proyecto se carga automáticamente debajo del artículo, y puedes comprar el módulo de matriz LED RGB ESP32-S3 en las tiendas afiliadas que se enumeran en la sección de código.

Este proyecto se basa en los fundamentos del Proyecto 1 (movimiento del punto y control de color) y añade renderizado de texto y desplazamiento utilizando la biblioteca NeoMatrix.

Resumen del Módulo de Matriz LED RGB ESP32-S3

El hardware es el mismo en los seis proyectos: un microcontrolador ESP32-S3 con Wi-Fi y Bluetooth, una matriz de LED RGB de 8×8 (64 LEDs RGB direccionables), un acelerómetro QMI8658C, un puerto USB y pines de E/S accesibles.:contentReference[oaicite:0]{index=0}

• ESP32-S3- CPU principal con Wi-Fi/BLE para proyectos avanzados.
• matriz RGB de 8×8- 64 LED RGB para íconos, texto y animaciones.
• Acelerómetro QMI8658C- utilizado en proyectos posteriores para inclinación y orientación.
• Puerto USB- utilizado para la energía y programación a través de Arduino IDE.
• Pines expuestos- te permite usar la placa como un ESP32 normal para otras entradas/salidas.
• Botón de encendido / Reinicio- para la carga de firmware y reinicio de bocetos.

En el Proyecto 2 nos enfocamos principalmente en la matriz y las funciones de texto NeoMatrix. El acelerómetro aún no se utiliza, pero la misma placa manejará toda la interacción y los proyectos de juegos posteriores.

Proyectos Cubiertos en el Video (Marcas de Tiempo)

El video que acompaña a este artículo cubre los seis proyectos. Las marcas de tiempo aproximadas son:

• 00:00- Introducción
• 02:01- Instalando placas ESP32
• 03:32- Instalando bibliotecas
• 05:32- Proyecto 1: Punto en movimiento
• 11:11- Proyecto 2: Desplazamiento de Texto
• 12:59- Proyecto 3: Texto HTTP
• 16:41- Proyecto 4: Tilt Dot
• 18:55- Proyecto 5: Flecha Arriba
• 20:02- Proyecto 6: Juego de Objetivos

Se te anima a ver el video mientras lees este artículo. Muestra el texto desplazándose en vivo en la matriz LED y explica todos los pasos en el IDE de Arduino.

Instalando placas ESP32 en Arduino IDE

Antes de ejecutar el código de desplazamiento de texto, asegúrate de que el soporte para ESP32 esté instalado en tu IDE de Arduino:

1. AbiertoFile > Preferencesy añade la URL de las placas ESP32 a "URLs del gestor de placas adicionales".
2. Ir aTools > Board > Boards Manager…, busca porESP32, e instala el paquete oficial de ESP32.
3. Seleccione su placa matriz RGB ESP32-S3 deTools > Board.
4. Conecte el módulo a través de USB y elija el puerto COM/serial correcto bajoTools > Port.

Si el tipo de placa o el puerto no son correctos, el sketch no se cargará.

Instalación de NeoMatrix y bibliotecas requeridas

El desplazamiento de texto se implementa utilizando Adafruit NeoMatrix y sus dependencias. En el video, se instalan a través del Administrador de Bibliotecas.

Necesitarás:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

1. AbrirSketch > Include Library > Manage Libraries….
2. Buscar porAdafruit NeoMatrixy haz clicInstalar.
3. Cuando se le pida, permita que se instale.Adafruit GFXyAdafruit NeoPixelcomo dependencias.

Si la instalación es exitosa, deberías ver ejemplos de bocetos bajoFile > Examples > Adafruit NeoMatrixyFile > Examples > Adafruit NeoPixel.

Proyecto 2 - Configuraciones de Código (Desplazamiento de Texto)

El boceto del texto completo que se desplaza se carga automáticamente debajo de este artículo en el sitio web. Aquí nos enfocamos solo en los valores de configuración que probablemente querrás editar: pin, tamaño de la matriz, brillo, cadena de texto, color, velocidad de desplazamiento y dirección opcional.

Todos los fragmentos a continuación se toman de la sección de configuración en la parte superior del boceto, por lo que puedes ajustar rápidamente el comportamiento sin tocar la lógica principal.

Pin de matriz y tamaño

Al igual que el Proyecto 1, la matriz RGB está conectada a GPIO 14 y contiene 64 LED (8×8). Asegúrate de que estas dos líneas coincidan con tu módulo:

 // Pin connected to 8×8 RGB matrix 
const int MATRIX_PIN = 14; // must be 14 on this module // Matrix size (width and height)
 const int MATRIX_WIDTH = 8; 
const int MATRIX_HEIGHT = 8; 

Si copias un ejemplo de la biblioteca NeoMatrix, puede que utilice un pin o un tamaño diferente; siempre cámbialos para que coincidan con esta placa.

Brillo del texto

El brillo se controla normalmente con un valor entre 0 y 255, donde 0 es apagado y 255 es el brillo máximo. Un valor moderado suele ser suficiente:

// Overall matrix brightness (0–255) 
uint8_t matrixBrightness = 40; // comfortable indoor brightness // In 
setup(): 
matrix.setBrightness(matrixBrightness); 

Si usas el panel en un entorno brillante o por un corto período de tiempo, puedes aumentar este valor, pero evita subirlo demasiado si estás cerca de la pantalla.

Texto para desplazar

El mensaje real se almacena como una cadena. En el video, el texto de ejemplo esRobojaxPuedes cambiarlo a cualquier etiqueta corta o mensaje que desees:

 // Text to scroll on the 8×8 matrix const char scrollText[] = "Robojax";
 // change this to your message 

Ten en cuenta que esta es solo una matriz de 8×8, por lo que los mensajes muy largos tardarán más en desplazarse y pueden volverse difíciles de leer.

Color de texto (valores RGB)

El color del texto en movimiento se establece mediante componentes rojos, verdes y azules (0-255). Por ejemplo, el rojo puro es(255, 0, 0), verde puro es(0, 255, 0), y el azul puro es(0, 0, 255). En el boceto verás algo como:

 // Text color (R, G, B) uint8_t textRed = 255; // red component uint8_t textGreen = 0; // green component uint8_t textBlue = 0; // blue component 

Para cambiar el color:

• Amarillo:textRed = 255; textGreen = 255; textBlue = 0;
• Cian:textRed = 0; textGreen = 255; textBlue = 255;
• Blanco:textRed = 255; textGreen = 255; textBlue = 255;

El video también muestra cómo usar un selector de color en línea para encontrar los valores RGB y luego ingresarlos en el código.:contentReference[oaicite:1]{index=1}

Velocidad de desplazamiento (Retraso entre cuadros)

La velocidad de desplazamiento se controla mediante un valor de retraso en milisegundos entre cada paso de actualización. Un valor más pequeño hace que el texto se mueva más rápido; un valor más grande lo ralentiza. En el boceto, deberías encontrar una variable como:

// Delay between scroll steps (in milliseconds) int scrollDelayMs = 50; 
// smaller = faster, larger = slower 

Ejemplos:

• scrollDelayMs = 20;→ desplazamiento rápido.
• scrollDelayMs = 50;→ velocidad media (similar al video).
• scrollDelayMs = 100;o más → desplazamiento lento y fácil de leer.

Dentro de laloop(), este valor se usa en undelay(scrollDelayMs);llama después de cada redibujo de la posición del texto.

Dirección de desplazamiento (Opcional)

En el proyecto "desplazamiento de texto básico" generalmente desplazamos hacia la izquierda, pero es útil definir una variable de dirección simbólica para que puedas experimentar con otras direcciones más tarde (izquierda, derecha, arriba, abajo).

Un patrón común es:

 // Scroll direction selector // 0 = left, 1 = right, 2 = up, 3 = down 
int scrollDirection = 0; // default: scroll to the left 

El bucle principal luego verificascrollDirectiony mueve el texto en la dirección elegida. Para el Proyecto 2, puedes dejarlo en0(izquierda), pero si amplías el boceto más tarde puedes agregar condiciones como:

 if (scrollDirection == 0) { 
// move text left 
} else if (scrollDirection == 1) { 
// move text right 
} else if (scrollDirection == 2) { 
// move text up
 } else if (scrollDirection == 3) { 
// move text down 
}
 

Para este artículo solo documentamos la configuración. La implementación completa es parte del código cargado debajo del artículo.

Resumen

El Proyecto 2 convierte tu matriz de LED RGB ESP32-S3 en una pantalla de texto simple pero llamativa. Al editar solo unas pocas variables en la parte superior del código, puedes cambiar rápidamente:

• ¿Qué mensaje se muestra?scrollText).
• El color del textotextRed,textGreen,textBlue.
• El brillo de la matrizmatrixBrightness).
• La velocidad de desplazamientoscrollDelayMs).
• La dirección de desplazamientoscrollDirection, si decides usarlo).

El boceto completo de este proyecto está disponible al final de este artículo (cargado automáticamente por el sitio web). Para una configuración detallada paso a paso y una demostración en vivo del texto en movimiento, asegúrate de ver la sección correspondiente del video. Si te gusta el proyecto y quieres construirlo tú mismo, también puedes comprar el módulo de matriz de LED RGB ESP32-S3 a través de los enlaces de afiliados que se encuentran debajo del código.

Imágenes

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up

ESP32 S3 Matrix

ESP32 S3 Matrix pin out

ESP32-S3_RGB_8x8_matrix1

ESP32-S3_RGB_8x8_matrix-2

ESP32-S3-Mtrix - Alway Up