Conversor de imagens U8g2
Transforme um PNG, BMP ou GIF em um array XBMP de 1 bit para um SSD1306 ou qualquer outro display monocromático que o U8g2 comande, e veja-o em uma tela simulada antes de gravar qualquer coisa.
Roda no navegador. Conta gratuita, sem instalação.
O que o conversor faz
O Lopaka é um editor gráfico para displays embarcados. Importe uma imagem em um projeto U8g2 e ela vira uma camada de bitmap de um bit em uma tela de desenho do tamanho do seu display, onde você pode movê-la, cortá-la, redesenhar pixels individuais com a ferramenta Pintar e colocar textos e formas ao redor dela. O painel de código acompanha o ritmo: ele declara o array e emite a chamada drawXBMP() para onde quer que a camada esteja no momento.
É essa a parte que um conversor simples deixa para você. Obter os bytes é uma etapa; saber que o logo está 4 pixels baixo demais, ou que o rótulo colide com ele neste tamanho de fonte, normalmente exige compilar e gravar. Aqui, exige arrastar a camada.
Como um bitmap monocromático realmente funciona
Um bit por pixel, não um byte
Um painel SSD1306 tem um bit de estado por pixel: aceso ou escuro. Não há cinza nem cor, então um bitmap para ele também armazena um bit por pixel, oito pixels compactados em cada byte, linha após linha. Uma tela de 128x64 tem 1.024 bytes nessa forma. Armazene a mesma imagem como um byte por pixel e ela vira 8.192 bytes, o que, em uma placa AVR clássica, é mais RAM do que você tem.
XBM, XBMP e de onde vem o PROGMEM
XBM é esse formato compactado de um bit, e é o que o U8g2 espera de drawXBM(). XBMP são os mesmos dados declarados na flash, e não na RAM: com Declarar como PROGMEM habilitado, o Lopaka marca o array como U8X8_PROGMEM e chama drawXBMP(), que o lê da memória de programa. Em um destino Arduino, geralmente é isso que você quer, porque bitmaps são constantes e a RAM é o recurso escasso. O modelo ESP-IDF emite, em vez disso, um array uint8_t simples e drawXBM().
Limiar, dithering e inversão
Uma imagem de origem geralmente tem 256 tons por canal e o display tem dois, então algo precisa decidir quais pixels sobrevivem. Um limiar simples envia tudo acima de um ponto de corte para branco e tudo abaixo para preto, o que é certo para logos e line art com bordas duras. O dithering, em vez disso, espalha o erro de arredondamento para os pixels vizinhos, para que um degradê seja lido como textura, em vez de uma faixa. Brilho e contraste movem o ponto de corte antes que qualquer um dos dois aconteça, e Escala de cinza primeiro ajuda quando uma imagem colorida tem tons de brilho percebido semelhante, como vermelho sobre branco.
| Modo de dithering | Quando usar |
|---|---|
| Floyd-Steinberg | Fotos detalhadas e degradês suaves |
| Atkinson | Um dither mais claro e de alto contraste, que funciona bem em displays pequenos |
| Bayer 8x8 | Um padrão regular de pixels com textura previsível |
| Sem dithering | Line art limpa, logos e preenchimentos sólidos |
Existem dois controles de inversão separados porque há dois problemas separados. Inverter paleta troca preto e branco antes do dithering, para quando o conversor está tratando seu fundo como assunto. Inverter resultado inverte o bitmap finalizado, para quando a pré-visualização está certa, mas o painel o renderiza ao contrário.
Displays e placas
O U8g2 é uma biblioteca gráfica monocromática que cobre uma longa lista de controladores OLED e LCD, e o Lopaka mira em sua API gráfica. Os conhecidos são SSD1306, SH1106 e SSD1309, que são a maior parte do que vem em um módulo OLED pequeno I2C ou SPI. Confira a lista de construtores upstream para confirmar seu painel exato.
O Lopaka não detecta nem comanda hardware. Ele gera o código de desenho; você escolhe o construtor U8g2 que combina com seu controlador, resolução, barramento e pinos, depois chama begin() e roda o loop de atualização por conta própria. Defina o tamanho de tela do Lopaka para a mesma resolução lógica desse construtor e as coordenadas da tela de desenho vão combinar com o painel.
Convertendo uma imagem
- Crie um projeto, selecione U8g2 como plataforma e defina o tamanho da tela para a resolução do seu display.
- Abra a ferramenta Imagem e insira um PNG, BMP ou GIF, ou cole um array de bytes XBMP existente.
- Corte e redimensione, depois defina brilho, contraste e dithering enquanto a pré-visualização é atualizada.
- Importe o bitmap, posicione-o na tela de desenho e adicione textos ou formas ao redor dele.
- Copie o código-fonte gerado, que declara o array e chama drawXBMP naquela posição.
Se o bitmap ficar em branco ou deslocado no dispositivo, confira os argumentos de drawXBMP, o preenchimento de linhas e o loop de buffer.
Como é a saída
Um ícone de 16x16 colocado em x 8, y 8, com um rótulo ao lado, em uma tela chamada Status. Este é o modelo Arduino (Cpp), então o array é declarado como PROGMEM e desenhado com drawXBMP.
static const unsigned char image_wifi_bits[] U8X8_PROGMEM = {0x00,0x00,0x00,0x00,0xf8,0x1f,0xfc,0x3f,0x0e,0x70,0x03,0xc0,0x00,0x00,0xf0,0x0f,0xf8,0x1f,0x1c,0x38,0x06,0x60,0x00,0x00,0xc0,0x03,0xe0,0x07,0xc0,0x03,0x00,0x00};
void drawStatus(void) {
u8g2.setFontMode(1);
u8g2.setBitmapMode(1);
// wifi
u8g2.drawXBMP(8, 8, 16, 16, image_wifi_bits);
// label
u8g2.setFont(u8g2_font_6x10_tr);
u8g2.drawStr(32, 21, "Connected");
}A mesma tela exportada com o modelo ESP-IDF (C). Os bytes do bitmap são idênticos; só a declaração e a API ao redor deles mudam.
static const uint8_t image_wifi_bits[] = {0x00,0x00,0x00,0x00,0xf8,0x1f,0xfc,0x3f,0x0e,0x70,0x03,0xc0,0x00,0x00,0xf0,0x0f,0xf8,0x1f,0x1c,0x38,0x06,0x60,0x00,0x00,0xc0,0x03,0xe0,0x07,0xc0,0x03,0x00,0x00};
void drawStatus(void) {
u8g2_ClearBuffer(&u8g2);
u8g2_SetBitmapMode(&u8g2, 1);
u8g2_SetFontMode(&u8g2, 1);
// wifi
u8g2_DrawXBM(&u8g2, 8, 8, 16, 16, image_wifi_bits);
// label
u8g2_SetFont(&u8g2, u8g2_font_6x10_tr);
u8g2_DrawStr(&u8g2, 32, 21, "Connected");
u8g2_SendBuffer(&u8g2);
}A fonte nos dois exemplos é um dos símbolos integrados do U8g2, então não precisa de cabeçalho baixado. Uma fonte fora dessa lista é exportada como um cabeçalho que você baixa junto com o sketch.
Perguntas
Como converto uma imagem em um bitmap U8g2?
Importe a imagem em um projeto U8g2. O Lopaka a converte em um array XBM de 1 bit, mostra-a em uma tela de desenho do tamanho do seu display e gera a declaração mais a chamada drawXBMP que a coloca na posição para onde você a arrastou.
O que é XBMP e por que o U8g2 o usa?
O XBM compacta um pixel em um bit, oito pixels por byte, linha a linha. Um OLED monocromático tem exatamente um bit de estado por pixel, então o array é uma cópia direta do que o painel mostra. XBMP são os mesmos dados declarados na flash com U8X8_PROGMEM, e é por isso que builds Arduino o combinam com drawXBMP em vez de drawXBM.
Com quais displays isso funciona?
Qualquer display monocromático que o próprio U8g2 suporte, incluindo OLEDs SSD1306, SH1106 e SSD1309. O Lopaka gera o código de desenho; você escolhe o construtor U8g2 para seu controlador, barramento e pinos, e chama begin() e o loop de atualização por conta própria.
O que o dithering faz com uma fotografia?
Um display monocromático não tem cinza, então cada pixel precisa acabar preto ou branco. O dithering espalha o erro pelos pixels vizinhos, para que um degradê seja lido como textura em vez de uma borda dura. Floyd-Steinberg e Atkinson combinam com fotos; logos e line art geralmente ficam mais limpos com o dithering desligado.
Posso usar meus arrays de bitmap existentes?
Sim. O assistente de importação aceita um array de bytes XBMP bruto, colado de um firmware existente. Informe largura e altura, ative Trocar bytes se a pré-visualização parecer embaralhada, e ele vira uma camada editável que você pode redesenhar pixel a pixel com a ferramenta Pintar.
Ele gera código ESP-IDF e também Arduino?
Sim. A plataforma U8g2 tem dois modelos: Arduino (Cpp), que emite arrays U8X8_PROGMEM e u8g2.drawXBMP(), e ESP-IDF (C), que emite arrays uint8_t simples e u8g2_DrawXBM() contra a interface C. Alterne entre eles nas Configurações de código.
É grátis?
Sim. Converter imagens e gerar código U8g2 fazem parte do plano Basic gratuito, junto com a biblioteca de ícones da comunidade e alguns projetos na nuvem. 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 com sua própria imagem
Crie uma conta gratuita e o editor abre em uma tela em branco, no tamanho do seu display.