Can't make touchscreen hit box rotate 90deg with screen

Using Arduino Displays
1

I have cobbled together a test sketch for drawing a button and making it functional. The button appears where I want it to, but the hit box is not rotating 90 degs on this sketch. I have played with an modified one of the test sketches at that came with the screen, and I can move it where I want. I am using the same rotation alignment for the touchscreen but is not working. I am running this on an Uno and the screen is 2.8 TFT Touch Shield for Arduino w/Capacitive Touch : ID 1947 : $44.95 : Adafruit Industries, Unique & fun DIY electronics and kits 2.8" capacitive shield.
Here is my sketch:

#include <Adafruit_GFX.h>
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_ILI9341.h>
#include <Adafruit_FT6206.h>

// The FT6206 uses hardware I2C (SCL/SDA)
Adafruit_FT6206 ts = Adafruit_FT6206();

#define TFT_CS 10
#define TFT_DC 9
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);





#define BUTTON_X 60
#define BUTTON_Y 80
#define BUTTON_W 100
#define BUTTON_H 50
#define BUTTON_SPACING_X 20
#define BUTTON_SPACING_Y 20
#define BUTTON_TEXTSIZE 2

//char buttonlabel="Hi";
Adafruit_GFX_Button buttons;


void msgon()
{
  tft.fillRect(10,150,100,50, ILI9341_BLACK);
          tft.setCursor(10,150);
          tft.print("on");
}

void msgoff()
{
  tft.fillRect(10,150,100,50, ILI9341_BLACK);
          tft.setCursor(10,150);
          tft.print("off");
}




void setup() {
  Serial.begin(9600);
 tft.begin();
  if (!ts.begin(40)) { 
    Serial.println("Unable to start touchscreen.");
  } 
  else { 
    Serial.println("Touchscreen started."); 
  }
tft.fillScreen(ILI9341_BLACK);
  // origin = left,top landscape (USB left upper)
  tft.setRotation(1); 

buttons.initButton(&tft, BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, ILI9341_WHITE,ILI9341_BLUE, ILI9341_WHITE, "HI" ,BUTTON_TEXTSIZE);
buttons.drawButton();




}


void loop() {
  // See if there's any  touch data for us
  TS_Point p;
   p = ts.getPoint(); 
   

  if (ts.touched() ) {
 //rotate the button map 90 deg to match screen  
  p.x = map(p.x, 0, 240, 240, 0);
    p.y = map(p.y, 0, 320, 320, 0);
    int y = tft.height() - p.x;
    int x = p.y;
  }
    
   
  if (buttons.contains(p.x,p.y)) {
    buttons.press(true);
    
  } else {
    buttons.press(false);
  }

  if (buttons.justReleased()){
    buttons.drawButton();
    msgoff();
  }
  if (buttons.justPressed()){
    buttons.drawButton(true);
    msgon();
  }
 
 
}
2

OK, I have been playing around with this, and I believe it to be a bug with the adafruit_gfx_button function. If you take out the button, and just draw a filled rectangle, the code works like it should. I have rewritten this sketch three different ways, and every time, the hit box fails to line up if I call the adafruit_gfx_button function. When I draw anything else, circles, rectangles, ect, the hit box lines up perfectly.

3

Go on. The Button drawing and functions are all respective to your current Rotation.

The Touch Panel is glued onto the screen in a fixed way. The raw positions from the Touch controller chip are relative to the physical Touch Panel.

So if the Panel was glued in Landscape and your screen is not Landscape, you have to map the X, Y back to Portrait, Portrait_Rev, Landscape_Rev rotation as required.

Some Touch libraries will do the pixel mapping for you. Others just provide the raw values and you do the mapping.

David.

4

If you look in the sketch I posted in the original post, there is a rotation for the touchscreen mappings.

//rotate the button map 90 deg to match screen
p.x = map(p.x, 0, 240, 240, 0);
p.y = map(p.y, 0, 320, 320, 0);
int y = tft.height() - p.x;
int x = p.y;

This works perfectly for anything I draw on the screen except when I call adafruit_gfx_button(). The touchscreen coordinates will not rotate whenever that function is called.

Here is a the same thing just drawing a rectangle instead of using the gfx_button, and the touchscreen rotation works correctly. Same setup.

#include <Adafruit_GFX.h>
#include <SPI.h>
#include <Wire.h>
#include <Adafruit_ILI9341.h>
#include <Adafruit_FT6206.h>

// The FT6206 uses hardware I2C (SCL/SDA)
Adafruit_FT6206 ts = Adafruit_FT6206();

#define TFT_CS 10
#define TFT_DC 9
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

//Adafruit_GFX_Button buttons; 

void msgon()
{
  tft.fillRect(10,150,100,50, ILI9341_BLACK);
          tft.setCursor(10,150);
          tft.print("on");
}

void msgoff()
{
  tft.fillRect(10,150,100,50, ILI9341_BLACK);
          tft.setCursor(10,150);
          tft.print("off");
}




void setup() {
  // put your setup code here, to run once:
Serial.begin(9600);
 tft.begin();
  if (!ts.begin(40)) { 
    Serial.println("Unable to start touchscreen.");
  } 
  else { 
    Serial.println("Touchscreen started."); 
  }
tft.fillScreen(ILI9341_BLACK);
  // origin = left,top landscape (USB left upper)
  tft.setRotation(1); 

tft.fillRect(30,30,120,80,ILI9341_RED);
}

void loop() {
  // put your main code here, to run repeatedly:
 TS_Point p;
 p = ts.getPoint();
    p.x = map(p.x, 0, 240, 240, 0);
    p.y = map(p.y, 0, 320, 320, 0);
    int y = tft.height() - p.x;
    int x = p.y;

if (ts.touched()){
  if ((x >30) && (x < 130)) {
     if ((y > 30) && (y < 110)) {
        Serial.println("Hit");
        msgon();
      }
    }
  }
}
5

Your current arrangement:

//rotate the button map 90 deg to match screen
    p.x = map(p.x, 0, 240, 240, 0);    //maps 240..0
    p.y = map(p.y, 0, 320, 320, 0);    //maps 320..0
    int y = tft.height() - p.x;       //maps y as 0..240
    int x = p.y;       //maps x as 320..0

It looks as if your Touch Controller is connected in Portrait. And you want Landscape.

//assuming Calibration Values for LEFT, RT, ... in Portrait mode:
    int x = map(p.y, TS_TOP, TS_BOT, 0, tft.width());
    int y = map(p.x, TS_RT, TS_LEFT, 0, tft.height());

You do similar transformations for PORTRAIT_REV, LANDSCAPE_REV
Or if your Touch Controller was wired in Landscape mode and you wanted Portrait.

The GFX_Buttons will all work with the current screen rotation.

David.

6

David, thank you for your help.

It turns out, I was not understanding how to rotate the p.x, p.y mapping correctly. I was trying to do it internally in the map(px, 0,240,240,0); portion.

I had to make two changes to make it work correctly:

p.x = map(p.x, 0, 240, 240, 0);
p.y = map(p.y, 0, 320, 320, 0);
int y = tft.height() - p.x;
int x = p.y;

and

if (buttons.contains(x,y)) I was looking for buttons.contains(p.x,p.y)

7

Go on. Draw a rectangular Portrait on paper. Write LEFT, RIGHT, TOP, BOTTOM on each side.

Then cut out the rectangle and rotate it to Landscape, Portait_rev, Landscape_rev rotations.

This shows how to map the fixed Touch Panel correctly. Your method seems to get the wrong X value. Mind you, my head hurts when I try to follow your statements.

David.