Najlepszy edytor LVGL i kreator GUI typu przeciągnij i upuść.
Jak działa PicoPixel
PicoPixel przekształca programowanie LVGL z procesu opartego na kodzie w wizualny przepływ pracy typu przeciągnij i upuść. Od pustej kanwy do gotowego interfejsu wbudowanego w kilka minut — projektuj wizualnie, podglądaj w symulatorze LVGL na żywo i eksportuj czysty kod C. Bez instalacji.
Rozpocznij za darmo!Od projektu do urządzenia w 6 krokach
Zaprojektuj interfejs
Otwórz PicoPixel w przeglądarce — bez pobierania, bez instalacji. Przeciągaj widżety LVGL z palety na kanwę z dokładnością do piksela i stylizuj je wizualnie.
- •Przyciski, etykiety, suwaki, przełączniki, łuki, wykresy, listy rozwijane, rolki, pola wyboru, pola tekstowe, widoki zakładek, kontenery i obrazy
- •Ustaw rozdzielczość docelowego wyświetlacza, aby dopasować ją do sprzętu
- •Stylizuj kolory, obramowania, marginesy, czcionki, przezroczystość, gradienty i cienie
- •Używaj narzędzi wyrównywania i dystrybucji do precyzyjnego pozycjonowania widżetów
- •Organizuj ekrany i warstwy dla interfejsów wielostronicowych
Podłącz interakcje
Użyj wizualnego Edytora zdarzeń, aby połączyć akcje widżetów bez pisania ani jednej linii kodu C. PicoPixel automatycznie generuje callbacki zdarzeń LVGL.
- •Naciśnięcie przycisku → nawigacja do innego ekranu
- •Zmiana wartości suwaka → aktualizacja etykiety
- •Przełączenie pola wyboru → pokaż lub ukryj panel
- •Wybór z listy rozwijanej → zmień styl lub uruchom akcję
- •Przeciągaj akcje na widżety — bez kodu callbacków
Podgląd w symulatorze na żywo
PicoPixel kompiluje LVGL do WebAssembly i uruchamia go bezpośrednio w przeglądarce. Podgląd to prawdziwy silnik renderowania LVGL — nie makieta.
- •Zobacz dokładnie, jak Twój UI będzie wyglądał na sprzęcie
- •Testuj interakcje dotykowe, przewijanie i animacje
- •Nakładki interakcji pokazują, co można dotknąć i przewijać
- •Udostępnij link do symulatora zespołowi lub klientowi — bez potrzeby środowiska deweloperskiego
Eksportuj gotowy kod
Pobierz projekt jako czyste pliki źródłowe LVGL C. Wynik używa standardowych wywołań API LVGL bez zastrzeżonych zależności — wstaw go do dowolnego projektu LVGL.
- •Definicje widżetów i kod układu
- •Deklaracje stylów
- •Wiązania obsługi zdarzeń
- •Odniesienia do czcionek i zasobów graficznych
- •Standardowe API LVGL 8.x — bez biblioteki runtime PicoPixel
Zintegruj i wgraj
Dodaj wyeksportowane pliki do projektu ESP-IDF, Arduino lub PlatformIO. Skompiluj, wgraj na urządzenie, a UI na Twoim urządzeniu będzie identyczny z symulatorem piksel po pikselu.
- •Działa z ESP32, STM32, Arduino, Raspberry Pi Pico i dowolną platformą kompatybilną z LVGL
- •Dołącz nagłówek UI i wywołaj ui_init() po skonfigurowaniu sterownika wyświetlacza
- •Dla większości konfiguracji nie są potrzebne zmiany w systemie budowania
- •Lub przekaż plik zip asystentowi AI i pozwól mu zająć się integracją
Współpracuj i iteruj
Zaproś członków zespołu do projektu. Wszyscy edytują tę samą kanwę w czasie rzeczywistym. Używaj wbudowanej kontroli wersji do śledzenia zmian i cofania ich w razie potrzeby.
- •Wspólna edycja w czasie rzeczywistym — kursory na żywo, opinie, adnotacje
- •Wbudowana kontrola wersji ze szczegółową historią sesji
- •Przywracaj dowolny poprzedni stan i porównuj wersje
- •Udostępniaj linki do symulatora do przeglądów przez interesariuszy
Dlaczego przeciągnij i upuść dla LVGL?
Budowanie interfejsów wbudowanych z LVGL tradycyjnie oznacza pisanie kodu C linia po linii — pozycjonowanie widżetów za pomocą współrzędnych pikselowych, stosowanie stylów przez wywołania funkcji i rekompilację po każdej zmianie. Działa, ale pętla zwrotna jest wolna, a kod trudny do wizualizacji.
Podejście przeciągnij i upuść w PicoPixel zastępuje ten cykl wizualnym edytorem, w którym widzisz wynik natychmiast. Przeciągnij przycisk na kanwę, zmień jego rozmiar, kolor, dodaj etykietę — a symulator LVGL na żywo pokaże dokładnie, jak będzie to wyglądać na docelowym sprzęcie. Gdy skończysz, eksportuj czysty kod C, który kompiluje się na ESP32, STM32, Arduino i dowolnej platformie kompatybilnej z LVGL.
Wizualny przepływ pracy jest szybszy do prototypowania, łatwiejszy dla zespołów (projektanci i inżynierowie mogą współpracować w czasie rzeczywistym) i generuje ten sam produkcyjnej jakości kod LVGL, jaki napisałbyś ręcznie. Zobacz wszystkie funkcje PicoPixel lub przeczytaj szczegółowe porównanie z innymi edytorami LVGL.
Często zadawane pytania
Czy muszę coś instalować, aby korzystać z PicoPixel?
Nie. PicoPixel działa w całości w przeglądarce. Otwórz adres edytora, zaloguj się i zacznij projektować. Nie ma aplikacji desktopowej, wtyczki ani SDK do instalacji.
Jakie widżety LVGL mogę używać w edytorze?
PicoPixel obsługuje podstawowy zestaw widżetów LVGL, w tym przyciski, etykiety, suwaki, przełączniki, listy rozwijane, rolki, łuki, paski, wykresy, obrazy, pola wyboru, pola tekstowe, widoki zakładek, kontenery i inne. Stale dodajemy wsparcie dla kolejnych widżetów.
Jak dokładny jest symulator na żywo?
Symulator uruchamia prawdziwy silnik renderowania LVGL skompilowany do WebAssembly — to nie makieta ani przybliżenie CSS. To, co widzisz w podglądzie, odpowiada docelowemu sprzętowi piksel po pikselu.
W jakim formacie jest eksportowany kod?
PicoPixel eksportuje plik zip zawierający czysty, czytelny kod LVGL C (pliki .c i .h). Wynik obejmuje tworzenie widżetów, stylizację, układ i konfigurację obsługi zdarzeń — wszystko przy użyciu standardowych wywołań API LVGL bez zastrzeżonych zależności.
Czy mogę użyć wyeksportowanego kodu z ESP-IDF, Arduino lub PlatformIO?
Tak. Wyeksportowany kod używa standardowych wywołań API LVGL, więc działa z dowolnym systemem budowania obsługującym LVGL — w tym ESP-IDF, Arduino IDE i PlatformIO. Wystarczy dodać pliki do projektu i wywołać ui_init() po skonfigurowaniu sterownika wyświetlacza. Szczegóły dla konkretnych platform znajdziesz w naszym przewodniku ESP32.
Czy PicoPixel jest darmowy?
Tak. PicoPixel jest bezpłatny do użytku osobistego i hobbystycznego — bez karty kredytowej. Użytkowanie komercyjne zaczyna się od 17 USD/miesiąc (204 USD/rok). Zawsze będzie dostępny hojny darmowy plan.
Zacznij budować swój interfejs LVGL za darmo
Projektuj embedded UI wizualnie, podglądaj je w symulatorze LVGL na żywo i eksportuj produkcyjny kod C. Bez instalacji. Bez karty kredytowej. Otwórz PicoPixel w przeglądarce i zacznij projektować.
Zacznij. To darmowe!