Bouw ESP32 touchscreen-UI's — visueel

1. Ontwerp je interface

Open PicoPixel in je browser en start een nieuw project. Sleep LVGL-widgets — knoppen, labels, sliders, grafieken, bogen, schakelaars en meer — naar het canvas. Stel de beeldschermresolutie in zodat deze overeenkomt met het scherm van je ESP32: 320×240 voor gangbare SPI TFT's, 240×240 voor ronde GC9A01-displays, of 800×480 voor grotere panelen. Pas kleuren, lettertypen en afstanden visueel aan — in deze fase is geen C-code nodig.

2. Bekijk in de live LVGL-simulator

PicoPixel compileert LVGL naar WebAssembly en draait het direct in je browser. De preview is de daadwerkelijke LVGL-rendering-engine — geen mock-up. Test touch-interacties, scrollen en animaties voordat je je hardware aanraakt. Je kunt ook een simulatorlink delen met teamleden of klanten voor feedback.

3. Exporteer je UI-bestanden

Exporteer een zipbestand met je UI als LVGL C-code (.c- en .h-bestanden). De output bevat het aanmaken en opmaken van widgets, de lay-out en de koppeling van events — allemaal met standaard LVGL 8.x-API-aanroepen. Er zijn geen propriëtaire afhankelijkheden en geen PicoPixel-runtimebibliotheek. Ondersteuning voor LVGL v9.x is gepland.

4. Integreer en flash

Pak de geëxporteerde bestanden uit in je ESP-IDF-, Arduino- of PlatformIO-project. Neem de UI-header op en roep ui_init() aan nadat je LVGL-display- en inputdrivers zijn geconfigureerd. Compileer, flash, en de UI op je ESP32 komt pixel voor pixel overeen met de simulator. Wil je de integratie versnellen, geef het zipbestand dan aan een AI-code-assistent (Claude Code, Codex, etc.) en laat die de integratie automatisch afhandelen.

ESP32-varianten

PicoPixel genereert standaard LVGL-code die werkt op elke ESP32-variant met LVGL 8.x-ondersteuning:

• •ESP32 (origineel) — beperkt SRAM; het beste voor eenvoudigere UI's
• •ESP32-S2 — USB OTG-ondersteuning, gemiddelde displaycapaciteit
• •ESP32-S3 — aanbevolen voor de meeste displayprojecten; dual-core met PSRAM en voldoende kracht voor complexe UI's
• •ESP32-C3 — RISC-V single-core; geschikt voor lichtgewicht UI's
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3; dezelfde displaycapaciteit als C3
• •ESP32-P4 — nieuwste variant met dedicated GPU en hardware pixel-verwerking; uitstekend voor complexe, GUI met hoge resolutie's. Getest met Waveshare en Guition boards.

Populaire ontwikkelborden

Compatibel met elk LVGL-geschikt ESP32-ontwikkelbord, waaronder:

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Waveshare ESP32-S3 / ESP32-P4 displayborden
• •Guition ESP32-P4 displayborden
• •Elecrow displayborden
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Sunton-boards (populaire budget ESP32-displayborden)

Compatibele displaydrivers

PicoPixel genereert platformonafhankelijke LVGL-code — de displaydriver wordt afgehandeld door je LVGL-portconfiguratie. Veelgebruikte displaycontrollers die werken met LVGL op ESP32:

• •ST7789 (meest voorkomend voor kleine TFT's)
• •ILI9341 (240×320 displays)
• •ILI9488 (320×480 displays)
• •GC9A01 (ronde displays)
• •ST7796 (grotere displays)
• •SSD1306 (kleine OLED's)
• •MIPI DSI displays (ESP32-P4)

Als je display werkt met LVGL, werkt de output van PicoPixel ermee.

ESP-IDF-integratie

De export van PicoPixel is puur UI-code — het bevat geen lv_init(), displaydriver-registratie of tick-afhandeling. Je project moet al een werkende LVGL 8.x-setup hebben. Om de UI van PicoPixel toe te voegen:

1. 1.Exporteer je UI vanuit PicoPixel (downloadt een .zip-bestand)
2. 2.Maak een ui/-map aan in de components/-map van je project
3. 3.Pak de geëxporteerde bestanden uit in components/ui/
4. 4.Maak een CMakeLists.txt in components/ui/ die de bronnen registreert met een afhankelijkheid van lvgl
5. 5.Voeg ui toe aan de REQUIRES-lijst in je main/CMakeLists.txt
6. 6.Voeg #include "ui/ui.h" toe in je main.c en roep ui_init() aan na je display-setup
7. 7.Build en flash: idf.py build && idf.py flash

Arduino IDE-integratie

Je sketch moet al LVGL 8.x geïnstalleerd hebben en een werkende displaydriver geconfigureerd.

1. 1.Exporteer je UI vanuit PicoPixel (downloadt een .zip-bestand)
2. 2.Maak een ui/-map aan in de src/-map van je sketch
3. 3.Pak de geëxporteerde bestanden uit in src/ui/
4. 4.Voeg #include "src/ui/ui.h" toe in je .ino-bestand
5. 5.Roep ui_init() aan in setup() nadat lv_init() is aangeroepen en je displaydriver is ingesteld
6. 6.Arduino IDE compileert automatisch alle .c-bestanden in src/ recursief — geen build-configuratiewijzigingen nodig
7. 7.Upload naar je ESP32

PlatformIO-integratie

Je project moet al LVGL 8.x in lib_deps hebben en een werkende displaydriver geconfigureerd.

1. 1.Exporteer je UI vanuit PicoPixel (downloadt een .zip-bestand)
2. 2.Pak de geëxporteerde bestanden uit in src/ui/
3. 3.Voeg #include "ui/ui.h" toe in main.cpp
4. 4.Roep ui_init() aan na je LVGL-setup
5. 5.Geen platformio.ini-wijzigingen nodig — PlatformIO compileert automatisch alle bronnen in src/
6. 6.Build en flash: pio run --target upload

AI-ondersteunde integratie

Wil je de integratie versnellen? Geef het geëxporteerde zipbestand aan een AI-code-assistent zoals Claude Code, GitHub Copilot of Codex. Vraag: "Voeg deze PicoPixel UI-bestanden toe aan mijn ESP32 LVGL-project." De assistent kan de bestanden op de juiste plek zetten, includes toevoegen en de buildconfiguratie aanpassen.