🛠 Affichage dynamique avec l'écran E-Ink

M5Stack M5Paper · intermediaire · Apprenez à piloter l'écran E-Ink 4,7 pouces du M5Paper pour afficher des images en niveaux de gris et gérer le rafraîchissement.

Objetivos

Este tutorial le guía en el uso avanzado de la pantalla táctil E-Ink de 4,7 pulgadas (960x540 píxeles) del M5Paper. A diferencia de las pantallas LCD clásicas, la tecnología E-Ink conserva la imagen sin consumo de energía una vez mostrada. Configuraremos el controlador IT8951 para dibujar formas geométricas y mostrar texto en 16 niveles de gris, aprovechando la potencia del microcontrolador ESP32-D0WDQ6-V3.

Material Necesario

Pasos

Abra el IDE de Arduino. Vaya a Gestor de Bibliotecas, busque "M5EPD" e instálela. Esta biblioteca es esencial para comunicarse con el controlador de pantalla IT8951 y el sensor táctil capacitativo GT911.

  1. Preparación del Entorno

Cree un nuevo boceto. En el editor, añada la inclusión de la biblioteca al principio del archivo: ``cpp #include <M5EPD.h> ` En la función setup(), inicialice el sistema. El M5Paper requiere una inicialización específica para activar la memoria PSRAM y el bus de datos de la pantalla. `cpp void setup() { M5.begin(true, true, true); M5.EPD.SetRotation(0); M5.EPD.Clear(true); } ` El parámetro Clear(true)` fuerza un refresco completo para borrar los residuos de visualización anteriores, un paso crucial con la tecnología E-Ink.

  1. Configuración del Proyecto

La pantalla soporta 16 niveles de gris (0 a 15). Utilice primitivas de dibujo para crear una interfaz visual. Por ejemplo, para dibujar un rectángulo gris medio: ``cpp void loop() { M5.EPD.Clear(false); // Refresco parcial rápido M5.EPD.DrawRect(100, 100, 400, 300, 8); // Gris medio M5.EPD.DrawLine(100, 100, 500, 400, 15); // Negro M5.EPD.DrawCircle(480, 270, 50, 2); // Gris claro M5.EPD.Refresh(); delay(2000); } ` Tenga en cuenta que la llamada a Refresh()` es obligatoria para enviar los datos del búfer a la pantalla física.

  1. Dibujo de Formas Gráficas

Para mostrar texto, puede cargar una fuente o usar las fuentes por defecto. Asegúrese de que el área de texto sea legible en la resolución 960x540. ``cpp M5.EPD.WriteCenter(480, 50, "M5Paper E-Ink", 15); `` El color 15 corresponde al negro para una máxima legibilidad.

  1. Visualización de Texto

Verificación

Una vez cargado el código, observe la pantalla. Debería ver aparecer un rectángulo, una línea diagonal y un círculo, seguidos de texto centrado. Cada ciclo de 2 segundos debe mostrar un refresco visual. Si la pantalla permanece blanca, verifique que M5.begin() se llame correctamente. Si las formas están distorsionadas, revise la función SetRotation(), que debe coincidir con la orientación física del dispositivo.

Para Ir Más Allá

Explore las funciones de refresco parcial para ahorrar energía durante actualizaciones frecuentes de pequeños elementos. Integre la biblioteca de gestión táctil para crear una interfaz interactiva donde el tacto modifique las formas mostradas, explotando así el sensor capacitativo multi-touch GT911.

Otros tutoriales para esta placa

Ejemplos de código para esta placa

← Volver a la ficha 🛠 Todos los tutoriales