Tutoriel ESP32 LVGL : Créer une interface tactile

Pourquoi utiliser un éditeur visuel pour les interfaces ESP32 ?

Construire une interface tactile pour un ESP32 de manière traditionnelle est laborieux. Vous écrivez du code C LVGL pour placer chaque widget, définissez ses couleurs et sa taille, flashez le tout sur votre carte, vérifiez l’écran, ajustez quelques pixels et flashez à nouveau. Chaque petite modification implique un nouvel aller-retour avec le matériel.

Un éditeur visuel renverse cette logique. Vous faites glisser des widgets LVGL sur un canevas, les stylisez en un clic et voyez le résultat instantanément, puis exportez le code C une fois satisfait. Vous passez votre temps à concevoir plutôt qu'à recompiler.

Ce dont vous aurez besoin

Pas grand-chose pour suivre ce guide :

• Une carte ESP32 avec écran — toute variante ESP32 capable de faire tourner LVGL fonctionne (plus de détails sur les cartes compatibles ci-dessous).
• La chaîne d'outils firmware de votre choix : ESP-IDF, Arduino ou PlatformIO, avec LVGL 8.x déjà intégré et vos pilotes d'écran et tactile fonctionnels.
• Un compte PicoPixel gratuit — tout ce qui est décrit dans ce guide se passe dans le navigateur.

Étape 1 — Définir la taille de votre écran

Ouvrez l’éditeur et créez un projet. Commencez par définir sa résolution pour que le canevas corresponde exactement à l’écran de votre appareil.

Choisissez un préréglage correspondant à votre affichage :

• 320×240, les petits panneaux TFT SPI les plus courants (ST7789, ILI9341).
• 240×240, les écrans ronds comme le GC9A01.
• 480×320, 480×480 ou 800×480, les panneaux plus grands et carrés.

Bien définir cela dès le départ garantit que ce que vous concevez correspond exactement à ce qui s'affiche sur l'appareil.

Étape 2 — Concevoir par glisser-déposer

Déposez des widgets LVGL depuis la palette sur le canevas : boutons, libellés, curseurs, arcs, interrupteurs, graphiques, listes déroulantes et bien d’autres, avec plus de 30 types de widgets au total. Positionnez-les, puis réglez leurs couleurs, polices, espacements et coins arrondis dans les panneaux latéraux. Aucun code C n’est nécessaire à cette étape.

Quelques points utiles à garder en tête lors de la conception :

• Plusieurs écrans. Ajoutez autant d'écrans que nécessaire et connectez la navigation entre eux — idéal pour les menus, les pages de paramètres et les tableaux de bord.
• Tactile dès le départ. Les widgets répondent aux appuis et les conteneurs défilent, ce qui vous permet de concevoir de vraies interactions tactiles, pas de simples mises en page statiques.
• Les polices et les images sont prises en charge. PicoPixel les convertit dans un format que LVGL peut stocker sur l’appareil. Le guide des polices explique comment limiter leur taille, et le guide des sprites présente les widgets animés à plusieurs états.

Étape 3 — Prévisualiser en direct

Avant de toucher à votre matériel, cliquez sur prévisualiser. PicoPixel exécute le vrai moteur LVGL compilé en WebAssembly directement dans votre navigateur — ce que vous voyez est un rendu LVGL authentique, pas une maquette ou une approximation grossière.

Appuyez sur les boutons, faites glisser les curseurs, faites défiler et vérifiez la navigation entre vos écrans. Corriger les problèmes de mise en page ici prend quelques secondes ; les corriger sur l'appareil coûte un nouveau flashage. Vous pouvez même partager un lien de prévisualisation avec un collègue ou un client pour obtenir des retours.

Étape 4 — Exporter du code C prêt pour la production

Quand le design est satisfaisant, exportez. Vous obtiendrez un unique fichier picopixel_lvgl_ui.zip contenant du code C LVGL 8.x propre et standard :

• ui.c / ui.h, le point d'entrée, avec ui_init() et ui_tick().
• screens.c / screens.h, vos écrans et leur mise en page.
• styles, fonts, images, actions et vars — tout ce que votre design utilise, généré pour vous.
• README.md, une description en langage clair de l'export (abordé à l'étape 5).

Il n'y a aucune dépendance propriétaire ni bibliothèque d'exécution PicoPixel à ajouter — c'est du LVGL pur, donc cela fonctionne de la même manière que vous utilisiez ESP-IDF, Arduino ou PlatformIO.

Étape 5 — Intégrer l'interface dans votre projet ESP32

Décompressez l'export dans votre projet (la plupart des gens le placent dans un dossier ui/). Ensuite, vous n'avez que deux choses à faire dans votre firmware : appeler ui_init() une fois après que LVGL et vos pilotes d'écran/tactile sont configurés, et appeler ui_tick() dans votre boucle principale.

Voici à quoi ça ressemble dans un sketch Arduino :

#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);
}

Pour changer d'écran à l'exécution (par exemple lorsqu'un bouton est pressé), appelez loadScreen() avec l'écran souhaité. C'est toute l'intégration : compilez, flashez, et l'interface sur votre ESP32 correspond à ce que vous avez vu dans le navigateur.

Quelles cartes ESP32 sont compatibles ?

Comme PicoPixel exporte du code C LVGL standard, il fonctionne sur pratiquement tout ESP32 capable de faire tourner LVGL 8.x. Un aperçu rapide des variantes :

• ESP32-S3, le meilleur choix pour la plupart des projets d'affichage : double cœur avec PSRAM et une grande marge pour des interfaces riches.
• ESP32 (original) / ESP32-S2, convient aux interfaces plus simples ; surveillez votre budget mémoire.
• ESP32-C3 / C6, puces RISC-V monocœur légères, adaptées aux interfaces plus petites.
• ESP32-P4, la puce la plus puissante d'Espressif, avec un GPU dédié pour des interfaces fluides et haute résolution. L'export de PicoPixel a été testé sur des cartes ESP32-P4 de Waveshare et Guition.

Les cartes populaires prêtes à l'emploi — LILYGO T-Display-S3, M5Stack Core2/CoreS3, les cartes d'affichage Waveshare et Sunton, l'Espressif ESP32-S3-BOX, et le "Cheap Yellow Display" économique — fonctionnent toutes, tout comme les pilotes courants ST7789, ILI9341, GC9A01 (rond) et ILI9488.

Garder votre interface légère en mémoire

Les appareils embarqués disposent de moins de mémoire qu’un téléphone ou un ordinateur. Quelques précautions permettent de garder une interface réactive et de limiter l’espace occupé en mémoire flash :

• Dimensionnez vos polices correctement. Chaque police est stockée à une taille de pixel fixe, et les grands jeux de caractères (notamment le chinois, le japonais et le coréen) s'accumulent vite. Le guide des polices montre comment n'inclure que les caractères que vous utilisez réellement.
• Adaptez la profondeur de couleur à votre écran. Un panneau 16 bits n'a pas besoin d'images 32 bits — choisir la bonne profondeur réduit la taille de vos ressources.
• Réutilisez plutôt que de dupliquer. Créez un widget une fois et réutilisez-le sur plusieurs écrans et projets.

Questions fréquentes

PicoPixel fonctionne-t-il avec l'ESP32 ?

Oui. Il génère du code C LVGL standard qui fonctionne avec ESP-IDF, Arduino et PlatformIO sur toute variante ESP32 pouvant exécuter LVGL 8.x, et l'export a été testé sur du matériel ESP32-P4.

Quelle version de LVGL est prise en charge ?

LVGL 8.x. Le code exporté utilise les API LVGL 8.x, donc ne le mélangez pas avec des appels LVGL 9.x. (La prise en charge de v9 est prévue.)

Dois-je écrire du code C ?

Seulement la petite quantité de code d’intégration de l'étape 5 : appeler ui_init() et ui_tick(). L'interface elle-même est conçue visuellement et générée pour vous.

Est-ce gratuit ?

Oui. PicoPixel est gratuit pour un usage personnel et amateur, sans carte bancaire requise. L'usage commercial commence à partir de 17 $/mois (204 $/an).

Prochaines étapes

Vous connaissez maintenant le chemin complet de l'idée à l'interface flashée : définir votre résolution, concevoir par glisser-déposer, prévisualiser en direct, exporter et intégrer. Pour aller plus loin :

• Lancez-vous dans l'éditeur et démarrez un projet sur app.picopixel.io.
• Parcourez la page de l’éditeur d’interfaces ESP32 pour en savoir plus sur la prise en charge des cartes et des frameworks.
• Enrichissez vos widgets avec des sprites animés et des polices personnalisées.
• Vous comparez vos options ? Découvrez comment PicoPixel se compare aux autres éditeurs LVGL.