Graphical User Interface (GUI) and Event-Driven Programming in SuperCollider, Study notes of Computer Graphics

Download Graphical User Interface (GUI) and Event-Driven Programming in SuperCollider and more Study notes Computer Graphics in PDF only on Docsity!

GUI

(Graphical User Interface)

Topics Addressed

• GUI
• Windows/Drawing Basics
• Views
  • Slider
  • Knob
  • StaticText
  • Button
  • RangeSlider
• Decorators
• Layouts

GUI - Definition

• GUI stands for Graphical User Interface. A GUI is a graphical window or

interface that allows users to cleanly and intuitively interact with some

technological/electronic component. Examples of GUIs:

• Desktop
• Finder
• Program Interfaces like Microsoft Word/Excel/PowerPoint or Google Maps
• Most things you interact with on your computer have a GUI
• Concept of GUI developed at Xerox in 1981 to eliminate the need for

command line interaction.

• How do you interact with a GUI?
  • Mouse
  • Keyboard
  • Touchscreen

Displaying Information

• All machines place data on the screen by interacting with the computer’s

CPU/operating system and graphics card/GPU.

• Graphical data is constructed by a program. Then, the program triggers the

operating system to take over and transmits the data to your graphics card

for rendering and placement in a portion of graphics card memory called a

framebuffer for display.

• Managing the interaction between these hardware devices is complicated.

Graphics libraries and toolkits help abstract away these details.

• SuperCollider uses Qt, a free and open-source toolkit written in C++, to

handle creating GUI windows. More info here: https://wiki.qt.io/About_Qt

Windows

w = Window.new("GUI Introduction");

w.front; // Ensures that the screen is on top so we can see immediately

Window.allWindows; // An array of all existing windows

w.close; // Hides and destroys (i.e., frees) the window

There are several optional parameters for creating a window:

• 1 st^ argument – the title of the window to be displayed at the top of the window.
• 2 nd^ argument – dimension/location (by default 400x400 pixels in the center of the screen)
• 3 rd^ argument – Boolean expressing if the window is resizeable
• 4 th^ argument – Dummy argument that should be ignored (used for compatibility with SwingOSC)
• 5 th^ argument – Boolean expressing if the window should be scrollable. False by default The dimension/location for the window is expressed with another class called a Rect. More shortly.

Drawing On A Window

• The class Window has an instance method .drawFunc that is used when

the window is refreshed to draw objects on the screen.

• The objects are drawn with a class called Pen, which has numerous class

methods that can draw all sorts of figures (termed paths) on the window.

• Pen has two very important class methods: .fill and .stroke.
  • .fill - > fills the object with the color specified by Pen.color (black, by default)
  • .stroke - > outlines the object with a border specified by Pen.width
  • If you fail to use either of these methods, then nothing will be displayed on your screen! - Note: there are some class methods which handle this for you. Be sure to read the documentation.
• When objects are placed on a window or any subcontainer in a window,

coordinates are relative to the upper left corner of the window. Positive y-

coordinates go down.

Simple Drawing Code

// Draw a rectangle // Coordinates are relative to the upperleft corner of the window ~r1 = Rect( 100 , 100 , 80 , 30 ); w.drawFunc = { Pen.addRect(~r1); // A path for a rectangle Pen.width = 3 ; Pen.stroke; // Add a stroke (i.e., border) to most recent path }; w.refresh; // Need to redraw the window // Circles/Ovals are defined by a rectangle that can enclose it ~r2 = Rect( 0 , 0 , 40 , 40 ); w.drawFunc = { Pen.fillRect(~r1); // Add and fill a rectangle Pen.addOval(~r2); // Add an oval to the screen Pen.color_(Color.green); // Set the pen color to green Pen.fill; // Fill the most recently added path (i.e., the oval) }; w.refresh; // Clear the screen from drawings w.drawFunc_(nil); // No draw function w.refresh;

Views

• In SuperCollider, views are the GUI objects that are placed on windows.
  • Some views (called containers) are capable of holding other views.
    • Example: Each window has a view that is used to hold all of the GUI objects within itself
  • When a view "A" holds a view "B", we say that "A" is the parent view and "B" is the child view.
• All views inherit from the basic View class. The view occupies a rectangular

space of the window within which it draws itself to display some data or to

indicate a mode of interaction between the user and the program.

• Views receive keyboard and mouse events generated by the user and

respond to them by controlling the behavior of the program. They also

display information about the state of the program and the data on which

it operates.

Knob

• The class Knob, like Sliders, ranges from 0 to

• Knobs, like Sliders, have an .action method

and the value of the slider can be extracted

with .value.

• Knobs are controlled with mouse motion,

either circular or linear. This property can be

set to .mode.

StaticText

• The class StaticText is the quick and dirty way to put a view for text

inside windows.

• Like many other views, the bounds for static text is defined through an

instance of the class Rect.

• See documentation for the useful instance methods that can change

font, size, background color, text color… etc.

~staticText = StaticText.new(w, Rect( 10 , 110 , 100 , 30 )); ~staticText.string = "This is some text"; // set the text ~staticText.align = \center; // center the text ~staticText.stringColor = Color.blue; // Set the text color to blue ~staticText.background = Color.grey; // Set the background to grey

RangeSlider

• The class RangeSlider is a more sophisticated slider

(really a composite of two sliders) that constitutes a

low end and high end.

• The low end and high end provide a range which is the

difference between the two values

• The low end and high end range between 0 and 1.
• Range sliders can be useful for visually representing

audio data that relies upon ranges like bandpass

filters, notch filters, … etc.

• Can also be useful for restricting synthesizers to certain

ranges of pitches if the values of the slider are mapped, to

say, midi note numbers

• The values of the slider can be extracted with the

methods .lo for the low end, .hi for the high end,

and .range for the range between the low end and

high end.

LOW END HIGH END

Defining Window Bounds

• The bounds of a window can be passed in as a rectangle.
• IMPORTANT: the rectangle passed in defines a bounds relative to the

lower lefthand corner of the screen.

• Recall that for all views placed inside a window, the bounds are relative to the

upper lefthand corner

• How to consider the arguments to the rectangle passed into Window
  • 1 st

argument: distance from the left boundary of the screen

• 2 nd

argument: distance from the bottom boundary of the screen

• 3 rd

argument: width of the window

• 4 th

argument: length of the window

• To see the boundaries of the screen, use Window.screenBounds

CompositeView

• The class Window contains a container view called TopView
  • Container views are views that are capable of holding other views
  • The TopView class is only for Window. If you want a parent view to organize several children

views, use the class CompositeView

• Properties of CompositeView:
  • It is the parent of any number of children views
  • It can be the child of other container views, like Window’s view or other CompositeView
• Advantages:
  • CompositeView is a way to organize views and to abstract and modularize GUI objects
  • Methods for composite views can often cleanly and succinctly change its child views.
• Composite views do not have any special/unique methods. They are simply a

container/organizer for other views.

Decorators

• We have seen how views can be arranged by hardcoding position and

sizes within container views like Window’s container view TopView

and CompositeView.

• Decorators automatically handle the positioning of views within a

container view

• There is one decorator in SuperCollider called FlowLayout.
• A decorator can be assigned to a view through the view’s

.decorator method or by using the instance method

.addFlowLayout for CompositeView or Window.