LVGL (Bibliothèque graphique polyvalente légère) ESP32 Écran jaune bon marché (ESP32-2432S028R)

Dans ce guide, vous débuterez avec la LVGL (Light and Versatile Graphics Library) avec l’ESP32 CYD (Cheap Yellow Display ESP32-2432S028R). Le LVGL est une bibliothèque graphique intégrée gratuite et open source populaire permettant de créer de superbes interfaces utilisateur pour de nombreux microcontrôleurs et écrans. Nous utiliserons une carte de développement ESP32 avec un écran tactile TFT intégré.

Si vous disposez d’un écran tactile TFT autonome de 2,8 pouces avec pilote ILI9341, vous pouvez lire notre guide LVGL pour l’ESP32.

Présentation de l’écran jaune bon marché ESP32 – CYD (ESP32-2432S028R)

La carte de développement ESP32-2432S028R est connue dans la communauté des fabricants sous le nom de « Cheap Yellow Display » ou CYD en abrégé. Cette carte de développement, dont la puce principale est un module ESP32-WROOM-32, est livrée avec un écran tactile LCD TFT de 2,8 pouces, une interface de carte microSD, une LED RVB et tous les circuits nécessaires pour programmer et alimenter la carte.

Il s’agit d’une carte très polyvalente pour créer des interfaces graphiques pour vos projets IoT et elle est beaucoup plus pratique que d’utiliser une carte ESP32 séparée avec un écran TFT.

Contenu connexe : Premiers pas avec le panneau d’affichage jaune bon marché ESP32 – CYD (ESP32-2432S028R)

Voici une liste de spécifications plus détaillées de cette carte de développement :

• MCU double cœur, fonctions WI-FI et Bluetooth intégrées
• La fréquence peut atteindre 240 MHz
• 520 Ko de SRAM, 448 Ko de ROM, la taille du flash est de 4 Mo
• Taille du module 50,0 × 86,0 mm
• Tension de fonctionnement : 5 V
• Consommation électrique : environ 115 mA
• Poids du produit : environ 50g
• Le module comprend :
  • Écran d’affichage TFT couleur de 2,8 pouces avec puce pilote ILI9341
  • Résolution d’affichage : 240x320px avec écran tactile résistif
  • Circuit de contrôle du rétroéclairage
  • Interface de carte TF pour stockage externe
  • Interface série
  • Interface de capteur de température et d’humidité (interface DHT11) et interface de port IO réservé
  • Il peut être programmé avec : Arduino IDE, MicroPython, ESP-IDF

Dans les connecteurs GPIO étendus, il y a au moins 4 GPIO disponibles : GPIO 35, GPIO 22, GPIO 21 et GPIO 27. Il dispose également des broches TX/RX disponibles (voir image précédente).

Plus d’informations sur les GPIO de la carte CYD : Brochage de l’écran jaune bon marché ESP32 (CYD) (ESP32-2432S028R).

Où acheter ?

Vous pouvez cliquer sur le lien ci-dessous pour vérifier où acheter l’écran ESP32 Cheap Yellow et son prix dans différents magasins.

Présentation de LVGL (bibliothèque graphique légère et polyvalente)

LVGL (Light and Versatile Graphics Library) est une bibliothèque graphique gratuite et open source qui fournit une large gamme d’éléments graphiques faciles à utiliser pour vos projets de microcontrôleurs nécessitant une interface utilisateur graphique (GUI).

Voici quelques-unes de ses principales caractéristiques :

• Blocs : boutons, graphiques, listes, sliders, images, etc…
• Graphiques avancés avec animations, anti-aliasing, opacité, défilement fluide ;
• Divers périphériques d’entrée tels que pavé tactile, souris, clavier, encodeur, etc…
• Prise en charge multilingue avec encodage UTF-8 ;
• Prise en charge de plusieurs écrans, c’est-à-dire utilisation simultanée de plusieurs écrans TFT monochromes ;
• Éléments graphiques entièrement personnalisables avec des styles de type CSS ;
• Indépendant du matériel : utilisation avec n’importe quel microcontrôleur ou écran ;
• Évolutif : capable de fonctionner avec peu de mémoire (64 Ko Flash, 16 Ko RAM) ;
• Écrit en C pour une compatibilité maximale (compatible C++) et une liaison à MicroPython.

Il propose également un large éventail d’exemples de code dans leur documentation que vous pouvez utiliser : texte, boutons, curseurs, champs de saisie, clavier, styles personnalisés, images, arcs, lignes, animations, menus, onglets, mises en page, tableaux et bien plus encore. …

Installation des bibliothèques Arduino

L’ESP32 communique avec l’écran TFT et l’écran tactile à l’aide du protocole de communication SPI. Nous utiliserons les bibliothèques TFT_eSPI, XPT2046_Touchscreen et LVGL 9.

Installation de la bibliothèque TFT_eSPI

Ouvrez votre IDE Arduino et accédez à Sketch > Inclure la bibliothèque > Gérer les bibliothèques. Le gestionnaire de bibliothèque devrait s’ouvrir. Recherchez TFT_eSPI. Sélectionnez la bibliothèque TFT_eSPI de Bodmer et installez-la.

Installation de la bibliothèque XPT2046_Touchscreen

Ouvrez votre IDE Arduino et accédez à Sketch > Inclure la bibliothèque > Gérer les bibliothèques. Le gestionnaire de bibliothèque devrait s’ouvrir. Recherchez XPT2046_Touchscreen. Sélectionnez la bibliothèque XPT2046_Touchscreen de Paul Stoffregen et installez-la.

Installation de la bibliothèque LVGL 9

Ouvrez votre IDE Arduino et accédez à Sketch > Inclure la bibliothèque > Gérer les bibliothèques. Le gestionnaire de bibliothèque devrait s’ouvrir. Recherchez LVGL. Sélectionnez la bibliothèque LVGL de kiskegabor et installez la version 9.2.

Préparer les fichiers de configuration pour TFT_eSPI et la bibliothèque LVGL

Pour utiliser correctement la bibliothèque TFT_eSPI, vous avez besoin d’un fichier de configuration appelé User_Setup.h avec les bonnes définitions. Vous devez également préparer le fichier lv_conf.h pour la bibliothèque LVGL. Nous avons déjà préparé ces deux fichiers afin que vous n’ayez aucun problème de configuration en suivant nos exemples. Il vous suffit de les télécharger et de les déplacer vers les bons dossiers. Suivez les instructions suivantes pour savoir comment procéder.

a) Préparation des fichiers de configuration – PC Windows

b) Préparation des fichiers de configuration – Mac OS

a) Préparation des fichiers de configuration – PC Windows

Une fois toutes les bibliothèques installées (TFT_eSPI, XPT2046_Touchscreen et LVGL), commencez par télécharger le fichier de configuration User_Setup.h.

Dans votre IDE Arduino, allez dans Fichier et ouvrez le menu Préférences.

Copiez le chemin « Emplacement du carnet de croquis » de l’IDE Arduino. Dans mon cas, c’est :

C:\Users\rui_s\Documents\Arduino

Ensuite, dans l’onglet Explorateur de fichiers de votre PC Windows, entrez le chemin d’accès du carnet de croquis pour ouvrir le dossier Arduino (il se trouve généralement sous le dossier Documents).

Ouvrez le dossier des bibliothèques :

Vous devriez y voir le dossier de la bibliothèque TFT_eSPI. Ouvrez-le.

Vous devriez vous trouver dans un chemin de dossier similaire à celui indiqué ci-dessous :

C:\Users\rui_s\Documents\Arduino\libraries\TFT_eSPI

Copiez le fichier User_Setup.h fourni précédemment et remplacez le fichier existant.

Ensuite, téléchargez le fichier de configuration lv_conf.h.

Ouvrez un chemin de dossier similaire sur votre ordinateur, comme indiqué ci-dessous :

C:\Users\rui_s\Documents\Arduino\libraries

Déplacez le lv_conf.h dans le dossier des bibliothèques (ne le déplacez PAS dans le dossier lvgl).

IMPORTANT : les autres fichiers User_Setup.h et lv_conf.h disponibles sur Internet ne fonctionneront probablement PAS avec les exemples disponibles sur Raspberryme.com. Vous devez utiliser les fichiers exacts fournis dans cet article.

Remarque : si vous mettez à jour vos bibliothèques, vous devrez refaire cette procédure et placer les bons fichiers de configuration aux bons endroits.

b) Préparation des fichiers de configuration – Mac OS

Une fois les deux bibliothèques installées (TFT_eSPI et XPT2046_Touchscreen), téléchargez le fichier de configuration User_Setup.h.

Dans votre IDE Arduino, ouvrez le menu Paramètres.

Copiez le chemin « Emplacement du carnet de croquis » de l’IDE Arduino. Dans mon cas, c’est :

/Users/rui/Documents/Arduino

Dans le Finder, tapez /Users/rui/Documents/Arduino et ouvrez ce répertoire.

Ouvrez le dossier des bibliothèques.

Vous devriez y voir le dossier de la bibliothèque TFT_eSPI. Ouvrez-le.

Vous devriez vous trouver dans un chemin de dossier similaire à celui indiqué ci-dessous :

/Users/rui/Documents/Arduino/libraries/TFT_eSPI

Copiez le fichier User_Setup.h fourni précédemment et remplacez le fichier existant.

Vous devriez maintenant avoir le fichier User_Setup.h fourni sur ce chemin.

Ensuite, téléchargez le fichier de configuration lv_conf.h.

Ouvrez un chemin de dossier similaire pour les bibliothèques sur votre ordinateur, comme indiqué ci-dessous :

/Users/rui/Documents/Arduino/libraries

Déplacez le lv_conf.h dans le dossier des bibliothèques (ne le déplacez PAS dans le dossier lvgl).

IMPORTANT : les autres fichiers User_Setup.h et lv_conf.h disponibles sur Internet ne fonctionneront probablement PAS avec les exemples disponibles sur Raspberryme.com. Vous devez utiliser les fichiers exacts fournis dans cet article.

Remarque : si vous mettez à jour vos bibliothèques, vous devrez refaire cette procédure et placer les bons fichiers de configuration aux bons endroits.

Code – Afficher le texte, créer des boutons et un curseur

Le code suivant affiche un texte simple sur votre écran TFT et vous permet de tester l’écran tactile à l’aide d’un bouton et d’un curseur. Lorsque vous appuyez sur les boutons ou le curseur, cela devrait déclencher certains événements.

Copiez le code suivant sur l’IDE Arduino et téléchargez-le sur votre carte.

/*  Rui Santos & Sara Santos - Raspberryme.com
    THIS EXAMPLE WAS TESTED WITH THE FOLLOWING HARDWARE:
    1) ESP32-2432S028R 2.8 inch 240×320 also known as the Cheap Yellow Display (CYD): https://makeradvisor.com/tools/cyd-cheap-yellow-display-esp32-2432s028r/
      SET UP INSTRUCTIONS: https://Raspberryme.com/cyd-lvgl/
    2) REGULAR ESP32 Dev Board + 2.8 inch 240x320 TFT Display: https://makeradvisor.com/tools/2-8-inch-ili9341-tft-240x320/ and https://makeradvisor.com/tools/esp32-dev-board-wi-fi-bluetooth/
      SET UP INSTRUCTIONS: https://Raspberryme.com/esp32-tft-lvgl/
    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

/*  Install the "lvgl" library version 9.2 by kisvegabor to interface with the TFT Display - https://lvgl.io/
    *** IMPORTANT: lv_conf.h available on the internet will probably NOT work with the examples available at Raspberryme.com ***
    *** YOU MUST USE THE lv_conf.h FILE PROVIDED IN THE LINK BELOW IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS ***
    FULL INSTRUCTIONS AVAILABLE ON HOW CONFIGURE THE LIBRARY: https://Raspberryme.com/cyd-lvgl/ or https://Raspberryme.com/esp32-tft-lvgl/   */
#include 

/*  Install the "TFT_eSPI" library by Bodmer to interface with the TFT Display - https://github.com/Bodmer/TFT_eSPI
    *** IMPORTANT: User_Setup.h available on the internet will probably NOT work with the examples available at Raspberryme.com ***
    *** YOU MUST USE THE User_Setup.h FILE PROVIDED IN THE LINK BELOW IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS ***
    FULL INSTRUCTIONS AVAILABLE ON HOW CONFIGURE THE LIBRARY: https://Raspberryme.com/cyd-lvgl/ or https://Raspberryme.com/esp32-tft-lvgl/   */
#include 

// Install the "XPT2046_Touchscreen" library by Paul Stoffregen to use the Touchscreen - https://github.com/PaulStoffregen/XPT2046_Touchscreen - Note: this library doesn't require further configuration
#include 

// Touchscreen pins
#define XPT2046_IRQ 36   // T_IRQ
#define XPT2046_MOSI 32  // T_DIN
#define XPT2046_MISO 39  // T_OUT
#define XPT2046_CLK 25   // T_CLK
#define XPT2046_CS 33    // T_CS

SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 320

// Touchscreen coordinates: (x, y) and pressure (z)
int x, y, z;

#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT / 10 * (LV_COLOR_DEPTH / 8))
uint32_t draw_buf[DRAW_BUF_SIZE / 4];

// If logging is enabled, it will inform the user about what is happening in the library
void log_print(lv_log_level_t level, const char * buf) {
  LV_UNUSED(level);
  Serial.println(buf);
  Serial.flush();
}

// Get the Touchscreen data
void touchscreen_read(lv_indev_t * indev, lv_indev_data_t * data) {
  // Checks if Touchscreen was touched, and prints X, Y and Pressure (Z)
  if(touchscreen.tirqTouched() && touchscreen.touched()) {
    // Get Touchscreen points
    TS_Point p = touchscreen.getPoint();
    // Calibrate Touchscreen points with map function to the correct width and height
    x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);
    y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);
    z = p.z;

    data->state = LV_INDEV_STATE_PRESSED;

    // Set the coordinates
    data->point.x = x;
    data->point.y = y;

    // Print Touchscreen info about X, Y and Pressure (Z) on the Serial Monitor
    /* Serial.print("X = ");
    Serial.print(x);
    Serial.print(" | Y = ");
    Serial.print(y);
    Serial.print(" | Pressure = ");
    Serial.print(z);
    Serial.println();*/
  }
  else {
    data->state = LV_INDEV_STATE_RELEASED;
  }
}

int btn1_count = 0;
// Callback that is triggered when btn1 is clicked
static void event_handler_btn1(lv_event_t * e) {
  lv_event_code_t code = lv_event_get_code(e);
  if(code == LV_EVENT_CLICKED) {
    btn1_count++;
    LV_LOG_USER("Button clicked %d", (int)btn1_count);
  }
}

// Callback that is triggered when btn2 is clicked/toggled
static void event_handler_btn2(lv_event_t * e) {
  lv_event_code_t code = lv_event_get_code(e);
  lv_obj_t * obj = (lv_obj_t*) lv_event_get_target(e);
  if(code == LV_EVENT_VALUE_CHANGED) {
    LV_UNUSED(obj);
    LV_LOG_USER("Toggled %s", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "on" : "off");
  }
}

static lv_obj_t * slider_label;
// Callback that prints the current slider value on the TFT display and Serial Monitor for debugging purposes
static void slider_event_callback(lv_event_t * e) {
  lv_obj_t * slider = (lv_obj_t*) lv_event_get_target(e);
  char buf[8];
  lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
  lv_label_set_text(slider_label, buf);
  lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
  LV_LOG_USER("Slider changed to %d%%", (int)lv_slider_get_value(slider));
}

void lv_create_main_gui(void) {
  // Create a text label aligned center on top ("Hello, world!")
  lv_obj_t * text_label = lv_label_create(lv_screen_active());
  lv_label_set_long_mode(text_label, LV_LABEL_LONG_WRAP);    // Breaks the long lines
  lv_label_set_text(text_label, "Hello, world!");
  lv_obj_set_width(text_label, 150);    // Set smaller width to make the lines wrap
  lv_obj_set_style_text_align(text_label, LV_TEXT_ALIGN_CENTER, 0);
  lv_obj_align(text_label, LV_ALIGN_CENTER, 0, -90);

  lv_obj_t * btn_label;
  // Create a Button (btn1)
  lv_obj_t * btn1 = lv_button_create(lv_screen_active());
  lv_obj_add_event_cb(btn1, event_handler_btn1, LV_EVENT_ALL, NULL);
  lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -50);
  lv_obj_remove_flag(btn1, LV_OBJ_FLAG_PRESS_LOCK);

  btn_label = lv_label_create(btn1);
  lv_label_set_text(btn_label, "Button");
  lv_obj_center(btn_label);

  // Create a Toggle button (btn2)
  lv_obj_t * btn2 = lv_button_create(lv_screen_active());
  lv_obj_add_event_cb(btn2, event_handler_btn2, LV_EVENT_ALL, NULL);
  lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 10);
  lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
  lv_obj_set_height(btn2, LV_SIZE_CONTENT);

  btn_label = lv_label_create(btn2);
  lv_label_set_text(btn_label, "Toggle");
  lv_obj_center(btn_label);
  
  // Create a slider aligned in the center bottom of the TFT display
  lv_obj_t * slider = lv_slider_create(lv_screen_active());
  lv_obj_align(slider, LV_ALIGN_CENTER, 0, 60);
  lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, NULL);
  lv_slider_set_range(slider, 0, 100);
  lv_obj_set_style_anim_duration(slider, 2000, 0);

  // Create a label below the slider to display the current slider value
  slider_label = lv_label_create(lv_screen_active());
  lv_label_set_text(slider_label, "0%");
  lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

void setup() {
  String LVGL_Arduino = String("LVGL Library Version: ") + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();
  Serial.begin(115200);
  Serial.println(LVGL_Arduino);
  
  // Start LVGL
  lv_init();
  // Register print function for debugging
  lv_log_register_print_cb(log_print);

  // Start the SPI for the touchscreen and init the touchscreen
  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  touchscreen.begin(touchscreenSPI);
  // Set the Touchscreen rotation in landscape mode
  // Note: in some displays, the touchscreen might be upside down, so you might need to set the rotation to 0: touchscreen.setRotation(0);
  touchscreen.setRotation(2);

  // Create a display object
  lv_display_t * disp;
  // Initialize the TFT display using the TFT_eSPI library
  disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));
  lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);
    
  // Initialize an LVGL input device object (Touchscreen)
  lv_indev_t * indev = lv_indev_create();
  lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
  // Set the callback function to read Touchscreen input
  lv_indev_set_read_cb(indev, touchscreen_read);

  // Function to draw the GUI (text, buttons and sliders)
  lv_create_main_gui();
}

void loop() {
  lv_task_handler();  // let the GUI do its work
  lv_tick_inc(5);     // tell LVGL how much time has passed
  delay(5);           // let this time pass
}

Afficher le code brut

Comment fonctionne le code

Jetons un coup d’œil rapide aux parties du code pertinentes pour cet exemple.

Bibliothèques

Incluez les bibliothèques lvgl, TFT_eSPI et XPT2046_Touchscreen.

#include 
#include 
#include 

Initialiser l’écran tactile

Les lignes suivantes définissent le brochage de l’écran tactile :

#define XPT2046_IRQ 36
#define XPT2046_MOSI 32
#define XPT2046_MISO 39
#define XPT2046_CLK 25
#define XPT2046_CS 33

Créez un touchscreenSPI et des instances d’écran tactile :

SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

Autres variables

Définissez la largeur et la hauteur de l’écran :

#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 320
#define FONT_SIZE 2

Variables pour stocker les coordonnées : (x, y) et pression (z).

int x, y, z;

installation()

Démarrez une communication série avec le Serial Monitor à un débit en bauds de 115 200 et imprimez la version de la bibliothèque LVGL que vous utilisez :

String LVGL_Arduino = String("LVGL Library Version: ") + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();
Serial.begin(115200);
Serial.println(LVGL_Arduino);

Démarrez le LVGL et attribuez une fonction de rappel à des fins de débogage.

lv_init();
lv_log_register_print_cb(log_print);

Démarrez le SPI pour l’écran tactile et initialisez l’écran tactile.

touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
touchscreen.begin(touchscreenSPI);
touchscreen.setRotation(2);

Remarque : sur certains écrans, l’écran tactile peut être à l’envers, vous devrez donc peut-être définir la rotation sur 0 : touchscreen.setRotation(0);

Créez l’objet d’affichage et initialisez l’affichage TFT à l’aide de la bibliothèque TFT_eSPI.

lv_display_t * disp;
disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));
lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);

Initialisez un objet de périphérique d’entrée LVGL (écran tactile) et définissez la fonction de rappel qui sera déclenchée lorsque vous cliquez sur l’écran tactile.

lv_indev_t * indev = lv_indev_create();
lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);
lv_indev_set_read_cb(indev, touchscreen_read);

Enfin, appelez la fonction lv_create_main_gui() pour dessiner l’interface graphique de votre écran tactile :

lv_create_main_gui();

boucle()

Lors de l’exécution d’un exemple LVGL, la fonction loop() ressemblera généralement à ceci :

lv_task_handler();  // let the GUI do its work
lv_tick_inc(5);        // tell LVGL how much time has passed
delay(5);                // let this time pass

lv_create_main_gui()

La fonction lv_create_main_gui() dessine l’étiquette de texte, les boutons et les curseurs. C’est également là que vous attribuez les fonctions de rappel du gestionnaire d’événements qui seront déclenchées lorsque vous interagissez avec votre écran.

void lv_create_main_gui(void) {
  // Create a text label aligned center on top ("Hello, world!")
  lv_obj_t * text_label = lv_label_create(lv_screen_active());
  lv_label_set_long_mode(text_label, LV_LABEL_LONG_WRAP);    // Breaks the long lines
  lv_label_set_text(text_label, "Hello, world!");
  lv_obj_set_width(text_label, 150);    // Set smaller width to make the lines wrap
  lv_obj_set_style_text_align(text_label, LV_TEXT_ALIGN_CENTER, 0);
  lv_obj_align(text_label, LV_ALIGN_CENTER, 0, -90);

  lv_obj_t * btn_label;
  // Create a Button (btn1)
  lv_obj_t * btn1 = lv_button_create(lv_screen_active());
  lv_obj_add_event_cb(btn1, event_handler_btn1, LV_EVENT_ALL, NULL);
  lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -50);
  lv_obj_remove_flag(btn1, LV_OBJ_FLAG_PRESS_LOCK);

  btn_label = lv_label_create(btn1);
  lv_label_set_text(btn_label, "Button");
  lv_obj_center(btn_label);

  // Create a Toggle button (btn2)
  lv_obj_t * btn2 = lv_button_create(lv_screen_active());
  lv_obj_add_event_cb(btn2, event_handler_btn2, LV_EVENT_ALL, NULL);
  lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 10);
  lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
  lv_obj_set_height(btn2, LV_SIZE_CONTENT);

  btn_label = lv_label_create(btn2);
  lv_label_set_text(btn_label, "Toggle");
  lv_obj_center(btn_label);
  
  // Create a slider aligned in the center bottom of the TFT display
  lv_obj_t * slider = lv_slider_create(lv_screen_active());
  lv_obj_align(slider, LV_ALIGN_CENTER, 0, 60);
  lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, NULL);
  lv_slider_set_range(slider, 0, 100);
  lv_obj_set_style_anim_duration(slider, 2000, 0);

  // Create a label below the slider to display the current slider value
  slider_label = lv_label_create(lv_screen_active());
  lv_label_set_text(slider_label, "0%");
  lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}

event_handler_btn1()

La fonction event_handler_btn1() est déclenchée lorsque vous cliquez sur le « Bouton » et elle affichera également dans le moniteur série Arduino IDE le nombre de fois que le bouton a été cliqué.

int btn1_count = 0;
// Callback that is triggered when btn1 is clicked
static void event_handler_btn1(lv_event_t * e) {
  lv_event_code_t code = lv_event_get_code(e);
  if(code == LV_EVENT_CLICKED) {
    btn1_count++;
    LV_LOG_USER("Button clicked %d%", (int)btn1_count);
  }
}

event_handler_btn2()

Le event_handler_btn2() est déclenché lorsque vous cliquez sur le bouton « Basculer », il stocke l’état actuel du bouton et imprime un message avec l’état actuel dans le moniteur série.

// Callback that is triggered when btn2 is clicked/toggled
static void event_handler_btn2(lv_event_t * e) {
  lv_event_code_t code = lv_event_get_code(e);
  lv_obj_t * obj = (lv_obj_t*) lv_event_get_target(e);
  if(code == LV_EVENT_VALUE_CHANGED) {
    LV_UNUSED(obj);
    LV_LOG_USER("Toggled %s", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "on" : "off");
  }
}

slider_event_callback()

La fonction slider_event_callback() est appelée lorsque vous déplacez le curseur, elle affichera également à la fois sur l’écran tactile et sur Serial Monitor la dernière valeur du curseur sur une échelle de 0 à 100 %.

static lv_obj_t * slider_label;
// Callback that prints the current slider value on the TFT display and Serial Monitor for debugging purposes
static void slider_event_callback(lv_event_t * e) {
  lv_obj_t * slider = (lv_obj_t*) lv_event_get_target(e);
  char buf[8];
  lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
  lv_label_set_text(slider_label, buf);
  lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
  LV_LOG_USER("Slider changed to %d%%", (int)lv_slider_get_value(slider));
}

Démonstration

Téléchargez le code sur votre tableau. Accédez à Outils > Carte et sélectionnez ESP32 > Module de développement ESP32. Ensuite, sélectionnez le bon port COM dans Outils > Port. Enfin, cliquez sur le bouton de téléchargement.

Après avoir téléchargé le code sur votre tableau, il devrait afficher l’exemple « Hello, world ! » texte centré en haut.

Appuyez avec votre doigt sur le premier « Bouton ». Dans le Serial Monitor, il imprimera les coordonnées de votre pression sur le bouton, ainsi qu’un message avec le nombre de fois que le bouton a été cliqué : « Bouton cliqué 1 », « Bouton cliqué 2 », « Bouton cliqué 3″…

Ensuite, cliquez sur le bouton « Basculer », cela pourrait être utilisé pour contrôler une LED ou toute autre sortie. Ce type de bouton a deux états (couleur bleue lorsqu’il est éteint et couleur rouge lorsqu’il est activé).

Faites glisser le curseur avec votre doigt, vous verrez le curseur bouger et l’étiquette du curseur changer lorsque vous déplacez votre doigt.

Tous les événements seront imprimés dans votre moniteur série Arduino IDE à des fins de débogage :

Conclusion

Dans ce tutoriel, vous avez appris à démarrer avec la bibliothèque LVGL avec la carte ESP32 Cheap Yellow Display. Dans les prochains guides, nous explorerons d’autres fonctionnalités et composants de la bibliothèque LVGL.

Nous espérons que vous avez trouvé ce tutoriel utile. Nous préparons d’autres guides sur ce forum, alors restez à l’écoute.

Autres guides que vous aimeriez lire :

Pour en savoir plus sur l’ESP32, assurez-vous de consulter nos ressources :

Cette vidéo vous emmène dans l’histoire de Raspberry Pi :