Knob track should be filled by rotating

Hi All,

I have a knob control made up of three parts (SVG files), that is background, arrow and track. The track part should fill as it’s turned on simultaneously with the arrow just as in Ableton Live’s knobs. The part that’ll be filled as it’s turned on, I have all of it ready now. How can I make it look like it’s being filled as it’s being turned on.

You’d need to create a Path for the filled and unfilled parts of the track. Then fill one path and only “stroke” the other path. Or just stroke around all of the track and only fill part of it.

If you take a look at how LookAndFeel_V2::drawRotarySlider() works, that might help.

But you’re going to have to write some code to determine the filled part. I can’t think how you’d do this just from SVGs. Perhaps post some code?

Hey volkanozyilmaz.

I don’t know if its of use but I have an example plugin on my git account with an implementation of a rough rotary slider using SVG that fills in a separate track.

The plugin still isn’t finished as I’ve not had any free time for it (just a little VA filter response GUI that I thought would be handy for JUCE newbies…really should get that finished)

I’ve dropped you a PM with the link.

One thing you could possibly do is reduce the clip region before drawing your “on” track i.e. Graphics::reduceClipRegion(). You can do this with a path if you need a tilted region such as when the track is 2/3rds full etc.

However, as Martin says, it’s often easier and more efficient to just draw some elements with Paths.

1 Like

Thanks for the answers. First, I tried to use reduceClipRegion function but it became more detailed than I expected. After that, I drew it like LookAndFeel_V2::drawRotarySlider() as Martin suggested. But I need to have radiuses on my track’s corners.

Can I make it with addPieSegment function?