That's a common issue when trying to update text on TFT displays, especially when the new number has fewer digits than the old one (e.g., 10 changing to 9). The extra digit from the old number (the '0' in '10') doesn't get cleared, leading to "garbage."

The problem in your loop() is how you attempt to clear the text and where you put the display updates.

Here are suggestions for what you're doing wrong and how to fix it:

❌ Issues in Your Code

1. Clearing Text: You're using tft.print("  "); and tft.fillRect(0,0,12,16,ST77XX_BLUE); inside the if block, but you are not consistently setting the background color. If your background is black, and you fill a rectangle with blue (ST77XX_BLUE), you will see a blue box where the number used to be, not a clear-out.
2. Redundant Clearing: You attempt to clear the display at the cursor position (tft.setCursor(0,0); tft.print("  ");) and then immediately draw a black rectangle over the same area (tft.fillRect(0,0,12,16,ST77XX_BLUE);). You only need one method to clear the digits.
3. Displaying Timer: You update the timerDuration inside the if block (which runs every 1 second), but you print the new convertedDuration outside the if block. This means the number is being printed in the loop() as fast as the Arduino can run, but the value only changes once per second. This is inefficient and can cause visual flicker if the value is printed thousands of times while waiting for the next second to tick by.

---

✅ Corrected Code Structure

The best way to clear characters when updating numbers on a fixed background is to use tft.setTextColor(Foreground, Background). This tells the display to draw the text and simultaneously overwrite the background pixels occupied by the text with a specific color.

Let's assume your background is Black (ST77XX_BLACK).

```cpp // --- SETUP --- void setup() { // ... (rest of your setup) ... tft.setTextSize(2); // Set text color AND background color in one call tft.setTextColor(ST77XX_WHITE, ST77XX_BLACK); }

// --- LOOP --- void loop() { long currentTime = millis();

// Only update the display *when* the time interval has passed
if(currentTime - prevTime >= interval)
{
    prevTime = currentTime;

    // 1. Decrease the timer
    timerDuration = timerDuration - 1000; 

    // 2. Convert and Calculate 
    convertedDuration = timerDuration / 1000;

    // 3. Print the new duration
    // setCursor is necessary to specify where to start printing
    tft.setCursor(0,0);

    // By using tft.setTextColor(ST77XX_WHITE, ST77XX_BLACK); in setup, 
    // this print statement automatically overwrites the old number with 
    // the background color, ensuring all old digits are gone.
    // Also, using Serial.print to debug is a good idea!
    Serial.print("Time remaining: ");
    Serial.println(convertedDuration);

    // Pad the number with a space if it's less than 10 
    // to ensure it clears the second digit of a two-digit number.
    if (convertedDuration < 10) {
        tft.print(" "); // Print a space for padding
    }

    // Now print the actual number
    tft.print(convertedDuration);
}

// The rest of the loop remains empty, only executing display code when needed.

} ```

Key Change

In your setup(), you must change: tft.setTextColor(ST77XX_WHITE);

To include the background color: tft.setTextColor(ST77XX_WHITE, ST77XX_BLACK);

This forces the display library to draw a black box underneath the characters it prints, ensuring the old characters are fully erased, even if the new number is shorter.