Text deleted by backspace is not being updated on my arduino tft display (adafruit gfx library)

Question

For university, we need to make a game in Unity that is controlled with an Arduino. My idea was a hacking game where the Arduino acts as the 'hacking device' when hacking something in the game. The arduino would have a screen and on that screen would be a basic command-line interface that lets me input simple commands to 'hack' but I've been having trouble regarding text and clearing it.

I've been able to use unity to send typed characters to the display as-well as a backspace function (pressing backspace would remove last character in the string)

I first had issue with clearing all the text when writing (calling tft.print doesn't clear any previous text). I was using fillScreen which was slow. I found out setTextColor had a second argument that let me just set all certain colored text to a different color. Setting it to black would essentially clear it.

This made it update pretty much instantly when writing to the screen but I now had a new issue, backspace would no longer would.

My understand is that when removing the character, it's color won't be updated when calling setTextColor leaving it on the screen until a restart/fillScreen is called.

I'm not really sure how to solve this and all google searches turn up little to no help.

Here's my code for updating the text:

void updateString(char c){
  tft.setTextColor(WHITE,BLACK);  
  if(c!='<'){
    //Add new character to end of string
    str.concat(String(c));
  }
  else if(c=='<' && str.length()>2){
    //Remove last character in string
    str.remove(str.length()-1);  
  }
  //Set cursor back to 0,0
  tft.setCursor(0,0);
  //Display text
  tft.print(str);
}

I'd appreciate any help.

Answer 1

Sounds like you are using proportionally-spaced fonts instead of the original classic fonts that ships with Adafruit_GFX. Historically, when using the default classic fonts one could set the background color option of the text to the same color as the background of the screen (usually black). This would overwrite the old screen contents with new data and work because the characters using the classic fonts are a uniform size. When using proportionally-spaced fonts, the background color option for the font is disabled by design.

This was presumably because of memory requirements and speed on slower AVR's. Regardless, when using proportionally-spaced fonts the background color feature won't work due to non-uniform sized characters overlapping the same regions as adjacent characters.

There are two work-arounds to this. Adafruit says in order to replace previously drawn text when using custom fonts you can either:

1. Use getTextBounds() to determine the smallest rectangle that encloses a string and then erase that area using fillRect() prior to drawing the new text. OR

2. Create an offscreen bitmap using GFXcanvas1 for a fixed size area, draw the text in the GFXcanvas1 object and then copy to the screen using drawBitmap().

Note that options 1 & 2 above are mutually exclusive. The second method requires more memory. The first method isn't perfect and produces some small amount of flicker, but is in general acceptable if coded carefully.

I hope that I have understood what the nature of your problem is and answered it in a satisfactory manner. If nothing else, at least now you know why custom font's will not work with the so called background color feature that works with the original 'classic' Adafruit fonts.

Nikki Cooper

Answer 2

Maybe, use a similar function to tft.clear() each time you refresh the screen or you can draw a filled square of the background on the text so it looks like it has been erased then you rewrite the text.