Slider Flickers

[MrBroccoliJP]

First of all I would like to say I appreciate the work that bodmer has done to create this amazing library.

Hi, So, I've wrapped my head around the internet trying to make it work but no luck.

tl;dr: I'm trying to make a "Slider" in the sense that there's a path and an object running on top of it. The final idea would be to have a gradient rectangle (background) and on top of it a ring that would slide on top of it depending on the variable it would slide more to one side or to the other (0% to 100%).

Goal:

My problem is in the "transparency" in the inside of the ring. I haven't been able to make it without either flickering the background or the ring itself.

To explain what I'm doing right now in my code

1. Creating background
   -> Create a Sprite
   -> fill round rectangle, TFT_TRANSPARENT
   -> Push Sprite (If I don't push sprite the inside of the ring doesn't fill with the background after updating object position)
2. Build the "object"
   ->Coordinates based on a variable
   ->Black outer circle
   ->White inner circle
   ->Transparent middle
   ->Push Sprite (again)
3. Update variable/Coordinates
4. Cycle

code:

#include <TFT_eSPI.h>      
TFT_eSPI    tft = TFT_eSPI(); 
TFT_eSprite SPR = TFT_eSprite(&tft);

#define BLK 1
int Variable_x = 40; //variable init

void setup(){
pinMode(BLK, OUTPUT); //backlight control
analogWrite(BLK, 255);

  tft.begin();
  tft.init();
  tft.fillScreen(TFT_BLACK);
}
  
void loop(){

  if (Variable_x >= 205) { //ending point
      Variable_x = 40; //starting point
    }
    SPR.createSprite(240, 100);
    SPR.fillRoundRect(30, 50, 180, 20, 5, TFT_RED);
    SPR.pushSprite(0, 180, TFT_TRANSPARENT); //push to Build background
	SPR.fillCircle(Variable_x , 60, 7, TFT_TRANSPARENT);
    SPR.fillCircle(Variable_x , 60, 15, TFT_BLACK);
    SPR.fillCircle(Variable_x , 60, 12, TFT_WHITE);
    SPR.fillCircle(Variable_x , 60, 7, TFT_TRANSPARENT);
    SPR.pushSprite(0, 180, TFT_TRANSPARENT);
    //SJP.deleteSprite();
	Variable_x++;
	}

I've narrowed down the problem to one simple thing. (ofc I'm not a pro level programmer so I might just be building everything wrong)
I have to do a pushSprite after building the background in order for the ring to have the information of the background instead of having the previous ring being rendered inside the new one. (Image 2)

In the beginning I was trying to achieve this with an image as the background, to me pushImage should do "virtually" (in ram) the same as pushSprite does to the screen. Since that wasn't working I tried to build the background with a simple Rectangle. My problem remained if I didn't do a pushSprite after building the background, which led to flickering due to "deleting" the foreground ring every cycle. (image 2)

(image2):

My obvious solution is to have the circle not be transparent in the middle, which doesn't require me to do a pushSprite after drawing the background every time.

I would be very appreciative if someone could help me in my crusade or push me towards a suitable path, I have researched a lot and I feel like I have a good enough understanding on how sprites work. But my underlying doubt relies with question why the inside of the ring doesn't get updated without pushing the bkg sprite.

I've also tried to use a drawCircle (looping number x of circles) instead of a filled circle. While this solution works amazingly well, the circles aren't filled properly having unfilled pixels in the middle

[Bodmer]

The problem is that the screen is like a peice of paper, if you draw and X on it and then an X somewhere else the first X does not disappear and has to be erased somehow. In the TFT_eWidget library the erasing is done by having a pixel border of the slider colour and background colour in appropriate places in the slider knob sprite, then the slider is only ever moxed 1 pixel at a time to the new position. Thus the border wipes the old knob image as it moves. Transparency is not used as then the last knob position is not erased by over-writing with the correct colour (this is how the Yin-Yanf example works, if you slow it down by setting WAIT to 1000 you will see what happens.

You could use the same approach for the inside of your knob, but you have to know the colour of the slider "slot" to fill it with a circle. Using transparency will leave previous images on the screen "behind" the new sprite.

I would get your project working first with a simpler approach, perhaps using the TFT_eWidget library, then improve it as skills develop.

[MrBroccoliJP]

hey thank you so much for your answer.

Since I didn't find a solution through transparency I actually came to a similar solution, since the gradient is only changing the value of "green" I made a function that outputs the hex rgb values as the slider moves across the gradient and fills a circle inside the ring. It works well specially in such a small screen it's unnoticeable. Although this solution doesn't let me have the "0%" printed in the background (now thinking of it I can probably just print it in front of the filled circle)

Besides that, I have another question.
I too came to the conclusion that the screen worked like a paper in the sense that past information would be kept after drawing new information.
But, why does that only happen inside the ring? Outside the rings that train of thought doesn't apply.
example:

Why does the outside get redrawn while the inside of the ring retains previous information?

this is just a curiosity at this point in order to optimize in the future, since I have found a solution that suits me for the time being.

I'll take a look in tft_eWidget as well, thanks for the help bodmer. :)

regards.

[Bodmer]

I would have to see the complete code to explain the behaviour. Note that if you create a sprite again without deleting it then a new one is not created and the original content remains. If you delete a sprite then create it again it will be cleared to black.

Since the sprite is the full size of the slider you can (on every loop cycle) clear it to black, draw the slot, draw the button in the new postion and then push the sprite to the screen, this will give a flicker free update.

[MrBroccoliJP]

if you want to take a look to why the inside of the ring gets "old" information while the outside updates normally my whole code where you can see this issue is, for example:

#include <TFT_eSPI.h>
TFT_eSPI    tft = TFT_eSPI();
TFT_eSprite SPR = TFT_eSprite(&tft);

int Variable_x = 40; //variable init

#define FIRST_SCREEN 5
#define SECOND_SCREEN 22
#define BLK 1
void setup() {
  pinMode(BLK, OUTPUT);                //backlight control
  pinMode(FIRST_SCREEN, OUTPUT);                //first screen pin
  pinMode(SECOND_SCREEN, OUTPUT);               //second screen pin
  digitalWrite(FIRST_SCREEN, LOW);               //push first screen low to read spi 
  digitalWrite(SECOND_SCREEN, LOW);               //push second screen low to read spi 
  analogWrite(BLK, 255);               // full brightness

  tft.begin();
  tft.init();
  tft.fillScreen(TFT_BLACK);
}

void loop() {

  if (Variable_x >= 205) { //ending point
    Variable_x = 40; //starting point
  }
  SPR.createSprite(240, 100);
  SPR.fillRoundRect(30, 50, 180, 20, 5, TFT_RED);
  // SPR.pushSprite(0, 180, TFT_TRANSPARENT);      //push to Build background, if i dont do this, the inside of the ring doesnt update!!
  SPR.fillCircle(Variable_x , 60, 7, TFT_TRANSPARENT);
  SPR.fillCircle(Variable_x , 60, 18, TFT_BLACK);
  SPR.fillCircle(Variable_x , 60, 12, TFT_WHITE);
  SPR.fillCircle(Variable_x , 60, 7, TFT_TRANSPARENT);
  SPR.pushSprite(0, 40, TFT_TRANSPARENT);
  SPR.deleteSprite();
  Variable_x= Variable_x+5;
  delay(100);
}

In my screen the inside of the white circle gets filled with "white" (previous white circles) after the knob moves a bit, instead of being red as the rectangle behind it.

If I do SPR.pushSprite(0, 180, TFT_TRANSPARENT); before drawing the circles the inside of the ring remains red as the background but the knob flickers due to pushing a sprite without it.

[Bodmer]

Here is the code that is close to your needs. It uses other useful functions:

#include <TFT_eSPI.h>
TFT_eSPI    tft = TFT_eSPI();
TFT_eSprite SPR = TFT_eSprite(&tft);

#define BLK 1
int Variable_x = 40; //variable init

void setup() {
  pinMode(BLK, OUTPUT); //backlight control
  analogWrite(BLK, 255);

  tft.begin();
  tft.init();
  tft.fillScreen(TFT_BLACK);
}

void loop() {

  if (Variable_x >= 205) { //ending point
    Variable_x = 40; //starting point
  }
  SPR.createSprite(240, 100); // created evey loop so gets cleared to black
  SPR.setTextDatum(MR_DATUM);
  SPR.setTextColor(TFT_BLACK);
  SPR.fillCircle(40, 60, 10 , TFT_YELLOW); // Note: Diameter will be 21 pixels
  SPR.fillCircle(210, 60, 10 , TFT_RED);
  SPR.fillRectHGradient(40, 50, 170, 21, TFT_YELLOW, TFT_RED);
  uint16_t col = SPR.readPixel(Variable_x , 60); // Read pixel color before drawing text
  SPR.drawString((String)((Variable_x - 40) * 100 / (205 - 40)) + " %", 70, 50 + 10, 2);
  SPR.fillCircle(Variable_x , 60, 15, TFT_BLACK);
  SPR.fillCircle(Variable_x , 60, 12, TFT_WHITE);
  SPR.fillCircle(Variable_x , 60, 9, col);
  SPR.pushSprite(0, 180);
  SPR.deleteSprite();
  Variable_x++;
}

[MrBroccoliJP]

Hi, Thanks for the help, the readPixel function is a way better way of getting the color instead of calculating it.

For some reason fillRectHGradient doen't work for me inside a sprite, I get a black screen. If I try outside a sprite it works no problem.
I suspect the board doesn't have enough ram to the gradient function and the sprite together (?)

Despite that I understood the concept and it works amazingly well.

Anyway, thank you very much for pointing me in the right way!

[Bodmer]

Hi, The fillRectHGradient works OK for me inside a sprite so it is not clear to me why it does not work for you. Maybe you are using an earlier version of the library when the feature was first introduced and had not been refined?

I am using an ESP32 so maybe it has more RAM than your processor. A 240x100 sprite requires 48kbytes (240 x 100 x 2).

The sprite is wider and taller than it needs to be for the slider ( for example 100 pixels high but only 31 pixel height needed - based on 15 pizel radius for black circle) so there is some scope for reducing the size significantly. If you use say SPR.fillSprite(TFT_GREEN); after creating it then when it is finally plotted to the screen you can see how oversized it is.