Construtor de UI para display TFT personalizado

Projete a tela que seu ESP32 deveria mostrar e, depois, leve o código do driver com você.

Projetar uma tela

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

O que você recebe

O Lopaka é um editor visual para UIs de displays embarcados. Você coloca retângulos, arcos, textos e arte importada em uma tela de desenho do tamanho do seu painel, e o painel de código escreve os comandos correspondentes da biblioteca à medida que você trabalha. Não há runtime para vincular nem framework para adotar: a saída é uma função de desenho simples que você cola no sketch que já tem.

Para painéis coloridos, os destinos são TFT_eSPI, M5, Lovyan, ArduinoGFX e AdafruitGFX Color. OLEDs monocromáticos, papel eletrônico, Flipper Zero, ESPHome, MicroPython, CircuitPython e LVGL têm suas próprias plataformas, se um projeto precisar delas.

• Escolha de cores RGB completa, compactadas nos valores RGB565 que a biblioteca espera
• Fontes integradas Adafruit e GFX, além de envios TrueType e BDF convertidos para GFX
• Uma ferramenta Arco que emite drawSmoothArc e drawArc, para medidores e mostradores
• Imagens como bitmaps de 1 bit para drawBitmap ou arrays RGB565 para pushImage
• Quadros de animação com auxiliares de reprodução gerados
• Propriedades de camada exportadas como variáveis, para que uma leitura possa mudar em tempo de execução

Seu controlador, sua biblioteca

Encontre o controlador impresso no seu módulo, depois escolha a plataforma na mesma linha e defina a tela de desenho para sua resolução.

Controlador de display	Tela de desenho típica	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
Painéis controlados por Arduino_GFX	320×240	ArduinoGFX
Painéis controlados por Adafruit GFX	320×240	AdafruitGFX Color
SSD1306, SH1106 (OLED monocromático)	128×64	U8g2

O Lopaka mira na biblioteca de desenho, não no controlador. Escolha a biblioteca contra a qual seu sketch já compila e defina a tela de desenho para a resolução que seu código usa depois de setRotation(). Definições de driver, pinos, frequência SPI e User_Setup.h ficam no seu projeto.

O guia TFT_eSPI percorre essa configuração antes de o primeiro pixel ser desenhado.

Se uma imagem importada tiver as cores erradas, use o teste de cores RGB565 e ordem de bytes antes de mudar a configuração do seu painel.

Do design ao firmware

1. Faça a biblioteca de display falar com seu painel primeiro, com um exemplo padrão.
2. Crie um projeto na plataforma TFT_eSPI, M5, Lovyan e defina a tela de desenho para sua resolução.
3. Desenhe a tela: retângulos, arcos, textos e imagens importadas, organizados em camadas.
4. Dê nome às camadas, porque os nomes viram nomes de funções, comentários e nomes de arrays de bitmap.
5. Copie a função de desenho gerada para o seu sketch e chame-a depois de tft.init().

Como é a saída

Uma tela de 240×135 chamada Main, com borda, rótulo, uma leitura grande e uma 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 linha começa com tft., então chame seu objeto de display de tft ou crie um alias uma vez no M5Stack com M5GFX& tft = M5.Display;.

Perguntas

Com quais controladores de display isso funciona?

Qualquer painel que sua biblioteca já comande. O Lopaka gera chamadas contra a API da biblioteca, não contra um controlador, então, se TFT_eSPI, M5GFX ou LovyanGFX rodar seu módulo ST7789, ILI9341, ST7735, GC9A01 ou ILI9488, o código gerado também roda nele. Comprove que o painel funciona primeiro com um exemplo padrão da biblioteca.

O Lopaka configura o TFT_eSPI para mim?

Não. Seleção de driver, pinos, frequência SPI e User_Setup.h são seus. O Lopaka desenha a imagem e emite comandos de desenho que pressupõem um objeto de display funcional chamado tft.

O que exatamente eu recebo de volta?

Uma função de desenho para a tela que você projetou, com o nome da tela, além dos arrays de bitmap, includes de fontes e auxiliares de animação de que ela precisa. Você mantém seu próprio setup() e loop() e chama a função a partir deles.

Posso usar minhas próprias fontes e imagens?

Sim. Fontes TrueType e BDF são convertidas para o formato GFX ao enviar, e a arte importada vira um bitmap de 1 bit ou um array RGB565, dependendo do modo de cor da camada. Os cabeçalhos de fonte são baixados das Configurações de código e ficam ao lado do seu sketch.

Os valores podem mudar em tempo de execução?

Sim. Marque uma propriedade da camada como variável e o Lopaka a declara em vez de codificar o literal, então uma temperatura ou uma porcentagem de bateria é uma variável que seu firmware atribui e o comando de desenho lê.

É grátis?

Sim. Projetar uma tela e copiar o código gerado para cada biblioteca compatível fazem parte do plano Basic gratuito. O Plus adiciona limites maiores, importação de fontes personalizadas, as bibliotecas completas de ícones e animações e exportação de arquivos, mas nada nesta página precisa dele.

Crie sua tela

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

Projetar uma tela