TouchGFX obvious flickering of "Text Area" widget

[EJ.1]

Hello,

I have connected two latching type push buttons to two GPIOs and using TouchGFX to see the physical status on a demo screen with glowing buttons.

Some background information:

BUTTON_STATE_T is a structure containing 2 int members for GPIO states and a copy is updated in Model.cpp on every Model::tick();

Both buttons on the screen are "TOGGLE BUTTON" widgets with "TEXT AREA" on top of them. I do not intend to use "Button With Label" herein. No wildcards are used in this screen

I have below code snippet that produces the touchgfx scene behavior as seen in the attachment.

GpioStatusView.cpp

void GpioStatusView::handleTickEvent()
{
// get fresh GPIO states
	BUTTON_STATE_T *bs = presenter->getButtonStateFromModel();
 
	if(bs->inputPinA == 1)
		buttonA.forceState(true);
	else
		buttonA.forceState(false);
	if(bs->inputPinB == 1)
		buttonB.forceState(true);
	else
		buttonB.forceState(false);
 
	buttonA.invalidate();
	buttonB.invalidate();
}

There is some obvious flickering that can be seen on invalidated text area (also upon touch interaction). It is more obvious to naked eye rather than in the attached video

I am not sure if I am using the invalidate() along with handleTickEvent() correctly?

Is this method a good practice to update GUI instantaneously?

Things I have tried:

1.Explicitly invalidating the text areas along with button invalidate

Environment:

Windows 10 x64

CubeIDE 1.4.0

CubeMX6.0.1

TouchGFX 4.14.0

STM32F7508-DK

MCU PACKAGE FW_F7_V1.15.0

Please suggest on this

Thanks,

Eshwar

[Martin KJELDSEN]

Using invalidate() with handleTickEvent() should be perfectly fine, but realize that you're invalidating parts of the screen that may not be required. Thanks for the video

Perhaps try to move the invalidate() calls to only if the state of the button from model changes .Are you using the application template from TouchGFX designer?

[EJ.1]

Hello Martin,

Thanks for your reply. Yes I am using application template from TouchGFX designer.

Referring to the code snippet at https://support.touchgfx.com/docs/basic-concepts/rendering

I have modified the code as below.

void GpioStatusView::handleTickEvent() 
{
 tickCounter += 1;
 if (tickCounter % 10 == 0 ) 
 {
 // existing code here
 }
}

The flickering is gone now but I am not sure if using such soft delay is a good practice as the UI update rate may not be as real time without such counter

Ex. Lets assume that handleTickEvent(); is called every 10ms, then with such loop, the refresh of this screen will happen every 100ms which will not be as real time as at could have been on 10ms interval

Can you please suggest on this?

Thanks,

Eshwar