Dans ce guide, vous apprendrez comment afficher la température du capteur DS18B20 sur un écran jaune bon marché (CYD) ESP32 à l’aide de LVGL (Light Versatile Graphics Library). Nous afficherons la température à l’aide d’une étiquette de texte et d’un objet arc (jauge incurvée). Vous apprendrez également à styliser les objets LVGL. 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, nous afficherons la température du capteur DS18B20 sur l’écran ESP32 CYD. La température sera affichée sur une étiquette texte et représentée sur une jauge incurvée (arc).
Le texte de température sera affiché dans différentes couleurs en fonction des plages suivantes :
- < 10 °C (50 °F) : la température sera affichée en bleu ;
- 10 °C (50 °F) < température < 29 °C (84 °F) : la température sera affichée en vert ;
- 29 °C (84°F) < température : la température sera affichée en rouge.
Si vous n’avez pas de capteur DS18B20, vous pouvez utiliser un BME280, un DHT22, ou tout autre capteur (qui nécessite un maximum de deux GPIO pour se connecter)… Ou vous pouvez utiliser des valeurs aléatoires pour tester le projet.
Avec ce tutoriel, vous apprendrez à utiliser LVGL pour :
- Afficher les données sur des étiquettes de texte ;
- Changez la couleur et la taille du texte ;
- Créez une jauge incurvée ;
- Changez les couleurs de la jauge ;
- Définissez la valeur de la jauge.
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.
5) Installez les bibliothèques DS18B20
Dans ce didacticiel, nous utiliserons le capteur DS18B20 pour obtenir des relevés de température. Suivez le didacticiel suivant pour vous familiariser avec le capteur et installer les bibliothèques requises.
Vous devrez installer la bibliothèque « OneWire » de Paul Stoffregen et la bibliothèque « DallasTemperature » de Miles Burton.
Câblage du capteur de température DS18B20 à la carte ESP32 CYD
Nous utiliserons le protocole de communication OneWire pour obtenir les données du capteur DS18B20. Ce protocole de communication ne nécessite qu’un seul GPIO pour se connecter à un microcontrôleur.
Sur le Cheap Yellow Display, il y a une prise IO étendue qui vous permet de connecter des périphériques externes. Nous connecterons le capteur au connecteur CN1 et utiliserons le GPIO 27.
Votre carte aurait dû être livrée avec un petit connecteur JST pour accéder à ces GPIO. Vous pouvez consulter le schéma ci-dessous pour voir comment connecter le capteur à la carte.
En savoir plus sur le brochage CYD : brochage de l’écran jaune bon marché ESP32 (CYD) (ESP32-2432S028R).
Affichage de la température sur ESP32 CYD à l’aide de LVGL – Code Arduino
Le code suivant obtiendra la température du capteur DS18B20 et l’affichera sur une étiquette de texte et une jauge incurvée sur l’écran. La couleur du texte varie en fonction de la valeur de la température.
/* Rui Santos & Sara Santos - Raspberryme.com
CYD Project Details: https://Raspberryme.com/esp32-cyd-lvgl-temperature-ds18b20/
TFT Project Details: https://Raspberryme.com/esp32-lvgl-ds18b20-tempreature-tft-display/
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.
*/
// *** YOU MUST USE THE lv_conf.h AND User_Setup.h FILES PROVIDED IN THE NEXT LINKS IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS: https://Raspberryme.com/cyd-lvgl/ or https://Raspberryme.com/esp32-tft-lvgl/
// 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
#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
#include
// Install OneWire and DallasTemperature libraries
#include
#include
// GPIO where the DS18B20 is connected to
const int oneWireBus = 27;
// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(oneWireBus);
// Pass our oneWire reference to Dallas Temperature sensor
DallasTemperature sensors(&oneWire);
// SET VARIABLE TO 0 FOR TEMPERATURE IN FAHRENHEIT DEGREES
#define TEMP_CELSIUS 1
#if TEMP_CELSIUS
#define TEMP_ARC_MIN -20
#define TEMP_ARC_MAX 40
#else
#define TEMP_ARC_MIN -4
#define TEMP_ARC_MAX 104
#endif
#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();
}
lv_obj_t * arc;
// Set the temperature value in the arc and text label
static void set_temp(void * text_label_temp_value, int32_t v) {
sensors.requestTemperatures();
// Get the latest temperature reading in Celsius or Fahrenheit
#if TEMP_CELSIUS
float ds18b20_temp = sensors.getTempCByIndex(0);
if(ds18b20_temp <= 10.0) {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_BLUE), 0);
}
else if (ds18b20_temp > 10.0 && ds18b20_temp <= 29.0) {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_GREEN), 0);
}
else {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_RED), 0);
}
const char degree_symbol[] = "\u00B0C";
#else
float ds18b20_temp = sensors.getTempFByIndex(0);
if(ds18b20_temp <= 50.0) {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_BLUE), 0);
}
else if (ds18b20_temp > 50.0 && ds18b20_temp <= 84.2) {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_GREEN), 0);
}
else {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_RED), 0);
}
const char degree_symbol[] = "\u00B0F";
#endif
lv_arc_set_value(arc, map(int(ds18b20_temp), TEMP_ARC_MIN, TEMP_ARC_MAX, 0, 100));
String ds18b20_temp_text = String(ds18b20_temp) + degree_symbol;
lv_label_set_text((lv_obj_t*) text_label_temp_value, ds18b20_temp_text.c_str());
Serial.print("Temperature: ");
Serial.println(ds18b20_temp_text);
}
void lv_create_main_gui(void) {
// Create an Arc
arc = lv_arc_create(lv_screen_active());
lv_obj_set_size(arc, 210, 210);
lv_arc_set_rotation(arc, 135);
lv_arc_set_bg_angles(arc, 0, 270);
lv_obj_set_style_arc_color(arc, lv_color_hex(0x666666), LV_PART_INDICATOR);
lv_obj_set_style_bg_color(arc, lv_color_hex(0x333333), LV_PART_KNOB);
lv_obj_align(arc, LV_ALIGN_CENTER, 0, 10);
// Create a text label in font size 32 to display the latest temperature reading
lv_obj_t * text_label_temp_value = lv_label_create(lv_screen_active());
lv_label_set_text(text_label_temp_value, "--.--");
lv_obj_align(text_label_temp_value, LV_ALIGN_CENTER, 0, 10);
static lv_style_t style_temp;
lv_style_init(&style_temp);
lv_style_set_text_font(&style_temp, &lv_font_montserrat_32);
lv_obj_add_style(text_label_temp_value, &style_temp, 0);
// Create an animation to update with the latest temperature value every 10 seconds
lv_anim_t a_temp;
lv_anim_init(&a_temp);
lv_anim_set_exec_cb(&a_temp, set_temp);
lv_anim_set_duration(&a_temp, 1000000);
lv_anim_set_playback_duration(&a_temp, 1000000);
lv_anim_set_var(&a_temp, text_label_temp_value);
lv_anim_set_values(&a_temp, 0, 100);
lv_anim_set_repeat_count(&a_temp, LV_ANIM_REPEAT_INFINITE);
lv_anim_start(&a_temp);
}
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 the DS18B20 sensor
sensors.begin();
// 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 GUI
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 ?
Voyons comment obtenir la température du capteur DS18B20 et mettons régulièrement à jour l’étiquette de texte et la jauge avec la dernière lecture.
Vous pouvez également passer directement à la section Démonstration.
Y compris les bibliothèques
Dans tous vos croquis, vous devez inclure les bibliothèques lvgl.h et TFT_eSPI.h à afficher à l’écran.
#include
#include Vous devez inclure les bibliothèques OneWire et DallasTemperature pour vous connecter au capteur DS18B20.
#include
#include Déclaration du capteur DS18B20
La broche de données du capteur DS18B20 est connectée au GPIO 27.
// GPIO where the DS18B20 is connected to
const int oneWireBus = 27; Nous créons une instance OneWire sur ce GPIO.
// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(oneWireBus);Enfin, nous créons un objet DallasTemperature appelé capteurs pour faire référence à notre capteur.
// Pass our oneWire reference to Dallas Temperature sensor
DallasTemperature sensors(&oneWire);Celsius ou Fahrenheit
Notre code est prêt à afficher la température en degrés Celsius ou Fahrenheit. Pour choisir l’unité souhaitée, vous pouvez définir la valeur de la variable TEMP_CELSIUS. Il est réglé sur 1 par défaut pour afficher la température en degrés Celsius.
#define TEMP_CELSIUS 1 Si vous souhaitez plutôt afficher en degrés Fahrenheit, réglez-le sur 0.
#define TEMP_CELSIUS 0Valeurs minimales et maximales de la jauge
Sur les variables suivantes nous définissons les valeurs minimales et maximales de la jauge. Pour la température en Celsius, nous définissons un minimum de -20ºC et un maximum de 40ºC. Pour la température en Fahrenheit, nous définissons le minimum pour -4ºF et le maximum pour 104ºF.
#if TEMP_CELSIUS
#define TEMP_ARC_MIN -20
#define TEMP_ARC_MAX 40
#else
#define TEMP_ARC_MIN -4
#define TEMP_ARC_MAX 104
#endifVous pouvez ajuster ces valeurs en fonction de la plage de température que vous lirez.
Définir la largeur et la hauteur de l’affichage
Vous devez définir la largeur et la hauteur d’affichage dans tous vos croquis qui utilisent LVGL. Si vous utilisez l’affichage recommandé, la taille est de 240 × 320.
#define SCREEN_WIDTH 241
#define SCREEN_HEIGHT 320Création d’un tampon de dessin
Vous devez créer un tampon pour dessiner sur l’écran comme suit :
#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT / 10 * (LV_COLOR_DEPTH / 8))
uint32_t draw_buf[DRAW_BUF_SIZE / 4];Vous devez également l’inclure dans tous les exemples LVGL.
Fonction de débogage
Pour le débogage avec la bibliothèque LVGL, vous devez utiliser la fonction log_print(). Il est défini ci-dessous. Incluez-le dans tous vos croquis avant le setup().
// 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();
}Objet jauge/arc global
Nous créons un arc d’objet LVGL global (c’est la jauge incurvée) afin de pouvoir y accéder ultérieurement dans toutes les fonctions.
lv_obj_t * arc;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 le capteur DS18B20
Initialisez le capteur DS18B20 dans le setup().
// Start the DS18B20 sensor
sensors.begin();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’interface graphique
La bibliothèque LVGL fonctionne de manière asynchrone. Vous devez appeler la fonction 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 rechercher des événements dans la boucle().
Dans la plupart de nos exemples, la fonction qui dessinera à l’écran sera appelée lv_create_main_gui(). Ensuite, à l’intérieur de cette fonction, nous ajouterons les instructions pour construire l’interface.
// Function to draw the GUI
lv_create_main_gui();Création d’un arc (jauge courbe)
Pour créer un arc, on peut appeler la fonction LVGL lv_arc_create() et passer en argument l’endroit où l’on veut afficher l’arc. Nous voulons l’ajouter à l’écran actuel (lv_screen_active()).
arc = lv_arc_create(lv_screen_active());Définissez la taille de l’arc à l’aide de la fonction lv_obj_set_size(). Cette fonction est utilisée pour définir la taille des objets LVGL. Passez en arguments : l’objet auquel vous faites référence, la largeur et la hauteur.
lv_obj_set_size(arc, 210, 210);Définissez la rotation de l’arc (lv_arc_set_rotation()) et les angles maximum et minimum pour l’indicateur qui sera dessiné dans l’arc (lv_arc_set_bg_angle()).
lv_arc_set_rotation(arc, 135);
lv_arc_set_bg_angles(arc, 0, 270);Styliser l’arc
Nous pouvons définir la couleur de l’arc indicateur en utilisant lv_object_set_style_arc_color() qui est utilisé pour définir la couleur des arcs LVGL. Passez en arguments : l’arc LVGL, la couleur, et la partie de l’arc dont vous souhaitez définir la couleur, dans notre cas, c’est l’indicateur (LV_PART_INDICATOR).
lv_obj_set_style_arc_color(arc, lv_color_hex(0x666666), LV_PART_INDICATOR);Pour appliquer n’importe quelle couleur, vous pouvez utiliser la fonction lv_color_hex() et passer en argument le code hexadécimal de la couleur.
Vous pouvez également définir la couleur du bouton comme suit :
lv_obj_set_style_bg_color(arc, lv_color_hex(0x333333), LV_PART_KNOB);Enfin, définissez l’alignement de l’arc. Pour ce faire, vous pouvez utiliser la fonction lv_obj_align(). Passez en arguments, l’objet LVGL, l’alignement et les décalages x et y en pixels.
lv_obj_align(arc, LV_ALIGN_CENTER, 0, 10);Vous pouvez utiliser l’image suivante comme référence pour placer votre objet sur l’écran.
Dans notre cas, nous l’alignons au centre, nous utilisons donc LV_ALIGN_CENTER.
Si vous vouliez le placer dans le coin supérieur droit, vous utiliseriez LV_ALIGN_TOP_RIGHT.
Affichage du texte sur l’écran
Dans la fonction lv_create_main_gui(), nous ajoutons également les instructions pour écrire du texte à l’écran.
Un texte est un objet étiquette. Les lignes suivantes créent un objet d’étiquette LVGL appelé text_label_temp_value. On utilise la fonction lv_label_create() et on passe en argument lv_screen_active() pour ajouter le label à l’écran courant.
lv_obj_t * text_label_temp_value = lv_label_create(lv_screen_active());Après avoir créé l’étiquette de texte, nous pouvons définir son texte en utilisant la fonction lv_label_set_text() qui accepte comme arguments l’étiquette de texte à laquelle nous faisons référence et le texte que nous voulons ajouter à cette étiquette. Dans notre cas, nous définissons le texte sur –.– car lorsque l’affichage démarre pour la première fois, il n’y a pas encore de lecture du capteur. Vous pouvez afficher n’importe quel autre texte.
lv_label_set_text(text_label_temp_value, "--.--");Les lignes suivantes alignent l’étiquette de texte.
lv_obj_align(text_label_temp_value, LV_ALIGN_CENTER, 0, 10);Styliser l’objet étiquette
Pour styliser notre étiquette de texte, nous allons commencer par créer un objet de type lv_style_t appelé style_temp. Ce type d’objet est utilisé pour appliquer des styles aux objets LVGL.
static lv_style_t style_temp;Après avoir créé le style, nous l’initialisons à l’aide de la fonction lv_style_init() et passons en argument notre style d’étiquette de texte (style_temp).
lv_style_init(&style_temp);Ensuite, nous pouvons définir le type et la taille de la police à l’aide de la fonction lv_style_set_text_font(). Nous passons en argument l’objet de style auquel nous faisons référence et le type de police.
lv_style_set_text_font(&style_temp, &lv_font_montserrat_32);Le nom du type de police inclut déjà la taille de la police. Nous utilisons lv_font_montserrat_32, qui fait référence à la police Montserrat de taille 32. Une liste des types de polices intégrés peut être trouvée dans le lien ci-dessous :
Une fois que nous avons défini toutes les propriétés de notre style, nous pouvons enfin l’appliquer à notre text_label_temp_value en utilisant la fonction lv_obj_add_style() comme suit.
lv_obj_add_style(text_label_temp_value, &style_temp, 0);Le 0 indique que nous voulons ajouter le style à l’objet text_label_temp_value dans son ensemble et pas seulement à certaines parties de text_label_temp_value.
Création d’une animation – Mise à jour de la température
Pour mettre à jour la température à l’écran à la fois sur l’étiquette de texte et sur l’arc, nous pouvons créer une animation qui exécutera périodiquement une fonction spécifique. Dans ce cas, nous le mettrons à jour toutes les 10 secondes.
Tout d’abord, créez une animation appelée a_temp et associez une fonction de rappel à cette animation. Dans ce cas, la fonction de rappel set_temp().
lv_anim_t a_temp;
lv_anim_init(&a_temp);
lv_anim_set_exec_cb(&a_temp, set_temp);Définissez la fréquence à laquelle vous souhaitez exécuter la fonction set_temp(). Dans notre cas, nous le réglons sur 10 secondes (cette fonction mettra à jour l’écran avec les données les plus récentes).
lv_anim_set_duration(&a_temp, 1000000);
lv_anim_set_playback_duration(&a_temp, 1000000);Vous pouvez transmettre une variable à la fonction de rappel en utilisant la fonction lv_anim_set_var(). Dans notre cas, nous souhaitons accéder à text_label_temp_value, qui est la variable que nous souhaitons mettre à jour.
lv_anim_set_var(&a_temp, text_label_temp_value);Ensuite, vous devez ajouter les lignes suivantes pour que l’animation fonctionne et s’exécute indéfiniment tant que le programme est en cours d’exécution.
lv_anim_set_var(&a_temp, text_label_temp_value);
lv_anim_set_values(&a_temp, 0, 100);
lv_anim_set_repeat_count(&a_temp, LV_ANIM_REPEAT_INFINITE);
lv_anim_start(&a_temp);Mise à jour de l’étiquette de température – La fonction de rappel
Jetons maintenant un œil à la fonction de rappel set_temp() qui s’exécutera toutes les 10 secondes.
static void set_temp(void * text_label_temp_value, int32_t v) {Tout d’abord, nous vérifions si nous devons afficher la température en degrés Celsius ou Fahrenheit en fonction de la valeur de la variable TEMP_CELSIUS.
Nous obtenons la température du DS18B20 et la sauvegardons dans la variable ds18b20_temp.
float ds18b20_temp = sensors.getTempCByIndex(0);Nous vérifions ensuite dans quelle plage se situe la valeur de température pour définir sa couleur en conséquence.
sensors.requestTemperatures();
// Get the latest temperature reading in Celsius or Fahrenheit
#if TEMP_CELSIUS
float ds18b20_temp = sensors.getTempCByIndex(0);
if(ds18b20_temp <= 10.0) {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_BLUE), 0);
}
else if (ds18b20_temp > 10.0 && ds18b20_temp <= 29.0) {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_GREEN), 0);
}
else {
lv_obj_set_style_text_color((lv_obj_t*) text_label_temp_value, lv_palette_main(LV_PALETTE_RED), 0);
}Nous voulons afficher le symbole du degré sur l’écran. C’est un caractère Unicode et nous pouvons l’obtenir comme suit.
const char degree_symbol[] = "\u00B0F";Plus d’informations sur les caractères Unicode.
Nous mettons à jour la valeur affichée sur l’arc en appelant la fonction lv_arc_set_value(). Passez en argument l’objet arc et la valeur. Il accepte une valeur de 0 à 100%. Nous utilisons donc la fonction map() pour mapper la température actuelle à cette plage en tenant compte des valeurs minimales et maximales que nous avons définies au début du code.
lv_arc_set_value(arc, map(int(ds18b20_temp), TEMP_ARC_MIN, TEMP_ARC_MAX, 0, 100));L’arc sera maintenant mis à jour avec la dernière lecture de température. Maintenant, nous devons mettre à jour l’étiquette de texte.
Nous créons une chaîne avec la valeur de température actuelle concaténée avec le symbole du degré.
String ds18b20_temp_text = String(ds18b20_temp) + degree_symbol;Enfin, définissez le texte text_label_temp_value sur cette chaîne à l’aide de la fonction lv_label_set_text().
lv_label_set_text((lv_obj_t*) text_label_temp_value, ds18b20_temp_text.c_str());Nous imprimons également dans le moniteur série à des fins de débogage.
Serial.print("Temperature: ");
Serial.println(ds18b20_temp_text);Et c’est ainsi que vous mettez à jour la valeur de l’arc et une étiquette de texte à l’aide d’une animation LVGL.
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
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, la température s’affichera sur l’écran comme indiqué dans l’image ci-dessous.
La couleur du texte changera en fonction de la plage de température.
En même temps, la température sera affichée sur le moniteur série.
Conclusion
Dans ce didacticiel, vous avez appris à afficher les données du capteur sur l’écran d’affichage Cheap Yellow à l’aide de la bibliothèque LVGL. Vous avez appris à afficher du texte et à créer une jauge incurvée.
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 :
