Buttons generator like TFT_e_SPI

[TangerineDreamer]

Is there an implementation for this fonction:
TFT_eSPI_Button key[15];
To build a keypad with xbuttons.
I don't know how to write a wrapper with TFT_e_SPI ,if this possible,thanks to enlight me :)

[tobozo]

hi, thanks for your feedback 👍

Please try LGFX_Button.

You can use it as is, or eventually create a derivated class from that if you need to add extra methods:

class My_Button : public LGFX_Button {   
  public:     
    void setLabel( const char* label ) { strncpy(_label, label, 11); };     
    const char* getLabel() { return _label; };   
  private:    
    char _label[12]; // Button text is 11 chars maximum unless long_name used   
};

[TangerineDreamer]

Hi tobozo,
Thank you for your quick answering,
I'm not an expert in programmation,could you please guide me a little to fit the tft e_spi example of keypad:

//-------------------------------------------------------------------------------------
  
#include <SPI.h>
#include <TFT_eSPI.h>      // Hardware-specific library

TFT_eSPI tft = TFT_eSPI(); // Invoke custom library


// Keypad start position, key sizes and spacing
#define KEY_X 40 // Centre of key
#define KEY_Y 96
#define KEY_W 62 // Width and height
#define KEY_H 30
#define KEY_SPACING_X 18 // X and Y gap
#define KEY_SPACING_Y 20
#define KEY_TEXTSIZE 1   // Font size multiplier

// Using two fonts since numbers are nice when bold
#define LABEL1_FONT &FreeSansOblique12pt7b // Key label font 1
#define LABEL2_FONT &FreeSansBold12pt7b    // Key label font 2

// Numeric display box size and location
#define DISP_X 1
#define DISP_Y 10
#define DISP_W 238
#define DISP_H 50
#define DISP_TSIZE 3
#define DISP_TCOLOR TFT_CYAN

// Number length, buffer for storing it and character index
#define NUM_LEN 12
char numberBuffer[NUM_LEN + 1] = "";
uint8_t numberIndex = 0;

// We have a status line for messages
#define STATUS_X 120 // Centred on this
#define STATUS_Y 65

// Create 15 keys for the keypad
char keyLabel[15][5] = {"New", "Del", "Send", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "#" };
uint16_t keyColor[15] = {TFT_RED, TFT_DARKGREY, TFT_DARKGREEN,
                         TFT_BLUE, TFT_BLUE, TFT_BLUE,
                         TFT_BLUE, TFT_BLUE, TFT_BLUE,
                         TFT_BLUE, TFT_BLUE, TFT_BLUE,
                         TFT_BLUE, TFT_BLUE, TFT_BLUE
                        };

// Invoke the TFT_eSPI button class and create all the button objects
TFT_eSPI_Button key[15];

//------------------------------------------------------------------------------------------

void setup() {
  // Use serial port
  Serial.begin(9600);

  // Initialise the TFT screen
  tft.init();

  // Set the rotation before we calibrate
  tft.setRotation(1);

 
  // Clear the screen
  tft.fillScreen(TFT_BLACK);

  // Draw keypad background
  tft.fillRect(0, 0, 240, 320, TFT_DARKGREY);

  // Draw number display area and frame
  tft.fillRect(DISP_X, DISP_Y, DISP_W, DISP_H, TFT_BLACK);
  tft.drawRect(DISP_X, DISP_Y, DISP_W, DISP_H, TFT_WHITE);

  // Draw keypad
  drawKeypad();
}

//------------------------------------------------------------------------------------------

void loop(void) {
  uint16_t t_x = 0, t_y = 0; // To store the touch coordinates

  // Pressed will be set true is there is a valid touch on the screen
  bool pressed = tft.getTouch(&t_x, &t_y);

  // / Check if any key coordinate boxes contain the touch coordinates
  for (uint8_t b = 0; b < 15; b++) {
    if (pressed && key[b].contains(t_x, t_y)) {
      key[b].press(true);  // tell the button it is pressed
    } else {
      key[b].press(false);  // tell the button it is NOT pressed
    }
  }

  // Check if any key has changed state
  for (uint8_t b = 0; b < 15; b++) {

    if (b < 3) tft.setFreeFont(LABEL1_FONT);
    else tft.setFreeFont(LABEL2_FONT);

    if (key[b].justReleased()) key[b].drawButton();     // draw normal

    if (key[b].justPressed()) {
      key[b].drawButton(true);  // draw invert

      // if a numberpad button, append the relevant # to the numberBuffer
      if (b >= 3) {
        if (numberIndex < NUM_LEN) {
          numberBuffer[numberIndex] = keyLabel[b][0];
          numberIndex++;
          numberBuffer[numberIndex] = 0; // zero terminate
        }
        status(""); // Clear the old status
      }

      // Del button, so delete last char
      if (b == 1) {
        numberBuffer[numberIndex] = 0;
        if (numberIndex > 0) {
          numberIndex--;
          numberBuffer[numberIndex] = 0;//' ';
        }
        status(""); // Clear the old status
      }

      if (b == 2) {
        status("Sent value to serial port");
        Serial.println(numberBuffer);
      }
      // we dont really check that the text field makes sense
      // just try to call
      if (b == 0) {
        status("Value cleared");
        numberIndex = 0; // Reset index to 0
        numberBuffer[numberIndex] = 0; // Place null in buffer
      }

      // Update the number display field
      tft.setTextDatum(TL_DATUM);        // Use top left corner as text coord datum
      tft.setFreeFont(&FreeSans18pt7b);  // Choose a nicefont that fits box
      tft.setTextColor(DISP_TCOLOR);     // Set the font colour

      // Draw the string, the value returned is the width in pixels
      int xwidth = tft.drawString(numberBuffer, DISP_X + 4, DISP_Y + 12);

      // Now cover up the rest of the line up by drawing a black rectangle.  No flicker this way
      // but it will not work with italic or oblique fonts due to character overlap.
      tft.fillRect(DISP_X + 4 + xwidth, DISP_Y + 1, DISP_W - xwidth - 5, DISP_H - 2, TFT_BLACK);

      delay(10); // UI debouncing
    }
  }
}

//------------------------------------------------------------------------------------------

void drawKeypad()
{
  // Draw the keys
  for (uint8_t row = 0; row < 5; row++) {
    for (uint8_t col = 0; col < 3; col++) {
      uint8_t b = col + row * 3;

      if (b < 3) tft.setFreeFont(LABEL1_FONT);
      else tft.setFreeFont(LABEL2_FONT);

      key[b].initButton(&tft, KEY_X + col * (KEY_W + KEY_SPACING_X),
                        KEY_Y + row * (KEY_H + KEY_SPACING_Y), // x, y, w, h, outline, fill, text
                        KEY_W, KEY_H, TFT_WHITE, keyColor[b], TFT_WHITE,
                        keyLabel[b], KEY_TEXTSIZE);
      key[b].drawButton();
    }
  }
}

//------------------------------------------------------------------------------------------


//------------------------------------------------------------------------------------------

// Print something in the mini status bar
void status(const char *msg) {
  tft.setTextPadding(240);
  //tft.setCursor(STATUS_X, STATUS_Y);
  tft.setTextColor(TFT_WHITE, TFT_DARKGREY);
  tft.setTextFont(0);
  tft.setTextDatum(TC_DATUM);
  tft.setTextSize(1);
  tft.drawString(msg, STATUS_X, STATUS_Y);
}

//------------------------------------------------------------------------------------------

Thanks for your comprehension :)

[tobozo]

I assume you have successfully run the example sketches and have a valid display configuration for your build, so maybe start by replacing TFT_eSPI_Button with LGFX_Button and see what happens?

[TangerineDreamer]

yes,thank you for this clear explanation,i'm a little bit candid in programming,
i never thought this was so easy,i will try this ,have a nice day:)

[TangerineDreamer]

I have these error messages while compiling:

C:\Users\UTILIS~1\AppData\Local\Temp\arduino_modified_sketch_594741\BUTTONS_TESTS.ino: In function 'void drawKeypad()':
BUTTONS_TESTS:181:50: error: no matching function for call to 'lgfx::v1::LGFX_Button::initButton(LGFX*, int, int, int, int, int, uint16_t&, int, char [5], int)'
                         keyLabel[b], KEY_TEXTSIZE);
                                                  ^
In file included from C:\Users\Utilisateur\Documents\Arduino\libraries\LovyanGFX\src/lgfx/v1_init.hpp:27,
                 from C:\Users\Utilisateur\Documents\Arduino\libraries\LovyanGFX\src/LovyanGFX.hpp:31,
                 from C:\Users\UTILIS~1\AppData\Local\Temp\arduino_modified_sketch_594741\SC01_PLUS_CONFIG.h:2,
                 from C:\Users\UTILIS~1\AppData\Local\Temp\arduino_modified_sketch_594741\BUTTONS_TESTS.ino:2:
C:\Users\Utilisateur\Documents\Arduino\libraries\LovyanGFX\src/lgfx/v1/LGFX_Button.hpp:35:10: note: candidate: 'template<class T> void lgfx::v1::LGFX_Button::initButton(lgfx::v1::LovyanGFX*, int16_t, int16_t, uint16_t, uint16_t, const T&, const T&, const T&, const char*, float, float)'
     void initButton( LovyanGFX *gfx, int16_t x, int16_t y, uint16_t w, uint16_t h
          ^~~~~~~~~~
C:\Users\Utilisateur\Documents\Arduino\libraries\LovyanGFX\src/lgfx/v1/LGFX_Button.hpp:35:10: note:   template argument deduction/substitution failed:
C:\Users\UTILIS~1\AppData\Local\Temp\arduino_modified_sketch_594741\BUTTONS_TESTS.ino:181:50: note:   deduced conflicting types for parameter 'const T' ('int' and 'uint16_t' {aka 'short unsigned int'})
                         keyLabel[b], KEY_TEXTSIZE);

Edit: lines disappeared ,maybe it's because i copied only a small region and not the all debug page by using
the copy button in the debug area.

[tobozo]

I fixed the formatting in your post (edit it to see the differences) but I don't know why you get this error since I can't see what code caused it.

please have a look at this implementation example

[TangerineDreamer]

Good point,i got it working but have problem with the color definition,the color array declaration does not fit,should i use
uint_32t colors?
i picked up somewhere those colors definitions,what are they? 16 bits,32 bits?

#define TFT_BLACK   0x0000
#define TFT_GRAY    0x8410
#define TFT_WHITE   0xFFFF
#define TFT_RED     0xF800
#define TFT_ORANGE  0xFA60
#define TFT_YELLOW  0xFFE0  
#define TFT_LIME    0x07FF
#define TFT_GREEN   0x07E0
#define TFT_CYAN    0x07FF
#define TFT_AQUA    0x04FF
#define TFT_BLUE    0x001F
#define TFT_MAGENTA 0xF81F
#define TFT_PINK    0xF8FF

#define TFT_GREY 0x5AEB : 16 or 24 or 32 bits??

One other question,why using "int16_t" and not "uint16_t"?
here is the variation i wrote:

const char keyLabel[15][5] = {"New", "Del", "Send", "1", "2", "3", "4", "5", "6", "7", "8", "9", ".", "0", "#" };
and so on....

void drawKeypad()
{
  // Draw the keys
  for (uint8_t row = 0; row < 5; row++) {
    for (uint8_t col = 0; col < 3; col++) {
      uint8_t b = col + row * 3;

      if (b < 3) tft.setFreeFont(LABEL1_FONT);
      else tft.setFreeFont(LABEL2_FONT);

      key[b].initButton(&tft, KEY_X + col * (KEY_W + KEY_SPACING_X),
                        KEY_Y + row * (KEY_H + KEY_SPACING_Y), // x, y, w, h, outline, fill, text
                        KEY_W, KEY_H, TFT_WHITE,keyColor[b], TFT_WHITE,
                        keyLabel[b]);
      key[b].drawButton();
    }
  }
}

have problem with keyColor[b],for the moment i use TFT_BLUE
Edit : i put backticks as you asked

[tobozo]

https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks