Showing results for 
Search instead for 
Did you mean: 

Touchgfx circular progress bar.

Associate II

I'm using the stm32h750-dk development board and  TouchGFX 4.21.4 and STM32CubeIDE. I want to design a circular progress bar with a color gradient. I attached the required circular progress bar as an image. so I want to control the circular progress bar from the main.c using an external variable resistor. I'm Using the 'queue' to communicate between touch TouchGFX files and main.c file. Still, I can control the progress bar using a single color (without a color gradient). anyone can help me to implement a circular progress bar with a color gradient when progressing the bar.

image (25).png


this is the code that I use now.


void PageHomeView::updatePage(PageState *pageState)
      uint8_t index = pageState->buttonsState.index;
I refer these links

Hello @sandaruwan,

Unfortunately, there is no direct way to do it, and I don't have any solid ideas for doing it right now. But, I think if you use an image with gradient as your progress indicator, you might be able to get close to what you look for. 

I will update you if I found a solution.

Best regards

Mohammad MORADI
ST Software Developer | TouchGFX
Associate II

Thanks your response @Mohammad MORADI ESFAHANIASL . please let me know if you find any solution. not possible to use images with gradient because the gradient area is dynamically changing with the progress value. 

I see. I will surely update you
Good luck

Mohammad MORADI
ST Software Developer | TouchGFX