ESP32 with LVGL: Display DS18B20 Sensor Readings on TFT LCD (Text and Arc)

In this guide, you’ll learn how to program the ESP32 with LVGL (Light Versatile Graphics Library) to display temperature from the DS18B20 sensor on a TFT LCD Touchscreen Display (2.8 inch ILI9341 240×320). We’ll display the temperature using a text label and an arc (curved gauge) object. The ESP32 will be programmed using Arduino IDE.

Project Overview

In this project, we’ll display the temperature from the DS18B20 sensor on a 2.8-inch ILI9341 TFT LCD Touchscreen (240×320). The temperature will be displayed on a text label and represented on a curved gauge (arc).

The temperature text will be displayed in different colors depending on the following ranges:

• < 10 °C (50 °F): the temperature will be displayed in blue color;
• 10 °C (50 °F) < temperature < 29 °C (84°F): the temperature will be displayed in green color;
• 29 °C (84°F) < temperature: the temperature will be displayed in red color.

If you don’t have a DS18B20 sensor, you can use a BME280, a DHT22, or any other sensor. Or you can use random values to test the project.

With this tutorial, you’ll learn how to use LVGL to:

• Display data on text labels;
• Change the text color and size;
• Create a curved gauge;
• Change the colors of the gauge;
• Set the gauge value.

Prerequisites

Before proceeding, make sure you follow the next prerequisites. You must follow all steps, otherwise, your project will not work.

1) Parts Required

For this project, you need the following parts:

• TFT LCD Touchscreen Display – 2.8 inch ILI9341 240×320
• ESP32 board with enough pins to wire the display (for example an ESP32 DOIT V1 board)
• DS18B20 Onewire Temperature Sensor
• 4.7k Ohm resistor
• Breadboard
• Jumper wires

2) Install ESP32 Boards in Arduino IDE

We’ll program the ESP32 using Arduino IDE. Make sure you have the ESP32 boards installed. Follow the next tutorial:

• Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)

3) Get familiar with the ILI9341 TFT LCD Touchscreen Display

The display we’re using in this guide is the 2.8. inch TFT LCD that also comes with a touchscreen. The display communicates via SPI communication protocol and uses the ILI9341 driver. The touchscreen also uses the SPI communication protocol.

The TFT LCD touchscreen also comes with an SD card interface if you need to load files for your specific project. This display is also available with different screen sizes, but we’ll use the one with 240 x 320 pixels).

If this is your first time using this display, make sure to follow our getting started guide:

• ESP32 with LVGL: TFT LCD Touchscreen Display – 2.8 inch ILI9341 240×320 (Arduino IDE)

4) Wire the Display to the ESP32

Wire the TFT LCD and touchscreen pins to the ESP32 GPIOs according to the next table (you must use these exact pins, otherwise the project will not work).

TFT LCD Touchscreen	ESP32
T_IRQ	GPIO 36
T_OUT	GPIO 39
T_DIN	GPIO 32
T_CS	GPIO 33
T_CLK	GPIO 25
SDO(MISO)	GPIO 12
LED	GPIO 21
SCK	GPIO 14
SDI(MOSI)	GPIO 13
D/C	GPIO 2
RESET	EN/RESET
CS	GPIO 15
GND	GND
VCC	5V (or 3.3V)*

* In the VCC pin, you can either use 5V or 3.3V depending if your J1 connection is open or closed (by default it’s usually open as you can see in the figure below).

VCC = 5V | J1=OPEN
VCC = 3.3V | J1=CLOSE

5) Install TFT and LVGL Libraries

LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library that provides a wide range of easy-to-use graphical elements for your microcontroller projects that require a graphical user interface (GUI).

Follow the next tutorial to install and configure the required libraries to use LVGL with the 2.8 inch ILI9341 240×320 TFT LCD Touchscreen using Arduino IDE.

• LVGL with ESP32 TFT LCD Touchscreen Display – 2.8 inch ILI9341 240×320 (Arduino IDE)

6) Install DS18B20 Libraries

In this tutorial, we’ll use the DS18B20 sensor to get temperature readings. Follow the next tutorial to get familiar with the sensor and install the required libraries.

• ESP32 DS18B20 Temperature Sensor with Arduino IDE

You’ll need to install the “OneWire” library by Paul Stoffregen and “DallasTemperature” library by Miles Burton.

7) Wiring the DS18B20 Temperature Sensor to the ESP32

We’ll use OneWire communication protocol to get data from the DS18B20 sensor. This communication protocol only requires one GPIO to connect with a microcontroller.

We’ll connect the data pin of the DS18B20 sensor to GPIO 27.

You can use the schematic diagram below as a reference.

Learn more about the ESP32 Pinout: ESP32 Pinout Reference: Which GPIO pins should you use?

ESP32: Displaying Temperature on TFT LCD Touchscreen – Arduino Code

The following code will get temperature from the BME280 sensor and display it on a text label on the screen. The text color will vary depending on the temperature value.

/*  Rui Santos & Sara Santos - Random Nerd Tutorials
    CYD Project Details: https://RandomNerdTutorials.com/esp32-cyd-lvgl-temperature-ds18b20/
    TFT Project Details: https://RandomNerdTutorials.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://RandomNerdTutorials.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://RandomNerdTutorials.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://RandomNerdTutorials.com/cyd-lvgl/ or https://RandomNerdTutorials.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 Random Nerd Tutorials
#include <lvgl.h>

//  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 Random Nerd Tutorials
#include <TFT_eSPI.h>

// Install OneWire and DallasTemperature libraries
#include <OneWire.h>
#include <DallasTemperature.h>

// 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
}

View raw code

How Does the Code Work?

Let’s take a look at how to get temperature from the DS18B20 sensor and update the text label and gauge periodically with the latest reading.

Alternatively, you can skip to the Demonstration section.

Including Libraries

In all your sketches, you need to include the lvgl.h and the TFT_eSPI.h libraries to display on the screen.

#include <lvgl.h>
#include <TFT_eSPI.h>

You need to include the OneWire and the DallasTemperature libraries to interface with the DS18B20 sensor.

#include <OneWire.h>
#include <DallasTemperature.h>

Declaring the DS18B20 Sensor

The data pin of the DS18B20 sensor is connected to GPIO 27.

// GPIO where the DS18B20 is connected to
const int oneWireBus = 27;

We create a OneWire instance on that GPIO.

// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(oneWireBus);

Finally, we create a DallasTemperature object called sensors to refer to our sensor.

// Pass our oneWire reference to Dallas Temperature sensor 
DallasTemperature sensors(&oneWire);

Celsius or Fahrenheit

Our code is prepared to display the temperature in Celsius or Fahrenheit degrees. To choose your desired unit, you can set the value of the TEMP_CELSIUS variable. It is set to 1 by default to display the temperature in Celsius degrees.

#define TEMP_CELSIUS 1 

If you want to display in Fahrenheit degrees instead, set it to 0.

#define TEMP_CELSIUS 0

Gauge Minimum and Maximum Values

On the following variables we define the minimum and maximum values for the gauge. For the temperature in Celsius, we’re defining a minimum of -20ºC and a maximum of 40ºC. For the temperature in Fahrenheit, we’re defining the minimum for -4ºF and the maximum for 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
#endif

You can adjust those values depending on the temperature range you’ll be reading.

Defining the Display Width and Height

You need to define your display width and height in all your sketches that use LVGL. If you’re using the recommended display, the size is 240×320.

#define SCREEN_WIDTH 240
#define SCREEN_HEIGHT 320

Creating a Drawing Buffer

You need to create a buffer to draw on the display as follows:

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

You should also include this in all LVGL examples.

Debugging Function

For debugging with the LVGL library, you should use the log_print() function. It is defined below. Include it in all your sketches before the 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();
}

Global Gauge/Arc Object

We create a global LVGL object arc (that’s the curved gauge) so that we can access it inside all functions later on.

lv_obj_t * arc;

setup()

In the setup(), include the following lines for debugging. These will print the version of LVGL that you’re using. You must be using 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);

Initialize the DS18B20 Sensor

Intialize the DS18B20 sensor in the setup().

// Start the DS18B20 sensor
sensors.begin();

Initialize the LVGL Library

Initialize the LVGL Library by calling the lv_init() function in the setup().

// Start LVGL
lv_init();

Register Debugging Function

Register your log_print() function declared previously as a function associated with debugging LVGL.

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

Create a Display Object

To write to the display, you must create a display object first. You need to do this in all your LVGL sketches. The following lines will create an LVGL display object called disp with the screen width, screen height, and drawing buffer defined earlier.

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

Drawing the GUI

The LVGL library works asynchronously. You must call the function to draw on the display in the setup(). Then, everything works with events and callbacks. The code will always be listening for events in the background. When something happens, it will run the callback function associated with the event. You don’t need to check for any events in the loop().

Throughout most of our examples, the function that will draw to the screen will be called lv_create_main_gui(). Then, inside that function, we’ll add the instructions to build the interface.

// Function to draw the GUI
lv_create_main_gui();

Creating an Arc (Curved Gauge)

To create an arc, we can call the LVGL function lv_arc_create() and pass as argument where we want to display the arc. We want to add it to the current screen (lv_screen_active()).

arc = lv_arc_create(lv_screen_active());

Set the arc size by using the lv_obj_set_size() function. This function is used to set the size of LVGL objects. Pass as arguments: the object you’re referring to, the width and the height.

lv_obj_set_size(arc, 210, 210);

Set the arc rotation (lv_arc_set_rotation()) and maximum and minimum angles for the indicator that will be drawn in the arc (lv_arc_set_bg_angle()).

lv_arc_set_rotation(arc, 135);
lv_arc_set_bg_angles(arc, 0, 270);

Styling the Arc

We can set the color of the indicator arc using the lv_object_set_style_arc_color() that is used to define the color of LVGL arches. Pass as arguments: the LVGL arc, the color, and the part of the arc that you want to set the color, in our case, it’s the indicator (LV_PART_INDICATOR).

 lv_obj_set_style_arc_color(arc, lv_color_hex(0x666666), LV_PART_INDICATOR);

To apply any color, you can use the lv_color_hex() function and pass as argument the color’s hex code.

You can also set the color of the knob as follows:

lv_obj_set_style_bg_color(arc, lv_color_hex(0x333333), LV_PART_KNOB);

Finally, set the alignment of the arc. To do that, you can use the lv_obj_align() function. Pass as arguments, the LVGL object, the alignment and x and y offsets in pixels.

lv_obj_align(arc, LV_ALIGN_CENTER, 0, 10);

You can use the following image as a reference to place your object on the screen.

In our case, we’re aligning it at the center, so we use LV_ALIGN_CENTER.

If you wanted to place it at the top right corner, you would use LV_ALIGN_TOP_RIGHT.

Displaying Text on the Display

Inside the lv_create_main_gui() function, we also add the instructions to write text on the screen.

A text is a label object. The following lines create an LVGL label object called text_label_temp_value. We use the lv_label_create() function and we pass as argument lv_screen_active() to add the label to the current screen.

lv_obj_t * text_label_temp_value = lv_label_create(lv_screen_active());

After creating the text label, we can set its text by using the lv_label_set_text() function that accepts as arguments the text label we’re referring to and the text we want to add to that label. In our case, we’re setting the text to –.– because when the display first starts, there isn’t a reading from the sensor yet. You can display any other text.

lv_label_set_text(text_label_temp_value, "--.--");

The following lines align the text label.

lv_obj_align(text_label_temp_value, LV_ALIGN_CENTER, 0, 10);

Styling the Label Object

To style our text label, we’ll start by creating an object of type lv_style_t called style_temp. This kind of object is used to apply styles to LVGL objects.

static lv_style_t style_temp;

After creating the style, we initialize it using the lv_style_init() function and pass as argument our text label style (style_temp).

lv_style_init(&style_temp);

Then, we can set the font type and size using the lv_style_set_text_font() function. We pass as argument the style object we’re referring to and the font type.

lv_style_set_text_font(&style_temp, &lv_font_montserrat_32);

The font type name already includes the font size. We’re using lv_font_montserrat_32, which refers to Montserrat font in size 32. A list of built-in font types can be found in the link below:

• LVGL built-in fonts

Once we’ve defined all the properties of our style, we can finally apply it to our text_label_temp_value using the lv_obj_add_style() function as follows.

lv_obj_add_style(text_label_temp_value, &style_temp, 0);

 The 0 indicates that we want to add the style to the text_label_temp_value object as a whole and not just some parts of the text_label_temp_value.

Creating an Animation – Updating the Temperature

To update the temperature on the screen both on the text label and arc, we can create an animation that will run a specific function periodically. In this case, we’ll update it every 10 seconds.

First, create an animation called a_temp and associate a callback function to that animation. In this case, the set_temp() callback function.

lv_anim_t a_temp;
lv_anim_init(&a_temp);
lv_anim_set_exec_cb(&a_temp, set_temp);

Set how frequently you want to run the set_temp() function. In our case, we’re setting it to 10 seconds (this function will update the screen with the newest data).

lv_anim_set_duration(&a_temp, 1000000);
lv_anim_set_playback_duration(&a_temp, 1000000);

You can pass a variable to the callback function by using the lv_anim_set_var() function. In our case, we want to access the text_label_temp_value, which is the variable we want to update.

lv_anim_set_var(&a_temp, text_label_temp_value);

Then, you need to add the following lines to make the animation work and run forever as long as the program is running.

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

Updating the Temperature Label – The Callback Function

Let’s now take a look at the set_temp() callback function that will run every 10 seconds.

static void set_temp(void * text_label_temp_value, int32_t v) {

Frist, we check if we need to display the temperature in Celsius or Fahrenheit degrees depending on the value of the TEMP_CELSIUS variable.

We get the temperature from the DS18B20 and save it in the ds18b20_temp variable.

float ds18b20_temp = sensors.getTempCByIndex(0);

We then, check in which range the temperature value is to set its color accordingly.

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

We want to display the degree symbol on the screen. It is an unicode character and we can get it as follows.

const char degree_symbol[] = "\u00B0F";

More information about unicode characters.

We update the value displayed on the arc by calling the lv_arc_set_value() function. Pass as an argument, the arc object, and the value. It accepts a value from 0 to 100%. So, we use the map() function to map the current temperature to that range taking into account the minimum and maximum values we defined at the beginning of the code.

lv_arc_set_value(arc, map(int(ds18b20_temp), TEMP_ARC_MIN, TEMP_ARC_MAX, 0, 100));

The arc will now be updated with the latest temperature reading. Now, we need to update the text label.

We create a string with the current temperature value concatenated with the degree symbol.

String ds18b20_temp_text = String(ds18b20_temp) + degree_symbol;

Finally, set the text_label_temp_value text to that string using the lv_label_set_text() function.

lv_label_set_text((lv_obj_t*) text_label_temp_value, ds18b20_temp_text.c_str());

We also print in the Serial Monitor for debugging purposes.

Serial.print("Temperature: ");
Serial.println(ds18b20_temp_text);

And that’s how you update the arc value and a text label using an LVGL animation.

loop()

In the loop(), you can add any other tasks that you need your ESP32 to do like in any regular Arduino sketch. In our case, we won’t add any tasks to the loop(), but to keep LVGL running and detecting events, you always need to add the following lines to your loop().

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
}

Demonstration

Upload the code to your board. Go to Tools > Board and select the ESP32 board that you’re using. Then, select the right COM port in Tools > Port. Finally, click the upload button.

After a few seconds, the temperature will be displayed on the screen as shown in the picture below.

The color of the text will change depending on the temperature range.

At the same time, the temperature will be displayed on the Serial Monitor.

Wrapping Up

In this tutorial, you learned to display sensor data on the TFT LCD Touchscreen with the ESP32 using the LVGL library. You learned how to display text and create a curved gauge.

If you would like to learn more about creating graphical user interfaces using the LVGL library with the ESP32, check out our latest eBook:

• Learn LVGL: Build GUIs for ESP32 Projects (eBook)

Other related guides you may find useful:

• LVGL with ESP32 TFT LCD Touchscreen Display – 2.8 inch ILI9341 240×320 (Arduino IDE)
• ESP32: TFT Touchscreen On/Off Button – 2.8 inch ILI9341 240×320 (Arduino IDE)
• ESP32: TFT LCD Touchscreen Display – 2.8 inch ILI9341 240×320 (Arduino IDE)

Learn more about the ESP32 with our resources:

• Learn ESP32 with Arduino IDE (eBook)
• SMART HOME with Raspberry Pi, ESP32, and ESP8266 eBook
• Free ESP32 Guides and Tutorials