v.1.0

.gitignore

@@ -0,0 +1 @@
+Sketch/

README.md

@@ -1,8 +1,10 @@
-## Open HackSpace 071012
+Open HackSpace 071012
+=====================
 
-# GUI and Layout management in SuperCollider
+GUI and Layout management in SuperCollider
+------------------------------------------
 
-    * ex1 - QtGui and Layouts
-    * ex2 - iterative gui creation 
-    * ex3 - Short presentation on MorphGui quark
+* ex1 - QtGui and Layouts
+* ex2 - Iterative gui creation 
+* ex3 - Short presentation on SimpleGui quark
 

ex1.scd

@@ -0,0 +1,121 @@
+/*
+    Layout Management in SuperCollider
+    
+        * GridLayout  - A layout that organizes views in a grid
+        * StackLayout - A layout that stacks views on top of each other
+        * HLayout     - A layout that distributes views in a horizontal line
+        * VLayout     - A layout that distributes views in a vertical line
+
+    Layouts are installed on a View and will distribute the space of that
+    View for the the items in the Layout. A basic unit on which a layout
+    operates is therefore abstractly called an item and can be a view or
+    another layout.
+*/
+
+
+// HLayout basic usage
+w = Window();
+w.layout_(HLayout(Slider(), TextView(), Slider()));
+w.front;
+
+// HLayout using a stretch factor
+(
+    w = Window().layout_(
+        HLayout(
+            [ Slider(), stretch:1 ],
+            [ TextView()          ],
+            [ Slider(), stretch:1 ],
+        )
+    ).front;
+)
+
+// HLayout with a nested VLayout 
+(
+    w = Window().layout_(
+        HLayout(
+            TextView(),
+            VLayout(
+                Button().states_([[ 1 ]]),
+                Button().states_([[ 2 ]]),
+                Button().states_([[ 3 ]]),
+                Button().states_([[ 4 ]]),
+            ),
+        )
+    ).front;
+)
+
+// HLayout with a nested VLayout using alignment
+// (see the bottom of this file for possible alignments)
+(
+    w = Window().layout_(
+        HLayout(
+            VLayout(
+                [ Button(), align:\top    ],
+                [ Button(), align:\bottom ],
+            ),
+            Slider2D(),
+            VLayout(
+                [ Button(), align:\top    ],
+                [ Button() ],
+                [ Button() ],
+                [ Button(), align:\bottom ],
+            )
+        )
+    // using a size constraint on the top view
+    ).view.fixedSize_(Size(500,300)).front;
+)
+
+// GridLayout
+(
+    var grid = GridLayout(),
+    w        = Window().layout_(grid),
+    view     = View().background_(Color.rand),
+    num      = 6;
+
+    // add buttons to the GridLayout
+    // args: item, row, column, align
+    num.do{|i| grid.add(Button().states_([[ i ]]), 0, i) };
+
+    // add a View which vertically span all buttons
+    // args: item, row, column, rowSpan: 1, columnSpan: 1, align
+    grid.addSpanning(view, 1, 0, 1, num); 
+    w.front;
+)
+
+// GridLayout can be used for finer tuning
+(
+    var grid = GridLayout(),
+    w        = Window().layout_(grid),
+    num      = 30, 
+    spacing  = 1,
+    rowBreak = 10;
+
+    // add a custom spacing
+    grid.hSpacing_(spacing);
+    grid.vSpacing_(spacing);
+
+    num.do{|i| 
+        grid.add(
+            View().background_(Color.rand(0.3,0.6)).layout_(HLayout(Knob())),
+            i div: rowBreak, 
+            i % rowBreak
+        ) 
+    };
+    // using minSizeHint to resize the window to fit the items of the view
+    w.view.resizeTo(w.view.minSizeHint.width, w.view.minSizeHint.height);
+    w.front;
+)
+
+/* 
+    Possible alignments for layouts
+
+    \left
+    \center
+    \right
+    \topLeft
+    \top
+    \topRight
+    \bottomLeft
+    \bottom
+    \bottomRight
+*/

ex2.scd

@@ -0,0 +1,51 @@
+(
+    // partial contoller
+    s.waitForBoot {
+
+        var win, partialControls;
+        var numPartials = 8;
+
+        SynthDef(\simplePartial, {|freq=440, amp=0.1, pan, out|
+            var o = LPF.ar(
+                SinOsc.ar(freq+Rand(-0.5,0.5),SinOsc.ar(freq,0,4pi-(3pi*amp))), 
+                6500
+            );
+            Out.ar(out, Pan2.ar(o,pan,amp));
+        }, [ 0.1, 0.1, 0.1 ]).add;
+
+        s.sync;
+        // create some Synths, save them in an Array 
+        ~synths = numPartials.collect{|i|
+            Synth(\simplePartial, [\freq, 55*(i+1), \amp, 0 ])
+        };
+
+        // this will be our top-most layout
+        partialControls = HLayout();
+
+        ~synths.do {|syn, i|
+            // add a vol and pan control for each synth instance
+            partialControls.add(
+                // create a slider for volume and a knob for pan
+                // manage them in a VLayout
+                VLayout(
+                    // pan
+                    Knob().action_({|kn|
+                        var val = kn.value.linlin(0,1,-1,1);
+                        syn.set(\pan, val);
+                        "Partial #% pan: %".format((i+1), val.trunc(0.01)).postln;
+                    }).centered_(true).valueAction_(0.5),
+                    // vol
+                    Slider().action_({|sl| 
+                        var val = sl.value; // range 0 - 1
+                        syn.set(\amp, val * ~synths.size.reciprocal.sqrt);
+                        "Partial #% amp: %".format((i+1), val.trunc(0.01)).postln;
+                    })
+                )
+            );
+        };
+        win = Window("Partial Controller").layout_(partialControls);
+        win.view.resizeTo(400,270);
+        win.onClose = { ~synths.do(_.free) };
+        win.front;
+    }
+)

ex3.scd

@@ -0,0 +1,52 @@
+
+// ===========================================================================
+// SimpleGui demo
+// ===========================================================================
+
+s.boot;
+
+// ----------------------------------------
+// ex1: create a gui based on SynthDef args
+// ----------------------------------------
+(
+
+    SynthDef(\simplePartial, {|freq=110, amp=0.25, cfreq=2500, pan, out|
+        var o = RLPF.ar(
+            SinOsc.ar(freq+Rand(-0.5,0.5),SinOsc.ar(freq,0,4pi-(3pi*amp))), 
+            cfreq,
+            0.75
+        );
+        Out.ar(out, Pan2.ar(o,pan,amp));
+    }, 0.1!4).add;
+)
+
+x = Synth(\simplePartial);
+// SimpleGui will try and guess the appropriate ControlSpecs 
+// based on the SynthDefs NamedControl arguments
+SimpleGui(x, freeOnClose: true);
+
+// ------------------------------------------------------
+// ex2: create a gui based on SynthDef args and metadata
+// -----------------------------------------------------
+(
+
+    // a SynthDef with metadata
+    ~sdef = SynthDef(\simplePartial, {|freq=110, amp=0.25, cfreq=2500, pan, out|
+        var o = RLPF.ar(
+            SinOsc.ar(freq+Rand(-0.5,0.5),SinOsc.ar(freq,0,4pi-(3pi*amp))), 
+            cfreq,
+            0.75
+        );
+        Out.ar(out, Pan2.ar(o,pan,amp));
+    }, 0.1!4, metadata: (
+        // add our own custom spec
+        freq: ControlSpec(55,555,\exp,0.01,110,"Hz"),
+    )).add;
+    // inspect 
+    ~sdef.metadata
+)
+
+// Synth().makeGui is a convenience method for creating a SimpleGui
+// notice that the metadata is used for creating our 'freq' control
+x = Synth(\simplePartial).makeGui(true);
+