Construtor de GUI ESP32

Desenhe a interface para um display ESP32 no navegador e leve o código de desenho gerado direto para o seu sketch.

Começar a projetar

Roda no navegador. Conta gratuita, sem instalação.

O que o construtor faz

Organizar uma UI LCD para ESP32 à mão significa chutar coordenadas, recompilar, olhar para o painel de olhos apertados e ajustar um número em dois pixels. O Lopaka substitui esse ciclo por uma tela de desenho do tamanho do seu display. Você coloca textos, retângulos, linhas, círculos e imagens importadas onde quiser, e o código gerado é atualizado à medida que você trabalha.

A pré-visualização é uma tela simulada, não uma aproximação em um monitor de desktop: uma fonte de 1 bit em um OLED de 128x64 mostra os pixels que ela realmente vai acender, e uma cor RGB565 em um TFT de 320x240 é o valor que sua placa recebe. Nada é gravado a partir do navegador. O Lopaka produz código-fonte, e o sketch continua sendo seu.

Displays e bibliotecas

O Lopaka mira na biblioteca de desenho, não na placa, então qualquer módulo ESP32 que rode uma dessas bibliotecas está coberto. Escolha a linha que combina com o painel que você ligou.

Display	Controladores típicos	Biblioteca de destino
OLED e LCD monocromáticos	SSD1306, SH1106, SSD1309	U8g2 ou AdafruitGFX Mono
TFT colorido	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX ou AdafruitGFX Color
Papel eletrônico	Painéis controlados via GxEPD2	GxEPD2
Qualquer display ligado a um nó de casa inteligente	O que o componente de display do ESPHome comandar	ESPHome
Qualquer display em placa MicroPython ou CircuitPython	destinos framebuf e displayio	MicroPython ou CircuitPython

Flipper Zero e LVGL também são compatíveis, e o menu suspenso de tamanhos vai de 32x8 a 480x320, com opção personalizada para um painel que não estiver listado. Trocar a biblioteca em um design existente mantém o layout e remapeia as cores para o novo modelo.

Projetando uma tela ESP32

1. Abra o editor, escolha a biblioteca de destino e defina o tamanho do display que seu painel informa.
2. Desenhe a tela: textos, retângulos, linhas, círculos e imagens importadas em uma tela de desenho do tamanho do display real.
3. Ajuste as camadas pixel a pixel e confira a pré-visualização, que renderiza do jeito que o painel vai exibir.
4. Copie a função de desenho gerada para o seu sketch e grave.

Como é a saída

Uma tela de sensor em um TFT de 240x320, exportada para TFT_eSPI. Os nomes das camadas viram os comentários, então a função gerada se lê como o design.

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

}

Perguntas

O que o construtor de GUI ESP32 realmente produz?

Uma função de desenho na sintaxe da biblioteca que você escolheu, além das declarações de que ela precisa: arrays de bitmap, includes de fontes e quaisquer variáveis que você marcou. Você cola no seu sketch e chama. O Lopaka nunca grava na placa nem fala com ela pela serial.

Para quais bibliotecas de display posso exportar?

O Lopaka gera código-fonte para U8g2, TFT_eSPI, AdafruitGFX, ArduinoGFX, ESPHome, GxEPD2, Flipper Zero, MicroPython, CircuitPython, LVGL.

Funciona para um OLED monocromático e para um TFT colorido?

Sim. Escolha U8g2 ou AdafruitGFX Mono para um OLED SSD1306 ou SH1106 e a tela de desenho vira 1 bit; escolha TFT_eSPI, ArduinoGFX ou AdafruitGFX Color para um painel ILI9341 ou ST7789 e você obtém RGB565. Trocar a plataforma em um design existente mantém a geometria das camadas e remapeia as cores.

Posso definir a resolução do meu próprio painel?

O menu suspenso de tamanhos cobre os painéis comuns de 32x8 a 480x320, e qualquer coisa que não estiver na lista pode ser inserida como largura e altura personalizadas.

E quanto às fontes?

Cada plataforma oferece as fontes que sua biblioteca entende: a biblioteca BDF para U8g2, fontes Adafruit e GFX para TFT_eSPI, ArduinoGFX e Adafruit GFX. Arquivos TrueType e BDF que você enviar são convertidos para o formato de que o destino precisa.

É grátis?

Sim. Projetar uma tela e gerar código para cada biblioteca compatível fazem parte do plano Basic gratuito, junto com as bibliotecas de fontes e ícones da comunidade.

Crie sua interface ESP32

Crie uma conta gratuita e o editor abre em uma tela em branco, no tamanho do seu display.

Começar a projetar