ESP32 LVGL-tutorial: een touchscreen-UI bouwen

Waarom een visuele editor gebruiken voor ESP32-UI's?

Een touchscreen-interface voor een ESP32 bouwen op de traditionele manier is traag. Je schrijft LVGL C-code voor elk widget, stelt kleuren en grootten in, flasht het naar je bord, tuurt naar het scherm, verschuift een paar pixels en flasht opnieuw. Elke kleine wijziging betekent een nieuwe rondreis naar de hardware.

Een visuele editor keert dat om. Je sleept LVGL-widgets op een canvas, stijlt ze door te klikken en ziet het resultaat meteen. Als je tevreden bent, exporteer je de C-code. Je besteedt je tijd aan ontwerpen in plaats van hercompileren.

Wat heb je nodig?

Je hebt niet veel nodig om mee te doen:

• Een ESP32-bord met een display; elke ESP32-variant die LVGL kan draaien werkt (meer over specifieke borden hieronder).
• De firmware-toolchain van jouw voorkeur: ESP-IDF, Arduino of PlatformIO, met LVGL 8.x al toegevoegd en je display- en touchdrivers werkend.
• Een gratis PicoPixel-account; alles in deze gids gebeurt in de browser.

Stap 1 - Stel je displayformaat in

Open de editor en start een nieuw project. Het eerste dat je goed moet instellen is de resolutie, zodat je ontwerp pixel voor pixel overeenkomt met je fysieke scherm.

Kies een preset die bij je display past:

• 320×240, de meest voorkomende kleine SPI TFT-panelen (ST7789, ILI9341).
• 240×240, ronde displays zoals de GC9A01.
• 480×320, 480×480 of 800×480, grotere en vierkante panelen.

Dit vanaf het begin goed instellen betekent dat wat je ontwerpt exact is wat op het apparaat verschijnt.

Stap 2 - Ontwerpen met slepen en neerzetten

Nu het leuke gedeelte. Sleep LVGL-widgets van het palet naar het canvas: knoppen, labels, schuifregelaars, bogen, schakelaars, grafieken, vervolgkeuzemenu's en meer (in totaal meer dan 30 widgettypen). Positioneer ze en gebruik vervolgens de zijpanelen om kleuren, lettertypen, spatiëring en afgeronde hoeken visueel in te stellen. In deze fase geen C-code.

Een paar dingen om te weten terwijl je bouwt:

• Meerdere schermen. Voeg zoveel schermen toe als je nodig hebt en stel navigatie ertussen in, ideaal voor menu's, instellingenpagina's en dashboards.
• Touch vanaf het begin. Widgets reageren op tikken en containers scrollen, zodat je echte touchscreen-interacties kunt ontwerpen in plaats van alleen statische lay-outs.
• Lettertypen en afbeeldingen zijn eersteklas. Tekst en afbeeldingen op een embedded apparaat moeten worden omgezet naar een formaat dat LVGL kan opslaan. PicoPixel doet dat voor je. Zie onze lettertypen-gids voor details over het klein houden van lettertypen, en de sprites-gids als je geanimeerde widgets met meerdere staten wilt.

Stap 3 - Live previeuwen

Voordat je je hardware aanraakt, klik je op preview. PicoPixel voert de echte LVGL-engine uit, gecompileerd naar WebAssembly, direct in je browser. Wat je ziet is daarom echte LVGL-rendering, geen mockup of ruwe benadering.

Tik op knoppen, sleep schuifregelaars, scroll en controleer je schermnavigatie. Lay-outproblemen hier oplossen duurt seconden; ze op het apparaat oplossen kost een flashcyclus. Je kunt zelfs een previewlink delen met een teamgenoot of klant voor feedback.

Stap 4 - Productieklare C-code exporteren

Als het ontwerp er goed uitziet, exporteer je het. Je krijgt één picopixel_lvgl_ui.zip met schone, standaard LVGL 8.x C-code:

• ui.c / ui.h, het beginpunt, met ui_init() en ui_tick().
• screens.c / screens.h, je schermen en hun lay-out.
• styles, fonts, images, actions en vars, alles wat je ontwerp gebruikt, voor je gegenereerd.
• README.md, een beschrijving in gewone taal van de export (behandeld in stap 5).

Er zijn geen propriëtaire afhankelijkheden en geen PicoPixel-runtimebibliotheek om toe te voegen; het is vanille LVGL en werkt hetzelfde, of je nu ESP-IDF, Arduino of PlatformIO gebruikt.

Stap 5 - De UI toevoegen aan je ESP32-project

Pak de export uit in je project (de meeste mensen plaatsen het onder een map ui/). Vervolgens hoef je in je firmware maar twee dingen te doen: roep ui_init() eenmalig aan nadat LVGL en je display-/touchdrivers zijn ingesteld, en roep ui_tick() aan in je hoofdlus.

In een Arduino-stijl schets ziet dat er zo uit:

#include <lvgl.h>
#include "ui/ui.h"          // exported by PicoPixel

void setup() {
  lv_init();
  // ... initialize your display + touch drivers here ...
  ui_init();                // builds the UI you designed
}

void loop() {
  lv_timer_handler();       // let LVGL render and handle input
  ui_tick();                // keep PicoPixel's screens updated
  delay(5);
}

Om tijdens uitvoering van scherm te wisselen (bijvoorbeeld wanneer een knop wordt ingedrukt), roep je loadScreen() aan met het gewenste scherm. Dat is de volledige integratie: compileer, flash, en de UI op je ESP32 komt overeen met wat je in de browser zag.

Welke ESP32-borden werken?

Omdat PicoPixel standaard LVGL C-code exporteert, werkt het op vrijwel elke ESP32 die LVGL 8.x kan draaien. Een beknopte gids per variant:

• ESP32-S3, de ideale keuze voor de meeste displayprojecten: dual-core met PSRAM en ruim voldoende capaciteit voor rijke UI's.
• ESP32 (origineel) / ESP32-S2, prima voor eenvoudigere interfaces; houd je geheugenbudget in de gaten.
• ESP32-C3 / C6, lichtgewicht single-core RISC-V-chips, goed voor kleinere UI's.
• ESP32-P4, Espressif's krachtigste chip, met een dedicated GPU voor soepele interfaces met hoge resolutie. De export van PicoPixel is getest op ESP32-P4-borden van Waveshare en Guition.

Populaire kant-en-klare borden, zoals de LILYGO T-Display-S3, M5Stack Core2/CoreS3, Waveshare- en Sunton-displayborden, de Espressif ESP32-S3-BOX en het voordelige "Cheap Yellow Display", werken allemaal, evenals gangbare drivers zoals ST7789, ILI9341, GC9A01 (rond) en ILI9488.

Je UI licht houden in geheugen

Embedded displays hebben veel minder geheugen dan een telefoon of laptop, dus een beetje zorgvuldigheid houdt je UI snel en flash-zuinig:

• Kies het juiste lettertype-formaat. Elk lettertype wordt opgeslagen op een vaste pixelgrootte, en grote tekensets (met name Chinees, Japans en Koreaans) lopen snel op. De lettertypen-gids laat zien hoe je alleen de tekens opneemt die je echt gebruikt.
• Stem je kleurdiepte af op het display. Een 16-bits scherm heeft geen 32-bits afbeeldingen nodig; de juiste diepte kiezen verkleint je assets.
• Hergebruik in plaats van dupliceren. Bouw een widget één keer en hergebruik het over schermen en projecten.

Veelgestelde vragen

Werkt PicoPixel met ESP32?

Ja. Het genereert standaard LVGL C-code die werkt met ESP-IDF, Arduino en PlatformIO op elke ESP32-variant die LVGL 8.x draait, en de export is getest op ESP32-P4-hardware.

Welke LVGL-versie wordt ondersteund?

LVGL 8.x. De geëxporteerde code gebruikt LVGL 8.x API's, dus meng die niet met LVGL 9.x-aanroepen. (v9-ondersteuning is gepland.)

Moet ik zelf C-code schrijven?

Alleen de kleine hoeveelheid lijmcode in stap 5: het aanroepen van ui_init() en ui_tick(). De UI zelf wordt visueel ontworpen en voor je gegenereerd.

Is het gratis?

Ja. PicoPixel is gratis voor persoonlijk en hobbygebruik, geen creditcard vereist. Commercieel gebruik begint vanaf $17/mnd ($204/jr).

Volgende stappen

Je kent nu het volledige traject van idee tot geflashte UI: stel je resolutie in, ontwerp met slepen en neerzetten, preview live, exporteer en integreer. Vanaf hier:

• Spring in de editor en start een project op app.picopixel.io.
• Bekijk de ESP32 GUI-bouwerpagina voor meer informatie over bord- en frameworkondersteuning.
• Maak je widgets rijker met geanimeerde sprites en aangepaste lettertypen.
• Wil je opties afwegen? Kijk hoe PicoPixel zich verhoudt tot andere LVGL-editors.