From 7ce2af6f8ea7dcac1abba1d47d5850f37771934e Mon Sep 17 00:00:00 2001 From: Jono Brandel Date: Mon, 31 Jan 2011 12:21:14 -0800 Subject: [PATCH] updated index to handle toggling of documentation and also css fix to gui.css --- demo/demo.css | 47 +++++---- demo/demo.js | 1 - gui.css | 4 +- gui.js | 4 +- index.html | 262 ++++++++++++++++++++++++++++++-------------------- 5 files changed, 193 insertions(+), 125 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index 1191128..ae91c79 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -48,8 +48,7 @@ h2 { margin-bottom: 24px; } - -h2.collapsed { +div.collapsed h2, div.expanded h2 { float: left; clear: both; @@ -57,27 +56,39 @@ h2.collapsed { margin-top: 0; border-top: 1px solid #ccc; 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; +div.expanded h2:before { + content: '-'; } -h2.collapsed:hover:before { -color: red; +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; +} +div.collapsed:hover h2:before, div.expanded:hover h2:before { + color: red; } -.collapsable { -clear: both; - -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; diff --git a/demo/demo.js b/demo/demo.js index 62eca6e..e002bd1 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -224,5 +224,4 @@ function FizzyText(message) { } - } diff --git a/gui.css b/gui.css index c06bbc3..a3cb075 100644 --- a/gui.css +++ b/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; } diff --git a/gui.js b/gui.js index db6020a..842638a 100644 --- a/gui.js +++ b/gui.js @@ -331,7 +331,7 @@ var GUI = function() { } else { controllerContainer.style.overflowY = "hidden"; } - console.log(controllerHeight, openHeight); + // console.log(controllerHeight, openHeight); } var addHandlers = { @@ -446,7 +446,7 @@ GUI.load = function(saveString) { var numGuis = parseInt(vals[0]); var vv = vals.splice(1, vals.length-1); var numGuis = vals[0]; - console.log(numGuis); + // console.log(numGuis); for (var i = 0; i < numGuis; i++) { var appr = vv.splice(0, 3); GUI.savedAppearanceVars.push(appr); diff --git a/index.html b/index.html index a5c0527..6962bb3 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@ @@ -74,8 +121,10 @@
+
+

GUI-DAT flag

@@ -133,124 +182,133 @@ window.onload = function() { 
gui.add(obj, "propName").onChange(function(n) {
         alert("You changed me to " + n);
 });
--> - - -
-

The simplest way to save your parameters is via GUI.saveURL(). This method directs your browser to a URL containing the current GUI settings.

- 
-// Make a button for the url function
-gui.add(GUI, "saveURL");
-
+ + + + + + -
- -
-

By default, gui-dat will create an internal interval that checks for changes in the values you've marked with listen(). If you'd like to check for these changes in an interval of your own definition, use the following:

- 
-gui.autoListen = false; // disables internal interval
-gui.add(obj, "changingProperty").listen();
+
-

Alternatively, you can forego calling listen() on individual controllers, and instead choose to monitor changes in all values controlled by your gui.

- 
-gui.autoListen = false; // disables internal interval
-gui.add(obj, "add");
-gui.add(obj, "lotsa");
-gui.add(obj, "properties");
+	    	
By default, gui-dat 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.

+	    	
+	// Notice this belongs to the GUI class (uppercase) 
+	// and not an instance thereof.
+	GUI.autoPlace = false; 
 
-// Make your own loop
-setInterval(function() {
-        gui.listenAll(); // updates ALL values managed by this gui
-}, 1000 / 60);
-

-
- + var gui = new GUI(); - -
-

You can instantiate multiple GUI objects and name them however you'd like.

- 
-var gui1 = new GUI();
-var gui2 = new GUI();
+	// Do some custom styles ...
+	gui.domElement.style.position = "absolute";
+	gui.domElement.style.top = "20px";
+	gui.domElement.style.left = "20px";
 
-// The name function overwrites the "Show Controls" text.
-gui1.name("Utilities");
-gui2.name("Camera Placement");
-
- -

By default, gui-dat 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.

- 
-// 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 );
-
-
- - - -
-
    -
  1. gui-dat panels are resizeable. Drag the toggle button.
    2. - -
  2. Press H to make panels invisible. Then press H to show them again.
    3. -
- - + document.getElementById("my-gui-container").appendChild( gui.domElement ); + +
- + + + +