TFT Button Displaying Extra Characters

Hello,

I’m just getting used to using a TFT display, and I’m just trying to create a simple screen with one functional button on it. I’ve managed to create said button, and it appears to be responsive but it is displaying some extra characters, specifically it is showing “āW”.

I’m not sure what is causing it though. It should just be showing “NEXT” inside the button.

Does anyone have any ideas what is causing this?

Thank you

// TFT Driver is 0x9486
#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_TFTLCD.h> // Hardware-specific library
#include <TouchScreen.h>
#include <MCUFRIEND_kbv.h>

// The control pins for the LCD can be assigned to any digital or
// analog pins...but we'll use the analog pins as this allows us to
// double up the pins with the touch screen (see the TFT paint example).
#define LCD_CS A3 // Chip Select goes to Analog 3
#define LCD_CD A2 // Command/Data goes to Analog 2
#define LCD_WR A1 // LCD Write goes to Analog 1
#define LCD_RD A0 // LCD Read goes to Analog 0

#define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin

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

// Color definitions
#define ILI9341_BLACK       0x0000      /*   0,   0,   0 */
#define ILI9341_NAVY        0x000F      /*   0,   0, 128 */
#define ILI9341_DARKGREEN   0x03E0      /*   0, 128,   0 */
#define ILI9341_DARKCYAN    0x03EF      /*   0, 128, 128 */
#define ILI9341_MAROON      0x7800      /* 128,   0,   0 */
#define ILI9341_PURPLE      0x780F      /* 128,   0, 128 */
#define ILI9341_OLIVE       0x7BE0      /* 128, 128,   0 */
#define ILI9341_LIGHTGREY   0xC618      /* 192, 192, 192 */
#define ILI9341_DARKGREY    0x7BEF      /* 128, 128, 128 */
#define ILI9341_BLUE        0x001F      /*   0,   0, 255 */
#define ILI9341_GREEN       0x07E0      /*   0, 255,   0 */
#define ILI9341_CYAN        0x07FF      /*   0, 255, 255 */
#define ILI9341_RED         0xF800      /* 255,   0,   0 */
#define ILI9341_MAGENTA     0xF81F      /* 255,   0, 255 */
#define ILI9341_YELLOW      0xFFE0      /* 255, 255,   0 */
#define ILI9341_WHITE       0xFFFF      /* 255, 255, 255 */
#define ILI9341_ORANGE      0xFD20      /* 255, 165,   0 */
#define ILI9341_GREENYELLOW 0xAFE5      /* 173, 255,  47 */
#define ILI9341_PINK        0xF81F

#define BUTTON_X 52
#define BUTTON_Y 150
#define BUTTON_W 80
#define BUTTON_H 45
#define BUTTON_SPACING_X 26
#define BUTTON_SPACING_Y 30
#define BUTTON_TEXTSIZE 3

// text box where numbers go
#define TEXT_X 10
#define TEXT_Y 10
#define TEXT_W 300
#define TEXT_H 50
#define TEXT_TSIZE 3
#define TEXT_TCOLOR WHITE

#define TEXT_LEN 16
char textfield[TEXT_LEN + 1] = "";
uint8_t textfield_i = 0;

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

#define TS_MINX 130
#define TS_MAXX 905

#define TS_MINY 75
#define TS_MAXY 930
// We have a status line for like, is FONA working
#define STATUS_X 10
#define STATUS_Y 65

#define MINPRESSURE 10
#define MAXPRESSURE 1000

Adafruit_GFX_Button buttons [1];
char buttonText [1][4] = {"NEXT"};
uint16_t buttonColor [1] = {RED};

MCUFRIEND_kbv tft;
Adafruit_GFX_Button myButton;

TouchScreen ts = TouchScreen(XP, YP, XM, YM, 300);

void setup() {
  Serial.begin(9600);
  tft.reset();
  uint16_t identifier = tft.readID();
  tft.begin(identifier);
  tft.setRotation(45);
  tft.fillScreen(BLACK);

  /*void initButton(Adafruit_GFX *gfx, int16_t x, int16_t y,
            uint8_t w, uint8_t h,
            uint16_t outline, uint16_t fill, uint16_t textcolor,
            char *label, uint8_t textsize);*/
  buttons[0].initButton(&tft, 240, 160, BUTTON_W, BUTTON_H, ILI9341_WHITE, buttonColor[0], ILI9341_LIGHTGREY,
                        buttonText[0], 3);
  buttons[0].drawButton();

}

void status(const __FlashStringHelper *msg) {
  tft.fillRect(STATUS_X, STATUS_Y, 240, 8, ILI9341_BLUE);
  tft.setCursor(STATUS_X, STATUS_Y);
  tft.setTextColor(ILI9341_WHITE);
  tft.setTextSize(1);
  tft.print(msg);
}
// or charstring
void status(char *msg) {
  tft.fillRect(STATUS_X, STATUS_Y, 240, 8, ILI9341_BLUE);
  tft.setCursor(STATUS_X, STATUS_Y);
  tft.setTextColor(ILI9341_WHITE);
  tft.setTextSize(1);
  tft.print(msg);
}

void loop() {
  /*TSPoint p;
    p = ts.getPoint();
  */
  digitalWrite(13, HIGH);
  TSPoint p = ts.getPoint();
  digitalWrite(13, LOW);

  // if sharing pins, you'll need to fix the directions of the touchscreen pins
  pinMode(XM, OUTPUT);
  pinMode(YP, OUTPUT);

  // we have some minimum pressure we consider 'valid'
  // pressure of 0 means no pressing!

  // p = ts.getPoint();
  /*
    if (ts.bufferSize()) {

    } else {
    // this is our way of tracking touch 'release'!
    p.x = p.y = p.z = -1;
    }*/

  // Scale from ~0->4000 to tft.width using the calibration #'s
  /*
    if (p.z != -1) {
    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.print("("); Serial.print(p.x); Serial.print(", ");
    Serial.print(p.y); Serial.print(", ");
    Serial.print(p.z); Serial.println(") ");
    }*/
  if (p.z > MINPRESSURE && p.z < MAXPRESSURE) {
    p.x = p.x + p.y;
    p.y = p.x - p.y;
    p.x = p.x - p.y;
    p.x = map(p.x, TS_MINX, TS_MAXX, tft.width(), 0);
    p.y = tft.height() - (map(p.y, TS_MINY, TS_MAXY, tft.height(), 0));
  }



  // go thru all the buttons, checking if they were pressed
      if ((buttons[0].contains(p.x, p.y)) && p.x > 10) {
        buttons[0].press(true);  // tell the button it is pressed
      }
      else {
        buttons[0].press(false);  // tell the button it is NOT pressed
      }

  // now we can ask the buttons if their state has changed
  for (uint8_t b = 0; b < 1; b++) {
    if (buttons[0].justReleased()) {
      Serial.print("X"); Serial.println(b);
      buttons[0].drawButton();  // draw normal
    }

    if (buttons[0].isPressed()) {
      buttons[0].drawButton(true);  // draw invert!


      // update the current text field
      Serial.println(textfield);
      tft.setCursor(TEXT_X + 2, TEXT_Y + 10);
      tft.setTextColor(TEXT_TCOLOR, ILI9341_BLACK);
      tft.setTextSize(TEXT_TSIZE);
      tft.print(textfield);

     

      delay(100); // UI debouncing
    }
  }

}

If you ever see "garbage" characters, it generally means a char array without a NUL terminator.

char buttonText [1][4] = {"NEXT"};

This is perfectly legal C++ code. "NEXT" has four char. You allow space for the 4 chars but not for the NUL.

I assume that you intend to have an array of Button structs. And you are allocating memory for each one

Quite honestly, initButton() tends to be called once in setup() and never changed. So you might just as well say:

  buttons[0].initButton(&tft, 240, 160, BUTTON_W, BUTTON_H, ILI9341_WHITE, ILI9341_RED, ILI9341_LIGHTGREY, "NEXT", 3);

You are not using Adafruit_TFTLCD class. So comment out the #include line
Note that MCUFRIEND_kbv comes with "known" colours like TFT_RED
I also suggest that you use const int TS_LEFT style instead of #define TS_MINX

Look at the MCUFRIEND_kbv examples.

David.