Open Nextion: ese gadget que pruebas ‘por curiosidad’ y acaba viviendo en tu mesa - Página 11 de 13

Índice

3) Optimización del PNG para LVGL

3.1. Redimensionar (si es necesario)

convert logo.png -resize 240x60 logo_resized.png

1	convert logo.png -resize 240x60 logo_resized.png

3.2. Reducir paleta a 256 colores

pngquant --quality=70-90 --speed 1 --force --output logo_256.png logo_resized.png

1	pngquant --quality=70-90 --speed 1 --force --output logo_256.png logo_resized.png

Esto genera un PNG ligero, perfecto para ser embebido.

4) Conversión del PNG a array C

LovyanGFX permite cargar imágenes desde memoria si están en formato array binario. Para generarlo:

xxd -i logo_256.png > logo_256.h

1	xxd -i logo_256.png > logo_256.h

Esto produce un archivo con contenido similar a:

unsigned char logo_256_png[] = { 0x89, 0x50, 0x4E, ... };
unsigned int logo_256_png_len = 12345;

1 2	unsigned char logo_256_png[] = { 0x89, 0x50, 0x4E, ... }; unsigned int logo_256_png_len = 12345;

Este archivo se incluye directamente en el firmware.

5) Integración del logo en el firmware

En el .ino final del proyecto, el logo se dibuja mediante:

#include "logo_256.h"

lgfx.drawPng(logo_256_png, logo_256_png_len, x, y);

#include "logo_256.h"

lgfx.drawPng(logo_256_png, logo_256_png_len, x, y);

Donde x e y son las coordenadas en pantalla (en nuestro caso, parte inferior derecha).

LovyanGFX detecta automáticamente el formato PNG y lo decodifica en tiempo real.

6) Consideraciones importantes

No usar PNG con transparencia alfa compleja → el decodificador lo soporta, pero penaliza rendimiento.
Evitar imágenes grandes → ralentizan el arranque y consumen RAM.
Mantener la paleta reducida → mejora la velocidad de renderizado.
Usar compresión PNG estándar → LVGL y LovyanGFX la manejan sin problemas.

7) Resultado final

El logo aparece en la parte inferior del panel, renderizado con gran nitidez y sin penalizar el rendimiento del ESP32‑S3. Este mismo procedimiento se puede reutilizar en futuros proyectos para:

iconos animados
fondos
barras decorativas
pantallas de arranque

Y en general, cualquier recurso gráfico que quieras integrar en Open Nextion.

El comando “PCDEMANERO” para generar el logo a integrarse perfectamente en el Open Nextion

Al final, después de probar herramientas, formatos y experimentos varios, descubrimos que todo el proceso de preparar un PNG compatible con Open Nextion podía reducirse a una única línea. Una línea tan elegante que merece quedarse para la posteridad:

convert logo.png -flatten PNG32:logo_flat.png && xxd -i logo_flat.png > logo_flat.h

1	convert logo.png -flatten PNG32:logo_flat.png && xxd -i logo_flat.png > logo_flat.h

Con este comando:

aplanas el PNG original,
lo conviertes a PNG32 (el formato que LovyanGFX digiere sin protestar),
y generas directamente el .h listo para incluir en el firmware.

Sin scripts raros, sin herramientas exóticas, sin magia negra. Una línea. Funciona. Y es muy PCDEMANO.

120