Custom Rotary Knob

Question

Hello. I'm trying to build my own rotary knob with changing filled scale, depending on the current value. Something similar to this one https://designshack.net/images/designs/dark-vintage-knob.jpg The problem is the filling scale. What could be the best way to make it? Thanks.

Answer 1

Hi,

This look very similar to the "Smart Thermostat"-demo. The only difference that I can see here, from my perspective, is the gradient. The needle of your knob shows the actual value. From minValue to actualValue the gradient is visible. From actualValue to maxValue the background is "dark" (gradient not visible).

One simple way to reach this: Instead of working with the gradient, just grow/shrink the dark-area. This is a visual trick. You display the gradient the entire time in the background and paint over a dark color that fills out the gradient-area from the currentValue (needle position) to the maxValue.

Hope this helps.

Best regards,
Chris