How to implement a feature shown in attached picture?

[Eddy V]

Hi is it possible to create the white gradient haze on the inside of the 2 progess circles. I f yes how to do this?

Thanks a bunch,

Eddy

[Ozone]

Alpha mask ?

[Eddy V]

Hi. Thanks for answering. I am an absolute novice with TouchGFX. Could you please elaborate a little more?

Eddy

[Ozone]

You need to wait for the touchGFX experts. I'm not doing any graphics/GUI stuff.

But effects like this often involve alpha masks and blending. At least on "real" platforms.

However, such effects are often ressource-hungry, so you might need to tell about your system (MCU & display controller).

[scottSD]

I have done something similar. It meant creating an image for the gradient "haze" and placing it in a Texture Mapper. The texture mapper can be rotated. However, as Ozone stated, this does take a lot of processor resources because the Texture Mapper rotation does not utilize the ChromArt. When I did it, the animation was a bit choppy.

Another option is to place the gradient "haze" image in a Circle and change the start angles and end angles of the circle as your animation. However, I believe this means you need to have a gradient image over the entire sweep and might not be what you want.

There may be other ways. I do not claim to be an expert. Hopefully you'll get some more answers to your question.

[Eddy V]

Thanks Ozone and ScottSD for replying. My processor (fSTM32F4xx or STM32F7xx, not sure yet) is just taking high level commands over UART and driving the display based on these commands. (similar to a Nextion display). Horsepower is probably not an issue but i have to prototype this.

[Martin KJELDSEN]

You cannot create a gradient with alpha (yet) in touchgfx using the cpu (In most cases that would also be ineffecient), so the easy thing to do here is to simply add the alpha to your image and let ChromART do the blending.

/Martin

[scottSD]

No problem. I know what it's like to struggle trying to figure this platform out and the more of us that help each other in this community, the better we will all be for it.

If performance is not much of an issue, I would give the TextureMapper a try. It is fairly straight forward, but I found that when I loaded the Animation TextureMapper Example (select it when creating a new project in the TouchGFX Designer), I was able to look at the code and get an idea of how to setup animation and rotation. Here is what that example looks like when selecting it in the project creation process:

And the great thing for you is that the TextureMapper is now part of the Designer! It was added in the latest release (4.12.3). I had to write code for it without the use of the designer in the previous release (4.10.0).

Basically you'd have your circle progress like you have and place a TextureMapper over that. Add the gradient haze image to the TextureMapper and rotate it accordingly.

[Martin KJELDSEN]

With 4.13.0 we've increased texturemapper performance by 50% in some cases - So there's that!

[scottSD]

Martin,

That is awesome!

Will L8's also be supported in the TextureMapper?