Multiple circles display leads to frame rate drop

[AJT]

Hello,

Still me with my STM32H7 and my touchGFX project !

I'm trying to do an animation with 3 circle whose radius are increasing. The problem is that when the 3rd circles animation (ie its radius is increasing) starts, the frame rate drops.

Here is the sample of the code doing this animation :

void screenView::handleTickEvent()
{		
	static float radius = 0;
	static float radius2 = 0;
	static float radius3 = 0;
 
	if(radius3 < 80)
	{
		circle_anim1.getRadius(radius);
		circle_anim1.setRadius(radius + 1);
	
		circle_anim1.invalidate();
	
		if(radius > 80)
		{
			circle_anim2.getRadius(radius2);
			circle_anim2.setRadius(radius2 + 1);
			circle_anim2.invalidate();
		}
	
		if(radius2 > 80)
		{
			circle_anim3.getRadius(radius3);
			circle_anim3.setRadius(radius3 + 1);
			circle_anim3.invalidate();
		}
	
	}else{
		circle_anim1.setVisible(false);
		circle_anim2.setVisible(false);
		circle_anim3.setVisible(false);
	}
}

and what we should see :

(a bit later)

I think the frame rate drops because I invalidate whole circles and it is too much for the MCU but I didn't find another way to just update the radius.

Any clue ?

Regards,

AJT

PS : I don't want to use an image instead of circle shapes provided by touchGFX for the moment

[Alexandre RENOUX]

Hello,

What is your display size/resolution ?

Which H7 do you have exactly ?

Indeed, this could be due to too much load on the MCU.

Circles are entirely rendered by the MCU and cannot be computed by DMA2D.

When you change the radius of the circle, this invalidates the whole area.

Are your circles with an alpha lower than 255 ?

In any case with circles, alpha is involved because we need to smoothen the outline of the circle. This increases computation complexity.

/Alexandre

[AJT]

MCU : STM32H753VT6

Screen width : 320 pixels

Screen height : 240 pixels

Yes alpha are different for all circles and lower than 255.

What is more, in my main code, alpha is decreasing when radius is increasing.

Thanks for your answer !

AJT

[Romain DIELEMAN]

Hi,

Circle widgets rely heavily on the MCU. Like ALex said, you have three circles on top of each other, which due to the alpha can heavily increase the computation. Since you have a custom hardware you will have to test by yourself to see what solves your issue, but know that you can press F2 when using the simulator to show what areas are being refreshed on the display while running. This will help you to try to prevent from refreshing the entire display when not needed.

I would recommend to optimize your code or work around/modify the UI. You say that your display is 320x240. Do you really need to have the three circles getting as big and as fast? can you try to not update at every tick, so maybe slow it down a bit and try to update the circles at different ticks. According to your code, the radius of circle 1 goes up to 240. However this means that it covers the entire display, there is no need to force the calculation for it (around a radius of 200 it covers the entire screen, and once you dont need it anymore put it as non visible so that the other circles do not consider it during the "alpha calculation"). I would also try to put the circles inside a container widget as it takes care of finding out what needs to be displayed.

What are you trying to do with this animation? Is it a fancy looking waiting transition/waiting animation? Would it be possible to consider to do a different one or alternate version of it?

/Romain

[AJT141]

hello (this is my second my account because my other mail adress is going to be deleted),

yes I knew for the F2 tip and i saw that i'm invalidating the whole screen but I think if i invalidate a smaller zone it won't solve the problem !

I need this circle animation to make my ringing phone animation nicer (I also have the phone shaking while circles are spreading).

i've already tried to not update the circle at each tick (currently every 3 ticks) but it is still lagging a bit. I think we are going to change this animation or remove one circle.

But thks for all informations,

AJT

[AJT141]

A smart solution was to change the RGB value when circle radius is increasing. There are still laggs but less.