From 738b4d0d0684804d389eb413eb9c4fb7d5aed0db Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Sun, 30 Jan 2011 23:53:33 -0500 Subject: [PATCH] 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. --- controllers/controller.number.js | 2 - demo/demo.css | 41 ++++- gui.css | 3 - gui.js | 96 ++++++++++- index.html | 288 ++++++++++++++++++++----------- 5 files changed, 314 insertions(+), 116 deletions(-) diff --git a/controllers/controller.number.js b/controllers/controller.number.js index da8b201..495577c 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -18,8 +18,6 @@ var NumberController = function() { var max = arguments[4]; var step = arguments[5]; - console.log("NumberController", this.propertyName, arguments); - if (!step) { if (min != undefined && max != undefined) { step = (max-min)*0.01; diff --git a/demo/demo.css b/demo/demo.css index f4fb66b..1191128 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -28,7 +28,7 @@ h1 { font-weight: 800; text-transform: lowercase; line-height: 80px; - margin: 20px 0 20px 0; + margin: 39px 0 20px 0; } h1 a:link, h1 a:visited, h1 a:hover, h1 a:active { @@ -48,6 +48,37 @@ h2 { margin-bottom: 24px; } + +h2.collapsed { + + float: left; + clear: both; + padding-top:24px; + margin-top: 0; + border-top: 1px solid #ccc; + width: 100%; +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; +} + +.collapsable { +clear: both; + +display: none; +} + #helvetica-demo { position: absolute; left: 0; @@ -74,16 +105,18 @@ pre { background-color: #222; max-width: 500px; font: 10px Monaco, monospace; + clear: both; } -p, ul { +p, ul, ol { font-size: 125%; + clear: both; line-height: 18px; margin-bottom: 24px; } li { - margin-left: 18px; + margin-left: 22px; } ul#desc { @@ -112,6 +145,8 @@ footer { background-color: #eee; width: 510px; padding: 10px; + clear: both; + } pre a:link, diff --git a/gui.css b/gui.css index ba8ec75..c06bbc3 100644 --- a/gui.css +++ b/gui.css @@ -15,9 +15,6 @@ text-align: right; margin-right: 20px; margin-bottom: 20px; background-color: #fff; - -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); } .guidat, diff --git a/gui.js b/gui.js index 87603b5..7eb4a01 100644 --- a/gui.js +++ b/gui.js @@ -1,3 +1,6 @@ + + + var GUI = function() { var _this = this; @@ -60,15 +63,16 @@ var GUI = function() { mx = e.pageX; var dmy = my - pmy; + // TODO: Flip this if you want to resize to the left. var dmx = pmx - mx; if (dmy > 0 && curControllerContainerHeight > controllerHeight) { var d = GUI.map(curControllerContainerHeight, controllerHeight, controllerHeight + 100, 1, 0); - dmy *= Math.pow(d, 1.5); - + dmy *= d; } + toggleDragged = true; dragDisplacementY += dmy; dragDisplacementX += dmx; @@ -290,7 +294,16 @@ var GUI = function() { // Success. controllerContainer.appendChild(controllerObject.domElement); controllers.push(controllerObject); + GUI.allControllers.push(controllerObject); + // Do we have a saved value for this controller? + if (type != "function" && + GUI.saveIndex < GUI.savedValues.length) { + controllerObject.setValue(GUI.savedValues[GUI.saveIndex]); + GUI.saveIndex++; + } + + // Compute sum height of controllers. controllerHeight = 0; for (var i in controllers) { @@ -300,9 +313,6 @@ var GUI = function() { openHeight = controllerHeight; checkForOverflow(); - - - return controllerObject; } @@ -383,8 +393,83 @@ var GUI = function() { }; +// Static members + GUI.autoPlace = true; GUI.autoPlaceContainer = null; +GUI.allControllers = []; + +GUI.saveURL = function() { + title = window.location; + url = GUI.replaceGetVar("saveString", GUI.getSaveString()); + window.location = url; +}; + +GUI.load = function(saveString) { + GUI.savedValues = saveString.split(","); +}; + +GUI.savedValues = []; + +GUI.getSaveString = function() { + var s = ""; + var vals = []; + for (var i in GUI.allControllers) { + if (GUI.allControllers[i].type == "function") { + continue; + } + var v = GUI.allControllers[i].getValue(); + vals.push(v); + } + vals.join(','); + return vals; +} + +GUI.getSaveStringFromURL = function() { + + var vars = [], hash; + var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + + for (var i = 0; i < hashes.length; i++) { + hash = hashes[i].split("=") + if (hash == undefined) continue; + if (hash[0] == "saveString") { + return hash[1]; + } + } + + return null; + +}; + +GUI.replaceGetVar = function(varName, val) { + + var vars = [], hash; + var loc = window.location.href; + var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); + + + for (var i = 0; i < hashes.length; i++) { + hash = hashes[i].split("=") + if (hash == undefined) continue; + if (hash[0] == varName) { + return loc.replace(hash[1], val); + } + } + + if (window.location.href.indexOf('?') != -1) { + return loc + "&"+varName+"="+val; + } + + return loc+"?"+varName+"="+val; + +}; + +GUI.saveIndex = 0; + +GUI.showSaveString = function() { + alert(GUI.getSaveString()); +} // Util functions @@ -419,3 +504,4 @@ GUI.error = function(str) { } }; +if (GUI.getSaveStringFromURL() != null) GUI.load(GUI.getSaveStringFromURL()); \ No newline at end of file diff --git a/index.html b/index.html index 86be472..062b5e1 100644 --- a/index.html +++ b/index.html @@ -1,126 +1,201 @@ - - - gui-dat - - + - - - - - - - - + + + + + gui-dat + + + + + + + + + + + + + + - - - + - // Boolean checkbox - gui.add(fizzyText, "displayOutline"); - - // Fires a function called "explode" - gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name. + +
+ +
- }; +
- - - -
-
-
-

GUI-DAT flag

-

- gui-dat is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly. -

+

GUI-DAT flag

- +

gui-dat is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.

-

Basic Usage

- 
<script type="text/javascript" src="demo/demo.js"></script>
-<script type="text/javascript">
+    
+
+    
Basic Usage

+    
+<script type="text/javascript" src="demo/demo.js"></script>
+<script type="text/javascript">
 
 window.onload = function() {
 
-   var fizzyText = new FizzyText("gui-dat");
+   var fizzyText = new FizzyText("gui-dat");
 
    var gui = new GUI();
 
    // Text field
-   gui.add(fizzyText, "message");
+   gui.add(fizzyText, "message");
 
    // Sliders with min and max
-   gui.add(fizzyText, "maxSize", 0.5, 7);
-   gui.add(fizzyText, "growthSpeed", 0.01, 1);
-   gui.add(fizzyText, "speed", 0.1, 2);
+   gui.add(fizzyText, "maxSize", 0.5, 7);
+   gui.add(fizzyText, "growthSpeed", 0.01, 1);
+   gui.add(fizzyText, "speed", 0.1, 2);
 
    // Sliders with min, max and increment.
-   gui.add(fizzyText, "noiseStrength", 10, 100, 5);
+   gui.add(fizzyText, "noiseStrength", 10, 100, 5);
 
    // Boolean checkbox
-   gui.add(fizzyText, "displayOutline");
+   gui.add(fizzyText, "displayOutline");
 
-   // Fires a function called "explode"
-   gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
+   // Fires a function called "explode"
+   gui.add(fizzyText, "explode").name("Explode!"); // Specify a custom name.
 
 };
 
-</script>

+</script>
+
-
    -
  • gui-dat will infer the type of the property you're trying to add
    (based on its initial value) and create the corresponding control.
    • -
  • The properties must be public, i.e. defined by this.prop = value.
    • -
-
- -

Fire a function when someone uses a control

- 
gui.add(obj, "propName").onChange(function(n) {
-	alert("You changed me to " + n);
-});
-
-

Listen for variable changes outside of the GUI

-

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 listen() method.

- 
gui.add(obj, "changingProperty").listen();
-
-

Advanced listening

-

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-dat will infer the type of the property you're trying to add
    
+      (based on its initial value) and create the corresponding control.
    • 
+
+      
  • The properties must be public, i.e. defined by this.prop = value.
    • 
+    

+    
+    
+
+    
+	

+    
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");
+

+    
+

+    
+	

+    
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.

+
+    
First, add the method GUI.showSaveString() to a gui object:

+    
+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");
+

+
+    
Clicking the "showSaveString" button bring up an alert with a string. Copy and paste that string into the method GUI.load() before you instantiate any gui objects.

+    
+// Replace COPIED STRING with the value you got from 
+GUI.load("COPIED STRING");
+
+var gui = new GUI();
+
+// Now these properties will be set to the values you just saved.
+gui.add(someObject, "someProperty");
+gui.add(someObject, "someOtherProperty");
+

+
+    
Save strings won't work if you change the order in which you've added properties to your gui objects. 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.

+    

+    
+
+    
+	

+    
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 listen() method.

+    
+gui.add(obj, "changingProperty").listen();
+

+    
+

+    
+	

+    
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();
 
 // Make your own loop
 setInterval(function() {
-	gui.listen(); // updates values you've marked with listen()
+        gui.listen(); // updates values you've marked with listen()
 }, 1000 / 60);
 

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

-
+
+    
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");
@@ -128,13 +203,16 @@ gui.add(obj, "properties");
 
 // Make your own loop
 setInterval(function() {
-	gui.listenAll(); // updates ALL values managed by this gui
+        gui.listenAll(); // updates ALL values managed by this gui
 }, 1000 / 60);
 

-

-
Multiple panels and custom placement

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

-
+

+    
+
+    
+	

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

+    
 var gui1 = new GUI();
 var gui2 = new GUI();
 
@@ -142,8 +220,10 @@ var gui2 = new GUI();
 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) 
+
+    
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; 
 
@@ -156,17 +236,19 @@ 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. +
+ + +
+
+