Bottons won't work on my 7 inch

maclarkson · November 13, 2024, 11:45pm

Hi there,

I have this code that creates a bunch of buttons on my LCD screen. can anyone tell me why the buttons are not working when I pressed them?

#include <TFT_eSPI.h>
#include <XPT2046_Touchscreen.h>
#include <SPI.h>
#include <Wire.h>

#define XPT2046_IRQ 35
#define XPT2046_MOSI 32
#define XPT2046_MISO 34
#define XPT2046_CLK 27
#define XPT2046_CS 5
#define BL 21

#define SCREEN_WIDTH 800
#define SCREEN_HEIGHT 480

// TFT display and touchscreen instances
TFT_eSPI tft = TFT_eSPI();
SPIClass touchscreenSPI(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

int buttonWidthBig = 110;  // Adjusted for uniform size
int buttonHeightBig = 100;  // Adjusted for uniform size
int buttonDiameterMedium = 84;
int buttonWidthSmall = 45;
int buttonHeightSmall = 45;
int buttonWidthWide = 90; // New width for Slow, Medium, Fast, Extreme buttons

uint16_t buttonNormalColor = tft.color565(0, 100, 0);  // Dark Green
uint16_t buttonPressedColor = tft.color565(255, 255, 255);  // White
uint16_t buttonTextColor = TFT_BLACK;  // Black text on white

void setup() {
  Serial.begin(115200);
  tft.init();
  tft.setRotation(1);

  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  touchscreen.begin(touchscreenSPI);
  touchscreen.setRotation(1);

  pinMode(BL, OUTPUT);
  digitalWrite(BL, HIGH);

  uint16_t darkGreen = tft.color565(34, 139, 34);
  uint16_t lightGreen = tft.color565(144, 238, 144);
  
  tft.fillScreen(lightGreen);
  tft.setTextColor(TFT_WHITE);
  tft.setTextSize(2);
  tft.setTextDatum(MC_DATUM);

  // Mode section
  int modeX = 20, modeY = 40, modeWidth = 160, modeHeight = 420;
  tft.fillRoundRect(modeX, modeY, modeWidth, modeHeight, 10, darkGreen);
  tft.setTextColor(TFT_WHITE, darkGreen);
  tft.drawString("Mode", modeX + modeWidth / 2, modeY + 20);

  int modeButtonSpacing = (modeHeight - (buttonHeightBig * 3)) / 4;
  drawControlButton(modeX + (modeWidth - buttonWidthBig) / 2, modeY + modeButtonSpacing + 20, buttonWidthBig, buttonHeightBig, "Golf", darkGreen);
  drawControlButton(modeX + (modeWidth - buttonWidthBig) / 2, modeY + modeButtonSpacing * 2 + buttonHeightBig + 20, buttonWidthBig, buttonHeightBig, "Game", darkGreen);
  drawControlButton(modeX + (modeWidth - buttonWidthBig) / 2, modeY + modeButtonSpacing * 3 + buttonHeightBig * 2 + 20, buttonWidthBig, buttonHeightBig, "Gym", darkGreen);
  
  // Center buttons in the Mode section
 // int verticalSpacing = (modeHeight - (buttonHeightBig * 3 + 20)) / 4; // 20px space between buttons
 // drawRoundedButton(modeX + 10, modeY + verticalSpacing + 15, buttonWidthBig, buttonHeightBig, "Play Golf", darkGreen);
 // drawRoundedButton(modeX + 10, modeY + verticalSpacing + buttonHeightBig + 20 + 15, buttonWidthBig, buttonHeightBig, "Play Game", darkGreen);
 // drawRoundedButton(modeX + 10, modeY + verticalSpacing + 2 * (buttonHeightBig + 20) + 15, buttonWidthBig, buttonHeightBig, "Gym", darkGreen);

  // Terrain section
  int terrainX = 200, terrainY = 40, terrainWidth = 400, terrainHeight = 140;
  tft.fillRoundRect(terrainX, terrainY, terrainWidth, terrainHeight, 10, darkGreen);
  tft.setTextColor(TFT_WHITE, darkGreen);
  tft.drawString("Terrain", terrainX + terrainWidth / 2, terrainY + 20);
  drawCircularButton(250, 120, buttonDiameterMedium, "Tee", darkGreen);
  drawCircularButton(350, 120, buttonDiameterMedium, "Fairway", darkGreen);
  drawCircularButton(450, 120, buttonDiameterMedium, "Rough", darkGreen);
  drawCircularButton(550, 120, buttonDiameterMedium, "Bunker", darkGreen);

  // Speed section with doubled width for buttons
  int speedX = 200, speedY = 200, speedWidth = 400, speedHeight = 120;
  tft.fillRoundRect(speedX, speedY, speedWidth, speedHeight, 10, darkGreen);
  tft.setTextColor(TFT_WHITE, darkGreen);
  tft.drawString("Speed", speedX + speedWidth / 2, speedY + 20);
  drawWideButton(205, 250, buttonWidthWide, buttonHeightSmall, "Slow", darkGreen);
  drawWideButton(305, 250, buttonWidthWide, buttonHeightSmall, "Medium", darkGreen);
  drawWideButton(405, 250, buttonWidthWide, buttonHeightSmall, "Fast", darkGreen);
  drawWideButton(505, 250, buttonWidthWide, buttonHeightSmall, "Extreme", darkGreen);

  // Number of Balls section with circular buttons (decreased size by 20%)
  int ballsX = 200, ballsY = 340, ballsWidth = 400, ballsHeight = 120;
  tft.fillRoundRect(ballsX, ballsY, ballsWidth, ballsHeight, 10, darkGreen);
  tft.setTextColor(TFT_WHITE, darkGreen);
  tft.drawString("Number of Balls", ballsX + ballsWidth / 2, ballsY + 20);
  drawCircularButton(250, 410, buttonDiameterMedium * 0.8, "30", darkGreen);  // 20% smaller
  drawCircularButton(350, 410, buttonDiameterMedium * 0.8, "60", darkGreen);  // 20% smaller
  drawCircularButton(450, 410, buttonDiameterMedium * 0.8, "80", darkGreen);  // 20% smaller
  drawCircularButton(550, 410, buttonDiameterMedium * 0.8, "100", darkGreen); // 20% smaller
  
  
  // Control section with Prime, Play, Stop buttons centered
  int controlX = 620, controlY = 40, controlWidth = 160, controlHeight = 420;
  tft.fillRoundRect(controlX, controlY, controlWidth, controlHeight, 20, darkGreen);
  tft.setTextColor(TFT_WHITE, darkGreen);
  tft.drawString("Control", controlX + controlWidth / 2, controlY + 20);

  int controlButtonSpacing = (controlHeight - (buttonHeightBig * 3)) / 4;
  drawControlButton(controlX + (controlWidth - buttonWidthBig) / 2, controlY + controlButtonSpacing + 20, buttonWidthBig, buttonHeightBig, "Prime", darkGreen);
  drawControlButton(controlX + (controlWidth - buttonWidthBig) / 2, controlY + controlButtonSpacing * 2 + buttonHeightBig + 20, buttonWidthBig, buttonHeightBig, "Play", darkGreen);
  drawControlButton(controlX + (controlWidth - buttonWidthBig) / 2, controlY + controlButtonSpacing * 3 + buttonHeightBig * 2 + 20, buttonWidthBig, buttonHeightBig, "Stop", darkGreen);
}

void loop() {
  if (touchscreen.tirqTouched() && touchscreen.touched()) {
    TS_Point p = touchscreen.getPoint();
    handleTouch(p.x, p.y);
  }
}

void drawRoundedButton(int x, int y, int w, int h, const char *label, uint16_t color) {
  tft.fillRoundRect(x, y, w, h, 10, color);
  tft.drawRoundRect(x, y, w, h, 10, TFT_WHITE);
  tft.setTextColor(TFT_WHITE, color);
  tft.setTextDatum(MC_DATUM);
  tft.setTextSize(2);
  tft.drawString(label, x + w / 2, y + h / 2);
}

void drawCircularButton(int x, int y, int diameter, const char *label, uint16_t color) {
  tft.fillCircle(x, y, diameter / 2, color);
  tft.drawCircle(x, y, diameter / 2, TFT_WHITE);
  tft.setTextColor(TFT_WHITE, color);
  tft.setTextDatum(MC_DATUM);
  tft.setTextSize(2);
  tft.drawString(label, x, y);
}

void drawWideButton(int x, int y, int w, int h, const char *label, uint16_t color) {
  tft.fillRoundRect(x, y, w, h, 10, color);
  tft.drawRoundRect(x, y, w, h, 10, TFT_WHITE);
  tft.setTextColor(TFT_WHITE, color);
  tft.setTextDatum(MC_DATUM);
  tft.setTextSize(2);
  tft.drawString(label, x + w / 2, y + h / 2);
}

void drawControlButton(int x, int y, int w, int h, const char *label, uint16_t color) {
  tft.fillRoundRect(x, y, w, h, 10, color);
  tft.drawRoundRect(x, y, w, h, 10, TFT_WHITE);
  tft.setTextColor(TFT_WHITE, color);
  tft.setTextDatum(MC_DATUM);
  tft.setTextSize(2);
  tft.drawString(label, x + w / 2, y + h / 2);
}

void handleTouch(int touchX, int touchY) {
  // Touch detection code for each button
}

sonofcy · November 13, 2024, 11:51pm

Because you have no code to process them as seen in the screen grab.

maclarkson · November 14, 2024, 9:32am

so I added this code into it but I am unsure about the coordinates. Does anyone know how I can get them.

  if (touchscreen.tirqTouched() && touchscreen.touched()) {
    TS_Point p = touchscreen.getPoint();

    // Map the raw touchscreen coordinates to the TFT screen dimensions
    int touchX = map(p.x, 200, 3800, 0, SCREEN_WIDTH);  // Adjust 200 and 3800 based on your calibration
    int touchY = map(p.y, 3800, 200, 0, SCREEN_HEIGHT);

    handleTouch(touchX, touchY);
  }
}

maclarkson · November 14, 2024, 9:57am

or does anyone know of a config file I can use.

SurferTim · November 14, 2024, 10:16am

Did you try the touchscreen example?

github.com

PaulStoffregen/XPT2046_Touchscreen/blob/master/examples/TouchTest/TouchTest.ino

#include <XPT2046_Touchscreen.h>
#include <SPI.h>

#define CS_PIN  8
// MOSI=11, MISO=12, SCK=13

//XPT2046_Touchscreen ts(CS_PIN);
#define TIRQ_PIN  2
//XPT2046_Touchscreen ts(CS_PIN);  // Param 2 - NULL - No interrupts
//XPT2046_Touchscreen ts(CS_PIN, 255);  // Param 2 - 255 - No interrupts
XPT2046_Touchscreen ts(CS_PIN, TIRQ_PIN);  // Param 2 - Touch IRQ Pin - interrupt enabled polling

void setup() {
  Serial.begin(38400);
  ts.begin();
  // ts.begin(SPI1); // use alternate SPI port
  ts.setRotation(1);
  while (!Serial && (millis() <= 1000));
}

This file has been truncated. show original

maclarkson · November 14, 2024, 1:58pm

Hay Tim!!

I haven't but do so I would need to change my pins. This is my current config can you tell me what I need to change. as my screen is not labelled normally,

maclarkson · November 14, 2024, 2:05pm

Check this out!!! When I press button 1 the light blue button flashes. I can move the pen down and it will continue to flash till it reaches 3cm before the bottom then button 4 begins to flash.

from this code:

#include <TFT_eSPI.h>
#include <XPT2046_Touchscreen.h>
#include <SPI.h>

// Screen and Touchscreen Pins
#define XPT2046_IRQ 35
#define XPT2046_MOSI 32
#define XPT2046_MISO 34
#define XPT2046_CLK 27
#define XPT2046_CS 5
#define BL 21

// Screen dimensions for a 7-inch display
#define SCREEN_WIDTH 800
#define SCREEN_HEIGHT 480

// Initialize display and touchscreen instances
TFT_eSPI tft = TFT_eSPI();
SPIClass touchscreenSPI(VSPI);
XPT2046_Touchscreen touchscreen(XPT2046_CS, XPT2046_IRQ);

// Button coordinates and colors
struct Button {
  int x, y, w, h;
  uint16_t color, pressedColor;
  String label;
};

Button buttons[4] = {
  {50, 50, 200, 100, TFT_RED, TFT_GREEN, "Button 1"},         // Rectangle
  {300, 50, 100, 100, TFT_BLUE, TFT_YELLOW, "Button 2"},      // Square
  {450, 50, 150, 200, TFT_CYAN, TFT_MAGENTA, "Button 3"},     // Tall Rectangle
  {650, 50, 100, 200, TFT_PURPLE, TFT_ORANGE, "Button 4"}     // Tall Slim Rectangle
};

void setup() {
  Serial.begin(115200);

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

  // Initialize touchscreen SPI
  touchscreenSPI.begin(XPT2046_CLK, XPT2046_MISO, XPT2046_MOSI, XPT2046_CS);
  touchscreen.begin(touchscreenSPI);
  touchscreen.setRotation(1);

  // Turn on backlight
  pinMode(BL, OUTPUT);
  digitalWrite(BL, HIGH);

  // Draw buttons
  for (int i = 0; i < 4; i++) {
    drawButton(buttons[i]);
  }
}

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

    // Map the raw coordinates to the display coordinates
    int16_t x = map(p.x, 0, 3598, 0, SCREEN_WIDTH);
    int16_t y = map(p.y, 0, 3332, 0, SCREEN_HEIGHT);

    // Check if touch is within button areas
    for (int i = 0; i < 4; i++) {
      if (isWithinButton(x, y, buttons[i].x, buttons[i].y, buttons[i].w, buttons[i].h)) {
        Serial.print(buttons[i].label);
        Serial.println(" pressed!");

        // Change button color to pressed color
        tft.fillRect(buttons[i].x, buttons[i].y, buttons[i].w, buttons[i].h, buttons[i].pressedColor);
        delay(300); // Short delay to show the button press indication
        // Change button color back to original color
        drawButton(buttons[i]);
      }
    }

    // Add a short delay after reading touch to stabilize
    delay(100);
  }
}

// Function to draw a button
void drawButton(Button button) {
  tft.fillRect(button.x, button.y, button.w, button.h, button.color);
  tft.drawRect(button.x, button.y, button.w, button.h, TFT_WHITE);
  tft.setTextColor(TFT_WHITE);
  tft.setTextSize(2);
  tft.setCursor(button.x + 10, button.y + (button.h / 2) - 8);
  tft.print(button.label);
}

// Function to check if touch is within button area
bool isWithinButton(int touchX, int touchY, int buttonX, int buttonY, int buttonW, int buttonH) {
  return (touchX >= buttonX && touchX <= (buttonX + buttonW) &&
          touchY >= buttonY && touchY <= (buttonY + buttonH));
}

maclarkson · November 14, 2024, 2:10pm

I even created this to configure the screen but now I am not sure that it works.
Milongy/7inch-Screen-SSD1963-ESP32-support-Tools: .

Topic		Replies	Views
Having trouble getting touchscreen to work Displays	2	626	October 28, 2021
1.28" touch screen, but can't get the touch to work Programming Questions	11	82	October 30, 2024
TFT LCD Touchscreen Multiple Page Coding Programming Questions	1	136	October 14, 2024
Touchscreen buttons Displays	9	1047	June 6, 2021
TFT LCD Button Programming Questions	3	1816	May 5, 2021

Bottons won't work on my 7 inch

Related topics