Constructor de interfaces personalizadas para pantallas TFT

Diseña la pantalla que tu ESP32 debería mostrar y luego llévate el código del controlador contigo.

Diseña una pantalla

Se ejecuta en el navegador. Cuenta gratuita, sin instalación.

Qué obtienes

Lopaka es un editor visual para interfaces de pantallas embebidas. Colocas rectángulos, arcos, texto y arte importado en un lienzo del tamaño de tu panel, y el panel de código escribe las llamadas de biblioteca correspondientes a medida que trabajas. No hay ningún tiempo de ejecución que enlazar ni ningún framework que adoptar: la salida es una función de dibujo simple que pegas en el sketch que ya tienes.

Para los paneles a color, los destinos son TFT_eSPI, M5, Lovyan, ArduinoGFX y AdafruitGFX Color. Los OLED monocromos, el papel electrónico, Flipper Zero, ESPHome, MicroPython, CircuitPython y LVGL tienen plataformas propias si un proyecto las necesita.

• Selección de color RGB completa, empaquetada en los valores RGB565 que espera la biblioteca
• Fuentes integradas Adafruit y GFX, además de subidas TrueType y BDF convertidas a GFX
• Una herramienta de arco que emite drawSmoothArc y drawArc, para indicadores y diales
• Imágenes como mapas de bits de 1 bit para drawBitmap o matrices RGB565 para pushImage
• Fotogramas de animación con auxiliares de reproducción generados
• Propiedades de las capas exportadas como variables, para que una lectura pueda cambiar en tiempo de ejecución

Tu controlador, tu biblioteca

Encuentra el controlador impreso en tu módulo, luego elige la plataforma de la misma fila y establece el lienzo en tu resolución.

Controlador de pantalla	Lienzo típico	Plataforma Lopaka
ST7789	240×240	TFT_eSPI, M5, Lovyan
ILI9341	240×320	TFT_eSPI, M5, Lovyan
ST7735	128×160	TFT_eSPI, M5, Lovyan
GC9A01	240×240	TFT_eSPI, M5, Lovyan
ILI9488	480×320	TFT_eSPI, M5, Lovyan
Paneles controlados por Arduino_GFX	320×240	ArduinoGFX
Paneles controlados por Adafruit GFX	320×240	AdafruitGFX Color
SSD1306, SH1106 (OLED monocromo)	128×64	U8g2

Lopaka se dirige a la biblioteca de dibujo, no al controlador. Elige la biblioteca contra la que tu sketch ya compila y establece el lienzo en la resolución que tu código usa después de setRotation(). Las definiciones del controlador, los pines, la frecuencia SPI y User_Setup.h permanecen en tu proyecto.

La guía de TFT_eSPI recorre esa configuración antes de dibujar el primer píxel.

Si una imagen importada tiene los colores incorrectos, usa la prueba de color y orden de bytes RGB565 antes de cambiar la configuración de tu panel.

Del diseño al firmware

1. Haz que la biblioteca de pantalla se comunique primero con tu panel, con un ejemplo estándar.
2. Crea un proyecto en la plataforma TFT_eSPI, M5, Lovyan y establece el lienzo en tu resolución.
3. Dibuja la pantalla: rectángulos, arcos, texto e imágenes importadas, organizados en capas.
4. Nombra las capas, porque los nombres se convierten en nombres de funciones, comentarios y nombres de matrices de mapas de bits.
5. Copia la función de dibujo generada en tu sketch y llámala después de tft.init().

Cómo se ve la salida

Una pantalla de 240×135 llamada Main, con un borde, una etiqueta, una lectura grande y una barra, exportada para TFT_eSPI.

void drawMain(void) {
    tft.fillScreen(0x0);
    // Panel
    tft.drawRect(0, 0, 240, 135, 0xFFFF);
    // Title
    tft.setTextColor(0xFFFF);
    tft.setTextSize(1);
    tft.drawString("CPU LOAD", 10, 12);
    // Reading
    tft.setTextColor(0x7E0);
    tft.setTextSize(3);
    tft.drawString("42%", 10, 40);
    // Bar
    tft.fillRect(10, 100, 101, 14, 0x7E0);

}

Cada línea empieza con tft., así que nombra tu objeto de pantalla tft, o aliásalo una vez en M5Stack con M5GFX& tft = M5.Display;.

Preguntas

¿Con qué controladores de pantalla funciona esto?

Con cualquier panel que tu biblioteca ya controle. Lopaka genera llamadas contra la API de la biblioteca, no contra un controlador, así que si TFT_eSPI, M5GFX o LovyanGFX hace funcionar tu módulo ST7789, ILI9341, ST7735, GC9A01 o ILI9488, el código generado también funciona en él. Primero demuestra que el panel funciona con un ejemplo estándar de la biblioteca.

¿Configura Lopaka TFT_eSPI por mí?

No. La selección del controlador, los pines, la frecuencia SPI y User_Setup.h son tuyos. Lopaka dibuja la imagen y emite llamadas de dibujo que asumen un objeto de pantalla funcional llamado tft.

¿Qué obtengo exactamente a cambio?

Una función de dibujo para la pantalla que diseñaste, con el nombre de la pantalla, además de las matrices de mapas de bits, las inclusiones de fuentes y los auxiliares de animación que necesita. Conservas tu propio setup() y loop() y llamas a la función desde ellos.

¿Puedo usar mis propias fuentes e imágenes?

Sí. Las fuentes TrueType y BDF se convierten a formato GFX al subirlas, y el arte importado se convierte en un mapa de bits de 1 bit o en una matriz RGB565 según el modo de color de la capa. Los encabezados de fuentes se descargan desde los Ajustes de código y se sitúan junto a tu sketch.

¿Pueden cambiar los valores en tiempo de ejecución?

Sí. Marca una propiedad de una capa como variable y Lopaka la declara en lugar de codificar el literal, así que una temperatura o un porcentaje de batería es una variable que tu firmware asigna y la llamada de dibujo lee.

¿Es gratis?

Sí. Diseñar una pantalla y copiar el código generado para cada biblioteca compatible forman parte del plan Basic gratuito. Plus agrega límites más altos, importación de fuentes personalizadas, las bibliotecas completas de íconos y animaciones, y la exportación de archivos, pero nada de esta página lo necesita.

Crea tu pantalla

Crea una cuenta gratuita y el editor se abre en un lienzo en blanco con el tamaño de tu pantalla.

Diseña una pantalla