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

controllers/controller.boolean.js

@@ -2,14 +2,15 @@ var BooleanController = function() {
 	this.type = "boolean";
 	Controller.apply(this, arguments);
 
-	var _this = this;
+	var that = this;
 	var input = document.createElement('input');
 	input.setAttribute('type', 'checkbox');
 
 	this.domElement.addEventListener('click', function(e) {
-    	input.checked = !input.checked;
 		e.preventDefault();
-    	_this.setValue(input.checked);
+		input.checked = !input.checked;
+		that.value = input.checked;
+		that.setTargetValue(that.value);
 	}, false);
 
 	input.addEventListener('mouseup', function(e) {

controllers/controller.function.js

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

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

@@ -5,19 +5,14 @@ var NumberController = function() {
 
 	Controller.apply(this, arguments);
 
-    var _this = this;
+	var that = this;
 
 	// 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
-    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;
-    
-    var min = arguments[2];
-    var max = arguments[3];
-    var step = arguments[4];
 
 	if (!step) {
 		step = min != undefined && max != undefined ? (max-min)*0.01: 1;
@@ -26,9 +21,11 @@ var NumberController = function() {
 	var numberField = document.createElement('input');
 	numberField.setAttribute('id', this.propertyName);
 
+	this.value = this.getTargetValue();
+
 	// Little up and down arrows are pissing me off.
 	numberField.setAttribute('type', 'text');
-    numberField.setAttribute('value', this.getValue());
+	numberField.setAttribute('value', this.value);
 
 	if (step) numberField.setAttribute('step', step);
 
@@ -37,22 +34,24 @@ var NumberController = function() {
 	var slider;
 
 	if (min != undefined && max != undefined) {
-    	slider = new Slider(this, min, max, step, this.getValue());
+		slider = new Slider(this, min, max, step, this.value);
 		this.domElement.appendChild(slider.domElement);
 	}
 
 	numberField.addEventListener('blur', function(e) {
 		var val = parseFloat(this.value);
 		if (!isNaN(val)) {
-	        _this.updateValue(val);
+			that.updateValue(val);
+			that.setTargetValue(that.value);
 		} else {
-        	this.value = _this.getValue();
+			this.value = that.value;
 		}
 	}, false);
 
 	numberField.addEventListener('mousewheel', function(e) {
 		e.preventDefault();
-    	this.updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
+		that.updateValue(that.value + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
+		that.setTargetValue(that.value);
 		return false;
 	}, false);
 
@@ -64,12 +63,14 @@ var NumberController = function() {
 
 	document.addEventListener('mouseup', function(e) {
 		document.removeEventListener('mousemove', dragNumberField, false);
-        _this.makeSelectable(_this.parent.domElement); 
+		that.makeSelectable(that.parent.domElement);
-        _this.makeSelectable(numberField);
+		that.makeSelectable(numberField);
+
 		if (clickedNumberField && !draggedNumberField) {
 			numberField.focus();
 			numberField.select();
 		}
+
 		draggedNumberField = false;
 		clickedNumberField = false;
 	}, false);
@@ -88,19 +89,21 @@ 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(_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) {
 
+		if (that.value != val) {
+
 			val = parseFloat(val);
 
 			if (min != undefined && val <= min) {
@@ -109,10 +112,13 @@ var NumberController = function() {
 				val = max;
 			}
 
-        _this.setValue(val);
+			that.value = val;
 
-        numberField.value = roundToDecimal(_this.getValue(), 4);
+			numberField.value = roundToDecimal(val, 4);
-        if (slider) slider.value = _this.getValue();
+
+			if (slider) slider.value = val;
+
+		}
 	}
 
 	var roundToDecimal = function(n, decimals) {

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) {

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 );