Najlepszy edytor LVGL i kreator GUI typu przeciągnij i upuść.
Jak działa PicoPixel
W PicoPixel tworzysz interfejsy LVGL, przeciągając elementy w edytorze. W kilka minut przejdziesz od pustego projektu do gotowego interfejsu urządzenia — 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 do obszaru roboczego z dokładnością do piksela i ustawiaj ich wygląd bez pisania kodu.
- •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
- •Dobieraj 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
Skonfiguruj interakcje
Użyj wizualnego Edytora zdarzeń, aby połączyć akcje widżetów bez pisania choćby jednego wiersza kodu C. PicoPixel automatycznie generuje funkcje obsługi 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 pisania funkcji obsługi zdarzeń
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 C dla LVGL. Wynik używa standardowych wywołań API LVGL bez zależności od zamkniętych bibliotek — 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 rozwijaj projekt
Zaproś członków zespołu do projektu. Wszyscy edytują ten sam projekt w czasie rzeczywistym. Używaj wbudowanej kontroli wersji do śledzenia zmian i cofania ich w razie potrzeby.
- •Wspólna edycja w czasie rzeczywistym — widoczne kursory współpracowników, komentarze i adnotacje
- •Wbudowana kontrola wersji ze szczegółową historią sesji
- •Przywracaj dowolny poprzedni stan i porównuj wersje
- •Udostępniaj linki do symulatora osobom, z którymi chcesz omówić projekt
Dlaczego przeciągnij i upuść dla LVGL?
Tworząc interfejs w LVGL ręcznie, zapisujesz w C pozycje widżetów i wywołania funkcji ustawiających ich wygląd. Po każdej zmianie musisz ponownie skompilować projekt, by zobaczyć efekt. To zajmuje czas, a z samego kodu trudno wyobrazić sobie gotowy ekran.
Podejście przeciągnij i upuść w PicoPixel zastępuje ten cykl wizualnym edytorem, w którym widzisz wynik natychmiast. Przeciągnij przycisk do obszaru roboczego, 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.
Edytor wizualny przyspiesza tworzenie prototypów i ułatwia współpracę projektantów z inżynierami w czasie rzeczywistym. Generuje też kod LVGL gotowy do wdrożenia, taki jak kod napisany 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.
Jakich widżetów 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 obsługę kolejnych widżetów.
Jak dokładny jest symulator na żywo?
Symulator uruchamia prawdziwy silnik renderowania LVGL skompilowany do WebAssembly — to nie makieta ani odwzorowanie w 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 C dla LVGL (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 zależności od zamkniętych bibliotek.
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 rozbudowany darmowy plan.
Zacznij budować swój interfejs LVGL za darmo
Projektuj interfejsy urządzeń wbudowanych 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 za darmo!