Reduce Flicker on GaugeDisplay

[matthias-mw]

Hi everybody,

I am using this Library with a GC9A01_DRIVER and an ESP32 and I want to build an nice looking gauge.

So the Strategy is the following:

1. use a background image as eSprite
2. use a needle image as eSprite
3. put the needle to the background eSprite
4. push background to the screen

This works fine, but it causes a small flicker, because I push always the full screen

Here are fragments of my code:

#include <Arduino.h>
int i = 10;
TFT_eSPI tft = TFT_eSPI();
TFT_eSprite needle = TFT_eSprite(&tft);
TFT_eSprite background = TFT_eSprite(&tft);

void setup(void)
{
  Serial.begin(115200); delay(500);
  initDisplay();
}

void loop()
{
  uint32_t dt = millis();
  if (i > 100)
  {
    background.pushImage(0, 0, 240, 240, _scale_2);
  }
  else
  {
    background.pushImage(0, 0, 240, 240, _scale_1);
  }
  showNeedle(DisplayData.EngineSpeed);

  background.pushSprite(0, 0);

  i = i + 2;
  if (i > 130)
  {
    i = 10;
  }
  delay(10);
}

//******************************************************************
// Init the display and images
//******************************************************************
void initDisplay()
{
    // Init the display
    tft.init();
    tft.fillScreen(TFT_BLACK);
    tft.setSwapBytes(true);
    tft.setRotation(0);
    tft.setPivot(IWIDTH/2, IHEIGHT/2);
    tft.pushImage(0, 0, IWIDTH, IHEIGHT, _startscreen);

    // Create the background sprite
    background.createSprite(IWIDTH, IHEIGHT);
    background.setSwapBytes(true);
    background.setColorDepth(16);
    background.fillSprite(TFT_BLACK);

    // Create the needle sprite
    needle.createSprite(NEEDLE_WIDTH, NEEDLE_HEIGHT);
    needle.setColorDepth(16);
    needle.setSwapBytes(true);
    needle.pushImage(0, 0, NEEDLE_WIDTH, NEEDLE_HEIGHT, _needle);
    needle.setPivot(NEEDLE_WIDTH/2, NEEDLE_HEIGHT);
}

void showNeedle(int speed)
{
    int angle = map(speed, 0, 4000, 226, 386);
    // Limit the angle to 0-359
    if (angle > 359)
    {
        angle = angle - 360;
    }
    // Draw the needle at the given angle
    //needle.pushRotated(&background, angle, 0x041f);
    needle.pushRotated(&background, angle, TFT_BLACK);
}

So for my Understanding the flicker comes from the background.pushSprite(0, 0), I can see that by increasing the delay.

I found the Example "Animated_Dial" which proposed the the usage of ReadRect() to update just the area of the Needle. This makes a lot of sense to me but unfortunately this function is not working with my GC9A01.

Is there any other strategy to reduce the flicker of the screen? Can I use ReadRect() with a Sprite?

Thanks for help, I am a bit lost here

Matthias

[Basitadam]

What SPI clock speed are you using?
Are you sure IWIDTH and IHEIGHT are both 240?
What are the values of NEEDLE_WIDTH and NEEDLE_HEIGHT?

[matthias-mw]

The display is round with a 240x240 Matrix (https://www.buydisplay.com/download/ic/GC9A01A.pdf?srsltid=AfmBOooKGD9Hkx5SqQsw5lGierppnk7TG7JC6MQAynd-wueoJii9taet)

Here is my user_setup.h

#define GC9A01_DRIVER
#define SPI_FREQUENCY  400000000
#define SPI_READ_FREQUENCY  40000000

The Neddle size is:

// 'needle', 20x100px
const uint16_t _needle [] PROGMEM = {

[Basitadam]

400MHz for SPI is way too much. I think there is a typo. Make it 80000000

I can't see IWIDTH and IHEIGHT defined in your code. They must be defined somewhere else. Make sure that they are equal to 240

[matthias-mw]

Thanks a lot....

This saves my weekend. Changed the Typo to 8MHz and it works perfect with no flicker....
Seems that the SPI crashed because of to high frequency

[Basitadam]

HappyFace(true);

..meant 80MHz, right?