4. GUI Basics
19 Jan 2018Below is a basic example GUI (Graphical User Interface), please run it in SC before proceeding:
(
~window = Window.new("my window", Rect(0,0,150,220));
~button = Button(~window, Rect( 10, 10, 50, 50))
.states_([
["OFF", Color.white, Color.black],
["ON", Color.white, Color.red]
])
.action_({ arg butt;
if( butt.value == 1,
{
"PLAYING".postln;
},
{
"STOPPED".postln;
}
);
});
~number = NumberBox(~window, Rect(10, 10 + 60, 50, 50));
~number.align = \center;
~number.value = 0;
~slider = Slider.new(~window, Rect(65, 10, 50, 200))
.action_({ |slider|
slider.value.postln;
});
~window.front;
)
Try interacting with each part of the GUI
. Note that postln
s are used extensively to provide feedback, as well as help you deduce how this could be used to control Synths
. postln
, SC's version of what is called print
or console.log
in other languages, is a mission-critical part of our troubleshooting toolkit.
Get in groups of two and choose 4 synths from your homework assignment to connect to this GUI. Note that this will involve three steps in the following order:
- reverse engineer this example and connect it to one of the
Synth
s from your homework. The button should turn yourSynth
on and the slider should control volume. - duplicate your set of
GUI
elements for three moreSynth
s, expanding the overall size of~window
to accommodate 4 sets of the above example, each controlling a different synth. - after completing step 2., add a second slider for each
Synth
that allows you to change thefrequency
.