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);
|
||||
|
||||
1134
src/gui.js
1134
src/gui.js
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user