Events-voorbeeld

Wat is inbegrepen

• 480 x 480 LVGL-interactiescherm, geschikt voor embedded displays en snelle experimenten.
• Vijf knopvoorbeelden, elk met een ander soort UI-reactie.
• Opacity-controls, met Low Opacity- en High Opacity-knoppen verbonden met hetzelfde afbeeldingsdoel.
• Tekstupdatevoorbeeld, waarbij de knop Change Text een label wijzigt.
• Voorbeeld van eigenschapswijziging, waarbij Set Properties - Size de grootte van een doelobject wijzigt.
• Animatietrigger, waarbij Play Animation een event-gedreven beweging of overgang demonstreert.
• Preview van event-editorbedrading, met zichtbare verbindingslijnen en Clicked-triggernodes.
• Actie-instellingen aan de inspectorkant, met bron, trigger, actie, opacity-waarde en bestemmingsvelden.
• Afbeeldingsdoelen, met een eenvoudige cyaan PicoPixel-achtige graphic zodat statuswijzigingen makkelijk te zien zijn.
• Doto 32-fontasset, gebruikt voor de gestippelde displaytekst op het canvas.

Asset-snapshot

De sjabloon blijft klein genoeg om in één oogopslag te begrijpen. In het assets-paneel toont de lokale bibliotheek:

• Afbeeldingen: 1, een herbruikbare cyaan graphic van 500 x 500 die door de afbeeldingsdoelen wordt gebruikt.
• Kleuren: 0, waarbij kleuren rechtstreeks in het ontwerp zijn toegepast.
• Fonts: 1, Doto 32, gebruikt voor de gestippelde labeltekst.
• Widgets: 0, zodat het voorbeeld gericht blijft op event-bedrading op schermniveau in plaats van opgeslagen widgetassets.

Het lagenpaneel toont het project als een eenvoudig interactielab met één scherm:

• Screen 1, het 480 x 480 canvas.
• Button 1 tot en met Button 5, de klikbare bronnen voor de voorbeelden.
• Image 1, Image 2 en Image 3, de zichtbare doelen voor opacity-, grootte- en animatiewijzigingen.
• Label 1, het tekstdoel dat door het change-textvoorbeeld wordt gebruikt.

Dit maakt het nuttig om van te leren, omdat elke bron en bestemming zichtbaar is op hetzelfde scherm.

Structuur van de event editor

Wanneer de events-weergave actief is, legt PicoPixel de interactiegrafiek over de LVGL-layout heen. De screenshot toont dat het project is gemarkeerd met Contains Events en tekent daarna verbindingslijnen van de knopbronnen naar hun bestemmingen.

• Low Opacity en High Opacity gebruiken allebei een Clicked-trigger en lopen naar hetzelfde afbeeldingsdoel.
• Change Text gebruikt een Clicked-trigger en wijst naar het gestippelde tekstlabel.
• Set Properties - Size gebruikt een Clicked-trigger en wijst naar een afbeeldingsdoel voor resizing.
• Play Animation gebruikt een Clicked-trigger en wijst naar een afbeeldingsdoel voor animatieweergave.
• Het rechter eventpaneel toont één geselecteerd event met Source, Trigger, Action, waarde-instellingen zoals Opacity en Destination.

Die layout is de belangrijkste leswaarde van deze sjabloon: hij toont hoe PicoPixel's visuele eventgrafiek gebruikersinvoer naar LVGL-objectwijzigingen mappt zonder de relatie tussen trigger en doel te verbergen.

Waarom dit goed werkt voor LVGL

LVGL-applicaties hebben meestal veel kleine interacties nodig: op een knop klikken, een label bijwerken, de status van een object wijzigen, een afbeelding verplaatsen, van scherm wisselen of een animatie starten. Dit voorbeeld houdt die patronen zichtbaar en herbruikbaar.

• Knoppen zijn native LVGL-inputobjecten, dus hetzelfde patroon werkt met touch, encoderfocus of andere inputdrivers.
• De trigger is expliciet, met Clicked-nodes in de editor zodat duidelijk is wat elke actie start.
• Doelen zijn normale LVGL-objecten, waaronder afbeeldingen en labels, dus de geëxporteerde UI blijft vanuit firmware bewerkbaar.
• Opacity- en eigenschapswijzigingen zijn lichtgewicht, waardoor de voorbeelden geschikt zijn voor kleine embedded displays.
• Animatiebedrading leert de overdracht, van een gebruikersevent naar een visuele wijziging die zelfstandig kan lopen.
• Het project exporteert als standaard LVGL 8.x UI-code, zodat het kan worden geïntegreerd in ESP-IDF, Arduino, PlatformIO, STM32, Zephyr of een andere LVGL-build.

Runtime-patroon

PicoPixel kan de eventbedrading voor je genereren, maar het concept mappt rechtstreeks naar normale LVGL-callbacks. Als je de geëxporteerde UI met eigen firmwarelogica moet uitbreiden, is het patroon meestal: controleer de eventcode en werk daarna 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 de gebruikelijke bedrading en reserveer eigen C-callbacks voor gedrag dat afhangt van firmwarestatus, sensordata, apparaatinstellingen of netwerkreacties.

Ideeën voor aanpassing

Gebruik dit als gratis LVGL-interactiesjabloon en vervang daarna de democontrols door je eigen product-UI.

• Vervang de vijf demoknoppen door instellingstoggles, menu-items, dashboardcontrols of hardwarecommando's.
• Verander de opacity-acties in disabled/enabled states, waarschuwingsstates of selected/unselected states.
• Gebruik de tekstactie voor statusberichten zoals Connected, Saving, Armed, Charging of Complete.
• Maak van het voorbeeld voor grootte-eigenschappen een voortgangsindicator, uitgeklapte kaart, pressed-state-effect of notificatiepulse.
• Gebruik het animatievoorbeeld voor paginaovergangen, bevestigingsfeedback, laadstatussen of aandachtscues.
• Voeg navigatieacties tussen meerdere LVGL-schermen toe zodra de single-screenvoorbeelden duidelijk zijn.
• Koppel de knoppen aan echte firmware-events, zoals helderheid wijzigen, een relais schakelen, een modus selecteren of een kalibratieflow starten.

Exporteren naar je project

Open de sjabloon in PicoPixel, inspecteer de eventgrafiek, hernoem de belangrijkste bronnen en doelen en exporteer het project daarna als LVGL C-code. De gegenereerde bestanden kunnen net als elke andere PicoPixel-export aan een bestaand embedded project worden toegevoegd.

Voor ESP32-projecten is de gebruikelijke flow:

1. Configureer je display- en inputdrivers.
2. Open deze eventsjabloon en pas de knoppen, labels, afbeeldingen en acties aan.
3. Exporteer de PicoPixel-UI als LVGL C.
4. Voeg de geëxporteerde bestanden toe aan je ESP-IDF-, Arduino- of PlatformIO-project.
5. Roep ui_init() aan nadat LVGL en je displaydriver klaar zijn.
6. Voeg eigen firmwarecallbacks alleen toe waar de visuele event editor niet genoeg is.

Zie voor meer achtergrond de PicoPixel event editor guide, de ESP32 LVGL UI tutorial en de gids over PicoPixel templates gebruiken.

Beste toepassingen

Deze sjabloon past goed wanneer je een duidelijk startpunt wilt voor:

• LVGL-eventvoorbeelden
• Demo's van knopklikinteracties
• ESP32 touch-UI-prototypes
• Instellingenschermen en bedieningspanelen
• Smart-home-dashboards
• Wearable- of handheldmenu's
• Voorbeelden van animatietriggers
• Tekst- en afbeeldingsstatuswijzigingen
• Leren hoe visuele PicoPixel-events LVGL-gedrag worden