Wizualny edytor LVGL 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

01

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
02

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
03

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
04

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
05

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ą
06

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 — także do projektów komercyjnych. Karta kredytowa nie jest wymagana. Wraz z rozwojem platformy i napływem użytkowników mogą zostać wprowadzone płatne plany na pokrycie kosztów przechowywania i usług. Zawsze będzie dostępny darmowy plan.

Zaprojektuj swój pierwszy interfejs LVGL — za darmo

Otwórz PicoPixel w przeglądarce, przeciągnij i upuść widżety LVGL na kanwę i eksportuj gotowy kod C w kilka minut. Bez instalacji. Bez karty kredytowej.

Rozpocznij za darmo!

Bezpłatny — także do projektów komercyjnych. Przeczytaj FAQ · Skontaktuj się z nami