TFT Touch Shield Buttons

Hello, I am very new to Arduino and I am trying to make a button for my Seeed TFT Touch Shield that will open a new page with more buttons when you touch it. This is what I have so far. It is just graphics with text.

I have found a few videos on this topic but none of them are tutorials and the code that comes with them aren’t compatible with the libraries I used to make this. This is the code I used.

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

void setup() {
  
  TFT_BL_ON;
  
  Tft.TFTinit();
  
  Tft.fillRectangle(0,0,300,500,BLUE);
  
  Tft.fillRectangle(70,250,100,50,RED);
  
  Tft.drawRectangle(70,250,100,50,WHITE);
  
  Tft.drawString("WOS",47,50,8,WHITE);
 
  Tft.drawString("ENTER",88,267,2,WHITE);
  
  Tft.drawString("Willem's Operating System", 48,115,1,WHITE);
}

void loop() {
  
}

Can someone please help me turn the red box into a button that turns in to a new page with an other button please.

I'll be home in about an hour and a half, I can help you then, if no one comes backs to you.

There is also a menu library made to work with the ones you have. It includes buttons and sliders too.

I don't remember the name of it but I made a video of it on my YouTube channel. HazardOfExistance

Try this to see if your touchscreen works.

// Paint application - Demonstate both TFT and Touch Screen
#include <stdint.h>
#include <SeeedTouchScreen.h>
#include <TFTv2.h>
#include <SPI.h>

int ColorPaletteHigh = 30;
int color = WHITE;  //Paint brush color
unsigned int colors[8] = {BLACK, RED, GREEN, BLUE, CYAN, YELLOW, WHITE, GRAY1};

// For better pressure precision, we need to know the resistance
// between X+ and X- Use any multimeter to read it
// The 2.8" TFT Touch shield has 300 ohms across the X plate

TouchScreen ts = TouchScreen(XP, YP, XM, YM); //init TouchScreen port pins

void setup()
{
    Tft.TFTinit();  //init TFT library
    Serial.begin(115200);
    //Draw the pallet
    for(int i = 0; i<8; i++)
    {
        Tft.fillRectangle(i*30, 0, 30, ColorPaletteHigh, colors[i]);
    }
}

void loop()
{
    // a point object holds x y and z coordinates.
    Point p = ts.getPoint();

    //map the ADC value read to into pixel co-ordinates

    p.x = map(p.x, 260, 1760, 0, 240);
    p.y = map(p.y, 170, 1810, 0, 320);
    Serial.print(p.x); Serial.print(" ");Serial.println(p.y);
    
    // we have some minimum pressure we consider 'valid'
    // pressure of 0 means no pressing!

    if (p.z > __PRESURE) {
        // Detect  paint brush color change
        if(p.y < ColorPaletteHigh+2)
        {
            color = colors[p.x/30];
        }
        else
        {
            Tft.fillCircle(p.x,p.y,2,color);
        }
    }
}
/*********************************************************************************************************
  END FILE
*********************************************************************************************************/

Then use this.

bool 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 >= X) && (p.x <= X+W) && (p.y >= Y) && (p.y <= Y+H) );
}

Thank you so much! But do I run this code with my menu or with the paint application.

bool 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 >= X) && (p.x <= X+W) && (p.y >= Y) && (p.y <= Y+H) );
}

And how do I use this code to make my button do something?

Your menu application. The paint sketch was just to see if your touch screen even works and is calibrated. You may need to adjust these values.

p.x = map(p.x, 260, 1760, 0, 240); p.y = map(p.y, 170, 1810, 0, 320);

How To:

if ( TouchButton(70,250,100,50) )// your buttons coordinates, the same ones used to fill the rectangle.
{
  // If the button at those coordinates was touched, then do something here.
}

Thank you so much. It works.