Imagem para array C no Arduino e no ESP32
Para converter uma imagem em um array C, redimensione ela para as dimensões que você precisa no display, escolha um formato de pixel que a sua biblioteca de desenho aceite e exporte os dados de pixel junto com a chamada de desenho dela. Para um OLED monocromático, isso geralmente significa um bitmap de 1 bit. Para um TFT colorido, RGB565 é uma escolha comum.
A extensão do arquivo do array diz muito pouco para você. Dois cabeçalhos podem conter números hexadecimais e ainda assim precisar de funções de desenho completamente diferentes.
Escolha a biblioteca de desenho antes de converter
Comece pela biblioteca que já roda na sua placa. Uma conversão de PNG para array C para U8g2 não deve produzir a mesma saída que uma para LVGL.
| Destino do firmware | Recurso a preparar | Detalhe de integração |
|---|---|---|
| U8g2 | Bitmap XBM | A largura e a altura acompanham o array de bytes |
| TFT_eSPI | Pixels RGB565 ou um bitmap monocromático | Use a função de desenho correspondente |
| Adafruit GFX | Pixels RGB565 ou um bitmap monocromático | Combine o empacotamento do bitmap com a API |
| LVGL 9 | Descritor de imagem e dados de pixel | Um array de pixels puro não é o objeto de imagem completo |
A referência de plataformas do Lopaka lista os formatos de saída. Selecione a plataforma primeiro, para o editor exportar o recurso apropriado.
Converta um PNG ou BMP no Lopaka
- Abra o Lopaka e escolha a plataforma de destino e as dimensões da tela.
- Abra a ferramenta Imagem e envie o gráfico de origem.
- Redimensione ou recorte para o tamanho que a imagem vai ocupar no dispositivo. Um ícone de status de 24 pixels não precisa de um bitmap de origem em tela cheia.
- Escolha monocromático ou RGB quando a plataforma oferecer os dois. Para arte de linha, inspecione o resultado com o dithering desativado; para uma fotografia, compare os modos de dithering disponíveis.
- Coloque o recurso na tela e depois copie os dados gerados e o código de desenho juntos.
O guia de importação de imagens cobre os controles. Se você só precisa de conversão para OLED monocromático, siga o passo a passo mais curto do conversor de imagens U8g2.
Qual vai ser o tamanho do array?
Para um bitmap de 1 bit sem compressão e empacotado por linha, arredonde cada linha para um byte inteiro:
row bytes = (width + 7) / 8, using integer division
bitmap bytes = row bytes * height
RGB565 bytes = width * height * 2Esses cálculos descrevem os payloads de pixel. Eles excluem descritores, alinhamento, paletas e qualquer buffer extra em tempo de execução.
| Dimensões | 1 bit empacotado por linha | RGB565 |
|---|---|---|
| 24 × 24 | 72 bytes | 1.152 bytes |
| 48 × 48 | 288 bytes | 4.608 bytes |
| 128 × 64 | 1.024 bytes | 16.384 bytes |
| 240 × 240 | 7.200 bytes | 115.200 bytes |
| 320 × 240 | 9.600 bytes | 153.600 bytes |
Para um ícone monocromático de 13 × 8, cada linha ocupa dois bytes. O payload tem 16 bytes, mesmo que dividir o total de pixels por oito dê 13. Essa diferença importa quando você diagnostica uma imagem deslocada.
Padrão de teste, 13 × 8: dois bytes armazenados por linha, 16 bytes no total. Baixe o arquivo XBM correspondente.
O tamanho do arquivo-fonte gerado é outra coisa. Um texto como 0xF8, 0x00 ocupa mais espaço em disco do que os dois bytes que ele descreve. Confira o tamanho do firmware compilado quando você planejar a flash.
Se você está escolhendo uma ferramenta de conversão, a comparação com a alternativa ao image2cpp explica onde um conversor avulso termina e um editor de tela começa a ser útil.
Por que um array convertido pode parecer errado
Se o contorno está certo, mas as cores estão erradas, inspecione o formato de cor e a ordem dos bytes. O RGB565 aloca cinco bits para o vermelho, seis para o verde e cinco para o azul; a Adafruit explica a codificação na sua referência de gráficos.
Se uma imagem monocromática se repete ou inclina para o lado, confira a largura, o preenchimento das linhas e a ordem dos bits. O buffer interno de tela de um controlador de display não é necessariamente organizado como o bitmap aceito pela sua função de desenho.
Siga o guia de solução de problemas correspondente se os bytes convertidos parecerem errados em um TFT ou OLED monocromático: corrija cores RGB565 e a ordem de bytes no TFT_eSPI ou corrija bitmaps drawXBMP em um SSD1306.
Mantenha a saída do conversor e a chamada de desenho gerada como um par. Copiar só o array para um exemplo sem relação remove a informação que dá sentido aos bytes.
Arquivos PNG e pixels brutos são coisas diferentes
Renomear logo.png para logo.h não decodifica a imagem. Um PNG contém dados de imagem comprimidos e metadados. Uma função de desenho que espera pixels RGB565 brutos não consegue interpretar esse arquivo direto.
Para um logotipo fixo, converter antes da compilação pode manter o caminho do firmware simples. Para fotografias substituíveis em um armazenamento, um decodificador pode ser a melhor opção. Escolha com base em como o recurso vai ser atualizado, e não só em qual nome de arquivo é mais fácil colar no sketch.
Perguntas frequentes
O mesmo array C pode funcionar em um OLED e em um TFT?
Só quando os dois caminhos de desenho aceitam a mesma representação. Um ícone de 1 bit pode ser útil em qualquer um dos dois, mas um array colorido não vira um bitmap monocromático sem conversão.
Converter um PNG preserva a transparência?
Isso depende do formato de saída. O RGB565 puro não tem canal alfa. Confira se a exportação achata a transparência contra um fundo ou usa um mecanismo de transparência separado.
Por onde devo começar para uma tela cheia?
Use o guia do construtor de GUI para Arduino para combinar texto, formas e imagens. Manter um valor de temperatura como texto permite que o firmware atualize ele sem substituir o bitmap da tela inteira.