From ea585f0de45a04c3a20a5cfa8cc0c8032a7fdef3 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Mon, 31 Jan 2011 10:47:07 -0500 Subject: [PATCH] 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 | 10 +++ controllers/controller.js | 9 ++ controllers/controller.number.js | 8 +- gui.js | 136 +++++++++++++++++++++++------- index.html | 4 +- 5 files changed, 128 insertions(+), 39 deletions(-) diff --git a/controllers/controller.boolean.js b/controllers/controller.boolean.js index f2e4607..8c52605 100644 --- a/controllers/controller.boolean.js +++ b/controllers/controller.boolean.js @@ -24,6 +24,16 @@ var BooleanController = function() { this.updateDisplay = 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(); diff --git a/controllers/controller.js b/controllers/controller.js index cd75609..59fdf29 100644 --- a/controllers/controller.js +++ b/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) { diff --git a/controllers/controller.number.js b/controllers/controller.number.js index 495577c..37e35ad 100644 --- a/controllers/controller.number.js +++ b/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(); } }; diff --git a/gui.js b/gui.js index 7eb4a01..db6020a 100644 --- a/gui.js +++ b/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(); @@ -302,27 +311,27 @@ var GUI = function() { controllerObject.setValue(GUI.savedValues[GUI.saveIndex]); GUI.saveIndex++; } - - + // Compute sum height of controllers. - controllerHeight = 0; - for (var i in controllers) { - controllerHeight += controllers[i].domElement.offsetHeight; - } - + checkForOverflow(); + 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(); + + // Round numbers so they don't get enormous + if (GUI.allControllers[i].type == "number") { + v = GUI.roundToDecimal(v, 4); + } + vals.push(v); + } - vals.join(','); - return vals; + + return vals.join(','); + } -GUI.getSaveStringFromURL = function() { +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()); \ No newline at end of file +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')); \ No newline at end of file diff --git a/index.html b/index.html index 062b5e1..a5c0527 100644 --- a/index.html +++ b/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);