mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Converted save methods to JSON representation. Now onto saving Timers.
This commit is contained in:
George Michael Brower
parent
9a24286b3f
commit
ffa9af2e82
@ -9,12 +9,13 @@ GUI.BooleanController = function() {
|
||||
|
||||
this.domElement.addEventListener('click', function(e) {
|
||||
// input.checked = !input.checked;
|
||||
// e.preventDefault();
|
||||
e.preventDefault();
|
||||
// _this.setValue(input.checked);
|
||||
}, false);
|
||||
|
||||
input.addEventListener('mouseup', function(e) {
|
||||
//input.checked = !input.checked; // counteracts default.
|
||||
input.checked = !input.checked; // counteracts default.
|
||||
|
||||
_this.setValue(this.checked);
|
||||
}, false);
|
||||
|
||||
|
||||
185
gui.js
185
gui.js
@ -1,6 +1,14 @@
|
||||
var GUI = function() {
|
||||
|
||||
GUI.allGuis.push(this);
|
||||
|
||||
if (GUI.loadedJSON != null && GUI.loadedJSON.guis.length > 0) {
|
||||
// Consume object at index 0
|
||||
var json = GUI.loadedJSON.guis.splice(0, 1)[0];
|
||||
}
|
||||
|
||||
var _this = this;
|
||||
|
||||
// For use with GUIScrubber
|
||||
this.timer = null;
|
||||
|
||||
@ -283,6 +291,7 @@ var GUI = function() {
|
||||
return new F();
|
||||
};
|
||||
|
||||
// TODO: Keep this? If so, controllerContainerHeight should be aware of these, which it is not.
|
||||
this.divider = function() {
|
||||
controllerContainer.appendChild(document.createElement('hr'));
|
||||
}
|
||||
@ -342,10 +351,11 @@ var GUI = function() {
|
||||
GUI.allControllers.push(controllerObject);
|
||||
|
||||
// Do we have a saved value for this controller?
|
||||
if (type != "function" &&
|
||||
GUI.saveIndex < GUI.savedValues.length) {
|
||||
controllerObject.setValue(GUI.savedValues[GUI.saveIndex]);
|
||||
GUI.saveIndex++;
|
||||
if (json.values.length > 0) {
|
||||
var val = json.values.splice(0, 1)[0];
|
||||
if (type != "function") {
|
||||
controllerObject.setValue(val);
|
||||
}
|
||||
}
|
||||
|
||||
// Compute sum height of controllers.
|
||||
@ -407,6 +417,27 @@ var GUI = function() {
|
||||
// TODO
|
||||
}
|
||||
|
||||
this.getJSON = function() {
|
||||
var values = [];
|
||||
for (var i in controllers) {
|
||||
var val;
|
||||
switch (controllers[i].type) {
|
||||
case 'function':
|
||||
val = null;
|
||||
break;
|
||||
case 'number':
|
||||
val = GUI.roundToDecimal(controllers[i].getValue(), 4);
|
||||
break;
|
||||
default:
|
||||
val = controllers[i].getValue();
|
||||
break;
|
||||
}
|
||||
values.push(val);
|
||||
|
||||
}
|
||||
return {open:open, width:width, openHeight:openHeight, scroll:controllerContainer.scrollTop, values:values}
|
||||
}
|
||||
|
||||
// GUI ... GUI
|
||||
|
||||
this.toggle = function() {
|
||||
@ -451,37 +482,32 @@ var GUI = function() {
|
||||
checkForOverflow();
|
||||
}
|
||||
|
||||
// Load saved appearance:
|
||||
|
||||
if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
|
||||
// Load saved appearance.
|
||||
if (json) {
|
||||
|
||||
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
|
||||
//_this.domElement.style.width = width+"px";
|
||||
width = json.width;
|
||||
_this.domElement.style.width = width+"px";
|
||||
|
||||
openHeight = json.openHeight;
|
||||
|
||||
openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
|
||||
explicitOpenHeight = true;
|
||||
if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) {
|
||||
|
||||
if (json.open) {
|
||||
curControllerContainerHeight = openHeight;
|
||||
var t = GUI.savedAppearanceVars[GUI.guiIndex][3]
|
||||
|
||||
// Hack.
|
||||
setTimeout(function() {
|
||||
controllerContainer.scrollTop = t;
|
||||
controllerContainer.scrollTop = json.scroll;
|
||||
}, 0);
|
||||
|
||||
// TODO: Check this -- don't really remember writing it.
|
||||
// Wouldn't it suggest I'm only saving one scrollTop position?
|
||||
if (GUI.scrollTop > -1) {
|
||||
document.body.scrollTop = GUI.scrollTop;
|
||||
}
|
||||
resizeTo = openHeight;
|
||||
this.show();
|
||||
}
|
||||
|
||||
GUI.guiIndex++;
|
||||
|
||||
}
|
||||
|
||||
// Add hide listener if this is the first GUI.
|
||||
if (GUI.allGuis.length == 0) {
|
||||
window.addEventListener('keyup', function(e) {
|
||||
// Hide on "H"
|
||||
@ -491,12 +517,8 @@ var GUI = function() {
|
||||
}, false);
|
||||
}
|
||||
|
||||
GUI.allGuis.push(this);
|
||||
|
||||
};
|
||||
|
||||
// Static members
|
||||
|
||||
// Do not set this directly.
|
||||
GUI.hidden = false;
|
||||
|
||||
@ -514,6 +536,7 @@ GUI.show = function() {
|
||||
GUI.allGuis[i].domElement.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
GUI.hide = function() {
|
||||
GUI.hidden = true;
|
||||
for (var i in GUI.allGuis) {
|
||||
@ -523,120 +546,10 @@ GUI.hide = function() {
|
||||
|
||||
GUI.autoPlace = true;
|
||||
GUI.autoPlaceContainer = null;
|
||||
|
||||
GUI.allControllers = [];
|
||||
GUI.allGuis = [];
|
||||
|
||||
GUI.saveURL = function() {
|
||||
title = window.location;
|
||||
url = GUI.replaceGetVar("saveString", GUI.getSaveString());
|
||||
window.location = url;
|
||||
};
|
||||
|
||||
GUI.scrollTop = -1;
|
||||
|
||||
GUI.load = function(saveString) {
|
||||
|
||||
//GUI.savedAppearanceVars = [];
|
||||
var vals = saveString.split(",");
|
||||
var numGuis = parseInt(vals[0]);
|
||||
GUI.scrollTop = parseInt(vals[1]);
|
||||
for (var i = 0; i < numGuis; i++) {
|
||||
var appr = vals.splice(2, 4);
|
||||
GUI.savedAppearanceVars.push(appr);
|
||||
}
|
||||
|
||||
GUI.savedValues = vals.splice(2, vals.length);
|
||||
|
||||
};
|
||||
|
||||
GUI.savedValues = [];
|
||||
GUI.savedAppearanceVars = [];
|
||||
|
||||
GUI.getSaveString = function() {
|
||||
|
||||
var vals = [];
|
||||
|
||||
vals.push(GUI.allGuis.length);
|
||||
vals.push(document.body.scrollTop);
|
||||
|
||||
|
||||
for (var i in GUI.allGuis) {
|
||||
var av = GUI.allGuis[i].appearanceVars();
|
||||
for (var j = 0; j < av.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);
|
||||
|
||||
}
|
||||
|
||||
return vals.join(',');
|
||||
|
||||
}
|
||||
|
||||
GUI.getVarFromURL = function(v) {
|
||||
|
||||
var vars = [], hash;
|
||||
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;
|
||||
if (hash[0] == v) {
|
||||
return hash[1];
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
|
||||
};
|
||||
|
||||
GUI.replaceGetVar = function(varName, val) {
|
||||
|
||||
var vars = [], hash;
|
||||
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;
|
||||
if (hash[0] == varName) {
|
||||
return loc.replace(hash[1], val);
|
||||
}
|
||||
}
|
||||
|
||||
if (window.location.href.indexOf('?') != -1) {
|
||||
return loc + "&"+varName+"="+val;
|
||||
}
|
||||
|
||||
return loc+"?"+varName+"="+val;
|
||||
|
||||
};
|
||||
|
||||
GUI.saveIndex = 0;
|
||||
GUI.guiIndex = 0;
|
||||
|
||||
GUI.showSaveString = function() {
|
||||
alert(GUI.getSaveString());
|
||||
}
|
||||
|
||||
// Util functions
|
||||
|
||||
GUI.makeUnselectable = function(elem) {
|
||||
elem.onselectstart = function() { return false; };
|
||||
elem.style.MozUserSelect = "none";
|
||||
@ -694,7 +607,3 @@ GUI.extendController = function(clazz) {
|
||||
clazz.prototype = new GUI.Controller();
|
||||
clazz.prototype.constructor = clazz;
|
||||
}
|
||||
|
||||
GUI.disableKeyListeners = false;
|
||||
|
||||
if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));
|
||||
71
index.html
71
index.html
@ -7,82 +7,49 @@
|
||||
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
|
||||
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="gui.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/slider.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.boolean.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.function.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.number.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.string.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="time/scrubber.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="time/timer.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="demo/improvedNoise.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="demo/prettify.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="demo/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="gui.js"></script>
|
||||
<script type="text/javascript" src="controllers/slider.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.function.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.number.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.string.js"></script>
|
||||
<script type="text/javascript" src="time/scrubber.js"></script>
|
||||
<script type="text/javascript" src="time/timer.js"></script>
|
||||
<script type="text/javascript" src="demo/improvedNoise.js"></script>
|
||||
<script type="text/javascript" src="demo/prettify.js"></script>
|
||||
<script type="text/javascript" src="demo/demo.js"></script>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
var timer;
|
||||
window.onload = function() {
|
||||
|
||||
var fizzyText = new FizzyText("gui-dat");
|
||||
GUI.loadJSON('{"guis":[{"open":true,"width":279,"openHeight":95,"scroll":0,"values":["gui-datddd",3.315,0.5841]},{"open":true,"width":283,"openHeight":127,"scroll":0,"values":[1.71,45,true,null]}],"timers":[]}');
|
||||
|
||||
GUI.load('{"windowMin":-2500,"windowWidth":10000,"playhead":0,"snapIncrement":250,"scrubbers":[{"points":[{"value":"gui-dat","time":1},{"value":"is","time":1000},{"value":"getting","time":2000},{"value":"pretty","time":3000},{"value":"tight","time":4000}]},{"points":[]},{"points":[]},{"points":[]},{"points":[]},{"points":[]},{"points":[{"time":1000},{"time":2000},{"time":3000},{"time":4000}]}]}');
|
||||
var fizzyText = new FizzyText("gui-dat");
|
||||
|
||||
var gui = new GUI();
|
||||
|
||||
var gui2 = new GUI();
|
||||
|
||||
var gui3 = new GUI();
|
||||
timer = new GUI.Timer(gui);
|
||||
|
||||
// Text field
|
||||
gui.add(fizzyText, "message")
|
||||
.at(1, "gui-dat")
|
||||
.at(1000, "is")
|
||||
.at(2000, "getting")
|
||||
.at(3000, "pretty")
|
||||
.at(4000, "tight");
|
||||
gui.add(fizzyText, "message");
|
||||
|
||||
// Sliders with min and max
|
||||
gui.add(fizzyText, "maxSize", 0.5, 7);
|
||||
gui.add(fizzyText, "growthSpeed", 0.01, 1);
|
||||
|
||||
gui.add(fizzyText, "speed", 0.1, 2);
|
||||
gui2.add(fizzyText, "speed", 0.1, 2);
|
||||
|
||||
// Sliders with min, max and increment.
|
||||
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
|
||||
gui2.add(fizzyText, "noiseStrength", 10, 100, 5);
|
||||
|
||||
// Boolean checkbox
|
||||
gui.add(fizzyText, "displayOutline");
|
||||
gui2.add(fizzyText, "displayOutline");
|
||||
|
||||
// Fires a function called "explode"
|
||||
gui.add(fizzyText, "explode")
|
||||
.at(1000)
|
||||
.at(2000)
|
||||
.at(3000)
|
||||
.at(4000);
|
||||
gui2.add(fizzyText, "explode");
|
||||
|
||||
gui2.add(timer, "playhead").step(125).listen();
|
||||
gui2.add(timer, "playPause");
|
||||
gui2.add(timer, "snapIncrement");
|
||||
gui2.add(timer, "useSnap");
|
||||
|
||||
gui3.add(timer, "windowMin").listen();
|
||||
gui3.add(timer, "windowWidth", 0, 20000).listen();
|
||||
|
||||
console.log(JSON.stringify(timer.getSaveObject()));
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,19 +1,3 @@
|
||||
GUI.Controller.prototype.at = function(when, what, tween) {
|
||||
if (!this.scrubber) {
|
||||
GUI.error('You must create a new Timer for this GUI in order to define events.');
|
||||
return this;
|
||||
}
|
||||
this.scrubber.add(new GUI.ScrubberPoint(this.scrubber, when, what));
|
||||
this.scrubber.render();
|
||||
return this;
|
||||
}
|
||||
|
||||
GUI.downloadText = function(text) {
|
||||
var url = 'data:application/plain;charset=utf-8,' + escape( text );
|
||||
console.log(url);
|
||||
window.open( url, '_blank' );
|
||||
}
|
||||
|
||||
GUI.Scrubber = function(controller, timer) {
|
||||
|
||||
var _this = this;
|
||||
@ -28,11 +12,11 @@ GUI.Scrubber = function(controller, timer) {
|
||||
var previouslyHandled;
|
||||
this.position = null;
|
||||
|
||||
this.getSaveObject = function() {
|
||||
this.getJSON = function() {
|
||||
|
||||
var pointArray = [];
|
||||
for (var i in this.points) {
|
||||
pointArray.push(this.points[i].getSaveObject());
|
||||
pointArray.push(this.points[i].getJSON());
|
||||
}
|
||||
var obj = {'points': pointArray};
|
||||
|
||||
@ -48,7 +32,7 @@ GUI.Scrubber = function(controller, timer) {
|
||||
|
||||
this.add = function(p) {
|
||||
this.points.push(p);
|
||||
this.getSaveObject();
|
||||
this.getJSON();
|
||||
this.sort();
|
||||
};
|
||||
|
||||
@ -467,7 +451,7 @@ GUI.ScrubberPoint = function(scrubber, time, value) {
|
||||
}
|
||||
}
|
||||
|
||||
this.getSaveObject = function() {
|
||||
this.getJSON = function() {
|
||||
var obj = { 'value': _this.value, 'time': time };
|
||||
|
||||
// TODO: save tweens
|
||||
|
||||
@ -1,10 +1,47 @@
|
||||
GUI.millis = function() {
|
||||
var d = new Date();
|
||||
return d.getTime();
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.at = function(when, what, tween) {
|
||||
if (!this.scrubber) {
|
||||
GUI.error('You must create a new Timer for this GUI in order to define events.');
|
||||
return this;
|
||||
}
|
||||
this.scrubber.add(new GUI.ScrubberPoint(this.scrubber, when, what));
|
||||
this.scrubber.render();
|
||||
return this;
|
||||
}
|
||||
|
||||
GUI.loadJSON = function(json) {
|
||||
if (typeof json == 'string') {
|
||||
json = eval('('+json+')');
|
||||
}
|
||||
GUI.loadedJSON = json;
|
||||
}
|
||||
|
||||
|
||||
GUI.loadedJSON = null;
|
||||
|
||||
GUI.getJSON = function() {
|
||||
var guis = [], timers = [];
|
||||
for (var i in GUI.allGuis) {
|
||||
guis.push(GUI.allGuis[i].getJSON());
|
||||
}
|
||||
for (var i in GUI.allTimers) {
|
||||
timers.push(GUI.allTimers[i].getJSON());
|
||||
}
|
||||
|
||||
var obj = {guis:guis, timers:timers};
|
||||
return obj;
|
||||
}
|
||||
|
||||
GUI.allTimers = [];
|
||||
|
||||
GUI.Timer = function(gui) {
|
||||
|
||||
GUI.allTimers.push(this);
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.hoverPoint = null;
|
||||
@ -122,12 +159,12 @@ GUI.Timer = function(gui) {
|
||||
}
|
||||
}, false);
|
||||
|
||||
this.getSaveObject = function() {
|
||||
this.getJSON = function() {
|
||||
|
||||
var scrubberArr = [];
|
||||
|
||||
for (var i in _this.scrubbers) {
|
||||
scrubberArr.push(_this.scrubbers[i].getSaveObject());
|
||||
scrubberArr.push(_this.scrubbers[i].getJSON());
|
||||
}
|
||||
|
||||
var obj = {'windowMin':_this.windowMin,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user