mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Saving on lock, memorizes panel appearance, scrollOffsets, you name it. Gonna give this a lookover in FF then minify and push to gh-pages
This commit is contained in:
George Michael Brower
commit
5765730f80
@ -63,6 +63,20 @@ var NumberController = function() {
|
||||
document.addEventListener('mousemove', dragNumberField, false);
|
||||
}, false);
|
||||
|
||||
// Handle up arrow and down arrow
|
||||
numberField.addEventListener('keydown', function(e) {
|
||||
switch(e.keyCode) {
|
||||
case 38: // up
|
||||
var newVal = _this.getValue() + step;
|
||||
_this.setValue(newVal);
|
||||
break;
|
||||
case 40: // down
|
||||
var newVal = _this.getValue() - step;
|
||||
_this.setValue(newVal);
|
||||
break;
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.addEventListener('mouseup', function(e) {
|
||||
document.removeEventListener('mousemove', dragNumberField, false);
|
||||
GUI.makeSelectable(_this.parent.domElement);
|
||||
|
||||
@ -48,40 +48,56 @@ h2 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h2.collapsed {
|
||||
h2.section {
|
||||
margin: 0;
|
||||
padding: 20px 0 20px;
|
||||
cursor: pointer;
|
||||
border-top: 1px dotted #ccc;
|
||||
-webkit-transition: color 0.15s linear;
|
||||
}
|
||||
h2.section:hover {
|
||||
color: #00aeff;
|
||||
}
|
||||
|
||||
padding-top:24px;
|
||||
border-top: 1px solid #ccc;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
h2.collapsed {
|
||||
div.collapsed h2, div.expanded h2 {
|
||||
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
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;
|
||||
h2.last {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.collapsable {
|
||||
clear: both;
|
||||
div.expanded h2:before {
|
||||
content: '-';
|
||||
}
|
||||
div.collapsed h2:before {
|
||||
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;
|
||||
}
|
||||
|
||||
display: none;
|
||||
}*/
|
||||
div.collapsed .collapsable {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
height: 0;
|
||||
}
|
||||
div.expanded .collapsable {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
height: auto;
|
||||
}
|
||||
div.expanded { cursor: pointer; }
|
||||
|
||||
#helvetica-demo {
|
||||
position: absolute;
|
||||
|
||||
@ -224,5 +224,4 @@ function FizzyText(message) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
4
gui.css
4
gui.css
@ -1,8 +1,8 @@
|
||||
#guidat {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
width: auto;
|
||||
z-index: 1001;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
43
gui.js
43
gui.js
@ -22,8 +22,6 @@ var GUI = function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
|
||||
|
||||
var open = false;
|
||||
var width = 280;
|
||||
|
||||
@ -338,7 +336,7 @@ var GUI = function() {
|
||||
} else {
|
||||
controllerContainer.style.overflowY = "hidden";
|
||||
}
|
||||
console.log(controllerHeight, openHeight);
|
||||
// console.log(controllerHeight, openHeight);
|
||||
}
|
||||
|
||||
var addHandlers = {
|
||||
@ -399,7 +397,7 @@ var GUI = function() {
|
||||
|
||||
// used in saveURL
|
||||
this.appearanceVars = function() {
|
||||
return [open, width, openHeight];
|
||||
return [open, width, openHeight, controllerContainer.scrollTop]
|
||||
}
|
||||
|
||||
var beginResize = function() {
|
||||
@ -418,12 +416,26 @@ var GUI = function() {
|
||||
|
||||
if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
|
||||
|
||||
|
||||
width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
|
||||
_this.domElement.style.width = width+"px";
|
||||
|
||||
openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
|
||||
explicitOpenHeight = true;
|
||||
if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) {
|
||||
curControllerContainerHeight = openHeight;
|
||||
var t = GUI.savedAppearanceVars[GUI.guiIndex][3]
|
||||
|
||||
// Hack.
|
||||
setTimeout(function() {
|
||||
controllerContainer.scrollTop = t;
|
||||
}, 0);
|
||||
|
||||
if (GUI.scrollTop > -1) {
|
||||
console.log("hey");
|
||||
document.body.scrollTop = GUI.scrollTop;
|
||||
}
|
||||
resizeTo = openHeight;
|
||||
this.show();
|
||||
}
|
||||
|
||||
@ -447,19 +459,24 @@ GUI.saveURL = function() {
|
||||
window.location = url;
|
||||
};
|
||||
|
||||
GUI.scrollTop = -1;
|
||||
|
||||
// TODO: Not working in FF.
|
||||
GUI.load = function(saveString) {
|
||||
GUI.savedAppearanceVars = [];
|
||||
var vals = saveString.split(',');
|
||||
|
||||
console.log(saveString);
|
||||
|
||||
//GUI.savedAppearanceVars = [];
|
||||
var vals = saveString.split(",");
|
||||
console.log(vals);
|
||||
var numGuis = parseInt(vals[0]);
|
||||
var vv = vals.splice(1, vals.length-1);
|
||||
var numGuis = vals[0];
|
||||
console.log(numGuis);
|
||||
GUI.scrollTop = parseInt(vals[1]);
|
||||
for (var i = 0; i < numGuis; i++) {
|
||||
var appr = vv.splice(0, 3);
|
||||
var appr = vals.splice(2, 4);
|
||||
GUI.savedAppearanceVars.push(appr);
|
||||
}
|
||||
GUI.savedValues = vv;
|
||||
|
||||
GUI.savedValues = vals.splice(2, vals.length);
|
||||
};
|
||||
|
||||
GUI.savedValues = [];
|
||||
@ -470,10 +487,12 @@ GUI.getSaveString = function() {
|
||||
var vals = [];
|
||||
|
||||
vals.push(GUI.allGuis.length);
|
||||
vals.push(document.body.scrollTop);
|
||||
|
||||
|
||||
for (var i in GUI.allGuis) {
|
||||
var av = GUI.allGuis[i].appearanceVars();
|
||||
for (var j = 0; j <= GUI.allGuis.length; j++) {
|
||||
for (var j = 0; j < av.length; j++) {
|
||||
vals.push(av[j]);
|
||||
}
|
||||
}
|
||||
|
||||
123
index.html
123
index.html
@ -30,7 +30,7 @@
|
||||
<script type="text/javascript" src="demo/demo.js">
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
//<![CDATA[
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
@ -65,8 +65,55 @@
|
||||
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>
|
||||
</head>
|
||||
@ -74,8 +121,10 @@
|
||||
<body>
|
||||
<div id="container">
|
||||
|
||||
<!-- GUIDAT logo -->
|
||||
<div id="helvetica-demo"></div>
|
||||
|
||||
<!-- It gives you this! -->
|
||||
<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>
|
||||
@ -134,30 +183,30 @@ window.onload = function() {
|
||||
alert("You changed me to " + n);
|
||||
});</pre>-->
|
||||
|
||||
<h2 class="collapsed">Saving your parameters</h2>
|
||||
<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">
|
||||
// Make a button for the url function
|
||||
gui.add(GUI, "saveURL");
|
||||
</pre>
|
||||
gui.add(GUI, "saveURL");</pre>
|
||||
|
||||
</div>
|
||||
<h2 class="collapsed">Advanced saving</h2>
|
||||
</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>
|
||||
|
||||
<p>First, add the method <code>GUI.showSaveString()</code> to a gui object:</p>
|
||||
<pre class="prettyprint">
|
||||
var gui = new GUI();
|
||||
<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>
|
||||
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">
|
||||
@ -168,22 +217,22 @@ 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>
|
||||
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>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="collapsed">Listen for variable changes <em>outside</em> of the GUI</h2>
|
||||
<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>
|
||||
<pre class="prettyprint">gui.add(obj, "changingProperty").listen();</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<h2 class="collapsed">Advanced listening</h2>
|
||||
<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">
|
||||
@ -193,8 +242,7 @@ gui.add(obj, "changingProperty").listen();
|
||||
// Make your own loop
|
||||
setInterval(function() {
|
||||
gui.listen(); // updates values you've marked with listen()
|
||||
}, 1000 / 60);
|
||||
</pre>
|
||||
}, 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">
|
||||
@ -206,22 +254,20 @@ gui.add(obj, "properties");
|
||||
// Make your own loop
|
||||
setInterval(function() {
|
||||
gui.listenAll(); // updates ALL values managed by this gui
|
||||
}, 1000 / 60);
|
||||
</pre>
|
||||
</div>
|
||||
}, 1000 / 60);</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="collapsed">Multiple panels and custom placement</h2>
|
||||
<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();
|
||||
<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>
|
||||
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">
|
||||
@ -236,21 +282,22 @@ 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>
|
||||
document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 class="collapsed">Pro tips.</h2>
|
||||
<div class="collapsed">
|
||||
<h2 class="section last">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>
|
||||
</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>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user