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
480abb17ca
dat.gui/index.html

389 lines
12 KiB
HTML
Raw Normal View History

modified demo.css for expansion animations
2011-02-09 21:50:24 +00:00
<!doctype html>
updated buildscript barnraiser
2011-04-19 00:27:33 +00:00
<html>
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.
2011-01-31 04:53:33 +00:00
<head>
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
<title>dat.gui</title>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<link rel="icon" type="image/png" href="demo/assets/favicon.png"/>
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css"/>
moved src into internal dat folder
2011-04-18 20:51:15 +00:00
<link href="src/dat/gui.css" media="screen" rel="stylesheet" type="text/css"
/>
More refactoring and began to fix .active issues on number slider
2011-04-18 21:13:15 +00:00
<script type="text/javascript" src="src/dat/GUI.js"></script>
<script type="text/javascript" src="src/dat/Slider.js"></script>
<script type="text/javascript" src="src/dat/Controller.js"></script>
<script type="text/javascript" src="src/dat/ControllerBoolean.js"></script>
<script type="text/javascript" src="src/dat/ControllerFunction.js"></script>
<script type="text/javascript" src="src/dat/ControllerNumber.js"></script>
<script type="text/javascript" src="src/dat/ControllerString.js"></script>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
Cleaning up markup
2011-02-09 22:03:02 +00:00
<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>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +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.
2011-01-31 04:53:33 +00:00
<script type="text/javascript">
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
//<![CDATA[
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
window.onload = function() {
prettyPrint();
var fizzyText = new FizzyText("dat.gui");
var gui = new DAT.GUI();
// Text field
gui.add(fizzyText, "message");
// Sliders with min + max
gui.add(fizzyText, "maxSize").min(0.5).max(7);
gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step
// Sliders with min, max and increment.
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
gui.add(fizzyText, "displayOutline");
// Fires a function called "explode"
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
// Javascript for documentation
getCollapsables();
handleListening();
};
function toggle(e) {
var collapsable = this.childNodes[3],
wrapper = collapsable.childNodes[1];
if (this.className === 'collapsed') {
this.className = 'expanded';
collapsable.style.height = wrapper.clientHeight + 'px';
} else {
this.className = 'collapsed';
collapsable.style.height = '0px';
}
}
function getCollapsables() {
if (document.getElementsByClassName == undefined) {
document.getElementsByClassName = function(className) {
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
};
}
collapsed = document.getElementsByClassName('collapsed');
expanded = document.getElementsByClassName('expanded');
}
function handleListening() {
for (var i = 0; i < collapsed.length; i++) {
collapsed[i].addEventListener('click', toggle, false);
}
for (var j = 0; j < expanded.length; j++) {
expanded[i].addEventListener('click', toggle, false);
}
}
//]]>
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.
2011-01-31 04:53:33 +00:00
</script>
</head>
<body>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<div id="container">
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<!-- GUIDAT logo -->
<div id="helvetica-demo"></div>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<!-- It gives you this! -->
<div id="notifier"></div>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png"
border="0" alt="dat.gui flag"/></a>
</h1>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<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>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<ul>
<li><a href="https://github.com/jonobr1/dat.gui/raw/versions/gui.min
.js"><strong>Download the minified source</strong></a>
<small
updated buildscript barnraiser
2011-04-19 00:27:33 +00:00
id="buildsize">[22.8kb]
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</small>
</li>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<li><a href="http://github.com/jonobr1/dat.gui">Contribute on GitHub!</a></li>
</ul>
<h2>Basic Usage</h2>
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.
2011-01-31 04:53:33 +00:00
<pre id="demo-pre" class="prettyprint">
typo
2011-02-01 01:24:30 +00:00
&lt;script type="text/javascript" src="gui.min.js"&gt;&lt;/script&gt;
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.
2011-01-31 04:53:33 +00:00
&lt;script type="text/javascript"&gt;
Commented up the source to FizzyText and added setName to the pre on index.html
2011-01-28 20:26:38 +00:00
window.onload = function() {
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
var fizzyText = new <a href="demo/demo.js">FizzyText</a>("dat.gui");
Commented up the source to FizzyText and added setName to the pre on index.html
2011-01-28 20:26:38 +00:00
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
var gui = new DAT.GUI();
Changed GUI to be instanceable (rather than just one GUI per project). GUI.start() is now var gui = new GUI(); Included prettify.js in the repo so people checking the demo localy doesn't need the internets. Changed way of hidding the panel (controllerContainer.style.height rather than this.domElement.stylemarginTop).
2011-01-29 00:38:58 +00:00
Commented up the source to FizzyText and added setName to the pre on index.html
2011-01-28 20:26:38 +00:00
// Text field
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.
2011-01-31 04:53:33 +00:00
gui.add(fizzyText, "message");
Commented up the source to FizzyText and added setName to the pre on index.html
2011-01-28 20:26:38 +00:00
Added onFinishChange() for string and number controllers, onFire() for function controllers and noSlider() for number controllers.
2011-02-09 19:39:18 +00:00
// Sliders with min + max
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
gui.add(fizzyText, "maxSize").min(0.5).max(7);
gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step
Changed GUI to be instanceable (rather than just one GUI per project). GUI.start() is now var gui = new GUI(); Included prettify.js in the repo so people checking the demo localy doesn't need the internets. Changed way of hidding the panel (controllerContainer.style.height rather than this.domElement.stylemarginTop).
2011-01-29 00:38:58 +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.
2011-01-31 04:53:33 +00:00
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
Changed GUI to be instanceable (rather than just one GUI per project). GUI.start() is now var gui = new GUI(); Included prettify.js in the repo so people checking the demo localy doesn't need the internets. Changed way of hidding the panel (controllerContainer.style.height rather than this.domElement.stylemarginTop).
2011-01-29 00:38:58 +00:00
Commented up the source to FizzyText and added setName to the pre on index.html
2011-01-28 20:26:38 +00:00
// Boolean checkbox
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.
2011-01-31 04:53:33 +00:00
gui.add(fizzyText, "displayOutline");
Commented up the source to FizzyText and added setName to the pre on index.html
2011-01-28 20:26:38 +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.
2011-01-31 04:53:33 +00:00
// Fires a function called "explode"
gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
Changed GUI to be instanceable (rather than just one GUI per project). GUI.start() is now var gui = new GUI(); Included prettify.js in the repo so people checking the demo localy doesn't need the internets. Changed way of hidding the panel (controllerContainer.style.height rather than this.domElement.stylemarginTop).
2011-01-29 00:38:58 +00:00
Commented up the source to FizzyText and added setName to the pre on index.html
2011-01-28 20:26:38 +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.
2011-01-31 04:53:33 +00:00
&lt;/script&gt;
</pre>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<ul id="desc">
<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>
</ul>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +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.
2011-01-31 04:53:33 +00:00
<h2 class="collapsed">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);
});</pre>-->
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<div class="collapsed">
<h2 class="section">Saving your parameters</h2>
<div class="collapsable">
<div>
<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>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
<pre class="prettyprint last">
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.
2011-01-31 04:53:33 +00:00
// Make a button for the url function
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
gui.add(DAT.GUI, "saveURL");</pre>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
</div>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</div>
</div>
<div class="collapsed">
<h2 class="section">Advanced saving</h2>
<div class="collapsable">
<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>DAT.GUI.showSaveString()</code> to a gui
object:</p>
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
<pre class="prettyprint">var gui = new DAT.GUI();
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.
2011-01-31 04:53:33 +00:00
// Add some stuff (and pretend I change their values);
gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty");
// Make a save button.
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
gui.add(DAT.GUI, "showSaveString");</pre>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<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>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
<pre class="prettyprint">
typo
2011-02-01 01:24:30 +00:00
// Replace COPIED STRING with the value you got from showSaveString()
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
DAT.GUI.load("COPIED STRING");
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.
2011-01-31 04:53:33 +00:00
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
var gui = new DAT.GUI();
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.
2011-01-31 04:53:33 +00:00
// Now these properties will be set to the values you just saved.
gui.add(someObject, "someProperty");
Saving on lock, memorizes panel appearance, scrollOffsets, you name it. Gonna give this a lookover in FF then minify and push to gh-pages
2011-02-01 00:49:14 +00:00
gui.add(someObject, "someOtherProperty");</pre>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<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>
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.
2011-01-31 04:53:33 +00:00
</div>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</div>
</div>
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.
2011-01-31 04:53:33 +00:00
Added options() method for string and number controllers
2011-02-09 21:28:35 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<div class="collapsed">
<h2 class="section">Choosing from a list of values</h2>
<div class="collapsable">
<div>
modified demo.css for expansion animations
2011-02-09 21:50:24 +00:00
<pre class="prettyprint first last">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
Added options() method for string and number controllers
2011-02-09 21:28:35 +00:00
// Alternatively, you can specify custom labels using object syntax
gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
</pre>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
</div>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</div>
</div>
<div class="collapsed">
<h2 class="section">Listen for variable changes inside the GUI</h2>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<div class="collapsable">
<div>
<p>To fire a function whenever a user changes a variable via the GUI, use
the following syntax:</p>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
<pre class="prettyprint">gui.add(obj, "propertyName").onChange(function(newValue) {
Added onFinishChange() for string and number controllers, onFire() for function controllers and noSlider() for number controllers.
2011-02-09 19:39:18 +00:00
alert("You changed me to " + newValue);
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
});</pre>
<p>This can be slightly annoying for types like number or string. You may
not want to fire a function while the user is sliding, or while they're
typing. To fire a function when the user has <em>finished</em> making
changes, use the following:</p>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
<pre class="prettyprint">gui.add(obj, "propertyName").onFinishChange(function(newValue) {
Added onFinishChange() for string and number controllers, onFire() for function controllers and noSlider() for number controllers.
2011-02-09 19:39:18 +00:00
alert("You just finished changing me to " + newValue);
});</pre>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<p>Finally, if you'd like to do a little something extra when a function
is called, use the following:</p>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
<pre class="prettyprint last">gui.add(obj, "functionName").onFire(function() {
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
alert("You called a function with dat.gui");
Added onFinishChange() for string and number controllers, onFire() for function controllers and noSlider() for number controllers.
2011-02-09 19:39:18 +00:00
});</pre>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
</div>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</div>
</div>
<div class="collapsed">
<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 DAT.GUI to reflect those changes, use the <code>listen()</code>
method.</p>
<pre
class="prettyprint last">gui.add(obj, "changingProperty").listen();</pre>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
</div>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</div>
</div>
<div class="collapsed">
<h2 class="section">Advanced listening</h2>
<div class="collapsable">
<div>
<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>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
<pre class="prettyprint">
Changed Controller class to prototype syntax, added a method updateDisplay() for Controller (used by listen()), implemented by each Controller subclass.
2011-01-29 04:04:33 +00:00
gui.autoListen = false; // disables internal interval
totally resizeable :)
2011-01-30 23:03:09 +00:00
gui.add(obj, "changingProperty").listen();
Changed Controller class to prototype syntax, added a method updateDisplay() for Controller (used by listen()), implemented by each Controller subclass.
2011-01-29 04:04:33 +00:00
// Make your own loop
setInterval(function() {
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
gui.listen(); // updates values you've marked with listen()
Saving on lock, memorizes panel appearance, scrollOffsets, you name it. Gonna give this a lookover in FF then minify and push to gh-pages
2011-02-01 00:49:14 +00:00
}, 1000 / 60);</pre>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<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>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
<pre class="prettyprint last">
Changed Controller class to prototype syntax, added a method updateDisplay() for Controller (used by listen()), implemented by each Controller subclass.
2011-01-29 04:04:33 +00:00
gui.autoListen = false; // disables internal interval
gui.add(obj, "add");
gui.add(obj, "lotsa");
gui.add(obj, "properties");
// Make your own loop
setInterval(function() {
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
gui.listenAll(); // updates ALL values managed by this gui
Saving on lock, memorizes panel appearance, scrollOffsets, you name it. Gonna give this a lookover in FF then minify and push to gh-pages
2011-02-01 00:49:14 +00:00
}, 1000 / 60);</pre>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
</div>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</div>
</div>
<div class="collapsed">
<h2 class="section">Multiple panels and custom placement</h2>
<div class="collapsable">
<div>
<p>You can instantiate multiple <code>DAT.GUI</code> objects and name them
however you'd like.</p>
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
<pre class="prettyprint">var gui1 = new DAT.GUI();
var gui2 = new DAT.GUI();
totally resizeable :)
2011-01-30 23:03:09 +00:00
// The name function overwrites the "Show Controls" text.
gui1.name("Utilities");
Saving on lock, memorizes panel appearance, scrollOffsets, you name it. Gonna give this a lookover in FF then minify and push to gh-pages
2011-02-01 00:49:14 +00:00
gui2.name("Camera Placement");</pre>
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.
2011-01-31 04:53:33 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<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>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
<pre class="prettyprint last">
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
// Notice this belongs to the DAT.GUI class (uppercase)
totally resizeable :)
2011-01-30 23:03:09 +00:00
// and not an instance thereof.
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
DAT.GUI.autoPlace = false;
totally resizeable :)
2011-01-30 23:03:09 +00:00
Moved everything to the DAT namespace, and officially renamed the project dat.gui :)
2011-04-18 19:01:45 +00:00
var gui = new DAT.GUI();
totally resizeable :)
2011-01-30 23:03:09 +00:00
// Do some custom styles ...
gui.domElement.style.position = "absolute";
gui.domElement.style.top = "20px";
gui.domElement.style.left = "20px";
Saving on lock, memorizes panel appearance, scrollOffsets, you name it. Gonna give this a lookover in FF then minify and push to gh-pages
2011-02-01 00:49:14 +00:00
document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
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.
2011-01-31 04:53:33 +00:00
</div>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</div>
</div>
updated index to handle toggling of documentation and also css fix to gui.css
2011-01-31 20:21:14 +00:00
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
<div class="collapsed">
<h2 class="section">Pro tips.</h2>
<div class="collapsable">
<div>
<ol id="secrets">
<li><strong>dat.gui</strong> panels are resizeable. Drag the show/hide
button.
</li>
<li>Press 'H' to show/hide GUI&apos;s.</li>
</ol>
merged szimeks formatting with current branch
2011-02-11 19:12:07 +00:00
</div>
min, max and step as methods for ControllerNumber
2011-04-18 22:40:26 +00:00
</div>
</div>
<div class="trans">&nbsp;</div>
<footer class="trans">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>
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.
2011-01-31 04:53:33 +00:00
</body>
Changed GUI to be instanceable (rather than just one GUI per project). GUI.start() is now var gui = new GUI(); Included prettify.js in the repo so people checking the demo localy doesn't need the internets. Changed way of hidding the panel (controllerContainer.style.height rather than this.domElement.stylemarginTop).
2011-01-29 00:38:58 +00:00
</html>
Reference in New Issue Copy Permalink