Voorbeelden van events - Sjablonen

Overzicht

Met dit gratis LVGL-sjabloon leer je interacties instellen zonder elke callback zelf te schrijven. Het bevat een scherm van 480 x 480 met knoppen die via de event-editor van PicoPixel andere elementen aanpassen.

De voorbeelden laten zien hoe een knopdruk de dekking, tekst of grootte van een object verandert, of een animatie start. Gebruik ze voor ESP32-dashboards met aanraakbediening, kiosken, domotica, wearables of instellingenpanelen: overal waar de interface direct op een handeling moet reageren.

Op het canvas zie je de interface. In de eventweergave zie je ook de verbindingen: knoppen links, doelobjecten rechts en lijnen ertussen. In het eigenschappenpaneel stel je de bron, trigger, actie, waarde en bestemming in.

Wat is inbegrepen

Een LVGL-scherm van 480 x 480, geschikt voor kleine displays en snelle experimenten.
Vijf knoppen, elk met een andere reactie van de interface.
Knoppen voor dekking, waarbij Low Opacity en High Opacity dezelfde afbeelding aanpassen.
Een tekstvoorbeeld, waarbij Change Text een label bijwerkt.
Een voorbeeld van objecteigenschappen, waarbij Set Properties - Size de grootte van een object wijzigt.
Een animatievoorbeeld, waarbij Play Animation een beweging of overgang start.
De verbindingen in de event-editor, met zichtbare lijnen en knooppunten voor de trigger Clicked.
Het eigenschappenpaneel voor events, met bron, trigger, actie, dekking en bestemming.
Afbeeldingen als doelobject, met een eenvoudig cyaan PicoPixel-pictogram dat de veranderingen goed zichtbaar maakt.
Het lettertype Doto 32, voor de tekst met het kenmerkende stippenpatroon.

Gebruikte assets

Het voorbeeld is klein genoeg om snel te begrijpen. De lokale bibliotheek in Assets bevat:

Afbeeldingen: 1, een herbruikbare cyaan afbeelding van 500 x 500 voor de doelobjecten.
Kleuren: 0; de kleuren zijn rechtstreeks in het ontwerp ingesteld.
Lettertypen: 1, Doto 32, voor de labels met stippenpatroon.
Widgets: 0; het voorbeeld draait om events tussen schermobjecten, zonder opgeslagen bibliotheekwidgets.

Het lagenpaneel bevat:

Screen 1, het canvas van 480 x 480.
Button 1 tot en met Button 5, de knoppen die de acties starten.
Image 1, Image 2 en Image 3, waarop de dekking, grootte en animaties worden toegepast.
Label 1, het label voor het tekstvoorbeeld.

De bron en bestemming van elk event staan op hetzelfde scherm. Daardoor zie je meteen wat een actie verandert.

Opbouw van de event-editor

In de eventweergave tekent PicoPixel de verbindingen over het LVGL-ontwerp heen. Het project is gemarkeerd met Contains Events; de lijnen lopen van de knoppen naar de bijbehorende doelobjecten.

Low Opacity en High Opacity gebruiken Clicked en zijn met dezelfde afbeelding verbonden.
Change Text gebruikt Clicked en is verbonden met het tekstlabel met stippenpatroon.
Set Properties - Size gebruikt Clicked om de grootte van een afbeelding te wijzigen.
Play Animation gebruikt Clicked om een afbeelding te animeren.
Rechts toont het paneel het geselecteerde event met Source, Trigger, Action, waarden zoals Opacity en Destination.

Zo zie je hoe een handeling van de gebruiker een LVGL-object verandert. De verbinding tussen trigger en doel blijft zichtbaar tijdens het ontwerpen.

TIP

Geef belangrijke objecten vóór het exporteren herkenbare namen, zoals btn_low_opacity, btn_high_opacity, btn_change_text, btn_set_size, btn_play_animation, target_image en status_label. Dat maakt de gegenereerde LVGL-callbacks makkelijker te begrijpen.

Waarom dit goed werkt voor LVGL

Een LVGL-interface bevat vaak veel kleine interacties: een knop indrukken, een label bijwerken, een object verplaatsen, van scherm wisselen of een animatie starten. Dit voorbeeld maakt die handelingen zichtbaar en herbruikbaar.

De knoppen zijn gewone LVGL-invoerobjecten. Je kunt hetzelfde patroon gebruiken met aanraakbediening, selectie via een draaiknop of andere invoerdrivers.
De trigger is zichtbaar. De knooppunten met Clicked laten zien waardoor een actie start.
De doelobjecten zijn gewone LVGL-afbeeldingen en labels. Je kunt ze na het exporteren nog vanuit je firmware aanpassen.
Wijzigingen in dekking en eigenschappen kosten weinig rekenkracht. Ze zijn daardoor geschikt voor kleine embedded displays.
Het animatievoorbeeld laat de hele keten zien: een gebruikersactie start een animatie die vervolgens zelfstandig verderloopt.
Het project levert standaard UI-code voor LVGL 8.x op, geschikt voor ESP-IDF, Arduino, PlatformIO, STM32, Zephyr en andere LVGL-projecten.

Gebruik vanuit de firmware

PicoPixel genereert de eventverbindingen voor je. In de LVGL-code worden dat callbacks. Wil je eigen firmwarelogica toevoegen, controleer dan eerst welk event is binnengekomen en werk vervolgens het doelobject bij.

static void low_opacity_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_obj_set_style_opa(ui_target_image, LV_OPA_30, 0);
}

static void change_text_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_label_set_text(ui_status_label, "Clicked");
}

Gebruik de visuele editor voor veelvoorkomende interacties. Schrijf eigen C-callbacks voor gedrag dat afhangt van firmwarestatus, sensorgegevens, apparaatinstellingen of netwerkreacties.

Ideeën om het aan te passen

Vervang de voorbeeldknoppen door de bedieningselementen van je eigen product:

Gebruik schakelaars, menu-items, dashboardknoppen of hardwarecommando's.
Laat de dekking aangeven of een element ingeschakeld, geselecteerd of in een waarschuwingstoestand is.
Gebruik tekstacties voor berichten zoals Connected, Saving, Armed, Charging of Complete.
Maak van het groottevoorbeeld een voortgangsindicator, uitklapbare kaart, ingedrukte knop of pulserende melding.
Gebruik animaties voor schermovergangen, bevestigingen, laadindicatoren of meldingen.
Voeg navigatie tussen meerdere schermen toe zodra je de voorbeelden op één scherm begrijpt.
Koppel knoppen aan je firmware om bijvoorbeeld de helderheid te wijzigen, een relais te schakelen, een modus te kiezen of een kalibratie te starten.

Exporteren naar je project

Open het sjabloon, bekijk de eventverbindingen en geef de bron- en doelobjecten herkenbare namen. Exporteer daarna de LVGL C-code en voeg de bestanden toe aan je bestaande embedded project.

Voor een ESP32-project zijn dit de gebruikelijke stappen:

Configureer je display- en invoerdrivers.
Pas de knoppen, labels, afbeeldingen en acties van het sjabloon aan.
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.
Voeg alleen eigen firmwarecallbacks toe voor gedrag dat je niet in de visuele event-editor kunt instellen.

Lees ook de uitleg over de event-editor, de ESP32 LVGL-handleiding en de gids over PicoPixel-sjablonen gebruiken.

Geschikte toepassingen

Gebruik dit sjabloon als startpunt voor:

Voorbeelden van LVGL-events
Demo's van interacties met knoppen
ESP32-prototypes met aanraakbediening
Instellingen- en bedieningspanelen
Domoticadashboards
Menu's voor wearables en draagbare apparaten
Animaties die op events reageren
Tekst en afbeeldingen die de apparaatstatus weergeven
Leren hoe de visuele events van PicoPixel worden omgezet in LVGL-code

Voorbeeldenvanevents