ESP32 CYD avec LVGL : afficher l’image sur l’écran

Dans ce guide, vous apprendrez comment traiter et charger une image à afficher sur la carte ESP32 Cheap Yellow Display (CYD) à l’aide de LVGL (Light Versatile Graphics Library). L’ESP32 sera programmé à l’aide de l’IDE Arduino.

Nouveau sur l’écran jaune bon marché ESP32 ? Commencez ici : Premiers pas avec le panneau d’affichage jaune bon marché ESP32 – CYD (ESP32-2432S028R).

Aperçu du projet

Dans ce projet, vous apprendrez à afficher des images sur le CYD à l’aide de LVGL. Nous allons créer un exemple pour afficher l’image d’un chat comme indiqué dans l’image ci-dessous, mais vous pouvez le modifier pour charger n’importe quelle autre image.

Conditions préalables

Avant de continuer, assurez-vous de suivre les conditions préalables suivantes. Vous devez suivre toutes les étapes, sinon votre projet ne fonctionnera pas.

1) Pièces requises

Pour ce projet, vous avez besoin des pièces suivantes

2) Installez les cartes ESP32 dans l’IDE Arduino

Nous allons programmer l’ESP32 à l’aide de l’IDE Arduino. Assurez-vous que les cartes ESP32 sont installées. Suivez le tutoriel suivant :

3) Familiarisez-vous avec l’écran jaune bon marché ESP32

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.

Si c’est la première fois que vous utilisez l’écran jaune bon marché ESP32, assurez-vous de suivre notre guide de démarrage :

4) Installez les bibliothèques TFT et LVGL

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).

Suivez le didacticiel suivant pour installer et configurer les bibliothèques requises pour utiliser LVGL pour l’écran jaune bon marché ESP32 à l’aide de l’IDE Arduino.

Préparation du fichier image – image.h

Pour charger une image personnalisée à l’aide de LVGL, vous devez créer et configurer un fichier appelé image.h qui doit être placé dans le dossier d’esquisse. Nous avons déjà préparé ce dossier pour vous. Si vous souhaitez charger une image personnalisée, il vous suffit de remplacer la carte de l’image uint8_t et la taille de l’image.

Vous pouvez utiliser notre exemple d’image ou suivre les étapes suivantes pour préparer une image personnalisée :

1. Accédez au site Web de LVGL Image Converter : lvgl.io/tools/imageconverter

2. Sélectionnez les options suivantes mises en évidence dans l’image ci-dessous :

• Version : LVGL v9
• Sélectionnez une image sur votre ordinateur
• Format couleur : ARGB8888
• Ensuite, cliquez sur le bouton Convertir

3. Il téléchargera un fichier portant le nom de votre photo mais avec l’extension .c. Ouvrez ce fichier et copiez le code entre parenthèses { } avec de nombreux caractères hexadécimaux.

4. Créez un nouveau fichier appelé image.h.

5. Copiez le code dans ce référentiel et collez-le dans le nouveau fichier image.h que vous venez de créer.

6. Remplacez le contenu de la variable my_image_map par le contenu que vous venez de copier à l’étape 3. (Ne changez pas le nom de la variable my_image_map, copiez et remplacez uniquement ce qui est entre parenthèses.

#ifdef __has_include
    #if __has_include("lvgl.h")
        #ifndef LV_LVGL_H_INCLUDE_SIMPLE
            #define LV_LVGL_H_INCLUDE_SIMPLE
        #endif
    #endif
#endif

#if defined(LV_LVGL_H_INCLUDE_SIMPLE)
    #include "lvgl.h"
#else
    #include "lvgl/lvgl.h"
#endif

#define LV_BIG_ENDIAN_SYSTEM

#ifndef LV_ATTRIBUTE_MEM_ALIGN
#define LV_ATTRIBUTE_MEM_ALIGN
#endif

#ifndef LV_ATTRIBUTE_IMG_MY_IMAGE
#define LV_ATTRIBUTE_IMG_MY_IMAGE
#endif

const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_IMG_MY_IMAGE uint8_t my_image_map[] = {REPLACE_WITH_YOUR__IMAGE_ATTRIBUTE};

const lv_image_dsc_t my_image = {
    .header = {
        .magic = LV_IMAGE_HEADER_MAGIC,
        .cf = LV_COLOR_FORMAT_ARGB8888,
        .flags = 0,          
        .w = 128,
        .h = 128,
        //.stride = 120,
        .reserved_2 = 0
    },
    .data_size = sizeof(my_image_map),
    .data = my_image_map,
    .reserved = NULL
};

7. Faites défiler ce fichier vers le bas et modifiez les lignes suivantes avec la largeur de votre image .w et la hauteur .h :

const lv_image_dsc_t my_image = {
    .header = {
        .magic = LV_IMAGE_HEADER_MAGIC,
        .cf = LV_COLOR_FORMAT_ARGB8888,
        .flags = 0,          
        .w = 128,
        .h = 128,
        //.stride = 120,
        .reserved_2 = 0
    },
    .data_size = sizeof(my_image_map),
    .data = my_image_map,
    .reserved = NULL
};

8. Enfin, enregistrez votre fichier image.h.

Important : le fichier image.h doit être placé à côté du fichier .ino dans le dossier sketch de votre projet.

Votre IDE Arduino devrait avoir deux onglets :

ESP32 CYD : charger et afficher l’image – Code Arduino

Le code suivant affichera une image à l’écran. Vous devez avoir préparé l’image.h au préalable avec l’image de votre choix. Alternativement, vous pouvez utiliser notre fichier image.h par défaut. Ce fichier doit être placé dans le dossier sketch à côté du fichier .ino.

/*  Rui Santos & Sara Santos - Raspberryme.com - https://Raspberryme.com/esp32-cyd-lvgl-display-image/
    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 

#include 

#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 320

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

void draw_image(void) {
  LV_IMAGE_DECLARE(my_image);
  lv_obj_t * img1 = lv_image_create(lv_screen_active());
  lv_image_set_src(img1, &my_image);
  lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
}

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

  // 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);
    
  // Function to draw the image
  draw_image();
}

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 ?

Voyons comment afficher une image sur l’écran CYD. Vous pouvez également passer directement à la section Démonstration.

Y compris les bibliothèques

Vous devez inclure les bibliothèques lvgl.h et TFT_eSPI.h pour communiquer et afficher du texte à l’écran.

#include 
#include 

Incluez le fichier image.h qui contient toutes les informations pour dessiner l’image.

#include 

installation()

Dans setup(), incluez les lignes suivantes pour le débogage. Ceux-ci imprimeront la version de LVGL que vous utilisez. Vous devez utiliser la version 9.

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

Initialiser la bibliothèque LVGL

Initialisez la bibliothèque LVGL en appelant la fonction lv_init() dans setup().

// Start LVGL
lv_init();

Fonction de débogage d’enregistrement

Enregistrez votre fonction log_print() déclarée précédemment comme fonction associée au débogage LVGL.

// Register print function for debugging
lv_log_register_print_cb(log_print);

Créer un objet d’affichage

Pour écrire sur l’affichage, vous devez d’abord créer un objet d’affichage. Vous devez le faire dans tous vos croquis LVGL. Les lignes suivantes créeront un objet d’affichage LVGL appelé disp avec la largeur d’écran, la hauteur d’écran et le tampon de dessin définis précédemment.

// 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);

Dessiner l’image

La bibliothèque LVGL fonctionne de manière asynchrone. Vous devez appeler la fonction draw_image() pour dessiner sur l’écran dans setup(). Ensuite, tout fonctionne avec les événements et les rappels. Le code sera toujours à l’écoute des événements en arrière-plan. Lorsque quelque chose se produit, il exécutera la fonction de rappel associée à l’événement. Vous n’avez pas besoin de vérifier les événements dans la boucle().

draw_image();

dessiner_image()

Nous créons une fonction appelée draw_image() qui est appelée sur setup().

void draw_image(void) {
  LV_IMAGE_DECLARE(my_image);
  lv_obj_t * img1 = lv_image_create(lv_screen_active());
  lv_image_set_src(img1, &my_image);
  lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);
}

Commencez par déclarer votre image à l’aide de la ligne suivante (my_image est déclarée sur le fichier image.h).

LV_IMAGE_DECLARE(my_image);

Ensuite, créez un objet image LVGL sur l’écran actuel appelé img1 à l’aide de la fonction lv_image_create().

lv_obj_t * img1 = lv_image_create(lv_screen_active());

Définissez la source de l’image à l’aide de la fonction lv_image_set_src(). Passez en argument l’objet image LVGL et la source de l’image.

lv_image_set_src(img1, &my_image);

Alignez l’image au centre de l’écran.

lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);

boucle()

Dans la boucle (), vous pouvez ajouter toutes les autres tâches que votre ESP32 doit effectuer, comme dans n’importe quel croquis Arduino classique. Dans notre cas, nous n’ajouterons aucune tâche à la boucle(), mais pour que LVGL continue de fonctionner et de détecter les événements, vous devez toujours ajouter les lignes suivantes à votre boucle().

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
}

Démonstration

Votre fichier image.h doit être à côté de votre fichier .ino. Le fichier image.h sera automatiquement téléchargé sur le tableau lorsque vous téléchargerez le code.

Après avoir préparé les deux fichiers, 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 quelques secondes, l’écran affichera l’image comme indiqué dans l’image ci-dessous.

Conclusion

Dans ce didacticiel, vous avez appris à afficher des images sur la carte Cheap Yellow Display (CYD) à l’aide 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. Si vous souhaitez en savoir plus sur la création d’interfaces utilisateur graphiques à l’aide de la bibliothèque LVGL avec l’ESP32, consultez notre dernier eBook :

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 :