SmoothButton

part of wslib

a Pen-based replacement for SCButton, with extra styling options. 

SmoothButton works the same way as SCButton. But, as the name states, it is smooth. SmoothButton is a subclass of RoundButton and shares all of its functionality. The difference is that SmoothButton has no bevel by default. SmoothButton was designed to be used alongside SmoothSlider and SmoothNumberBox.

(

w = Window( "SmoothButton" ).front.decorate;  // decorate -> wslib-shortcuts

b = SmoothButton( w, 80@20 ).states_([[ "hit me" ], [ "again" ]] ).action_({ "was hit".postln });

)

If a SmoothButton's bounds are a square, the button shape becomes a circle:

c = SmoothButton( w, 20@20 ).states_([[ "x", Color.red(0.5), Color.gray(0.6) ]] );

SmoothButton also supports icons from DrawIcon. If the button state name is a Symbol

it is replaced by an icon with that name.

k = SmoothButton( w, 80@20 ).states_([[ \play ]] );

l = SmoothButton( w, 20@20 ).states_([[ \stop, Color.white, Color.black ]] );

States can also contain instances of SCImage. They will be displayed at original size, centered in the button and not clipped.

o = Image.open(String.scDir ++ "/SuperCollider.app/Contents/Resources/SCcube.icns");

p = SmoothButton(w, 250@150).states_( [ [o] ] );

Functions can also be used as a state. They will be used as drawing functions, which receive a the button, a rect and the radius as arguments. Drawing is always relative to the origin of the button's bounds.

(

u = SmoothButton(w, 80@20).states_( [ 

[{ |button, rect, radius| 

Pen.line( rect.leftBottom, rect.rightTop );

Pen.line( rect.rightBottom, rect.leftTop );

Pen.stroke;

}] ] );

)

The fillcolor of a state can also be a Gradient, or a SCImage.

(

q = SmoothButton(w, 80@20).states_( [ 

["horizontal", Color.white, Gradient( Color.blue(0.5), Color.red )],

["vertical", Color.white, Gradient( Color.black, Color.white.alpha_(0.25), \v)]] );

)

(

r = Image.open("/Library/Desktop Pictures/Ripples Blue.jpg");

t = SmoothButton(w, 80@20).states_( [["image", Color.black, r  ]] );

)

SmoothButton has some extra features for graphic finetuning:

radius

the radius of the round corners in px

d = SmoothButton( w, 80@20 ).states_([[ "radius=0", Color.black, Color.gray(0.7) ]] ).radius_( 0 ); 

e = SmoothButton( w,80@20 ).states_([[ "radius=5",Color.gray(0.8),Color.blue(0.6) ]] ).radius_( 5 );

f = SmoothButton( w, 80@20 ).states_([[ "radius=Array" ]]).radius_( [0,10,4,7] );

border

border width in px (default 2). The color of the border cannot be changed; it is always dark grey and white when pressed (or vice versa if inverse == true).

h = SmoothButton( w, 80@20 ).states_([[ "border=0" ]] ).border_( 0 );

i = SmoothButton( w, 80@20 ).states_([[ "border=5" ]] ).border_( 5 );

extrude

bevel extrusion boolean (default = false). This will make SmoothButton look like a RoundButton

j = SmoothButton( w, 80@20 ).states_([[ "extrusion" ]] ).extrude_( true );

you can use bevel as well, which does the same thing.

moveWhenPressed

amount of px to move the button label by when pressed. Default = 0.

j.moveWhenPressed_( 2 );

inverse

makes the border white instead of dark grey.

m = SmoothButton( w, 20@20 ).states_([[ \speaker ]] ).inverse_( true );

m.inverse_( false );

n = SmoothButton( w, 20@20 ).states_([[ \arrow ]] ).border_(1).inverse_( true );