mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-10-10 06:54:18 +00:00
house cleaning
This commit is contained in:
Jono Brandel
commit
6a2903681d
@ -33,7 +33,7 @@ GUI.BooleanController = function() {
|
||||
} catch (e) {}
|
||||
}
|
||||
return GUI.Controller.prototype.setValue.call(this, val);
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
GUI.extendController(GUI.BooleanController);
|
||||
@ -25,6 +25,5 @@ GUI.FunctionController = function() {
|
||||
}
|
||||
_this.object[_this.propertyName].call(_this.object);
|
||||
};
|
||||
|
||||
};
|
||||
GUI.extendController(GUI.FunctionController);
|
||||
|
||||
@ -34,12 +34,12 @@ GUI.Controller.prototype.reset = function() {
|
||||
GUI.Controller.prototype.listen = function() {
|
||||
this.parent.listenTo(this);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.unlisten = function() {
|
||||
this.parent.unlistenTo(this); // <--- hasn't been tested yet
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.setValue = function(n) {
|
||||
this.object[this.propertyName] = n;
|
||||
@ -48,22 +48,23 @@ GUI.Controller.prototype.setValue = function(n) {
|
||||
}
|
||||
this.updateDisplay();
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.getValue = function() {
|
||||
return this.object[this.propertyName];
|
||||
}
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.updateDisplay = function() {}
|
||||
GUI.Controller.prototype.updateDisplay = function() {};
|
||||
|
||||
GUI.Controller.prototype.onChange = function(fnc) {
|
||||
this.changeFunction = fnc;
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.onFinishChange = function(fnc) {
|
||||
this.finishChangeFunction = fnc;
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
GUI.Controller.prototype.options = function() {
|
||||
var _this = this;
|
||||
@ -90,7 +91,7 @@ GUI.Controller.prototype.options = function() {
|
||||
if (_this.finishChangeFunction != null) {
|
||||
_this.finishChangeFunction.call(this, _this.getValue());
|
||||
}
|
||||
});
|
||||
}, false);
|
||||
_this.domElement.appendChild(select);
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
@ -12,7 +12,7 @@ GUI.NumberController = function() {
|
||||
|
||||
var clickedNumberField = false;
|
||||
|
||||
var y = py = 0;
|
||||
var y = 0, py = 0;
|
||||
|
||||
var min = arguments[3];
|
||||
var max = arguments[4];
|
||||
@ -44,7 +44,6 @@ GUI.NumberController = function() {
|
||||
|
||||
numberField.addEventListener('blur', function(e) {
|
||||
var val = parseFloat(this.value);
|
||||
console.log(val);
|
||||
if (!isNaN(val)) {
|
||||
_this.setValue(val);
|
||||
}
|
||||
@ -65,13 +64,14 @@ GUI.NumberController = function() {
|
||||
|
||||
// Handle up arrow and down arrow
|
||||
numberField.addEventListener('keydown', function(e) {
|
||||
var newVal;
|
||||
switch(e.keyCode) {
|
||||
case 38: // up
|
||||
var newVal = _this.getValue() + step;
|
||||
newVal = _this.getValue() + step;
|
||||
_this.setValue(newVal);
|
||||
break;
|
||||
case 40: // down
|
||||
var newVal = _this.getValue() - step;
|
||||
newVal = _this.getValue() - step;
|
||||
_this.setValue(newVal);
|
||||
break;
|
||||
}
|
||||
@ -85,17 +85,17 @@ GUI.NumberController = function() {
|
||||
numberField.focus();
|
||||
numberField.select();
|
||||
}
|
||||
if(slider) slider.domElement.className = slider.domElement.className.replace(' active', '');
|
||||
draggedNumberField = false;
|
||||
clickedNumberField = false;
|
||||
if (_this.finishChangeFunction != null) {
|
||||
_this.finishChangeFunction.call(this, _this.getValue());
|
||||
}
|
||||
document.removeEventListener('mouseup', mouseup, false);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
var dragNumberField = function(e) {
|
||||
|
||||
draggedNumberField = true;
|
||||
e.preventDefault();
|
||||
|
||||
@ -106,13 +106,15 @@ GUI.NumberController = function() {
|
||||
GUI.makeUnselectable(_this.parent.domElement);
|
||||
GUI.makeUnselectable(numberField);
|
||||
|
||||
if(slider) slider.domElement.className += ' active';
|
||||
|
||||
py = y;
|
||||
y = e.pageY;
|
||||
var dy = py - y;
|
||||
var newVal = _this.getValue() + dy*step;
|
||||
_this.setValue(newVal);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
this.options = function() {
|
||||
_this.noSlider();
|
||||
@ -139,12 +141,12 @@ GUI.NumberController = function() {
|
||||
|
||||
return GUI.Controller.prototype.setValue.call(this, val);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
this.updateDisplay = function() {
|
||||
numberField.value = GUI.roundToDecimal(_this.getValue(), 4);
|
||||
if (slider) slider.value = _this.getValue();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
GUI.extendController(GUI.NumberController);
|
||||
|
||||
@ -33,7 +33,7 @@ GUI.StringController = function() {
|
||||
|
||||
this.updateDisplay = function() {
|
||||
input.value = _this.getValue();
|
||||
}
|
||||
};
|
||||
|
||||
this.options = function() {
|
||||
_this.domElement.removeChild(input);
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
|
||||
var min = min;
|
||||
var max = max;
|
||||
var step = step;
|
||||
|
||||
var clicked = false;
|
||||
var _this = this;
|
||||
|
||||
@ -17,16 +13,45 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
|
||||
this.domElement.appendChild(this.fg);
|
||||
|
||||
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);
|
||||
val = Math.round(val/step)*step;
|
||||
numberController.setValue(val);
|
||||
};
|
||||
|
||||
this.domElement.addEventListener('mousedown', function(e) {
|
||||
clicked = true;
|
||||
x = px = e.pageX;
|
||||
_this.domElement.className += ' active';
|
||||
_this.fg.className += ' active';
|
||||
numberController.domElement.className += ' active';
|
||||
onDrag(e);
|
||||
document.addEventListener('mouseup', mouseup, false);
|
||||
}, false);
|
||||
|
||||
var mouseup = function(e) {
|
||||
_this.domElement.className = _this.domElement.className.replace(' active', '');
|
||||
_this.fg.className = _this.fg.className.replace(' active', '');
|
||||
numberController.domElement.className = numberController.domElement.className.replace(' active', '');
|
||||
clicked = false;
|
||||
if (numberController.finishChangeFunction != null) {
|
||||
numberController.finishChangeFunction.call(this, numberController.getValue());
|
||||
}
|
||||
document.removeEventListener('mouseup', mouseup, false);
|
||||
};
|
||||
|
||||
var findPos = function(obj) {
|
||||
var curleft = curtop = 0;
|
||||
var curleft = 0, curtop = 0;
|
||||
if (obj.offsetParent) {
|
||||
do {
|
||||
curleft += obj.offsetLeft;
|
||||
curtop += obj.offsetTop;
|
||||
} while (obj = obj.offsetParent);
|
||||
} while ((obj = obj.offsetParent));
|
||||
return [curleft,curtop];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.__defineSetter__('value', function(e) {
|
||||
var pct = GUI.map(e, min, max, 0, 100);
|
||||
@ -39,7 +64,7 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
var val = GUI.map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
|
||||
val = Math.round(val/step)*step;
|
||||
numberController.setValue(val);
|
||||
}
|
||||
};
|
||||
|
||||
this.domElement.addEventListener('mousedown', function(e) {
|
||||
clicked = true;
|
||||
@ -50,7 +75,6 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
document.addEventListener('mouseup', mouseup, false);
|
||||
}, false);
|
||||
|
||||
|
||||
var mouseup = function(e) {
|
||||
_this.domElement.setAttribute('class', 'guidat-slider-bg');
|
||||
_this.fg.setAttribute('class', 'guidat-slider-fg');
|
||||
@ -61,9 +85,8 @@ GUI.Slider = function(numberController, min, max, step, initValue) {
|
||||
document.removeEventListener('mouseup', mouseup, false);
|
||||
};
|
||||
|
||||
|
||||
document.addEventListener('mousemove', onDrag, false);
|
||||
|
||||
this.value = initValue;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -67,12 +67,16 @@ div.collapsed h2, div.expanded h2 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.last { margin-bottom: 0px !important; }
|
||||
.first { margin-top: 0px; }
|
||||
|
||||
div.trans {
|
||||
border-top: 1px dotted #ccc;
|
||||
margin: 0px 0px 20px 0px;
|
||||
}
|
||||
ol#secrets {
|
||||
/* padding: 0px 0px 20px 0px;*/
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
div.expanded h2:before {
|
||||
content: '-';
|
||||
@ -102,6 +106,8 @@ div.collapsable {
|
||||
}
|
||||
|
||||
div.collapsable div {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: -20px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
8
gui.css
8
gui.css
@ -27,11 +27,6 @@
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
/*
|
||||
-moz-transition: height .2s ease-out;
|
||||
-webkit-transition: height .2s ease-out;
|
||||
transition: height .2s ease-out;
|
||||
*/
|
||||
}
|
||||
|
||||
a.guidat-toggle {
|
||||
@ -86,7 +81,8 @@ a.guidat-toggle:hover {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.guidat-controller input:hover {
|
||||
.guidat-controller input:hover.
|
||||
.guidat-controller.number.active {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
|
||||
70
gui.js
70
gui.js
@ -125,36 +125,21 @@ var GUI = function() {
|
||||
|
||||
}, false);
|
||||
|
||||
|
||||
toggleButton.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}, false);
|
||||
|
||||
|
||||
document.addEventListener('mouseup', function(e) {
|
||||
|
||||
if (togglePressed && !toggleDragged) {
|
||||
|
||||
_this.toggle();
|
||||
|
||||
// Clears lingering slider column
|
||||
_this.domElement.style.width = (width+1)+'px';
|
||||
setTimeout(function() {
|
||||
_this.domElement.style.width = width+'px';
|
||||
}, 1);
|
||||
}
|
||||
|
||||
if (togglePressed && toggleDragged) {
|
||||
|
||||
if (dragDisplacementX == 0) {
|
||||
|
||||
// Clears lingering slider column
|
||||
_this.domElement.style.width = (width+1)+'px';
|
||||
setTimeout(function() {
|
||||
_this.domElement.style.width = width+'px';
|
||||
}, 1);
|
||||
|
||||
adaptToScrollbar();
|
||||
}
|
||||
|
||||
if (openHeight > controllerHeight) {
|
||||
@ -177,10 +162,7 @@ var GUI = function() {
|
||||
beginResize();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
document.removeEventListener('mousemove', resize, false);
|
||||
@ -211,7 +193,7 @@ var GUI = function() {
|
||||
listenInterval = setInterval(function() {
|
||||
_this.listen();
|
||||
}, this.autoListenIntervalTime);
|
||||
}
|
||||
};
|
||||
|
||||
this.__defineSetter__("autoListen", function(v) {
|
||||
autoListen = v;
|
||||
@ -352,7 +334,7 @@ var GUI = function() {
|
||||
} else {
|
||||
controllerContainer.style.overflowY = "hidden";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var handlerTypes = {
|
||||
"number": GUI.NumberController,
|
||||
@ -372,6 +354,7 @@ var GUI = function() {
|
||||
};
|
||||
|
||||
var construct = function(constructor, args) {
|
||||
|
||||
function F() {
|
||||
return constructor.apply(this, args);
|
||||
}
|
||||
@ -420,6 +403,8 @@ var GUI = function() {
|
||||
curControllerContainerHeight += (resizeTo - curControllerContainerHeight)*0.6;
|
||||
if (Math.abs(curControllerContainerHeight-resizeTo) < 1) {
|
||||
curControllerContainerHeight = resizeTo;
|
||||
adaptToScrollbar();
|
||||
|
||||
} else {
|
||||
resizeTimeout = setTimeout(beginResize, 1000/30);
|
||||
}
|
||||
@ -427,6 +412,14 @@ var GUI = function() {
|
||||
checkForOverflow();
|
||||
}
|
||||
|
||||
var adaptToScrollbar = function() {
|
||||
// Clears lingering slider column
|
||||
_this.domElement.style.width = (width+1)+'px';
|
||||
setTimeout(function() {
|
||||
_this.domElement.style.width = width+'px';
|
||||
}, 1);
|
||||
};
|
||||
|
||||
// Load saved appearance:
|
||||
|
||||
if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
|
||||
@ -468,8 +461,7 @@ GUI.allControllers = [];
|
||||
GUI.allGuis = [];
|
||||
|
||||
GUI.saveURL = function() {
|
||||
title = window.location;
|
||||
url = GUI.replaceGetVar("saveString", GUI.getSaveString());
|
||||
var url = GUI.replaceGetVar("saveString", GUI.getSaveString());
|
||||
window.location = url;
|
||||
};
|
||||
|
||||
@ -495,20 +487,21 @@ GUI.savedAppearanceVars = [];
|
||||
|
||||
GUI.getSaveString = function() {
|
||||
|
||||
var vals = [];
|
||||
var vals = [],
|
||||
i;
|
||||
|
||||
vals.push(GUI.allGuis.length);
|
||||
vals.push(document.body.scrollTop);
|
||||
|
||||
|
||||
for (var i in GUI.allGuis) {
|
||||
for (i in GUI.allGuis) {
|
||||
var av = GUI.allGuis[i].appearanceVars();
|
||||
for (var j = 0; j < av.length; j++) {
|
||||
vals.push(av[j]);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i in GUI.allControllers) {
|
||||
for (i in GUI.allControllers) {
|
||||
|
||||
// We don't save values for functions.
|
||||
if (GUI.allControllers[i].type == "function") {
|
||||
@ -528,7 +521,7 @@ GUI.getSaveString = function() {
|
||||
|
||||
return vals.join(',');
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
GUI.getVarFromURL = function(v) {
|
||||
|
||||
@ -536,7 +529,7 @@ GUI.getVarFromURL = function(v) {
|
||||
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
||||
|
||||
for (var i = 0; i < hashes.length; i++) {
|
||||
hash = hashes[i].split("=")
|
||||
hash = hashes[i].split("=");
|
||||
if (hash == undefined) continue;
|
||||
if (hash[0] == v) {
|
||||
return hash[1];
|
||||
@ -554,7 +547,7 @@ GUI.replaceGetVar = function(varName, val) {
|
||||
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
||||
|
||||
for (var i = 0; i < hashes.length; i++) {
|
||||
hash = hashes[i].split("=")
|
||||
hash = hashes[i].split("=");
|
||||
if (hash == undefined) continue;
|
||||
if (hash[0] == varName) {
|
||||
return loc.replace(hash[1], val);
|
||||
@ -574,7 +567,7 @@ GUI.guiIndex = 0;
|
||||
|
||||
GUI.showSaveString = function() {
|
||||
alert(GUI.getSaveString());
|
||||
}
|
||||
};
|
||||
|
||||
// Util functions
|
||||
|
||||
@ -583,25 +576,24 @@ GUI.makeUnselectable = function(elem) {
|
||||
elem.style.MozUserSelect = "none";
|
||||
elem.style.KhtmlUserSelect = "none";
|
||||
elem.unselectable = "on";
|
||||
}
|
||||
};
|
||||
|
||||
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) {
|
||||
var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
||||
return v;
|
||||
}
|
||||
return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
|
||||
};
|
||||
|
||||
GUI.constrain = function (v, o1, o2) {
|
||||
if (v < o1) v = o1;
|
||||
else if (v > o2) v = o2;
|
||||
return v;
|
||||
}
|
||||
};
|
||||
|
||||
GUI.error = function(str) {
|
||||
if (typeof console.error == 'function') {
|
||||
@ -612,11 +604,11 @@ GUI.error = function(str) {
|
||||
GUI.roundToDecimal = function(n, decimals) {
|
||||
var t = Math.pow(10, decimals);
|
||||
return Math.round(n*t)/t;
|
||||
}
|
||||
};
|
||||
|
||||
GUI.extendController = function(clazz) {
|
||||
clazz.prototype = new GUI.Controller();
|
||||
clazz.prototype.constructor = clazz;
|
||||
}
|
||||
};
|
||||
|
||||
if (GUI.getVarFromURL('saveString') != null) GUI.load(GUI.getVarFromURL('saveString'));
|
||||
52
index.html
52
index.html
@ -1,32 +1,22 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<!doctype html>
|
||||
<head>
|
||||
<title>gui-dat</title>
|
||||
|
||||
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
|
||||
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="gui.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/slider.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.boolean.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.function.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.number.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="controllers/controller.string.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="demo/improvedNoise.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="demo/prettify.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="demo/demo.js">
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="gui.js"></script>
|
||||
<script type="text/javascript" src="controllers/slider.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.function.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.number.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.string.js"></script>
|
||||
<script type="text/javascript" src="demo/improvedNoise.js"></script>
|
||||
<script type="text/javascript" src="demo/prettify.js"></script>
|
||||
<script type="text/javascript" src="demo/demo.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
|
||||
@ -183,7 +173,7 @@ window.onload = function() {
|
||||
<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>
|
||||
<pre class="prettyprint">
|
||||
<pre class="prettyprint last">
|
||||
// Make a button for the url function
|
||||
gui.add(GUI, "saveURL");</pre>
|
||||
</div>
|
||||
@ -216,7 +206,7 @@ var gui = new GUI();
|
||||
gui.add(someObject, "someProperty");
|
||||
gui.add(someObject, "someOtherProperty");</pre>
|
||||
|
||||
<p><strong>Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p>
|
||||
<p class = "last"><strong>Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -226,7 +216,7 @@ gui.add(someObject, "someOtherProperty");</pre>
|
||||
<h2 class="section">Choosing from a list of values</h2>
|
||||
<div class="collapsable">
|
||||
<div>
|
||||
<pre class="prettyprint">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
|
||||
<pre class="prettyprint first last">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
|
||||
|
||||
// Alternatively, you can specify custom labels using object syntax
|
||||
gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
|
||||
@ -247,7 +237,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
|
||||
alert("You just finished changing me to " + newValue);
|
||||
});</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">gui.add(obj, "functionName").onFire(function() {
|
||||
<pre class="prettyprint last">gui.add(obj, "functionName").onFire(function() {
|
||||
alert("You called a function with gui-dat");
|
||||
});</pre>
|
||||
</div>
|
||||
@ -258,7 +248,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
|
||||
<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>
|
||||
<pre class="prettyprint">gui.add(obj, "changingProperty").listen();</pre>
|
||||
<pre class="prettyprint last">gui.add(obj, "changingProperty").listen();</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -278,7 +268,7 @@ setInterval(function() {
|
||||
}, 1000 / 60);</pre>
|
||||
|
||||
<p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p>
|
||||
<pre class="prettyprint">
|
||||
<pre class="prettyprint last">
|
||||
gui.autoListen = false; // disables internal interval
|
||||
gui.add(obj, "add");
|
||||
gui.add(obj, "lotsa");
|
||||
@ -305,7 +295,7 @@ 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>
|
||||
<pre class="prettyprint">
|
||||
<pre class="prettyprint last">
|
||||
// Notice this belongs to the GUI class (uppercase)
|
||||
// and not an instance thereof.
|
||||
GUI.autoPlace = false;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user