Tacho-Beispiel

Enthalten

• 480 x 480 Dashboard-Ansicht, ausgelegt für quadratische Displays und leicht an runde Displays anpassbar.
• LVGL-Arc-Anzeige, die das Arc-Widget als Hauptring verwendet, damit der Indikator aus Code aktualisiert werden kann.
• Großer numerischer Geschwindigkeitswert, in der Vorschau als 135 dargestellt, als zentraler Blickfang im Kombiinstrument.
• Beschriftung der Maßeinheit, aktuell km/h, bereit für mph, %, RPM, W oder eine andere Messgröße.
• Kilometerzähler-Gruppe, dargestellt als 9138 km, nützlich für Laufleistung, Tageskilometer, Laufzeit, Batteriereichweite oder eine andere sekundäre Kennzahl.
• PRND-Fahrstufenanzeigen, mit D in einem kreisförmigen Zustandsindikator hervorgehoben.
• Dunkles Embedded-Dashboard-Styling, mit kontrastreicher weißer Typografie und rotem/pinkem Akzent im Instrument.
• Keine Bilddateien nötig, sodass die UI als LVGL-Objekte leichtgewichtig und bearbeitbar bleibt.
• Drei mitgelieferte Schriftstile, passend zur Plus-Jakarta-Sans-Texthierarchie im Screenshot.
• Ein wiederverwendbares Widget-Asset, sichtbar in der lokalen Bibliothek der Vorlage für schnelle Wiederverwendung in anderen PicoPixel-Projekten.

Asset-Überblick

Die Vorlage ist bewusst schlank. Im Assets-Panel zeigt die lokale Bibliothek:

• Bilder: 0, das Instrument ist kein statischer Screenshot.
• Farben: 0, die aktuelle Palette ist direkt im Design angewendet.
• Schriften: 3, mit Plus Jakarta Sans in mehreren Größen.
• Widgets: 1, eine wiederverwendbare Tacho-Widget-Vorschau, die in ein anderes Projekt gezogen werden kann.

Das mitgelieferte Schriftenset ist für die visuelle Hierarchie des Instruments dimensioniert:

• PlusJakartaSans ExtraLight 16, verwendet für kleine sekundäre Texte wie den Kilometerzähler-Suffix.
• PlusJakartaSans Light 20, verwendet für unterstützende Labels wie km/h und Fahrstufenanzeige.
• PlusJakartaSans SemiBold 110, verwendet für den großen zentralen Geschwindigkeitswert.

Damit kann der LVGL-Export auf bearbeitbare Primitive fokussiert bleiben: Labels, Container, ein Arc und Schriften, ohne unnötige Bild-Assets mitzuführen.

Aufbau mit LVGL-Widgets

Der Screenshot zeigt eine kleine, exportfreundliche Hierarchie statt eines bitmaplastigen Mockups. Das Design baut in einer Ansicht, Containern zur Gruppierung, mehreren Labels, einer Kilometerzähler-Gruppe und dem Haupt-Arc auf.

• Screen 1 ist die 480 x 480 große Arbeitsfläche.
• Ein Root-Container hält das Instrumentenlayout und zentriert das Dashboard.
• Der Kilometerstand ist gruppiert, sodass Zahl und km-Suffix zusammen verschoben werden können.
• Der zentrale Geschwindigkeitswert ist ein großes Label, wodurch Laufzeit-Updates mit lv_label_set_text oder lv_label_set_text_fmt einfach sind.
• Das Hauptinstrument ist ein LVGL-Arc, daher kann dieselbe Visualisierung mit lv_arc_set_value gesteuert werden.
• Die PRND-Zeile besteht aus Labels, wobei der aktive Fahrzustand durch einen kleinen kreisförmigen Container betont wird.

Diese Struktur ist eine gute Grundlage für einen LVGL-Tachometer: Die Skala bleibt bearbeitbar, der Text lässt sich zur Laufzeit aktualisieren und der exportierte Code verwendet die üblichen LVGL-Funktionen.

Warum das gut für LVGL funktioniert

Das Beispiel verwendet Elemente, die LVGL auf Embedded-Hardware effizient darstellen kann.

• Arc-Rendering ist nativ in LVGL, daher benötigt der Geschwindigkeitsring kein großes transparentes Bild.
• Labels lassen sich mit wenig Rechenaufwand aktualisieren, ideal für wechselnde Geschwindigkeit, Distanz, Batteriereichweite oder Modustext.
• Jede Anzeige ist einzeln steuerbar, sodass deine Firmware Arc-Wert, zentrales Label, Kilometerzähler und Fahrstufenauswahl unabhängig aktualisieren kann.
• Das Design ist kompakt, ohne importierte Bild-Assets und nur mit den Schriften, die für den Dashboard-Look nötig sind.
• Es lässt sich exportieren als Standard-LVGL-8.x-Code, sodass du es in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr oder ein anderes LVGL-Projekt integrieren kannst.

Anpassungsideen

Verwende dies als kostenlosen Ausgangspunkt für eine LVGL-Instrumentenanzeige und stimme anschließend die Details auf dein eigenes Produkt oder deine Demo ab.

• Ändere den Geschwindigkeitsbereich von einer Straßenskala zu 0-100, 0-240, 0-8000 RPM, Batterieprozent, Gasposition oder Temperatur.
• Passe Arc-Dicke, Startwinkel, Endwinkel und Farbe an deine Displayform an.
• Tausche den rot/pinken Akzent gegen Markenfarben, Warnfarben oder bereichsabhängige Farben.
• Ersetze km/h durch mph, RPM, %, W, V, A, C oder F.
• Nutze die Kilometerzählerzeile für Tageskilometer, Betriebszeit, verbleibende Reichweite, Rundenzahl oder Gesamtenergie.
• Ersetze PRND durch eigene Modi wie ECO, SPORT, PARK, AUTO oder MANUAL.
• Füge kleine Icons, eine Batterieleiste, Warnindikatoren, Blinkerzustände oder einen zweiten Arc für RPM hinzu.
• Animiere Wertänderungen mit einem LVGL-Timer oder Animations-Callback, statt das Label sofort springen zu lassen.

Live-Daten verknüpfen

Nach dem Export aus PicoPixel behalte die generierten UI-Dateien in deinem Projekt und aktualisiere die benannten Objekte aus deiner Firmware-Schleife, einem Event-Handler oder einem LVGL-Timer. Die genauen Objektnamen hängen davon ab, wie du die Widgets vor dem Export benennst, aber das Ansteuerung zur Laufzeit sieht so aus:

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);
}

Wenn deine Geschwindigkeit von GPS, CAN, UART, BLE, einem Motorcontroller oder simulierten Daten kommt, halte das hardwarespezifische Parsen außerhalb des UI-Codes. Lass die UI-Funktion saubere Werte empfangen und nur die LVGL-Updates durchführen.

Export in dein Projekt

Öffne die Vorlage in PicoPixel, passe bei Bedarf die Displaygröße an, benenne die wichtigsten Widgets um und exportiere das Projekt dann als LVGL-C-Code. Die generierten Dateien können wie jede andere LVGL-UI zu einem bestehenden Embedded-Projekt hinzugefügt werden.

Für ESP32-Projekte ist der übliche Ablauf:

1. Konfiguriere deine Display- und Touch-/Eingabetreiber.
2. Exportiere die PicoPixel-UI als LVGL-C-Code.
3. Füge die exportierten Dateien deinem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu.
4. Rufe ui_init() auf, nachdem LVGL und dein Display-Treiber bereit sind.
5. Aktualisiere die Tacho-Werte aus deiner Telemetrie-Schleife, Event-Queue oder einem lv_timer.

Für eine breitere Anleitung siehe das ESP32-LVGL-UI-Tutorial und den Leitfaden zur Verwendung von PicoPixel-Vorlagen.

Geeignete Einsatzbereiche

Diese Vorlage eignet sich als schneller Einstieg in:

• LVGL-Tacho-Demos
• ESP32-Dashboard-Prototypen
• Kombiinstrumente für runde Displays
• E-Bike-, Scooter-, Go-Kart- oder RC-Telemetriescreens
• Industrielle Instrumentenpanels
• Simulator-Dashboards
• Motordrehzahl- oder RPM-Anzeigen
• Batteriereichweite- und Fahrmodus-Interfaces

Sie ist auch eine gute Lerndatei, wenn du sehen möchtest, wie ein LVGL-Instrument aus normalen Widgets aufgebaut werden kann, bevor du ein komplexeres Kombiinstrument baust.