Note:<\/strong> if you update your libraries, you’ll need to do this procedure again and place the right configuration files in the right places.<\/p>\n\n\n\nCode – Display Text, Create Buttons and Slider<\/h2>\n\n\n\n
The following code displays a simple text in your TFT display and allows you to test the touchscreen using a button and slider. When you press the buttons or slider, it should trigger some events.<\/p>\n\n\n\n
Copy the following code to the Arduino IDE and upload it to your board.<\/p>\n\n\n
\/* Rui Santos & Sara Santos - Random Nerd Tutorials\n THIS EXAMPLE WAS TESTED WITH THE FOLLOWING HARDWARE:\n 1) ESP32-2432S028R 2.8 inch 240\u00d7320 also known as the Cheap Yellow Display (CYD): https:\/\/makeradvisor.com\/tools\/cyd-cheap-yellow-display-esp32-2432s028r\/\n SET UP INSTRUCTIONS: https:\/\/RandomNerdTutorials.com\/cyd-lvgl\/\n 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\/\n SET UP INSTRUCTIONS: https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl\/\n Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*\/\n\n\/* Install the "lvgl" library version 9.2 by kisvegabor to interface with the TFT Display - https:\/\/lvgl.io\/\n *** IMPORTANT: lv_conf.h available on the internet will probably NOT work with the examples available at Random Nerd Tutorials ***\n *** YOU MUST USE THE lv_conf.h FILE PROVIDED IN THE LINK BELOW IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS ***\n FULL INSTRUCTIONS AVAILABLE ON HOW CONFIGURE THE LIBRARY: https:\/\/RandomNerdTutorials.com\/cyd-lvgl\/ or https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl\/ *\/\n#include <lvgl.h>\n\n\/* Install the "TFT_eSPI" library by Bodmer to interface with the TFT Display - https:\/\/github.com\/Bodmer\/TFT_eSPI\n *** IMPORTANT: User_Setup.h available on the internet will probably NOT work with the examples available at Random Nerd Tutorials ***\n *** YOU MUST USE THE User_Setup.h FILE PROVIDED IN THE LINK BELOW IN ORDER TO USE THE EXAMPLES FROM RANDOM NERD TUTORIALS ***\n FULL INSTRUCTIONS AVAILABLE ON HOW CONFIGURE THE LIBRARY: https:\/\/RandomNerdTutorials.com\/cyd-lvgl\/ or https:\/\/RandomNerdTutorials.com\/esp32-tft-lvgl\/ *\/\n#include <TFT_eSPI.h>\n\n\/\/ Install the "XPT2046_Touchscreen" library by Paul Stoffregen to use the Touchscreen - https:\/\/github.com\/PaulStoffregen\/XPT2046_Touchscreen - Note: this library doesn't require further configuration\n#include <XPT2046_Touchscreen.h>\n\n\/\/ Touchscreen pins\n#define XPT2046_IRQ 36 \/\/ T_IRQ\n#define XPT2046_MOSI 32 \/\/ T_DIN\n#define XPT2046_MISO 39 \/\/ T_OUT\n#define XPT2046_CLK 25 \/\/ T_CLK\n#define XPT2046_CS 33 \/\/ T_CS\n\nSPIClass touchscreenSPI = SPIClass(VSPI);\nXPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);\n\n#define SCREEN_WIDTH 240\n#define SCREEN_HEIGHT 320\n\n\/\/ Touchscreen coordinates: (x, y) and pressure (z)\nint x, y, z;\n\n#define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT \/ 10 * (LV_COLOR_DEPTH \/ 8))\nuint32_t draw_buf[DRAW_BUF_SIZE \/ 4];\n\n\/\/ If logging is enabled, it will inform the user about what is happening in the library\nvoid log_print(lv_log_level_t level, const char * buf) {\n LV_UNUSED(level);\n Serial.println(buf);\n Serial.flush();\n}\n\n\/\/ Get the Touchscreen data\nvoid touchscreen_read(lv_indev_t * indev, lv_indev_data_t * data) {\n \/\/ Checks if Touchscreen was touched, and prints X, Y and Pressure (Z)\n if(touchscreen.tirqTouched() && touchscreen.touched()) {\n \/\/ Get Touchscreen points\n TS_Point p = touchscreen.getPoint();\n \/\/ Calibrate Touchscreen points with map function to the correct width and height\n x = map(p.x, 200, 3700, 1, SCREEN_WIDTH);\n y = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);\n z = p.z;\n\n data->state = LV_INDEV_STATE_PRESSED;\n\n \/\/ Set the coordinates\n data->point.x = x;\n data->point.y = y;\n\n \/\/ Print Touchscreen info about X, Y and Pressure (Z) on the Serial Monitor\n \/* Serial.print("X = ");\n Serial.print(x);\n Serial.print(" | Y = ");\n Serial.print(y);\n Serial.print(" | Pressure = ");\n Serial.print(z);\n Serial.println();*\/\n }\n else {\n data->state = LV_INDEV_STATE_RELEASED;\n }\n}\n\nint btn1_count = 0;\n\/\/ Callback that is triggered when btn1 is clicked\nstatic void event_handler_btn1(lv_event_t * e) {\n lv_event_code_t code = lv_event_get_code(e);\n if(code == LV_EVENT_CLICKED) {\n btn1_count++;\n LV_LOG_USER("Button clicked %d", (int)btn1_count);\n }\n}\n\n\/\/ Callback that is triggered when btn2 is clicked\/toggled\nstatic void event_handler_btn2(lv_event_t * e) {\n lv_event_code_t code = lv_event_get_code(e);\n lv_obj_t * obj = (lv_obj_t*) lv_event_get_target(e);\n if(code == LV_EVENT_VALUE_CHANGED) {\n LV_UNUSED(obj);\n LV_LOG_USER("Toggled %s", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "on" : "off");\n }\n}\n\nstatic lv_obj_t * slider_label;\n\/\/ Callback that prints the current slider value on the TFT display and Serial Monitor for debugging purposes\nstatic void slider_event_callback(lv_event_t * e) {\n lv_obj_t * slider = (lv_obj_t*) lv_event_get_target(e);\n char buf[8];\n lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));\n lv_label_set_text(slider_label, buf);\n lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);\n LV_LOG_USER("Slider changed to %d%%", (int)lv_slider_get_value(slider));\n}\n\nvoid lv_create_main_gui(void) {\n \/\/ Create a text label aligned center on top ("Hello, world!")\n lv_obj_t * text_label = lv_label_create(lv_screen_active());\n lv_label_set_long_mode(text_label, LV_LABEL_LONG_WRAP); \/\/ Breaks the long lines\n lv_label_set_text(text_label, "Hello, world!");\n lv_obj_set_width(text_label, 150); \/\/ Set smaller width to make the lines wrap\n lv_obj_set_style_text_align(text_label, LV_TEXT_ALIGN_CENTER, 0);\n lv_obj_align(text_label, LV_ALIGN_CENTER, 0, -90);\n\n lv_obj_t * btn_label;\n \/\/ Create a Button (btn1)\n lv_obj_t * btn1 = lv_button_create(lv_screen_active());\n lv_obj_add_event_cb(btn1, event_handler_btn1, LV_EVENT_ALL, NULL);\n lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -50);\n lv_obj_remove_flag(btn1, LV_OBJ_FLAG_PRESS_LOCK);\n\n btn_label = lv_label_create(btn1);\n lv_label_set_text(btn_label, "Button");\n lv_obj_center(btn_label);\n\n \/\/ Create a Toggle button (btn2)\n lv_obj_t * btn2 = lv_button_create(lv_screen_active());\n lv_obj_add_event_cb(btn2, event_handler_btn2, LV_EVENT_ALL, NULL);\n lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 10);\n lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);\n lv_obj_set_height(btn2, LV_SIZE_CONTENT);\n\n btn_label = lv_label_create(btn2);\n lv_label_set_text(btn_label, "Toggle");\n lv_obj_center(btn_label);\n \n \/\/ Create a slider aligned in the center bottom of the TFT display\n lv_obj_t * slider = lv_slider_create(lv_screen_active());\n lv_obj_align(slider, LV_ALIGN_CENTER, 0, 60);\n lv_obj_add_event_cb(slider, slider_event_callback, LV_EVENT_VALUE_CHANGED, NULL);\n lv_slider_set_range(slider, 0, 100);\n lv_obj_set_style_anim_duration(slider, 2000, 0);\n\n \/\/ Create a label below the slider to display the current slider value\n slider_label = lv_label_create(lv_screen_active());\n lv_label_set_text(slider_label, "0%");\n lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);\n}\n\nvoid setup() {\n String LVGL_Arduino = String("LVGL Library Version: ") + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();\n Serial.begin(115200);\n Serial.println(LVGL_Arduino);\n \n \/\/ Start LVGL\n lv_init();\n \/\/ Register print function for debugging\n lv_log_register_print_cb(log_print);\n\n \/\/ Start the SPI for the touchscreen and init the touchscreen\n touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);\n touchscreen.begin(touchscreenSPI);\n \/\/ Set the Touchscreen rotation in landscape mode\n \/\/ Note: in some displays, the touchscreen might be upside down, so you might need to set the rotation to 0: touchscreen.setRotation(0);\n touchscreen.setRotation(2);\n\n \/\/ Create a display object\n lv_display_t * disp;\n \/\/ Initialize the TFT display using the TFT_eSPI library\n disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));\n lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);\n \n \/\/ Initialize an LVGL input device object (Touchscreen)\n lv_indev_t * indev = lv_indev_create();\n lv_indev_set_type(indev, LV_INDEV_TYPE_POINTER);\n \/\/ Set the callback function to read Touchscreen input\n lv_indev_set_read_cb(indev, touchscreen_read);\n\n \/\/ Function to draw the GUI (text, buttons and sliders)\n lv_create_main_gui();\n}\n\nvoid loop() {\n lv_task_handler(); \/\/ let the GUI do its work\n lv_tick_inc(5); \/\/ tell LVGL how much time has passed\n delay(5); \/\/ let this time pass\n}\n<\/code><\/pre>\n\tView raw code<\/a><\/p>\n\n\n\nHow the Code Works<\/h2>\n\n\n\n
Let’s take a quick look at the parts of the code that are relevant to this example.<\/p>\n\n\n\n
Libraries<\/h3>\n\n\n\n
Include the lvgl<\/span>, TFT_eSPI<\/span> and XPT2046_Touchscreen<\/span> libraries.<\/p>\n\n\n\n#include <lvgl.h>\n#include <TFT_eSPI.h>\n#include <XPT2046_Touchscreen.h><\/code><\/pre>\n\n\n\nInitialize Touchscreen<\/h3>\n\n\n\n
The following lines set the touchscreen pinout:<\/p>\n\n\n\n
#define XPT2046_IRQ 36\n#define XPT2046_MOSI 32\n#define XPT2046_MISO 39\n#define XPT2046_CLK 25\n#define XPT2046_CS 33<\/code><\/pre>\n\n\n\nCreate a touchscreenSPI<\/span> and touchscreen<\/span> instances:<\/p>\n\n\n\nSPIClass touchscreenSPI = SPIClass(VSPI);\nXPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);<\/code><\/pre>\n\n\n\nOther Variables<\/h3>\n\n\n\n
Set the screen width and screen height:<\/p>\n\n\n\n
#define SCREEN_WIDTH 240\n#define SCREEN_HEIGHT 320\n#define FONT_SIZE 2<\/code><\/pre>\n\n\n\nVariables to store the coordinates: (x<\/span>,
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/05\/ESP32-TFT-LCD-Touchscreen-Display-2-8-inch-ILI9341-240px-320px-Arduino-IDE-LVGL-Graphics-Library.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"\"](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-display.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Wiring](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Display-Screen-Wiring.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\n![\"Wiring](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-pins.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"TFT](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-touchscreen-J1-connection.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Logo](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/05\/logo_lvgl.png?resize=300%2C95&quality=100&strip=all&ssl=1\"){kind=logo}
<\/figure><\/div>\n\n\n![\"LVGL](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/05\/LVGL-Library-examples.png?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Installing-TFT_eSPI-library-Bodmer-Arduino-IDE-2.png?resize=306%2C292&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Installing-XPT2046_Touchscreen-Library-by-Paul-Stoffregen-Arduino-IDE-2.png?resize=322%2C275&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Installing](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/09\/Installing-LVGL-version-9_2-Arduino-IDE-software.png?resize=261%2C297&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"User_Setup.h](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/User_Setup-file-for-TFT_eSPI-library-Bodmer-Arduino-IDE-2.png?resize=168%2C237&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Arduino-IDE-2-Preferences-Menu-Windows-PC.png?resize=199%2C353&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse.png?resize=783%2C485&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Browse](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Browse-to-Arduino-libraries-folder-to-copy-lv_conf-file-Arduino-IDE-2.png?resize=448%2C91&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Windows-PC.png?resize=357%2C69&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-TFT_eSPI-folder-libraries-Arduino-IDE-2.png?resize=750%2C556&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Move](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Move-copy-User_Setup-file-to-TFT_eSPI-library-folder-Arduino-IDE-2.png?resize=948%2C920&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"lv_config.h](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/lv_config-file-for-LVGL-library-by-Kisvegabor-Arduino-IDE-2.png?resize=171%2C230&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Move](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Move-copy-lv_conf-configuration-file-to-Arduino-libraries-folder-Arduino-IDE-2.png?resize=942%2C725&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Download](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Download-User_Setup-file-for-TFT_eSPI-library-Bodmer-Arduino-IDE-2.png?resize=221%2C45&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Arduino-IDE-2-Preferences-Menu-Mac-OS.png?resize=398%2C446&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse-Mac-OS.png?resize=750%2C461&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Folder-Mac-OS.png?resize=350%2C47&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Mac-OS.png?resize=900%2C247&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Open](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-TFT_eSPI-folder-libraries-Arduino-IDE-2-Mac-OS.png?resize=217%2C40&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Move](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Move-copy-User_Setup-file-to-TFT_eSPI-library-folder-Arduino-IDE-2-Mac-OS.png?resize=750%2C395&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Move](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Move-User_Setup-file-to-TFT_eSPI-library-folder-Arduino-IDE-2-Mac-OS.png?resize=750%2C378&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Download](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Download-lv_config-file-for-LVGL-library-by-Kisvegabor-Arduino-IDE-2.png?resize=164%2C47&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Move](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Move-copy-lv_conf-configuration-file-to-Arduino-libraries-folder-Arduino-IDE-2-Mac-OS.png?resize=900%2C219&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n