RoundSlider
part of wslib
a Pen-based replacement for SCSlider, with extra styling options.
RoundSlider works the same way as SCSlider. But, as the name states, it is round. Next to that it has a lot of extra options. RoundSlider is a subclass of SmoothSlider and shares all its functionality. Both can be made look the same. The only difference is the default look. RoundSliders is designed to fit in with RoundButton, RoundNumberBox and regular SCViews.
Also see: EZRoundSlider
(
w = Window( "RoundSlider", Rect( 300,150,220,220) ).front;
b = RoundSlider( 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
background
hilightColor
Colors, Gradients and SCImages can be used with these getter/setters.
( // random colors
w = Window( "colorful", Rect(200,200, 250, 120 ) ).front.decorate;
7.do({ |i| RoundSlider( 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) )
});
)
( // random gradients
x = { Color.rand(0,0.8).alpha_( [1.0.rand ** 2, 1].choose ) };
w = Window( "gradients", Rect(200,200, 250, 120 ) ).front.decorate;
7.do({ |i| RoundSlider( 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) )
});
)
( // random pictures
// downloads a selection of (free) patterns from the web
// ... might take a while ...
p = [ 1, 16, 18, 30, 35, 67, 72, 77, 118, 119, 120, 124, 125, 126, 128, 134, 135, 136, 141,
150, 155, 156, 157, 160, 161, 172, 173, 184, 185, 190, 195, 196 ].scramble[..20];
p = p.collect({ |nr| "http://static1.grsites.com/archive/textures/blue/blue%.jpg"
.format( nr.asStringToBase(10,3) ); });
w = Window( "pictures", Rect(200,200, 316, 210 ) ).front.decorate;
7.do({ |i|
i = i*3;
RoundSlider( w, 40@200 )
.knobColor_( SCImage( p[i] ) )
.background_( SCImage( p[i+1] ) )
.hilightColor_( SCImage( p[i+2] ) )
.value_( i.linlin( 0,18,0.2,0.8) )
.borderColor_(Color.clear)
});
)
knobSize
knobSize is relative to the width of the slider. It defaults to 0.25.
The rounded edges of RoundSlider are influenced by the knobSize.
(
w = Window( "knobSize", Rect(100,100, 120, 250 ) ).front.decorate;
c = RoundSlider( w, 50@200 ).value_(1).knobSize_( 1 );
d = RoundSlider( w, 50@200 ).value_(1).knobSize_( 1 );
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 is relative to the width of the sliders base. It defaults to 1.
(
w = Window( "basewidths", Rect(200,200, 250, 120 ) ).front.decorate;
7.do({ |i| RoundSlider( w, 30@100 ).baseWidth_( 1/(i+1) ).value_( i/7 )
.knobColor_( Color.gray(0.8) ); });
)
border
borderColor
border is the size of the outline border around the slider. It defaults to 1.
borderColor defines the color of the border
extrude
extrude (default: true) makes a RoundSlider look like regular SCSliders by adding a bevel around the base and the knob. It needs to be used in combination with border; if border == 0 it will not show. RoundSlider shows the bevel by default, where SmoothSlider doesn't.
(
w = Window( "RoundSlider", Rect( 300,150,220,220) ).front;
b = RoundSlider( w, Rect( 90,30,40,160) ).value_(0.75)
.extrude_(false)
.background_( Color.gray(0.5) )
.knobColor_( Color.blue(0.25) );
)
(
w = Window( "which is which?", Rect( 300,150,220,220) ).front;
b = RoundSlider( w, Rect( 30,30,160,40) ).value_(0.8)
.extrude_(true).knobSize_(0);
c = Slider( w, Rect( 30,90,160,40) ).value_(0.8)
)
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 = Window( "relThumbSize", Rect(100,100, 220, 120 ) ).front.decorate;
c = RoundSlider( w, 200@50 );
d = RoundSlider( w, 200@50 );
c.action_({ |sl| d.relThumbSize = sl.value; });
d.action_({ |sl| c.relThumbSize = sl.value; });
)
string
font
align
stringColor
stringOrientation
RoundSliders can also have a label displayed on top. The label can be set using the string_ method. By default the label is always shown horizontally, regardless of the orientation of the slider. The font, align, stringColor and stringOrientation methods can be used to customize the label further.
////
//// example 1: orientation and styling
(
w = Window( "string", Rect(100,100, 216, 180 ) ).front;
w.addFlowLayout;
c = RoundSlider( w, 50@150 );
d = RoundSlider( w, 150@50 );
c.string = "String 1";
d.string = "String 2";
)
( // change color
c.stringColor = Color.green(0.5);
d.stringColor = Color.green(0.5);
)
( // change font
c.font = Font( "Times-Bold", 12 );
d.font = Font( "Times-Bold", 12 );
)
// change orientation (\v, \h, \up, \down or an angle)
c.stringOrientation = \v;
c.stringOrientation = \h;
c.stringOrientation = \up;
c.stringOrientation = 0.3pi;
c.stringOrientation = pi; // upside down
// change alignment
d.align = \left;
d.align = \right;
d.align = \center;
////
//// example 2: dynamic string
(
w = Window( "RoundSlider", Rect( 300,150,220,220) ).front;
b = RoundSlider( w, Rect( 30,30,160,40) ).value_(0.75)
.action_({ |sl| sl.string = "value: %".format(sl.value.round(0.001) ); });
b.stringColor = Color.blue(0.25).alpha_(0.75);
b.doAction;
)
stringAlignToKnob
Makes the text align to the position of the knob
(
w = Window( "RoundSlider", Rect( 300,150,220,220) ).front;
b = RoundSlider( w, Rect( 90,30,40,160) ).value_(0.75)
.action_({ |sl| sl.string = sl.value.round(0.01 ).asString; });
b.stringColor = Color.black;
b.thumbSize = 16;
b.stringAlignToKnob = true;
b.doAction;
)