Text Flashing on Change

[renegadeandy]

Hi all,

I am hitting a problem I have hit in the past when updating a text string on my ESP32 application. Before this lib - I used this lib https://github.com/KrisKasprzak/FlickerFreePrint

It worked very well at avoiding flickering when changing a text string on a screen (I use ILI9341 no touch).

I have made a very simple UI with 3 text objects - which are static, and 2 which are dynamic.

When either of my 2 text items change, I can visibly see the text 'flash' despite the fact that only one of the 14 chars is changing on my string.

I wonder if it would be possible to integrate this FlickerFreePrint into the generated code.....or perhaps there is some best practices I am missing when dealing with text updates.

frame enabled
flash api
fill enabled

I use none of these? I assume none of these will help. I am updating my text as follows:

gslc_ElemSetTxtStr(&m_gui,online_text_ui,myvar);
 gslc_Update(&m_gui);

Does anyone have any top tips for how to make text updates without having any flashing? I saw some posts about 'boxes' not being the right size etc - but I am not sure what that means, or how to check if I am invalidating that rule?

Another question. "External storage size" -- is this the number of chars for the variable that will be declared? If i wanted to display a single char, would that be a value of 1, or a value as 2 as it would need to be null terminated?

ANy thoughts would be brilliant!

[Pconti31]

@renegadeandy If you post a zip file of a small sample project that demos the problem I'll take a look at it.

I have done similar things using TFT_eSPI's sprite animation extensions and Adafruit_GFX Canvas extensions.

See, my example: progress-percent
For FlicterFreePrint I would susgest you look at modifying the GUIslice interface driver you are using say its GUIslice_drv_adagfx.cpp
and look at adding support inside gslc_DrvDrawTxt() or if its GUIslice_drv_tft_espi.cpp look at gslc_DrvDrawTxtAlign().

"External storage size" -- is this the number of chars for the variable that will be declared?
The answer depends upon whether or not you are using GUIsliceBuilder or doing hand coding with the API.
The API Text Element requires null terminated strings so if you want a 1 character string you need to allocate 2
to your array. If you use the Builder you simply say 1 character and the BUilder will ouput +1 during code generation.

Paul--

[renegadeandy]

Hi @Pconti31 thanks for helping! Please see the example attached.

For me this example highlights the entire screen redrawing on each of the text strings update from 0 to 100.

Regarding external storage size - I am indeed using GUISlice Builder. SO the answer is, put in the number of chars for my string and it will ad a 1 to the end to null terminate. Nice :)

[renegadeandy]

aidgui.zip

[ImpulseAdventure]

Hi @renegadeandy -- in general, GUIslice attempts to only redraw the minimum rectangular "update region" that includes any elements that could be affected by a change. So if you only had a modifiable text field that changed, and no overlapping elements or background image, then just the modifiable text element would need to change.

In your case, you're observing that the entire display is getting redrawn. This often suggests that you may have some overlapping elements (or have enabled some types of transparency etc).

Having a real quick look at your rustaidgui_GSLC.h, it appears that your modifiable text element (E_ELEM_TEXT2) may be overlapping with the Ring Gauge (E_ELEM_RINGGAUGE2). Perhaps I misread the coordinates, but it looks like the TEXT2 X coordinate extends from X=5 to 240 (5+235), with Y from 23 to 36 (23+13). The Ring Gauge region is from X=205 to 236 (205+31) and Y=0 to 45 (0+45). If you changed the width of your ELEM_TEXT2 to be narrower (eg. width < 180), I wonder if the extra redraws might be reduced?

Anyway, I may have overlooked something in my quick check, but perhaps this could be a reason. Happy to have a look at it if you or Paul don't see an obvious issue.

thanks!

[renegadeandy]

Thanks for looking @ImpulseAdventure I tried this - didnt help.

Updated project attached.
rustaidgui.zip
Note this also has my other issue where the image wont load from spiffs if you can look!

[Pconti31]

@renegadeandy @ImpulseAdventure I ran this and it seems you do have one overlap field. Text3 extends to end of display overlaying Text4.

However, you are basically updating every field (but the title Rust Aid and line drawing) at an extreme speed so I don't think GUIslice could do anything but flicker since text is written by Adafruit_GFX under the covers. Calvin can answer that one.

Calvin's algorithm does make things slightly worst by refreshing the static fields Line, Title etc... I suppose a nice extension to GUIslice API would be to turn off his algorithm or have a way to mark fields as static and not include them in his region of update. I don't remember if Calvin has the idea of multiple regions of update or just makes the biggest one. In which case static fields would not work.

If you are simply trying to show progress without a screen flicker I susgest using my progress bar with percentage that is Flicker free,
progress-percent or use it as an example of using sprite animation.

I also would guess creating a Extended Text Element, say XFlickerFreeText.<h, c> that uses FlickerFreePrint library might help and holds the various text fields you are trying to update at high speeds.

Although, I'm not aware of anyone but Calvin and I who have every created an Extended Element...

Paul--

[renegadeandy]

@Pconti31 I think extending the text element to have a flickefreemode would be ideal. I am unsure about how to create such an extension. If you could lay out a plan...I cuold try byte (haha) some of this off and add it to the project.

[renegadeandy]

I switched over to TFT_eSPI and removed the 2 text fields I was changing - and now the UI is perfectly stable, no flashing or any problem on text or progress indicator. You can see this in the following project:
rustaidgui.zip
If I add back in a text field which has no overlapping boundaries, I can see my "Rust Aid" title is flickering again and the text field which is actually changing, and the progress indicator.....so something must be wrong somewhere further down the GuiSlice chain?
rustaidgui_flashing.zip

@Pconti31 @ImpulseAdventure please can you take a look? I think this test case highlights a clear problem?

[Pconti31]

@renegadeandy @ImpulseAdventure I ran your app just now and the good news is that after my suggested edits to JPEGDecoder.h

  #if defined (ARDUINO_ARCH_ESP8266) || defined (ESP32)
    #define LOAD_FLASH_FS
    #include <pgmspace.h>
    #include <FS.h>
    #include <SPIFFS.h>
    #define LittleFS SPIFFS
//    #include <LittleFS.h>
//    #define SPIFFS LittleFS
  #elif defined (ARDUINO_ARCH_RP2040)
    #define LOAD_FLASH_FS
    #include <FS.h>
    #include <LittleFS.h>
    #define SPIFFS LittleFS
    #define TJPGD_LOAD_FFS
  #endif

you icon RustLogo.bmp shows up fine.

As for flicker, again you can always see what fields will be refreshed by adding to your config file:

#define DBG_REDRAW

A red box will appear marking the refresh area.

You most likely should'nt update the ring graphic each time through loop() but only in major increments. Unless you use my
progress-percent.bar.

It just too much to expect anything but a sprite animation (like my progress bar) to behave without flicker at
high speeds. That's why games invented sprites.

As for the text flicker I haven't yet figured out anyway to fix it. Still looking...

Paul--

[renegadeandy]

Hi @Pconti31 aha - I didn't see where you had documented where to make these changes to jpegdecoder...? Is this something due to get fixed in the JPEGDecoder library?

It now works- thank you!

Please let me know regarding the text updates - and how you come across any solutions to fix that. I will look to use some of your widgets, as they are better fitted for my use.

[Pconti31]

@renegadeandy @ImpulseAdventure No idea. I found this topic which led me to do these code changes
ESP32 . SPIFFS.begin fails when TFT_eFEXH.h is included
Paul--

[Pconti31]

@renegadeandy I found a bug in the Builder that was causing most of your flashing issues.
The bug is that the builder was putting in this code for each text field:

gslc_ElemSetFillEn(&m_gui,pElemRef,false);

This was forcing full page refreshes to occur on each update loop.
The code was supposed to set fill enable to true.

If you download GUIsliceBuilder 0.17.b40 and go though each text field and set
"Fill Enabled?= true" in their property page

Also the newly added is text a variable seems to have confused people so I renamed it to
"Wrap Quotes around text?" and it should always be set to true!
So do that also for any text fields that already exist in your sample and remove the quote marks to have placed
in your text fields. The code generator will construction the output correctly now.
example:

  static char m_sDisplayText4[2] = >;    // Wrap Quotes around text?=false
  static char m_sDisplayText4[2] = ">"; // Wrap Quotes around text?=true

As for flicker free I have created a extended element XTextNoFlicker
It implements the same algorithm as the FlickerFree library you called for above.
However I only have it working for the Adafruit Built-in fonts.
Also, since it does a character by character test and only outputs a character thgat changes if you replace all
characters then of course you will still get flicker. The algoritm works best when only a couple of characters change.

Note: with the changes I made to the builder you might not need this extended element.
Paul--

[renegadeandy]

Hello @Pconti31

What a great bit of news!

I have upgraded my GUISlice builder, and am using these options as you detail now.

It is definitely better, I do still see some flicking, so I want to use the #define DBG_REDRAW option. I added that line to my config and it shows:

The debug line shows:

100DBG: PageRedrawGo() InvRgn: En=1 (3,5)-(234,65) PageRedraw=0
DBG: InvRgnReset
99DBG: PageRedrawGo() InvRgn: En=1 (3,5)-(234,65) PageRedraw=0
DBG: InvRgnReset

Not entirely sure what to make of that? The redbox goes around nearly all elements. Is this saying that entire rectangle is being redrawn? If so, why!
rustaidgui.zip

Project included in case you can spot the problem?

[Pconti31]

@renegadeandy Turns out a simple fix.
You forget to set "Rust Aid" E_ELEM_TEXT1 Fill Enabled?=true
and "v0.01" E_ELEM_TEXT5 Fill Enabled?=true

everyone else looks good.

Newly added text fields will always now default to Fill Enabled?=true its just I couldn't do anything about existing fields.

Anyway, let me know if you end up needing the XTextNoFlicker.

I plan on adding it to my GUIslice-Solutions Repository at some point in anycase.

Paul--

[renegadeandy]

Absolutely fantastic! Silly me.

Thank you for your help, fixes and advice