{"id":149757,"date":"2024-03-21T10:56:29","date_gmt":"2024-03-21T10:56:29","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=149757"},"modified":"2024-08-03T18:12:20","modified_gmt":"2024-08-03T18:12:20","slug":"esp32-tft-touchscreen-display-2-8-ili9341-arduino","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp32-tft-touchscreen-display-2-8-ili9341-arduino\/","title":{"rendered":"ESP32: TFT LCD Touchscreen Display &#8211; 2.8 inch ILI9341 240\u00d7320 (Arduino IDE)"},"content":{"rendered":"\n<p>In this guide, you&#8217;ll learn how to get started with the TFT LCD Touchscreen Display with the ESP32 board. This TFT Touchscreen with 2.8 inch display (240\u00d7320 px) comes with the ILI9341 driver. This display is a great option to build graphical user interfaces (GUI) for your IoT projects.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-LCD-Touchscreen-display-getting-started.jpg?resize=1200%2C675&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 TFT LCD Touchscreen Display  2.8 inch ILI9341 240\u00d7320 Arduino IDE\" class=\"wp-image-150001\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-LCD-Touchscreen-display-getting-started.jpg?w=1920&amp;quality=100&amp;strip=all&amp;ssl=1 1920w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-LCD-Touchscreen-display-getting-started.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-LCD-Touchscreen-display-getting-started.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-LCD-Touchscreen-display-getting-started.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-LCD-Touchscreen-display-getting-started.jpg?resize=1536%2C864&amp;quality=100&amp;strip=all&amp;ssl=1 1536w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntclgray\">We recommend an ESP32 board that has an on-board TFT display, read our <a href=\"https:\/\/randomnerdtutorials.com\/cheap-yellow-display-esp32-2432s028r\/\">Getting Started with ESP32 Cheap Yellow Display Board \u2013 CYD (ESP32-2432S028R)<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introducing the TFT LCD Touchscreen Display<\/h2>\n\n\n\n<p>The display we&#8217;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. You can write text, draw shapes, and display images. The touchscreen also uses the SPI communication protocol.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-display.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" class=\"wp-image-150003\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-display.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-display.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Parts Required<\/h2>\n\n\n\n<p>For this project, you need to wire the TFT display and touchscreen pins to the ESP32. Here\u2019s a list of parts you need:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Display-Screen-Wiring.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Wiring TFT LCD Touchscreen display to ESP32\" class=\"wp-image-150007\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Display-Screen-Wiring.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Display-Screen-Wiring.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/2-8-inch-ili9341-tft-240x320\/\" target=\"_blank\" rel=\"noopener\" title=\"\">TFT LCD Touchscreen Display &#8211; 2.8 inch ILI9341 240\u00d7320<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/esp32-dev-board-wi-fi-bluetooth\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP32 DOIT DEVKIT V1 Board<\/a>&nbsp;\u2013 read&nbsp;<a href=\"https:\/\/makeradvisor.com\/esp32-development-boards-review-comparison\/\" target=\"_blank\" rel=\"noreferrer noopener\">ESP32 Development Boards Review and Comparison<\/a><\/li>\n\n\n\n<li><a aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noreferrer noopener\">Breadboard<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\">Jumper wires<\/a><\/li>\n<\/ul>\n\n\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wiring the TFT LCD Touchscreen Display to the ESP32 Board<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-pins.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Wiring the TFT LCD Touchscreen Display to the ESP32 Board\" class=\"wp-image-150010\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-pins.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-Touchscreen-pins.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>Wire the TFT LCD and touchscreen pins to the following ESP32 GPIOs (you must use these exact pins, otherwise the project will not work).<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>TFT LCD Touchscreen<\/strong><\/td><td><strong>ESP32<\/strong><\/td><\/tr><tr><td>T_IRQ<\/td><td>GPIO 36<\/td><\/tr><tr><td>T_OUT<\/td><td>GPIO 39<\/td><\/tr><tr><td>T_DIN<\/td><td>GPIO 32<\/td><\/tr><tr><td>T_CS<\/td><td>GPIO 33<\/td><\/tr><tr><td>T_CLK<\/td><td>GPIO 25<\/td><\/tr><tr><td>SDO(MISO)<\/td><td>GPIO 12<\/td><\/tr><tr><td>LED<\/td><td>GPIO 21<\/td><\/tr><tr><td>SCK<\/td><td>GPIO 14<\/td><\/tr><tr><td>SDI(MOSI)<\/td><td>GPIO 13<\/td><\/tr><tr><td>D\/C<\/td><td>GPIO 2<\/td><\/tr><tr><td>RESET<\/td><td>EN\/RESET<\/td><\/tr><tr><td>CS<\/td><td>GPIO 15<\/td><\/tr><tr><td>GND<\/td><td>GND<\/td><\/tr><tr><td>VCC<\/td><td>5V (or 3.3V)*<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>* In the VCC pin, you can either use 5V or 3.3V depending if your <strong>J1<\/strong> connection is open or closed (by default it&#8217;s usually open as you can see in the figure below).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>VCC = 5V | J1=OPEN\nVCC = 3.3V | J1=CLOSE<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-touchscreen-J1-connection.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"TFT LCD Touchscreen display J1 connection\" class=\"wp-image-150009\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-touchscreen-J1-connection.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/TFT-LCD-touchscreen-J1-connection.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p><strong>Recommended reading:<\/strong><a href=\"https:\/\/randomnerdtutorials.com\/esp32-pinout-reference-gpios\/\"> ESP32 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"installing-libraries\">Installing Arduino Libraries<\/h2>\n\n\n\n<p>The ESP32 communicates with the TFT Display and Touchscreen using SPI communication protocol. We&#8217;ll be using the <strong>TFT_eSPI<\/strong> and <strong>XPT2046_Touchscreen<\/strong> libraries.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Installing the TFT_eSPI Library<\/h4>\n\n\n\n<p>Open your Arduino IDE and go to&nbsp;<strong>Sketch&nbsp;<\/strong>&gt;&nbsp;<strong>Include Library<\/strong>&nbsp;&gt;&nbsp;<strong>Manage Libraries<\/strong>. The Library Manager should open. Search for&nbsp;<strong>TFT_eSPI<\/strong>. Select the <em>TFT_eSPI library by Bodme<\/em>r and install it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"306\" height=\"292\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Installing-TFT_eSPI-library-Bodmer-Arduino-IDE-2.png?resize=306%2C292&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Installing TFT_eSPI library Bodmer Arduino IDE 2\" class=\"wp-image-149501\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Installing-TFT_eSPI-library-Bodmer-Arduino-IDE-2.png?w=306&amp;quality=100&amp;strip=all&amp;ssl=1 306w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Installing-TFT_eSPI-library-Bodmer-Arduino-IDE-2.png?resize=300%2C286&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 306px) 100vw, 306px\" \/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">Installing the XPT2046_Touchscreen Library<\/h4>\n\n\n\n<p>Open your Arduino IDE and go to&nbsp;<strong>Sketch&nbsp;<\/strong>&gt;&nbsp;<strong>Include Library<\/strong>&nbsp;&gt;&nbsp;<strong>Manage Libraries<\/strong>. The Library Manager should open. Search for&nbsp;<strong>XPT2046_Touchscreen<\/strong>. Select the <em>XPT2046_Touchscreen library by Paul Stoffregen<\/em> and install it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"322\" height=\"275\" src=\"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&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Installing XPT2046_Touchscreen Library by Paul Stoffregen Arduino IDE 2\" class=\"wp-image-149502\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Installing-XPT2046_Touchscreen-Library-by-Paul-Stoffregen-Arduino-IDE-2.png?w=322&amp;quality=100&amp;strip=all&amp;ssl=1 322w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Installing-XPT2046_Touchscreen-Library-by-Paul-Stoffregen-Arduino-IDE-2.png?resize=300%2C256&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Prepare User_Setup.h Config File for TFT_eSPI Library<\/h2>\n\n\n\n<p>To properly use the TFT_eSPI library, you need a configuration file called <span class=\"rnthl rntliteral\">User_Setup.h<\/span> with the right definitions. We&#8217;ve already prepared that file so that you don&#8217;t have any configuration issues following our examples. You just need to download it and move it to the right folder. Follow the next instructions to learn how to do it.<\/p>\n\n\n\n<p><a href=\"#config-file-windows-pc\" title=\"\">a) Preparing the Config File &#8211; Windows PC<\/a><\/p>\n\n\n\n<p><a href=\"#config-file-mac-os\" title=\"\">b) Preparing the Config File &#8211; Mac OS<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"config-file-windows-pc\">a) Preparing the Config File &#8211; Windows PC<\/h3>\n\n\n\n<p>Having both libraries installed (<span class=\"rnthl rntliteral\">TFT_eSPI<\/span> and <span class=\"rnthl rntliteral\">XPT2046_Touchscreen<\/span>), download the <em><strong>User_Setup.h<\/strong> <\/em>configuration file.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-TFT-Touchscreen\/raw\/main\/configs\/User_Setup.zip\" target=\"_blank\" rel=\"noopener\" title=\"\">Click here to download .zip folder<\/a> with the <strong><em>User_Setup.h<\/em><\/strong> config file (<a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/ESP32-TFT-Touchscreen\/main\/configs\/User_Setup.h\" target=\"_blank\" rel=\"noopener\" title=\"\">view raw file<\/a>)<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"168\" height=\"237\" src=\"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&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"User_Setup.h file for TFT_eSPI library Bodmer Arduino IDE 2\" class=\"wp-image-149506\"\/><\/figure><\/div>\n\n\n<p>In your Arduino IDE, go to <strong>File <\/strong>and open the <strong>Preferences<\/strong> menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"199\" height=\"353\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Arduino-IDE-2-Preferences-Menu-Windows-PC.png?resize=199%2C353&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open Arduino IDE 2 Preferences Menu Windows PC\" class=\"wp-image-149504\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Arduino-IDE-2-Preferences-Menu-Windows-PC.png?w=199&amp;quality=100&amp;strip=all&amp;ssl=1 199w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Arduino-IDE-2-Preferences-Menu-Windows-PC.png?resize=169%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 169w\" sizes=\"(max-width: 199px) 100vw, 199px\" \/><\/figure><\/div>\n\n\n<p>Copy the Arduino IDE &#8220;<strong>Sketchbook location<\/strong>&#8221; path. In my case it&#8217;s:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>C:\\Users\\rui_s\\Documents\\Arduino<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"783\" height=\"485\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse.png?resize=783%2C485&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open Sketchbook Location Arduino IDE 2 Browse\" class=\"wp-image-149503\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse.png?w=783&amp;quality=100&amp;strip=all&amp;ssl=1 783w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse.png?resize=300%2C186&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse.png?resize=768%2C476&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 783px) 100vw, 783px\" \/><\/figure><\/div>\n\n\n<p>Then, in your Windows PC File Explorer tab enter the sketchbook location path to open the Arduino folder (it&#8217;s usually under the <em>Documents <\/em>folder).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"448\" height=\"91\" src=\"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&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Browse to Arduino libraries folder to copy lv_conf.h file Arduino IDE 2\" class=\"wp-image-149508\" srcset=\"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?w=448&amp;quality=100&amp;strip=all&amp;ssl=1 448w, 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=300%2C61&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><\/figure><\/div>\n\n\n<p>Open the <em>libraries <\/em>folder:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"357\" height=\"69\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Windows-PC.png?resize=357%2C69&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open the Arduino IDE 2 Libraries Folder Windows PC\" class=\"wp-image-149507\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Windows-PC.png?w=357&amp;quality=100&amp;strip=all&amp;ssl=1 357w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Windows-PC.png?resize=300%2C58&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/><\/figure><\/div>\n\n\n<p>You should see the <em>TFT_eSPI <\/em>library folder there. Open it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"556\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-TFT_eSPI-folder-libraries-Arduino-IDE-2.png?resize=750%2C556&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open TFT_eSPI folder libraries Arduino IDE 2\" class=\"wp-image-149514\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-TFT_eSPI-folder-libraries-Arduino-IDE-2.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-TFT_eSPI-folder-libraries-Arduino-IDE-2.png?resize=300%2C222&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>You should be in a similar folder path as shown below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>C:\\Users\\rui_s\\Documents\\Arduino\\libraries\\TFT_eSPI<\/code><\/pre>\n\n\n\n<p>Copy the <em>User_Setup.h<\/em> file provided earlier and <strong>replace<\/strong> the existing file.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"948\" height=\"920\" src=\"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&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Move copy User_Setup.h file to TFT_eSPI library folder Arduino IDE 2\" class=\"wp-image-149509\" srcset=\"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?w=948&amp;quality=100&amp;strip=all&amp;ssl=1 948w, 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=300%2C291&amp;quality=100&amp;strip=all&amp;ssl=1 300w, 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=768%2C745&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 948px) 100vw, 948px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntcred\"><strong>IMPORTANT:<\/strong> other <em>User_Setup.h<\/em> available on the internet will probably NOT work with the examples available at Random Nerd Tutorials. You must use the exact <em>User_Setup.h<\/em> file provided in this article.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"config-file-mac-os\">b) Preparing the Config File &#8211; Mac OS<\/h3>\n\n\n\n<p>Having both libraries installed (<span class=\"rnthl rntliteral\">TFT_eSPI<\/span> and <span class=\"rnthl rntliteral\">XPT2046_Touchscreen<\/span>), download the <strong>User_Setup.h<\/strong> configuration file.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-TFT-Touchscreen\/raw\/main\/configs\/User_Setup.zip\" target=\"_blank\" rel=\"noopener\" title=\"\">Click here to download .zip folder<\/a> with the <strong><em>User_Setup.h<\/em><\/strong> config file (<a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/ESP32-TFT-Touchscreen\/main\/configs\/User_Setup.h\" target=\"_blank\" rel=\"noopener\" title=\"\">view raw file<\/a>)<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"221\" height=\"45\" src=\"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&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Download User_Setup.h file for TFT_eSPI library Bodmer Arduino IDE 2\" class=\"wp-image-149519\"\/><\/figure><\/div>\n\n\n<p>In your Arduino IDE, open the <strong>Settings <\/strong>menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"398\" height=\"446\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Arduino-IDE-2-Preferences-Menu-Mac-OS.png?resize=398%2C446&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open Arduino IDE 2 Preferences Menu Mac OS\" class=\"wp-image-149524\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Arduino-IDE-2-Preferences-Menu-Mac-OS.png?w=398&amp;quality=100&amp;strip=all&amp;ssl=1 398w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Arduino-IDE-2-Preferences-Menu-Mac-OS.png?resize=268%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 268w\" sizes=\"(max-width: 398px) 100vw, 398px\" \/><\/figure><\/div>\n\n\n<p>Copy the Arduino IDE &#8220;<strong>Sketchbook location<\/strong>&#8221; path. In my case, it&#8217;s:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/Users\/rui\/Documents\/Arduino<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"461\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse-Mac-OS.png?resize=750%2C461&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open Sketchbook Location Arduino IDE 2 Browse Mac OS\" class=\"wp-image-149525\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse-Mac-OS.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-Sketchbook-Location-Arduino-IDE-2-Browse-Mac-OS.png?resize=300%2C184&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>In Finder, type <em>\/Users\/rui\/Documents\/Arduino<\/em> and open that directory.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"47\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Folder-Mac-OS.png?resize=350%2C47&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open the Arduino IDE 2 Folder Mac OS\" class=\"wp-image-149527\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Folder-Mac-OS.png?w=350&amp;quality=100&amp;strip=all&amp;ssl=1 350w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Folder-Mac-OS.png?resize=300%2C40&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/figure><\/div>\n\n\n<p>Open the <em>libraries <\/em>folder.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"247\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Mac-OS.png?resize=900%2C247&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open the Arduino IDE 2 Libraries Folder Mac OS\" class=\"wp-image-149528\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Mac-OS.png?w=900&amp;quality=100&amp;strip=all&amp;ssl=1 900w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Mac-OS.png?resize=300%2C82&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Open-the-Arduino-IDE-2-Libraries-Folder-Mac-OS.png?resize=768%2C211&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div>\n\n\n<p>You should see the <em>TFT_eSPI <\/em>library folder there. Open it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"217\" height=\"40\" src=\"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&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Open TFT_eSPI folder libraries Arduino IDE 2 Mac OS\" class=\"wp-image-149526\"\/><\/figure><\/div>\n\n\n<p>You should be in a similar folder path as shown below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/Users\/rui\/Documents\/Arduino\/libraries\/TFT_eSPI<\/code><\/pre>\n\n\n\n<p>Copy the <em>User_Setup.h<\/em> file provided earlier and <strong>replace<\/strong> the existing file.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"395\" src=\"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&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Move copy User_Setup.h file to TFT_eSPI library folder Arduino IDE 2 Mac OS\" class=\"wp-image-149521\" srcset=\"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?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, 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=300%2C158&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>You should now have the <em>User_Setup.h<\/em> file provided on that path.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"378\" src=\"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&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Move User_Setup.h file to TFT_eSPI library folder Arduino IDE 2 Mac OS\" class=\"wp-image-149523\" srcset=\"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?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, 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=300%2C151&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p class=\"rntbox rntcred\"><strong>IMPORTANT:<\/strong> other <em>User_Setup.h<\/em> available on the internet will probably NOT work with the examples available at Random Nerd Tutorials. You must use the exact <em>User_Setup.h<\/em> file provided in this article.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code &#8211; Display Text and Testing the Touchscreen<\/h2>\n\n\n\n<p>The following code displays a simple text in your TFT display and allows you to test the touchscreen. When you press the touchscreen with your finger or pen, it should print the coordinates and pressure.<\/p>\n\n\n\n<p>Copy the following code to the Arduino IDE and upload it to your board.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*  Rui Santos &amp; 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 &lt;SPI.h&gt;\n\n\/*  Install the &quot;TFT_eSPI&quot; 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 &lt;TFT_eSPI.h&gt;\n\n\/\/ Install the &quot;XPT2046_Touchscreen&quot; 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 &lt;XPT2046_Touchscreen.h&gt;\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(&quot;X = &quot;);\n  Serial.print(touchX);\n  Serial.print(&quot; | Y = &quot;);\n  Serial.print(touchY);\n  Serial.print(&quot; | Pressure = &quot;);\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 = &quot;X = &quot; + String(touchX);\n  tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);\n\n  textY += 20;\n  tempText = &quot;Y = &quot; + String(touchY);\n  tft.drawCentreString(tempText, centerX, textY, FONT_SIZE);\n\n  textY += 20;\n  tempText = &quot;Pressure = &quot; + 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(&quot;Hello, world!&quot;, centerX, 30, FONT_SIZE);\n  tft.drawCentreString(&quot;Touch screen to test&quot;, 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() &amp;&amp; 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\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/ESP32-TFT-Touchscreen\/raw\/main\/examples\/ESP32_TFT_Touchscreen_Basic\/ESP32_TFT_Touchscreen_Basic.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the Code Works<\/h2>\n\n\n\n<p>Let&#8217;s take a quick look at the parts of the code that are relevant to this example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Libraries<\/h3>\n\n\n\n<p>Include the <span class=\"rnthl rntliteral\">SPI<\/span>, <span class=\"rnthl rntliteral\">TFT_eSPI<\/span> and <span class=\"rnthl rntliteral\">XPT2046_Touchscreen<\/span> libraries.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;SPI.h&gt;\n#include &lt;TFT_eSPI.h&gt;\n#include &lt;XPT2046_Touchscreen.h&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Initialize TFT<\/h3>\n\n\n\n<p>Create a <span class=\"rnthl rntliteral\">TFT_eSPI<\/span> instance:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>TFT_eSPI tft = TFT_eSPI();<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Initialize Touchscreen<\/h3>\n\n\n\n<p>The following lines set the touchscreen pinout:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#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\n<p>Create a <span class=\"rnthl rntliteral\">touchscreenSPI<\/span> and <span class=\"rnthl rntliteral\">touchscreen<\/span> instances:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>SPIClass touchscreenSPI = SPIClass(VSPI);\nXPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Other Variables<\/h3>\n\n\n\n<p>Set the screen width, screen height, and font size:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#define SCREEN_WIDTH 320\n#define SCREEN_HEIGHT 240\n#define FONT_SIZE 2<\/code><\/pre>\n\n\n\n<p>Variables to store the coordinates: (x, y) and pressure (z).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>int x, y, z;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">setup()<\/h3>\n\n\n\n<p>Start a serial communication with the Serial Monitor at a baud rate of 115200:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Serial.begin(115200);<\/code><\/pre>\n\n\n\n<p>Start the SPI for the touchscreen and initialize the touchscreen.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);\ntouchscreen.begin(touchscreenSPI);\ntouchscreen.setRotation(1);<\/code><\/pre>\n\n\n\n<p class=\"rntbox rntclgray\"><strong>Note:<\/strong> in some displays, the touchscreen might be upside down, so you might need to set the rotation to 3: <span class=\"rnthl rntliteral\">touchscreen.setRotation(3);<\/span><\/p>\n\n\n\n<p>Start the TFT display and set the TFT display rotation in landscape mode.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>tft.init();\ntft.setRotation(1);<\/code><\/pre>\n\n\n\n<p>Set the TFT screen background to white. Then, set the text color to black with white background.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>tft.fillScreen(TFT_WHITE);\ntft.setTextColor(TFT_BLACK, TFT_WHITE);<\/code><\/pre>\n\n\n\n<p>Set X and Y coordinates for the center of the display.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>int centerX = SCREEN_WIDTH \/ 2;\nint centerY = SCREEN_HEIGHT \/ 2;<\/code><\/pre>\n\n\n\n<p>Display two centered welcome messages in the TFT display:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>tft.drawCentreString(\"Hello, world!\", centerX, 30, FONT_SIZE);\ntft.drawCentreString(\"Touch screen to test\", centerX, centerY, FONT_SIZE);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">loop()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">loop()<\/span>, it constantly checks if the touchscreen was touched.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if (touchscreen.tirqTouched() &amp;&amp; touchscreen.touched()) {<\/code><\/pre>\n\n\n\n<p>When it detects that the touchscreen was touched, it will get the (x,y) coordinates and the pressure (z) from the point.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>TS_Point p = touchscreen.getPoint();\n\/\/ Calibrate Touchscreen points with map function to the correct width and height\nx = map(p.x, 200, 3700, 1, SCREEN_WIDTH);\ny = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);\nz = p.z;<\/code><\/pre>\n\n\n\n<p>Call the <span class=\"rnthl rntliteral\">printTouchToSerial<\/span> and <span class=\"rnthl rntliteral\">printTouchToDisplay<\/span> functions to print the touchscreen info in the Serial Monitor and TFT display.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>printTouchToSerial(x, y, z);\nprintTouchToDisplay(x, y, z);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">printTouchToSerial()<\/h3>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">printTouchToSerial()<\/span> function prints touchscreen info about X, Y, and Pressure (Z) on the Serial Monitor.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void 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}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">printTouchToDisplay()<\/h3>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">printTouchToDisplay()<\/span> function prints touchscreen info about X, Y, and Pressure (Z) on the TFT Display.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void 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}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Demonstration<\/h2>\n\n\n\n<p>Upload the code to your board. Go to <strong>Tools <\/strong>&gt; <strong>Board <\/strong>and select <strong>ESP32 <\/strong>&gt; <strong>ESP32 Dev Module<\/strong>. Then, select the right COM port in <strong>Tools <\/strong>&gt; <strong>Port<\/strong>. Finally, click the upload button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"36\" height=\"39\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/arduino-ide-2-upload-button.png?resize=36%2C39&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Arduino IDE 2 Upload Button\" class=\"wp-image-146269\" style=\"width:36px;height:auto\"\/><\/figure><\/div>\n\n\n<p>After uploading the code to your board, it should display the sample &#8220;Hello, world!&#8221; text centered at the top. Press the touchscreen with your finger to test it.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"421\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Touchscreen-LCD-Display-Text.jpg?resize=750%2C421&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 with TFT Touchscreen LCD Write Text\" class=\"wp-image-150011\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Touchscreen-LCD-Display-Text.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Touchscreen-LCD-Display-Text.jpg?resize=300%2C168&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>It should print the coordinates: (x, y) and pressure (z) in the TFT display. You should note that this is a 240x320px resistive touchscreen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"422\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-touchscreen-testing.jpg?resize=750%2C422&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"Testing TFT LCD Touchscreen with the ESP32\" class=\"wp-image-150012\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-touchscreen-testing.jpg?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-touchscreen-testing.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n<p>The coordinates and pressure are also printed on your Arduino IDE serial monitor:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"291\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-CYD-Board-ESP32-2432S028R-Touchscreen-Testing-Arduino-IDE-Serial-Monitor.png?resize=784%2C291&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 TFT LCD Touchscreen Display 2.8 inch ILI9341 240\u00d7320 Testing Arduino IDE Serial Monitor\" class=\"wp-image-149601\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-CYD-Board-ESP32-2432S028R-Touchscreen-Testing-Arduino-IDE-Serial-Monitor.png?w=784&amp;quality=100&amp;strip=all&amp;ssl=1 784w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-CYD-Board-ESP32-2432S028R-Touchscreen-Testing-Arduino-IDE-Serial-Monitor.png?resize=300%2C111&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-CYD-Board-ESP32-2432S028R-Touchscreen-Testing-Arduino-IDE-Serial-Monitor.png?resize=768%2C285&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 784px) 100vw, 784px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>In this tutorial, you learned how to use the TFT touchscreen LCD display with the ILI9341 driver using an ESP32. This setup is useful for creating dashboards and GUIs for your DIY projects.<\/p>\n\n\n\n<p>If you prefer to use an ESP32 dev board with a built-in TFT display, read our <a href=\"https:\/\/randomnerdtutorials.com\/cheap-yellow-display-esp32-2432s028r\/\">Getting Started with ESP32 Cheap Yellow Display Board<\/a>.<\/p>\n\n\n\n<p>We hope you found this tutorial useful. We&#8217;ll be posting more guides, so stay tuned.<\/p>\n\n\n\n<p>To learn more about the ESP32, make sure to take a look at our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/learn-esp32-with-arduino-ide\/\">Learn ESP32 with Arduino IDE (eBook)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/smart-home-ebook\/\" title=\"\">SMART HOME with Raspberry Pi, ESP32, and ESP8266 eBook<\/a><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/randomnerdtutorials.com\/learn-lvgl-esp32-ebook\/\">Learn LVGL: Build GUIs for ESP32 Projects (eBook)<\/a><\/strong><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/projects-esp32\/\" title=\"\"><strong>Free ESP32 Guides and Tutorials<\/strong><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, you&#8217;ll learn how to get started with the TFT LCD Touchscreen Display with the ESP32 board. This TFT Touchscreen with 2.8 inch display (240\u00d7320 px) comes with &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP32: TFT LCD Touchscreen Display &#8211; 2.8 inch ILI9341 240\u00d7320 (Arduino IDE)\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp32-tft-touchscreen-display-2-8-ili9341-arduino\/#more-149757\" aria-label=\"Read more about ESP32: TFT LCD Touchscreen Display &#8211; 2.8 inch ILI9341 240\u00d7320 (Arduino IDE)\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":150001,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[276,281,277,299,264],"tags":[],"class_list":["post-149757","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp32","category-esp32-project","category-esp32-arduino-ide","category-0-esp32","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-LCD-Touchscreen-display-getting-started.jpg?fit=1920%2C1080&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/149757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=149757"}],"version-history":[{"count":14,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/149757\/revisions"}],"predecessor-version":[{"id":161367,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/149757\/revisions\/161367"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/150001"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=149757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=149757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=149757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}