Voorbeeld van een snelheidsmeter - Sjablonen

Overzicht

Dit gratis LVGL-sjabloon bevat een snelheidsmeter van 480 x 480 die je direct kunt aanpassen. Hij bestaat uit gewone LVGL-elementen: een boogvormige snelheidsindicator, een groot getal voor de snelheid, een kilometerteller, een eenheidslabel en compacte PRND-labels voor de rijstand.

Het project is bewust eenvoudig opgezet. Gebruik het voor een ESP32-voertuigdashboard, een e-bike of scooter, een RC-controller, een simulator of een industrieel bedieningspaneel dat actuele meetwaarden moet tonen.

Het ontwerp bestaat uit labels, containers, lettertypen en een LVGL Arc-widget. Daardoor blijven de onderdelen bewerkbaar en kun je de geëxporteerde C-code koppelen aan een sensor, CAN-bus, GPS, motorcontroller of gesimuleerde gegevens.

Wat is inbegrepen

Een dashboardscherm van 480 x 480, geschikt voor vierkante schermen en makkelijk aan te passen aan ronde displays.
Een LVGL Arc-widget als snelheidsring, waarvan je de waarde vanuit de code kunt aanpassen.
Een groot snelheidslabel, met in het voorbeeld 135 als duidelijk leesbare hoofdwaarde.
Een eenheidslabel, nu km/h, dat je kunt vervangen door mph, %, RPM, W of een andere eenheid.
Een kilometertellergroep, met 9138 km als voorbeeld. Gebruik deze voor afstand, gebruiksduur, resterend bereik of een andere aanvullende meting.
PRND-labels, met D gemarkeerd in een ronde indicator.
Een donker dashboardthema, met goed leesbare witte tekst en een rood/roze accent.
Geen afbeeldingen, zodat de interface licht blijft en alle onderdelen bewerkbare LVGL-objecten zijn.
Drie lettertypestijlen, met Plus Jakarta Sans in verschillende groottes en gewichten.
Een herbruikbare widget in de lokale bibliotheek, die je ook in andere PicoPixel-projecten kunt gebruiken.

Gebruikte assets

De lokale bibliotheek bevat alleen wat de meter nodig heeft:

Afbeeldingen: 0; de meter is geen statische afbeelding.
Kleuren: 0; de kleuren zijn rechtstreeks in het ontwerp ingesteld.
Lettertypen: 3, met Plus Jakarta Sans in meerdere groottes.
Widgets: 1, een herbruikbare snelheidsmeter die je naar een ander project kunt slepen.

De lettertypen hebben elk hun eigen rol:

PlusJakartaSans ExtraLight 16 voor kleine aanvullende tekst, zoals het achtervoegsel van de kilometerteller.
PlusJakartaSans Light 20 voor labels zoals km/h en de rijstand.
PlusJakartaSans SemiBold 110 voor de grote snelheidswaarde in het midden.

De export bevat zo alleen bewerkbare labels, containers, een boog en lettertypen, zonder onnodige afbeeldingsbestanden.

Opbouw met LVGL-widgets

Het ontwerp heeft een overzichtelijke structuur: één scherm, containers om elementen te groeperen, labels, een kilometertellergroep en de boogvormige snelheidsindicator.

Screen 1 is het canvas van 480 x 480.
Een hoofdcontainer bepaalt de indeling en houdt de meter gecentreerd.
Het getal van de kilometerteller en het achtervoegsel km zijn gegroepeerd, zodat je ze samen kunt verplaatsen.
De snelheid is een groot label dat je tijdens gebruik kunt bijwerken met lv_label_set_text of lv_label_set_text_fmt.
De hoofdindicator is een LVGL Arc-widget, aan te sturen met lv_arc_set_value.
De PRND-rij bestaat uit labels; een kleine ronde container markeert de actieve rijstand.

Deze opbouw houdt de meter flexibel: je kunt de vorm aanpassen, de tekst vanuit de firmware bijwerken en de gewone LVGL-functies gebruiken.

TIP

Geef belangrijke objecten vóór het exporteren herkenbare namen, zoals speed_arc, speed_value_label, unit_label, odo_label en drive_state_label. Daarmee zijn ze in de gegenereerde C-code makkelijk terug te vinden en bij te werken.

Waarom dit goed werkt voor LVGL

Het ontwerp gebruikt elementen die LVGL efficiënt op embedded hardware kan tekenen.

LVGL tekent de boog zelf. Er is geen grote transparante afbeelding nodig voor de snelheidsring.
Labels bijwerken kost weinig rekenkracht. Dat is handig voor snelheid, afstand, bereik en modustekst.
De onderdelen zijn afzonderlijk aan te sturen. Je firmware kan de boog, de centrale snelheid, de kilometerteller en de rijstand los van elkaar bijwerken.
Het ontwerp gebruikt weinig assets, zonder afbeeldingen en met alleen de benodigde lettertypen.
De export bestaat uit standaard UI-code voor LVGL 8.x, geschikt voor ESP-IDF, Arduino, PlatformIO, STM32, Zephyr en andere LVGL-projecten.

Ideeën om het aan te passen

Gebruik het voorbeeld als basis voor je eigen meter:

Verander de snelheidsschaal in 0-100, 0-240, 0-8000 RPM, een batterijpercentage, gaspedaalstand of temperatuur.
Pas de dikte, beginhoek, eindhoek en kleur van de boog aan je scherm aan.
Gebruik je merkkleuren, waarschuwingskleuren of een kleur die met de meetwaarde verandert.
Vervang km/h door mph, RPM, %, W, V, A, C of F.
Toon bij de kilometerteller de ritafstand, gebruiksduur, resterende actieradius, het aantal ronden of het totale energieverbruik.
Vervang PRND door modi zoals ECO, SPORT, PARK, AUTO of MANUAL.
Voeg pictogrammen, een batterijbalk, waarschuwingen, richtingaanwijzers of een tweede boog voor het toerental toe.
Gebruik een LVGL-timer of animatiecallback om waarden vloeiend te laten veranderen.

Actuele gegevens koppelen

Voeg de gegenereerde bestanden toe aan je firmwareproject en werk de objecten bij vanuit je hoofdlus, eventhandler of LVGL-timer. De objectnamen hangen af van de namen die je in PicoPixel hebt gekozen. Het bijwerken werkt bijvoorbeeld zo:

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

Of de snelheid nu uit GPS, CAN, UART, BLE, een motorcontroller of een simulatie komt: verwerk die gegevens buiten de interfacecode. Geef de functie voor de interface kant-en-klare waarden, zodat die alleen de LVGL-objecten hoeft bij te werken.

Exporteren naar je project

Open het sjabloon, pas eventueel de schermgrootte aan en geef belangrijke widgets herkenbare namen. Exporteer daarna de LVGL C-code. Je kunt de bestanden aan een bestaand embedded project toevoegen zoals bij elke andere LVGL-interface.

Voor een ESP32-project zijn dit de gebruikelijke stappen:

Configureer je displaydriver en de drivers voor aanraking of andere invoer.
Exporteer de PicoPixel-interface als LVGL C-code.
Voeg de bestanden toe aan je ESP-IDF-, Arduino- of PlatformIO-project.
Roep ui_init() aan nadat LVGL en je displaydriver zijn geïnitialiseerd.
Werk de meterwaarden bij vanuit je telemetrielus, eventwachtrij of lv_timer.

Lees ook de ESP32 LVGL-handleiding en de gids over PicoPixel-sjablonen gebruiken.

Geschikte toepassingen

Gebruik dit sjabloon als startpunt voor:

Demo's van LVGL-snelheidsmeters
ESP32-dashboardprototypes
Voertuigdashboards met ronde schermen
Telemetrieschermen voor e-bikes, scooters, karts en RC-voertuigen
Industriële meetpanelen
Simulatordashboards
Snelheids- en toerentalmeters voor motoren
Weergave van resterend bereik en rijmodus

Het is ook een praktisch voorbeeld om te leren hoe je met gewone LVGL-widgets een meter opbouwt, voordat je een uitgebreider instrumentenpaneel maakt.

Voorbeeldvaneensnelheidsmeter