Skip to main content
Associate
December 10, 2024
Solved

Text as a Progress Meter

  • December 10, 2024
  • 2 replies
  • 1035 views

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 

batteryFillSpeed0FullBlackFill.pngbatteryFillSpeed28EmptyWhiteFill.pngbatteryFillSpeed37digiFontFullWhiteFill.png

Best answer by 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,

2 replies

GaetanGodart
GaetanGodartBest answer
Technical Moderator
December 16, 2024

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,

GaetanGodart
Technical Moderator
January 15, 2025

Hello @jrf ,

 

Have you been able to find a solution that works for your requirements?

 

Regards,

jrfAuthor
Associate
January 21, 2025

Hi @GaetanGodart 

Thanks for your reply!

I'm just exploring the options you detailed now, but I can't seem to open the example method (2) which you attached - is there any chance you could send it again?

I'll also have a look at the e-bike demo and see what I can glean from the code there

All the best

GaetanGodart
Technical Moderator
January 22, 2025

Hello @jrf ,

 

I do not have the project from 1 month ago so I re-created it.

Tell me if this is helping you.

 

Regards,