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 = Window( "RoundButton" ).front;
w.addFlowLayout;
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.
// osx only until JSCImage answers to .width and .height
o = SCImage.open(String.scDir ++ "/SuperCollider.app/Contents/Resources/SCcube.icns");
p = RoundButton(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 = RoundButton(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 = 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)]] );
)
(
r = SCImage("/Library/Desktop Pictures/Ripples Blue.jpg");
t = RoundButton(w, 80@20).states_( [["image", Color.black, r ]] );
)
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 );