4. GUI Basics

Below 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 postlns 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:

1. reverse engineer this example and connect it to one of the Synths from your homework. The button should turn your Synth on and the slider should control volume.
2. duplicate your set of GUI elements for three more Synths, expanding the overall size of ~window to accommodate 4 sets of the above example, each controlling a different synth.
3. after completing step 2., add a second slider for each Synth that allows you to change the frequency.