gui.add(obj, "propName").onChange(function(n) {
alert("You changed me to " + n);
});-->
-
- Saving your parameters
-The simplest way to save your parameters is via GUI.saveURL(). This method directs your browser to a URL containing the current GUI settings.
+ +++Saving your parameters
++-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"); -+gui.add(GUI, "saveURL"); -Advanced saving
--+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.
++- -Advanced saving
++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(); +-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"); -+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.+-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"); @@ -168,36 +217,35 @@ var gui = new GUI(); // Now these properties will be set to the values you just saved. gui.add(someObject, "someProperty"); -gui.add(someObject, "someOtherProperty"); -+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.
+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.
+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(); -++-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:+++Advanced listening
+++ gui.listenAll(); // updates ALL values managed by this gui +}, 1000 / 60); +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() -}, 1000 / 60); -+ 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"); @@ -205,26 +253,24 @@ gui.add(obj, "properties"); // Make your own loop setInterval(function() { - gui.listenAll(); // updates ALL values managed by this gui -}, 1000 / 60); --Multiple panels and custom placement
--+ +You can instantiate multiple
-GUIobjects and name them however you'd like.-var gui1 = new GUI(); ++-Multiple panels and custom placement
++- - -You can instantiate multiple
+GUIobjects and name them however you'd like.var gui1 = new GUI(); var gui2 = new GUI(); // The name function overwrites the "Show Controls" text. gui1.name("Utilities"); -gui2.name("Camera Placement"); -+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.
-+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; @@ -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 ); --Pro tips.
---
- - +document.getElementById("my-gui-container").appendChild( gui.domElement ); +- gui-dat panels are resizeable. Drag the toggle button.
- -- Press H to make panels invisible. Then press H to show them again.
-++ +Pro tips.
++++
+- gui-dat panels are resizeable. Drag the toggle button.
+ +- Press H to make panels invisible. Then press H to show them again.
+