Vue d'ensemble
PicoPixel est l'éditeur ultime pour LVGL : un espace de travail à la Figma pour créer des interfaces utilisateur embarquées visuellement, avec des composants réutilisables, des bibliothèques, des ressources et des outils de collaboration conçus autour de la façon dont les projets LVGL se développent réellement.
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é au sens large. 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 PicoPixel est simplement un fichier .picopixel. Rien de magique ne se cache derrière : c'est le même type de fichier que vous pouvez exporter 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
Le principal endroit pour explorer est la galerie de modèles PicoPixel. Vous pouvez filtrer la galerie par type de projet, ouvrir une page de détails de projet, prévisualiser le contenu et choisir comment vous souhaitez l'intégrer dans PicoPixel.
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 comprend plusieurs types de fichiers. Choisissez en fonction de ce que vous souhaitez emprunter.
- 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 construit autour de frames 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 blocs de construction 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 page de détails 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
Après l'importation d'un modèle, toutes les possibilités s'offrent à vous. Vous pouvez utiliser l'intégralité du fichier comme projet de départ, ou le traiter comme une bibliothèque de pièces.
De nombreux fichiers incluent des ressources réutilisables, comme des images, des couleurs, des polices, des jeux de frames 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 votre interface est prête, exportez le code C LVGL depuis PicoPixel et intégrez-le avec le firmware de votre carte. L'interface exportée peut fonctionner sur pratiquement n'importe quel appareil prenant en charge LVGL, à condition que votre firmware et votre configuration LVGL soient configurés pour les widgets et les ressources que vous avez utilisés.
Faites attention à la mémoire. Les grandes images, les frames 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 basées sur des frames
