mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Lots of saving goodness though a few things left to be done / tested. Started to add collapsable sections on demo headers. Won't be stable enough by tomorrow morning.
This commit is contained in:
parent
554767fa70
commit
5b38f59def
@ -18,8 +18,6 @@ var NumberController = function() {
|
|||||||
var max = arguments[4];
|
var max = arguments[4];
|
||||||
var step = arguments[5];
|
var step = arguments[5];
|
||||||
|
|
||||||
console.log("NumberController", this.propertyName, arguments);
|
|
||||||
|
|
||||||
if (!step) {
|
if (!step) {
|
||||||
if (min != undefined && max != undefined) {
|
if (min != undefined && max != undefined) {
|
||||||
step = (max-min)*0.01;
|
step = (max-min)*0.01;
|
||||||
|
@ -28,7 +28,7 @@ h1 {
|
|||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
line-height: 80px;
|
line-height: 80px;
|
||||||
margin: 20px 0 20px 0;
|
margin: 39px 0 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
||||||
@ -48,6 +48,37 @@ h2 {
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h2.collapsed {
|
||||||
|
|
||||||
|
float: left;
|
||||||
|
clear: both;
|
||||||
|
padding-top:24px;
|
||||||
|
margin-top: 0;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
h2.collapsed:before {
|
||||||
|
content: '+';
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 2px;
|
||||||
|
float: left;
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-right: 6px;
|
||||||
|
font-size: 9px;
|
||||||
|
font-family: Monaco, monospace;
|
||||||
|
}
|
||||||
|
h2.collapsed:hover:before {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsable {
|
||||||
|
clear: both;
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#helvetica-demo {
|
#helvetica-demo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -74,16 +105,18 @@ pre {
|
|||||||
background-color: #222;
|
background-color: #222;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
font: 10px Monaco, monospace;
|
font: 10px Monaco, monospace;
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, ul {
|
p, ul, ol {
|
||||||
font-size: 125%;
|
font-size: 125%;
|
||||||
|
clear: both;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-left: 18px;
|
margin-left: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul#desc {
|
ul#desc {
|
||||||
@ -112,6 +145,8 @@ footer {
|
|||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
width: 510px;
|
width: 510px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
clear: both;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre a:link,
|
pre a:link,
|
||||||
|
3
gui.css
3
gui.css
@ -15,9 +15,6 @@ text-align: right;
|
|||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.guidat,
|
.guidat,
|
||||||
|
96
gui.js
96
gui.js
@ -1,3 +1,6 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
var GUI = function() {
|
var GUI = function() {
|
||||||
|
|
||||||
var _this = this;
|
var _this = this;
|
||||||
@ -60,15 +63,16 @@ var GUI = function() {
|
|||||||
mx = e.pageX;
|
mx = e.pageX;
|
||||||
|
|
||||||
var dmy = my - pmy;
|
var dmy = my - pmy;
|
||||||
|
|
||||||
// TODO: Flip this if you want to resize to the left.
|
// TODO: Flip this if you want to resize to the left.
|
||||||
var dmx = pmx - mx;
|
var dmx = pmx - mx;
|
||||||
|
|
||||||
if (dmy > 0 &&
|
if (dmy > 0 &&
|
||||||
curControllerContainerHeight > controllerHeight) {
|
curControllerContainerHeight > controllerHeight) {
|
||||||
var d = GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0);
|
var d = GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0);
|
||||||
dmy *= Math.pow(d, 1.5);
|
dmy *= d;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleDragged = true;
|
toggleDragged = true;
|
||||||
dragDisplacementY += dmy;
|
dragDisplacementY += dmy;
|
||||||
dragDisplacementX += dmx;
|
dragDisplacementX += dmx;
|
||||||
@ -290,7 +294,16 @@ var GUI = function() {
|
|||||||
// Success.
|
// Success.
|
||||||
controllerContainer.appendChild(controllerObject.domElement);
|
controllerContainer.appendChild(controllerObject.domElement);
|
||||||
controllers.push(controllerObject);
|
controllers.push(controllerObject);
|
||||||
|
GUI.allControllers.push(controllerObject);
|
||||||
|
|
||||||
|
// Do we have a saved value for this controller?
|
||||||
|
if (type != "function" &&
|
||||||
|
GUI.saveIndex < GUI.savedValues.length) {
|
||||||
|
controllerObject.setValue(GUI.savedValues[GUI.saveIndex]);
|
||||||
|
GUI.saveIndex++;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Compute sum height of controllers.
|
// Compute sum height of controllers.
|
||||||
controllerHeight = 0;
|
controllerHeight = 0;
|
||||||
for (var i in controllers) {
|
for (var i in controllers) {
|
||||||
@ -300,9 +313,6 @@ var GUI = function() {
|
|||||||
openHeight = controllerHeight;
|
openHeight = controllerHeight;
|
||||||
|
|
||||||
checkForOverflow();
|
checkForOverflow();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
return controllerObject;
|
return controllerObject;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -383,8 +393,83 @@ var GUI = function() {
|
|||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Static members
|
||||||
|
|
||||||
GUI.autoPlace = true;
|
GUI.autoPlace = true;
|
||||||
GUI.autoPlaceContainer = null;
|
GUI.autoPlaceContainer = null;
|
||||||
|
GUI.allControllers = [];
|
||||||
|
|
||||||
|
GUI.saveURL = function() {
|
||||||
|
title = window.location;
|
||||||
|
url = GUI.replaceGetVar("saveString", GUI.getSaveString());
|
||||||
|
window.location = url;
|
||||||
|
};
|
||||||
|
|
||||||
|
GUI.load = function(saveString) {
|
||||||
|
GUI.savedValues = saveString.split(",");
|
||||||
|
};
|
||||||
|
|
||||||
|
GUI.savedValues = [];
|
||||||
|
|
||||||
|
GUI.getSaveString = function() {
|
||||||
|
var s = "";
|
||||||
|
var vals = [];
|
||||||
|
for (var i in GUI.allControllers) {
|
||||||
|
if (GUI.allControllers[i].type == "function") {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
var v = GUI.allControllers[i].getValue();
|
||||||
|
vals.push(v);
|
||||||
|
}
|
||||||
|
vals.join(',');
|
||||||
|
return vals;
|
||||||
|
}
|
||||||
|
|
||||||
|
GUI.getSaveStringFromURL = function() {
|
||||||
|
|
||||||
|
var vars = [], hash;
|
||||||
|
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
||||||
|
|
||||||
|
for (var i = 0; i < hashes.length; i++) {
|
||||||
|
hash = hashes[i].split("=")
|
||||||
|
if (hash == undefined) continue;
|
||||||
|
if (hash[0] == "saveString") {
|
||||||
|
return hash[1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
GUI.replaceGetVar = function(varName, val) {
|
||||||
|
|
||||||
|
var vars = [], hash;
|
||||||
|
var loc = window.location.href;
|
||||||
|
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
||||||
|
|
||||||
|
|
||||||
|
for (var i = 0; i < hashes.length; i++) {
|
||||||
|
hash = hashes[i].split("=")
|
||||||
|
if (hash == undefined) continue;
|
||||||
|
if (hash[0] == varName) {
|
||||||
|
return loc.replace(hash[1], val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (window.location.href.indexOf('?') != -1) {
|
||||||
|
return loc + "&"+varName+"="+val;
|
||||||
|
}
|
||||||
|
|
||||||
|
return loc+"?"+varName+"="+val;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
GUI.saveIndex = 0;
|
||||||
|
|
||||||
|
GUI.showSaveString = function() {
|
||||||
|
alert(GUI.getSaveString());
|
||||||
|
}
|
||||||
|
|
||||||
// Util functions
|
// Util functions
|
||||||
|
|
||||||
@ -419,3 +504,4 @@ GUI.error = function(str) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (GUI.getSaveStringFromURL() != null) GUI.load(GUI.getSaveStringFromURL());
|
288
index.html
288
index.html
@ -1,126 +1,201 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||||
<head>
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
<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" />
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
<script type="text/javascript" src="gui.js"></script>
|
<head>
|
||||||
<script type="text/javascript" src="controllers/slider.js"></script>
|
<meta name="generator" content="HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
|
||||||
<script type="text/javascript" src="controllers/controller.js"></script>
|
|
||||||
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
|
<title>gui-dat</title>
|
||||||
<script type="text/javascript" src="controllers/controller.function.js"></script>
|
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
|
||||||
<script type="text/javascript" src="controllers/controller.number.js"></script>
|
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
||||||
<script type="text/javascript" src="controllers/controller.string.js"></script>
|
<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">
|
||||||
|
//<![CDATA[
|
||||||
|
|
||||||
|
window.onload = function() {
|
||||||
|
|
||||||
|
prettyPrint();
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript" src="demo/improvedNoise.js"></script>
|
var fizzyText = new FizzyText("gui-dat");
|
||||||
<script type="text/javascript" src="demo/prettify.js"></script>
|
|
||||||
<script type="text/javascript" src="demo/demo.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
window.onload = function() {
|
//GUI.load("changed,3.2,0.10890000000000001,1.121,45,true");
|
||||||
|
var gui = new GUI();
|
||||||
|
|
||||||
prettyPrint();
|
// Text field
|
||||||
|
gui.add(fizzyText, "message");
|
||||||
|
|
||||||
var fizzyText = new FizzyText("gui-dat");
|
// Sliders with min and max
|
||||||
|
gui.add(fizzyText, "maxSize", 0.5, 7);
|
||||||
|
gui.add(fizzyText, "growthSpeed", 0.01, 1);
|
||||||
|
gui.add(fizzyText, "speed", 0.1, 2);
|
||||||
|
|
||||||
var gui = new GUI();
|
// Sliders with min, max and increment.
|
||||||
|
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
|
||||||
|
|
||||||
// Text field
|
// Boolean checkbox
|
||||||
gui.add(fizzyText, "message");
|
gui.add(fizzyText, "displayOutline");
|
||||||
|
|
||||||
|
// Fires a function called "explode"
|
||||||
|
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
|
||||||
|
|
||||||
|
gui.add(GUI, "showSaveString");
|
||||||
|
gui.add(GUI, "saveURL");
|
||||||
|
|
||||||
|
|
||||||
// Sliders with min and max
|
};
|
||||||
gui.add(fizzyText, "maxSize", 0.5, 7);
|
|
||||||
gui.add(fizzyText, "growthSpeed", 0.01, 1);
|
|
||||||
gui.add(fizzyText, "speed", 0.1, 2);
|
|
||||||
|
|
||||||
// Sliders with min, max and increment.
|
//]]>
|
||||||
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
// Boolean checkbox
|
<body>
|
||||||
gui.add(fizzyText, "displayOutline");
|
<div id="container">
|
||||||
|
|
||||||
// Fires a function called "explode"
|
<div id="helvetica-demo"></div>
|
||||||
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
|
|
||||||
|
|
||||||
};
|
<div id="notifier"></div>
|
||||||
|
|
||||||
</script>
|
<h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png" border="0" alt="GUI-DAT flag" /></a></h1>
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="container">
|
|
||||||
<div id = "helvetica-demo"></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>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<ul>
|
<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>
|
||||||
<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="http://github.com/jonobr1/gui-dat">Contribute on GitHub!</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Basic Usage</h2>
|
<ul>
|
||||||
<pre id="demo-pre" class="prettyprint"><script type="text/javascript" src="demo/demo.js"></script>
|
<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>
|
||||||
<script type="text/javascript">
|
|
||||||
|
<li><a href="http://github.com/jonobr1/gui-dat">Contribute on GitHub!</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Basic Usage</h2>
|
||||||
|
<pre id="demo-pre" class="prettyprint">
|
||||||
|
<script type="text/javascript" src="demo/demo.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
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>("gui-dat");
|
||||||
|
|
||||||
var gui = new GUI();
|
var gui = new GUI();
|
||||||
|
|
||||||
// Text field
|
// Text field
|
||||||
gui.add(fizzyText, "message");
|
gui.add(fizzyText, "message");
|
||||||
|
|
||||||
// Sliders with min and max
|
// Sliders with min and max
|
||||||
gui.add(fizzyText, "maxSize", 0.5, 7);
|
gui.add(fizzyText, "maxSize", 0.5, 7);
|
||||||
gui.add(fizzyText, "growthSpeed", 0.01, 1);
|
gui.add(fizzyText, "growthSpeed", 0.01, 1);
|
||||||
gui.add(fizzyText, "speed", 0.1, 2);
|
gui.add(fizzyText, "speed", 0.1, 2);
|
||||||
|
|
||||||
// Sliders with min, max and increment.
|
// Sliders with min, max and increment.
|
||||||
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
|
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
|
||||||
|
|
||||||
// Boolean checkbox
|
// Boolean checkbox
|
||||||
gui.add(fizzyText, "displayOutline");
|
gui.add(fizzyText, "displayOutline");
|
||||||
|
|
||||||
// Fires a function called "explode"
|
// Fires a function called "explode"
|
||||||
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
|
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
</script></pre>
|
</script>
|
||||||
|
</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/>(based on its initial value) and create the corresponding control.</li>
|
<li><strong>gui-dat</strong> will infer the type of the property you're trying to add<br />
|
||||||
<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
|
(based on its initial value) and create the corresponding control.</li>
|
||||||
</ul>
|
|
||||||
<hr/>
|
<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
|
||||||
|
</ul>
|
||||||
<h2>Fire a function when someone uses a control</h2>
|
|
||||||
<pre class="prettyprint">gui.add(obj, "propName").onChange(function(n) {
|
<!--
|
||||||
alert("You changed me to " + n);
|
<h2 class="collapsed">Fire a function when someone uses a control</h2>
|
||||||
});</pre>
|
<pre class="prettyprint">gui.add(obj, "propName").onChange(function(n) {
|
||||||
<hr/>
|
alert("You changed me to " + n);
|
||||||
<h2>Listen for variable changes <em>outside</em> of the GUI</h2>
|
});</pre>-->
|
||||||
<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>
|
<h2 class="collapsed">Saving your parameters</h2>
|
||||||
<hr/>
|
<div class="collapsable">
|
||||||
<h2>Advanced listening</h2>
|
<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>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:
|
<pre class="prettyprint">
|
||||||
<pre class="prettyprint">
|
// Make a button for the url function
|
||||||
|
gui.add(GUI, "saveURL");
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<h2 class="collapsed">Advanced saving</h2>
|
||||||
|
<div class="collapsable">
|
||||||
|
<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();
|
||||||
|
|
||||||
|
// 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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<pre class="prettyprint">
|
||||||
|
// Replace COPIED STRING with the value you got from
|
||||||
|
GUI.load("COPIED STRING");
|
||||||
|
|
||||||
|
var gui = new GUI();
|
||||||
|
|
||||||
|
// Now these properties will be set to the values you just saved.
|
||||||
|
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</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>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 class="collapsed">Listen for variable changes <em>outside</em> of the GUI</h2>
|
||||||
|
<div class="collapsable">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<h2 class="collapsed">Advanced listening</h2>
|
||||||
|
<div class="collapsable">
|
||||||
|
<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>
|
||||||
|
<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();
|
||||||
|
|
||||||
// Make your own loop
|
// Make your own loop
|
||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
gui.listen(); // updates values you've marked with listen()
|
gui.listen(); // updates values you've marked with listen()
|
||||||
}, 1000 / 60);
|
}, 1000 / 60);
|
||||||
</pre>
|
</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">
|
<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">
|
||||||
gui.autoListen = false; // disables internal interval
|
gui.autoListen = false; // disables internal interval
|
||||||
gui.add(obj, "add");
|
gui.add(obj, "add");
|
||||||
gui.add(obj, "lotsa");
|
gui.add(obj, "lotsa");
|
||||||
@ -128,13 +203,16 @@ gui.add(obj, "properties");
|
|||||||
|
|
||||||
// Make your own loop
|
// Make your own loop
|
||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
gui.listenAll(); // updates ALL values managed by this gui
|
gui.listenAll(); // updates ALL values managed by this gui
|
||||||
}, 1000 / 60);
|
}, 1000 / 60);
|
||||||
</pre>
|
</pre>
|
||||||
<hr/>
|
</div>
|
||||||
<h2>Multiple panels and custom placement</h2>
|
|
||||||
<p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
|
|
||||||
<pre class="prettyprint">
|
<h2 class="collapsed">Multiple panels and custom placement</h2>
|
||||||
|
<div class="collapsable">
|
||||||
|
<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 gui1 = new GUI();
|
||||||
var gui2 = new GUI();
|
var gui2 = new GUI();
|
||||||
|
|
||||||
@ -142,8 +220,10 @@ var gui2 = new GUI();
|
|||||||
gui1.name("Utilities");
|
gui1.name("Utilities");
|
||||||
gui2.name("Camera Placement");
|
gui2.name("Camera Placement");
|
||||||
</pre>
|
</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">// Notice this belongs to the GUI class (uppercase)
|
<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">
|
||||||
|
// Notice this belongs to the GUI class (uppercase)
|
||||||
// and not an instance thereof.
|
// and not an instance thereof.
|
||||||
GUI.autoPlace = false;
|
GUI.autoPlace = false;
|
||||||
|
|
||||||
@ -156,17 +236,19 @@ gui.domElement.style.left = "20px";
|
|||||||
|
|
||||||
document.getElementById("my-gui-container").appendChild( gui.domElement );
|
document.getElementById("my-gui-container").appendChild( gui.domElement );
|
||||||
</pre>
|
</pre>
|
||||||
<!--
|
</div>
|
||||||
<hr/>
|
|
||||||
<h2>Secrets</h2>
|
|
||||||
<ol id="secrets">
|
<h2 class="collapsed">Pro tips.</h2>
|
||||||
<strong>gui-dat</strong> panels are resizeable. <br/>
|
<div class="collapsable">
|
||||||
Press H to make panels invisible.
|
<ol id="secrets">
|
||||||
</ol>
|
<li><strong>gui-dat</strong> panels are resizeable. Drag the toggle button.</li>
|
||||||
-->
|
|
||||||
<footer>
|
<li>Press <strong>H</strong> to make panels invisible. Then press <strong>H</strong> to show them again.</li>
|
||||||
Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
|
</ol>
|
||||||
</footer>
|
|
||||||
</div>
|
<footer>Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.</footer>
|
||||||
</body>
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
Reference in New Issue
Block a user