RoundButton

part of wslib


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


RoundButton works the same way as SCButton. 

But, as the name states, it is rounded.


(

w = SCWindow( "RoundButton" ).front.decorate;  // decorate -> wslib-shortcuts

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

)


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


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


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

it is replaced by an icon with that name.


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


l = RoundButton( 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 = SCImage.new(String.scDir ++ "/SuperCollider.app/Contents/Resources/SCcube.icns");

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


The fillcolor of a state can also be a gradient.


(

q = RoundButton(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)]] );

)


RoundButton has some extra features for graphic finetuning:


radius

the radius of the round corners in px


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


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


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


border

border width in px (default 2)


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


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


extrude

bevel extrusion boolean (default = true)


j = RoundButton( w, 80@20 ).states_([[ "no extrusion" ]] ).extrude_( false );


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



moveWhenPressed

amount of px to move the button label by when pressed


j.moveWhenPressed_( 0 );



inverse

inverse border colors


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


m.inverse_( false );


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