library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Moved everything to the DAT namespace, and officially renamed the project dat.gui :)

Browse Source
This commit is contained in:
George Michael Brower 2011-04-18 12:01:45 -07:00
parent 446da7ba01
commit 561b4a1411
10 changed files with 657 additions and 652 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1 +1 @@
GUIDAT.tmproj .idea

4
demo/demo.js
View File

@ -26,7 +26,7 @@ function FizzyText(message) {
createBitmap(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. // 0 arguments, we can call them from the dat-gui panel.
this.explode = function() { this.explode = function() {
@ -205,7 +205,7 @@ function FizzyText(message) {
this.x += Math.cos(angle) * _this.speed + this.vx; this.x += Math.cos(angle) * _this.speed + this.vx;
this.y += -Math.sin(angle) * _this.speed + this.vy; 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 // If we're tiny, keep moving around until we find a black
// pixel. // pixel.

60
index.html
View File

@ -1,6 +1,6 @@
<!doctype html> <!doctype html>
<head> <head>
<title>gui-dat</title> <title>dat.gui</title>
<link rel="icon" type="image/png" href="demo/assets/favicon.png" /> <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="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
@ -25,9 +25,9 @@
prettyPrint(); prettyPrint();
var fizzyText = new FizzyText("gui-dat"); var fizzyText = new FizzyText("dat.gui");
var gui = new GUI(); var gui = new DAT.GUI();
// Text field // Text field
gui.add(fizzyText, "message"); gui.add(fizzyText, "message");
@ -107,20 +107,20 @@
<body> <body>
<div id="container"> <div id="container">
<!-- GUIDAT logo --> <!-- DAT.GUIDAT logo -->
<div id="helvetica-demo"></div> <div id="helvetica-demo"></div>
<!-- It gives you this! --> <!-- It gives you this! -->
<div id="notifier"></div> <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> <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> </ul>
<h2>Basic Usage</h2> <h2>Basic Usage</h2>
@ -130,9 +130,9 @@
window.onload = function() { 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 // Text field
gui.add(fizzyText, "message"); gui.add(fizzyText, "message");
@ -157,7 +157,7 @@ window.onload = function() {
</pre> </pre>
<ul id="desc"> <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> (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> <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> <h2 class="section">Saving your parameters</h2>
<div class="collapsable"> <div class="collapsable">
<div> <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"> <pre class="prettyprint last">
// Make a button for the url function // Make a button for the url function
gui.add(GUI, "saveURL");</pre> gui.add(DAT.GUI, "saveURL");</pre>
</div> </div>
</div> </div>
</div> </div>
@ -186,22 +186,22 @@ gui.add(GUI, "saveURL");</pre>
<div> <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>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> <p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui object:</p>
<pre class="prettyprint">var gui = new GUI(); <pre class="prettyprint">var gui = new DAT.GUI();
// Add some stuff (and pretend I change their values); // Add some stuff (and pretend I change their values);
gui.add(someObject, "someProperty"); gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty"); gui.add(someObject, "someOtherProperty");
// Make a save button. // 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"> <pre class="prettyprint">
// Replace COPIED STRING with the value you got from showSaveString() // 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. // Now these properties will be set to the values you just saved.
gui.add(someObject, "someProperty"); gui.add(someObject, "someProperty");
@ -239,7 +239,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
});</pre> });</pre>
<p>Finally, if you'd like to do a little something extra when a function is called, use the following:</p> <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() { <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> });</pre>
</div> </div>
</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> <h2 class="section">Listen for variable changes outside of the GUI</h2>
<div class="collapsable"> <div class="collapsable">
<div> <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> <pre class="prettyprint last">gui.add(obj, "changingProperty").listen();</pre>
</div> </div>
</div> </div>
@ -258,7 +258,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
<h2 class="section">Advanced listening</h2> <h2 class="section">Advanced listening</h2>
<div class="collapsable"> <div class="collapsable">
<div> <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"> <pre class="prettyprint">
gui.autoListen = false; // disables internal interval gui.autoListen = false; // disables internal interval
gui.add(obj, "changingProperty").listen(); gui.add(obj, "changingProperty").listen();
@ -287,21 +287,21 @@ setInterval(function() {
<h2 class="section">Multiple panels and custom placement</h2> <h2 class="section">Multiple panels and custom placement</h2>
<div class="collapsable"> <div class="collapsable">
<div> <div>
<p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p> <p>You can instantiate multiple <code>DAT.GUI</code> objects and name them however you'd like.</p>
<pre class="prettyprint">var gui1 = new GUI(); <pre class="prettyprint">var gui1 = new DAT.GUI();
var gui2 = new GUI(); var gui2 = new DAT.GUI();
// The name function overwrites the "Show Controls" text. // The name function overwrites the "Show Controls" text.
gui1.name("Utilities"); gui1.name("Utilities");
gui2.name("Camera Placement");</pre> 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"> <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. // 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 ... // Do some custom styles ...
gui.domElement.style.position = "absolute"; gui.domElement.style.position = "absolute";
@ -318,7 +318,7 @@ document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
<div class="collapsable"> <div class="collapsable">
<div> <div>
<ol id="secrets"> <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&apos;s.</li> <li>Press 'H' to show/hide GUI&apos;s.</li>
</ol> </ol>

8
src/controllers/boolean.js
View File

@ -1,7 +1,7 @@
GUI.BooleanController = function() { DAT.GUI.BooleanController = function() {
this.type = "boolean"; this.type = "boolean";
GUI.Controller.apply(this, arguments); DAT.GUI.Controller.apply(this, arguments);
var _this = this; var _this = this;
var input = document.createElement('input'); var input = document.createElement('input');
@ -40,8 +40,8 @@ GUI.BooleanController = function() {
val = eval(val); val = eval(val);
} catch (e) {} } 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);

28
src/controllers/controller.js
View File

@ -1,4 +1,4 @@
GUI.Controller = function() { DAT.GUI.Controller = function() {
this.parent = arguments[0]; this.parent = arguments[0];
this.object = arguments[1]; this.object = arguments[1];
@ -14,34 +14,34 @@ GUI.Controller = function() {
this.name(this.propertyName); this.name(this.propertyName);
this.domElement.appendChild(this.propertyNameElement); this.domElement.appendChild(this.propertyNameElement);
GUI.makeUnselectable(this.domElement); DAT.GUI.makeUnselectable(this.domElement);
}; };
GUI.Controller.prototype.changeFunction = null; DAT.GUI.Controller.prototype.changeFunction = null;
GUI.Controller.prototype.finishChangeFunction = null; DAT.GUI.Controller.prototype.finishChangeFunction = null;
GUI.Controller.prototype.name = function(n) { DAT.GUI.Controller.prototype.name = function(n) {
this.propertyNameElement.innerHTML = n; this.propertyNameElement.innerHTML = n;
return this; return this;
}; };
GUI.Controller.prototype.reset = function() { DAT.GUI.Controller.prototype.reset = function() {
this.setValue(this.initialValue); this.setValue(this.initialValue);
return this; return this;
}; };
GUI.Controller.prototype.listen = function() { DAT.GUI.Controller.prototype.listen = function() {
this.parent.listenTo(this); this.parent.listenTo(this);
return this; return this;
}; };
GUI.Controller.prototype.unlisten = function() { DAT.GUI.Controller.prototype.unlisten = function() {
this.parent.unlistenTo(this); // <--- hasn't been tested yet this.parent.unlistenTo(this); // <--- hasn't been tested yet
return this; return this;
}; };
GUI.Controller.prototype.setValue = function(n) { DAT.GUI.Controller.prototype.setValue = function(n) {
this.object[this.propertyName] = n; this.object[this.propertyName] = n;
if (this.changeFunction != null) { if (this.changeFunction != null) {
this.changeFunction.call(this, n); this.changeFunction.call(this, n);
@ -50,23 +50,23 @@ GUI.Controller.prototype.setValue = function(n) {
return this; return this;
}; };
GUI.Controller.prototype.getValue = function() { DAT.GUI.Controller.prototype.getValue = function() {
return this.object[this.propertyName]; 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; this.changeFunction = fnc;
return this; return this;
}; };
GUI.Controller.prototype.onFinishChange = function(fnc) { DAT.GUI.Controller.prototype.onFinishChange = function(fnc) {
this.finishChangeFunction = fnc; this.finishChangeFunction = fnc;
return this; return this;
}; };
GUI.Controller.prototype.options = function() { DAT.GUI.Controller.prototype.options = function() {
var _this = this; var _this = this;
var select = document.createElement('select'); var select = document.createElement('select');
if (arguments.length == 1) { if (arguments.length == 1) {

6
src/controllers/function.js
View File

@ -1,10 +1,10 @@
GUI.FunctionController = function() { DAT.GUI.FunctionController = function() {
this.type = "function"; this.type = "function";
var _this = this; var _this = this;
GUI.Controller.apply(this, arguments); DAT.GUI.Controller.apply(this, arguments);
this.domElement.addEventListener('click', function() { this.domElement.addEventListener('click', function() {
_this.fire(); _this.fire();
@ -26,4 +26,4 @@ GUI.FunctionController = function() {
_this.object[_this.propertyName].call(_this.object); _this.object[_this.propertyName].call(_this.object);
}; };
}; };
GUI.extendController(GUI.FunctionController); DAT.GUI.extendController(DAT.GUI.FunctionController);

22
src/controllers/number.js
View File

@ -1,8 +1,8 @@
GUI.NumberController = function() { DAT.GUI.NumberController = function() {
this.type = "number"; this.type = "number";
GUI.Controller.apply(this, arguments); DAT.GUI.Controller.apply(this, arguments);
var _this = this; var _this = this;
@ -38,7 +38,7 @@ GUI.NumberController = function() {
var slider; var slider;
if (min != undefined && max != undefined) { 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); this.domElement.appendChild(slider.domElement);
} }
@ -83,8 +83,8 @@ GUI.NumberController = function() {
var mouseup = function(e) { var mouseup = function(e) {
document.removeEventListener('mousemove', dragNumberField, false); document.removeEventListener('mousemove', dragNumberField, false);
GUI.makeSelectable(_this.parent.domElement); DAT.GUI.makeSelectable(_this.parent.domElement);
GUI.makeSelectable(numberField); DAT.GUI.makeSelectable(numberField);
if (clickedNumberField && !draggedNumberField) { if (clickedNumberField && !draggedNumberField) {
numberField.focus(); numberField.focus();
numberField.select(); numberField.select();
@ -107,8 +107,8 @@ GUI.NumberController = function() {
// Or any other fields in this gui for that matter ... // Or any other fields in this gui for that matter ...
// TODO: Make makeUselectable go through each element and child element. // TODO: Make makeUselectable go through each element and child element.
GUI.makeUnselectable(_this.parent.domElement); DAT.GUI.makeUnselectable(_this.parent.domElement);
GUI.makeUnselectable(numberField); DAT.GUI.makeUnselectable(numberField);
if(slider) slider.domElement.className += ' active'; if(slider) slider.domElement.className += ' active';
@ -123,7 +123,7 @@ GUI.NumberController = function() {
this.options = function() { this.options = function() {
_this.noSlider(); _this.noSlider();
_this.domElement.removeChild(numberField); _this.domElement.removeChild(numberField);
return GUI.Controller.prototype.options.apply(this, arguments); return DAT.GUI.Controller.prototype.options.apply(this, arguments);
}; };
this.noSlider = function() { this.noSlider = function() {
@ -143,14 +143,14 @@ GUI.NumberController = function() {
val = max; val = max;
} }
return GUI.Controller.prototype.setValue.call(this, val); return DAT.GUI.Controller.prototype.setValue.call(this, val);
}; };
this.updateDisplay = function() { this.updateDisplay = function() {
numberField.value = GUI.roundToDecimal(_this.getValue(), 4); numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4);
if (slider) slider.value = _this.getValue(); if (slider) slider.value = _this.getValue();
}; };
}; };
GUI.extendController(GUI.NumberController); DAT.GUI.extendController(DAT.GUI.NumberController);

7
src/controllers/slider.js
View File

@ -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 clicked = false;
var _this = this; var _this = this;
@ -16,7 +16,8 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
var onDrag = function(e) { var onDrag = function(e) {
if (!clicked) return; if (!clicked) return;
var pos = findPos(_this.domElement); 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; val = Math.round(val/step)*step;
numberController.setValue(val); numberController.setValue(val);
}; };
@ -54,7 +55,7 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
}; };
this.__defineSetter__('value', function(e) { 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+"%"; this.fg.style.width = pct+"%";
}); });

8
src/controllers/string.js
View File

@ -1,9 +1,9 @@
GUI.StringController = function() { DAT.GUI.StringController = function() {
this.type = "string"; this.type = "string";
var _this = this; var _this = this;
GUI.Controller.apply(this, arguments); DAT.GUI.Controller.apply(this, arguments);
var input = document.createElement('input'); var input = document.createElement('input');
@ -37,11 +37,11 @@ GUI.StringController = function() {
this.options = function() { this.options = function() {
_this.domElement.removeChild(input); _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); this.domElement.appendChild(input);
}; };
GUI.extendController(GUI.StringController); DAT.GUI.extendController(DAT.GUI.StringController);

192
src/gui.js
View File

@ -1,11 +1,11 @@
var GUI = function(parameters) { var DAT = DAT || {};
DAT.GUI = function(parameters) {
if (parameters == undefined) { if (parameters == undefined) {
parameters = {}; parameters = {};
} }
var _this = this;
var MIN_WIDTH = 240; var MIN_WIDTH = 240;
var MAX_WIDTH = 500; var MAX_WIDTH = 500;
@ -102,7 +102,7 @@ var GUI = function(parameters) {
if (dmy > 0 && if (dmy > 0 &&
curControllerContainerHeight > controllerHeight) { 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; dmy *= d;
} }
@ -113,7 +113,7 @@ var GUI = function(parameters) {
width += dmx; width += dmx;
curControllerContainerHeight += dmy; curControllerContainerHeight += dmy;
controllerContainer.style.height = openHeight + 'px'; controllerContainer.style.height = openHeight + 'px';
width = GUI.constrain(width, MIN_WIDTH, MAX_WIDTH); width = DAT.GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
_this.domElement.style.width = width + 'px'; _this.domElement.style.width = width + 'px';
checkForOverflow(); checkForOverflow();
}; };
@ -167,7 +167,8 @@ var GUI = function(parameters) {
beginResize(); beginResize();
} }
} }
}; }
;
document.removeEventListener('mousemove', resize, false); document.removeEventListener('mousemove', resize, false);
@ -183,18 +184,18 @@ var GUI = function(parameters) {
this.domElement.appendChild(toggleButton); this.domElement.appendChild(toggleButton);
if (parameters.domElement) { if (parameters.domElement) {
GUI.autoPlace = false; DAT.GUI.autoPlace = false;
parameters.domElement.appendChild(this.domElement); parameters.domElement.appendChild(this.domElement);
} }
if (GUI.autoPlace) { if (DAT.GUI.autoPlace) {
if(GUI.autoPlaceContainer == null) { if (DAT.GUI.autoPlaceContainer == null) {
GUI.autoPlaceContainer = document.createElement('div'); DAT.GUI.autoPlaceContainer = document.createElement('div');
GUI.autoPlaceContainer.setAttribute("id", "guidat"); 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;
@ -264,6 +265,7 @@ var GUI = function(parameters) {
function F() { function F() {
return constructor.apply(this, args); return constructor.apply(this, args);
} }
F.prototype = constructor.prototype; F.prototype = constructor.prototype;
return new F(); return new F();
}; };
@ -275,7 +277,7 @@ var GUI = function(parameters) {
// Have we already added this? // Have we already added this?
if (alreadyControlled(object, propertyName)) { if (alreadyControlled(object, propertyName)) {
// GUI.error("Controller for \"" + propertyName+"\" already added."); // DAT.GUI.error("Controller for \"" + propertyName+"\" already added.");
// return; // return;
} }
@ -283,7 +285,7 @@ var GUI = function(parameters) {
// Does this value exist? Is it accessible? // Does this value exist? Is it accessible?
if (value == undefined) { 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; return;
} }
@ -292,7 +294,7 @@ var GUI = function(parameters) {
// Do we know how to deal with this data type? // Do we know how to deal with this data type?
if (handler == undefined) { if (handler == undefined) {
GUI.error("Cannot create controller for data type \""+type+"\""); DAT.GUI.error("Cannot create controller for data type \"" + type + "\"");
return; return;
} }
@ -305,20 +307,20 @@ var GUI = function(parameters) {
// Were we able to make the controller? // Were we able to make the controller?
if (!controllerObject) { if (!controllerObject) {
GUI.error("Error creating controller for \""+propertyName+"\"."); DAT.GUI.error("Error creating controller for \"" + propertyName + "\".");
return; return;
} }
// Success. // Success.
controllerContainer.appendChild(controllerObject.domElement); controllerContainer.appendChild(controllerObject.domElement);
controllers.push(controllerObject); controllers.push(controllerObject);
GUI.allControllers.push(controllerObject); DAT.GUI.allControllers.push(controllerObject);
// Do we have a saved value for this controller? // Do we have a saved value for this controller?
if (type != "function" && if (type != "function" &&
GUI.saveIndex < GUI.savedValues.length) { DAT.GUI.saveIndex < DAT.GUI.savedValues.length) {
controllerObject.setValue(GUI.savedValues[GUI.saveIndex]); controllerObject.setValue(DAT.GUI.savedValues[DAT.GUI.saveIndex]);
GUI.saveIndex++; DAT.GUI.saveIndex++;
} }
// Compute sum height of controllers. // Compute sum height of controllers.
@ -347,10 +349,10 @@ var GUI = function(parameters) {
}; };
var handlerTypes = { var handlerTypes = {
"number": GUI.NumberController, "number": DAT.GUI.NumberController,
"string": GUI.StringController, "string": DAT.GUI.StringController,
"boolean": GUI.BooleanController, "boolean": DAT.GUI.BooleanController,
"function": GUI.FunctionController "function": DAT.GUI.FunctionController
}; };
var alreadyControlled = function(object, propertyName) { var alreadyControlled = function(object, propertyName) {
@ -368,6 +370,7 @@ var GUI = function(parameters) {
function F() { function F() {
return constructor.apply(this, args); return constructor.apply(this, args);
} }
F.prototype = constructor.prototype; F.prototype = constructor.prototype;
return new F(); return new F();
}; };
@ -376,7 +379,7 @@ var GUI = function(parameters) {
// TODO // TODO
} }
// GUI ... GUI // DAT.GUI ... DAT.GUI
this.toggle = function() { this.toggle = function() {
open ? this.hide() : this.show(); open ? this.hide() : this.show();
@ -432,41 +435,40 @@ var GUI = function(parameters) {
// Load saved appearance: // 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]);
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
_this.domElement.style.width = width + "px"; _this.domElement.style.width = width + "px";
openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]); openHeight = parseInt(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][2]);
explicitOpenHeight = true; explicitOpenHeight = true;
if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) { if (eval(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][0]) == true) {
curControllerContainerHeight = openHeight; curControllerContainerHeight = openHeight;
var t = GUI.savedAppearanceVars[GUI.guiIndex][3] var t = DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][3]
// Hack. // Hack.
setTimeout(function() { setTimeout(function() {
controllerContainer.scrollTop = t; controllerContainer.scrollTop = t;
}, 0); }, 0);
if (GUI.scrollTop > -1) { if (DAT.GUI.scrollTop > -1) {
document.body.scrollTop = GUI.scrollTop; document.body.scrollTop = DAT.GUI.scrollTop;
} }
resizeTo = openHeight; resizeTo = openHeight;
this.show(); 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. // Add hide listener if this is the first DAT.GUI.
if (GUI.allGuis.length == 1) { if (DAT.GUI.allGuis.length == 1) {
window.addEventListener('keyup', function(e) { window.addEventListener('keyup', function(e) {
// Hide on "H" // Hide on "H"
if (e.keyCode == 72) { if (e.keyCode == 72) {
GUI.toggleHide(); DAT.GUI.toggleHide();
} }
}, false); }, false);
} }
@ -474,92 +476,91 @@ var GUI = function(parameters) {
}; };
// Do not set this directly. // Do not set this directly.
GUI.hidden = false; DAT.GUI.hidden = false;
// Static members // Static members
GUI.autoPlace = true; DAT.GUI.autoPlace = true;
GUI.autoPlaceContainer = null; DAT.GUI.autoPlaceContainer = null;
GUI.allControllers = []; DAT.GUI.allControllers = [];
GUI.allGuis = []; DAT.GUI.allGuis = [];
GUI.toggleHide = function() { DAT.GUI.toggleHide = function() {
if (GUI.hidden) { if (DAT.GUI.hidden) {
GUI.show(); DAT.GUI.show();
} else { } else {
GUI.hide(); DAT.GUI.hide();
} }
} }
GUI.show = function() { DAT.GUI.show = function() {
GUI.hidden = false; DAT.GUI.hidden = false;
for (var i in GUI.allGuis) { for (var i in DAT.GUI.allGuis) {
GUI.allGuis[i].domElement.style.display = "block"; DAT.GUI.allGuis[i].domElement.style.display = "block";
} }
} }
GUI.hide = function() { DAT.GUI.hide = function() {
GUI.hidden = true; DAT.GUI.hidden = true;
for (var i in GUI.allGuis) { for (var i in DAT.GUI.allGuis) {
GUI.allGuis[i].domElement.style.display = "none"; DAT.GUI.allGuis[i].domElement.style.display = "none";
} }
} }
GUI.saveURL = function() { DAT.GUI.saveURL = function() {
var url = GUI.replaceGetVar("saveString", GUI.getSaveString()); var url = DAT.GUI.replaceGetVar("saveString", DAT.GUI.getSaveString());
window.location = url; 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 vals = saveString.split(",");
var numGuis = parseInt(vals[0]); var numGuis = parseInt(vals[0]);
GUI.scrollTop = parseInt(vals[1]); DAT.GUI.scrollTop = parseInt(vals[1]);
for (var i = 0; i < numGuis; i++) { for (var i = 0; i < numGuis; i++) {
var appr = vals.splice(2, 4); 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 = []; DAT.GUI.savedValues = [];
GUI.savedAppearanceVars = []; DAT.GUI.savedAppearanceVars = [];
GUI.getSaveString = function() { DAT.GUI.getSaveString = function() {
var vals = [], var vals = [],
i; i;
vals.push(GUI.allGuis.length); vals.push(DAT.GUI.allGuis.length);
vals.push(document.body.scrollTop); vals.push(document.body.scrollTop);
for (i in GUI.allGuis) { for (i in DAT.GUI.allGuis) {
var av = GUI.allGuis[i].appearanceVars(); var av = DAT.GUI.allGuis[i].appearanceVars();
for (var j = 0; j < av.length; j++) { for (var j = 0; j < av.length; j++) {
vals.push(av[j]); vals.push(av[j]);
} }
} }
for (i in GUI.allControllers) { for (i in DAT.GUI.allControllers) {
// We don't save values for functions. // We don't save values for functions.
if (GUI.allControllers[i].type == "function") { if (DAT.GUI.allControllers[i].type == "function") {
continue; continue;
} }
var v = GUI.allControllers[i].getValue(); var v = DAT.GUI.allControllers[i].getValue();
// Round numbers so they don't get enormous // Round numbers so they don't get enormous
if (GUI.allControllers[i].type == "number") { if (DAT.GUI.allControllers[i].type == "number") {
v = GUI.roundToDecimal(v, 4); v = DAT.GUI.roundToDecimal(v, 4);
} }
vals.push(v); vals.push(v);
@ -570,7 +571,7 @@ GUI.getSaveString = function() {
}; };
GUI.getVarFromURL = function(v) { DAT.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('&');
@ -587,7 +588,7 @@ GUI.getVarFromURL = function(v) {
}; };
GUI.replaceGetVar = function(varName, val) { DAT.GUI.replaceGetVar = function(varName, val) {
var vars = [], hash; var vars = [], hash;
var loc = window.location.href; var loc = window.location.href;
@ -609,53 +610,56 @@ GUI.replaceGetVar = function(varName, val) {
}; };
GUI.saveIndex = 0; DAT.GUI.saveIndex = 0;
GUI.guiIndex = 0; DAT.GUI.guiIndex = 0;
GUI.showSaveString = function() { DAT.GUI.showSaveString = function() {
alert(GUI.getSaveString()); alert(DAT.GUI.getSaveString());
}; };
// Util functions // Util functions
GUI.makeUnselectable = function(elem) { DAT.GUI.makeUnselectable = function(elem) {
elem.onselectstart = function() { return false; }; elem.onselectstart = function() {
return false;
};
elem.style.MozUserSelect = "none"; elem.style.MozUserSelect = "none";
elem.style.KhtmlUserSelect = "none"; elem.style.KhtmlUserSelect = "none";
elem.unselectable = "on"; elem.unselectable = "on";
}; };
GUI.makeSelectable = function(elem) { DAT.GUI.makeSelectable = function(elem) {
elem.onselectstart = function() { }; elem.onselectstart = function() {
};
elem.style.MozUserSelect = "auto"; elem.style.MozUserSelect = "auto";
elem.style.KhtmlUserSelect = "auto"; elem.style.KhtmlUserSelect = "auto";
elem.unselectable = "off"; 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)); 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; if (v < o1) v = o1;
else if (v > o2) v = o2; else if (v > o2) v = o2;
return v; return v;
}; };
GUI.error = function(str) { DAT.GUI.error = function(str) {
if (typeof console.error == 'function') { 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); var t = Math.pow(10, decimals);
return Math.round(n * t) / t; return Math.round(n * t) / t;
}; };
GUI.extendController = function(clazz) { DAT.GUI.extendController = function(clazz) {
clazz.prototype = new GUI.Controller(); clazz.prototype = new DAT.GUI.Controller();
clazz.prototype.constructor = clazz; 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'));