Saving via URL is on lock. Almost done making it so that panel appearance is saved as well, but bugs with resizing afterwards.

controllers/controller.boolean.js

@@ -25,6 +25,16 @@ var BooleanController = function() {
     	input.checked = _this.getValue();
     };
     
+    
+    this.setValue = function(val) {
+		if (typeof val != "boolean") {
+			try { 
+				val = eval(val);
+			} catch (e) {}
+		}
+		return Controller.prototype.setValue.call(this, val);
+    }
+
 };
 BooleanController.prototype = new Controller();
 BooleanController.prototype.constructor = BooleanController;

controllers/controller.js

@@ -4,6 +4,8 @@ var Controller = function() {
     this.object = arguments[1];
     this.propertyName = arguments[2];
 
+	if (arguments.length > 0) this.initialValue = this.propertyName[this.object];
+
     this.domElement = document.createElement('div');
     this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
     
@@ -23,12 +25,19 @@ Controller.prototype.name = function(n) {
 	return this;
 };
 
+Controller.prototype.reset = function() {
+	this.setValue(this.initialValue);
+	return this;
+};
+
 Controller.prototype.listen = function() {
 	this.parent.listenTo(this);
+	return this;
 }
 
 Controller.prototype.unlisten = function() {
 	this.parent.unlistenTo(this); // <--- hasn't been implemented yet
+	return this;
 }
     
 Controller.prototype.setValue = function(n) {

controllers/controller.number.js

@@ -53,7 +53,7 @@ var NumberController = function() {
     
     numberField.addEventListener('mousewheel', function(e) {
     	e.preventDefault();
-    	this.updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
+    	_this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
     	return false;
     }, false);
     
@@ -95,10 +95,6 @@ var NumberController = function() {
 		return false;
     }
     
-    var roundToDecimal = function(n, decimals) {
-	    var t = Math.pow(10, decimals);
-    	return Math.round(n*t)/t;
-    }
     
     
     this.setValue = function(val) {
@@ -116,7 +112,7 @@ var NumberController = function() {
     }
     
     this.updateDisplay = function() {
-        numberField.value = roundToDecimal(_this.getValue(), 4);
+        numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
         if (slider) slider.value = _this.getValue();
 	}
 };

gui.js

@@ -1,11 +1,8 @@
-
-
-
 var GUI = function() {
 
 	var _this = this;
 	
-	var MIN_WIDTH = 200;
+	var MIN_WIDTH = 240;
 	var MAX_WIDTH = 500;
 	
 	var controllers = [];
@@ -15,19 +12,24 @@ var GUI = function() {
 	
 	var listenInterval;
 	
-	
 	// Sum total of heights of controllers in this gui
 	var controllerHeight;
 	
 	var curControllerContainerHeight = 0;
 	
 	// How big we get when we open
+
+	
+	var _this = this;
+	
+	
+	
+	var open = false;
+	var width = 280;
+	var explicitOpenHeight = false;
 	var openHeight;
 	
-	var _this = this, open = false;
-	
 	var name;
-	var width = 280;
 	
 	var resizeTo = 0;
 	var resizeTimeout;
@@ -53,10 +55,6 @@ var GUI = function() {
 	var my, pmy, mx, pmx;
 	
 	var resize = function(e) {
-	if (!open) { 
-		open = true;
-		curControllerContainerHeight = openHeight = 0;
-	}
 		pmy = my;
 		pmx = mx;
 		my = e.pageY;
@@ -64,6 +62,18 @@ var GUI = function() {
 		
 		var dmy = my - pmy;
 		
+		
+	if (!open) { 
+		if (dmy > 0) {
+			open = true;
+			curControllerContainerHeight = openHeight = 1;
+			toggleButton.innerHTML = name || "Hide Controls";
+		} else {
+			return;
+		}
+	}
+
+		
 		// TODO: Flip this if you want to resize to the left.
 		var dmx = pmx - mx;
 		
@@ -145,7 +155,6 @@ var GUI = function() {
 				if (resizeTo <= 0) {
 					_this.hide();
 					openHeight = singleControllerHeight*2;
-					console.log("HIDING, wTF");
 				} else { 
 					openHeight = resizeTo;		
 					beginResize();			
@@ -303,26 +312,26 @@ var GUI = function() {
 			GUI.saveIndex++;
 		}
 	
-		
 		// Compute sum height of controllers.
-		controllerHeight = 0;
+		checkForOverflow();
-		for (var i in controllers) {
-			controllerHeight += controllers[i].domElement.offsetHeight;
-		}
 		
 		openHeight = controllerHeight;
 		
-		checkForOverflow();
 		return controllerObject;
 		
 	}
 	
 	var checkForOverflow = function() {
+		controllerHeight = 0;
+		for (var i in controllers) {
+			controllerHeight += controllers[i].domElement.offsetHeight;
+		}
 		if (controllerHeight - 1 > openHeight) {
 			controllerContainer.style.overflowY = "auto";
 		} else {
 			controllerContainer.style.overflowY = "hidden";
 		}	
+		console.log(controllerHeight, openHeight);
 	}
 	
 	var addHandlers = {
@@ -350,7 +359,9 @@ var GUI = function() {
         return new F();
     };
 
-
+	this.reset = function() {
+		//
+	}
 
 	// GUI ... GUI
 	
@@ -379,6 +390,11 @@ var GUI = function() {
 		toggleButton.innerHTML = n;
 	}
 	
+	// used in saveURL
+	this.appearanceVars = function() {
+		return [open, width, openHeight];
+	}
+	
 	var beginResize = function() {
 		//console.log("Resizing from " + curControllerContainerHeight + " to " + resizeTo);
 		curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
@@ -388,9 +404,26 @@ var GUI = function() {
 			resizeTimeout = setTimeout(beginResize, 1000/30);
 		}
 		controllerContainer.style.height = Math.round(curControllerContainerHeight)+'px';
-		
+		checkForOverflow();
 	}
 
+	if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
+
+		width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
+		_this.domElement.style.width = width+"px";
+		
+		openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
+		
+		if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) {
+		// TODO: weirdness on open ... 
+			this.show();
+		}
+
+		GUI.guiIndex++;
+	}
+
+	GUI.allGuis.push(this);
+
 };
 
 // Static members
@@ -398,6 +431,7 @@ var GUI = function() {
 GUI.autoPlace = true;
 GUI.autoPlaceContainer = null;
 GUI.allControllers = [];
+GUI.allGuis = [];
 
 GUI.saveURL = function() { 
 	title = window.location;
@@ -405,27 +439,60 @@ GUI.saveURL = function() {
 	window.location = url;
 };
 
+// TODO: Not working in FF.
 GUI.load = function(saveString) {
-	GUI.savedValues = saveString.split(",");
+	GUI.savedAppearanceVars = [];
+	var vals = saveString.split(',');
+	var numGuis = parseInt(vals[0]);
+	var vv = vals.splice(1, vals.length-1);
+	var numGuis = vals[0];
+	console.log(numGuis);
+	for (var i = 0; i < numGuis; i++) {
+		var appr = vv.splice(0, 3);
+		GUI.savedAppearanceVars.push(appr);
+	}
+	GUI.savedValues = vv;
 };
 
 GUI.savedValues = [];
+GUI.savedAppearanceVars = [];
 
 GUI.getSaveString = function() {
-	var s = "";
+
 	var vals = [];
+	
+	vals.push(GUI.allGuis.length);
+	
+	for (var i in GUI.allGuis) {
+		var av = GUI.allGuis[i].appearanceVars();
+		for (var j = 0; j <= GUI.allGuis.length; j++) {
+			vals.push(av[j]);
+		}
+	}	
+	
 	for (var i in GUI.allControllers) {
+	
+		// We don't save values for functions.
 		if (GUI.allControllers[i].type == "function") {
 			continue;
 		}
+		
 		var v = GUI.allControllers[i].getValue();
-		vals.push(v);
+		
-	}
+		// Round numbers so they don't get enormous
-	vals.join(',');
+		if (GUI.allControllers[i].type == "number") {
-	return vals;
+			v = GUI.roundToDecimal(v, 4);
 		}
 		
-GUI.getSaveStringFromURL = function() {
+		vals.push(v);
+		
+	}
+	
+	return vals.join(',');
+	
+}
+
+GUI.getVarFromURL = function(v) {
 
     var vars = [], hash;
     var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
@@ -433,7 +500,7 @@ GUI.getSaveStringFromURL = function() {
     for (var i = 0; i < hashes.length; i++) {
  		hash = hashes[i].split("=")
         if (hash == undefined) continue;
-		if (hash[0] == "saveString") {
+		if (hash[0] == v) {
 			return hash[1];
 		}
     }
@@ -448,7 +515,6 @@ GUI.replaceGetVar = function(varName, val) {
     var loc = window.location.href;
     var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
 
-	
     for (var i = 0; i < hashes.length; i++) {
  		hash = hashes[i].split("=")
         if (hash == undefined) continue;
@@ -466,6 +532,7 @@ GUI.replaceGetVar = function(varName, val) {
 };
 
 GUI.saveIndex = 0;
+GUI.guiIndex = 0;
 
 GUI.showSaveString = function() {
 	alert(GUI.getSaveString());
@@ -499,9 +566,14 @@ GUI.constrain = function (v, o1, o2) {
 }
 
 GUI.error = function(str) {
-	if (typeof console.log == 'function') {
+	if (typeof console.error == 'function') {
 		console.GUI.error("[GUI ERROR] " + str);
 	}
 };
 
-if (GUI.getSaveStringFromURL() != null) GUI.load(GUI.getSaveStringFromURL());
+GUI.roundToDecimal = function(n, decimals) {
+	var t = Math.pow(10, decimals);
+	return Math.round(n*t)/t;
+}
+
+if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));

index.html

@@ -39,11 +39,13 @@
 
                         var fizzyText = new FizzyText("gui-dat");
 
-                        //GUI.load("changed,3.2,0.10890000000000001,1.121,45,true");
                         var gui = new GUI();
+                        var gui2 = new GUI();
+
 						
                         // Text field
                         gui.add(fizzyText, "message");
+						gui2.add(window, "onload");
 
                         // Sliders with min and max
                         gui.add(fizzyText, "maxSize", 0.5, 7);