Making buttons on a touchscreen TFT

I have a SeeedStudio 2.8" TFT Touch Shield, and am trying to make a very basic GUI with it. I understand a little bit of the Arduino world, but not much.

The code I have below is an example I was working on trying to see if I could get it to work… and it does, sort of…

Everything works display wise, the screen fills, my rectangle and text shows up… and it loads the “settings” page just fine, but it will do it no matter where I press on the screen, even outside the button area.

I have tried googling and searching for a couple days now, but obviously have missed something, can somebody explain what is wrong in my code that makes the entire screen a button, instead of just the button area??

Thanks in advance for any help :smiley:

#include <stdint.h>
#include <TFTv2.h>
#include <SPI.h>
#include <SeeedTouchScreen.h>
TouchScreen ts = TouchScreen(XP, YP, XM, YM);


void drawSettings()
{
    Tft.fillScreen(0,239,0,319,GRAY2);
    Tft.fillRectangle(0,0,240,60,GRAY1);
    Tft.fillRectangle(0,65,240,60,GRAY1);
    Tft.fillRectangle(0,130,240,60,GRAY1);
    Tft.fillRectangle(0,195,240,60,GRAY1);
    Tft.fillRectangle(0,260,240,60,GRAY1);
    Tft.drawString("Settings1",16,19,3,WHITE);
    Tft.drawString("Settings2",16,84,3,WHITE);
    Tft.drawString("Settings3",16,149,3,WHITE);
    Tft.drawString("Settings4",16,214,3,WHITE);
    Tft.drawString("Settings5",16,279,3,WHITE);
    
}


void setup() {
  
    TFT_BL_ON;      // turn on the background light
    Tft.TFTinit();  // init TFT library

    Tft.fillScreen(0,240,0,320,GRAY2);
    Tft.fillRectangle(0,260,240,60,GRAY1);
    Tft.drawRectangle(0,260,240,60,WHITE);
    Tft.drawString("SETTINGS",25,275,4,WHITE);
}


void loop()
{
  Point p = ts.getPoint();
  
    p.x = map(p.x, TS_MINX, TS_MAXX, 0, 240);
    p.y = map(p.y, TS_MINY, TS_MAXY, 0, 320);

    if (p.z > __PRESURE) {

        if((p.x >= 0) && (p.x <= 240) && (p.y >= 260) && (p.y <= 320) );
        {
          drawSettings();
        }
    }
}

It'd be helpful to insert a Serial.begin(9600) and print what you're getting from the touch to the serial monitor.

Does the touch require a calibration?

In your code of TFT LCD, check this line:

if((p.x >= 0) && (p.x <= 240) && (p.y >= 260) && (p.y <= 320) );

Here you are placing a check that when you touch the LCD between 0 to 240 pixels in x direction and 260 to 230 in the y direction then settings will open.

So, you can change the Pixels here to restrict your touch to certain area. You can make x between 0 to 100 and area will reduce. I hope you got the idea.

Also Serial Pint these values, it will help.

The screen shouldn’t need to be calibrated, as it works fine with the examples. I am unsure how to print the coordinates to the serial monitor, I tried a few different things and couldn’t figure it out.

I am aware that I am checking in that area, but that is set for where the button is… changing those values, even to 1 didn’t change anything, still thinks I clicked the button regardless of where I press on the screen.

I am assuming it has something to do with the “if (p.z > __PRESURE)” piece, I’m sure thats not the correct way to do it, but I haven’t worked with TFT screens much, and have no idea what I am doing here…

EDIT:

I changed a couple things from something I found, but this didn’t work either…

This is what I tried

#include <stdint.h>
#include <TFTv2.h>
#include <SPI.h>
#include <SeeedTouchScreen.h>
TouchScreen ts = TouchScreen(XP, YP, XM, YM);


void drawSettings()
{
    Tft.fillScreen(0,239,0,319,GRAY2);
    Tft.fillRectangle(0,0,240,60,GRAY1);
    Tft.fillRectangle(0,65,240,60,GRAY1);
    Tft.fillRectangle(0,130,240,60,GRAY1);
    Tft.fillRectangle(0,195,240,60,GRAY1);
    Tft.fillRectangle(0,260,240,60,GRAY1);
    Tft.drawString("Settings1",16,19,3,WHITE);
    Tft.drawString("Settings2",16,84,3,WHITE);
    Tft.drawString("Settings3",16,149,3,WHITE);
    Tft.drawString("Settings4",16,214,3,WHITE);
    Tft.drawString("Settings5",16,279,3,WHITE);
    
}


void setup()
{
  
    TFT_BL_ON;      // turn on the background light
    Tft.TFTinit();  // init TFT library

    Tft.fillScreen(0,240,0,320,GRAY2);
    Tft.fillRectangle(0,260,240,60,GRAY1);
    Tft.drawRectangle(0,260,240,60,WHITE);
    Tft.drawString("SETTINGS",25,275,4,WHITE);
}


void loop()
{

boolean TouchButton(int X, int Y, int W, int H);
{
  Point p = ts.getPoint();
  p.x = map(p.x, 260, 1760, 0, 240); 
  p.y = map(p.y, 170, 1810, 0, 320);

  return ((p.x >= 0) && (p.x <= 240) && (p.y >= 260) && (p.y <= 320));
}

  if (TouchButton(0,260,240,60));
  
{
  drawSettings();
}
}
    Tft.fillRectangle(0,260,240,60,GRAY1);
    Tft.drawRectangle(0,260,240,60,WHITE);

What is the point of drawing two rectangles in the same place, with different colors? You'll only see the white one.

void loop()
{

boolean TouchButton(int X, int Y, int W, int H);
{
  Point p = ts.getPoint();

That code won't even compile. You can NOT define a function inside of another function.

Why are you passing 4 values to that function, when you don't use any of the values in the function?

The function should test that the touch is between X and X+W and between Y and Y+H.

The point of two rectangles is to have a white border, and it works just fine.

I really don’t know what I am doing here, and was trying something that another post had suggested, and the OP had said worked. I am at a lost here and just need to be pointed in the right direction…

I am at a lost here and just need to be pointed in the right direction..

I told you that you can't define a function (TouchButton) inside a function (loop). If that isn't enough to get you moving in the right direction, programming and the Arduino are not part of your future.