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);

1134
src/gui.js
View File

File diff suppressed because it is too large Load Diff