ARC with Gradients

Does anyone knows how i could get to this effect

basically a two color gradient arc while also being able to change the value of the arc

maybe something like that chart example is the right way but i could not figure it out on a arc

What you need to do is make the canonical gradient using a paint program that has the ability. Something like Paint dot net (windows) has the ability. size the image to match your widget size. Set the image to the background of the indicator on the widget

there no other ways than using a image?

nothing that is going to be as fast.

i might have a problem with storing the image cuz i dont have much memory

how big is the display?

You can do it using circle math and a canvas. But in the end it is still going to take up just as much memory. If it is storage that you are running short on and not RAM then we can render it. It only needs to be rendered a single time so it’s not that big of a deal to do. It gets tricky tho because the canvas doesn’t support alpha channels so what we need to do if rendering it is the arc widget background will have to be a solid color and you make the indicator transparent. You make the canvas first and then you make the arc a child of the canvas and you center the arc on the canvas.

It is going to be a while before I can get to writing the code for you.

exactly, i am running in short amount of storage and the problem is that i have no ideia of how those complex canvas masking works

in order to make a conical gradient you wouldn’t use masking. You would basically render lines from the center o a circle outwards, change the angle and color if needed and do it again until a complete 360° has been made… Setting the widgets indicator to have an opacity of 0 means it would be transparent so what is behind the widget would show through. that is the reason why you make the widget a child of the canvas. so it will be locked on top of it. size the canvas and the widget so they are the same and center the widget to it’s parent. set the background color of the widget to match the rest of the UI. Doing that will cause the gradient to only show through where the indicator is.