Changed Controller class to prototype syntax, added a method updateDisplay() for Controller (used by listen()), implemented by each Controller subclass.

controllers/controller.boolean.js

@@ -19,6 +19,10 @@ var BooleanController = function() {
     this.domElement.style.cursor = "pointer";
     this.propertyNameElement.style.cursor = "pointer";
     this.domElement.appendChild(input);
+    
+    this.updateDisplay = function() {
+    	input.checked = _this.getValue();
+    };
 
 };
 BooleanController.prototype = new Controller();

controllers/controller.js

@@ -1,54 +1,48 @@
 var Controller = function() {
 
-	var onChange = null;
+	this.parent = arguments[0];
+    this.object = arguments[1];
+    this.propertyName = arguments[2];
 
-    this.setName = function(n) {
-  	    this.propertyNameElement.innerHTML = n;
-  	    return this;
-    }
-    
-    this.setValue = function(n) {
-    	this.object[this.propertyName] = n;
-      	if (onChange != null) {
-      		onChange.call(this, n);
-      	}
-      	return this;
-    }
-    
-    this.getValue = function() {
-        return this.object[this.propertyName];
-    }
-    
-    this.onChange = function(fnc) {
-    	onChange = fnc;
-    	return this;
-    }
-    
-	this.makeUnselectable = function(elem) {
-		elem.onselectstart = function() { return false; };
-		elem.style.MozUserSelect = "none";
-		elem.style.KhtmlUserSelect = "none";
-		elem.unselectable = "on";
-	}
-    
-	this.makeSelectable = function(elem) {
-		elem.onselectstart = function() { };
-		elem.style.MozUserSelect = "auto";
-		elem.style.KhtmlUserSelect = "auto";
-		elem.unselectable = "off";
-	}
-    
     this.domElement = document.createElement('div');
     this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
-
-    this.object = arguments[0];
-    this.propertyName = arguments[1];
     
     this.propertyNameElement = document.createElement('span');
     this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
-    this.setName(this.propertyName);
+    this.name(this.propertyName);
     this.domElement.appendChild(this.propertyNameElement);
     
-    this.makeUnselectable(this.domElement);
+    GUI.makeUnselectable(this.domElement);
     
-};
+};
+
+Controller.prototype.changeFunction = null;
+
+Controller.prototype.name = function(n) {
+	this.propertyNameElement.innerHTML = n;
+	return this;
+};
+
+Controller.prototype.listen = function() {
+	this.parent.listenTo(this);
+}
+    
+Controller.prototype.setValue = function(n) {
+	this.object[this.propertyName] = n;
+	if (this.changeFunction != null) {
+		this.changeFunction.call(this, n);
+	}
+	this.updateDisplay();
+	return this;
+}
+    
+Controller.prototype.getValue = function() {
+	return this.object[this.propertyName];
+}
+
+Controller.prototype.updateDisplay = function() {}
+    
+Controller.prototype.onChange = function(fnc) {
+	this.changeFunction = fnc;
+	return this;
+}

controllers/controller.number.js

@@ -1,4 +1,3 @@
-// TODO: Provide alternate controllers for non-html5 browsers?
 var NumberController = function() {
 
 	this.type = "number";
@@ -15,9 +14,9 @@ var NumberController = function() {
     
     var y = py = 0;
     
-    var min = arguments[2];
+    var min = arguments[3];
-    var max = arguments[3];
+    var max = arguments[4];
-    var step = arguments[4];
+    var step = arguments[5];
     
     if (!step) {
     	if (min != undefined && max != undefined) {
@@ -27,8 +26,6 @@ var NumberController = function() {
     	}	
     }
     
-    console.log("step " + step);
-    
     var numberField = document.createElement('input');
     numberField.setAttribute('id', this.propertyName);
     
@@ -70,8 +67,8 @@ var NumberController = function() {
     
     document.addEventListener('mouseup', function(e) {
         document.removeEventListener('mousemove', dragNumberField, false);
-        _this.makeSelectable(GUI.domElement); 
+        GUI.makeSelectable(_this.parent.domElement); 
-        _this.makeSelectable(numberField);
+        GUI.makeSelectable(numberField);
         if (clickedNumberField && !draggedNumberField) { 
 	        numberField.focus();
 	        numberField.select();
@@ -80,12 +77,6 @@ var NumberController = function() {
         clickedNumberField = false;
     }, false);
     
-    // Kinda nast
-    if (navigator.appVersion.indexOf('chrome') != -1) {
-        document.addEventListener('mouseout', function(e) {
-            document.removeEventListener('mousemove', dragNumberField, false);
-        }, false);
-    }
     
     var dragNumberField = function(e) {
     	draggedNumberField = true;
@@ -94,19 +85,25 @@ var NumberController = function() {
 		// We don't want to be highlighting this field as we scroll.
 		// Or any other fields in this gui for that matter ... 
 		// TODO: Make makeUselectable go through each element and child element.
-		_this.makeUnselectable(GUI.domElement);
+		GUI.makeUnselectable(_this.parent.domElement);
-		_this.makeUnselectable(numberField);
+		GUI.makeUnselectable(numberField);
 		
 		py = y;
 		y = e.pageY;
 		var dy = py - y;
 		var newVal = _this.getValue() + dy*step;	
-		_this.updateValue(newVal);
+		_this.setValue(newVal);
 		return false;
     }
     
-    this.updateValue = function(val) {
+    var roundToDecimal = function(n, decimals) {
-
+	    var t = Math.pow(10, decimals);
+    	return Math.round(n*t)/t;
+    }
+    
+    
+    this.setValue = function(val) {
+    
 		val = parseFloat(val);
 		
     	if (min != undefined && val <= min) {
@@ -115,17 +112,15 @@ var NumberController = function() {
     		val = max;
     	}
     	
-        _this.setValue(val);
+    	return Controller.prototype.setValue.call(this, val);
-        
+    	
+    }
+    
+    this.updateDisplay = function() {
         numberField.value = roundToDecimal(_this.getValue(), 4);
         if (slider) slider.value = _this.getValue();
-    }
+	}
-    
+	
-    var roundToDecimal = function(n, decimals) {
-	    var t = Math.pow(10, decimals);
-    	return Math.round(n*t)/t;
-    }
-    
 };
 
 NumberController.prototype = new Controller();

controllers/controller.string.js

@@ -1,9 +1,7 @@
 var StringController = function() {
 	
 	this.type = "string";
-	
 	var _this = this;
-	
     Controller.apply(this, arguments);
     
     var input = document.createElement('input');
@@ -21,6 +19,10 @@ var StringController = function() {
         _this.setValue(input.value);
     }, false);
     
+    this.updateDisplay = function() {
+    	input.value = _this.getValue();
+    }
+    
     this.domElement.appendChild(input);
 };
 StringController.prototype = new Controller();

controllers/slider.js

@@ -1,6 +1,3 @@
-// TODO: Leaving the window while dragging the slider and then removing the mouse
-// still leaves slider in focus.
-// TODO: Problem with multiple sliders.
 var Slider = function(numberController, min, max, step, initValue) {
 	
 	var min = min;
@@ -20,13 +17,6 @@ var Slider = function(numberController, min, max, step, initValue) {
 	
 	this.domElement.appendChild(this.fg);
 	
-	var map = function(v, i1, i2, o1, o2) {
-		var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
-		if (v < o1) v = o1;
-		else if (v > o2) v = o2;
-		return v;
-	}
-	
 	var findPos = function(obj) {
 		var curleft = curtop = 0;
 		if (obj.offsetParent) {
@@ -39,16 +29,16 @@ var Slider = function(numberController, min, max, step, initValue) {
 	}
 	
 	this.__defineSetter__('value', function(e) {
-		var pct = map(e, min, max, 0, 100);
+		var pct = GUI.map(e, min, max, 0, 100);
 		this.fg.style.width = pct+"%";
 	});
 
 	var onDrag = function(e) {
 		if (!clicked) return;
 		var pos = findPos(_this.domElement);
-		var val = map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
+		var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
 		val = Math.round(val/step)*step;
-		numberController.updateValue(val);
+		numberController.setValue(val);
 	}
 	
 	this.domElement.addEventListener('mousedown', function(e) {

gui.js

@@ -1,8 +1,59 @@
-var GUI = new function() {
+var GUI = function() {
 
 	var _this = this;
 	
 	var controllers = [];
+	var listening = [];
+	
+	var autoListen = true;
+	var listenInterval;
+	this.autoListenIntervalTime = 1000/60;
+
+	var createListenInterval = function() {
+		listenInterval = setInterval(function() {
+			_this.listen();
+		}, this.autoListenIntervalTime);
+	}
+
+	
+	this.__defineSetter__("autoListen", function(v) {
+		autoListen = v;
+		if (!autoListen) {
+			clearInterval(listenInterval);
+		} else { 
+			if (listening.length > 0) createListenInterval();
+		}
+	});
+	
+	this.__defineGetter__("autoListen", function(v) {
+		return autoListen;
+	});
+	
+	this.listenTo = function(controller) {
+	 	// TODO: check for duplicates
+	 	if (listening.length == 0) {
+	 		createListenInterval();
+	 	}
+		listening.push(controller);
+	};
+	
+	this.unlistenTo = function(controller) {
+		// TODO 
+	};
+	
+	this.listen = function(whoToListenTo) {
+		
+		var arr = whoToListenTo || listening;
+		for (var i in arr) {
+			arr[i].updateDisplay();
+		}
+	};
+	
+	this.listenAll = function() {
+		this.listen(controllers);
+	}
+	
+	this.autoListen = true;
 
 	this.add = function() {
 	
@@ -38,7 +89,12 @@ var GUI = new function() {
 			return;
 		}
 	
-		var controllerObject = construct(handler, arguments);
+		var args = [_this];
+		for (var j = 0; j < arguments.length; j++) {
+			args.push(arguments[j]);
+		}
+	
+		var controllerObject = construct(handler, args);
 		
 		// Were we able to make the controller?
 		if (!controllerObject) {		
@@ -98,7 +154,7 @@ var GUI = new function() {
 	var domElementMarginTop = 300;
 	
 	this.start = function() {
-		
+	
 		this.domElement = document.createElement('div');
 		this.domElement.setAttribute('id', 'guidat');
 		
@@ -148,3 +204,26 @@ var GUI = new function() {
 	}
 	
 };
+
+// Util functions
+
+GUI.makeUnselectable = function(elem) {
+	elem.onselectstart = function() { return false; };
+	elem.style.MozUserSelect = "none";
+	elem.style.KhtmlUserSelect = "none";
+	elem.unselectable = "on";
+}
+    
+GUI.makeSelectable = function(elem) {
+	elem.onselectstart = function() { };
+	elem.style.MozUserSelect = "auto";
+	elem.style.KhtmlUserSelect = "auto";
+	elem.unselectable = "off";
+}
+
+GUI.map = function(v, i1, i2, o1, o2) {
+	var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
+	if (v < o1) v = o1;
+	else if (v > o2) v = o2;
+	return v;
+}

index.html

@@ -4,36 +4,49 @@
         
         <link rel="icon" type="image/png" href="demo/assets/favicon.png" />
         <link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
-        <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
+		<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
-        <script type="text/javascript" src="gui.min.js"></script>
+<!--        <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
+        <script type="text/javascript" src="gui.js"></script>
+        <script type="text/javascript" src="controllers/slider.js"></script>
+        <script type="text/javascript" src="controllers/controller.js"></script>
+        <script type="text/javascript" src="controllers/controller.number.js"></script>
+		<script type="text/javascript" src="controllers/controller.string.js"></script>
+		<script type="text/javascript" src="controllers/controller.boolean.js"></script>
+		<script type="text/javascript" src="controllers/controller.function.js"></script>
+
         <script type="text/javascript" src="demo/improvedNoise.js"></script>
         <script type="text/javascript" src="demo/demo.js"></script>
         <script type="text/javascript">
+        var fizzyText;
+        var gui;
             window.onload = function() {
 
-			   prettyPrint();
+//			   prettyPrint();
 
-               var fizzyText = new FizzyText("gui-dat");
+               fizzyText = new FizzyText("gui-dat");
 
-               GUI.start();
+               gui = new GUI();
+               gui.start();
                
                // Text field
-               GUI.add(fizzyText, "message");
+               gui.add(fizzyText, "message").listen();
 
                // Sliders with min and max
-               GUI.add(fizzyText, "maxSize", 0.5, 7);
+               gui.add(fizzyText, "maxSize", 0.5, 7);
-               GUI.add(fizzyText, "growthSpeed", 0.01, 1);
+               gui.add(fizzyText, "growthSpeed", 0.01, 1);
-               GUI.add(fizzyText, "speed", 0.1, 2);
+               gui.add(fizzyText, "speed", 0.1, 2);
                
                // Sliders with min, max and increment.
-               GUI.add(fizzyText, "noiseStrength", 10, 100, 5);
+               gui.add(fizzyText, "noiseStrength", 10, 100, 5);
                
                // Boolean checkbox
-               GUI.add(fizzyText, "displayOutline");
+               gui.add(fizzyText, "displayOutline").onChange(function(v) {
+               	alert(v);
+               });
 	
 			   // Fires a function called "explode"
-               GUI.add(fizzyText, "explode")
+               gui.add(fizzyText, "explode")
-                    .setName('Explode!');    // Specify a custom name.
+                  .name('Explode!');    // Specify a custom name.
                
             };
             
@@ -70,24 +83,25 @@ window.onload = function() {
 
    var fizzyText = new <a href="demo/demo.js">FizzyText</a>(&quot;gui-dat&quot;);
 
-   GUI.start();
+   var gui = new GUI();
+   gui.start();
    
    // Text field
-   GUI.add(fizzyText, &quot;message&quot;);
+   gui.add(fizzyText, &quot;message&quot;);
 
    // Sliders with min and max
-   GUI.add(fizzyText, &quot;maxSize&quot;, 0.5, 7);
+   gui.add(fizzyText, &quot;maxSize&quot;, 0.5, 7);
-   GUI.add(fizzyText, &quot;growthSpeed&quot;, 0.01, 1);
+   gui.add(fizzyText, &quot;growthSpeed&quot;, 0.01, 1);
-   GUI.add(fizzyText, &quot;speed&quot;, 0.1, 2);
+   gui.add(fizzyText, &quot;speed&quot;, 0.1, 2);
    
    // Sliders with min, max and increment
-   GUI.add(fizzyText, &quot;noiseStrength&quot;, 10, 100, 5);
+   gui.add(fizzyText, &quot;noiseStrength&quot;, 10, 100, 5);
    
    // Boolean checkbox
-   GUI.add(fizzyText, &quot;displayOutline&quot;);
+   gui.add(fizzyText, &quot;displayOutline&quot;);
 
    // Fires a function called &quot;explode&quot;
-   GUI.add(fizzyText, &quot;explode&quot;).setName(&quot;Explode!&quot;); // Specify a custom name.
+   gui.add(fizzyText, &quot;explode&quot;).name(&quot;Explode!&quot;); // Specify a custom name.
    
 };
 
@@ -97,17 +111,40 @@ window.onload = function() {
     		<li><strong>gui-dat</strong> will infer the type of the property you're trying to add<br/>(based on its initial value) and create the corresponding control.</li>
     		<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
     	</ul>
-    	<!--
 		<hr/>
-    	<h2>Monitor variable changes <em>outside</em> of the GUI</h2>
+		
-    	<p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
-    	<pre class="prettyprint">GUI.add(obj, "propName").listen();</pre>
-
     	<h2>Fire a function when someone uses a control</h2>
-    	<pre class="prettyprint">GUI.add(obj, "propName").onChange(function(n) {
+    	<pre class="prettyprint">gui.add(obj, "propName").onChange(function(n) {
 	alert("You changed me to " + n);
 });</pre>
--->
+<hr/>
+    	<h2>Listen for variable changes <em>outside</em> of the GUI</h2>
+    	<p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
+    	<pre class="prettyprint">gui.add(obj, "propName").listen();</pre>
+    	<hr/>
+    	<h2>Advanced listening</h2>
+		<p>By default, <strong>gui-dat</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:
+<pre class="prettyprint">
+gui.autoListen = false; // disables internal interval
+gui.add(obj, "propName").listen();
+
+// Make your own loop
+setInterval(function() {
+	gui.listen(); // updates values you've marked with listen()
+}, 1000 / 60);
+</pre>
+<p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p>
+<pre class="prettyprint">
+gui.autoListen = false; // disables internal interval
+gui.add(obj, "add");
+gui.add(obj, "lotsa");
+gui.add(obj, "properties");
+
+// Make your own loop
+setInterval(function() {
+	gui.listenAll(); // updates ALL values managed by this gui
+}, 1000 / 60);
+</pre>
 		<footer> 
             Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
         </footer>