Przykładprędkościomierza

Zawartość

• Ekran dashboardu 480 x 480, przygotowany dla kwadratowych canvasów i łatwy do dopasowania do okrągłych wyświetlaczy.
• Gauge arc LVGL, używający widgetu arc jako głównego pierścienia prędkości, aby wskaźnik można było aktualizować z kodu.
• Duża numeryczna etykieta prędkości, pokazana w podglądzie jako 135, dla mocnego punktu skupienia w stylu instrument cluster.
• Etykieta jednostki, obecnie km/h, gotowa do zmiany na mph, %, RPM, W albo inną miarę.
• Grupa odometru, pokazana jako 9138 km, przydatna dla przebiegu, dystansu trip, runtime, zasięgu baterii albo innej metryki pomocniczej.
• Etykiety jazdy PRND, z D podświetlonym w okrągłym indicatorze stanu.
• Ciemny styl dashboardu embedded, z czytelną białą typografią i czerwono-różowym akcentem gauge.
• Brak zależności od obrazów, więc UI pozostaje lekka i edytowalna jako obiekty LVGL.
• Trzy bundled style fontów, zgodne z hierarchią tekstu Plus Jakarta Sans ze screenshota.
• Jeden zasób widgetu wielokrotnego użytku, widoczny w lokalnej bibliotece szablonu do szybkiego użycia w innych projektach PicoPixel.

Migawka zasobów

Szablon jest celowo lekki. W panelu zasobów lokalna biblioteka pokazuje:

• Images: 0, gauge nie jest statycznym screenshotem.
• Colors: 0, obecna paleta jest zastosowana bezpośrednio w projekcie.
• Fonts: 3, używające Plus Jakarta Sans w kilku rozmiarach.
• Widgets: 1, wielokrotnego użytku preview widgetu prędkościomierza, który można upuścić w innym projekcie.

Bundled zestaw fontów jest dobrany do hierarchii wizualnej gauge:

• PlusJakartaSans ExtraLight 16, używany dla małego tekstu pomocniczego, takiego jak suffix odometru.
• PlusJakartaSans Light 20, używany dla etykiet wspierających, takich jak km/h i tekst stanu jazdy.
• PlusJakartaSans SemiBold 110, używany dla dużej centralnej wartości prędkości.

Dzięki temu export LVGL może pozostać skupiony na edytowalnych prymitywach: etykietach, kontenerach, arc i fontach, bez przenoszenia niepotrzebnych zasobów obrazów.

Struktura ukierunkowana na LVGL

Screenshot pokazuje małą, przyjazną eksportowi hierarchię zamiast mockupu ciężkiego od bitmap. Design jest zbudowany wokół jednego ekranu, kontenerów do grupowania, kilku etykiet, grupy odometru i głównego arc.

• Screen 1 to canvas 480 x 480.
• Kontener root trzyma layout gauge i utrzymuje dashboard wyśrodkowany.
• Tekst odometru jest zgrupowany, aby liczba i suffix km mogły przesuwać się razem.
• Centralna wartość prędkości jest dużą etykietą, co ułatwia aktualizacje runtime przez lv_label_set_text albo lv_label_set_text_fmt.
• Główny gauge jest arc LVGL, więc ten sam widok można napędzać przez lv_arc_set_value.
• Wiersz PRND jest zbudowany z etykiet, a aktywny stan jazdy jest podkreślony małym okrągłym kontenerem.

To jest struktura, której chcesz w szablonie prędkościomierza LVGL: dial jest edytowalny, tekst jest live, a wyeksportowany kod może pozostać blisko normalnych wzorców LVGL.

Dlaczego to dobrze działa z LVGL

Ten przykład jest użyteczny nie tylko jako ładny screenshot. Jest zaprojektowany wokół rzeczy, które LVGL dobrze renderuje na hardware embedded.

• Renderowanie arc jest natywne w LVGL, więc pierścień prędkości nie wymaga dużego przezroczystego obrazu.
• Etykiety są tanie w aktualizacji, co jest idealne dla zmieniającej się prędkości, dystansu, zasięgu baterii albo tekstu trybu.
• Stan wizualny jest jawny, więc firmware może niezależnie aktualizować wartość arc, centralną etykietę, odometr i wybór trybu jazdy.
• Design jest kompaktowy, bez importowanych zasobów obrazów i tylko z fontami potrzebnymi do wyglądu dashboardu.
• Eksportuje się jako standardowy kod UI LVGL 8.x, więc możesz zintegrować go z ESP-IDF, Arduino, PlatformIO, STM32, Zephyr albo innym projektem LVGL.

Pomysły na dostosowanie

Użyj tego jako darmowego punktu startowego dla gauge LVGL, a potem dopracuj detale pod własny produkt albo demo.

• Zmień zakres prędkości ze skali drogowej na 0-100, 0-240, 0-8000 RPM, procent baterii, pozycję przepustnicy albo temperaturę.
• Dopasuj grubość arc, kąt startu, kąt końca i kolor do kształtu displayu.
• Zamień czerwono-różowy akcent na kolory brandu, kolory warning albo kolory zależne od zakresu.
• Zastąp km/h przez mph, RPM, %, W, V, A, C albo F.
• Użyj wiersza odometru dla trip distance, uptime, remaining range, lap count albo total energy.
• Zastąp PRND własnymi trybami, takimi jak ECO, SPORT, PARK, AUTO albo MANUAL.
• Dodaj małe ikony, pasek baterii, wskaźniki ostrzeżeń, stany kierunkowskazów albo drugi arc dla RPM.
• Animuj zmiany wartości callbackiem LVGL timer albo animation callback, zamiast natychmiastowego przeskoku etykiety.

Podłączanie danych live

Po eksporcie z PicoPixel trzymaj wygenerowane pliki UI w projekcie i aktualizuj nazwane obiekty z pętli firmware, event handlera albo timera LVGL. Dokładne nazwy obiektów zależą od tego, jak nazwiesz widgety przed eksportem, ale runtime pattern wygląda tak:

static void dashboard_set_speed(int speed_kph, uint32_t odometer_km)
{
    lv_arc_set_value(ui_speed_arc, speed_kph);
    lv_label_set_text_fmt(ui_speed_value_label, "%d", speed_kph);
    lv_label_set_text_fmt(ui_odo_label, "%lu km", (unsigned long)odometer_km);
}

Jeśli prędkość pochodzi z GPS, CAN, UART, BLE, kontrolera silnika albo danych symulowanych, trzymaj parsowanie specyficzne dla hardware poza kodem UI. Funkcja UI niech otrzymuje czyste wartości i obsługuje tylko aktualizacje LVGL.

Eksport do projektu

Otwórz szablon w PicoPixel, w razie potrzeby dopasuj rozmiar displayu, zmień nazwy kluczowych widgetów, a potem wyeksportuj projekt jako kod LVGL C. Wygenerowane pliki można dodać do istniejącego projektu embedded tak jak każdą inną UI LVGL.

Dla projektów ESP32 typowy flow wygląda tak:

1. Skonfiguruj sterowniki display i touch/input.
2. Wyeksportuj UI PicoPixel jako LVGL C.
3. Dodaj wyeksportowane pliki do projektu ESP-IDF, Arduino albo PlatformIO.
4. Wywołaj ui_init() po przygotowaniu LVGL i sterownika display.
5. Aktualizuj wartości prędkościomierza z pętli telemetrycznej, kolejki zdarzeń albo lv_timer.

Szerszy walkthrough znajdziesz w ESP32 LVGL UI tutorial oraz przewodniku using PicoPixel templates.

Najlepsze zastosowania

Ten szablon jest szybkim wizualnym punktem startowym, gdy potrzebujesz:

• demo prędkościomierza LVGL
• prototypów dashboardu ESP32
• klastrów pojazdu na okrągły display
• ekranów telemetrycznych e-bike, skutera, go-karta albo RC
• paneli industrial gauge
• dashboardów symulatora
• wyświetlaczy prędkości silnika albo RPM
• interfejsów zasięgu baterii i trybu jazdy

To także dobry plik do nauki, jeśli chcesz zobaczyć, jak gauge LVGL można zbudować ze zwykłych widgetów przed stworzeniem bardziej złożonego instrument cluster.