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. Style kleuren, lettertypen en spatiëring visueel — 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 widget-creatie, styling, layout en event-bindingen — 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. Voor een sneller pad, geef het zipbestand 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, hoge-resolutie GUI'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() na lv_init() en je displaydriver geconfigureerd zijn
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

Voor een sneller pad, exporteer het zipbestand vanuit PicoPixel en geef het aan een AI-code-assistent. Zeg tegen Claude Code, GitHub Copilot of Codex: "Voeg deze PicoPixel UI-bestanden toe aan mijn ESP32 LVGL-project" — de meeste assistenten kunnen de bestandsplaatsing, includes en build-configuratie automatisch afhandelen.