VLW font flicker on frequent text update

[ptodorov0]

Thanks to Bodmer and all other contributors for their work on this library. I am trying to create a CAN BUS dashboard for my car which fetches data from the OBD2 and displays it on a 1.5" 240x240 SPI ST7789 display.

I am using a VLW font and when I update the numbers at rates quicker than 500ms there is some flicker. I tried the following ways to update the numbers:

1. First draw a black rectangle to cover the previous numbers using fillRect and than use drawString to fill in the new numbers

tft.fillRect(72, 14, 90, 40, TFT_BLACK);
tft.drawString(engine_rpm, 72, 14);
tft.fillRect(72, 74, 70, 40, TFT_BLACK);
tft.drawString(boost_pressure, 72, 74);
tft.fillRect(72, 134, 120, 40, TFT_BLACK);
tft.drawString(oil_temp, 72, 134);
tft.fillRect(72, 194, 50, 40, TFT_BLACK);
tft.drawString(coolant_temp, 72, 194);

=> Letters/numbers render great but there is flickering probably because first we render the rect to cover the old text and after that we render the new text

2. Using a sprite:

img.createSprite(168, 240);
img.fillSprite(TFT_BLACK);
img.drawString(engine_rpm, 0, 14);
img.drawString(boost_pressure, 0, 74);
img.drawString(oil_temp, 0, 134);
img.drawString(coolant_temp, 0, 194);
img.pushSprite(72, 0);

=> There is no flicker because the whole thing appears at once but the letters look brittle and have some colored pixel artefacts in the area of anti-aliasing.

3. Using tft.setTextColor(TFT_WHITE, TFT_BLACK) to set a black background to the new text instead of drawing rectangles to cover the old text

=> That doesn't seem to work with VLW fonts, the old text remains visible below the new one

Do you have any other suggestions? Thanks in advance!

[Bodmer]

Use a Sprite as in your option 2 example but at the beginning set the foreground and background colours for the font e.g. use this line:

img.setTextColor(TFT_WHITE, TFT_BLACK);

[ptodorov0]

It is still pixelized around the anti-alias zone, otherwise there is no flicker as I mentioned. Here is the code:

while (true) {
    img.createSprite(168, 240);
    img.fillSprite(TFT_BLACK);
    img.loadFont(FONT_RR_40);
    img.setTextColor(TFT_WHITE, TFT_BLACK);
    img.drawString(engine_rpm, 0, 14);
    img.drawString(boost_pressure, 0, 74);
    img.drawString(oil_temp, 0, 134);
    img.drawString(coolant_temp, 0, 194);
    img.pushSprite(72, 0);
    delay(100);
}

And here you can see the pixels around the letters:

[Bodmer]

Does "Font_Demo_3" work OK?

[ptodorov0]

Finally found the culprit... After I tried with Font_Demo_3 (thanks for the idea) and saw that everything looked great with it I started modifying my code to get as close to the Font_Demo_3 as possible because I thought I messed something up.

Nothing worked. After 30 minutes of tries I decided to also remove all the BMPs I was drawing by commenting all calls to drawBmp(). Finally the text rendered ok.

In the examples/Generic/TFT_SPIFFS_BMP/BMP_functions.ino:drawBmp() there is a tft.setSwapBytes(true) at line 37 and after the BMP is drawn that action is not reversed, just added tft.setSwapBytes(false) at the end of drawBmp and finally my strings were rendering great.

Thanks again for your suggestions and your work on this library!

[Bodmer]

Thanks for finding the solution. I will think how to prevent this from happening as swapping the bytes for fonts was not intentional and hence is a bug. I will re-open this until it is fixed as this was not an intended behaviour.

[Bodmer]

Updated example.