TFT button class

Hello,
I"m new with the TFT touchscreens and I want to make a new interface to programm LED's with a touchscreen instead of IR.
I have a problem with my first Button... This is a simple ON/OFF switch. I want the button once pressed to change the background color and the text (Green/red and ON/OFF)
I first tried this first with the GFX ButtonClass, but I see no changes. I didn't find a function to do this in "Adafruit_GFX_Button Class Reference".
Then I tried to define the button myself, the switch works, but the screen lay-out is not changing. What I'm doing wrong?
Thanks for the advise
Jacques.

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h" 
#include "TouchScreen.h" // only when you want to use touch screen 
// #include "bitmap_mono.h" // when you want to display a bitmap image from library
// #include "bitmap_RGB.h" // when you want to display a bitmap image from library 
// #include "Fonts/FreeSans9pt7b.h"    // when you want other fonts
// #include "Fonts/FreeSans12pt7b.h" // when you want other fonts
// #include "Fonts/FreeSerif12pt7b.h" // when you want other fonts
// #include "FreeDefaultFonts.h" // when you want other fonts 
// #include "SPI.h"  // using sdcard for display bitmap image
// #include "SD.h"

#define BLACK   0x0000
#define NAVY 0x000F
#define DARKGREEN 0x03E0
#define DARKCYAN 0x03EF
#define MAROON 0x7800
#define PURPLE 0x780F
#define OLIVE 0x7BE0
#define LIGHTGREY 0xC618
#define DARKGREY 0x7BEF
#define BLUE 0x001F
#define GREEN 0x07E0
#define CYAN 0x07FF
#define RED 0xF800
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define ORANGE 0xFD20
#define GREENYELLOW 0xAFE5
#define PINK 0xF81F

#define PI 3.1415926535897932384626433832795

#define YP A3  // must be an analog pin, use "An" notation!
#define XM A2  // must be an analog pin, use "An" notation!
#define YM 9   // can be a digital pin
#define XP 8   // can be a digital pin

#define MINPRESSURE 200
#define MAXPRESSURE 1000

#define TS_MINX 900
#define TS_MAXX 100
#define TS_MINY 70
#define TS_MAXY 900

int pixel_x, pixel_y;     //Touch_getXY() updates global vars

// X en Y coordinaten hangen af van het scherm
// in te bekijken per scherm (normaal tussen 0 en 1023 in theorie)


boolean P_ON = false;

// Making TFT object
//used pins (int CS=A3, int RS=A2, int WR=A1, int RD=A0, int RST=A4)
MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);  
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300); // activeren touchmogelijkheid
Adafruit_GFX_Button on_Btn, off_Btn;

void OnOff(){
  tft.clear;
  if (P_ON == false) {
    Serial.println ("OK"); delay(1000);
    tft.fillRoundRect(10,290,50,20,2, GREEN);
    tft.setCursor(18,292);
    tft.setTextColor(BLACK);
    tft.setTextSize(2);
    tft.print("ON");
//    on_Btn.initButton(&tft,30, 300, 50, 30, BLACK, GREEN, BLACK, "OFF",2);
//    on_Btn.drawButton(false);
    Serial.print("LEDS on");
    P_ON = true;
  }
  else {
    tft.fillRoundRect(10,290,50,20,2, RED);
    tft.setCursor(17,292);
    tft.setTextColor(BLACK);
    tft.setTextSize(2);
    tft.print("OFF");
    P_ON = false;
//    on_Btn.initButton(&tft, 30, 300, 50, 30, BLACK, RED, BLACK, "ON", 2);  // x, y, w, h, outline, fill, text
//    on_Btn.drawButton(false);
    Serial.print("LEDs Off");
  }
}

void setup(){
 TSPoint p = ts.getPoint();
//  put your setup code here, to run once:
  Serial.begin(9600);
  uint16_t ID = tft.readID();
  tft.begin(ID);
// complementaire kleur if true  
  tft.invertDisplay(false);
  tft.setRotation(0);
  tft.width(); //int16_t width(void);
  tft.height(); //int16_t height(void); 
  Serial.println("Hoogte: ");
  Serial.println(tft.height());
  Serial.println("Breedte: ");
  Serial.print(tft.width());

//  uint16_t x =160, y =2;
 
  tft.fillScreen(WHITE);
  tft.fillRect(30, 2, 182, 22, BLACK);
  tft.setCursor(32,4);
  tft.setTextColor(WHITE);
  tft.setTextSize(2);
  tft.print("Programable LED");
  tft.fillRect(80, 40, 50,50, RED);

//  on_Btn.initButton(&tft, 30, 300, 50, 30, BLACK, RED, BLACK, "ON", 2);  // x, y, w, h, outline, fill, text
//  on_Btn.drawButton(false); werkt niet, je kan de Button niet wijzigen eenmaal initieerd
// dan maar zelf een knop maken:
  tft.fillRoundRect(10,290,50,20,2, RED);
  tft.setCursor(17,292);
  tft.setTextColor(BLACK);
  tft.setTextSize(2);
  tft.print("OFF");
  
//  p = ts.getPoint();
//  p.x = map(p.x, TS_MINX, TS_MAXX, 0, tft.width());
//  p.y = map(p.y, TS_MINY, TS_MAXY, 0, tft.height());
//  Serial.println(p.x);
//  Serial.println(p.y);
}

void loop() {
  TSPoint p = ts.getPoint();
  pinMode(XM, OUTPUT);
  pinMode(YP, OUTPUT);

  p = ts.getPoint();
  if (p.z > MINPRESSURE && p.z < MAXPRESSURE) {
    // scale from 0->1023 to tft.width
    p.x = map(p.x, TS_MINX, TS_MAXX, 0, tft.width());
    p.y = map(p.y, TS_MINY, TS_MAXY, 0, tft.height());
    Serial.println(p.x);
    Serial.println(p.y);
  }
  if ((p.x > 7 && p.x< 54) and (p.y >289 && p.y < 311)){ // on_Btn.contains(p.x, p.y)) {
      Serial.print("Pressing: "); delay(200);
//      on_Btn.press(true);  // tell the button it is pressed
//      on_Btn.initButton(&tft,30, 300, 50, 30, BLACK, GREEN, BLACK, "OFF",2);
//      on_Btn.drawButton(false);
      OnOff();
    } 
 //   else {
 //     on_Btn.press(false);  // tell the button it is NOT pressed
 //   }
/*  
  if (on_Btn.justReleased()) {
      Serial.print("Released: "); 
      on_Btn.drawButton();  // draw normal
  }
    
  if (on_Btn.justPressed()) {
     on_Btn.drawButton(true);  // draw invert! 
  }
  
*/

  
//     Commands();
}

I strongly recommend that you study the Button example in the MCUFRIEND_kbv examples.

If you have a problem with the example, ask.

If you have a problem with adapting the example for your project, ask.
Think first. Make one small change at a time.

Your code pasted in #0 has completely wrong structure. I suggest that you start again. e.g. from the example.

David.

Hello,
The only example I see is Button_simple, but gives no solution for my problem. I tested this already. If you have other examples, be my guest.
Greets
Jacques

I have other examples but they are a lot more complicated.

Which is why I strongly recommend that you start with Button_simple

From memory, this changes the colour of a rectangle and switches an LED on or off.
You can add buttons or change behaviour.

As I suggested earlier. Think about what you want to do. Draw a Flow Diagram. Test your design on paper.

Then you just translate your debugged FlowChart into program statements. When you have designed the logic blocks the "translation" into ASM, C, C++ language is pretty straightforward.

If you have a problem, just ask.

Unless you are Einstein, no project can be programmed straight from your head.
Pencil, paper and cups of tea are the reliable way to do it.

David.

Hello,
Found the solution. With he ButtonClass from MCU_friend en GFX changing a button is not possible apparently. I found the solution in following code: https://create.arduino.cc/projecthub/sid58_23/touch-screen-buttons-to-change-background-c79618 Just forgot to set pinmode to OUTPUT
this works perfectly now
Thanks
Jacques

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h" 
#include "TouchScreen.h" // only when you want to use touch screen 

#define BLACK   0x0000
#define NAVY 0x000F
#define DARKGREEN 0x03E0
#define DARKCYAN 0x03EF
#define MAROON 0x7800
#define PURPLE 0x780F
#define OLIVE 0x7BE0
#define LIGHTGREY 0xC618
#define DARKGREY 0x7BEF
#define BLUE 0x001F
#define GREEN 0x07E0
#define CYAN 0x07FF
#define RED 0xF800
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define ORANGE 0xFD20
#define GREENYELLOW 0xAFE5
#define PINK 0xF81F

#define PI 3.1415926535897932384626433832795

#define YP A3  // must be an analog pin, use "An" notation!
#define XM A2  // must be an analog pin, use "An" notation!
#define YM 9   // can be a digital pin
#define XP 8   // can be a digital pin

#define MINPRESSURE 200
#define MAXPRESSURE 1000

#define TS_MINX 900
#define TS_MAXX 100
#define TS_MINY 70
#define TS_MAXY 900

int pixel_x, pixel_y;     //Touch_getXY() updates global vars
boolean P_ON = false;

// Making TFT object
MCUFRIEND_kbv tft(A3, A2, A1, A0, A4);  
TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300); // activeren touchmogelijkheid

void OnOff(){

  if (P_ON == false) {
    pinMode(XM, OUTPUT);
    pinMode(YP, OUTPUT);
    tft.fillRoundRect(10,290,50,20,2, GREEN);
    tft.drawRoundRect(10,290,50,20,2,BLACK);
    tft.setCursor(18,292);
    tft.setTextColor(BLACK);
    tft.setTextSize(2);
    tft.print("ON");
    Serial.print("LEDS on");
    P_ON = true;
  }
  else {
    pinMode(XM, OUTPUT);
    pinMode(YP, OUTPUT);
    tft.fillRoundRect(10,290,50,20,2, RED);
    tft.drawRoundRect(10,290,50,20,2,BLACK);
    tft.setCursor(17,292);
    tft.setTextColor(BLACK);
    tft.setTextSize(2);
    tft.print("OFF");
    P_ON = false;
    Serial.print("LEDs Off");
  }
}

void setup(){
 TSPoint p = ts.getPoint();
//  put your setup code here, to run once:
  Serial.begin(9600);
  uint16_t ID = tft.readID();
  tft.begin(ID);
  tft.setRotation(0);
  tft.width(); 
  tft.height(); 
  Serial.println("Hoogte: ");
  Serial.println(tft.height());
  Serial.println("Breedte: ");
  Serial.print(tft.width());

  tft.fillScreen(WHITE);
  tft.fillRect(30, 2, 182, 22, BLACK);
  tft.setCursor(32,4);
  tft.setTextColor(WHITE);
  tft.setTextSize(2);
  tft.print("Programable LED");
  tft.fillRect(80, 40, 50,50, RED);

  tft.fillRoundRect(10,290,50,20,2, RED);
  tft.drawRoundRect(10,290,50,20,2,BLACK);
  tft.setCursor(17,292);
  tft.setTextColor(BLACK);
  tft.setTextSize(2);
  tft.print("OFF");
}

void loop() {
  TSPoint p = ts.getPoint();
  p = ts.getPoint();
  if (p.z > MINPRESSURE && p.z < MAXPRESSURE) {
    p.x = map(p.x, TS_MINX, TS_MAXX, 0, tft.width());
    p.y = map(p.y, TS_MINY, TS_MAXY, 0, tft.height());
    Serial.println(p.x);
    Serial.println(p.y);
  }
  if ((p.x > 7 && p.x< 54) and (p.y >289 && p.y < 311)){ 
     OnOff();
    } 
}

I give up. The Internet link is nicely presented. But does not really seem to understand the logic.

Your version is considerably worse.

If you want assistance I can help you. But only if you are prepared to follow.

David.

I don't understand you. You keep saying that my codeis a mess. But whe I'm asking if the ButtonClass can change colors and text I get no answer and you say that i need to examine de Simple Button example.... This is not a help, sorry... I did this, If you read the GFX reference you will see that there is no function to do this...
I want a single button who can switch ON/OFF at the same place with some other underlaying functionalities Maybe you have the solution, but you don't want to share it.
I found a solution who is working, and i'm happy with it. If it is not your style of programming so be it.
So please send positive answers in stead of such remarks. I want to learn. I was used to programm in Delphi before I retired.
Jacques

Yes, I see what you are doing.

There are several statements that are unwise or just mis-placed.

Adafruit_GFX_Button can change the colour of a button by calling initButton() with your new colours and then redrawing it with drawButton()

Normally it expects you to have a fixed colour which it will invert if you call drawButton(true)

Personally, I think that the Adafruit_GFX_Button methods work pretty well.
But you can do anything that you like. It is your project.

Your program is very "touchy". When there is a single button it is going to "bounce". I have to jab quickly to get a single ON or a single OFF.

I presume that people come to the Forum to ask questions. I don't expect anyone to listen to my advice. If I know that my replies are not wanted, I will not waste any more time.

David.

This topic was automatically closed after 120 days. New replies are no longer allowed.