Omówienie
PicoPixel to rozbudowany edytor LVGL z obszarem roboczym podobnym do Figmy. Pozwala wizualnie tworzyć interfejsy urządzeń wbudowanych, korzystać z komponentów, bibliotek i zasobów oraz współpracować z zespołem — od projektu aż po wdrożenie na urządzeniu.
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, zestawy UI, przykłady, sprite'y, widżety i pełne aplikacje są dobrym punktem wyjścia do takiej pracy. 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. Ma taki sam format jak plik eksportowany z własnego projektu.
Oznacza to, że szablon może zawierać ekrany, widżety LVGL, komponenty wielokrotnego użytku, kolory, czcionki, obrazy, animacje klatkowe, 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 dla LVGL.
Szablon to coś więcej niż zrzut ekranu. To edytowalny plik projektu PicoPixel, z którego możesz korzystać podczas pracy nad interfejsem 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 taki, który zawiera potrzebne Ci elementy.
- Full App — kompletny projekt aplikacji. W przyszłości więcej takich projektów może zawierać gotowe oprogramowanie do wgrania na urządzenie. Obecnie otwórz projekt interfejsu, dostosuj go i wyeksportuj kod do własnego oprogramowania.
- Example — niewielki projekt pokazujący konkretną metodę pracy, widżet, układ lub sposób obsługi 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 widżet LVGL wielokrotnego użytku. Zobacz Czym jest sprite?, aby dowiedzieć się, jak sprite'y działają w PicoPixel.
- Animated Image — plik lub przykład animacji klatkowej wykorzystującej widżet Animated Image z LVGL. Szczegóły znajdziesz w Praca z widżetem LVGL Animated Image.
- Widget, dostosowany widżet LVGL albo komponent, który możesz wstawić do większego UI.
Aby poznać działanie konkretnej funkcji, wybierz przykład. Jeśli potrzebujesz gotowych elementów do wielokrotnego wykorzystania, sięgnij po zestaw UI. Szablon sprawdzi się, gdy szukasz ekranu podobnego do tego, który chcesz zbudować.
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.
Plik możesz dodać do obszaru roboczego PicoPixel na trzy sposoby.
- Kliknij Open in PicoPixel. To najszybsza ścieżka, gdy chcesz od razu otworzyć plik w edytorze PicoPixel.
- Kliknij Download .picopixel. Zapiszesz plik na komputerze, aby zaimportować go później, zachować kopię zapasową lub dołączyć go do projektu oprogramowania urządzenia.
- 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ń czcionki, dostrój kolory i eksportuj, gdy jest gotowy.
Używanie tego, co jest w środku
Po zaimportowaniu szablonu możesz dowolnie go dostosować. 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, czcionki, zestawy klatek Animated Image i komponenty. Otwórz kartę Assets, aby zobaczyć zasoby dołączone do pliku.
Jeśli plik zawiera widżety LVGL albo komponenty wielokrotnego użytku, możesz opublikować go jako bibliotekę zespołu i podłączać ją w innych plikach. To szczególnie przydatne przy zestawach UI i widżetów: zachowaj plik źródłowy jako główną bibliotekę, a jego komponenty wykorzystuj w interfejsach poszczególnych produktów.
Cały proces 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 interfejs jest gotowy, wyeksportuj z PicoPixel kod C dla LVGL i dodaj go do oprogramowania płytki. Może on działać na praktycznie każdym urządzeniu obsługującym LVGL, pod warunkiem że jego oprogramowanie i konfiguracja LVGL obsługują użyte widżety i zasoby.
Zwróć uwagę na pamięć. Duże obrazy, klatki Animated Image, sprite'y, duże czcionki i złożone pełnoekranowe układy mogą wymagać więcej pamięci RAM i flash niż mała płytka ma domyślnie. Jeśli coś wygląda dobrze w PicoPixel, ale nie pojawia się po wgraniu programu, sprawdź konfigurację LVGL, rozmiary obrazów, głębię koloru, przydział pamięci na stercie i konfigurację bufora wyświetlacza.
Szablony ułatwiają rozpoczęcie pracy, ale nie gwarantują zgodności z każdą płytką. Zawsze potwierdź, że płytka ma wystarczająco dużo pamięci RAM i flash dla eksportowanego UI, szczególnie przy animacjach klatkowych, sprite'ach, dużych czcionkach 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ł adres pliku, informacje o autorach, opis i zgody potrzebne do sprawdzenia zgłoszenia.
Przy zgłoszeniach i importach sprawdź Regulamin i Politykę prywatności. Przesyłaj tylko własne treści lub materiały, na których udostępnianie pozwala Ci licencja, w tym obrazy, ikony, czcionki, 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
- Galeria szablonów, przeglądaj dostępne pliki
.picopixel - Jak zgłosić szablon, udostępnij własny plik PicoPixel społeczności
- Biblioteki i komponenty LVGL wielokrotnego użytku, używaj importowanych komponentów ponownie w plikach
- Czym jest sprite?, poznaj działanie wielostanowych animowanych widżetów
- Praca z widżetem LVGL Animated Image, zrozum animacje LVGL oparte na klatkach
