Constructor de GUI de ESP32

Dibuja la interfaz para una pantalla ESP32 en el navegador y lleva el código de dibujo generado directamente a tu sketch.

Empieza a diseñar

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

Qué hace el constructor

Diseñar la interfaz de un LCD ESP32 a mano significa adivinar coordenadas, recompilar, entrecerrar los ojos ante el panel y ajustar un número dos píxeles. Lopaka reemplaza ese bucle con un lienzo del tamaño de tu pantalla. Colocas texto, rectángulos, líneas, círculos e imágenes importadas donde quieres, y el código generado se actualiza a medida que trabajas.

La vista previa es una pantalla simulada, no una aproximación en un monitor de escritorio: una fuente de 1 bit en un OLED de 128x64 muestra los píxeles que realmente encenderá, y un color RGB565 en un TFT de 320x240 es el valor que recibe tu placa. Nada se flashea desde el navegador. Lopaka produce código fuente, y el sketch sigue siendo tuyo.

Pantallas y bibliotecas

Lopaka se dirige a la biblioteca de dibujo, no a la placa, así que cualquier módulo ESP32 que ejecute una de estas bibliotecas está cubierto. Elige la fila que coincida con el panel que conectaste.

Pantalla	Controladores típicos	Biblioteca de destino
OLED y LCD monocromos	SSD1306, SH1106, SSD1309	U8g2 o AdafruitGFX Mono
TFT a color	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX o AdafruitGFX Color
Papel electrónico	Paneles controlados mediante GxEPD2	GxEPD2
Cualquier pantalla conectada a un nodo de hogar inteligente	Lo que controle el componente de pantalla de ESPHome	ESPHome
Cualquier pantalla en una placa MicroPython o CircuitPython	Destinos framebuf y displayio	MicroPython o CircuitPython

Flipper Zero y LVGL también son compatibles, y el desplegable de tamaños va de 32x8 hasta 480x320 con una opción personalizada para un panel que no esté en la lista. Cambiar la biblioteca en un diseño existente conserva el diseño y reasigna los colores al nuevo modelo.

Diseñar una pantalla ESP32

1. Abre el editor, elige la biblioteca de destino y establece el tamaño de pantalla que indica tu panel.
2. Dibuja la pantalla: texto, rectángulos, líneas, círculos e imágenes importadas en un lienzo del tamaño de la pantalla real.
3. Ajusta las capas píxel a píxel y comprueba la vista previa, que se renderiza como lo hará el panel.
4. Copia la función de dibujo generada en tu sketch y flasheala.

Cómo se ve la salida

Una pantalla de sensor en un TFT de 240x320, exportada para TFT_eSPI. Los nombres de las capas se convierten en los comentarios, así que la función generada se lee como el diseño.

void draw(void) {
    tft.fillScreen(0x0);
    // header
    tft.fillRect(0, 0, 240, 28, 0x1B7D);
    // room
    tft.setTextColor(0xFFFF);
    tft.setTextSize(1);
    tft.drawString("LIVING ROOM", 8, 20);
    // temperature
    tft.setTextSize(4);
    tft.drawString("21.4", 8, 84);
    // humidity
    tft.setTextColor(0x8CB3);
    tft.setTextSize(1);
    tft.drawString("HUMIDITY 48%", 8, 116);
    // divider
    tft.drawLine(8, 130, 232, 130, 0x8CB3);
    // status
    tft.drawRoundRect(8, 144, 224, 40, 4, 0x3DCA);

}

Preguntas

¿Qué produce realmente el constructor de GUI de ESP32?

Una función de dibujo con la sintaxis de la biblioteca que elegiste, además de las declaraciones que necesita: matrices de mapas de bits, inclusiones de fuentes y cualquier variable que hayas marcado. La pegas en tu sketch y la llamas. Lopaka nunca flashea la placa ni se comunica con ella por el puerto serie.

¿A qué bibliotecas de pantalla puedo exportar?

Lopaka genera código fuente para U8g2, TFT_eSPI, AdafruitGFX, ArduinoGFX, ESPHome, GxEPD2, Flipper Zero, MicroPython, CircuitPython, LVGL.

¿Funciona tanto para un OLED monocromo como para un TFT a color?

Sí. Elige U8g2 o AdafruitGFX Mono para un OLED SSD1306 o SH1106 y el lienzo se vuelve de 1 bit; elige TFT_eSPI, ArduinoGFX o AdafruitGFX Color para un panel ILI9341 o ST7789 y obtienes RGB565. Cambiar la plataforma en un diseño existente conserva la geometría de las capas y reasigna los colores.

¿Puedo establecer la resolución de mi propio panel?

El desplegable de tamaños cubre los paneles comunes de 32x8 a 480x320, y cualquier cosa que no esté en la lista se puede ingresar como ancho y alto personalizados.

¿Qué pasa con las fuentes?

Cada plataforma ofrece las fuentes que su biblioteca entiende: la biblioteca BDF para U8g2, las fuentes Adafruit y GFX para TFT_eSPI, ArduinoGFX y Adafruit GFX. Los archivos TrueType y BDF que subas se convierten al formato que necesita el destino.

¿Es gratis?

Sí. Diseñar una pantalla y generar código para cada biblioteca compatible forman parte del plan Basic gratuito, junto con las bibliotecas comunitarias de fuentes e íconos.

Crea tu interfaz ESP32

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

Empieza a diseñar