LCD Touch screen drawing a number with millis function

Hello, I am using LCD Shield.Its probably clone of the seedstudio shield. Also i am using library named ' TFT Touch Shield V2.0' on Arduino.

I am making a timer and its basicly counts to sixty and add one number to other variable. So i am trying to print the values the screen. It works fine but the values stacks one point on the screen. I dont have any idea to fix this.

I also add video: YOUTUBE VIDEO

#include <stdint.h>
#include <TFTv2.h>
#include <SPI.h>
unsigned long sMillis;
unsigned long cMillis;
const unsigned long px = 1000;
int x = 0;
int y = 0;

void setup() {
  TFT_BL_ON;
  Tft.TFTinit();// Inıt TFT
  sMillis = millis();
  
  
}

void loop() {
 cMillis = millis();
    if (cMillis - sMillis >= px)
    {        
        x++;
        if( x == 60 )
        {
            y++;
            x=0;
        }
        Tft.drawNumber(x,0,50,2,RED);// I am printed to screen value x.
        Tft.drawNumber(y,0,90,3,WHITE); // same for value y.
        sMillis = cMillis;
       
    } // Also thanks to Blackfin.

}

Have you tried erasing what's there before printing a new character? (Not compiled, not tested...)

#include <stdint.h>
#include <TFTv2.h>
#include <SPI.h>
unsigned long sMillis;
unsigned long cMillis;
const unsigned long px = 1000;
int x = 0;
int y = 0;

int lastx, lasty;

void setup() 
{
    TFT_BL_ON;
    Tft.TFTinit();// Inıt TFT
    sMillis = millis();
    lastx = -1;
    lasty = -1;  
  
}

void loop() 
{
    cMillis = millis();
    if (cMillis - sMillis >= px)
    {        
        x++;
        if( x == 60 )
        {
            y++;
            x=0;
        }
        if( x != lastx )
        {
            Tft.drawChar( ' ', 0, 50, 2, BLACK );   //assumes black is the background color
            Tft.drawNumber( x, 0, 50, 2, RED );// I am printed to screen value x.
            lastx = x;
        }//if
        
        if( y != lasty )
        {
            Tft.drawChar( ' ', 0, 50, 2, BLACK );   //assumes black is the background color
            Tft.drawNumber( y, 0, 90, 3, WHITE); // same for value y.
            lasty = y;
        }
        sMillis = cMillis;
      
    } // Also thanks to Blackfin.

}

I tried your code but its not worked :(. I have an idea but the result will be same probably. What if i gather all values and put inside an arrays and then print the value inside of the arrays ?

Other idea:
Maybe i can access the values inside the memory then delete the adresses with the if condition. I guess i should work with pointer. I am very newbie to this..

Looking at the TFT library it only appears to write a pixel when a bit in a char bitmap is '1'. This seems like an oversight to me.

One thing to try would be to write the last value or x or y in black, followed by the new char in the desired color:

#include <stdint.h>
#include <TFTv2.h>
#include <SPI.h>
unsigned long sMillis;
unsigned long cMillis;
const unsigned long px = 1000;
int x = 0;
int y = 0;

int lastx, lasty;

void setup() 
{
    TFT_BL_ON;
    Tft.TFTinit();// Inıt TFT
    sMillis = millis();
    lastx = -1;
    lasty = -1;  
  
}

void loop() 
{
    cMillis = millis();
    if (cMillis - sMillis >= px)
    {        
        x++;
        if( x == 60 )
        {
            y++;
            x=0;
        }
        if( x != lastx )
        {
            Tft.drawNumber( lastx, 0, 50, 2, BLACK );   //assumes black is the background color
            Tft.drawNumber( x, 0, 50, 2, RED );// I am printed to screen value x.
            lastx = x;
        }//if
        
        if( y != lasty )
        {
            Tft.drawNumber( lasty, 0, 90, 3, BLACK );   //assumes black is the background color
            Tft.drawNumber( y, 0, 90, 3, WHITE); // same for value y.
            lasty = y;
        }
        sMillis = cMillis;
      
    } // Also thanks to Blackfin.

}

Oh , Thank god. There is no word to describe this kinda help. Thank you so much. It finalley worked. I even tried to put them inside the array. :confused:

Also would you explain a bit to point of this ? I am trying to understand it but its kinda diffucult. I get the point actually we are still printing the value but they are black. They are still there but they are same color with background because of that we cant see it. But i couldnt understand the on the code. Whatever i will understand by the time i guess.

SlimeDont5:
Also would you explain a bit to point of this ? I am trying to understand it but its kinda diffucult. We are clearing the value because they are stacking on each other but i am missing something on that point.

In the LCD library is a function called drawChar which is used when you want to put an ASCII character on the screen. The part that actually draws the pixel(s) looks like this:

    for (int i =0; i<FONT_X; i++ ) {
        INT8U temp = pgm_read_byte(&simpleFont[ascii-0x20][i]);
        for(INT8U f=0;f<8;f++)
        {
            if((temp>>f)&0x01)
            {
                fillRectangle(poX+i*size, poY+f*size, size, size, fgcolor);
            }
        }

    }

Basically, if the character you're drawing needs a pixel turned on at a given location, it will do that by drawing a rectangle at that location. However, if the character you're drawing needs a pixel turned off at a given location, it doesn't do that (and there may be very good reasons the authors omitted that.) To do so it might look like:

    for (int i =0; i<FONT_X; i++ ) {
        INT8U temp = pgm_read_byte(&simpleFont[ascii-0x20][i]);
        for(INT8U f=0;f<8;f++)
        {
            if((temp>>f)&0x01)
            {
                fillRectangle(poX+i*size, poY+f*size, size, size, fgcolor);
            }
            else
            {
                fillRectangle(poX+i*size, poY+f*size, size, size, bgcolor);           
            }
        }

    }

Note the "else" there now: if a pixel in the character is '0', draw a rectangle the same color as the background at that location. (Unfortunately, there doesn't even appear to be a "bgcolor" variable so this is just demonstrative.) This will have the effect of clearing that pixel on the TFT. So if the characters are all built using the same x-y size bitmaps, writing a new one would automatically erase the old ones.

Because that capability isn't written in the library, you basically need to erase the characters yourself. This means writing the character twice; once to show it and then, later, again -- using the BLACK background color -- to turn off all the pixels that were turned on previously. Then you draw your new character.

I use "lastx" and "lasty" to track the value that was written. This serves two purposes; first, it allows us to erase what was there as described, but it also reduces the amount of time you spend drawing elements on the screen. For example, if the value of 'y' has not changed there's no need to draw it again.

Thank you again. I learned so many things today. Thanks to you!