mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
This commit is contained in:
George Michael Brower
parent
446da7ba01
commit
561b4a1411
2
.gitignore
vendored
2
.gitignore
vendored
@ -1 +1 @@
|
||||
GUIDAT.tmproj
|
||||
.idea
|
||||
@ -26,7 +26,7 @@ function FizzyText(message) {
|
||||
createBitmap(message);
|
||||
});
|
||||
|
||||
// We can even add functions to the GUI! As long as they have
|
||||
// We can even add functions to the DAT.GUI! As long as they have
|
||||
// 0 arguments, we can call them from the dat-gui panel.
|
||||
|
||||
this.explode = function() {
|
||||
@ -205,7 +205,7 @@ function FizzyText(message) {
|
||||
this.x += Math.cos(angle) * _this.speed + this.vx;
|
||||
this.y += -Math.sin(angle) * _this.speed + this.vy;
|
||||
|
||||
this.r = GUI.constrain(this.r, 0, _this.maxSize);
|
||||
this.r = DAT.GUI.constrain(this.r, 0, _this.maxSize);
|
||||
|
||||
// If we're tiny, keep moving around until we find a black
|
||||
// pixel.
|
||||
|
||||
60
index.html
60
index.html
@ -1,6 +1,6 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<title>gui-dat</title>
|
||||
<title>dat.gui</title>
|
||||
|
||||
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
|
||||
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
@ -25,9 +25,9 @@
|
||||
|
||||
prettyPrint();
|
||||
|
||||
var fizzyText = new FizzyText("gui-dat");
|
||||
var fizzyText = new FizzyText("dat.gui");
|
||||
|
||||
var gui = new GUI();
|
||||
var gui = new DAT.GUI();
|
||||
|
||||
// Text field
|
||||
gui.add(fizzyText, "message");
|
||||
@ -107,20 +107,20 @@
|
||||
<body>
|
||||
<div id="container">
|
||||
|
||||
<!-- GUIDAT logo -->
|
||||
<!-- DAT.GUIDAT logo -->
|
||||
<div id="helvetica-demo"></div>
|
||||
|
||||
<!-- It gives you this! -->
|
||||
<div id="notifier"></div>
|
||||
|
||||
<h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png" border="0" alt="GUI-DAT flag" /></a></h1>
|
||||
<h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png" border="0" alt="dat.gui flag" /></a></h1>
|
||||
|
||||
<p><strong>gui-dat</strong> is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.</p>
|
||||
<p><strong>dat.gui</strong> is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://github.com/jonobr1/gui-dat/raw/versions/gui.min.js"><strong>Download the minified source</strong></a> <small>[11kb]</small></li>
|
||||
<li><a href="https://github.com/jonobr1/dat.gui/raw/versions/gui.min.js"><strong>Download the minified source</strong></a> <small>[11kb]</small></li>
|
||||
|
||||
<li><a href="http://github.com/jonobr1/gui-dat">Contribute on GitHub!</a></li>
|
||||
<li><a href="http://github.com/jonobr1/dat.gui">Contribute on GitHub!</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Basic Usage</h2>
|
||||
@ -130,9 +130,9 @@
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
var fizzyText = new <a href="demo/demo.js">FizzyText</a>("gui-dat");
|
||||
var fizzyText = new <a href="demo/demo.js">FizzyText</a>("dat.gui");
|
||||
|
||||
var gui = new GUI();
|
||||
var gui = new DAT.GUI();
|
||||
|
||||
// Text field
|
||||
gui.add(fizzyText, "message");
|
||||
@ -157,7 +157,7 @@ window.onload = function() {
|
||||
</pre>
|
||||
|
||||
<ul id="desc">
|
||||
<li><strong>gui-dat</strong> will infer the type of the property you're trying to add<br />
|
||||
<li><strong>dat.gui</strong> will infer the type of the property you're trying to add<br />
|
||||
(based on its initial value) and create the corresponding control.</li>
|
||||
|
||||
<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
|
||||
@ -173,10 +173,10 @@ window.onload = function() {
|
||||
<h2 class="section">Saving your parameters</h2>
|
||||
<div class="collapsable">
|
||||
<div>
|
||||
<p>The simplest way to save your parameters is via <code>GUI.saveURL()</code>. This method directs your browser to a URL containing the current GUI settings.</p>
|
||||
<p>The simplest way to save your parameters is via <code>DAT.GUI.saveURL()</code>. This method directs your browser to a URL containing the current GUI settings.</p>
|
||||
<pre class="prettyprint last">
|
||||
// Make a button for the url function
|
||||
gui.add(GUI, "saveURL");</pre>
|
||||
gui.add(DAT.GUI, "saveURL");</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -186,22 +186,22 @@ gui.add(GUI, "saveURL");</pre>
|
||||
<div>
|
||||
<p>Let's say you'd like to share your settings with someone. Instead of sending a long link with lots of parameters stored in it, you can make your saved settings the defaults.</p>
|
||||
|
||||
<p>First, add the method <code>GUI.showSaveString()</code> to a gui object:</p>
|
||||
<pre class="prettyprint">var gui = new GUI();
|
||||
<p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui object:</p>
|
||||
<pre class="prettyprint">var gui = new DAT.GUI();
|
||||
|
||||
// Add some stuff (and pretend I change their values);
|
||||
gui.add(someObject, "someProperty");
|
||||
gui.add(someObject, "someOtherProperty");
|
||||
|
||||
// Make a save button.
|
||||
gui.add(GUI, "showSaveString");</pre>
|
||||
gui.add(DAT.GUI, "showSaveString");</pre>
|
||||
|
||||
<p>Clicking the "showSaveString" button bring up an alert with a string. Copy and paste that string into the method <code>GUI.load()</code> before you instantiate any gui objects.</p>
|
||||
<p>Clicking the "showSaveString" button bring up an alert with a string. Copy and paste that string into the method <code>DAT.GUI.load()</code> before you instantiate any gui objects.</p>
|
||||
<pre class="prettyprint">
|
||||
// Replace COPIED STRING with the value you got from showSaveString()
|
||||
GUI.load("COPIED STRING");
|
||||
DAT.GUI.load("COPIED STRING");
|
||||
|
||||
var gui = new GUI();
|
||||
var gui = new DAT.GUI();
|
||||
|
||||
// Now these properties will be set to the values you just saved.
|
||||
gui.add(someObject, "someProperty");
|
||||
@ -239,7 +239,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
|
||||
});</pre>
|
||||
<p>Finally, if you'd like to do a little something extra when a function is called, use the following:</p>
|
||||
<pre class="prettyprint last">gui.add(obj, "functionName").onFire(function() {
|
||||
alert("You called a function with gui-dat");
|
||||
alert("You called a function with dat.gui");
|
||||
});</pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -248,7 +248,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
|
||||
<h2 class="section">Listen for variable changes outside of the GUI</h2>
|
||||
<div class="collapsable">
|
||||
<div>
|
||||
<p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
|
||||
<p>Let's say you have a variable that changes by itself from time to time. If you'd like the DAT.GUI to reflect those changes, use the <code>listen()</code> method.</p>
|
||||
<pre class="prettyprint last">gui.add(obj, "changingProperty").listen();</pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -258,7 +258,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
|
||||
<h2 class="section">Advanced listening</h2>
|
||||
<div class="collapsable">
|
||||
<div>
|
||||
<p>By default, <strong>gui-dat</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:</p>
|
||||
<p>By default, <strong>dat.gui</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:</p>
|
||||
<pre class="prettyprint">
|
||||
gui.autoListen = false; // disables internal interval
|
||||
gui.add(obj, "changingProperty").listen();
|
||||
@ -287,21 +287,21 @@ setInterval(function() {
|
||||
<h2 class="section">Multiple panels and custom placement</h2>
|
||||
<div class="collapsable">
|
||||
<div>
|
||||
<p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
|
||||
<pre class="prettyprint">var gui1 = new GUI();
|
||||
var gui2 = new GUI();
|
||||
<p>You can instantiate multiple <code>DAT.GUI</code> objects and name them however you'd like.</p>
|
||||
<pre class="prettyprint">var gui1 = new DAT.GUI();
|
||||
var gui2 = new DAT.GUI();
|
||||
|
||||
// The name function overwrites the "Show Controls" text.
|
||||
gui1.name("Utilities");
|
||||
gui2.name("Camera Placement");</pre>
|
||||
|
||||
<p>By default, <strong>gui-dat</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p>
|
||||
<p>By default, <strong>dat.gui</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p>
|
||||
<pre class="prettyprint last">
|
||||
// Notice this belongs to the GUI class (uppercase)
|
||||
// Notice this belongs to the DAT.GUI class (uppercase)
|
||||
// and not an instance thereof.
|
||||
GUI.autoPlace = false;
|
||||
DAT.GUI.autoPlace = false;
|
||||
|
||||
var gui = new GUI();
|
||||
var gui = new DAT.GUI();
|
||||
|
||||
// Do some custom styles ...
|
||||
gui.domElement.style.position = "absolute";
|
||||
@ -318,7 +318,7 @@ document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
|
||||
<div class="collapsable">
|
||||
<div>
|
||||
<ol id="secrets">
|
||||
<li><strong>gui-dat</strong> panels are resizeable. Drag the show/hide button.</li>
|
||||
<li><strong>dat.gui</strong> panels are resizeable. Drag the show/hide button.</li>
|
||||
|
||||
<li>Press 'H' to show/hide GUI's.</li>
|
||||
</ol>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
GUI.BooleanController = function() {
|
||||
DAT.GUI.BooleanController = function() {
|
||||
|
||||
this.type = "boolean";
|
||||
GUI.Controller.apply(this, arguments);
|
||||
DAT.GUI.Controller.apply(this, arguments);
|
||||
|
||||
var _this = this;
|
||||
var input = document.createElement('input');
|
||||
@ -40,8 +40,8 @@ GUI.BooleanController = function() {
|
||||
val = eval(val);
|
||||
} catch (e) {}
|
||||
}
|
||||
return GUI.Controller.prototype.setValue.call(this, val);
|
||||
return DAT.GUI.Controller.prototype.setValue.call(this, val);
|
||||
};
|
||||
|
||||
};
|
||||
GUI.extendController(GUI.BooleanController);
|
||||
DAT.GUI.extendController(DAT.GUI.BooleanController);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
GUI.Controller = function() {
|
||||
DAT.GUI.Controller = function() {
|
||||
|
||||
this.parent = arguments[0];
|
||||
this.object = arguments[1];
|
||||
@ -14,34 +14,34 @@ GUI.Controller = function() {
|
||||
this.name(this.propertyName);
|
||||
this.domElement.appendChild(this.propertyNameElement);
|
||||
|
||||
GUI.makeUnselectable(this.domElement);
|
||||
DAT.GUI.makeUnselectable(this.domElement);
|
||||
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.changeFunction = null;
|
||||
GUI.Controller.prototype.finishChangeFunction = null;
|
||||
DAT.GUI.Controller.prototype.changeFunction = null;
|
||||
DAT.GUI.Controller.prototype.finishChangeFunction = null;
|
||||
|
||||
GUI.Controller.prototype.name = function(n) {
|
||||
DAT.GUI.Controller.prototype.name = function(n) {
|
||||
this.propertyNameElement.innerHTML = n;
|
||||
return this;
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.reset = function() {
|
||||
DAT.GUI.Controller.prototype.reset = function() {
|
||||
this.setValue(this.initialValue);
|
||||
return this;
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.listen = function() {
|
||||
DAT.GUI.Controller.prototype.listen = function() {
|
||||
this.parent.listenTo(this);
|
||||
return this;
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.unlisten = function() {
|
||||
DAT.GUI.Controller.prototype.unlisten = function() {
|
||||
this.parent.unlistenTo(this); // <--- hasn't been tested yet
|
||||
return this;
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.setValue = function(n) {
|
||||
DAT.GUI.Controller.prototype.setValue = function(n) {
|
||||
this.object[this.propertyName] = n;
|
||||
if (this.changeFunction != null) {
|
||||
this.changeFunction.call(this, n);
|
||||
@ -50,23 +50,23 @@ GUI.Controller.prototype.setValue = function(n) {
|
||||
return this;
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.getValue = function() {
|
||||
DAT.GUI.Controller.prototype.getValue = function() {
|
||||
return this.object[this.propertyName];
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.updateDisplay = function() {};
|
||||
DAT.GUI.Controller.prototype.updateDisplay = function() {};
|
||||
|
||||
GUI.Controller.prototype.onChange = function(fnc) {
|
||||
DAT.GUI.Controller.prototype.onChange = function(fnc) {
|
||||
this.changeFunction = fnc;
|
||||
return this;
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.onFinishChange = function(fnc) {
|
||||
DAT.GUI.Controller.prototype.onFinishChange = function(fnc) {
|
||||
this.finishChangeFunction = fnc;
|
||||
return this;
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.options = function() {
|
||||
DAT.GUI.Controller.prototype.options = function() {
|
||||
var _this = this;
|
||||
var select = document.createElement('select');
|
||||
if (arguments.length == 1) {
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
GUI.FunctionController = function() {
|
||||
DAT.GUI.FunctionController = function() {
|
||||
|
||||
this.type = "function";
|
||||
|
||||
var _this = this;
|
||||
|
||||
GUI.Controller.apply(this, arguments);
|
||||
DAT.GUI.Controller.apply(this, arguments);
|
||||
|
||||
this.domElement.addEventListener('click', function() {
|
||||
_this.fire();
|
||||
@ -26,4 +26,4 @@ GUI.FunctionController = function() {
|
||||
_this.object[_this.propertyName].call(_this.object);
|
||||
};
|
||||
};
|
||||
GUI.extendController(GUI.FunctionController);
|
||||
DAT.GUI.extendController(DAT.GUI.FunctionController);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
GUI.NumberController = function() {
|
||||
DAT.GUI.NumberController = function() {
|
||||
|
||||
this.type = "number";
|
||||
|
||||
GUI.Controller.apply(this, arguments);
|
||||
DAT.GUI.Controller.apply(this, arguments);
|
||||
|
||||
var _this = this;
|
||||
|
||||
@ -38,7 +38,7 @@ GUI.NumberController = function() {
|
||||
var slider;
|
||||
|
||||
if (min != undefined && max != undefined) {
|
||||
slider = new GUI.Slider(this, min, max, step, this.getValue());
|
||||
slider = new DAT.GUI.Slider(this, min, max, step, this.getValue());
|
||||
this.domElement.appendChild(slider.domElement);
|
||||
}
|
||||
|
||||
@ -83,8 +83,8 @@ GUI.NumberController = function() {
|
||||
|
||||
var mouseup = function(e) {
|
||||
document.removeEventListener('mousemove', dragNumberField, false);
|
||||
GUI.makeSelectable(_this.parent.domElement);
|
||||
GUI.makeSelectable(numberField);
|
||||
DAT.GUI.makeSelectable(_this.parent.domElement);
|
||||
DAT.GUI.makeSelectable(numberField);
|
||||
if (clickedNumberField && !draggedNumberField) {
|
||||
numberField.focus();
|
||||
numberField.select();
|
||||
@ -107,8 +107,8 @@ GUI.NumberController = function() {
|
||||
// Or any other fields in this gui for that matter ...
|
||||
// TODO: Make makeUselectable go through each element and child element.
|
||||
|
||||
GUI.makeUnselectable(_this.parent.domElement);
|
||||
GUI.makeUnselectable(numberField);
|
||||
DAT.GUI.makeUnselectable(_this.parent.domElement);
|
||||
DAT.GUI.makeUnselectable(numberField);
|
||||
|
||||
if(slider) slider.domElement.className += ' active';
|
||||
|
||||
@ -123,7 +123,7 @@ GUI.NumberController = function() {
|
||||
this.options = function() {
|
||||
_this.noSlider();
|
||||
_this.domElement.removeChild(numberField);
|
||||
return GUI.Controller.prototype.options.apply(this, arguments);
|
||||
return DAT.GUI.Controller.prototype.options.apply(this, arguments);
|
||||
};
|
||||
|
||||
this.noSlider = function() {
|
||||
@ -143,14 +143,14 @@ GUI.NumberController = function() {
|
||||
val = max;
|
||||
}
|
||||
|
||||
return GUI.Controller.prototype.setValue.call(this, val);
|
||||
return DAT.GUI.Controller.prototype.setValue.call(this, val);
|
||||
|
||||
};
|
||||
|
||||
this.updateDisplay = function() {
|
||||
numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
|
||||
numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4);
|
||||
if (slider) slider.value = _this.getValue();
|
||||
};
|
||||
};
|
||||
|
||||
GUI.extendController(GUI.NumberController);
|
||||
DAT.GUI.extendController(DAT.GUI.NumberController);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
DAT.GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
|
||||
var clicked = false;
|
||||
var _this = this;
|
||||
@ -16,7 +16,8 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
var onDrag = function(e) {
|
||||
if (!clicked) return;
|
||||
var pos = findPos(_this.domElement);
|
||||
var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
|
||||
var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement
|
||||
.offsetWidth, min, max);
|
||||
val = Math.round(val/step)*step;
|
||||
numberController.setValue(val);
|
||||
};
|
||||
@ -54,7 +55,7 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
};
|
||||
|
||||
this.__defineSetter__('value', function(e) {
|
||||
var pct = GUI.map(e, min, max, 0, 100);
|
||||
var pct = DAT.GUI.map(e, min, max, 0, 100);
|
||||
this.fg.style.width = pct+"%";
|
||||
});
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
GUI.StringController = function() {
|
||||
DAT.GUI.StringController = function() {
|
||||
|
||||
this.type = "string";
|
||||
|
||||
var _this = this;
|
||||
GUI.Controller.apply(this, arguments);
|
||||
DAT.GUI.Controller.apply(this, arguments);
|
||||
|
||||
var input = document.createElement('input');
|
||||
|
||||
@ -37,11 +37,11 @@ GUI.StringController = function() {
|
||||
|
||||
this.options = function() {
|
||||
_this.domElement.removeChild(input);
|
||||
return GUI.Controller.prototype.options.apply(this, arguments);
|
||||
return DAT.GUI.Controller.prototype.options.apply(this, arguments);
|
||||
};
|
||||
|
||||
this.domElement.appendChild(input);
|
||||
|
||||
};
|
||||
|
||||
GUI.extendController(GUI.StringController);
|
||||
DAT.GUI.extendController(DAT.GUI.StringController);
|
||||
|
||||
236
src/gui.js
236
src/gui.js
@ -1,11 +1,11 @@
|
||||
var GUI = function(parameters) {
|
||||
var DAT = DAT || {};
|
||||
|
||||
DAT.GUI = function(parameters) {
|
||||
|
||||
if (parameters == undefined) {
|
||||
parameters = {};
|
||||
}
|
||||
|
||||
var _this = this;
|
||||
|
||||
var MIN_WIDTH = 240;
|
||||
var MAX_WIDTH = 500;
|
||||
|
||||
@ -41,7 +41,7 @@ var GUI = function(parameters) {
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
this.domElement.setAttribute('class', 'guidat');
|
||||
this.domElement.style.width = width+'px';
|
||||
this.domElement.style.width = width + 'px';
|
||||
|
||||
var controllerContainer = document.createElement('div');
|
||||
controllerContainer.setAttribute('class', 'guidat-controllers');
|
||||
@ -52,9 +52,9 @@ var GUI = function(parameters) {
|
||||
var scrollAmount = this.scrollTop;
|
||||
|
||||
if (e.wheelDelta) {
|
||||
scrollAmount+=e.wheelDelta;
|
||||
scrollAmount += e.wheelDelta;
|
||||
} else if (e.detail) {
|
||||
scrollAmount+=e.detail;
|
||||
scrollAmount += e.detail;
|
||||
}
|
||||
|
||||
if (e.preventDefault) {
|
||||
@ -102,7 +102,7 @@ var GUI = function(parameters) {
|
||||
|
||||
if (dmy > 0 &&
|
||||
curControllerContainerHeight > controllerHeight) {
|
||||
var d = GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0);
|
||||
var d = DAT.GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0);
|
||||
dmy *= d;
|
||||
}
|
||||
|
||||
@ -112,9 +112,9 @@ var GUI = function(parameters) {
|
||||
openHeight += dmy;
|
||||
width += dmx;
|
||||
curControllerContainerHeight += dmy;
|
||||
controllerContainer.style.height = openHeight+'px';
|
||||
width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
|
||||
_this.domElement.style.width = width+'px';
|
||||
controllerContainer.style.height = openHeight + 'px';
|
||||
width = DAT.GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
|
||||
_this.domElement.style.width = width + 'px';
|
||||
checkForOverflow();
|
||||
};
|
||||
|
||||
@ -157,17 +157,18 @@ var GUI = function(parameters) {
|
||||
|
||||
var singleControllerHeight = controllerContainer.children[0].offsetHeight;
|
||||
clearTimeout(resizeTimeout);
|
||||
var target = Math.round(curControllerContainerHeight/singleControllerHeight)*singleControllerHeight-1;
|
||||
var target = Math.round(curControllerContainerHeight / singleControllerHeight) * singleControllerHeight - 1;
|
||||
resizeTo = target;
|
||||
if (resizeTo <= 0) {
|
||||
_this.hide();
|
||||
openHeight = singleControllerHeight*2;
|
||||
openHeight = singleControllerHeight * 2;
|
||||
} else {
|
||||
openHeight = resizeTo;
|
||||
beginResize();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
;
|
||||
|
||||
|
||||
document.removeEventListener('mousemove', resize, false);
|
||||
@ -182,22 +183,22 @@ var GUI = function(parameters) {
|
||||
this.domElement.appendChild(controllerContainer);
|
||||
this.domElement.appendChild(toggleButton);
|
||||
|
||||
if ( parameters.domElement ) {
|
||||
GUI.autoPlace = false;
|
||||
if (parameters.domElement) {
|
||||
DAT.GUI.autoPlace = false;
|
||||
parameters.domElement.appendChild(this.domElement);
|
||||
}
|
||||
|
||||
if (GUI.autoPlace) {
|
||||
if(GUI.autoPlaceContainer == null) {
|
||||
GUI.autoPlaceContainer = document.createElement('div');
|
||||
GUI.autoPlaceContainer.setAttribute("id", "guidat");
|
||||
if (DAT.GUI.autoPlace) {
|
||||
if (DAT.GUI.autoPlaceContainer == null) {
|
||||
DAT.GUI.autoPlaceContainer = document.createElement('div');
|
||||
DAT.GUI.autoPlaceContainer.setAttribute("id", "guidat");
|
||||
|
||||
document.body.appendChild(GUI.autoPlaceContainer);
|
||||
document.body.appendChild(DAT.GUI.autoPlaceContainer);
|
||||
}
|
||||
GUI.autoPlaceContainer.appendChild(this.domElement);
|
||||
DAT.GUI.autoPlaceContainer.appendChild(this.domElement);
|
||||
}
|
||||
|
||||
this.autoListenIntervalTime = 1000/60;
|
||||
this.autoListenIntervalTime = 1000 / 60;
|
||||
|
||||
var createListenInterval = function() {
|
||||
listenInterval = setInterval(function() {
|
||||
@ -228,10 +229,10 @@ var GUI = function(parameters) {
|
||||
|
||||
this.unlistenTo = function(controller) {
|
||||
// TODO: test this
|
||||
for(var i = 0; i < listening.length; i++) {
|
||||
if(listening[i] == controller) listening.splice(i, 1);
|
||||
for (var i = 0; i < listening.length; i++) {
|
||||
if (listening[i] == controller) listening.splice(i, 1);
|
||||
}
|
||||
if(listening.length <= 0) {
|
||||
if (listening.length <= 0) {
|
||||
clearInterval(listenInterval);
|
||||
}
|
||||
};
|
||||
@ -264,6 +265,7 @@ var GUI = function(parameters) {
|
||||
function F() {
|
||||
return constructor.apply(this, args);
|
||||
}
|
||||
|
||||
F.prototype = constructor.prototype;
|
||||
return new F();
|
||||
};
|
||||
@ -275,7 +277,7 @@ var GUI = function(parameters) {
|
||||
|
||||
// Have we already added this?
|
||||
if (alreadyControlled(object, propertyName)) {
|
||||
// GUI.error("Controller for \"" + propertyName+"\" already added.");
|
||||
// DAT.GUI.error("Controller for \"" + propertyName+"\" already added.");
|
||||
// return;
|
||||
}
|
||||
|
||||
@ -283,7 +285,7 @@ var GUI = function(parameters) {
|
||||
|
||||
// Does this value exist? Is it accessible?
|
||||
if (value == undefined) {
|
||||
GUI.error(object + " either has no property \""+propertyName+"\", or the property is inaccessible.");
|
||||
DAT.GUI.error(object + " either has no property \"" + propertyName + "\", or the property is inaccessible.");
|
||||
return;
|
||||
}
|
||||
|
||||
@ -292,7 +294,7 @@ var GUI = function(parameters) {
|
||||
|
||||
// Do we know how to deal with this data type?
|
||||
if (handler == undefined) {
|
||||
GUI.error("Cannot create controller for data type \""+type+"\"");
|
||||
DAT.GUI.error("Cannot create controller for data type \"" + type + "\"");
|
||||
return;
|
||||
}
|
||||
|
||||
@ -305,20 +307,20 @@ var GUI = function(parameters) {
|
||||
|
||||
// Were we able to make the controller?
|
||||
if (!controllerObject) {
|
||||
GUI.error("Error creating controller for \""+propertyName+"\".");
|
||||
DAT.GUI.error("Error creating controller for \"" + propertyName + "\".");
|
||||
return;
|
||||
}
|
||||
|
||||
// Success.
|
||||
controllerContainer.appendChild(controllerObject.domElement);
|
||||
controllers.push(controllerObject);
|
||||
GUI.allControllers.push(controllerObject);
|
||||
DAT.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++;
|
||||
DAT.GUI.saveIndex < DAT.GUI.savedValues.length) {
|
||||
controllerObject.setValue(DAT.GUI.savedValues[DAT.GUI.saveIndex]);
|
||||
DAT.GUI.saveIndex++;
|
||||
}
|
||||
|
||||
// Compute sum height of controllers.
|
||||
@ -347,10 +349,10 @@ var GUI = function(parameters) {
|
||||
};
|
||||
|
||||
var handlerTypes = {
|
||||
"number": GUI.NumberController,
|
||||
"string": GUI.StringController,
|
||||
"boolean": GUI.BooleanController,
|
||||
"function": GUI.FunctionController
|
||||
"number": DAT.GUI.NumberController,
|
||||
"string": DAT.GUI.StringController,
|
||||
"boolean": DAT.GUI.BooleanController,
|
||||
"function": DAT.GUI.FunctionController
|
||||
};
|
||||
|
||||
var alreadyControlled = function(object, propertyName) {
|
||||
@ -368,6 +370,7 @@ var GUI = function(parameters) {
|
||||
function F() {
|
||||
return constructor.apply(this, args);
|
||||
}
|
||||
|
||||
F.prototype = constructor.prototype;
|
||||
return new F();
|
||||
};
|
||||
@ -376,7 +379,7 @@ var GUI = function(parameters) {
|
||||
// TODO
|
||||
}
|
||||
|
||||
// GUI ... GUI
|
||||
// DAT.GUI ... DAT.GUI
|
||||
|
||||
this.toggle = function() {
|
||||
open ? this.hide() : this.show();
|
||||
@ -410,63 +413,62 @@ var GUI = function(parameters) {
|
||||
|
||||
var beginResize = function() {
|
||||
//console.log("Resizing from " + curControllerContainerHeight + " to " + resizeTo);
|
||||
curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
|
||||
if (Math.abs(curControllerContainerHeight-resizeTo) < 1) {
|
||||
curControllerContainerHeight += (resizeTo - curControllerContainerHeight) * 0.6;
|
||||
if (Math.abs(curControllerContainerHeight - resizeTo) < 1) {
|
||||
curControllerContainerHeight = resizeTo;
|
||||
adaptToScrollbar();
|
||||
|
||||
} else {
|
||||
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();
|
||||
}
|
||||
|
||||
var adaptToScrollbar = function() {
|
||||
// Clears lingering slider column
|
||||
_this.domElement.style.width = (width+1)+'px';
|
||||
_this.domElement.style.width = (width + 1) + 'px';
|
||||
setTimeout(function() {
|
||||
_this.domElement.style.width = width+'px';
|
||||
_this.domElement.style.width = width + 'px';
|
||||
}, 1);
|
||||
};
|
||||
|
||||
// Load saved appearance:
|
||||
|
||||
if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
|
||||
if (DAT.GUI.guiIndex < DAT.GUI.savedAppearanceVars.length) {
|
||||
|
||||
width = parseInt(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][1]);
|
||||
_this.domElement.style.width = width + "px";
|
||||
|
||||
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
|
||||
_this.domElement.style.width = width+"px";
|
||||
|
||||
openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
|
||||
openHeight = parseInt(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][2]);
|
||||
explicitOpenHeight = true;
|
||||
if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) {
|
||||
if (eval(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][0]) == true) {
|
||||
curControllerContainerHeight = openHeight;
|
||||
var t = GUI.savedAppearanceVars[GUI.guiIndex][3]
|
||||
var t = DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][3]
|
||||
|
||||
// Hack.
|
||||
setTimeout(function() {
|
||||
controllerContainer.scrollTop = t;
|
||||
}, 0);
|
||||
|
||||
if (GUI.scrollTop > -1) {
|
||||
document.body.scrollTop = GUI.scrollTop;
|
||||
if (DAT.GUI.scrollTop > -1) {
|
||||
document.body.scrollTop = DAT.GUI.scrollTop;
|
||||
}
|
||||
resizeTo = openHeight;
|
||||
this.show();
|
||||
}
|
||||
|
||||
GUI.guiIndex++;
|
||||
DAT.GUI.guiIndex++;
|
||||
}
|
||||
|
||||
GUI.allGuis.push(this);
|
||||
DAT.GUI.allGuis.push(this);
|
||||
|
||||
// Add hide listener if this is the first GUI.
|
||||
if (GUI.allGuis.length == 1) {
|
||||
// Add hide listener if this is the first DAT.GUI.
|
||||
if (DAT.GUI.allGuis.length == 1) {
|
||||
window.addEventListener('keyup', function(e) {
|
||||
// Hide on "H"
|
||||
if (e.keyCode == 72) {
|
||||
GUI.toggleHide();
|
||||
DAT.GUI.toggleHide();
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
@ -474,92 +476,91 @@ var GUI = function(parameters) {
|
||||
};
|
||||
|
||||
// Do not set this directly.
|
||||
GUI.hidden = false;
|
||||
|
||||
DAT.GUI.hidden = false;
|
||||
|
||||
// Static members
|
||||
|
||||
GUI.autoPlace = true;
|
||||
GUI.autoPlaceContainer = null;
|
||||
GUI.allControllers = [];
|
||||
GUI.allGuis = [];
|
||||
DAT.GUI.autoPlace = true;
|
||||
DAT.GUI.autoPlaceContainer = null;
|
||||
DAT.GUI.allControllers = [];
|
||||
DAT.GUI.allGuis = [];
|
||||
|
||||
|
||||
GUI.toggleHide = function() {
|
||||
if (GUI.hidden) {
|
||||
GUI.show();
|
||||
DAT.GUI.toggleHide = function() {
|
||||
if (DAT.GUI.hidden) {
|
||||
DAT.GUI.show();
|
||||
} else {
|
||||
GUI.hide();
|
||||
DAT.GUI.hide();
|
||||
}
|
||||
}
|
||||
|
||||
GUI.show = function() {
|
||||
GUI.hidden = false;
|
||||
for (var i in GUI.allGuis) {
|
||||
GUI.allGuis[i].domElement.style.display = "block";
|
||||
DAT.GUI.show = function() {
|
||||
DAT.GUI.hidden = false;
|
||||
for (var i in DAT.GUI.allGuis) {
|
||||
DAT.GUI.allGuis[i].domElement.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
GUI.hide = function() {
|
||||
GUI.hidden = true;
|
||||
for (var i in GUI.allGuis) {
|
||||
GUI.allGuis[i].domElement.style.display = "none";
|
||||
DAT.GUI.hide = function() {
|
||||
DAT.GUI.hidden = true;
|
||||
for (var i in DAT.GUI.allGuis) {
|
||||
DAT.GUI.allGuis[i].domElement.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
GUI.saveURL = function() {
|
||||
var url = GUI.replaceGetVar("saveString", GUI.getSaveString());
|
||||
DAT.GUI.saveURL = function() {
|
||||
var url = DAT.GUI.replaceGetVar("saveString", DAT.GUI.getSaveString());
|
||||
window.location = url;
|
||||
};
|
||||
|
||||
GUI.scrollTop = -1;
|
||||
DAT.GUI.scrollTop = -1;
|
||||
|
||||
GUI.load = function(saveString) {
|
||||
DAT.GUI.load = function(saveString) {
|
||||
|
||||
//GUI.savedAppearanceVars = [];
|
||||
//DAT.GUI.savedAppearanceVars = [];
|
||||
var vals = saveString.split(",");
|
||||
var numGuis = parseInt(vals[0]);
|
||||
GUI.scrollTop = parseInt(vals[1]);
|
||||
DAT.GUI.scrollTop = parseInt(vals[1]);
|
||||
for (var i = 0; i < numGuis; i++) {
|
||||
var appr = vals.splice(2, 4);
|
||||
GUI.savedAppearanceVars.push(appr);
|
||||
DAT.GUI.savedAppearanceVars.push(appr);
|
||||
}
|
||||
|
||||
GUI.savedValues = vals.splice(2, vals.length);
|
||||
DAT.GUI.savedValues = vals.splice(2, vals.length);
|
||||
|
||||
};
|
||||
|
||||
GUI.savedValues = [];
|
||||
GUI.savedAppearanceVars = [];
|
||||
DAT.GUI.savedValues = [];
|
||||
DAT.GUI.savedAppearanceVars = [];
|
||||
|
||||
GUI.getSaveString = function() {
|
||||
DAT.GUI.getSaveString = function() {
|
||||
|
||||
var vals = [],
|
||||
i;
|
||||
|
||||
vals.push(GUI.allGuis.length);
|
||||
vals.push(DAT.GUI.allGuis.length);
|
||||
vals.push(document.body.scrollTop);
|
||||
|
||||
|
||||
for (i in GUI.allGuis) {
|
||||
var av = GUI.allGuis[i].appearanceVars();
|
||||
for (i in DAT.GUI.allGuis) {
|
||||
var av = DAT.GUI.allGuis[i].appearanceVars();
|
||||
for (var j = 0; j < av.length; j++) {
|
||||
vals.push(av[j]);
|
||||
}
|
||||
}
|
||||
|
||||
for (i in GUI.allControllers) {
|
||||
for (i in DAT.GUI.allControllers) {
|
||||
|
||||
// We don't save values for functions.
|
||||
if (GUI.allControllers[i].type == "function") {
|
||||
if (DAT.GUI.allControllers[i].type == "function") {
|
||||
continue;
|
||||
}
|
||||
|
||||
var v = GUI.allControllers[i].getValue();
|
||||
var v = DAT.GUI.allControllers[i].getValue();
|
||||
|
||||
// Round numbers so they don't get enormous
|
||||
if (GUI.allControllers[i].type == "number") {
|
||||
v = GUI.roundToDecimal(v, 4);
|
||||
if (DAT.GUI.allControllers[i].type == "number") {
|
||||
v = DAT.GUI.roundToDecimal(v, 4);
|
||||
}
|
||||
|
||||
vals.push(v);
|
||||
@ -570,7 +571,7 @@ GUI.getSaveString = function() {
|
||||
|
||||
};
|
||||
|
||||
GUI.getVarFromURL = function(v) {
|
||||
DAT.GUI.getVarFromURL = function(v) {
|
||||
|
||||
var vars = [], hash;
|
||||
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
||||
@ -587,7 +588,7 @@ GUI.getVarFromURL = function(v) {
|
||||
|
||||
};
|
||||
|
||||
GUI.replaceGetVar = function(varName, val) {
|
||||
DAT.GUI.replaceGetVar = function(varName, val) {
|
||||
|
||||
var vars = [], hash;
|
||||
var loc = window.location.href;
|
||||
@ -602,60 +603,63 @@ GUI.replaceGetVar = function(varName, val) {
|
||||
}
|
||||
|
||||
if (window.location.href.indexOf('?') != -1) {
|
||||
return loc + "&"+varName+"="+val;
|
||||
return loc + "&" + varName + "=" + val;
|
||||
}
|
||||
|
||||
return loc+"?"+varName+"="+val;
|
||||
return loc + "?" + varName + "=" + val;
|
||||
|
||||
};
|
||||
|
||||
GUI.saveIndex = 0;
|
||||
GUI.guiIndex = 0;
|
||||
DAT.GUI.saveIndex = 0;
|
||||
DAT.GUI.guiIndex = 0;
|
||||
|
||||
GUI.showSaveString = function() {
|
||||
alert(GUI.getSaveString());
|
||||
DAT.GUI.showSaveString = function() {
|
||||
alert(DAT.GUI.getSaveString());
|
||||
};
|
||||
|
||||
// Util functions
|
||||
|
||||
GUI.makeUnselectable = function(elem) {
|
||||
elem.onselectstart = function() { return false; };
|
||||
DAT.GUI.makeUnselectable = function(elem) {
|
||||
elem.onselectstart = function() {
|
||||
return false;
|
||||
};
|
||||
elem.style.MozUserSelect = "none";
|
||||
elem.style.KhtmlUserSelect = "none";
|
||||
elem.unselectable = "on";
|
||||
};
|
||||
|
||||
GUI.makeSelectable = function(elem) {
|
||||
elem.onselectstart = function() { };
|
||||
DAT.GUI.makeSelectable = function(elem) {
|
||||
elem.onselectstart = function() {
|
||||
};
|
||||
elem.style.MozUserSelect = "auto";
|
||||
elem.style.KhtmlUserSelect = "auto";
|
||||
elem.unselectable = "off";
|
||||
};
|
||||
|
||||
GUI.map = function(v, i1, i2, o1, o2) {
|
||||
DAT.GUI.map = function(v, i1, i2, o1, o2) {
|
||||
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
||||
};
|
||||
|
||||
GUI.constrain = function (v, o1, o2) {
|
||||
DAT.GUI.constrain = function (v, o1, o2) {
|
||||
if (v < o1) v = o1;
|
||||
else if (v > o2) v = o2;
|
||||
return v;
|
||||
};
|
||||
|
||||
GUI.error = function(str) {
|
||||
DAT.GUI.error = function(str) {
|
||||
if (typeof console.error == 'function') {
|
||||
console.error("[GUI ERROR] " + str);
|
||||
console.error("[DAT.GUI ERROR] " + str);
|
||||
}
|
||||
};
|
||||
|
||||
GUI.roundToDecimal = function(n, decimals) {
|
||||
DAT.GUI.roundToDecimal = function(n, decimals) {
|
||||
var t = Math.pow(10, decimals);
|
||||
return Math.round(n*t)/t;
|
||||
return Math.round(n * t) / t;
|
||||
};
|
||||
|
||||
GUI.extendController = function(clazz) {
|
||||
clazz.prototype = new GUI.Controller();
|
||||
DAT.GUI.extendController = function(clazz) {
|
||||
clazz.prototype = new DAT.GUI.Controller();
|
||||
clazz.prototype.constructor = clazz;
|
||||
};
|
||||
|
||||
if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));
|
||||
if (DAT.GUI.getVarFromURL('saveString') != null) DAT.GUI.load(DAT.GUI.getVarFromURL('saveString'));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user