![\"Programming](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/ESP32-Cheap-Yellow-Display-VS-Code-PlatformIO.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nNew to the ESP32 Cheap Yellow Display?<\/strong> Get started here: Getting Started with ESP32 Cheap Yellow Display Board \u2013 CYD (ESP32-2432S028R)<\/a><\/p>\n\n\n\n This tutorial also applies if you use an ESP32 with a separate 2.8 inch ILI9341 240×320 TFT LCD touchscreen<\/a>.<\/p>\n\n\n\n Before proceeding with this tutorial:<\/p>\n\n\n\n To install the XPT2046_Touchscreen<\/span> library on VS Code, you must add the following line to the platformio.ini<\/span> file of your current project.<\/p>\n\n\n\n There’s currently an issue in VS Code when loading this library from the Libraries <\/em>interface. So, you must load it like this using the library Gihub link, so that it uses the latest version.<\/p>\n\n\n\n Most of your projects will use a 115200 baud rate, so also add the following line to the platformio.ini<\/span> file.<\/p>\n\n\n\n To install the TFT_eSPI<\/span> library, you can click on the Home <\/strong>icon, select the Libraries <\/strong>tab at the left, and then search for TFT_eSPI<\/strong>.<\/p>\n\n\n Select the TFT_eSPI by Bodmer<\/strong> and then click Add to Project<\/strong>. Select the project you’re currently working on.<\/p>\n\n\n After that, the library will be automatically added to your platformio.ini<\/span> file. The lib_deps<\/span> directive will look as follows:<\/p>\n\n\n\n To properly use the TFT_eSPI<\/span> library, you need a configuration file called User_Setup.h<\/em><\/strong> with the right definitions for the display model you’re using.<\/p>\n\n\n\n We\u2019ve already prepared that file so that you don\u2019t have any configuration issues following our examples. Follow the next instructions to learn how to do it.<\/p>\n\n\n\n Note<\/strong>: we tested this on the ESP32-2432S028R<\/a> and the 2.8 inch ILI9341 240×320 TFT LCD touchscreen<\/a>. If you have different models with different sizes, you’ll probably need to adjust the User_Setup.h<\/em><\/strong> file.<\/p>\n\n\n\n 1)<\/strong> On the Explorer tab at the left sidebar, under the project folder, navigate to .pio<\/strong> > libdeps<\/strong>\\[you_board_model] > TFT_eSPI<\/strong> > User_Setup.h<\/strong>.<\/p>\n\n\n\n 2)<\/strong> Open the User_Setup.h<\/strong> file.<\/p>\n\n\n 3)<\/strong> Replace <\/strong>the code in the User_Setup.h<\/strong> file with the code provided in our User_Setup.h<\/strong> file. You can get our User_Setup.h<\/strong> file below.<\/p>\n\n\n\n 4)<\/strong> Save the User_Setup.h<\/em><\/strong> file.<\/p>\n\n\n\n To test if you’ve installed and configured the libraries properly, you can run the following code on your board. It displays text and tests the touchscreen.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Upload the code to your board.<\/p>\n\n\n\n After uploading the code to your board, it should display the sample \u201cHello, world!\u201d text centered at the top. Press the touchscreen with your finger to test it. It should print the coordinates: (x, y) and pressure (z) in the TFT display. <\/p>\n\n\n Important note:<\/strong> you need to do all the installation procedure and setting up the configuration file for each new project in VS Code. You’ll also need to repeat this if you update the libraries in your project.<\/p>\n\n\n\n 1)<\/strong> After creating or opening a project in VS Code, click on the Home <\/strong>icon and select the Libraries <\/strong>tab. Search for LVGL<\/strong>.<\/p>\n\n\n 2)<\/strong> Add LVGL Version 9<\/strong> to your project.<\/p>\n\n\n\n 3)<\/strong> At the left sidebar, open the Explorer tab. Go the the following path .pio<\/strong> > libdeps<\/strong>.<\/p>\n\n\n\n 4)<\/strong> Create a new file under the libdeps <\/em><\/strong>folder called lv_conf.h<\/strong>.<\/p>\n\n\n\n 5)<\/strong> Add the following code to the lv_conf.h<\/strong> file.<\/p>\n\n\n\n 6) <\/strong>Then, open the lvgl <\/strong>folder. Move the demos <\/strong>and examples <\/strong>folders to the src <\/strong>folder.<\/p>\n\n\n Now, you have everything set up to use the LVGL library in VS Code.<\/p>\n\n\n\n To use the LVGL<\/span> library you also need to install the TFT_eSPI<\/span> and XPT2046_Touchscreen<\/span> libraries as mentioned earlier.<\/p>\n\n\n\n Important note:<\/strong> you need to do all the installation procedure and setting up the configuration files for each new project in VS Code.<\/p>\n\n\n\n To test if all the libraries were properly set up, you can test the following code.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Upload the code to your board.<\/p>\n\n\n\n After uploading the code to your board, it should display the sample “Hello, world!” text centered at the top, two buttons, and one slider. <\/p>\n\n\n Interact with the widgets and see the results in the Serial Monitor. If the example is working as expected, all the libraries were successfully added and configured.<\/p>\n\n\n\n In this quick tutorial, we’ve shown you how to set up the TFT, touchscreen, and LVGL libraries on VS Code to program the ESP32 CYD Display.<\/p>\n\n\n\n We hope you’ve found this guide useful. If you have a better or different approach to set up the libraries, please share it below.<\/p>\n\n\n\n Other projects you may like:<\/p>\n\n\n\n Learn more about building GUIs using LVGL with our eBook:<\/p>\n\n\n\nPrerequisites<\/h2>\n\n\n\n
\n
Installing the XPT2046_Touchscreen library on VS Code<\/h2>\n\n\n\n
lib_deps = https:\/\/github.com\/PaulStoffregen\/XPT2046_Touchscreen.git<\/code><\/pre>\n\n\n\nmonitor_speed = 115200<\/code><\/pre>\n\n\n\nInstalling the TFT_eSPI Library on VS Code<\/h2>\n\n\n\n
![\"Searching](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/TFT_eSPI_VS_Code_search_library.png?resize=750%2C437&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Add](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/TFT_eSPI_add_to_project.png?resize=750%2C436&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nlib_deps = \n\thttps://github.com\/PaulStoffregen\/XPT2046_Touchscreen.git\n\tbodmer\/TFT_eSPI@^2.5.43<\/code><\/pre>\n\n\n\nConfiguring the TFT_eSPI Library on VS Code – the User_Setup.h config file<\/h2>\n\n\n\n
![\"Opening](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/open-user-setup-tft-espi-VS-Code.png?resize=891%2C822&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
Testing the Installation<\/h3>\n\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\/\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\/\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#include <SPI.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\/ or https:\/\/RandomNerdTutorials.com\/esp32-tft\/ *\/\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\n\/\/ Note: this library doesn't require further configuration\n#include <XPT2046_Touchscreen.h>\n\nTFT_eSPI tft = TFT_eSPI();\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 320\n#define SCREEN_HEIGHT 240\n#define FONT_SIZE 2\n\n\/\/ Touchscreen coordinates: (x, y) and pressure (z)\nint x, y, z;\n\n\/\/ Print Touchscreen info about X, Y and Pressure (Z) on the Serial Monitor\nvoid printTouchToSerial(int touchX, int touchY, int touchZ) {\n Serial.print("X = ");\n Serial.print(touchX);\n Serial.print(" | Y = ");\n Serial.print(touchY);\n Serial.print(" | Pressure = ");\n Serial.print(touchZ);\n Serial.println();\n}\n\n\/\/ Print Touchscreen info about X, Y and Pressure (Z) on the TFT Display\nvoid printTouchToDisplay(int touchX, int touchY, int touchZ) {\n \/\/ Clear TFT screen\n tft.fillScreen(TFT_WHITE);\n tft.setTextColor(TFT_BLACK, TFT_WHITE);\n\n int centerX = SCREEN_WIDTH \/ 2;\n int textY = 80;\n \n String tempText = "X = " + String(touchX);\n tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);\n\n textY += 20;\n tempText = "Y = " + String(touchY);\n tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);\n\n textY += 20;\n tempText = "Pressure = " + String(touchZ);\n tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);\n}\n\nvoid setup() {\n Serial.begin(115200);\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 3: touchscreen.setRotation(3);\n touchscreen.setRotation(1);\n\n \/\/ Start the tft display\n tft.init();\n \/\/ Set the TFT display rotation in landscape mode\n tft.setRotation(1);\n\n \/\/ Clear the screen before writing to it\n tft.fillScreen(TFT_WHITE);\n tft.setTextColor(TFT_BLACK, TFT_WHITE);\n \n \/\/ Set X and Y coordinates for center of display\n int centerX = SCREEN_WIDTH \/ 2;\n int centerY = SCREEN_HEIGHT \/ 2;\n\n tft.drawCentreString("Hello, world!", centerX, 30, FONT_SIZE);\n tft.drawCentreString("Touch screen to test", centerX, centerY, FONT_SIZE);\n}\n\nvoid loop() {\n \/\/ Checks if Touchscreen was touched, and prints X, Y and Pressure (Z) info on the TFT display and Serial Monitor\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 printTouchToSerial(x, y, z);\n printTouchToDisplay(x, y, z);\n\n delay(100);\n }\n}\n<\/code><\/pre>\n\tDemonstration<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-CYD-Board-ESP32-2432S028R-Touchscreen-Demonstration.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nInstalling and Configuring the LVGL Library in VS Code<\/h2>\n\n\n\n
![\"install](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/LVGL_install_VS_Code.png?resize=750%2C354&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"Create](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/create_lv_conf_file_LVGL_library_VS_Code_f.png?resize=874%2C610&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"move](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/07\/move_examples_demos_src_folder_LVGL_library_VS_Code.png?resize=750%2C610&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\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\tTesting the Installation<\/h3>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/05\/ESP32-Cheap-Yellow-Display-Board-CYD-TFT-Display-Touchscreen-LVGL-Library-Example.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
\n