Change Alpha on each widgets of container

[COSEBE]

Hi,

I have a container with buttons, images and text (around 30).

I would like to change the alpha from 255 to 128 of each widget inside the container.

On the documentation, it says it it possible with container with FadeAnimator in Mixins :

https://support.touchgfx.com/docs/development/ui-development/ui-components/containers/container#properties

but I think it is a mistake in the documentation.

So, without this feature, what is the best way to change all the alpha value of each widget in a container ?

If the function forEachChild (https://support.touchgfx.com/docs/api/classes/classtouchgfx_1_1_container#function-foreachchild) is recommended, can I have a link of an exemple program using this function or a zip file with a test program with this feature ?

Regards,

Sébastien

[GaetanGodart]

Hello @COSEBE ,$

We have updated the documentation and removed the mixin FadeAnimator.

Thank you for the feedback!

Regards,

[GaetanGodart]

Hello again @COSEBE ,

It is possible to do smooth fade without a fade animator.

You can simply use the handleTicKEvent.
Here is a typical code to fade out an element :

virtual void handleTickEvent()
    {
        if(startFadingOut)
        {
            myElement.setAlpha(255*(60-tickCounter)/60);
            myElement.invalidate();
            tickCounter++;
            if(tickCounter > 60)
            {
                tickCounter = 0;
                startFadingOut = 0;
            }
        }

        else if(startFadingIn)
        {
            myElement.setAlpha(255*(tickCounter)/60);
            myElement.invalidate();
            tickCounter++;
            if(tickCounter > 60)
            {
                tickCounter = 0;
                startFadingIn = 0;
            }
        }
    }

Here you will just have to set the variables startFadinIn or startFadingOut to 60 to start the fading.
Note that I choose 60 here for 60 ticks but you could do anything and you could modify the code to have your duration as a define which would be cleaner.

We have also made a video about fading  where I show how to use the handleTickEvent at 5:35.

Regards,

[JohanAstrup]

Hello.

You can cast a Drawable to a FadeAnimator. Following @ferro's example from the first reply, you can do it like this:

class FadeEachChild : public GenericCallback< Drawable& >
{
	virtual void execute(Drawable& d) override final
	{
		if (FadeAnimator< Image >* fadeAnimatorObject = dynamic_cast<FadeAnimator< Image >*>(&d))
		{
			fadeAnimatorObject->startFadeAnimation(128, 50);
		}
		else
		{
			// d is not a FadeAnimator< Image > object
		}
	}

	virtual bool isValid() const override final
	{
		return true;
	}
};

Then, do the following when you want to use it:

FadeEachChild fadeChildren{};
container1.forEachChild(&fadeChildren);

The downside of this approach is that you need to specify the widget type. If you have both images and boxes in the container, you would need to do something like the following. However, you could probably work around this with a template function if it is important.

if (FadeAnimator< Image >* fadeAnimatorObject = dynamic_cast<FadeAnimator< Image >*>(&d))
{
	fadeAnimatorObject->startFadeAnimation(128, 50);
}
else if (FadeAnimator< Box >* fadeAnimatorObject = dynamic_cast<FadeAnimator< Box >*>(&d))
{
	fadeAnimatorObject->startFadeAnimation(128, 50);
}
else
{
	// d is not a FadeAnimator object
}

Best regards,
Johan

[ferro]

Hi @JohanAstrup 

Does not dynamic_cast rely on RTTI ?

https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/quot-undefined-reference-to-typeinfo-for-touchgfx-quot-errors/m-p/98072/highlight/true#M3849