Scrolling Sprites causing flicker over another sprite

[tolgahansusur]

Hi, first of all I am so appreciated for this library, it is very useful. What I am trying to achieve is having 3 sprites in one display as:

• Banner
• ListBox
• Footer

Banner and footer content is static but listbox items are dynamic and content is not fitting into sprite, so I need to scroll it. User will have navigation button access and list box items will be scrolled by user with buttons.

What I realize I need to create big enough sprite to fit all the list items first then I should scroll it. Problem is that when I create big enough sprite for listbox, it is going over my footer sprite. So I am re-writing my footer in every iteration but this also causing the flicker. I tried scroll rect but I could not figured it out. Is there any one who can achieve this without flicker, please help me. You can find my simplified code below that doing scrolling automatically to see result without buttons, thanks.

Hardware: wt32 sc01

#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();
TFT_eSprite banner = TFT_eSprite(&tft); // Sprite object
TFT_eSprite listbox = TFT_eSprite(&tft); // Sprite object
TFT_eSprite footer = TFT_eSprite(&tft); // Sprite object


//==========================================================================================
void setup() {
  tft.init();
  pinMode(TFT_BL, OUTPUT);   //only required for wt32 sc01
  digitalWrite(TFT_BL, 128);  //only required for wt32 sc01
  tft.fillScreen(TFT_BLACK);
  tft.setRotation(1);


  banner.createSprite(480, 30);
  banner.fillSprite(TFT_BLUE);
  banner.pushSprite(0, 0);

  listbox.createSprite(480, 640);
  listbox.fillSprite(TFT_RED);
  listbox.setScrollRect(0, 0, 480, 640, TFT_RED);
  listbox.setTextColor(TFT_WHITE);
  listbox.drawString("MENU1", 30, 150, 2);
  listbox.drawString("MENU2", 30 , 180, 2);
  listbox.drawString("MENU3", 30 , 210, 2);
  listbox.drawString("MENU4", 30 , 240, 2);
  listbox.drawString("MENU5", 30 , 270, 2);
  listbox.drawString("MENU6", 30 , 300, 2);

  //MENU5,6 are hidden because they are out of display (320x480)


  footer.createSprite(480, 30);
  footer.fillSprite(TFT_GREEN);
  footer.pushSprite(0, 290);

}

void loop() {

  listbox.scroll(0, -50);    // Scroll Listbox 50 pixel upward vertically to see more menus on list
  listbox.pushSprite(0, 30);

  footer.createSprite(480, 30);  //Footer is refreshed after listbox in every iteration because listbox is over write on it.
  footer.fillSprite(TFT_GREEN);
  footer.pushSprite(0, 290);


  delay(1000);


}

[motoani]

Hi, I'm new here and was scanning for help for my own issue but I think I can help here. A you've noted the Sprites can be forced to overwrite so that's key. If you've enough RAM, push each of your layers to a screen-sized sprite and the push that to the TFT once done. No flickering. I'm doing this on ESP32S3 without issues. I've just started to handle the biggest scrolling sprite on second core by itself to speed up frame rate.

[Bodmer]

Not sure how I missed the original post... in the case of the OP question I think setting a viewPort will solve this. the screen is uply updated in the view port zone and thus if the pushed sprite is bigger than the set viewPort it will be clipped accordingly.