Snelheidsmeter-voorbeeld - Sjablonen

Overzicht

Zoek je een gratis LVGL-snelheidsmetervoorbeeld? Deze PicoPixel-sjabloon geeft je een kant-en-klaar 480 x 480 dashboardinstrument, opgebouwd uit standaard LVGL-vriendelijke onderdelen: een op arc gebaseerde snelheidsring, een grote numerieke snelheidswaarde, kilometertellertekst, een eenheidslabel en compacte PRND-rijstatuslabels.

Het project is bewust eenvoudig en makkelijk aan te passen. Gebruik het als starter voor een ESP32-voertuigdashboard, e-bike-display, scootercluster, RC-controller, simulatorpaneel, industriële motormeter of elke embedded UI waarin een live waarde moet aanvoelen als een echt instrument.

Omdat het ontwerp is gemaakt van labels, containers, fonts en een LVGL-arc in plaats van een ingebakken afbeelding, is het een praktische basis voor het exporteren van schone LVGL C-code en het koppelen van de waarden aan je eigen sensor, CAN-bus, GPS, motorcontroller of demodatabron.

Wat is inbegrepen

480 x 480 dashboardscherm, geschikt voor vierkante canvassen en makkelijk aan te passen aan ronde displays.
LVGL arc-meter, waarbij de arc-widget als belangrijkste snelheidsring wordt gebruikt zodat de indicator vanuit code kan worden bijgewerkt.
Groot numeriek snelheidslabel, weergegeven als 135 in de preview voor een sterk instrumentcluster-focuspunt.
Eenheidslabel, momenteel km/h, klaar om te wijzigen naar mph, %, RPM, W of een andere meting.
Kilometertellergroep, weergegeven als 9138 km, nuttig voor kilometerstand, ritafstand, runtime, batterijbereik of een andere secundaire metric.
PRND-rijlabels, met D uitgelicht in een ronde statusindicator.
Donkere embedded-dashboardstijl, met witte typografie met hoog contrast en een rood/roze meteraccent.
Geen afbeeldingsafhankelijkheid, zodat de UI licht en bewerkbaar blijft als LVGL-objecten.
Drie gebundelde fontstijlen, passend bij de Plus Jakarta Sans-teksthiërarchie in de screenshot.
Eén herbruikbare widgetasset, zichtbaar in de lokale bibliotheek van de sjabloon voor snel hergebruik in andere PicoPixel-projecten.

Asset-snapshot

De sjabloon is bewust lean. In het assets-paneel toont de lokale bibliotheek:

Afbeeldingen: 0, de meter is geen statische screenshot.
Kleuren: 0, het huidige palet is rechtstreeks in het ontwerp toegepast.
Fonts: 3, met Plus Jakarta Sans op meerdere groottes.
Widgets: 1, een herbruikbare snelheidsmeterwidgetpreview die in een ander project kan worden geplaatst.

De gebundelde fontset is afgestemd op de visuele hiërarchie in de meter:

PlusJakartaSans ExtraLight 16, gebruikt voor kleine secundaire tekst zoals het kilometertellersuffix.
PlusJakartaSans Light 20, gebruikt voor ondersteunende labels zoals km/h en rijstatustekst.
PlusJakartaSans SemiBold 110, gebruikt voor de grote centrale snelheidswaarde.

Dat betekent dat de LVGL-export gericht kan blijven op bewerkbare primitives: labels, containers, een arc en fonts, zonder onnodige afbeeldingsassets mee te nemen.

LVGL-gerichte structuur

De screenshot toont een kleine, exportvriendelijke hiërarchie in plaats van een bitmap-zware mockup. Het ontwerp is opgebouwd rond één scherm, containers voor groepering, meerdere labels, een kilometertellergroep en de hoofdarc.

Screen 1 is het 480 x 480 canvas.
Een rootcontainer bevat de meterlayout en houdt het dashboard gecentreerd.
De kilometertellertekst is gegroepeerd zodat het getal en het km-suffix samen kunnen bewegen.
De centrale snelheidswaarde is een groot label, waardoor runtime-updates eenvoudig zijn met lv_label_set_text of lv_label_set_text_fmt.
De hoofdmeter is een LVGL-arc, zodat dezelfde visual kan worden aangestuurd met lv_arc_set_value.
De PRND-rij is gemaakt van labels, waarbij de actieve rijstatus wordt benadrukt met een kleine ronde container.

Dit is het soort structuur dat je wilt voor een LVGL-snelheidsmetersjabloon: de wijzerplaat is bewerkbaar, de tekst is live en de geëxporteerde code kan dicht bij normale LVGL-patronen blijven.

TIP

Hernoem voor het exporteren de belangrijke objecten in PicoPixel, bijvoorbeeld speed_arc, speed_value_label, unit_label, odo_label en drive_state_label. Duidelijke namen maken de gegenereerde LVGL C veel makkelijker bij te werken vanuit je firmware.

Waarom dit goed werkt voor LVGL

Dit voorbeeld is nuttig als meer dan een mooie screenshot. Het is ontworpen rond dingen die LVGL goed kan renderen op embedded hardware.

Arc-rendering is native in LVGL, dus de snelheidsring heeft geen grote transparante afbeelding nodig.
Labels zijn goedkoop bij te werken, ideaal voor veranderende snelheid, afstand, batterijbereik of modustekst.
De visuele status is expliciet, zodat je firmware de arcwaarde, het centrale label, de kilometerteller en de rijselectie onafhankelijk kan bijwerken.
Het ontwerp is compact, zonder geïmporteerde afbeeldingsassets en met alleen de fonts die nodig zijn voor de dashboardlook.
Het exporteert als standaard LVGL 8.x UI-code, zodat je het kunt integreren in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr of een ander LVGL-project.

Ideeën voor aanpassing

Gebruik dit als gratis LVGL-meterstartpunt en stem daarna de details af op je eigen product of demo.

Wijzig het snelheidsbereik van een wegsnelheidsschaal naar 0-100, 0-240, 0-8000 RPM, batterijpercentage, gaspedaalstand of temperatuur.
Pas de arcdikte, beginhoek, eindhoek en kleur aan de vorm van je display aan.
Vervang het rood/roze accent door merkkleuren, waarschuwingskleuren of bereikafhankelijke kleuren.
Vervang km/h door mph, RPM, %, W, V, A, C of F.
Gebruik de kilometertellerrij voor ritafstand, uptime, resterend bereik, rondetelling of totale energie.
Vervang PRND door aangepaste modi zoals ECO, SPORT, PARK, AUTO of MANUAL.
Voeg kleine iconen, een batterijbalk, waarschuwingsindicatoren, richtingaanwijzerstates of een tweede arc voor RPM toe.
Animeer waardeveranderingen met een LVGL-timer of animatiecallback in plaats van het label direct te laten springen.

Live data bedraden

Houd na export vanuit PicoPixel de gegenereerde UI-bestanden in je project en werk de benoemde objecten bij vanuit je firmwareloop, eventhandler of LVGL-timer. De exacte objectnamen hangen af van hoe je de widgets vóór export noemt, maar het runtime-patroon ziet er zo uit:

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

Als je snelheid uit GPS, CAN, UART, BLE, een motorcontroller of gesimuleerde data komt, houd dan de hardware-specifieke parsing buiten de UI-code. Laat de UI-functie schone waarden ontvangen en alleen de LVGL-updates uitvoeren.

Exporteren naar je project

Open de sjabloon in PicoPixel, pas indien nodig de displaygrootte aan, hernoem de belangrijkste widgets en exporteer het project daarna als LVGL C-code. De gegenereerde bestanden kunnen net als elke andere LVGL-UI aan een bestaand embedded project worden toegevoegd.

Voor ESP32-projecten is de gebruikelijke flow:

Configureer je display- en touch/inputdrivers.
Exporteer de PicoPixel-UI als LVGL C.
Voeg de geëxporteerde bestanden toe aan je ESP-IDF-, Arduino- of PlatformIO-project.
Roep ui_init() aan nadat LVGL en je displaydriver klaar zijn.
Werk de snelheidsmeterwaarden bij vanuit je telemetrieloop, eventqueue of lv_timer.

Zie voor een bredere walkthrough de ESP32 LVGL UI tutorial en de gids over PicoPixel templates gebruiken.

Beste toepassingen

Deze sjabloon past goed wanneer je een snel visueel startpunt nodig hebt voor:

LVGL-snelheidsmeterdemo's
ESP32-dashboardprototypes
Voertuigclusters met rond display
E-bike-, scooter-, go-kart- of RC-telemetrieschermen
Industriële meterpanelen
Simulatordashboards
Motorsnelheids- of RPM-displays
Interfaces voor batterijbereik en rijmodus

Het is ook een goed leerbestand als je wilt zien hoe een LVGL-meter uit normale widgets kan worden opgebouwd voordat je een complexer instrumentcluster maakt.