Customized circle progress

[KNara.2]

Hi,

I'm looking at customising the circle progress.

I was able to add this as the background image 

and added a single dot as the image to rotate.

Any idea on how to rotate the dots and make it disappear?

 

[Mohammad MORADI ESFAHANIASL]

Hello @KNara.2 ,

There is a Progress Indicator example on TouchGFX which contains a circular indicator similar to the one you desire.

Progress Indicator Example

 

Please consider checking it for inspiration and if you still need help, don't hesitate to ask.

[KNara.2]

@Mohammad MORADI ESFAHANIASL 

Thanks that was useful.

I'm looking at implementing a circle progress where in at the first iteration I have one background image and one progress image, in the next iteration I want to swap these two images.

Any leads on how this can be achieved?

Should I use 2 circle progress and call them in loop one after another?
Is there a feature called reverse for circle progress, just like the animated images have?

Please guide.

Thanks.

[Mohammad MORADI ESFAHANIASL]

You are very welcome.

I think having two different circle progresses would be easier to handle. However, if you prefer to do it in code, you can use these two functions:

// To change the background
circleProgress.setBackground(touchgfx::Bitmap( /* Bitmap ID of the background */ ));

// To change the progress image
circleProgressPainter.setBitmap(touchgfx::Bitmap( /* Bitmap ID of the progress image */));

Keep in mind that you need to change the attributes of the progress to show it properly. 
You can read more circle progress here .

 

I hope this helps

[KNara.2]

Thanks for all the guidance @Mohammad MORADI ESFAHANIASL 

I used touchgfx_printf() calls (needs <touchgfx/Utils.hpp>) and was able to debug in simulator.

Thanks again.