Omówienie
PicoPixel to ostateczny edytor dla LVGL: workspace podobny do Figmy do wizualnego budowania embedded UI, z komponentami wielokrotnego użytku, bibliotekami, zasobami i narzędziami współpracy zbudowanymi wokół tego, jak projekty LVGL naprawdę trafiają na urządzenia.
Gdy zbudujesz UI w PicoPixel, możesz wyeksportować kod C i użyć go na praktycznie każdym urządzeniu, które potrafi uruchomić LVGL. PicoPixel obecnie obsługuje LVGL 8.x, a obsługa LVGL 9 jest planowana.
Szablony, UI kity, przykłady, sprite'y, widgety i pełne aplikacje są punktami startowymi dla tego workflow. Część jest tworzona przez zespół PicoPixel, a część przez użytkowników i szerszą społeczność. Jeśli masz coś użytecznego do udostępnienia, zobacz Jak przesłać szablon.
Czym naprawdę jest szablon
Szablon PicoPixel to po prostu plik .picopixel. Nie ma za nim nic magicznego: to ten sam rodzaj pliku, który możesz wyeksportować z własnego workspace.
Oznacza to, że szablon może zawierać ekrany, widgety LVGL, komponenty wielokrotnego użytku, kolory, fonty, obrazy, animated images, sprite'y i inne zasoby. Gdy go otwierasz albo importujesz, nie jesteś przywiązany do oryginalnego projektu. Możesz go edytować, odchudzić, kopiować części do innego pliku, opublikować jako bibliotekę zespołu albo wyeksportować jako kod C LVGL.
Ważna myśl jest taka: szablon nie jest tylko zrzutem ekranu. To edytowalny plik projektu PicoPixel, który może stać się częścią Twojego workflow LVGL.
Gdzie znaleźć szablony
Główne miejsce przeglądania to galeria szablonów PicoPixel. Możesz filtrować galerię według typu projektu, otworzyć stronę szczegółów, podejrzeć zawartość i wybrać sposób przeniesienia pliku do PicoPixel.
Ten sam zbiór plików jest też dostępny z GitHub:
GitHub przydaje się, jeśli wolisz pobierać pliki bezpośrednio, sprawdzać historię projektu albo trzymać pliki .picopixel obok innych zasobów projektu.
Wybierz właściwy punkt startowy
Galeria zawiera kilka rodzajów plików. Wybierz według tego, co chcesz pożyczyć.
- Full App, kompletny projekt aplikacji. W przyszłości więcej wpisów full app może zawierać binarkę firmware, aby łatwiej flashować hardware. Na razie skup się na otwarciu pliku UI, dostosowaniu go i eksporcie kodu UI do własnego firmware.
- Example, skupiony projekt referencyjny pokazujący jeden workflow, widget, układ albo wzorzec interakcji.
- UI Kit, zestaw komponentów, stylów, ekranów i zasobów wielokrotnego użytku, który możesz adaptować w wielu produktach.
- Template, gotowy ekran albo układ projektu do dostosowania do własnego interfejsu.
- Sprite, animowany, wielostanowy widget LVGL wielokrotnego użytku. Zobacz Czym jest sprite?, aby dowiedzieć się, jak sprite'y działają w PicoPixel.
- Animated Image, plik albo przykład oparty na klatkach LVGL animated image. Szczegóły znajdziesz w Praca z widgetem LVGL Animated Image.
- Widget, dostosowany widget LVGL albo komponent, który możesz wstawić do większego UI.
Jeśli nie wiesz, od czego zacząć, użyj przykładu, gdy chcesz nauczyć się zachowania, UI kitu, gdy potrzebujesz klocków wielokrotnego użytku, i szablonu, gdy chcesz ekran bliski temu, co budujesz.
Otwieranie albo importowanie pliku
Z galerii szablonów kliknij dowolny projekt, który wygląda przydatnie. Trafisz na stronę szczegółów z podglądem, metadanymi, obrazami galerii i przyciskami akcji.
Są trzy typowe sposoby dodania pliku do workspace PicoPixel.
- Kliknij Open in PicoPixel. To najszybsza ścieżka, gdy chcesz od razu otworzyć plik w edytorze PicoPixel.
- Kliknij Download .picopixel. Zapisuje to plik lokalnie, aby zaimportować go później, zachować backup albo udostępnić projektowi firmware.
- Pobierz plik
.picopixelz GitHub, a potem przeciągnij go do PicoPixel albo zaimportuj z edytora.
Gdy plik jest już w PicoPixel, zachowuje się jak każdy inny projekt PicoPixel. Zmień nazwę, duplikuj, edytuj ekrany, podmień zasoby, zmień fonty, dostrój kolory i eksportuj, gdy jest gotowy.
Używanie tego, co jest w środku
Po imporcie szablonu świat stoi przed Tobą otworem. Możesz użyć całego pliku jako projektu startowego albo potraktować go jak bibliotekę części.
Wiele plików zawiera zasoby do ponownego użycia, takie jak obrazy, kolory, fonty, zestawy klatek animated image i komponenty. Otwórz kartę Assets, aby zobaczyć, co przyszło z plikiem.
Jeśli plik zawiera widgety LVGL albo komponenty wielokrotnego użytku, możesz zmienić go w bibliotekę zespołu i linkować z innych plików. To szczególnie przydatne dla UI kitów i paczek widgetów: trzymaj plik źródłowy jako główną bibliotekę, a potem wciągaj jego komponenty do każdego UI produktu.
Pełny workflow opisuje Przewodnik po bibliotekach i komponentach LVGL wielokrotnego użytku w PicoPixel. Wyjaśnia lokalne biblioteki, opublikowane biblioteki zespołu, biblioteki połączone i sposób przenoszenia aktualizacji komponentów między plikami.
Eksport na urządzenie
Gdy UI jest gotowe, wyeksportuj kod C LVGL z PicoPixel i zintegruj go z firmware swojej płytki. Wyeksportowane UI może działać na praktycznie każdym urządzeniu obsługującym LVGL, o ile firmware i konfiguracja LVGL są przygotowane na widgety i zasoby, których użyłeś.
Zwróć uwagę na pamięć. Duże obrazy, klatki animated image, sprite'y, duże fonty i złożone pełnoekranowe układy mogą wymagać więcej RAM i flash niż mała płytka ma domyślnie. Jeśli coś wygląda dobrze w PicoPixel, ale nie pojawia się po flashowaniu, sprawdź konfigurację LVGL, rozmiary obrazów, głębię koloru, alokację heap i konfigurację bufora wyświetlacza.
Szablony są punktami startowymi, nie gwarancjami sprzętowymi. Zawsze potwierdź, że płytka ma dość RAM i flash dla eksportowanego UI, szczególnie przy animated images, sprite'ach, dużych fontach albo wielu zasobach graficznych.
Udostępnianie i uprawnienia
Szablony społeczności tworzą zarówno zespół PicoPixel, jak i użytkownicy. Jeśli chcesz udostępnić własny plik, postępuj zgodnie z Jak przesłać szablon, aby zespół PicoPixel miał ścieżkę pliku, credits, opis i pozwolenia potrzebne do recenzji.
Przy zgłoszeniach i importach sprawdź Regulamin i Politykę prywatności. Przesyłaj tylko treści, które posiadasz albo masz licencję udostępniać, w tym obrazy, ikony, fonty, zrzuty ekranu i zasoby marek.
Jeśli zauważysz publiczny szablon albo inny element społeczności, którego nie powinno tam być, zobacz Jak zgłosić treść.
Dokąd dalej
- Templates gallery, przeglądaj dostępne pliki
.picopixel - How to submit a template, udostępnij własny plik PicoPixel społeczności
- Guide to libraries and reusable LVGL components in PicoPixel, używaj importowanych komponentów ponownie w plikach
- What is a sprite?, poznaj działanie wielostanowych animowanych widgetów
- Working with the LVGL Animated Image Widget, zrozum animacje LVGL oparte na klatkach
