Touchscreen issues with drawbuttons

Something is wierd here... I can draw rect and fillrect all I want and it works great and follows what I expect in locating the start size all works well.

BUT! If I try to draw and position a button using touchscreen.h or touchscreen_kbv.h with mcufriend_kbv.

tft.drawButton() and tft.initButton(&tft, 64, 107, 117, 90, BLUE, GREEN, BLACK, "", 1) well that button is in my upper left corner at what I would line up as 5, 5 with drawRect...

I also noticed that if my button is more then 115, then my first position of that button moves as my button is getting larger!

In this example the M5 button is on my left side about 3/4 of the way down my screen, while my Select_btn is full width of my screen starting at same distance from the left side as M5 (which is about 5 pixel (note the value of 64!)) but for the large button to be position just under that same value is now 239! WTF!

m5_btn.initButton(&tft, 64, 200, 117, 90, BLUE, GREEN, BLACK, "", 1);
Select_btn.initButton(&tft, 239, 281, 472, 70, BLUE, GREEN, BLACK, "", 1);

Not very good at this, thry not to laugth too mutch :stuck_out_tongue:

Richard

#define PORTRAIT  0
#define LANDSCAPE 1
#define TOUCH_ORIENTATION  LANDSCAPE
#include <Adafruit_GFX.h>
#include <MCUFRIEND_kbv.h>
MCUFRIEND_kbv tft;
#include "TouchScreen_kbv.h"         //my hacked version

//---------------------------------------------------------------------------
// defining fonts to be used in app

#include <fonts/FreeSerif9pt7b.h>
#include <fonts/FreeSerif12pt7b.h>
#include <fonts/FreeSerif18pt7b.h>
#include <fonts/FreeSerif24pt7b.h>
#include <fonts/FreeSerifBold9pt7b.h>
#include <fonts/FreeSerifBold12pt7b.h>
#include <fonts/FreeSerifBold18pt7b.h>
#include <fonts/FreeSerifBold24pt7b.h>

//---------------------------------------------------------------------------
// defining colors

#define BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

//---------------------------------------------------------------------------
// Defining the touch screen parameters

int XP = 9, XM = A3, YP = A2, YM = 8; //240x320 ID=0x9338
const int TS_LEFT = 130, TS_RT = 905, TS_TOP = 930, TS_BOT = 75;

TouchScreen_kbv ts(XP, YP, XM, YM, 300);   //re-initialised after diagnose
TSPoint_kbv tp;                            //global point
#define MINPRESSURE 250   // this is where we define the minimum pressure on the touch screen
#define MAXPRESSURE 1000  // this is where we define the maximum pressure on the touch screen

Adafruit_GFX_Button m1_btn, m2_btn, m3_btn, m4_btn, m5_btn, m6_btn, m7_btn, m8_btn, Select_btn, Setup_btn, Radio1_btn, Radio2_btn; //
int pixel_x, pixel_y;     //Touch_getXY() updates global vars

bool Touch_getXY(void)
{
  TSPoint_kbv p = ts.getPoint();
  pinMode(YP, OUTPUT);      //restore shared pins
  pinMode(XM, OUTPUT);
  digitalWrite(YP, HIGH);   //because TFT control pins
  digitalWrite(XM, HIGH);
  bool pressed = (p.z > MINPRESSURE && p.z < MAXPRESSURE);
  if (pressed) {
    switch (tft.getRotation()) {
      case 0:    //PORTRAIT
        pixel_x = map(p.x, TS_LEFT, TS_RT, 0, tft.width());
        pixel_y = map(p.y, TS_TOP, TS_BOT, 0, tft.height());
        break;
      case 1:   //LANDSCAPE
        pixel_x = map(p.y, TS_TOP, TS_BOT, 0, tft.width());
        pixel_y = map(p.x, TS_RT, TS_LEFT, 0, tft.height());
        break;
    }
  }
  return pressed;
}





void drawmybuttons() {
  tft.setCursor(1, 1);
  if (numberButtons == 8) {
    m1_btn.initButton(&tft, 64, 107, 117, 90, BLUE, GREEN, BLACK,  "", 1);
    m1_btn.drawButton();
    m2_btn.initButton(&tft, 183, 107, 117, 90, BLUE, GREEN, BLACK,  "", 1);
    m2_btn.drawButton();
    m3_btn.initButton(&tft, 301, 107, 117, 90, BLUE, GREEN, BLACK,  "", 1);
    m3_btn.drawButton();
    m4_btn.initButton(&tft, 419, 107, 117, 90, BLUE, GREEN, BLACK,  "", 1);
    m4_btn.drawButton();
  } else {
    m1_btn.initButton(&tft, 0, 0, 0, 0, BLACK, BLACK, BLACK,  "", 0);
    m2_btn.initButton(&tft, 0, 0, 0, 0, BLACK, BLACK, BLACK,  "", 0);
    m3_btn.initButton(&tft, 0, 0, 0, 0, BLACK, BLACK, BLACK,  "", 0);
    m4_btn.initButton(&tft, 0, 0, 0, 0, BLACK, BLACK, BLACK,  "", 0);
  }
  m5_btn.initButton(&tft, 64, 200, 117, 90, BLUE, GREEN, BLACK,  "", 1);
  m5_btn.drawButton();
  m6_btn.initButton(&tft, 183, 200, 117, 90, BLUE, GREEN, BLACK,  "", 1);
  m6_btn.drawButton();
  m7_btn.initButton(&tft, 301, 200, 117, 90, BLUE, GREEN, BLACK,  "", 1);
  m7_btn.drawButton();
  m8_btn.initButton(&tft, 419, 200, 117, 90, BLUE, GREEN, BLACK,  "", 1);
  m8_btn.drawButton();
  Select_btn.initButton(&tft, 239, 281, 472, 70, BLUE, GREEN, BLACK,  "", 1);
  Select_btn.drawButton();
}

Post your complete "buildable" sketch.

Your Calibration lines suggest that you have an ILI9338 controller for a 240x320 screen. (PORTRAIT)

There is no point in trying to draw a button @ (419,200) on a 320x240 (LANDSCAPE)

David.

Ya left over comments from older test using 2.8inch screens that worked great!

this screen is 9486 3.5inch screen...

I was also having some issues with other buttons or wrong buttons being triggered when button is pushed, tougth it was calibration check all ok then checked out minpressur assuming it was to touchy... check all ok also...

with this test situation got worse, with same setting...

What am I doing wrong!!!

help!

signed Richard going mad! :stuck_out_tongue:

#define PORTRAIT  0
#define LANDSCAPE 1
#define TOUCH_ORIENTATION  LANDSCAPE
#include <Adafruit_GFX.h>
#include <MCUFRIEND_kbv.h>
MCUFRIEND_kbv tft;
#include "TouchScreen_kbv.h"         //my hacked version
#include <SoftwareSerial.h> // for comms to radio1s
#define BAUD_RATE 9600     // CI-V speed BY DEFAULT IS 9600
#define TRX_address (0x94)  // HEX $94 = Icom IC-7300 BY DEFAULT
#define CMD1C (0x1c)
#include <fonts/FreeSerif9pt7b.h>
#include <fonts/FreeSerif12pt7b.h>
#include <fonts/FreeSerif18pt7b.h>
#include <fonts/FreeSerif24pt7b.h>
#include <fonts/FreeSerifBold9pt7b.h>
#include <fonts/FreeSerifBold12pt7b.h>
#include <fonts/FreeSerifBold18pt7b.h>
#include <fonts/FreeSerifBold24pt7b.h>
#define BLACK   0x0000
#define BLUE    0x001F
#define RED     0xF800
#define GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF
int XP = 9, XM = A3, YP = A2, YM = 8;
const int TS_LEFT = 130, TS_RT = 905, TS_TOP = 930, TS_BOT = 75;
TouchScreen_kbv ts(XP, YP, XM, YM, 300);   //re-initialised after diagnose
TSPoint_kbv tp;                            //global point
#define MINPRESSURE 200   // this is where we define the minimum pressure on the touch screen
#define MAXPRESSURE 1000  // this is where we define the maximum pressure on the touch screen
Adafruit_GFX_Button m1_btn, m2_btn, m3_btn, m4_btn, m5_btn, m6_btn, m7_btn, m8_btn, Select_btn, Setup_btn, Radio1_btn, Radio2_btn; //
int pixel_x, pixel_y;     //Touch_getXY() updates global vars
bool Touch_getXY(void)
{
  TSPoint_kbv p = ts.getPoint();
  pinMode(YP, OUTPUT);      //restore shared pins
  pinMode(XM, OUTPUT);
  digitalWrite(YP, HIGH);   //because TFT control pins
  digitalWrite(XM, HIGH);
  bool pressed = (p.z > MINPRESSURE && p.z < MAXPRESSURE);
  if (pressed) {
    switch (tft.getRotation()) {
      case 0:    //PORTRAIT
        pixel_x = map(p.x, TS_LEFT, TS_RT, 0, tft.width());
        pixel_y = map(p.y, TS_TOP, TS_BOT, 0, tft.height());
        break;
      case 1:   //LANDSCAPE
        pixel_x = map(p.y, TS_TOP, TS_BOT, 0, tft.width());
        pixel_y = map(p.x, TS_RT, TS_LEFT, 0, tft.height());
        break;
    }
  }
  return pressed;
}
char CallSign[7] = "test";
const char  btn_Setup; // needs definition
char  btn_Setup2[7]; // needs definition
int  app_setup; // needs definition
String  btn_Select[8]; // needs definition
int numberButtons = 8;
char  m1[8]; // needs definition
char  m2[8]; // needs definition
char  m3[8]; // needs definition
char  m4[8]; // needs definition
char  m5[8]; // needs definition
char  m6[8]; // needs definition
char  m7[8]; // needs definition
char  m8[8]; // needs definition
int ID;
void setup()
{
  bool ret = true;
  tft.reset();  // do a reset
  uint16_t id = tft.readID();  // identify the type of display
  tft.begin(id);
  app_setup = 0;
  tft.setRotation(1);
  Serial.begin(9600);
  Serial.println("Lets get started! 73 de Richard VE2DX");
  Serial.print("TFT ID = 0x");
  Serial.println(ID, HEX);
  tft.fillScreen(BLACK);
  tft.setTextColor(WHITE, BLACK);
  mainScreen();
}
Adafruit_GFX_Button *buttons[] = {&m1_btn, &m4_btn, &m2_btn, &m3_btn, &m5_btn, &m6_btn, &m7_btn, &m8_btn, &Select_btn, NULL};
bool update_button(Adafruit_GFX_Button * b, bool down)
{
  b->press(down && b->contains(pixel_x, pixel_y));
  if (b->justReleased())
    b->drawButton(false);
  if (b->justPressed())
    b->drawButton(true);
  return down;
}
bool update_button_list(Adafruit_GFX_Button **pb)
{
  bool down = Touch_getXY();
  for (int i = 0 ; pb[i] != NULL; i++) {
    update_button(pb[i], down);
  }
  return down;
}
void drawdoubleframe() {
  tft.fillScreen(BLACK);  // clear the screen
  tft.setTextColor(WHITE, BLACK);  // set text color as white on black background
  tft.fillRect(1, 1, 480, 3 , BLUE); tft.fillRect(1, 317, 480, 3, BLUE); tft.fillRect(1, 1, 3, 317, BLUE); tft.fillRect(477, 1, 3, 317 , BLUE);// draw a series of blue lines along the edge
  tft.fillRect(1, 60, 477, 3 , BLUE);     // draw smaller set of lines for the header
}
void mainScreen() {
  const char btn_Setup = "test";
  drawTop();
  drawBottom();
  app_setup = 0;
  String m1 = String("1"); String m2 = String ("2"); String m3 = String ("3"); String m4 = String ("4"); String m5 = String ("5");
  String m6 = String ("6"); String m7 = String("7"); String m8 = String ("8"); String btn_Select = String("9");
  drawmybuttons();
  textmybuttons(m1, m2, m3, m4, m5, m6, m7, m8, btn_Select);
}
void drawTop() {
  drawdoubleframe();
  Setup_btn.initButton(&tft, 75, 30, 140, 45, BLUE, RED, GREEN, "", 1);
  Setup_btn.drawButton(); // draw the button
  Radio1_btn.initButton(&tft, 200, 30, 90, 45, BLUE, RED, GREEN, "", 1);
  Radio1_btn.drawButton(); // draw the button
  Radio2_btn.initButton(&tft, 305, 30, 90, 45, BLUE, RED, GREEN, "", 1);
  Radio2_btn.drawButton(); // draw the button
  tft.setTextColor(WHITE, BLACK);  // set text color as white on black background
  tft.setFont(&FreeSerifBold18pt7b);
  tft.setTextSize(1);
  tft.setCursor(360, 40); // move to the right side of the header
  tft.print("test");    // please dont change this :(
  tft.setCursor(10, 40);
  tft.print(CallSign);
}
void drawBottom() {
  tft.setFont(&FreeSerifBold18pt7b);
  tft.setCursor(168, 40);  // move to the center of the Header
  tft.setTextColor(BLACK, RED );
  tft.fillRect(158, 18, 80, 22, RED);
  tft.print("test");
  tft.setCursor(269, 40);  // move to the center of the Header
  tft.setTextColor(BLACK, GREEN);
  tft.fillRect(265, 18, 80, 22, GREEN);
  tft.print("test");
  tft.fillRect(5, 65, 470, 90, BLACK);
}

void drawmybuttons() {
  tft.setCursor(1, 1);
    m1_btn.initButton(&tft, 64, 107, 117, 90, BLUE, GREEN, BLACK,  "", 1);
    m1_btn.drawButton();
    m2_btn.initButton(&tft, 183, 107, 117, 90, BLUE, GREEN, BLACK,  "", 1);
    m2_btn.drawButton();
    m3_btn.initButton(&tft, 301, 107, 117, 90, BLUE, GREEN, BLACK,  "", 1);
    m3_btn.drawButton();
    m4_btn.initButton(&tft, 419, 107, 117, 90, BLUE, GREEN, BLACK,  "", 1);
    m4_btn.drawButton();
  m5_btn.initButton(&tft, 64, 200, 117, 90, BLUE, GREEN, BLACK,  "", 1);
  m5_btn.drawButton();
  m6_btn.initButton(&tft, 183, 200, 117, 90, BLUE, GREEN, BLACK,  "", 1);
  m6_btn.drawButton();
  m7_btn.initButton(&tft, 301, 200, 117, 90, BLUE, GREEN, BLACK,  "", 1);
  m7_btn.drawButton();
  m8_btn.initButton(&tft, 419, 200, 117, 90, BLUE, GREEN, BLACK,  "", 1);
  m8_btn.drawButton();
  Select_btn.initButton(&tft, 239, 281, 472, 70, BLUE, GREEN, BLACK,  "", 1);
  Select_btn.drawButton();
}

void textmybuttons(String m1, String m2, String m3, String m4, String m5, String m6, String m7, String m8, String btn_Select) {
  delay(250);
    tft.setTextSize(1);
    tft.setFont(&FreeSerifBold18pt7b);
    tft.setTextColor(BLACK, GREEN);
    tft.setCursor(15, 115); tft.print(m1);
    tft.setCursor(145, 115); tft.print(m2);
    tft.setCursor(260, 115); tft.print(m3);
    tft.setCursor(375, 115); tft.print(m4);
  tft.setTextColor(BLACK, GREEN);
  tft.setCursor(15, 210); tft.print(m5);
  tft.setCursor(145, 210); tft.print(m6);
  tft.setCursor(260, 210); tft.print(m7);
  tft.setCursor(375, 210); tft.print(m8);
  tft.setFont(&FreeSerifBold24pt7b);
  tft.setTextColor(BLACK, RED);
  tft.setCursor(180, 300); tft.print(btn_Select);
  tft.setTextColor(WHITE, BLACK); // set text color as white on black background
}

void loop()
{
  update_button_list(buttons);
}

Thanks for the code. I tried it on a 320x480 Shield.

Some buttons work. Random things happen !!

I will have a look tomorrow.

David.

@ve2dx

Other post/duplicate DELETED
Please do NOT cross post / duplicate as it wastes peoples time and efforts to have more than one post for a single topic.
Continued cross posting could result in a time out from the forum.

Could you take a few moments to Learn How To Use The Forum.
It will help you get the best out of the forum in the future.
Other general help and troubleshooting advice can be found here.

Thanks David

ok.... talk about freeking out, here is an interresting fact... if I hit 2 6 is triggered, 3 triggers 3, 7 triggers 3 and 6 triggers 7, they are liked out of aligment, these for a square in the center of the screen...

loosing it...

Richard

ok found the problems my pins were reversed... touch screen is still too sensible, that is mfg issue

It is Touchscreen_kbv that is giving random results.
I suggest that you use regular library <TouchScreen.h>

Do you want to use attractive FreeFonts on your buttons?

drawButton() assumes 7x5 font and draws from topline. FreeFonts are drawn from baseline.
So the button labels get printed in the wrong place.

A small mod to Adafruit_GFX library code can solve this.

I will write and test the Adafruit_GFX mod if you are interested.

David.

Yes please

TY

Please try this change to Adafruit_GFX.cpp

void Adafruit_GFX_Button::drawButton(boolean inverted) {
  uint16_t fill, outline, text;

  if (!inverted) {
    fill = _fillcolor;
    outline = _outlinecolor;
    text = _textcolor;
  } else {
    fill = _textcolor;
    outline = _outlinecolor;
    text = _fillcolor;
  }

  uint8_t r = min(_w, _h) / 4; // Corner radius
  _gfx->fillRoundRect(_x1, _y1, _w, _h, r, fill);
  _gfx->drawRoundRect(_x1, _y1, _w, _h, r, outline);
#if 1
  if (_textsize_x == 0) { //use current font in size=1
      int16_t x1, y1;
      uint16_t w, h;
      _gfx->setTextSize(1, 1); //always in size=1
      _gfx->getTextBounds(_label, 0, 0, &x1, &y1, &w, &h);
      _gfx->setCursor(_x1 + (_w / 2) - x1 - w/2,
                      _y1 + (_h / 2) + h/2);
  } else {
      _gfx->setFont(NULL); //always use 7x5 font
      _gfx->setCursor(_x1 + (_w / 2) - (strlen(_label) * 3 * _textsize_x),
                      _y1 + (_h / 2) - (4 * _textsize_y));
      _gfx->setTextSize(_textsize_x, _textsize_y);
  }
  _gfx->setTextColor(text);
#else
  _gfx->setCursor(_x1 + (_w / 2) - (strlen(_label) * 3 * _textsize_x),
                  _y1 + (_h / 2) - (4 * _textsize_y));
  _gfx->setTextColor(text);
  _gfx->setTextSize(_textsize_x, _textsize_y);
#endif
  _gfx->print(_label);
}

Restore to old behaviour with #if 0

I have made serious changes to your sketch e.g.

  1. use <TouchScreen.h>
  2. copy-paste my Touch calibration lines
  3. removed all String statements. (they make my head hurt)
  4. used separate button lists
  5. add draw_button_list() function
  6. simplified drawdoubleframe()
  7. rearranged the initButton() statements for labels and sizes
  8. simplified drawmybuttons()
  9. simplified loop()
  10. a delay(50) in loop() will still give a crisp response

Please accept my apologies if the functionality has changed.
I am just trying to show that lists make life easier.

I have used smaller fonts because my Uno has not got much SRAM.
A specific BIG digit-only font would suit your app.

David.

ve2dx_buttons.ino (6.42 KB)

WOW! David, thank you this will help me a lot!

one more question if I may, I am storing text data in EEPROM and running a routine (void blabla(){) to read it byte by byte and reassemble it...

inside the routine it works fine, but then when the routine ends the data is reseted to NOTHING everytime...

tried the return and same result, so at this time I am repeating my code in the main loop, liked not to do so and use routine instead, what do you think...

  a= 1;
  while (a> 0) {
    d= 89 + a;
    c= char(EEPROM.read(d));
    b= b+= c;
    a= a+ 1;
    if (a== 7) {
      a= 0;
    }
  }

again please dont laugth!

many many thanks

I have no idea what you are trying to do.

I am guessing that it is reading 7 characters from EEPROM locations 89..95 and adding them together in b.

I don't know what b is. Nor do I know what you do with it.

Please paste the whole function.

Ah-ha. Looking at your other code: every function is void.

void is the work of the Devil.

David.