Text as a Progress Meter

[jrf]

Hello,

I'm looking to create a text area that also acts as a progress meter, with the colour of the text filling and emptying vertically as a progress meter might. Is there any way this is possible?

I've attached some concept art for what I'm trying to achieve.

All the best,

JRF 

[GaetanGodart]

Hello @jrf ,

As someone said, a simple way would be to use a mask where the shape of your digit is transparent (so the white part is transparent), use a white background and faded from red to green background and you just have to move up the white background to reveal the faded background as the value increase.
This would work great for the number 0 in your example images.
The advantage of this is that it is easy to program but it requires a faded background that can take some memory and using a mask means that the black area around the digit itself will always have to be there.

Another way could be to manually add each white segment of the number and add on top of it another colored segment that you will modify the height of.
Please find an example of this method (2) attached.

For the number 37, it looks very similar to the STM32U5G9J-DK2 flash-limited E-bike demo.
You can find it by opening TouchGFX Designer, then "Demo" => "Board specific demo" => "STM32U5G9J-DK2 flash-limited E-bike".
We have a segment that increments in an hexagonal shape, to do so, we have regular boxes that we set the height or width of and to manage the angles, we use circle and we set its angle.
Check the custom container gauge and look for the element containing "FG" for foreground.

Regards,