![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Touchscreen-On-Off-Button-Cheap-Yellow-Display-ESP32-2432S028R.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nIf you have a standalone TFT Touchscreen Display 2.8 inch with ILI9341 driver, you can follow this guide<\/a>.<\/p>\n\n\n\n The ESP32-2432S028R<\/a> development board has become known in the maker community as the “Cheap Yellow Display<\/em>” or CYD for short. This development board, whose main chip is an ESP32-WROOM-32 module, comes with a 2.8-inch TFT touchscreen LCD, a microSD card interface, an RGB LED, and all the required circuitry to program and apply power to the board.<\/p>\n\n\n This is a very versatile board to build GUIs for your IoT projects, and is much more convenient and practical than using a separate ESP32 board with a TFT screen.<\/p>\n\n\n\n Where to buy?<\/strong><\/p>\n\n\n\n You can click on the link below to check where to buy the ESP32 Cheap Yellow display and its price in different stores.<\/p>\n\n\n\n More information about the CYD board GPIOs: ESP32 Cheap Yellow Display (CYD) Pinout (ESP32-2432S028R)<\/a>.<\/p>\n\n\n\n The ESP32 communicates with the TFT Display and Touchscreen using SPI communication protocol. We’ll be using the TFT_eSPI<\/strong> and XPT2046_Touchscreen<\/strong> libraries. To properly use the TFT_eSPI library, you need a configuration file called User_Setup.h<\/span> with the right definitions.<\/p>\n\n\n\n You must follow the next instructions to prepare your Arduino IDE to compile the code provided in this project:<\/strong><\/p>\n\n\n\n With the following code, the TFT will display an ON\/OFF button to control an output. When you press the touchscreen with your finger or pen, it should turn on\/off the green RGB LED on the back of the board.<\/p>\n\n\n\n Copy the following code to the Arduino IDE and upload it to your board.<\/p>\n\n\n View raw code<\/a><\/p>\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 Include the SPI<\/span>, TFT_eSPI<\/span> and XPT2046_Touchscreen<\/span> libraries.<\/p>\n\n\n\n Create a TFT_eSPI<\/span> instance:<\/p>\n\n\n\n The following lines set the touchscreen pinout:<\/p>\n\n\n\n Create a touchscreenSPI<\/span> and touchscreen<\/span> instances:<\/p>\n\n\n\n Set the screen width, screen height, and font size:<\/p>\n\n\n\n These next variables have self-explanatory names, they are used to define the frame\/button sizes and coordinates:<\/p>\n\n\n\n Assign the RGB LED GPIOs (this is the LED at the back of the board). In this example, we’ll only be controlling the green part of the LED (i.e. GPIO 16), but you can control other GPIOs to generate different colors.<\/p>\n\n\n\n Variables to store the touch coordinates: (x, y) and pressure (z).<\/p>\n\n\n\n The switchState<\/span> stores the current button state:<\/p>\n\n\n\n Start a serial communication with the Serial Monitor at a baud rate of 115200:<\/p>\n\n\n\n Start the SPI for the touchscreen and initialize the touchscreen.<\/p>\n\n\n\n Note:<\/strong> in some displays, the touchscreen might be upside down, so you might need to set the rotation to 3: touchscreen.setRotation(3);<\/span><\/p>\n\n\n\n Start the TFT display and set the TFT display rotation in landscape mode.<\/p>\n\n\n\n Set the TFT screen background to black.<\/p>\n\n\n\n At the start, the LED is set to off, so draw the green button that will turn on the LED when pressed.<\/p>\n\n\n\n In the loop()<\/span>, it constantly checks if the touchscreen was touched.<\/p>\n\n\n\n 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 Call the printTouchToSerial<\/span> function to print the touchscreen info in the Serial Monitor for debugging purposes.<\/p>\n\n\n\n Based on the x and y coordinates detected by the touchscreen press, it will check if you pressed within the limits of the ON or OFF button coordinates. Then, it will turn the LED on or off accordingly and draw the right button to display by calling the drawRedButton()<\/span> or drawGreenButton()<\/span> functions.<\/p>\n\n\n\n The printTouchToSerial()<\/span> function prints touchscreen info about X, Y, and Pressure (Z) on the Serial Monitor.<\/p>\n\n\n\n The drawFrame()<\/span> function draws a frame around the ON or OFF buttons.<\/p>\n\n\n\n The drawRedButton()<\/span> and drawGreenButton()<\/span> functions create the ON and OFF buttons on the TFT display. It will draw and fill a rectangle based on the x and y coordinates defined at the start of the sketch, as well as writing the ON and OFF text labels.<\/p>\n\n\n\n Upload the code to your board. Go to Tools <\/strong>> Board <\/strong>and select ESP32 <\/strong>> ESP32 Dev Module<\/strong>. Then, select the right COM port in Tools <\/strong>> Port<\/strong>. Finally, click the upload button.<\/p>\n\n\n After uploading the code to your board, the TFT display should have an ON button that you can press with your finger.<\/p>\n\n\n Pressing the ON button turns on the green RGB LED at the back of the board (it turns on GPIO 16).<\/p>\n\n\n If the LED is on, the display should have the OFF button. You can click on it to turn the LED off.<\/p>\n\n\n The coordinates, pressure, and LED state are also printed on the Arduino IDE serial monitor for debugging purposes:<\/p>\n\n\n In this tutorial, you learned how to build a basic GUI for the ESP32 Cheap Yellow Display board with an On\/Off button.<\/p>\n\n\n\n If it’s your first time using this board, we also recommend reading our: Getting Started with ESP32 Cheap Yellow Display Board \u2013 CYD (ESP32-2432S028R)<\/a>.<\/p>\n\n\n\n Other tutorials you may like:<\/p>\n\n\n\n To learn more about the ESP32, make sure to take a look at our resources:<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" In this project, you’ll learn how to create a simple graphical user interface (GUI) with the ESP32 Cheap Yellow Display (ESP32-2432S028R). The TFT display will have an ON and OFF … <\/p>\nIntroducing the ESP32 Cheap Yellow Display – CYD (ESP32-2432S028R)<\/h2>\n\n\n\n
![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-CYD-Board-ESP32-2432S028R-front.jpg?resize=750%2C421&quality=100&strip=all&ssl=1\")
<\/a><\/figure><\/div>\n\n\n\n
Prerequisites<\/h2>\n\n\n\n
\n
Code – Touchscreen with On\/Off Button<\/h2>\n\n\n\n
\/* Rui Santos & Sara Santos - Random Nerd Tutorials\n THIS EXAMPLE WAS TESTED WITH THE FOLLOWING HARDWARE:\n 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 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n Complete project details: https:\/\/RandomNerdTutorials.com\/touchscreen-on-off-button-cheap-yellow-display-esp32-2432s028r\/\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\/ *\/\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 3\n\n\/\/ Button position and size\n#define FRAME_X 60\n#define FRAME_Y 60\n#define FRAME_W 200\n#define FRAME_H 120\n\n\/\/ Red zone size\n#define REDBUTTON_X FRAME_X\n#define REDBUTTON_Y FRAME_Y\n#define REDBUTTON_W (FRAME_W \/ 2)\n#define REDBUTTON_H FRAME_H\n\n\/\/ Green zone size\n#define GREENBUTTON_X (REDBUTTON_X + REDBUTTON_W)\n#define GREENBUTTON_Y FRAME_Y\n#define GREENBUTTON_W (FRAME_W \/ 2)\n#define GREENBUTTON_H FRAME_H\n\n\/\/ RGB LED Pins\n#define CYD_LED_BLUE 17\n#define CYD_LED_RED 4\n#define CYD_LED_GREEN 16\n\n\/\/ Touchscreen coordinates: (x, y) and pressure (z)\nint x, y, z;\n\n\/\/ Stores current button state\nbool buttonState = false;\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\/\/ Draw button frame\nvoid drawFrame() {\n tft.drawRect(FRAME_X, FRAME_Y, FRAME_W, FRAME_H, TFT_BLACK);\n}\n\n\/\/ Draw a red button\nvoid drawRedButton() {\n tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, TFT_RED);\n tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, TFT_WHITE);\n drawFrame();\n tft.setTextColor(TFT_BLACK);\n tft.setTextSize(FONT_SIZE);\n tft.setTextDatum(MC_DATUM);\n tft.drawString("ON", GREENBUTTON_X + (GREENBUTTON_W \/ 2), GREENBUTTON_Y + (GREENBUTTON_H \/ 2));\n buttonState = false;\n}\n\n\/\/ Draw a green button\nvoid drawGreenButton() {\n tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, TFT_GREEN);\n tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, TFT_WHITE);\n drawFrame();\n tft.setTextColor(TFT_BLACK);\n tft.setTextSize(FONT_SIZE);\n tft.setTextDatum(MC_DATUM);\n tft.drawString("OFF", REDBUTTON_X + (REDBUTTON_W \/ 2) + 1, REDBUTTON_Y + (REDBUTTON_H \/ 2));\n buttonState = true;\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_BLACK);\n\n \/\/ Draw button \n drawGreenButton();\n\n pinMode(CYD_LED_GREEN, OUTPUT);\n digitalWrite(CYD_LED_GREEN, LOW);\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\n if (buttonState) {\n Serial.println("ON");\n if ((x > REDBUTTON_X) && (x < (REDBUTTON_X + REDBUTTON_W))) {\n if ((y > (REDBUTTON_Y)) && (y <= (REDBUTTON_Y + REDBUTTON_H))) {\n Serial.println("Red button pressed");\n drawRedButton();\n digitalWrite(CYD_LED_GREEN, HIGH);\n }\n }\n }\n else {\n Serial.println("OFF");\n if ((x > (GREENBUTTON_X)) && (x < (GREENBUTTON_X + GREENBUTTON_W))) {\n if ((y > (GREENBUTTON_Y)) && (y <= (GREENBUTTON_Y + GREENBUTTON_H))) {\n Serial.println("Green button pressed");\n drawGreenButton();\n digitalWrite(CYD_LED_GREEN, LOW);\n }\n }\n }\n }\n}\n<\/code><\/pre>\n\tHow the Code Works<\/h2>\n\n\n\n
Libraries<\/h3>\n\n\n\n
#include <SPI.h>\n#include <TFT_eSPI.h>\n#include <XPT2046_Touchscreen.h><\/code><\/pre>\n\n\n\nInitialize TFT<\/h3>\n\n\n\n
TFT_eSPI tft = TFT_eSPI();<\/code><\/pre>\n\n\n\nInitialize Touchscreen<\/h3>\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\nSPIClass touchscreenSPI = SPIClass(VSPI);\nXPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);<\/code><\/pre>\n\n\n\nOther Variables<\/h3>\n\n\n\n
#define SCREEN_WIDTH 320\n#define SCREEN_HEIGHT 240\n#define FONT_SIZE 3<\/code><\/pre>\n\n\n\n\/\/ Button position and size\n#define FRAME_X 60\n#define FRAME_Y 60\n#define FRAME_W 200\n#define FRAME_H 120\n\n\/\/ Red zone size\n#define REDBUTTON_X FRAME_X\n#define REDBUTTON_Y FRAME_Y\n#define REDBUTTON_W (FRAME_W \/ 2)\n#define REDBUTTON_H FRAME_H\n\n\/\/ Green zone size\n#define GREENBUTTON_X (REDBUTTON_X + REDBUTTON_W)\n#define GREENBUTTON_Y FRAME_Y\n#define GREENBUTTON_W (FRAME_W \/ 2)\n#define GREENBUTTON_H FRAME_H<\/code><\/pre>\n\n\n\n#define CYD_LED_BLUE 17\n#define CYD_LED_RED 4\n#define CYD_LED_GREEN 16<\/code><\/pre>\n\n\n\nint x, y, z;<\/code><\/pre>\n\n\n\nbool buttonState = false;<\/code><\/pre>\n\n\n\nsetup()<\/h3>\n\n\n\n
Serial.begin(115200);<\/code><\/pre>\n\n\n\ntouchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);\ntouchscreen.begin(touchscreenSPI);\ntouchscreen.setRotation(1);<\/code><\/pre>\n\n\n\ntft.init();\ntft.setRotation(1);<\/code><\/pre>\n\n\n\ntft.fillScreen(TFT_BLACK);<\/code><\/pre>\n\n\n\ndrawGreenButton();\npinMode(CYD_LED_GREEN, OUTPUT);\ndigitalWrite(CYD_LED_GREEN, LOW);<\/code><\/pre>\n\n\n\nloop()<\/h3>\n\n\n\n
if (touchscreen.tirqTouched() && touchscreen.touched()) {<\/code><\/pre>\n\n\n\nTS_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\nprintTouchToSerial(x, y, z);<\/code><\/pre>\n\n\n\nif (buttonState) {\n Serial.println(\"ON\");\n if ((x > REDBUTTON_X) && (x < (REDBUTTON_X + REDBUTTON_W))) {\n if ((y > (REDBUTTON_Y)) && (y <= (REDBUTTON_Y + REDBUTTON_H))) {\n Serial.println(\"Red button pressed\");\n drawRedButton();\n digitalWrite(CYD_LED_GREEN, HIGH);\n }\n }\n}\nelse {\n Serial.println(\"OFF\");\n if ((x > (GREENBUTTON_X)) && (x < (GREENBUTTON_X + GREENBUTTON_W))) {\n if ((y > (GREENBUTTON_Y)) && (y <= (GREENBUTTON_Y + GREENBUTTON_H))) {\n Serial.println(\"Green button pressed\");\n drawGreenButton();\n digitalWrite(CYD_LED_GREEN, LOW);\n }\n }\n}<\/code><\/pre>\n\n\n\nprintTouchToSerial()<\/h3>\n\n\n\n
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\nOther Functions: drawFrame(), drawRedButton(), drawGreenButton()<\/h3>\n\n\n\n
\/\/ Draw button frame\nvoid drawFrame() {\n tft.drawRect(FRAME_X, FRAME_Y, FRAME_W, FRAME_H, TFT_BLACK);\n}<\/code><\/pre>\n\n\n\n\/\/ Draw a red button\nvoid drawRedButton() {\n tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, TFT_RED);\n tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, TFT_WHITE);\n drawFrame();\n tft.setTextColor(TFT_BLACK);\n tft.setTextSize(FONT_SIZE);\n tft.setTextDatum(MC_DATUM);\n tft.drawString(\"ON\", GREENBUTTON_X + (GREENBUTTON_W \/ 2), GREENBUTTON_Y + (GREENBUTTON_H \/ 2));\n buttonState = false;\n}\n\n\/\/ Draw a green button\nvoid drawGreenButton() {\n tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, TFT_GREEN);\n tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, TFT_WHITE);\n drawFrame();\n tft.setTextColor(TFT_BLACK);\n tft.setTextSize(FONT_SIZE);\n tft.setTextDatum(MC_DATUM);\n tft.drawString(\"OFF\", REDBUTTON_X + (REDBUTTON_W \/ 2) + 1, REDBUTTON_Y + (REDBUTTON_H \/ 2));\n buttonState = true;\n}<\/code><\/pre>\n\n\n\nDemonstration<\/h2>\n\n\n\n
![\"Arduino](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/arduino-ide-2-upload-button.png?resize=36%2C39&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Touchscreen](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Touchscreen-On-Off-Button-Cheap-Yellow-Display-ESP32-2432S028R-Arduino-IDE.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/a><\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-Cheap-Yellow-Display-RGB-green-LED-ON-ESP32-2432S028R.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Touchscreen](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/Touchscreen-Press-On-Off-Button-Cheap-Yellow-Display-ESP32-2432S028R.jpg?resize=750%2C422&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"ESP32](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2024\/03\/ESP32-TFT-Touchscreen-On-Off-Button-Cheap-Yellow-Display-Arduino-IDE-Serial-Monitor.png?resize=937%2C507&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
\n
\n