Übersicht
PicoPixel ist der ultimative Editor für LVGL: ein Figma-ähnlicher Arbeitsbereich zum visuellen Erstellen von eingebetteten Benutzeroberflächen, mit wiederverwendbaren Komponenten, Bibliotheken, Assets und Collaboration-Tools, die auf die tatsächliche Arbeitsweise von LVGL-Projekten abgestimmt sind.
Nachdem du eine Benutzeroberfläche in PicoPixel erstellt hast, kannst du C-Code exportieren und diesen Code auf praktisch jedem Gerät verwenden, das LVGL ausführen kann. PicoPixel unterstützt derzeit LVGL 8.x, und LVGL 9-Unterstützung ist geplant.
Vorlagen, UI-Kits, Beispiele, Sprites, Widgets und vollständige Apps sind Ausgangspunkte für diesen Arbeitsablauf. Einige werden vom PicoPixel-Entwicklungsteam erstellt, andere von Nutzern und der breiteren Community. Wenn du etwas Nützliches teilen möchtest, siehe Wie man eine Vorlage einreicht.
Was eine Vorlage wirklich ist
Eine PicoPixel-Vorlage ist einfach eine .picopixel-Datei. Dahinter verbirgt sich nichts Besonderes: Es ist dieselbe Art von Datei, die du aus deinem eigenen Arbeitsbereich exportieren kannst.
Das bedeutet, eine Vorlage kann Bildschirme, LVGL-Widgets, wiederverwendbare Komponenten, Farben, Schriften, Bilder, animierte Bilder, Sprites und andere Assets enthalten. Wenn du sie öffnest oder importierst, bist du nicht an das ursprüngliche Design gebunden. Du kannst sie bearbeiten, vereinfachen, Teile in eine andere Datei kopieren, als Team-Bibliothek veröffentlichen oder als LVGL-C-Code exportieren.
Der wichtige Gedanke ist dieser: Eine Vorlage ist nicht nur ein Screenshot. Es ist eine bearbeitbare PicoPixel-Projektdatei, die Teil deines eigenen LVGL-Workflows werden kann.
Wo du Vorlagen findest
Der Hauptort zum Stöbern ist die PicoPixel-Vorlagengalerie. Du kannst die Galerie nach Projekttyp filtern, eine Projektdetailseite öffnen, eine Vorschau des Inhalts ansehen und auswählen, wie du die Datei in PicoPixel einbringen möchtest.
Du kannst auch über GitHub auf dieselbe Dateisammlung zugreifen:
GitHub ist nützlich, wenn du Dateien lieber direkt herunterlädst, den Projektverlauf überprüfst oder .picopixel-Dateien neben anderen Projekt-Assets aufbewahrst.
Den richtigen Ausgangspunkt wählen
Die Galerie enthält verschiedene Arten von Dateien. Wähle basierend darauf, was du übernehmen möchtest.
- Full App, ein vollständiges App-Projekt. In Zukunft könnten weitere Full-App-Einträge ein Firmware-Binary enthalten, damit du Hardware einfacher flashen kannst. Konzentriere dich vorerst darauf, die UI-Datei zu öffnen, sie anzupassen und den UI-Code für deine eigene Firmware zu exportieren.
- Example, ein gezieltes Referenzprojekt, das einen Workflow, ein Widget, ein Layout oder ein Interaktionsmuster demonstriert.
- UI Kit, ein wiederverwendbares Set aus Komponenten, Stilen, Bildschirmen und Assets, die du über mehrere Produkte hinweg anpassen kannst.
- Template, ein vorgefertigtes Bildschirm- oder Projektlayout, das du in deine eigene Benutzeroberfläche umwandeln kannst.
- Sprite, ein wiederverwendbares animiertes LVGL-Widget mit mehreren Zuständen. Siehe Was ist ein Sprite? für die Funktionsweise von Sprites in PicoPixel.
- Animated Image, eine Datei oder ein Beispiel, das auf LVGL-animierten Bildframes basiert. Siehe Arbeiten mit dem LVGL Animated Image Widget für Details.
- Widget, ein angepasstes LVGL-Widget oder eine Komponente, die du in eine größere Benutzeroberfläche einfügen kannst.
Wenn du dir nicht sicher bist, wo du anfangen sollst: Verwende ein Beispiel, wenn du ein Verhalten erlernen möchtest, ein UI-Kit, wenn du wiederverwendbare Bausteine brauchst, und eine Vorlage, wenn du einen Bildschirm möchtest, der dem, was du baust, bereits nahekommt.
Eine Datei öffnen oder importieren
Klicke in der Vorlagengalerie auf ein beliebiges Projekt, das nützlich erscheint. Du landest auf einer Projektdetailseite mit einer Vorschau, Metadaten, Galeriebildern und Aktionsschaltflächen.
Es gibt drei gängige Wege, die Datei zu deinem PicoPixel-Arbeitsbereich hinzuzufügen.
- Klicke auf Open in PicoPixel. Dies ist der schnellste Weg, wenn PicoPixel die Datei direkt im Editor öffnen soll.
- Klicke auf Download .picopixel. Dadurch wird die Datei lokal gespeichert, sodass du sie später importieren, als Backup behalten oder mit deinem Firmware-Projekt teilen kannst.
- Lade die
.picopixel-Datei von GitHub herunter, ziehe sie dann in PicoPixel oder importiere sie über den Editor.
Sobald sich die Datei in PicoPixel befindet, verhält sie sich wie jedes andere PicoPixel-Projekt. Benenne sie um, dupliziere sie, bearbeite Bildschirme, ersetze Assets, ändere Schriften, passe Farben an und exportiere, wenn alles bereit ist.
Das Innere wiederverwenden
Nachdem eine Vorlage importiert wurde, stehen dir alle Möglichkeiten offen. Du kannst die gesamte Datei als Startprojekt verwenden oder sie wie eine Teilebibliothek behandeln.
Viele Dateien enthalten wiederverwendbare Assets wie Bilder, Farben, Schriften, animierte Bildrahmen-Sets und Komponenten. Öffne den Tab Assets, um zu sehen, was mit der Datei mitgeliefert wurde.
Wenn die Datei wiederverwendbare LVGL-Widgets oder Komponenten enthält, kannst du sie in eine Team-Bibliothek umwandeln und aus anderen Dateien verknüpfen. Das ist besonders nützlich für UI-Kits und Widget-Pakete: Behalte die Quelldatei als Hauptbibliothek und ziehe ihre Komponenten in jede Produkt-Benutzeroberfläche.
Für den vollständigen Workflow lies Leitfaden zu Bibliotheken und wiederverwendbaren LVGL-Komponenten in PicoPixel. Dort werden lokale Bibliotheken, veröffentlichte Team-Bibliotheken, verknüpfte Bibliotheken und der Ablauf von Komponentenaktualisierungen zwischen Dateien erklärt.
Auf ein Gerät exportieren
Wenn deine Benutzeroberfläche fertig ist, exportiere den LVGL-C-Code aus PicoPixel und integriere ihn mit der Firmware für dein Board. Die exportierte Benutzeroberfläche kann auf praktisch jedem Gerät laufen, das LVGL unterstützt, solange deine Firmware und LVGL-Konfiguration für die verwendeten Widgets und Assets eingerichtet sind.
Achte auf den Speicher. Große Bilder, animierte Bildframes, Sprites, große Schriften und komplexe Vollbild-Layouts können mehr RAM und Flash erfordern, als ein kleines Board standardmäßig verfügbar hat. Wenn etwas in PicoPixel gut aussieht, aber nach dem Flashen nicht erscheint, überprüfe deine LVGL-Konfiguration, Bildgrößen, Farbtiefe, Heap-Zuweisung und Display-Puffer-Einrichtung.
Vorlagen sind Ausgangspunkte, keine Hardware-Garantien. Stelle immer sicher, dass dein Board genug RAM und Flash für die exportierte Benutzeroberfläche hat, besonders wenn du animierte Bilder, Sprites, große Schriften oder viele Bild-Assets verwendest.
Teilen und Berechtigungen
Community-Vorlagen werden sowohl vom PicoPixel-Team als auch von Nutzern erstellt. Wenn du deine eigene Datei teilen möchtest, folge Wie man eine Vorlage einreicht, damit das PicoPixel-Team den Dateipfad, die Credits, die Beschreibung und die notwendigen Berechtigungen zur Überprüfung hat.
Für Einreichungen und Importe überprüfe die Nutzungsbedingungen und Datenschutzrichtlinie. Reiche nur Inhalte ein, die du besitzt oder lizenziert hast zu teilen, einschließlich Bilder, Icons, Schriften, Screenshots und Marken-Assets.
Wenn du eine öffentliche Vorlage oder ein anderes Community-Element entdeckst, das dort nicht sein sollte, siehe Wie man Inhalte meldet.
Wie es weitergeht
- Vorlagengalerie, durchstöbere verfügbare
.picopixel-Dateien - Wie man eine Vorlage einreicht, teile deine eigene PicoPixel-Datei mit der Community
- Leitfaden zu Bibliotheken und wiederverwendbaren LVGL-Komponenten in PicoPixel, importierte Komponenten dateienübergreifend wiederverwenden
- Was ist ein Sprite?, erfahre, wie mehrzuständige animierte Widgets funktionieren
- Arbeiten mit dem LVGL Animated Image Widget, frame-basierte LVGL-Animationen verstehen
