Descripción general
PicoPixel es el editor definitivo para LVGL: un espacio de trabajo similar a Figma para construir interfaces de usuario embebidas de forma visual, con componentes reutilizables, bibliotecas, recursos y herramientas de colaboración diseñadas en torno a la forma en que los proyectos LVGL realmente se desarrollan.
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é es realmente una plantilla
Una plantilla de PicoPixel es simplemente un archivo .picopixel. No hay nada mágico detrás: es el mismo tipo de archivo que puedes exportar desde tu propio 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, no estás bloqueado en 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 e indicar cómo quieres 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 según lo que quieras tomar prestado.
- Full App, un proyecto de aplicación completo. En el futuro, más entradas de apps completas pueden incluir un binario de firmware para que puedas flashear hardware más fácilmente. Por ahora, concéntrate en abrir el archivo de interfaz, personalizarlo y exportar el código de interfaz para tu propio firmware.
- Example, un proyecto de referencia enfocado que demuestra 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
Después de importar una plantilla, el mundo es básicamente tu ostra. Puedes usar el archivo completo como proyecto de inicio o tratarlo como una biblioteca de piezas.
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 qué vino con el archivo.
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 las actualizaciones de componentes se mueven entre archivos.
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 tu firmware y la configuración de LVGL estén configurados para los widgets y recursos que usaste.
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.
Las plantillas son puntos de partida, no garantías de hardware. 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, entender las animaciones de LVGL basadas en fotogramas
