Elegant solution for refreshing TFT display content?

Question

I'm currently drawing black boxes over old content before displaying constantly refreshing content on my display, so for instance to display temperature:

if (sensorTemp != nowTemp){
    nowTemp = sensorTemp;
    tft.fillRect(0,52,88,21,ILI9341_BLACK); 
    return nowTemp;
}

If I don't do this the display will just overlay content until it becomes a white blob.

However, this solution leaves me with a black flickering on the display and I can't control exactly what is refreshed where. So for instance when I want to display the current time or date it has to refresh the date all the time, even though nothing changed.

void loop() {
  tft.setTextSize(2);
  tft.setCursor(0,0); 
  tft.print(rtc.getDateStr());
  tft.fillRect(144,0,199,15,ILI9341_BLACK); //Black box drawn over 'old' time data
  tft.setCursor(144,0); 
  tft.print(rtc.getTimeStr());  //Draw new time
  tft.setCursor(0,52);
  tft.print(tempCall());  //call function to check on temperature and draw new data if necessary
}

Is there a more elegant solution to this problem?

score 5 · Answer 1 · edited Sep 10 '19 at 20:06

If you look in the "Adafruit_GFX.cpp" you will see the following.

void Adafruit_GFX::setTextColor(uint16_t c) {
 // For 'transparent' background, we'll set the bg 
 // to the same as fg instead of using a flag
 textcolor = textbgcolor = c;
}

void Adafruit_GFX::setTextColor(uint16_t c, uint16_t b) {
 textcolor   = c;
 textbgcolor = b; 
}

If you only want to Draw the Character with a transparent background meaning you only write the character setTextColor in the prescribed pixels changing none of the surrounding pixels in the character block defined by x, y, setTextSize.

TFT.setTextColor(GREEN); //With Transparent Text Background not updating surrounding pixels.

If you want to Draw the Character with your background color, replace app pixels in the character block defined by x, y, setTextSize with your chosen text color and your background to be the same as your chosen background. This will overwrite all pixels with old character that are no longer used with the background color all at the same time preventing mess of pixels, and character flashing.

TFT.setTextColor(GREEN, BLACK); //With Text Background Color updating surrounding pixels.

score 4 · Accepted Answer · answered Mar 09 '18 at 12:22

The Adafruit GFX library has two functions for setting the text colour:

setTextColor(uint16_t c)
setTextColor(uint16_t c, uint16_t bg)

The first sets both the foreground and background to the same colour, and the second to two different colours. You may ask why you would want the foreground and background to be the same - well, the library handles that situation as a special case: it makes the background transparent.

By setting the foreground and background to different colours you force the library to draw that background colour in over whatever is already on the screen.

tft.setTextColor(ILI93481_WHITE, ILI9341_BLACK);

With that any background pixels in the text string will be coloured black and the text itself white. As long as the string you are printing is the same length as the text that is already there it will be replaced completely.

djogedj · Answer 3 · 2023-05-31T08:33:11.820

This code works well and accounts for values of different length.

void textValue() {
  float newValue = @your input@;
  int numChars = String(newValue).length(); // Get the number of characters
  int valueWidth = numChars * 6 * 2.5;
if (valueWidth != previousValue) {
    tft.fillRect(0, 55, previousValue, 30, ST77XX_BLACK);
    previousValue = valueWidth;
  }
  tft.setCursor(3,60);
  tft.setTextColor(ST77XX_WHITE, ST77XX_BLACK);
  tft.setTextSize(2.5);
  tft.print(newValue);
}

score 1 · Answer 4 · edited Sep 15 '20 at 11:45

Hmm the solution is how the code is written...no fancy stuff...the KIWI way

//in setup function add tft.fillScreen(ST7735_GREEN);
void loop(){
int lightIntensity = myBH1750.getLux();
  tft.setTextSize(3);
  tft.setCursor(10,10);
  tft.setTextColor(ST7735_RED);
  tft.print(lightIntensity);
  delay(3000);
  tft.setTextColor(ST7735_GREEN);
  tft.setCursor(10,10);
  tft.print(lightIntensity);
  tft.setCursor(10,50);
  tft.setTextColor(ST7735_BLUE);
  tft.print("LUX");
}

Elegant solution for refreshing TFT display content?

4 Answers4