Tacho-Beispiel

Enthalten

• 480 x 480 Dashboard-Screen, ausgelegt für quadratische Canvases 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ßes numerisches Geschwindigkeitslabel, in der Vorschau als 135 dargestellt, als starker Fokuspunkt eines Instrumentenclusters.
• Einheitenlabel, 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, Trip-Distanz, Laufzeit, Batteriereichweite oder eine andere sekundäre Kennzahl.
• PRND-Fahrlabels, mit D in einem kreisförmigen Zustandsindikator hervorgehoben.
• Dunkles Embedded-Dashboard-Styling, mit kontrastreicher weißer Typografie und rotem/pinkem Akzent im Instrument.
• Keine Bildabhängigkeit, sodass die UI als LVGL-Objekte leichtgewichtig und editierbar bleibt.
• Drei gebündelte 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 gebündelte Font-Set 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 Fahrzustandstext.
• PlusJakartaSans SemiBold 110, verwendet für den großen zentralen Geschwindigkeitswert.

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

LVGL-fokussierte Struktur

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

• Screen 1 ist der 480 x 480 Canvas.
• Ein Root-Container hält das Instrumentenlayout und zentriert das Dashboard.
• Der Kilometerzählertext 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 genau das, was Sie für eine LVGL-Tachovorlage wollen: Die Skala ist editierbar, der Text ist live, und der exportierte Code bleibt nah an normalen LVGL-Mustern.

Warum das gut für LVGL funktioniert

Dieses Beispiel ist mehr als ein hübscher Screenshot. Es ist um Dinge herum gestaltet, die LVGL auf eingebetteter Hardware gut rendern kann.

• Arc-Rendering ist nativ in LVGL, daher benötigt der Geschwindigkeitsring kein großes transparentes Bild.
• Labels sind günstig zu aktualisieren, ideal für wechselnde Geschwindigkeit, Distanz, Batteriereichweite oder Modustext.
• Der visuelle Zustand ist explizit, sodass Ihre 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 exportiert als standardmäßiger LVGL-8.x-UI-Code, sodass Sie es in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr oder ein anderes LVGL-Projekt integrieren können.

Anpassungsideen

Verwenden Sie dies als kostenlosen LVGL-Gauge-Ausgangspunkt und stimmen Sie anschließend die Details auf Ihr eigenes Produkt oder Ihre Demo ab.

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

Live-Daten verdrahten

Nach dem Export aus PicoPixel behalten Sie die generierten UI-Dateien in Ihrem Projekt und aktualisieren die benannten Objekte aus Ihrer Firmware-Schleife, einem Event-Handler oder einem LVGL-Timer. Die genauen Objektnamen hängen davon ab, wie Sie die Widgets vor dem Export benennen, aber das Laufzeitmuster 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 Ihre Geschwindigkeit von GPS, CAN, UART, BLE, einem Motorcontroller oder simulierten Daten kommt, halten Sie das hardwarespezifische Parsen außerhalb des UI-Codes. Lassen Sie die UI-Funktion saubere Werte empfangen und nur die LVGL-Updates durchführen.

Export in Ihr Projekt

Öffnen Sie die Vorlage in PicoPixel, passen Sie bei Bedarf die Displaygröße an, benennen Sie die wichtigsten Widgets um und exportieren Sie 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. Konfigurieren Sie Ihre Display- und Touch-/Eingabetreiber.
2. Exportieren Sie die PicoPixel-UI als LVGL C.
3. Fügen Sie die exportierten Dateien Ihrem ESP-IDF-, Arduino- oder PlatformIO-Projekt hinzu.
4. Rufen Sie ui_init() auf, nachdem LVGL und Ihr Display-Treiber bereit sind.
5. Aktualisieren Sie die Tacho-Werte aus Ihrer 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.

Beste Einsatzfälle

Diese Vorlage passt gut, wenn Sie einen schnellen visuellen Ausgangspunkt brauchen für:

• LVGL-Tacho-Demos
• ESP32-Dashboard-Prototypen
• Fahrzeugcluster 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 Sie sehen möchten, wie ein LVGL-Instrument aus normalen Widgets aufgebaut werden kann, bevor Sie ein komplexeres Instrumentencluster bauen.