Descripción general
PicoPixel es un editor visual de LVGL con un espacio de trabajo similar al de Figma. Reúne componentes reutilizables, bibliotecas, recursos y herramientas de colaboración para crear interfaces embebidas y trabajar en equipo.
Una vez que construyes una interfaz en PicoPixel, puedes exportar código C y usar ese código en prácticamente cualquier dispositivo que pueda ejecutar LVGL. PicoPixel actualmente admite LVGL 8.x, y la compatibilidad con LVGL 9 está planificada.
Las plantillas, kits de interfaz, ejemplos, sprites, widgets y apps completas son puntos de partida para ese flujo de trabajo. Algunas las crea el equipo de desarrollo de PicoPixel y otras las crean los usuarios y la comunidad en general. Si tienes algo útil que compartir, consulta Cómo enviar una plantilla.
Qué contiene una plantilla
Una plantilla de PicoPixel es simplemente un archivo .picopixel. Es el mismo formato que obtienes al exportar un proyecto desde tu espacio de trabajo.
Esto significa que una plantilla puede contener pantallas, widgets de LVGL, componentes reutilizables, colores, fuentes, imágenes, imágenes animadas, sprites y otros recursos. Cuando la abres o importas, puedes modificar libremente el diseño original. Puedes editarla, simplificarla, copiar partes a otro archivo, publicarla como biblioteca de equipo o exportarla como código C de LVGL.
La idea importante es esta: una plantilla no es solo una captura de pantalla. Es un archivo de proyecto de PicoPixel editable que puede convertirse en parte de tu propio flujo de trabajo con LVGL.
Dónde encontrar plantillas
El lugar principal para explorar es la galería de plantillas de PicoPixel. Puedes filtrar la galería por tipo de proyecto, abrir una página de detalles del proyecto, previsualizar el contenido y elegir cómo incorporarlo a PicoPixel.
También puedes acceder a la misma colección de archivos desde GitHub:
GitHub es útil si prefieres descargar archivos directamente, revisar el historial del proyecto o mantener los archivos .picopixel junto a otros recursos del proyecto.
Elegir el punto de partida adecuado
La galería incluye varios tipos de archivos. Elige el que mejor se adapte a lo que necesitas reutilizar.
- Full App, un proyecto de aplicación completo. En el futuro, más aplicaciones completas podrán incluir el firmware compilado para facilitar su instalación en el dispositivo. Por ahora, concéntrate en abrir el archivo de interfaz, personalizarlo y exportar el código de interfaz para tu propio firmware.
- Example, un ejemplo centrado en un flujo de trabajo, widget, diseño o patrón de interacción específico.
- UI Kit, un conjunto reutilizable de componentes, estilos, pantallas y recursos que puedes adaptar en múltiples productos.
- Template, un diseño de pantalla o proyecto listo para usar que puedes personalizar en tu propia interfaz.
- Sprite, un widget LVGL animado y de múltiples estados reutilizable. Consulta ¿Qué es un sprite? para ver cómo funcionan los sprites en PicoPixel.
- Animated Image, un archivo o ejemplo construido alrededor de fotogramas de imágenes animadas de LVGL. Consulta Trabajar con el widget de imagen animada de LVGL para más detalles.
- Widget, un widget o componente personalizado de LVGL que puedes insertar en una interfaz más grande.
Si no sabes por dónde empezar, usa un ejemplo cuando quieras aprender un comportamiento, un kit de interfaz cuando necesites bloques de construcción reutilizables y una plantilla cuando quieras una pantalla que ya se parezca a lo que estás creando.
Abrir o importar un archivo
Desde la galería de plantillas, haz clic en cualquier proyecto que parezca útil. Llegarás a una página de detalles del proyecto con una vista previa, metadatos, imágenes de galería y botones de acción.
Hay tres formas comunes de añadir el archivo a tu espacio de trabajo de PicoPixel.
- Haz clic en Open in PicoPixel. Esta es la vía más rápida cuando quieres que PicoPixel abra el archivo directamente en el editor.
- Haz clic en Download .picopixel. Esto guarda el archivo localmente para que puedas importarlo después, mantener una copia de seguridad o compartirlo con tu proyecto de firmware.
- Descarga el archivo
.picopixeldesde GitHub, luego arrástralo a PicoPixel o impórtalo desde el editor.
Una vez que el archivo está dentro de PicoPixel, se comporta como cualquier otro proyecto de PicoPixel. Renómbralo, duplícalo, edita pantallas, reemplaza recursos, cambia fuentes, ajusta colores y exporta cuando esté listo.
Reutilizar lo que hay dentro
Una vez importada, puedes adaptar la plantilla como quieras. Usa el proyecto completo como punto de partida o reutiliza solo los elementos que te interesen.
Muchos archivos incluyen recursos reutilizables, como imágenes, colores, fuentes, conjuntos de fotogramas de imágenes animadas y componentes. Abre la pestaña Assets para ver los recursos incluidos.
Si el archivo contiene widgets o componentes LVGL reutilizables, puedes convertirlo en una biblioteca de equipo y vincularlo desde otros archivos. Eso es especialmente útil para kits de interfaz y paquetes de widgets: mantén el archivo fuente como biblioteca principal y luego incorpora sus componentes en cada interfaz de producto.
Para el flujo de trabajo completo, lee Guía de bibliotecas y componentes LVGL reutilizables en PicoPixel. Explica las bibliotecas locales, las bibliotecas de equipo publicadas, las bibliotecas vinculadas y cómo actualizar los componentes en los archivos que los usan.
Exportar a un dispositivo
Cuando tu interfaz esté lista, exporta el código C de LVGL desde PicoPixel e intégralo con el firmware de tu placa. La interfaz exportada puede ejecutarse en prácticamente cualquier dispositivo que admita LVGL, siempre que el firmware y LVGL estén configurados para los widgets y recursos que has usado.
Presta atención a la memoria. Las imágenes grandes, los fotogramas de imágenes animadas, los sprites, las fuentes grandes y los diseños complejos a pantalla completa pueden requerir más RAM y flash de lo que una placa pequeña tiene disponible por defecto. Si algo se ve bien en PicoPixel pero no aparece después de flashear, revisa tu configuración de LVGL, los tamaños de imagen, la profundidad de color, la asignación de heap y la configuración del búfer de pantalla.
Que una plantilla funcione en el editor no garantiza que quepa en tu dispositivo. Siempre confirma que tu placa tiene suficiente RAM y flash para la interfaz que exportas, especialmente cuando uses imágenes animadas, sprites, fuentes grandes o muchos recursos de imagen.
Compartir y permisos
Las plantillas de la comunidad son creadas tanto por el equipo de PicoPixel como por los usuarios. Si quieres compartir tu propio archivo, sigue Cómo enviar una plantilla para que el equipo de PicoPixel tenga la ruta del archivo, los créditos, la descripción y los permisos necesarios para revisarlo.
Para envíos e importaciones, revisa los Términos y la Política de privacidad. Solo envía contenido que poseas o tengas licencia para compartir, incluyendo imágenes, iconos, fuentes, capturas de pantalla y recursos de marca.
Si encuentras una plantilla pública u otro elemento de la comunidad que no debería estar ahí, consulta Cómo reportar contenido.
Qué hacer a continuación
- Galería de plantillas, explora los archivos
.picopixeldisponibles - Cómo enviar una plantilla, comparte tu propio archivo de PicoPixel con la comunidad
- Guía de bibliotecas y componentes LVGL reutilizables en PicoPixel, reutiliza componentes importados entre archivos
- ¿Qué es un sprite?, aprende cómo funcionan los widgets animados de múltiples estados
- Trabajar con el widget de imagen animada de LVGL, aprende cómo funcionan las animaciones de LVGL basadas en fotogramas
