3) Optimización del PNG para LVGL
3.1. Redimensionar (si es necesario)
1 | convert logo.png -resize 240x60 logo_resized.png |
3.2. Reducir paleta a 256 colores
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:
1 | xxd -i logo_256.png > logo_256.h |
Esto produce un archivo con contenido similar a:
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:
1 2 3 | #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:
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
.hlisto para incluir en el firmware.
Sin scripts raros, sin herramientas exóticas, sin magia negra. Una línea. Funciona. Y es muy PCDEMANO.
2271
Se nos había pasado incluir el pequeño vídeo que hemos hecho sobre CPU-MONITOR
Y también como no la «demo oficial» de Nextion … aunque es más bonita la nuestra ¿no?
Aunque el cacharro de SonOff nos dejó buen sabor de boca, seguimos pensando que programarlo podría ser bastante menos esotérico y que unos cuantos ejemplos más nos habrían ahorrado horas de arqueología digital.
Por suerte, nuestros amigos chinos han decidido iluminarnos y ya está disponible la nueva Open Nextion Application Platform, con ejemplos, ayudas y todo lo que antes echábamos de menos. Tocará meterle mano, claro.
Y como además funciona no solo con los dos Nextion “rectangulares” que probamos, sino también con el nuevo Open Nextion 1.28″ Genius Series ESP32‑S3 IPS Knob Screen que está volando hacia casa… mejor esperamos a tenerlo en casa, lo probamos y os contamos, ¿ok?