Fixed loop issue. Now watched controllers don't set the value after updating.

controllers/controller.boolean.js

@@ -1,25 +1,26 @@
 var BooleanController = function() {
 	this.type = "boolean";
-    Controller.apply(this, arguments);
+	Controller.apply(this, arguments);
 
-	var _this = this;
+	var that = this;
-    var input = document.createElement('input');
+	var input = document.createElement('input');
-    input.setAttribute('type', 'checkbox');
+	input.setAttribute('type', 'checkbox');
-    
+
-    this.domElement.addEventListener('click', function(e) {
+	this.domElement.addEventListener('click', function(e) {
-    	input.checked = !input.checked;
+		e.preventDefault();
-    	e.preventDefault();
+		input.checked = !input.checked;
-    	_this.setValue(input.checked);
+		that.value = input.checked;
-    }, false);
+		that.setTargetValue(that.value);
-    
+	}, false);
-    input.addEventListener('mouseup', function(e) {
+
-    	input.checked = !input.checked; // counteracts default.
+	input.addEventListener('mouseup', function(e) {
-    }, false);
+		input.checked = !input.checked; // counteracts default.
-    
+	}, false);
-    this.domElement.style.cursor = "pointer";
+
-    this.propertyNameElement.style.cursor = "pointer";
+	this.domElement.style.cursor = "pointer";
-    this.domElement.appendChild(input);
+	this.propertyNameElement.style.cursor = "pointer";
+	this.domElement.appendChild(input);
 
 };
 BooleanController.prototype = new Controller();
-BooleanController.prototype.constructor = BooleanController;
+BooleanController.prototype.constructor = BooleanController;

controllers/controller.function.js

@@ -1,12 +1,12 @@
 var FunctionController = function() {
 	this.type = "function";
-	var _this = this;
+	var that = this;
-    Controller.apply(this, arguments);
+	Controller.apply(this, arguments);
-    this.domElement.addEventListener('click', function() {
+	this.domElement.addEventListener('click', function() {
-    	_this.object[_this.propertyName].call(_this.object);
+		that.object[that.propertyName].call(that.object);
-    }, false);
+	}, false);
-    this.domElement.style.cursor = "pointer";
+	this.domElement.style.cursor = "pointer";
-    this.propertyNameElement.style.cursor = "pointer";
+	this.propertyNameElement.style.cursor = "pointer";
 };
 FunctionController.prototype = new Controller();
-FunctionController.prototype.constructor = FunctionController;
+FunctionController.prototype.constructor = FunctionController;

controllers/controller.js

@@ -3,51 +3,52 @@ var Controller = function() {
 	var onChange = null;
 
 	this.parent = null;
+	this.value = null;
 
 	this.setName = function(n) {
 	    this.propertyNameElement.innerHTML = n;
 	    return this;
-	}
+	};
 
 	this.setWatched = function() {
 		this.parent.watchController(this);
 		return this;
-	}
+	};
 
-	this.getValue = function() {
+	this.getTargetValue = function() {
 		return this.object[this.propertyName];
-	}
+	};
 
-	this.setValue = function(n) {
+	this.setTargetValue = function(n) {
 		this.object[this.propertyName] = n;
 		if (onChange != null) {
 			onChange.call(this, n);
 		}
 		return this;
-	}
+	};
 
-	this.watchValue = function() {
+	this.watchTargetValue = function() {
 		this.updateValue(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);

controllers/controller.number.js

@@ -2,124 +2,130 @@
 var NumberController = function() {
 
 	this.type = "number";
-    
+
-    Controller.apply(this, arguments);
+	Controller.apply(this, arguments);
-    
+
-    var _this = this;
+	var that = this;
-    
+
-    // If we simply click and release a number field, we want to highlight it.
+	// If we simply click and release a number field, we want to highlight it.
-    // This variable keeps track of whether or not we've dragged
+	// This variable keeps track of whether or not we've dragged
-    var draggedNumberField = false;
+	var draggedNumberField = false, clickedNumberField = false,
-    
+	y = 0, py = 0;
-    var clickedNumberField = false;
+
-    
+	var min = arguments[2], max = arguments[3], step = arguments[4];
-    var y = py = 0;
+
-    
+	if (!step) {
-    var min = arguments[2];
+		step = min != undefined && max != undefined ? (max-min)*0.01: 1;
-    var max = arguments[3];
+	}
-    var step = arguments[4];
+
-    
+	var numberField = document.createElement('input');
-    if (!step) {
+	numberField.setAttribute('id', this.propertyName);
-	step = min != undefined && max != undefined ? (max-min)*0.01: 1;
+
-    }
+	this.value = this.getTargetValue();
-    
+
-    var numberField = document.createElement('input');
+	// Little up and down arrows are pissing me off.
-    numberField.setAttribute('id', this.propertyName);
+	numberField.setAttribute('type', 'text');
-    
+	numberField.setAttribute('value', this.value);
-    // Little up and down arrows are pissing me off.
+
-    numberField.setAttribute('type', 'text');
+	if (step) numberField.setAttribute('step', step);
-    numberField.setAttribute('value', this.getValue());
+
-    
+	this.domElement.appendChild(numberField);
-    if (step) numberField.setAttribute('step', step);
+
-    
+	var slider;
-    this.domElement.appendChild(numberField);
+
-    
+	if (min != undefined && max != undefined) {
-    var slider;
+		slider = new Slider(this, min, max, step, this.value);
-    
+		this.domElement.appendChild(slider.domElement);
-    if (min != undefined && max != undefined) {
+	}
-    	slider = new Slider(this, min, max, step, this.getValue());
+
-    	this.domElement.appendChild(slider.domElement);
+	numberField.addEventListener('blur', function(e) {
-    }
+		var val = parseFloat(this.value);
-    
+		if (!isNaN(val)) {
-    numberField.addEventListener('blur', function(e) {
+			that.updateValue(val);
-        var val = parseFloat(this.value);
+			that.setTargetValue(that.value);
-        if (!isNaN(val)) {
+		} else {
-	        _this.updateValue(val);
+			this.value = that.value;
-        } else { 
+		}
-        	this.value = _this.getValue();
+	}, false);
-        }
+
-    }, false);
+	numberField.addEventListener('mousewheel', function(e) {
-    
-    numberField.addEventListener('mousewheel', function(e) {
-    	e.preventDefault();
-    	this.updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
-    	return false;
-    }, false);
-    
-    numberField.addEventListener('mousedown', function(e) {
-        py = y = e.pageY;
-		clickedNumberField = true;
-        document.addEventListener('mousemove', dragNumberField, false);
-    }, false);
-    
-    document.addEventListener('mouseup', function(e) {
-        document.removeEventListener('mousemove', dragNumberField, false);
-        _this.makeSelectable(_this.parent.domElement); 
-        _this.makeSelectable(numberField);
-        if (clickedNumberField && !draggedNumberField) { 
-	        numberField.focus();
-	        numberField.select();
-        }
-        draggedNumberField = false;
-        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;
 		e.preventDefault();
-		
+		that.updateValue(that.value + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
+		that.setTargetValue(that.value);
+		return false;
+	}, false);
+
+	numberField.addEventListener('mousedown', function(e) {
+		py = y = e.pageY;
+		clickedNumberField = true;
+		document.addEventListener('mousemove', dragNumberField, false);
+	}, false);
+
+	document.addEventListener('mouseup', function(e) {
+		document.removeEventListener('mousemove', dragNumberField, false);
+		that.makeSelectable(that.parent.domElement);
+		that.makeSelectable(numberField);
+
+		if (clickedNumberField && !draggedNumberField) {
+			numberField.focus();
+			numberField.select();
+		}
+
+		draggedNumberField = false;
+		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;
+		e.preventDefault();
+
 		// We don't want to be highlighting this field as we scroll.
-		// Or any other fields in this gui for that matter ... 
+		// Or any other fields in this gui for that matter ...
 		// TODO: Make makeUselectable go through each element and child element.
-		_this.makeUnselectable(_this.parent.domElement);
+		that.makeUnselectable(that.parent.domElement);
-		_this.makeUnselectable(numberField);
+		that.makeUnselectable(numberField);
-		
+
 		py = y;
 		y = e.pageY;
 		var dy = py - y;
-		var newVal = _this.getValue() + dy*step;	
+		that.updateValue(that.value + dy*step);
-		_this.updateValue(newVal);
+		that.setTargetValue(that.value);
 		return false;
-    }
+	}
-    
+
-    this.updateValue = function(val) {
+	this.updateValue = function(val) {
+
+		if (that.value != val) {
+
+			val = parseFloat(val);
+
+			if (min != undefined && val <= min) {
+				val = min;
+			} else if (max != undefined && val >= max) {
+				val = max;
+			}
+
+			that.value = val;
+
+			numberField.value = roundToDecimal(val, 4);
+
+			if (slider) slider.value = val;
+
+		}
+	}
+
+	var roundToDecimal = function(n, decimals) {
+		var t = Math.pow(10, decimals);
+		return Math.round(n*t)/t;
+	}
 
-		val = parseFloat(val);
-		
-    	if (min != undefined && val <= min) {
-    		val = min;
-    	} else if (max != undefined && val >= max) { 
-    		val = max;
-    	}
-    	
-        _this.setValue(val);
-        
-        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

@@ -2,15 +2,14 @@ var StringController = function() {
 
 	this.type = "string";
 
-	var _this = this;
+	var that = this;
 
 	Controller.apply(this, arguments);
 
+	this.value = this.getTargetValue();
+
 	var input = document.createElement('input');
-
+	input.setAttribute('value', this.value);
-	var initialValue = this.getValue();
-
-	input.setAttribute('value', initialValue);
 	input.setAttribute('spellcheck', 'false');
 
 	this.domElement.addEventListener('mouseup', function() {
@@ -19,13 +18,15 @@ var StringController = function() {
 	}, false);
 
 	input.addEventListener('keyup', function() {
-		_this.setValue(input.value);
+		that.updateValue(input.value);
+		that.setTargetValue(that.value);
 	}, false);
 
 	this.domElement.appendChild(input);
 
 	this.updateValue = function(val) {
-		input.setAttribute('value', val);
+		that.value = val;
+		input.setAttribute('value', that.value);
 	}
 
 };

controllers/slider.js

@@ -49,6 +49,7 @@ var Slider = function(numberController, min, max, step, initValue) {
 		var val = map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
 		val = Math.round(val/step)*step;
 		numberController.updateValue(val);
+		numberController.setTargetValue(numberController.value);
 	}
 	
 	this.domElement.addEventListener('mousedown', function(e) {
@@ -70,4 +71,4 @@ var Slider = function(numberController, min, max, step, initValue) {
 	
 	this.value = initValue;	
 		
-}
+}

gui.js

@@ -25,7 +25,7 @@ var GUI = function () {
 	// Controllers Watcher
 	setInterval( function() {
 		for (var c in controllersWatched) {
-			controllersWatched[c].watchValue();
+			controllersWatched[c].watchTargetValue();
 		}
 	}, 1000 / 60 );