ESP32 CYD Touchscreen Button: Build an On/Off Control for Your IoT Projects

/*  ESP32 CYD Touchscreen On/Off Button
    Controls the built-in green RGB LED with a graphical button
    Complete details: https://RandomNerdTutorials.com/touchscreen-on-off-button-cheap-yellow-display-esp32-2432s028r/
*/

#include <SPI.h>
#include <TFT_eSPI.h>                 // Display library
#include <XPT2046_Touchscreen.h>      // Touch library

TFT_eSPI tft = TFT_eSPI();

// Touchscreen pin definitions for CYD
#define XPT2046_IRQ 36
#define XPT2046_MOSI 32
#define XPT2046_MISO 39
#define XPT2046_CLK 25
#define XPT2046_CS 33

SPIClass touchscreenSPI = SPIClass(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

// Display dimensions (landscape mode)
#define SCREEN_WIDTH 320
#define SCREEN_HEIGHT 240
#define FONT_SIZE 3

// Button frame position and size
#define FRAME_X 60
#define FRAME_Y 60
#define FRAME_W 200
#define FRAME_H 120

// Red (OFF) button area
#define REDBUTTON_X FRAME_X
#define REDBUTTON_Y FRAME_Y
#define REDBUTTON_W (FRAME_W / 2)
#define REDBUTTON_H FRAME_H

// Green (ON) button area
#define GREENBUTTON_X (REDBUTTON_X + REDBUTTON_W)
#define GREENBUTTON_Y FRAME_Y
#define GREENBUTTON_W (FRAME_W / 2)
#define GREENBUTTON_H FRAME_H

// Onboard RGB LED pins
#define CYD_LED_GREEN 16    // We'll control the green LED
#define CYD_LED_RED 4       // (Not used in this example)
#define CYD_LED_BLUE 17     // (Not used in this example)

// Touch coordinates and pressure
int touchX, touchY, touchZ;

// Current button state: false = OFF (green button showing), true = ON (red button showing)
bool buttonState = false;

// Helper: Print touch data to Serial Monitor
void printTouchToSerial(int x, int y, int z) {
  Serial.print("X = "); Serial.print(x);
  Serial.print(" | Y = "); Serial.print(y);
  Serial.print(" | Pressure = "); Serial.println(z);
}

// Draw the button frame (black outline)
void drawFrame() {
  tft.drawRect(FRAME_X, FRAME_Y, FRAME_W, FRAME_H, TFT_BLACK);
}

// Draw the "OFF" state (red button on left, green area blank)
void drawRedButton() {
  tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, TFT_RED);
  tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, TFT_WHITE);
  drawFrame();
  tft.setTextColor(TFT_BLACK);
  tft.setTextSize(FONT_SIZE);
  tft.setTextDatum(MC_DATUM);
  tft.drawString("OFF", REDBUTTON_X + (REDBUTTON_W / 2), REDBUTTON_Y + (REDBUTTON_H / 2));
  buttonState = true;   // Now showing OFF button (red)
}

// Draw the "ON" state (green button on right, red area blank)
void drawGreenButton() {
  tft.fillRect(GREENBUTTON_X, GREENBUTTON_Y, GREENBUTTON_W, GREENBUTTON_H, TFT_GREEN);
  tft.fillRect(REDBUTTON_X, REDBUTTON_Y, REDBUTTON_W, REDBUTTON_H, TFT_WHITE);
  drawFrame();
  tft.setTextColor(TFT_BLACK);
  tft.setTextSize(FONT_SIZE);
  tft.setTextDatum(MC_DATUM);
  tft.drawString("ON", GREENBUTTON_X + (GREENBUTTON_W / 2), GREENBUTTON_Y + (GREENBUTTON_H / 2));
  buttonState = false;  // Now showing ON button (green)
}

void setup() {
  Serial.begin(115200);
  Serial.println("ESP32 CYD Touchscreen Button Starting...");

  // Initialize touchscreen
  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  touchscreen.begin(touchscreenSPI);
  // Set landscape orientation (adjust if your touch is reversed)
  touchscreen.setRotation(1);  // Try 3 if touches are upside-down

  // Initialize display
  tft.init();
  tft.setRotation(1);           // Landscape mode
  tft.fillScreen(TFT_BLACK);

  // Draw initial button (LED starts OFF)
  drawGreenButton();

  // Configure LED pin
  pinMode(CYD_LED_GREEN, OUTPUT);
  digitalWrite(CYD_LED_GREEN, LOW);  // Start with LED off
}

void loop() {
  // Check for touch
  if (touchscreen.tirqTouched() && touchscreen.touched()) {
    TS_Point p = touchscreen.getPoint();

    // Map raw touch values to screen coordinates
    // These mapping values work for most CYD boards; adjust if needed
    touchX = map(p.x, 200, 3700, 1, SCREEN_WIDTH);
    touchY = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);
    touchZ = p.z;

    printTouchToSerial(touchX, touchY, touchZ);

    // State machine: buttonState tracks which button is currently shown
    if (buttonState) {
      // Currently showing OFF button (red) – waiting for tap on green ON area
      Serial.println("State: OFF button visible");
      if ((touchX > GREENBUTTON_X) && (touchX < (GREENBUTTON_X + GREENBUTTON_W)) &&
          (touchY > GREENBUTTON_Y) && (touchY <= (GREENBUTTON_Y + GREENBUTTON_H))) {
        Serial.println(">> Green (ON) area tapped - Turning LED ON");
        drawGreenButton();               // Change display to ON button
        digitalWrite(CYD_LED_GREEN, HIGH); // Turn LED on
      }
    } else {
      // Currently showing ON button (green) – waiting for tap on red OFF area
      Serial.println("State: ON button visible");
      if ((touchX > REDBUTTON_X) && (touchX < (REDBUTTON_X + REDBUTTON_W)) &&
          (touchY > REDBUTTON_Y) && (touchY <= (REDBUTTON_Y + REDBUTTON_H))) {
        Serial.println(">> Red (OFF) area tapped - Turning LED OFF");
        drawRedButton();                  // Change display to OFF button
        digitalWrite(CYD_LED_GREEN, LOW);  // Turn LED off
      }
    }
    delay(200);  // Simple debounce
  }
}

touchX = map(p.x, 200, 3700, 1, SCREEN_WIDTH);
touchY = map(p.y, 240, 3800, 1, SCREEN_HEIGHT);