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

This commit is contained in:
George Michael Brower 2011-01-31 10:47:07 -05:00
parent 5b38f59def
commit ea585f0de4
5 changed files with 128 additions and 39 deletions

View File

@ -24,6 +24,16 @@ var BooleanController = function() {
this.updateDisplay = function() { this.updateDisplay = function() {
input.checked = _this.getValue(); 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 = new Controller();

View File

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

View File

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

136
gui.js
View File

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

View File

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