Créez des interfaces tactiles ESP32 — Visuellement

1. Concevez votre interface

Ouvrez PicoPixel dans votre navigateur et démarrez un nouveau projet. Glissez-déposez des widgets LVGL — boutons, labels, sliders, graphiques, arcs, interrupteurs et plus — sur le canevas. Réglez la résolution d'écran pour correspondre à l'écran de votre ESP32 : 320×240 pour les TFTs SPI courants, 240×240 pour les écrans ronds GC9A01, ou 800×480 pour les panneaux plus grands. Stylisez les couleurs, les polices et les espacements visuellement — aucun code C requis à cette étape.

2. Prévisualisez dans le simulateur LVGL en direct

PicoPixel compile LVGL en WebAssembly et l'exécute directement dans votre navigateur. La prévisualisation est le véritable moteur de rendu LVGL — pas une maquette. Testez les interactions tactiles, le défilement et les animations avant de toucher votre matériel. Vous pouvez également partager un lien du simulateur avec vos coéquipiers ou clients pour obtenir des retours.

3. Exportez vos fichiers UI

Exportez un fichier zip contenant votre UI en code C LVGL (fichiers .c et .h). La sortie inclut la création de widgets, le styling, la mise en page et les liaisons d'événements — le tout utilisant des appels API LVGL 8.x standard. Il n'y a pas de dépendances propriétaires ni de bibliothèque runtime PicoPixel. Le support de LVGL v9.x est prévu.

4. Intégrez et flashez

Décompressez les fichiers exportés dans votre projet ESP-IDF, Arduino ou PlatformIO. Incluez l'en-tête UI et appelez ui_init() après que vos drivers d'affichage et d'entrée LVGL soient configurés. Compilez, flashez, et l'UI sur votre ESP32 correspondra au simulateur pixel pour pixel. Pour un chemin plus rapide, passez le zip à un assistant de code IA (Claude Code, Codex, etc.) et laissez-le gérer l'intégration automatiquement.

Variantes ESP32

PicoPixel génère du code LVGL standard qui fonctionne sur toute variante d'ESP32 avec support LVGL 8.x :

• •ESP32 (original) — SRAM limitée ; idéal pour les interfaces plus simples
• •ESP32-S2 — support USB OTG, capacité d'affichage modérée
• •ESP32-S3 — recommandé pour la plupart des projets avec écran ; double cœur avec PSRAM et suffisamment de puissance pour les interfaces complexes
• •ESP32-C3 — RISC-V simple cœur ; adapté aux interfaces légères
• •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3 ; même capacité d'affichage que le C3
• •ESP32-P4 — variante la plus récente avec GPU dédié et traitement de pixels matériel ; excellent pour les GUI complexes haute résolution. Testé avec les cartes Waveshare et Guition.

Cartes de développement populaires

Compatible avec toute carte de développement ESP32 supportant LVGL, notamment :

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Waveshare ESP32-S3 / ESP32-P4 cartes avec écran
• •Guition ESP32-P4 cartes avec écran
• •Elecrow cartes avec écran
• •Adafruit Feather ESP32-S3 TFT
• •Espressif ESP32-S3-BOX / BOX-3
• •Cartes Sunton (cartes ESP32 avec écran populaires et économiques)

Pilotes d'écran compatibles

PicoPixel génère du code LVGL indépendant de la plateforme — le pilote d'écran est géré par la configuration de votre port LVGL. Contrôleurs d'écran courants fonctionnant avec LVGL sur ESP32 :

• •ST7789 (le plus courant pour les petits TFTs)
• •ILI9341 (écrans 240×320)
• •ILI9488 (écrans 320×480)
• •GC9A01 (écrans ronds)
• •ST7796 (écrans plus grands)
• •SSD1306 (petits OLED)
• •MIPI DSI écrans (ESP32-P4)

Si votre écran fonctionne avec LVGL, la sortie de PicoPixel fonctionnera avec.

Intégration ESP-IDF

L'export de PicoPixel est purement du code UI — il n'inclut pas lv_init(), l'enregistrement du pilote d'écran ni la gestion des ticks. Votre projet doit déjà avoir une configuration LVGL 8.x fonctionnelle. Pour ajouter l'UI de PicoPixel :

1. 1.Exportez votre UI depuis PicoPixel (télécharge un fichier .zip)
2. 2.Créez un répertoire ui/ dans le dossier components/ de votre projet
3. 3.Décompressez les fichiers exportés dans components/ui/
4. 4.Créez un CMakeLists.txt dans components/ui/ qui enregistre les sources avec une dépendance sur lvgl
5. 5.Ajoutez ui à la liste REQUIRES dans votre main/CMakeLists.txt
6. 6.Incluez #include "ui/ui.h" dans votre main.c et appelez ui_init() après la configuration de votre écran
7. 7.Compilez et flashez : idf.py build && idf.py flash

Intégration Arduino IDE

Votre sketch doit déjà avoir LVGL 8.x installé et un pilote d'écran fonctionnel configuré.

1. 1.Exportez votre UI depuis PicoPixel (télécharge un fichier .zip)
2. 2.Créez un dossier ui/ dans le répertoire src/ de votre sketch
3. 3.Décompressez les fichiers exportés dans src/ui/
4. 4.Incluez #include "src/ui/ui.h" dans votre fichier .ino
5. 5.Appelez ui_init() dans setup() après lv_init() et la configuration de votre pilote d'écran
6. 6.Arduino IDE compile automatiquement tous les fichiers .c dans src/ récursivement — aucune modification de configuration de compilation nécessaire
7. 7.Téléversez sur votre ESP32

Intégration PlatformIO

Votre projet doit déjà avoir LVGL 8.x dans lib_deps et un pilote d'écran fonctionnel configuré.

1. 1.Exportez votre UI depuis PicoPixel (télécharge un fichier .zip)
2. 2.Décompressez les fichiers exportés dans src/ui/
3. 3.Incluez #include "ui/ui.h" dans main.cpp
4. 4.Appelez ui_init() après votre configuration LVGL
5. 5.Aucune modification de platformio.ini nécessaire — PlatformIO compile automatiquement toutes les sources dans src/
6. 6.Compilez et flashez : pio run --target upload

Intégration assistée par IA

Pour un chemin plus rapide, exportez le zip depuis PicoPixel et passez-le à un assistant de code IA. Dites à Claude Code, GitHub Copilot ou Codex : « Ajoutez ces fichiers UI PicoPixel à mon projet ESP32 LVGL » — la plupart des assistants peuvent gérer le placement des fichiers, les includes et la configuration de compilation automatiquement.