Introduction to User Interfaces

With SuperCollider you can make and perform with just code alone. When you want to share what you have done with other who might not be familiar with coding in SuperCollider or you would just like to hide up all the details of a complex system you have created, then a Graphical User Interface (GUI) is an ideal solution.

What is a Graphical User Interface (GUI)

A Graphical User Interface (GUI) is a familiar metaphor to anyone who has used a computer since 1984. It allows a user to interact with code via graphical metaphors, elements, such as buttons, knobs and sliders. These are all contained in a window, which in SuperCollider, is the root element to contain all other elements.

A note before starting

All the examples from here on use the Qt GUI Kit. What this means is that you will need to run this line of code once per SuperCollider session:

GUI.qt

You can put this into your start up file so it is automatically run for you when you start the synth server. The main reason for choosing Qt here is because it works the same way cross platform (i.e. Windows, Mac, Linux). For a detailed discussion on GUI Kits see the GUI class.

Basic building blocks

To jump right in, all GUIs in SuperCollider need to be in a Window, which you can create like so:

Window.new("My first window").front

you need to call .front on your new window to make it appear. You can control its dimensions by passing in a Rectangle object.

Window.new("Example Window", Rect(88, 99, 640, 480)).front

which creates a window with its upper left corner at 88 pixels from the top and 99 pixels from the left of the screen. The window will be 640 pixels wide by 480 pixels high.

Adding elements

All elements such as buttons, knobs etc need to have a parent window or view so when you create on you need to first define their parent and keep a reference too it (here we use the variable 'win') and pass it to the new element, in this case a Button

(
    var win = Window.new("Window with a button", Rect(88, 99, 640, 480));
    Button(win, Rect(11, 22, 60, 50)).states_([["On"], ["Off"], ["Other"]]);
    win.front;
)

here we have added a button to the Window. The button is placed at 11 left, 22 right and its 60 long by 50 tall. The Button also has three states "On", "Off" and "Other" which appear in order as you click on them.

Here is a sample of some of the simpler GUI elements:

(
    var win = Window("Window with a button", Rect(88, 99, 640, 480));

    Button(win, Rect(11, 22, 60, 50)).states_([["On"], ["Off"], ["Other"]]);

    PopUpMenu(win, Rect(10,100,180,20)).items = ["A", "Combobox", "by", "any other", "name"];

    Slider(win, Rect(10, 160, 150, 20));

    RangeSlider(win, Rect(10, 200, 120, 30)).lo_(0.2).range_(0.4);

    Slider2D(win, Rect(100, 10, 80, 80)).x_(0.5).y_(1);

    MultiSliderView(win, Rect(10, 300, 350, 100)).value_(Array.fill(30, {0.01})).elasticMode = 1;

    TextField(win, Rect(200, 10, 150, 20)).string = "yo yo yoyo";

    StaticText(win, Rect(200, 50, 200, 20)).string = "Rolof's Rolex";

    NumberBox(win, Rect(200, 150, 100, 20)).value = rrand(1,15);

    Knob(win, Rect(200, 200, 200, 50));

    win.front;
)

There is a complete list of GUI elements (or classes as they say in the documents) which is a little confusing and in the end you only have to worry about the left column.

Arranging multiple elements

As you can see from the last example placing things with x/y coordinates on the window can become tedious and if you want to move things around you might have to re-calculate all the coordinates for all the elements which could be tedious.

Instead SC provides some Views that handle placing elements for you.h2>

Changing the look and feel

Connecting it to sound