How to update TFT clock on screen without visible redraw?

Hi,
I am building another alarm clock. I managed to show the current time on the tft screen, updated every second. However, the command

tft.fillScreen(ST7735_GREEN);

will cause a visible redraw of the screen content. If I leave it out the texts are drawn on top of each other. How can I update texts and numbers smoothly?

void loop() {
  tft.setTextWrap(false);
  tft.setCursor(20, 30);
  tft.fillScreen(ST7735_GREEN);
  tft.setTextColor(ST7735_BLUE);
  tft.setFont(&FreeSans18pt7b);
  if (RTC.read(rtcTime)) {
    tft.print(rtcTime.Hour);
    tft.print(":");
    tft.print(rtcTime.Minute);
  }
  delay(1000);
}

P.S. It's a 1.8" TFT LCD Display 128X160 SPI, Adafruit compatiblewith ST7735 TFT Controller using libraries:

  • Adafruit_GFX
  • Adafruit_ST7735

Read the page here.

In particular the text:

"To replace previously-drawn test when using a custom font, use the getTextBounds() function to determine the smallest rectangle encompassing a string, erase the area using fillRect(), then draw new text."

Only update the display when the time has changed. (once a second or once a minute)

Alternatively try this library and look at the examples which allows custom fonts to be drawn with background and padding to erase old longer text strings. There is a digital clock example that you could adapt.

bitBone:
compatiblewith ST7735 TFT Controller

I say this with some trepidation because I believe somebody else might have had the same problem, but the ST7735 is not uncommon and you should be able to simply write new time over old. You might have better luck with the library UTFT from Rinky Dink.

It is just possible that you are having a problem because you are using a large custom font, while I have only used the three standard fonts included in the library, but I would have thought the application would be the same.

Thanks guys, I need some time to look into it.

Easy:

void loop() {
  tft.setTextWrap(false);
  tft.setCursor(20, 30);
  //tft.fillScreen(ST7735_GREEN);
  tft.setTextColor(ST7735_BLUE, ST7735_GREEN);
  tft.setFont(&FreeSans18pt7b);
  if (RTC.read(rtcTime)) {
    tft.print(rtcTime.Hour);
    tft.print(":");
    tft.print(rtcTime.Minute);
  }
  delay(1000);
}

Thanks, but they changed that for the custom fonts unfortunately. No background color for text in the Adafruit library.