ESP32 TFT avec LVGL : affichage des données de localisation GPS

ESP32 TFT avec LVGL : affichage des données de localisation GPS

Dans ce guide, vous apprendrez comment transformer votre ESP32 et un écran TFT en un lecteur GPS qui affiche la position actuelle, l’altitude, la vitesse, la date et l’heure à l’aide de LVGL (Light Versatile Graphics Library). Nous utiliserons le module GPS NEO-6M pour obtenir les données GPS et la puce ESP32 sera programmée à l’aide de l’IDE Arduino.

Écran TFT ESP32 avec affichage LVGL Localisation GPS Date et heure Arduino IDE

Utilisez-vous une carte CYD ? Lisez ce guide : ESP32 CYD avec LVGL : affichage de la position GPS, de la date et de l’heure

Aperçu du projet

Nous afficherons les données GPS actuelles (latitude et longitude), l’altitude, la vitesse, l’heure et la date sur un écran tactile LCD TFT ILI9341 de 2,8 pouces (240 × 320). Nous utiliserons le module GPS NEO-6M (lisez notre guide de démarrage NEO-6M).

Écran de démonstration ESP32 TFT LVGL, localisation GPS, Date et heure

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

ESP32 TFT LVGL Affichage GPS Localisation Date Heure Pièces requises

2) Installez les cartes ESP32 dans l’IDE Arduino

Logo ArduinoIDE2

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 tactile LCD TFT ILI9341

L’écran que nous utilisons dans ce guide est le 2.8. pouces TFT LCD qui est également livré avec un écran tactile. L’écran communique via le protocole de communication SPI et utilise le pilote ILI9341. L’écran tactile utilise également le protocole de communication SPI.

L’écran tactile TFT LCD est également livré avec une interface de carte SD si vous devez charger des fichiers pour votre projet spécifique. Cet écran est également disponible avec différentes tailles d’écran, mais nous utiliserons celle de 240 x 320 pixels).

Écran tactile LCD TFT ILI9341

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

4) Câblez l’écran à l’ESP32

Câblez les broches de l’écran LCD TFT et de l’écran tactile aux GPIO ESP32 selon le tableau suivant (vous devez utiliser ces broches exactes, sinon le projet ne fonctionnera pas).

Câblage de l'écran tactile LCD TFT à l'ESP32
Écran tactile LCD TFT ESP32
T_IRQ GPIO36
T_OUT GPIO39
T_DIN GPIO32
T_CS GPIO33
T_CLK GPIO25
SDO(MISO) GPIO12
DIRIGÉ GPIO21
SCK GPIO14
IDS(MOSI) GPIO13
D/C GPIO2
RÉINITIALISER FR/RESET
CS GPIO15
GND GND
VCC 5V (ou 3,3V)*

* Dans la broche VCC, vous pouvez utiliser 5V ou 3,3V selon si votre connexion J1 est ouverte ou fermée (par défaut elle est généralement ouverte comme vous pouvez le voir sur la figure ci-dessous).

VCC = 5V | J1=OPEN
VCC = 3.3V | J1=CLOSE
Écran tactile LCD TFT Connexion J1

5) Câblage du module GPS NEO-6M

Le module GPS NEO-6M est un récepteur GPS compatible avec la plupart des cartes microcontrôleurs. Il peut obtenir des données sur l’emplacement, la vitesse, l’altitude et l’heure. Nous connecterons le module GPS NEO-6M à la carte ESP32.

Vous pouvez utiliser le tableau suivant comme référence.

Module GPS NÉO-6M ESP32
VCC 3V3
RX GPIO27
Émission GPIO22
GND GND

Vous devez également connecter une antenne externe au module GPS. La figure ci-dessous montre deux options différentes d’antennes pour les modules GPS.

antennes pour modules GPS

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

LVGL nouveau logo

Suivez le didacticiel suivant pour installer et configurer les bibliothèques requises pour utiliser LVGL avec l’écran tactile LCD TFT ILI9341 240 × 320 de 2,8 pouces à l’aide de l’IDE Arduino.

7) Installer la bibliothèque TinyGPSPlus

Pour ce projet, vous devez installer la bibliothèque TinyGPSPlus pour préparer les données GPS.

Dans l’IDE Arduino, accédez à Sketch > Inclure la bibliothèque > Gérer les bibliothèques. Recherchez TinyGPSPlus et installez la bibliothèque de Mikal Hart. Nous utilisons la version 1.0.3 et nous vous recommandons d’utiliser la même version.

Installation de l'IDE Arduino de la bibliothèque TinyGPSPlus

Données GPS ESP32 TFT – fichier gps_image.h

Pour charger des images personnalisées à l’aide de LVGL, vous devez créer un fichier supplémentaire appelé gps_image.h qui doit être placé dans le dossier d’esquisse. Nous avons déjà préparé ce dossier pour vous. Pour charger l’image personnalisée de ce lecteur GPS, vous devez télécharger le fichier suivant.

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

LVGL Load Image Arduino Code exemple dossier fichier image GPS

Votre IDE Arduino devrait avoir deux onglets :

Onglets Arduino IDE LVGL Load Image Dossier d'exemple de code Arduino Fichier image GPS

Si vous souhaitez en savoir plus sur le chargement d’images à l’aide de LVGL, nous vous recommandons de lire notre Guide ESP32 avec TFT : Afficher l’image à l’aide de LVGL – 2,8 pouces ILI9341 240×320 (Arduino)

Données GPS ESP32 TFT – Code Arduino

Le code suivant créera des étiquettes de texte avec les données GPS, l’altitude, la vitesse, l’heure et la date. Il chargera également une image pour illustrer la candidature au projet.

/*  Rui Santos & Sara Santos - Raspberryme.com - https://Raspberryme.com/esp32-cyd-lvgl-gps-location/  |  https://Raspberryme.com/esp32-tft-lvgl-gps-data/
    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.X 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 

#include "gps_image.h"

// Define the RX and TX pins for Serial 2
#define RXD2 22
#define TXD2 27

#define GPS_BAUD 9600

// The TinyGPS++ object
TinyGPSPlus gps;

// Create an instance of the HardwareSerial class for Serial 2
HardwareSerial gpsSerial(2);

#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];

String current_date;
String utc_time;
String latitude;
String longitude;
String altitude;
String speed;
String hdop;
String satellites;

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

String format_time(int time) {
  return (time < 10) ? "0" + String(time) : String(time);
}

static lv_obj_t * text_label_date;
static lv_obj_t * text_label_latitude;
static lv_obj_t * text_label_longitude;
static lv_obj_t * text_label_altitude;
static lv_obj_t * text_label_speed;
static lv_obj_t * text_label_utc_time;
static lv_obj_t * text_label_hdop_satellites;
static lv_obj_t * text_label_gps_data;

static void timer_cb(lv_timer_t * timer){
  LV_UNUSED(timer);
  lv_label_set_text(text_label_date, current_date.c_str());
  lv_label_set_text(text_label_hdop_satellites, String("HDOP " + hdop + "  SAT. " + satellites).c_str());
  lv_label_set_text(text_label_gps_data, String("LAT   " + latitude + "\nLON   " + longitude + "\nALT   " 
                                                + altitude + "m" + "\nSPEED   " + speed + "km/h").c_str());
  lv_label_set_text(text_label_utc_time, String("UTC TIME - " + utc_time).c_str());
}

void lv_create_main_gui(void) {
  LV_IMAGE_DECLARE(image_gpsmap);

  lv_obj_t * img_gpsmap = lv_image_create(lv_screen_active());
  lv_obj_align(img_gpsmap, LV_ALIGN_LEFT_MID, 10, -20);
  lv_image_set_src(img_gpsmap, &image_gpsmap);

  text_label_hdop_satellites = lv_label_create(lv_screen_active());
  lv_label_set_text(text_label_hdop_satellites, String("HDOP " + hdop + "  SAT. " + satellites).c_str());
  lv_obj_align(text_label_hdop_satellites, LV_ALIGN_BOTTOM_LEFT, 30, -50);
  lv_obj_set_style_text_font((lv_obj_t*) text_label_hdop_satellites, &lv_font_montserrat_12, 0);
  lv_obj_set_style_text_color((lv_obj_t*) text_label_hdop_satellites, lv_palette_main(LV_PALETTE_GREY), 0);

  text_label_date = lv_label_create(lv_screen_active());
  lv_label_set_text(text_label_date, current_date.c_str());
  lv_obj_align(text_label_date, LV_ALIGN_CENTER, 60, -80);
  lv_obj_set_style_text_font((lv_obj_t*) text_label_date, &lv_font_montserrat_26, 0);
  lv_obj_set_style_text_color((lv_obj_t*) text_label_date, lv_palette_main(LV_PALETTE_TEAL), 0);

  lv_obj_t * text_label_location = lv_label_create(lv_screen_active());
  lv_label_set_text(text_label_location, "LOCATION");
  lv_obj_align(text_label_location, LV_ALIGN_CENTER, 50, -40);
  lv_obj_set_style_text_font((lv_obj_t*) text_label_location, &lv_font_montserrat_20, 0);
  
  text_label_gps_data = lv_label_create(lv_screen_active());
  lv_label_set_text(text_label_gps_data, String("LAT   " + latitude + "\nLON   " + longitude + "\nALT   " 
                                                 + altitude + "m" + "\nSPEED   " + speed + "km/h").c_str());
  lv_obj_align(text_label_gps_data, LV_ALIGN_CENTER, 60, 20);
  lv_obj_set_style_text_font((lv_obj_t*) text_label_gps_data, &lv_font_montserrat_14, 0);

  text_label_utc_time = lv_label_create(lv_screen_active());
  lv_label_set_text(text_label_utc_time, String("UTC TIME - " + utc_time).c_str());
  lv_obj_align(text_label_utc_time, LV_ALIGN_BOTTOM_MID, 0, -10);
  lv_obj_set_style_text_font((lv_obj_t*) text_label_utc_time, &lv_font_montserrat_20, 0);
  lv_obj_set_style_text_color((lv_obj_t*) text_label_utc_time, lv_palette_main(LV_PALETTE_TEAL), 0);
 
  lv_timer_t * timer = lv_timer_create(timer_cb, 1, NULL);
  lv_timer_ready(timer);
}

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 Serial 2 with the defined RX and TX pins and a baud rate of 9600
  gpsSerial.begin(GPS_BAUD, SERIAL_8N1, RXD2, TXD2);
  Serial.println("Serial 2 started at 9600 baud rate");

  // 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
  
  // This sketch displays information every time a new sentence is correctly encoded.
  unsigned long start = millis();

  while (millis() - start < 1000) {
    while (gpsSerial.available() > 0) {
      gps.encode(gpsSerial.read());
    }
    if (gps.location.isUpdated()) {
      Serial.print("LAT: ");
      latitude = String(gps.location.lat(), 6);
      Serial.println(latitude);
      Serial.print("LONG: "); 
      longitude = String(gps.location.lng(), 6);
      Serial.println(longitude);
      Serial.print("SPEED (km/h) = "); 
      speed = String(gps.speed.kmph(), 2);
      Serial.println(speed);
      Serial.print("ALT (min)= "); 
      altitude = String(gps.altitude.meters(), 2);
      Serial.println(altitude);
      Serial.print("HDOP = "); 
      hdop = String(gps.hdop.value() / 100.0, 2);
      Serial.println(hdop);
      Serial.print("Satellites = "); 
      satellites = String(gps.satellites.value());
      Serial.println(satellites);
      Serial.print("Time in UTC: ");
      Serial.println(String(gps.date.year()) + "-" + String(gps.date.month()) + "-" + String(gps.date.day()) + "," + String(gps.time.hour()) + ":" + String(gps.time.minute()) + ":" + String(gps.time.second()));
      current_date = String(gps.date.year()) + "-" + String(gps.date.month()) + "-" + String(gps.date.day());
      Serial.println(current_date);
      utc_time = String(format_time(gps.time.hour())) + ":" + String(format_time(gps.time.minute())) + ":" + String(format_time(gps.time.second()));
      Serial.println(utc_time);
      Serial.println("");
    }
  }
}

Afficher le code brut

Comment fonctionne le code ?

Voyons comment obtenir la localisation GPS et mettre à jour l’écran avec les valeurs actuelles. Vous pouvez également passer directement à la section Démonstration.

Y compris les bibliothèques et les images

Vous devez inclure les bibliothèques lvgl.h et TFT_eSPI.h pour dessiner l’interface graphique à l’écran.

#include 
#include 

Vous devez inclure la bibliothèque TinyGPS++.h pour gérer les données GPS.

#include 

Incluez le fichier gps_image.h qui contient toutes les données pour dessiner l’image de la carte.

#include "gps_image.h"

Série GPS

Ce croquis utilise GPIO 22 et GPIO 27 comme broches série RX et TX pour établir une communication série avec le module GPS.

// Define the RX and TX pins for Serial 2
#define RXD2   22
#define TXD2    27

De plus, si votre module utilise un débit en bauds par défaut différent de 9600 bps, vous devez modifier le code sur la ligne suivante :

#define GPS_BAUD 9600

Ensuite, nous créons une instance de HardwareSerial pour utiliser UART 2 appelée gpsSerial.

// Create an instance of the HardwareSerial class for Serial 2
HardwareSerial gpsSerial(2);

Déclaration d’autres variables

Créez des variables auxiliaires pour contenir les données GPS et d’autres valeurs.

String current_date;
String utc_time;
String latitude;
String longitude;
String altitude;
String speed;
String hdop;
String satellites;

Objets LVGL globaux

Nous créons des objets LVGL globaux, afin de pouvoir y accéder ultérieurement dans toutes les fonctions.

static lv_obj_t * text_label_date;
static lv_obj_t * text_label_latitude;
static lv_obj_t * text_label_longitude;
static lv_obj_t * text_label_altitude;
static lv_obj_t * text_label_speed;
static lv_obj_t * text_label_utc_time;
static lv_obj_t * text_label_hdop_satellites;
static lv_obj_t * text_label_gps_data;

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

Démarrer la série GPS

Pour connecter la carte ESP32 au module GPS via série, nous utilisons le code suivant.

gpsSerial.begin(GPS_BAUD, SERIAL_8N1, RXD2, TXD2);
Serial.println("Serial 2 started at 9600 baud rate");

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 vérifier les é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();

Préparation de l’interface graphique

Avant de dessiner l’interface graphique principale, nous commençons par déclarer une image qui sera affichée sur l’écran TFT.

void lv_create_main_gui(void) {
  LV_IMAGE_DECLARE(image_gpsmap);
(...)

Charger l’image GPS

Nous créons une image et la plaçons sur le côté gauche de l’écran.

lv_obj_t * img_gpsmap = lv_image_create(lv_screen_active());
lv_obj_align(img_gpsmap, LV_ALIGN_LEFT_MID, 10, -20);
lv_image_set_src(img_gpsmap, &image_gpsmap);

Étiquettes de texte

Pour créer une étiquette de texte, nous pouvons appeler la fonction LVGL lv_label_create() et passer en argument l’endroit où nous voulons afficher le texte. Nous voulons l’ajouter à l’écran actuel (lv_screen_active()). La ligne suivante crée une étiquette de texte pour afficher le HDOP et le nombre de satellites.

text_label_hdop_satellites = 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 attribuons cette étiquette au HDOP actuel et aux satellites visibles.

lv_label_set_text(text_label_hdop_satellites, String("HDOP " + hdop + "  SAT. " + satellites).c_str());

Les lignes suivantes alignent l’étiquette de texte. 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(text_label_hdop_satellites, LV_ALIGN_BOTTOM_LEFT, 30, -50);

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 auquel nous faisons référence et le type de police.

lv_obj_set_style_text_font((lv_obj_t*) text_label_hdop_satellites, &lv_font_montserrat_12, 0);

Pour text_label_date, nous définissons également une couleur grise de texte personnalisée :

lv_obj_set_style_text_color((lv_obj_t*) text_label_hdop_satellites, lv_palette_main(LV_PALETTE_GREY), 0);

Une procédure similaire est appliquée à toutes les autres étiquettes (date, emplacement, données GPS et heure UTC), mais nous les plaçons à des endroits différents et définissons différentes tailles et couleurs de police.

text_label_date = lv_label_create(lv_screen_active());
lv_label_set_text(text_label_date, current_date.c_str());
lv_obj_align(text_label_date, LV_ALIGN_CENTER, 60, -80);
lv_obj_set_style_text_font((lv_obj_t*) text_label_date, &lv_font_montserrat_26, 0);
lv_obj_set_style_text_color((lv_obj_t*) text_label_date, lv_palette_main(LV_PALETTE_TEAL), 0);

lv_obj_t * text_label_location = lv_label_create(lv_screen_active());
lv_label_set_text(text_label_location, "LOCATION");
lv_obj_align(text_label_location, LV_ALIGN_CENTER, 50, -40);
lv_obj_set_style_text_font((lv_obj_t*) text_label_location, &lv_font_montserrat_20, 0);
  
text_label_gps_data = lv_label_create(lv_screen_active());
lv_label_set_text(text_label_gps_data, String("LAT   " + latitude + "\nLON   " + longitude + "\nALT   " + altitude + "m" + "\nSPEED   " + speed + "km/h").c_str());
lv_obj_align(text_label_gps_data, LV_ALIGN_CENTER, 60, 20);
lv_obj_set_style_text_font((lv_obj_t*) text_label_gps_data, &lv_font_montserrat_14, 0);

text_label_utc_time = lv_label_create(lv_screen_active());
lv_label_set_text(text_label_utc_time, String("UTC TIME - " + utc_time).c_str());
lv_obj_align(text_label_utc_time, LV_ALIGN_BOTTOM_MID, 0, -10);
lv_obj_set_style_text_font((lv_obj_t*) text_label_utc_time, &lv_font_montserrat_20, 0);
lv_obj_set_style_text_color((lv_obj_t*) text_label_utc_time, lv_palette_main(LV_PALETTE_TEAL), 0);

Minuteur

Pour mettre à jour les données à l’écran, nous pouvons créer une minuterie LVGL qui exécutera périodiquement une fonction spécifique. Dans ce cas, nous le mettrons à jour toutes les secondes. Créez un minuteur LVGL appelé timer et attribuez la fonction de rappel timer_cb.

lv_timer_t * timer = lv_timer_create(timer_cb, 1, NULL);
lv_timer_ready(timer);

Fonction de rappel de minuterie

La fonction timer_cb s’exécute toutes les secondes. Chaque fois que la fonction de rappel s’exécute, nous obtenons les dernières données GPS du module NEO-6M et mettons à jour l’interface graphique.

static void timer_cb(lv_timer_t * timer){
  LV_UNUSED(timer);
  
(...)

Enfin, nous définissons toutes les étiquettes de texte sur les données actuelles renvoyées par le module GPS :

lv_label_set_text(text_label_date, current_date.c_str());
lv_label_set_text(text_label_hdop_satellites, String("HDOP " + hdop + "  SAT. " + satellites).c_str());
lv_label_set_text(text_label_gps_data, String("LAT   " + latitude + "\nLON   " + longitude + "\nALT   "  + altitude + "m" + "\nSPEED   " + speed + "km/h").c_str());
lv_label_set_text(text_label_utc_time, String("UTC TIME - " + utc_time).c_str());

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 demanderons chaque seconde les dernières données GPS au module NEO-6M et mettrons à jour les variables auxiliaires.

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

Le code suivant écoute le port série GPS et lorsque les données sont reçues du module, elles sont imprimées sur le moniteur série et stockées dans les variables auxiliaires.

// This sketch displays information every time a new sentence is correctly encoded.
unsigned long start = millis();

while (millis() - start < 1000) {
  while (gpsSerial.available() > 0) {
    gps.encode(gpsSerial.read());
  }
  if (gps.location.isUpdated()) {
    Serial.print("LAT: ");
    latitude = String(gps.location.lat(), 6);
    Serial.println(latitude);
    Serial.print("LONG: "); 
    longitude = String(gps.location.lng(), 6);
    Serial.println(longitude);
    Serial.print("SPEED (km/h) = "); 
    speed = String(gps.speed.kmph(), 2);
    Serial.println(speed);
    Serial.print("ALT (min)= "); 
    altitude = String(gps.altitude.meters(), 2);
    Serial.println(altitude);
    Serial.print("HDOP = "); 
    hdop = String(gps.hdop.value() / 100.0, 2);
    Serial.println(hdop);
    Serial.print("Satellites = "); 
    satellites = String(gps.satellites.value());
    Serial.println(satellites);
    Serial.print("Time in UTC: ");
    Serial.println(String(gps.date.year()) + "-" + String(gps.date.month()) + "-" + String(gps.date.day()) + "," + String(gps.time.hour()) + ":" + String(gps.time.minute()) + ":" + String(gps.time.second()));
    current_date = String(gps.date.year()) + "-" + String(gps.date.month()) + "-" + String(gps.date.day());
    Serial.println(current_date);
    utc_time = String(format_time(gps.time.hour())) + ":" + String(format_time(gps.time.minute())) + ":" + String(format_time(gps.time.second()));
    Serial.println(utc_time);
    Serial.println("");
  }
}

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.

Bouton de téléchargement Arduino IDE 2

Ouvrez le moniteur série à un débit en bauds de 115 200. Assurez-vous que votre module GPS est placé à l’extérieur ou à côté d’une fenêtre pour obtenir les données des satellites. Cela peut prendre un certain temps. Lorsque la LED bleue du module GPS commence à clignoter, cela signifie qu’il est prêt.

Vous obtiendrez des données GPS sur le moniteur série concernant votre position actuelle, votre vitesse, votre altitude, le nombre de satellites visibles HDOP, la date et l’heure.

ESP32 affiche les données GPS Démonstration du moniteur série Arduino IDE

Vous devrez peut-être attendre quelques minutes pour que le module GPS établisse une connexion avec suffisamment de satellites pour obtenir les données GPS. Les informations seront affichées à l’écran comme indiqué dans l’image ci-dessous.

Affichage ESP32 TFT LVGL Localisation GPS Date Heure Démonstration

Conclusion

Dans ce projet, vous avez appris à créer un simple lecteur GPS avec un écran tactile TFT LCD avec l’ESP32 à l’aide de la bibliothèque LVGL. Il affiche l’emplacement actuel, l’altitude, la vitesse, la date et l’heure.

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 :

YouTube video

  • APKLVSR ESP Écran, 2,8" 240 x 320 ESP Écran TFT Module,ESP WiFi et Module Bluetooth, Carte de développement Double cœur, fréquence 240 MHz,Compatible avec Arduino/LVGL
  • RUIZHI ESP32 écran, ESP32 Ecran Tactile Carte de Développement avec 2,8" 240 x 320 LCD écran et Bluetooth WiFi Module d'affichage Intelligent TFT à écran Tactile Compatible avec Arduino/LVGL