ESP32 - ST7735 - TFT_eSPI correct way to use Sprite

Other Hardware Displays
1

Hello,

I'm working with ESP32, ST7735 and TFT_eSPI library
There are 2 sprites, 1 is the main with text background, 1 is the 'popup' with triangle.
I want to draw 1 filled red triangle and draw another filled yellow triangle after 1 second at the same place (with different size and transparent background)

The problem is, when I draw the yellow triangle, the remaining red is still there as below picture:
image

So I fixed it by, push the main sprite to clear all, and then draw the yellow. This way works fine but there is a fast flicker effect due to main sprite is pushed out. Imagine the flow is as below:
Push main sprite => Push popup sprite with RED => push main sprite to clear (flicker here) => Push popup sprite with YELLOW

Is there another way to do it without flicker effect? Thank you

#define WIDTH  128
#define HEIGHT 128

#include <TFT_eSPI.h>

TFT_eSPI    tft = TFT_eSPI();
TFT_eSprite spr_main = TFT_eSprite(&tft);
TFT_eSprite spr_popup = TFT_eSprite(&tft);

void setup()
{
  tft.init();
  spr_main.createSprite(WIDTH, HEIGHT);
  spr_main.setTextWrap(true);
  spr_main.setCursor(0, 0);
  spr_main.print("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum");
  spr_main.pushSprite(0, 0);

  delay(1000);
  spr_popup.createSprite(50, 50);
  spr_popup.fillScreen(TFT_TRANSPARENT);
  spr_popup.fillTriangle(25, 0, 0, 49, 49, 49, TFT_RED);
  spr_popup.pushSprite(20, 20, TFT_TRANSPARENT);

  delay(1000);
  spr_popup.fillScreen(TFT_TRANSPARENT);
  spr_popup.fillTriangle(20, 0, 0, 49, 49, 49, TFT_YELLOW);
//  spr_main.pushSprite(0, 0);    //Fast flicker effect here
  spr_popup.pushSprite(20, 20, TFT_TRANSPARENT);
}

void loop(void){}
2

different x, don't overlap.

3

Hello, what do you mean? That's my intention

4

Is to be expected, when they don't overlap completely, using transparent background.

5

You mean there is no way to make the smooth transition without flicker effect? That's so bad :frowning:

6

No, that's not what I mean. Maybe I just can't understand what your problem is.

Maybe someone else can.

7

Do you have the same hardware? if you do, you can upload my code and see my problem. I just want to draw 2 different images on 'popup' sprite with smooth transition

8

Maybe. But I don't want to. I thought it is a simple and obvious issue.

You can't erase remains of your red triangle by overwriting it with "transparent".

You would need to draw the original background to the sprite, then draw the the second image onto it with transparent background, then draw the sprite to the display.
Drawing the original background may not be straightforward because of the smaller dimension and line wrapping.
But if your screen has read capability, then you can retrieve a bitmap from a screen rectangle with TFT_eSPI, I think.
Or you could use two full-screen sprites, of course, to simulate pop-up.

9

You are right. Drawing original background is not straightforward as my sample code is minimized. It is a part of my bigger project where there are many states to define the background information, it is not a simple background.

10

Using 2 full-screen sprites seems to be the proper way to achieve the expectation but we have to pay the price of memory usage, 32KB RAM in my case.

#define WIDTH  128
#define HEIGHT 128

#include <TFT_eSPI.h>

TFT_eSPI    tft = TFT_eSPI();
TFT_eSprite spr_main = TFT_eSprite(&tft);
TFT_eSprite spr_popup = TFT_eSprite(&tft);

void setup()
{
  tft.init();
  spr_main.createSprite(WIDTH, HEIGHT);
  spr_main.setTextWrap(true);
  spr_main.setCursor(0, 0);
  spr_main.print("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum");
  spr_main.pushSprite(0, 0);

  spr_popup.createSprite(WIDTH, HEIGHT);
}

void loop(void)
{
  delay(1000);
  spr_main.pushToSprite(&spr_popup, 0, 0);
  spr_popup.fillTriangle(25, 0, 0, 49, 49, 49, TFT_RED);
  spr_popup.pushSprite(0, 0);

  delay(1000);
  spr_main.pushToSprite(&spr_popup, 0, 0);
  spr_popup.fillTriangle(10, 0, 0, 49, 49, 49, TFT_YELLOW);
  spr_popup.pushSprite(0, 0);
}
11

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.