SmoothSlider
part of wslib
a Pen-based replacement for SCSlider, with extra styling options.
SmoothSlider works the same way as SCSlider.
But, as the name states, it is smooth. I created this because, frankly, I don't like the looks of SCSlider.
SmoothSlider is inspired and partly based upon blackrains Knob (available as Quark).
Rect( 0,0,40,160).centerIn(Rect( 0,0,220,220))
(
w = SCWindow( "SmoothSlider", Rect( 300,150,220,220) ).front;
b = SmoothSlider( w, Rect( 90,30,40,160) ).value_(0.75)
.action_({ |sl| sl.value.postln; });
)
SmoothSlider listens to all messages as SCSlider does, but has a few extra of its own:
mode
Mode indicates the way a SmoothSlider reacts to the mouse. The mode can be 'jump' or 'move'
'jump' : (default) behaves as SCSlider; the value jumps to where the mouse hits
'move' : the value only changes by the amount the mouse is moved after clicking, and doesn't
jump to the mouse position.
b.mode_( \move ); // try moving the slider before and after running this line
b.mode_( \jump ); // back to default
knobColor / knobColor_
background / background_
hilightColor / hilightColor_
Colors and Gradients can be varied using these getter/setters:
(
w = SCWindow( "colorful", Rect(200,200, 250, 120 ) ).front.decorate;
7.do({ |i| SmoothSlider( w, 30@100 )
.knobColor_( Color.rand(0,0.8).alpha_( [1,0.5,1,1,0,1,0][i] ) )
.background_( Color.rand(0,0.8).alpha_( [1,0.5,0,1,1,0,0][i] ) )
.hilightColor_( Color.rand(0,0.8).alpha_( [1,0.5,1,0,1,0,1][i] ) )
.value_( i.linlin( 0,6,0.2,0.8) )
.canFocus_( false ); // looks better without the focus rectangle
});
)
(
x = { Color.rand(0,0.8).alpha_( [1.0.rand ** 2, 1].choose ) };
w = SCWindow( "gradients", Rect(200,200, 250, 120 ) ).front.decorate;
7.do({ |i| SmoothSlider( w, 30@100 )
.knobColor_( Gradient( x.(), x.(), [\h, \v].choose ) )
.background_( Gradient( x.(), x.(), [\h, \v].choose ) )
.hilightColor_( Gradient( x.(), x.(), [\h, \v].choose ) )
.value_( i.linlin( 0,6,0.2,0.8) )
.canFocus_( false ); // looks better without the focus rectangle
});
)
(
w = SCWindow( "smoother smoothslider", Rect(200,200, 250, 120 ) ).front.decorate;
z = SmoothSlider( w, 160@15 ).value_( 0.5 )
.knobColor_( Gradient( Color.gray(0.9), Color.gray(0.1), \h ) )
.background_( Gradient( Color.black.alpha_(0.8), Color.white.alpha_(0.8), \h ) )
.hiliteColor_( Gradient( Color.blue.alpha_(0.5), Color.web.purple.alpha_(0.25), \v ) )
.knobSize_(1).canFocus_(false);
)
knobSize / knobSize_
knobSize is relative to the width of the slider. It defaults to 0.25.
The rounded edges of SmoothSlider are influenced by the knobSize.
(
w = SCWindow( "knobSize", Rect(100,100, 120, 250 ) ).front.decorate;
c = SmoothSlider( w, 50@200 ).value_(1).knobSize_( 1 ).canFocus_( false );
d = SmoothSlider( w, 50@200 ).value_(1).knobSize_( 1 ).canFocus_( false );
c.action_({ |sl| d.knobSize = sl.value; }); // moving the slider changes the knobSize of the other
d.action_({ |sl| c.knobSize = sl.value; });
)
baseWidth / baseWidth_
baseWidth is relative to the width of the sliders base. It defaults to 1.
(
w = SCWindow( "basewidths", Rect(200,200, 250, 120 ) ).front.decorate;
7.do({ |i| SmoothSlider( w, 30@100 ).baseWidth_( 1/(i+1) ).value_( i/7 ); });
)
(
w = SCWindow( "cocoa-like slider", Rect(200,200, 200, 120 ) ).front.decorate;
z = SmoothSlider( w, 160@15 ).baseWidth_( 0.3 ).value_( 0.5 )
.knobColor_( Gradient( Color.gray(0.8), Color.gray(0.2), \h ) )
.background_( Gradient( Color.black.alpha_(0.8), Color.white.alpha_(0.8), \h ) )
.knobSize_(1).hilightColor_(nil).canFocus_(false);
)
border / border_
borderColor / borderColor_
border is the size of the outline border around the slider. It defaults to 0 (no border).
borderColor defines the color of the border
(
w = SCWindow( "borders", Rect(200,200, 250, 120 ) ).front.decorate;
7.do({ |i| SmoothSlider( w, 30@100 ).border_( i )
.borderColor_( Color.rand )
.value_( i/7 ); });
)
(
w = SCWindow( "levelmeters", Rect(200,200, 250, 120 ) ).front.decorate;
7.do({ |i|
SmoothSlider( w, 30@100 ).border_( 1 ).borderColor_( Color.gray(0.2) )
.value_( (i+1)/7 ).knobSize_(0).canFocus_(false)
.background_( Color.white.alpha_(0.25) )
.hiliteColor_( Gradient( Color.red.alpha_(0.9), Color.green.alpha_(0.8), \v ) );
});
)
relThumbSize / relThumbSize_
the relThumbSize is a little different from the knobSize. It changes the thumbSize variable (inherited from SCSlider) but relative to the slider's length. The default thumbSize is 0. You will only see a change if the thumbSize becomes greater then the absolute knob size (absKnobSize - getter only).
(
w = SCWindow( "relThumbSize", Rect(100,100, 220, 120 ) ).front.decorate;
c = SmoothSlider( w, 200@50 ).canFocus_( false );
d = SmoothSlider( w, 200@50 ).canFocus_( false );
c.action_({ |sl| d.relThumbSize = sl.value; });
d.action_({ |sl| c.relThumbSize = sl.value; });
)
safeValue_
same as .value, but prevents first checks wether the window is not closed to prevent a crash.