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

css3 animations work for documentation page, thanks szimek!

Browse Source
This commit is contained in:
Jono Brandel 2011-02-03 14:36:28 -08:00
parent f23464c58c
commit e21e0ac5c3
2 changed files with 72 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
demo/demo.css
View File

@ -49,14 +49,14 @@ h2 {
}
h2.section {
margin: 0;
padding: 20px 0 20px;
cursor: pointer;
border-top: 1px dotted #ccc;
-webkit-transition: color 0.15s linear;
margin: 0;
padding: 20px 0 20px;
cursor: pointer;
border-top: 1px dotted #ccc;
-webkit-transition: color 0.15s linear;
}
h2.section:hover {
color: #00aeff;
color: #00aeff;
}
div.collapsed h2, div.expanded h2 {
@ -66,11 +66,14 @@ div.collapsed h2, div.expanded h2 {
width: 100%;
cursor: pointer;
}
h2.last {
border-bottom: 1px dotted #ccc;
margin-bottom: 20px;
}
div.trans {
border-top: 1px dotted #ccc;
margin: 0px 0px 20px 0px;
}
ol#secrets {
padding: 0px 0px 20px 0px;
}
div.expanded h2:before {
content: '-';
}
@ -87,6 +90,18 @@ div.expanded h2:before, div.collapsed h2:before {
font-family: Monaco, monospace;
}
div.collapsable {
overflow: hidden;
clear: both;
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
}
div.collapsable div {
height: auto;
}
div.collapsed .collapsable {
overflow: hidden;
clear: both;
@ -97,6 +112,7 @@ div.expanded .collapsable {
clear: both;
height: auto;
}
div.expanded { cursor: pointer; }
#helvetica-demo {

74
index.html
View File

@ -72,10 +72,15 @@
function toggle(e) {
if(this.className == 'collapsed') {
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';
}
}
@ -186,20 +191,22 @@ window.onload = function() {
<div class="collapsed">
<h2 class="section">Saving your parameters</h2>
<div class="collapsable">
<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">
<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">
// Make a button for the url function
gui.add(GUI, "saveURL");</pre>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">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>
<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>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");
@ -208,8 +215,8 @@ 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">
<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 showSaveString()
GUI.load("COPIED STRING");
@ -219,23 +226,27 @@ 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>
</div>
<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>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">Listen for variable changes outside 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>
<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>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">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">
<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>
<pre class="prettyprint">
gui.autoListen = false; // disables internal interval
gui.add(obj, "changingProperty").listen();
@ -244,8 +255,8 @@ setInterval(function() {
gui.listen(); // updates values you've marked with listen()
}, 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">
<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.add(obj, "add");
gui.add(obj, "lotsa");
@ -255,22 +266,24 @@ gui.add(obj, "properties");
setInterval(function() {
gui.listenAll(); // updates ALL values managed by this gui
}, 1000 / 60);</pre>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">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();
<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();
// 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>
<pre class="prettyprint">
<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.
GUI.autoPlace = false;
@ -283,21 +296,26 @@ gui.domElement.style.top = "20px";
gui.domElement.style.left = "20px";
document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section last">Pro tips.</h2>
<h2 class="section">Pro tips.</h2>
<div class="collapsable">
<ol id="secrets">
<li><strong>gui-dat</strong> panels are resizeable. Drag the show/hide button.</li>
<div>
<ol id="secrets">
<li><strong>gui-dat</strong> panels are resizeable. Drag the show/hide button.</li>
<li>Pro tip #2 forthcoming.</li>
</ol>
<li>Pro tip #2 forthcoming.</li>
</ol>
</div>
</div>
</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.
<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>
</body>
</html>