Touchgfx circular progress bar.

[sandaruwan]

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.

 

this is the code that I use now.

 

void PageHomeView::updatePage(PageState *pageState)

{

      uint8_t index = pageState->buttonsState.index;

       circleProgress1.setValue(index);

}

 

I refer these links

• https://support.touchgfx.com/docs/development/ui-development/ui-components/progress-indicators/circle-progress 
• https://support.touchgfx.com/4.19/docs/api/classes/classtouchgfx_1_1_circle_progress 

[Mohammad MORADI ESFAHANIASL]

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

[tmehok]

I came here for a different reason and this was the exact same thing I though about when I saw the post.

[sandaruwan]

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. 

[Mohammad MORADI ESFAHANIASL]

I see. I will surely update you
Good luck