Imagen en array C para Arduino y ESP32
Para convertir una imagen en un array C, redimensiónala a las dimensiones que necesitas en la pantalla, elige un formato de píxel que tu biblioteca de dibujo acepte y exporta los datos de píxel con su llamada de dibujo. Para un OLED monocromo eso suele significar un bitmap de 1 bit. Para un TFT en color, RGB565 es una elección común.
La extensión del archivo del array te dice muy poco. Dos encabezados pueden contener números hexadecimales y aun así necesitar funciones de dibujo completamente distintas.
Elige la biblioteca de dibujo antes de convertir
Empieza con la biblioteca que ya se ejecuta en tu placa. Una conversión de PNG a array C para U8g2 no debería producir la misma salida que una para LVGL.
| Firmware target | Asset to prepare | Integration detail |
|---|---|---|
| U8g2 | XBM bitmap | Width and height accompany the byte array |
| TFT_eSPI | RGB565 pixels or a monochrome bitmap | Use the matching drawing function |
| Adafruit GFX | RGB565 pixels or a monochrome bitmap | Match the bitmap's packing to the API |
| LVGL 9 | Image descriptor and pixel data | A bare pixel array is not the complete image object |
La referencia de plataformas de Lopaka enumera los formatos de salida. Selecciona primero la plataforma para que el editor exporte el recurso adecuado.
Convierte un PNG o BMP en Lopaka
- Abre Lopaka y elige la plataforma de destino y las dimensiones de pantalla.
- Abre la herramienta Image y sube el gráfico de origen.
- Redimensiona o recorta al tamaño que la imagen ocupará en el dispositivo. Un ícono de estado de 24 píxeles no necesita un bitmap de origen a pantalla completa.
- Elige monocromo o RGB cuando la plataforma ofrezca ambas opciones. Para arte lineal, inspecciona el resultado con el tramado desactivado; para una fotografía, compara los modos de tramado disponibles.
- Coloca el recurso en la pantalla y después copia juntos los datos generados y el código de dibujo.
La guía de importación de imágenes cubre los controles. Si solo necesitas conversión OLED monocromo, sigue el tutorial del convertidor de imágenes U8g2, más corto.
¿Qué tamaño tendrá el array?
Para un bitmap de 1 bit sin comprimir y compactado por filas, redondea cada fila hasta un byte completo:
row bytes = (width + 7) / 8, using integer division
bitmap bytes = row bytes * height
RGB565 bytes = width * height * 2Estos cálculos describen las cargas de píxeles. Excluyen descriptores, alineación, paletas y cualquier búfer adicional en tiempo de ejecución.
| Dimensions | Row-packed 1-bit | 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 un ícono monocromo de 13 × 8, cada fila ocupa dos bytes. La carga es de 16 bytes, aunque dividir el conteo total de píxeles entre ocho da 13. Esa diferencia importa al diagnosticar una imagen desplazada.
Patrón de prueba, 13 × 8: dos bytes almacenados por fila, 16 bytes en total. Descarga el archivo XBM correspondiente.
El tamaño del archivo fuente generado es distinto otra vez. Un texto como 0xF8, 0x00 ocupa más espacio en disco que los dos bytes que describe. Comprueba el tamaño del firmware compilado al presupuestar la flash.
Si estás eligiendo una herramienta de conversión, la comparación de alternativas a image2cpp explica dónde termina un convertidor independiente y dónde empieza a ser útil un editor de pantallas.
Por qué un array convertido puede verse mal
Si el contorno es correcto pero los colores están mal, inspecciona el formato de color y el orden de bytes. RGB565 asigna cinco bits al rojo, seis al verde y cinco al azul; Adafruit explica la codificación en su referencia de gráficos.
Si una imagen monocromo se repite o se inclina hacia un lado, comprueba su ancho, el relleno de filas y el orden de bits. El búfer de pantalla interno de un controlador de pantalla no necesariamente tiene la misma disposición que el bitmap que acepta tu función de dibujo.
Sigue la guía de solución de problemas correspondiente si los bytes convertidos se ven mal en un TFT o en un OLED monocromo: corrige los colores RGB565 y el orden de bytes en TFT_eSPI, o corrige los bitmaps drawXBMP en un SSD1306.
Mantén la salida del convertidor y su llamada de dibujo generada como una pareja. Copiar solo el array en un ejemplo sin relación elimina la información que da sentido a los bytes.
Los archivos PNG y los píxeles en bruto son cosas distintas
Renombrar logo.png a logo.h no decodifica la imagen. Un PNG contiene datos de imagen comprimidos y metadatos. Una función de dibujo que espera píxeles RGB565 en bruto no puede interpretar ese archivo directamente.
Para un logotipo fijo, la conversión antes de la compilación puede mantener simple la ruta de firmware. Para fotografías reemplazables en almacenamiento, un decodificador puede ser la mejor opción. Elige según cómo se actualizará el recurso, no solo por qué nombre de archivo es más fácil de pegar en el sketch.
Preguntas comunes
¿Puede funcionar el mismo array C en un OLED y en un TFT?
Solo cuando ambas rutas de dibujo aceptan la misma representación. Un ícono de 1 bit puede ser útil en cualquiera de los dos, pero un array en color no puede convertirse en un bitmap monocromo sin conversión.
¿Conservar la transparencia al convertir un PNG?
Depende del formato de salida. El RGB565 simple no contiene canal alfa. Comprueba si la exportación aplana la transparencia contra un fondo o usa un mecanismo de transparencia aparte.
¿Por dónde empiezo para una pantalla completa?
Usa la guía del constructor de GUI para Arduino para combinar texto, formas e imágenes. Mantener un valor de temperatura como texto permite que el firmware lo actualice sin sustituir todo el bitmap de la pantalla.