Construtor de GUI Arduino

Desenhe a tela para o seu OLED de 128x64 no navegador e, depois, copie o código U8g2 ou AdafruitGFX que a desenha.

Projetar uma tela

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

O que ele faz

O Lopaka é um editor visual para código de displays embarcados. Você organiza textos, retângulos, linhas, círculos e imagens importadas em uma tela de desenho exatamente do tamanho do seu painel, e o editor escreve os comandos de desenho à medida que você trabalha. Nada é adivinhado a partir de uma captura de tela: cada camada que você coloca vira uma chamada de função no sketch gerado.

O caminho usual em um projeto Arduino é escrever chamadas U8g2 ou AdafruitGFX à mão, gravar na placa, olhar para o painel de olhos apertados, ajustar uma coordenada e gravar de novo. A pré-visualização aqui renderiza do jeito que um display de 1 bit faz, então o trabalho de alinhamento acontece no navegador e a placa só recebe a versão que já parece certa.

Projetando dentro de um orçamento de memória AVR

Um Uno tem 32 KB de flash e 2 KB de SRAM, e uma tela é uma das formas mais fáceis de gastar os dois. O Lopaka não compila seu sketch, então não pode dizer quanto uma build custa, mas as contas abaixo são fixas e vale a pena conhecê-las antes de desenhar.

Um bitmap de tela cheia de 128x64 custa 1024 bytes

Um bit por pixel, então 128 x 64 / 8. Em um Uno, é um terço do orçamento de 32 KB de flash gasto em uma única imagem, que geralmente é o momento em que um layout desenhado supera uma captura de tela convertida.

Um ícone de 16x16 custa 32 bytes

Pequeno o bastante para que uma tela feita de ícones, textos e primitivas fique muito mais barata do que a mesma tela enviada como um único bitmap.

Bitmaps são declarados como PROGMEM

Os arrays gerados são marcados como PROGMEM para U8g2 e Adafruit GFX, então vivem na flash em vez de ocupar os 2 KB de SRAM que um Uno tem para todo o resto.

Textos e formas não custam array nenhum

Um retângulo, uma linha ou uma string é uma chamada de função. Só imagens e fontes adicionam dados, e é por isso que um layout desenhado a partir de primitivas é o jeito barato de preencher uma tela.

Antes de importar um logo grande, calcule o tamanho do array da imagem e escolha o formato que sua biblioteca de desenho espera.

Displays e bibliotecas

Escolha a biblioteca que seu sketch já inclui e o editor gera a sintaxe dela. Os tamanhos vão de 32x8 a 480x320, com largura e altura personalizadas para qualquer coisa que não esteja na lista.

Display	Controladores comuns	Destino de exportação
OLED monocromático	SSD1306, SH1106, SSD1309	U8g2 ou AdafruitGFX Mono
LCD monocromático	PCD8544 e destinos U8g2 similares	U8g2
TFT colorido em placa de 32 bits	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX ou AdafruitGFX Color
Papel eletrônico	Painéis controlados via GxEPD2	GxEPD2

Lista completa de destinos de exportação: U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.

Criando uma tela

1. Abra o editor, escolha U8g2 ou Adafruit GFX 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 leia a pré-visualização, que renderiza do jeito que um painel de 1 bit vai exibir.
4. Copie a função de desenho gerada para o seu sketch no Arduino IDE e grave.

Como é o código gerado

Uma leitura de sensor em um OLED monocromático de 128x64, exportada para Adafruit GFX. O termômetro é a única camada que custa memória: 32 bytes de PROGMEM para um ícone de 16x16. A borda, a divisória e as duas strings são chamadas de função e não adicionam nada.

static const unsigned char PROGMEM image_thermometer_bits[] = {0x07,0x80,0x08,0x40,0x0b,0x40,0x0b,0x4e,0x0b,0x50,0x0b,0x50,0x0b,0x4e,0x0b,0x40,0x0b,0x40,0x13,0x20,0x17,0xa0,0x17,0xa0,0x17,0xa0,0x08,0x40,0x07,0x80,0x00,0x00};

void draw(void) {
    display.clearDisplay();
    // frame
    display.drawRect(0, 0, 128, 64, 1);
    // title
    display.setTextColor(1);
    display.setTextWrap(false);
    display.setCursor(6, 14);
    display.print("SENSOR NODE");
    // divider
    display.drawLine(4, 20, 123, 20, 1);
    // reading
    display.setCursor(32, 46);
    display.print("21.5 C");
    // thermometer
    display.drawBitmap(8, 32, image_thermometer_bits, 16, 16, 1);
    display.display();
}

Perguntas

O que o construtor de GUI Arduino 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 em PROGMEM, includes de fontes e quaisquer variáveis que você marcou. Você cola no seu sketch e chama. O Lopaka nunca compila o sketch, grava na placa nem fala com ela pela serial.

Para quais bibliotecas de display posso exportar?

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

O código gerado vai caber em um Arduino Uno?

Isso depende do que você desenhar, e o editor mostra as partes que custam algo. Textos, linhas e retângulos são chamadas de função que não adicionam dados. Uma imagem de 1 bit adiciona largura x altura / 8 bytes, então um ícone de 16x16 tem 32 bytes e uma tela cheia de 128x64 tem 1024. Os bitmaps são declarados como PROGMEM, então ficam na flash em vez dos 2 KB de SRAM.

Funciona com o Arduino IDE?

Sim, porque a saída é C++ comum. Copie a função gerada para o seu sketch, ao lado da configuração U8g2 ou Adafruit GFX que você já tem, e compile do jeito que compila qualquer outra coisa. Não há plugin para instalar nem etapa de build nossa no caminho.

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

O menu suspenso de tamanhos cobre os painéis comuns de 32x8 a 480x320, incluindo o OLED de 128x64 que a maioria dos projetos Arduino usa, e qualquer coisa que não estiver na lista pode ser inserida como largura e altura personalizadas.

E quanto às fontes?

Projetos U8g2 usam a biblioteca de fontes BDF, e projetos Adafruit GFX usam as fontes Adafruit e GFX. O editor renderiza os glifos reais, então o texto que você posiciona tem a largura que terá no painel, em vez de uma aproximação que você só descobre depois de gravar.

É 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 e alguns projetos na nuvem para guardar seu trabalho. 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.

Experimente no seu próprio display

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

Projetar uma tela