Knobs!

[baconpaul]

People always ask The skin engine supports multiple components So lets write a knob class! In 1.9 And maybe do a knobby skin

[baconpaul]

So knobs in surge need to support all the features of a slider, namely a value (which can be uni- or bi-polar) a modulation value, a modulation active state set (the blues) and a modulation distance display (the green line). I think the way to do this is (and the way we did it successfully in the Surge Rack SVG knobs) is to use a 'graphics sandwich' of SVGs which rotate and display or do not.

So lets assume a knob is size w x h with the extra constraints that w==h (the knob is 'square') and that w is odd (the knob has the center be integral). The actual knob component in total needs a label so it may be bigger than this (it may be w x ( w + label )) but this is just about the graphics section.

So cool we have a stack of graphics of w x w square. What are the graphics? I propose the following layers, back to front

A non-rotating knob background. It has 9 states for uni/bi/bi-notched and it has the three modulation states (unmodulated, current, and away). So this is an SVG of 3w x 3w

An overlay to that which provides the rotating knob handle. It has three modulation states (unmodulated, current, and away) so is size 3w x w

An overlay which is the modulation handle. It is an SVG of size w x w

An overlay which is the non-rotated front svg. This is usually a non-rotating shadow to give the knob heft

Finally the component itself has four skin properties,

• To draw the mod ring: modulationRingRadius, modulationRingThickness, and adopts the modulation color property from the slider.
• To position the knob range you have knobAngleRange probably in degrees from straight up (so, say, "130" -130, 130 would be a standard setting).

So for a given knob we draw in order, bit with rotations. So lets say the knob is bipolar -1,1 and has value 0.25.

We draw the background in the modulation state Over that we draw the handle rotated by 0.2 * knobAngleEnd since it is not modulation active we skip the modulation layer Then we draw the shadow unrotated

Now lets say we have the same knob with a unipolar modulation set at 0.3. So we draw in order this

We draw the background in the modulation state We draw an arc of radius modrad and width mod width from andle 0.2 knobAngle to 0.5 knobAngle Over that we draw the handle rotated by 0.2 knobAngleEnd We draw the mod handle rotated by 0.5 knobAngleAgleEnd Then we draw the shadow unrotated

voila. Skinnable resizable knobs.

[baconpaul]

KnobBasic.svg.zip

We can actually do this in a single 3 x 5 SVG - here's a basic

background for uni, bi, ticked in normal, modulate current, and modulation away state handle for all three of those mod handle | ts handle | shadow overlay

the attached zip is a crude version of what you would duse for a 40x40 knob (so it is 120x200).

Obviously I am not a designer. Oh and that SVG has box rules on so you can see the grid.

[mkruselj]

Basically already sorted out in sst-jucegui?

[mkruselj]

@baconpaul Maybe we close this ahead of time since we have sst-jucegui now and it does have a knob class?

[baconpaul]

agreee