mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
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:
parent
738b4d0d06
commit
5bde5f79a1
@ -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();
|
||||||
|
@ -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) {
|
||||||
|
@ -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
136
gui.js
@ -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'));
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user