How to resize the width and height of progress bar?

[KNara.2]

I'm looking for customising the progress bar width to 344 and height to 20.

Is there a way of customising the background image of the progress bar?

[Romain DIELEMAN]

Hi,

The progress bar widget uses an image as a background. You cannot change the width or height of this image from TouchGFX Designer. The solution is to use another image with the size you are looking for (you could for example just take the one currently used and edit it in paint.net.

/Romain

[KNara.2]

Hi @Romain DIELEMAN​ 

Got it.

What about the progress indicator?

How do I a customise that according to the background image.

I do not see any option of choosing the progress indicator.

To be more specific I'm using the box progress indicator and need the progress indicator edges to be curved ( same as the background image). How can I achieve this?

[Yoann KLEIN]

Hello @KNara.2​,

BoxProgress widget with rounded corners is not supported natively in TouchGFX.

But it should be possible to do it (not easy though), by modifying the framework code inside your project.

You'll have to modify the BoxProgress.hpp file, located inside "yourproject/touchgfx/framework/containers/progress_indicators/".

You can round the corners by creating Circle widgets and positioning them on the corners of your box.

We did almost this, some months ago, with a Button widget. For that, we modified the BoxWithBorderButtonStyle.hpp file. I'll share it so you can get some inspiration on how to achieve what you want.

Hope it helps,

/Yoann

[JTP1]

Thank you Yoann for inspiration to get round corner flex buttons. I little bit continue it to get different colors for border and background. Now It seems to work pretty nicely with short testing. One question, is there any way to select painter automatically for different color setups (RGB888,565 etc) ?