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

updated index to handle toggling of documentation and also css fix to gui.css

Browse Source
This commit is contained in:
Jono Brandel 2011-01-31 12:21:14 -08:00
parent ea585f0de4
commit 0a220426e9
5 changed files with 193 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
demo/demo.css
View File

@ -48,8 +48,7 @@ h2 {
margin-bottom: 24px; margin-bottom: 24px;
} }
div.collapsed h2, div.expanded h2 {
h2.collapsed {
float: left; float: left;
clear: both; clear: both;
@ -57,27 +56,39 @@ h2.collapsed {
margin-top: 0; margin-top: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
} }
h2.collapsed:before { div.expanded h2:before {
content: '+'; 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 { div.collapsed h2:before {
color: red; content: '+';
}
div.expanded h2:before, div.collapsed h2:before {
font-weight: normal;
line-height: 2px;
float: left;
margin-top: 6px;
margin-right: 6px;
font-size: 9px;
font-family: Monaco, monospace;
}
div.collapsed:hover h2:before, div.expanded:hover h2:before {
color: red;
} }
.collapsable { div.collapsed .collapsable {
clear: both; overflow: hidden;
clear: both;
display: none; height: 0;
} }
div.expanded .collapsable {
overflow: hidden;
clear: both;
height: auto;
}
div.expanded { cursor: pointer; }
#helvetica-demo { #helvetica-demo {
position: absolute; position: absolute;

1
demo/demo.js
View File

@ -224,5 +224,4 @@ function FizzyText(message) {
} }
} }

4
gui.css
View File

@ -1,8 +1,8 @@
#guidat { #guidat {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; right: 0;
width: 100%; width: auto;
z-index: 1001; z-index: 1001;
text-align: right; text-align: right;
} }

4
gui.js
View File

@ -331,7 +331,7 @@ var GUI = function() {
} else { } else {
controllerContainer.style.overflowY = "hidden"; controllerContainer.style.overflowY = "hidden";
} }
console.log(controllerHeight, openHeight); // console.log(controllerHeight, openHeight);
} }
var addHandlers = { var addHandlers = {
@ -446,7 +446,7 @@ GUI.load = function(saveString) {
var numGuis = parseInt(vals[0]); var numGuis = parseInt(vals[0]);
var vv = vals.splice(1, vals.length-1); var vv = vals.splice(1, vals.length-1);
var numGuis = vals[0]; var numGuis = vals[0];
console.log(numGuis); // console.log(numGuis);
for (var i = 0; i < numGuis; i++) { for (var i = 0; i < numGuis; i++) {
var appr = vv.splice(0, 3); var appr = vv.splice(0, 3);
GUI.savedAppearanceVars.push(appr); GUI.savedAppearanceVars.push(appr);

262
index.html
View File

@ -30,7 +30,7 @@
<script type="text/javascript" src="demo/demo.js"> <script type="text/javascript" src="demo/demo.js">
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
window.onload = function() { window.onload = function() {
@ -65,8 +65,55 @@
gui.add(GUI, "saveURL"); gui.add(GUI, "saveURL");
// Javascript for documentation
getCollapsables();
handleListening();
}; };
function toggle(e) {
if(this.className == 'collapsed') {
this.className = 'expanded';
} else {
this.className = 'collapsed';
}
}
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);
}
}
//]]> //]]>
</script> </script>
</head> </head>
@ -74,8 +121,10 @@
<body> <body>
<div id="container"> <div id="container">
<!-- GUIDAT logo -->
<div id="helvetica-demo"></div> <div id="helvetica-demo"></div>
<!-- It gives you this! -->
<div id="notifier"></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> <h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png" border="0" alt="GUI-DAT flag" /></a></h1>
@ -133,124 +182,133 @@ window.onload = function() {
<pre class="prettyprint">gui.add(obj, "propName").onChange(function(n) { <pre class="prettyprint">gui.add(obj, "propName").onChange(function(n) {
alert("You changed me to " + n); alert("You changed me to " + n);
});</pre>--> });</pre>-->
<h2 class="collapsed">Saving your parameters</h2> <div class="collapsed">
<div class="collapsable"> <h2>Saving your parameters</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> <div class="collapsable">
<pre class="prettyprint"> <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>
// Make a button for the url function <pre class="prettyprint">
gui.add(GUI, "saveURL"); // Make a button for the url function
</pre> gui.add(GUI, "saveURL");
</pre>
</div> </div>
<h2 class="collapsed">Advanced saving</h2> </div>
<div class="collapsable"> <div class="collapsed">
<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> <h2>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> <p>First, add the method <code>GUI.showSaveString()</code> to a gui object:</p>
<pre class="prettyprint"> <pre class="prettyprint">
var gui = new GUI(); var gui = new GUI();
// Add some stuff (and pretend I change their values); // Add some stuff (and pretend I change their values);
gui.add(someObject, "someProperty"); gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty"); gui.add(someObject, "someOtherProperty");
// Make a save button. // Make a save button.
gui.add(GUI, "showSaveString"); gui.add(GUI, "showSaveString");
</pre> </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>GUI.load()</code> before you instantiate any gui objects.</p>
<pre class="prettyprint"> <pre class="prettyprint">
// Replace COPIED STRING with the value you got from // Replace COPIED STRING with the value you got from
GUI.load("COPIED STRING"); GUI.load("COPIED STRING");
var gui = new GUI(); var gui = new GUI();
// Now these properties will be set to the values you just saved. // Now these properties will be set to the values you just saved.
gui.add(someObject, "someProperty"); gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty"); gui.add(someObject, "someOtherProperty");
</pre> </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> <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>
</div> </div>
<div class="collapsed">
<h2>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>
</div>
<div class="collapsed">
<h2>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.add(obj, "changingProperty").listen();
<h2 class="collapsed">Listen for variable changes <em>outside</em> of the GUI</h2> // Make your own loop
<div class="collapsable"> setInterval(function() {
<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> gui.listen(); // updates values you've marked with listen()
<pre class="prettyprint"> }, 1000 / 60);
gui.add(obj, "changingProperty").listen(); </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">
gui.autoListen = false; // disables internal interval
gui.add(obj, "add");
gui.add(obj, "lotsa");
gui.add(obj, "properties");
// Make your own loop
setInterval(function() {
gui.listenAll(); // updates ALL values managed by this gui
}, 1000 / 60);
</pre>
</div>
</div>
</div> <div class="collapsed">
<h2 class="collapsed">Advanced listening</h2> <h2>Multiple panels and custom placement</h2>
<div class="collapsable"> <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> <p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
<pre class="prettyprint"> <pre class="prettyprint">
gui.autoListen = false; // disables internal interval var gui1 = new GUI();
gui.add(obj, "changingProperty").listen(); var gui2 = new GUI();
// Make your own loop // The name function overwrites the "Show Controls" text.
setInterval(function() { gui1.name("Utilities");
gui.listen(); // updates values you've marked with listen() gui2.name("Camera Placement");
}, 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> <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">
gui.autoListen = false; // disables internal interval // Notice this belongs to the GUI class (uppercase)
gui.add(obj, "add"); // and not an instance thereof.
gui.add(obj, "lotsa"); GUI.autoPlace = false;
gui.add(obj, "properties");
// Make your own loop var gui = new GUI();
setInterval(function() {
gui.listenAll(); // updates ALL values managed by this gui
}, 1000 / 60);
</pre>
</div>
<h2 class="collapsed">Multiple panels and custom placement</h2> // Do some custom styles ...
<div class="collapsable"> gui.domElement.style.position = "absolute";
<p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p> gui.domElement.style.top = "20px";
<pre class="prettyprint"> gui.domElement.style.left = "20px";
var gui1 = new GUI();
var gui2 = new GUI();
// The name function overwrites the "Show Controls" text. document.getElementById("my-gui-container").appendChild( gui.domElement );
gui1.name("Utilities"); </pre>
gui2.name("Camera Placement"); </div>
</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)
// and not an instance thereof.
GUI.autoPlace = false;
var gui = new GUI();
// Do some custom styles ...
gui.domElement.style.position = "absolute";
gui.domElement.style.top = "20px";
gui.domElement.style.left = "20px";
document.getElementById("my-gui-container").appendChild( gui.domElement );
</pre>
</div>
<h2 class="collapsed">Pro tips.</h2>
<div class="collapsable">
<ol id="secrets">
<li><strong>gui-dat</strong> panels are resizeable. Drag the toggle button.</li>
<li>Press <strong>H</strong> to make panels invisible. Then press <strong>H</strong> to show them again.</li>
</ol>
<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>
</div> </div>
</div>
<div class="collapsed">
<h2 class="collapsed">Pro tips.</h2>
<div class="collapsable">
<ol id="secrets">
<li><strong>gui-dat</strong> panels are resizeable. Drag the toggle button.</li>
<li>Press <strong>H</strong> to make panels invisible. Then press <strong>H</strong> to show them again.</li>
</ol>
</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.
</footer>
</body> </body>
</html> </html>