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
5b38f59def
commit
ea585f0de4
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
136
gui.js
136
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;
|
||||
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();
|
||||
vals.push(v);
|
||||
}
|
||||
vals.join(',');
|
||||
return vals;
|
||||
|
||||
// Round numbers so they don't get enormous
|
||||
if (GUI.allControllers[i].type == "number") {
|
||||
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'));
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user