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

I hereby issue a worldwide challenge to find *anything* wrong with these Number Controllers. They may the best ever.

Browse Source
This commit is contained in:
George Michael Brower 2011-04-18 19:47:05 -07:00
parent 356a7caf5a
commit d93adcf563
5 changed files with 73 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
index.html
View File

@ -33,11 +33,12 @@
var fizzyText = new FizzyText("dat.gui"); var fizzyText = new FizzyText("dat.gui");
var gui = new DAT.GUI(); var gui = new DAT.GUI();
// Text field // Text field
gui.add(fizzyText, "message"); gui.add(fizzyText, "message");
// Sliders with min + max // Sliders with min + max
gui.add(fizzyText, "maxSize"); gui.add(fizzyText, "maxSize").min(0.5).max(7);
gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05); gui.add(fizzyText, "growthSpeed").min(0.01).max(1).step(0.05);
gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step gui.add(fizzyText, "speed", 0.1, 2, 0.05); // shorthand for min/max/step
@ -185,61 +186,62 @@ window.onload = function() {
alert("You changed me to " + n); alert("You changed me to " + n);
});</pre>--> });</pre>-->
<div class="collapsed"> <!--<div class="collapsed">-->
<h2 class="section">Saving your parameters</h2> <!---->
<!--<h2 class="section">Saving your parameters</h2>-->
<div class="collapsable"> <!--<div class="collapsable">-->
<div> <!--<div>-->
<p>The simplest way to save your parameters is via <!--<p>The simplest way to save your parameters is via-->
<code>DAT.GUI.saveURL()</code>. This method directs your browser to a <!--<code>DAT.GUI.saveURL()</code>. This method directs your browser to a-->
URL containing the current GUI settings.</p> <!--URL containing the current GUI settings.</p>-->
<pre class="prettyprint last"> <!--<pre class="prettyprint last">-->
// Make a button for the url function <!--// Make a button for the url function-->
gui.add(DAT.GUI, "saveURL");</pre> <!--gui.add(DAT.GUI, "saveURL");</pre>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
<div class="collapsed"> <!--<div class="collapsed">-->
<h2 class="section">Advanced saving</h2> <!--<h2 class="section">Advanced saving</h2>-->
<div class="collapsable"> <!--<div class="collapsable">-->
<div> <!--<div>-->
<p>Let's say you'd like to share your settings with someone. Instead of <!--<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 <!--sending a long link with lots of parameters stored in it, you can make-->
your saved settings the defaults.</p> <!--your saved settings the defaults.</p>-->
<p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui <!--<p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui-->
object:</p> <!--object:</p>-->
<pre class="prettyprint">var gui = new DAT.GUI(); <!--<pre class="prettyprint">var gui = new DAT.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(DAT.GUI, "showSaveString");</pre> <!--gui.add(DAT.GUI, "showSaveString");</pre>-->
<p>Clicking the "showSaveString" button bring up an alert with a string. <!--<p>Clicking the "showSaveString" button bring up an alert with a string.-->
Copy and paste that string into the method <code>DAT.GUI.load()</code> <!--Copy and paste that string into the method <code>DAT.GUI.load()</code>-->
before you instantiate any gui objects.</p> <!--before you instantiate any gui objects.</p>-->
<pre class="prettyprint"> <!--<pre class="prettyprint">-->
// Replace COPIED STRING with the value you got from showSaveString() <!--// Replace COPIED STRING with the value you got from showSaveString()-->
DAT.GUI.load("COPIED STRING"); <!--DAT.GUI.load("COPIED STRING");-->
var gui = new DAT.GUI(); <!--var gui = new DAT.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");</pre> <!--gui.add(someObject, "someOtherProperty");</pre>-->
<p class="last"><strong>Save strings won't work if you change the order in <!--<p class="last"><strong>Save strings won't work if you change the order in-->
which you've added properties to your gui objects, or the order of the <!--which you've added properties to your gui objects, or the order of the-->
gui objects themselves.</strong>. If you want to add more parameters to <!--gui objects themselves.</strong>. If you want to add more parameters to-->
your gui and use an old save string, make sure they're added after the <!--your gui and use an old save string, make sure they're added after the-->
properties whose values you've saved.</p> <!--properties whose values you've saved.</p>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
<div class="collapsed"> <div class="collapsed">

1
src/DAT/GUI/Controller.js
View File

@ -55,6 +55,7 @@ DAT.GUI.Controller.prototype.getValue = function() {
}; };
DAT.GUI.Controller.prototype.updateDisplay = function() { DAT.GUI.Controller.prototype.updateDisplay = function() {
}; };
DAT.GUI.Controller.prototype.onChange = function(fnc) { DAT.GUI.Controller.prototype.onChange = function(fnc) {

13
src/DAT/GUI/ControllerNumber.js
View File

@ -123,10 +123,7 @@ DAT.GUI.ControllerNumber = function() {
numberField.addEventListener('mousedown', function(e) { numberField.addEventListener('mousedown', function(e) {
py = y = e.pageY; py = y = e.pageY;
clickedNumberField = true; clickedNumberField = true;
if (slider) { DAT.GUI.makeSelectable(numberField);
DAT.GUI.addClass(_this.domElement, 'active');
console.log(_this.domElement.className);
}
document.addEventListener('mousemove', dragNumberField, false); document.addEventListener('mousemove', dragNumberField, false);
document.addEventListener('mouseup', mouseup, false); document.addEventListener('mouseup', mouseup, false);
}, false); }, false);
@ -155,8 +152,8 @@ DAT.GUI.ControllerNumber = function() {
DAT.GUI.makeSelectable(numberField); DAT.GUI.makeSelectable(numberField);
if (clickedNumberField && !draggedNumberField) { if (clickedNumberField && !draggedNumberField) {
numberField.focus(); //numberField.focus();
numberField.select(); //numberField.select();
} }
draggedNumberField = false; draggedNumberField = false;
clickedNumberField = false; clickedNumberField = false;
@ -174,6 +171,8 @@ DAT.GUI.ControllerNumber = function() {
y = e.pageY; y = e.pageY;
var dy = py - y; var dy = py - y;
if (!draggingHorizontal && !draggingVertical) { if (!draggingHorizontal && !draggingVertical) {
if (dy == 0) { if (dy == 0) {
draggingHorizontal = true; draggingHorizontal = true;
@ -186,6 +185,8 @@ DAT.GUI.ControllerNumber = function() {
return true; return true;
} }
DAT.GUI.addClass(_this.domElement, 'active');
DAT.GUI.makeUnselectable(_this.parent.domElement); DAT.GUI.makeUnselectable(_this.parent.domElement);
DAT.GUI.makeUnselectable(numberField); DAT.GUI.makeUnselectable(numberField);

5
src/DAT/GUI/ControllerString.js
View File

@ -21,10 +21,15 @@ DAT.GUI.ControllerString = function() {
input.addEventListener('keyup', function(e) { input.addEventListener('keyup', function(e) {
if (e.keyCode == 13 && _this.finishChangeFunction != null) { if (e.keyCode == 13 && _this.finishChangeFunction != null) {
_this.finishChangeFunction.call(this, _this.getValue()); _this.finishChangeFunction.call(this, _this.getValue());
input.blur();
} }
_this.setValue(input.value); _this.setValue(input.value);
}, false); }, false);
input.addEventListener('mousedown', function(e) {
DAT.GUI.makeSelectable(input);
});
input.addEventListener('blur', function() { input.addEventListener('blur', function() {
DAT.GUI.supressHotKeys = false; DAT.GUI.supressHotKeys = false;
if (_this.finishChangeFunction != null) { if (_this.finishChangeFunction != null) {

17
src/DAT/GUI/GUI.js
View File

@ -81,6 +81,7 @@ DAT.GUI = function(parameters) {
var toggleDragged = false; var toggleDragged = false;
var dragDisplacementY = 0; var dragDisplacementY = 0;
var dragDisplacementX = 0;
var togglePressed = false; var togglePressed = false;
var my, pmy, mx, pmx; var my, pmy, mx, pmx;
@ -114,15 +115,19 @@ DAT.GUI = function(parameters) {
} }
toggleDragged = true; toggleDragged = true;
dragDisplacementY += dmy; dragDisplacementY += dmy;
dragDisplacementX += dmx;
openHeight += dmy; openHeight += dmy;
width += dmx;
curControllerContainerHeight += dmy; curControllerContainerHeight += dmy;
controllerContainer.style.height = openHeight + 'px'; controllerContainer.style.height = openHeight + 'px';
dragDisplacementX += dmx;
width += dmx;
width = DAT.GUI.constrain(width, MIN_WIDTH, MAX_WIDTH); width = DAT.GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
_this.domElement.style.width = width + 'px'; _this.domElement.style.width = width + 'px';
checkForOverflow(); checkForOverflow();
}; };
toggleButton.addEventListener('mousedown', function(e) { toggleButton.addEventListener('mousedown', function(e) {
@ -130,8 +135,8 @@ DAT.GUI = function(parameters) {
pmx = mx = e.pageX; pmx = mx = e.pageX;
togglePressed = true; togglePressed = true;
e.preventDefault(); e.preventDefault();
dragDisplacementY = 0;
dragDisplacementX = 0; dragDisplacementX = 0;
dragDisplacementY = 0;
document.addEventListener('mousemove', resize, false); document.addEventListener('mousemove', resize, false);
return false; return false;
@ -265,12 +270,12 @@ DAT.GUI = function(parameters) {
}; };
var construct = function(constructor, args) { var construct = function(constructor, args) {
function F() { function C() {
return constructor.apply(this, args); return constructor.apply(this, args);
} }
F.prototype = constructor.prototype; C.prototype = constructor.prototype;
return new F(); return new C();
}; };
this.add = function() { this.add = function() {