Vue d'ensemble
PicoPixel est un éditeur visuel complet pour LVGL. Comme dans Figma, vous concevez vos interfaces embarquées sur un canevas, avec des composants réutilisables, des bibliothèques, des ressources et des outils de collaboration adaptés aux projets LVGL.
Une fois que vous avez créé une interface dans PicoPixel, vous pouvez exporter du code C et utiliser ce code sur pratiquement n'importe quel appareil pouvant exécuter LVGL. PicoPixel prend actuellement en charge LVGL 8.x, et la prise en charge de LVGL 9 est prévue.
Les modèles, kits d'interface, exemples, sprites, widgets et applications complètes sont des points de départ pour ce flux de travail. Certains sont créés par l'équipe de développement PicoPixel, et d'autres par les utilisateurs et la communauté. Si vous avez quelque chose d'utile à partager, consultez Comment soumettre un modèle.
Ce qu'est réellement un modèle
Un modèle est un fichier .picopixel, au même format que ceux que vous exportez depuis votre propre espace de travail.
Cela signifie qu'un modèle peut contenir des écrans, des widgets LVGL, des composants réutilisables, des couleurs, des polices, des images, des images animées, des sprites et d'autres ressources. Quand vous l'ouvrez ou l'importez, vous n'êtes pas limité au design original. Vous pouvez le modifier, le simplifier, en copier des parties dans un autre fichier, le publier comme bibliothèque d'équipe ou l'exporter en code C LVGL.
L'idée importante est la suivante : un modèle n'est pas seulement une capture d'écran. C'est un fichier de projet PicoPixel modifiable qui peut s'intégrer à votre propre flux de travail LVGL.
Où trouver des modèles
Dans la galerie de modèles PicoPixel, filtrez les projets par catégorie et ouvrez leur fiche pour voir les aperçus et choisir comment les importer.
Vous pouvez également accéder à la même collection de fichiers depuis GitHub :
GitHub est utile si vous préférez télécharger les fichiers directement, consulter l'historique du projet ou conserver les fichiers .picopixel à côté d'autres ressources du projet.
Choisir le bon point de départ
La galerie propose plusieurs types de projets. Choisissez celui qui correspond à votre besoin :
- Full App, un projet d'application complet. À l'avenir, davantage d'entrées d'applications complètes pourraient inclure un binaire de firmware pour faciliter le flashage du matériel. Pour l'instant, concentrez-vous sur l'ouverture du fichier d'interface, sa personnalisation et l'exportation du code d'interface pour votre propre firmware.
- Example, un projet de référence ciblé qui illustre un flux de travail, un widget, une mise en page ou un modèle d'interaction.
- UI Kit, un ensemble réutilisable de composants, styles, écrans et ressources que vous pouvez adapter sur plusieurs produits.
- Template, une mise en page d'écran ou de projet prête à l'emploi que vous pouvez personnaliser pour votre propre interface.
- Sprite, un widget LVGL animé et multi-états réutilisable. Voir Qu'est-ce qu'un sprite ? pour comprendre le fonctionnement des sprites dans PicoPixel.
- Animated Image, un fichier ou un exemple consacré aux séquences d’images animées LVGL. Voir Travailler avec le widget d'image animée LVGL pour les détails.
- Widget, un widget ou composant LVGL personnalisé que vous pouvez intégrer dans une interface plus large.
Si vous ne savez pas par où commencer, utilisez un exemple quand vous voulez apprendre un comportement, un kit d'interface quand vous avez besoin de composants réutilisables, et un modèle quand vous voulez un écran déjà proche de ce que vous créez.
Ouvrir ou importer un fichier
Depuis la galerie de modèles, cliquez sur n'importe quel projet qui semble utile. Vous arriverez sur une fiche du projet avec un aperçu, des métadonnées, des images de galerie et des boutons d'action.
Il existe trois façons courantes d'ajouter le fichier à votre espace de travail PicoPixel.
- Cliquez sur Open in PicoPixel. C'est la voie la plus rapide quand vous voulez que PicoPixel ouvre le fichier directement dans l'éditeur.
- Cliquez sur Download .picopixel. Cela enregistre le fichier localement afin que vous puissiez l'importer plus tard, garder une sauvegarde ou le partager avec votre projet de firmware.
- Téléchargez le fichier
.picopixeldepuis GitHub, puis faites-le glisser dans PicoPixel ou importez-le depuis l'éditeur.
Une fois le fichier dans PicoPixel, il se comporte comme n'importe quel autre projet PicoPixel. Renommez-le, dupliquez-le, modifiez les écrans, remplacez les ressources, changez les polices, ajustez les couleurs et exportez quand tout est prêt.
Réutiliser le contenu
Utilisez le modèle importé comme point de départ pour votre projet, ou prélevez uniquement les éléments qui vous intéressent.
De nombreux fichiers incluent des ressources réutilisables, comme des images, des couleurs, des polices, des séquences d’images animées et des composants. Ouvrez l'onglet Assets pour voir ce qui est inclus dans le fichier.
Si le fichier contient des widgets ou composants LVGL réutilisables, vous pouvez le transformer en bibliothèque d'équipe et le lier depuis d'autres fichiers. C'est particulièrement utile pour les kits d'interface et les paquets de widgets : conservez le fichier source comme bibliothèque principale, puis intégrez ses composants dans chaque interface produit.
Pour le flux de travail complet, lisez Guide des bibliothèques et des composants LVGL réutilisables dans PicoPixel. Il explique les bibliothèques locales, les bibliothèques d'équipe publiées, les bibliothèques liées et la façon dont les mises à jour de composants se propagent entre les fichiers.
Exporter vers un appareil
Lorsque l’interface est prête, exportez son code C LVGL et intégrez-le au firmware de votre carte. Le code peut fonctionner sur presque tout appareil compatible LVGL, à condition d’activer les widgets et les ressources nécessaires dans votre configuration.
Faites attention à la mémoire. Les grandes images, les séquences d’images animées, les sprites, les grandes polices et les mises en page complexes plein écran peuvent nécessiter plus de RAM et de flash qu'une petite carte n'en dispose par défaut. Si quelque chose s'affiche correctement dans PicoPixel mais n'apparaît pas après le flashage, vérifiez votre configuration LVGL, les tailles d'image, la profondeur de couleur, l'allocation de tas et la configuration du tampon d'affichage.
Les modèles sont des points de départ, pas des garanties matérielles. Confirmez toujours que votre carte dispose de suffisamment de RAM et de flash pour l'interface que vous exportez, surtout lorsque vous utilisez des images animées, des sprites, de grandes polices ou de nombreuses ressources d'images.
Partage et autorisations
Les modèles communautaires sont créés à la fois par l'équipe PicoPixel et par les utilisateurs. Si vous souhaitez partager votre propre fichier, suivez Comment soumettre un modèle afin que l'équipe PicoPixel dispose du chemin du fichier, des crédits, de la description et des autorisations nécessaires à la révision.
Pour les soumissions et les importations, consultez les Conditions d'utilisation et la Politique de confidentialité. Ne soumettez que du contenu que vous possédez ou êtes autorisé à partager, notamment les images, icônes, polices, captures d'écran et ressources de marque.
Si vous repérez un modèle public ou un autre élément de la communauté qui ne devrait pas s'y trouver, consultez Comment signaler du contenu.
Prochaines étapes
- Galerie de modèles, parcourez les fichiers
.picopixeldisponibles - Comment soumettre un modèle, partagez votre propre fichier PicoPixel avec la communauté
- Guide des bibliothèques et des composants LVGL réutilisables dans PicoPixel, réutilisez des composants importés entre les fichiers
- Qu'est-ce qu'un sprite ?, apprenez comment fonctionnent les widgets animés multi-états
- Travailler avec le widget d'image animée LVGL, comprendre les animations LVGL image par image
