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, libellés, curseurs, 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 TFT 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 d’interface

Exportez un fichier zip contenant votre interface en code C LVGL (fichiers .c et .h). La sortie inclut la création de widgets, les styles, 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 d’exécution PicoPixel. La prise en charge de LVGL v9.x est prévue.

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() une fois vos pilotes d'affichage et d'entrée LVGL configurés. Compilez, flashez, et l’interface sur votre ESP32 correspondra au simulateur au pixel près. Pour aller plus vite, 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 pour toute variante d’ESP32 prenant en charge 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 interfaces graphiques complexes haute résolution. Testé avec les cartes Waveshare et Guition.

Cartes de développement populaires

Compatible avec toute carte de développement ESP32 prenant en charge LVGL, notamment :

• •LILYGO T-Display / T-Display-S3
• •M5Stack Core2 / CoreS3
• •Cartes avec écran Waveshare ESP32-S3 / ESP32-P4
• •Cartes avec écran Guition ESP32-P4
• •Cartes avec écran Elecrow
• •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 TFT)
• •ILI9341 (écrans 240×320)
• •ILI9488 (écrans 320×480)
• •GC9A01 (écrans ronds)
• •ST7796 (écrans plus grands)
• •SSD1306 (petits OLED)
• •MIPI DSI pour les écrans (ESP32-P4)

Si votre écran fonctionne avec LVGL, il peut afficher l’interface exportée par PicoPixel.

Intégration ESP-IDF

L'export de PicoPixel est uniquement le code de votre interface — 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’interface de PicoPixel :

1. 1.Exportez votre interface depuis PicoPixel pour télécharger une archive .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 interface depuis PicoPixel pour télécharger une archive .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 interface depuis PicoPixel pour télécharger une archive .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 aller plus vite, confiez l’archive exportée à un assistant de programmation comme Claude Code, GitHub Copilot ou Codex. Demandez-lui : « Intégrez ces fichiers d’interface PicoPixel à mon projet ESP32 LVGL. » La plupart de ces assistants peuvent placer les fichiers, ajouter les directives d’inclusion et adapter la configuration de compilation.