mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
I hereby issue a worldwide challenge to find *anything* wrong with these Number Controllers. They may the best ever.
This commit is contained in:
George Michael Brower
parent
356a7caf5a
commit
d93adcf563
96
index.html
96
index.html
@ -33,11 +33,12 @@
|
||||
var fizzyText = new FizzyText("dat.gui");
|
||||
var gui = new DAT.GUI();
|
||||
|
||||
|
||||
// Text field
|
||||
gui.add(fizzyText, "message");
|
||||
|
||||
// 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, "speed", 0.1, 2, 0.05); // shorthand for min/max/step
|
||||
|
||||
@ -185,61 +186,62 @@ window.onload = function() {
|
||||
alert("You changed me to " + n);
|
||||
});</pre>-->
|
||||
|
||||
<div class="collapsed">
|
||||
<h2 class="section">Saving your parameters</h2>
|
||||
<!--<div class="collapsed">-->
|
||||
<!---->
|
||||
<!--<h2 class="section">Saving your parameters</h2>-->
|
||||
|
||||
<div class="collapsable">
|
||||
<div>
|
||||
<p>The simplest way to save your parameters is via
|
||||
<code>DAT.GUI.saveURL()</code>. This method directs your browser to a
|
||||
URL containing the current GUI settings.</p>
|
||||
<pre class="prettyprint last">
|
||||
// Make a button for the url function
|
||||
gui.add(DAT.GUI, "saveURL");</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapsed">
|
||||
<h2 class="section">Advanced saving</h2>
|
||||
<!--<div class="collapsable">-->
|
||||
<!--<div>-->
|
||||
<!--<p>The simplest way to save your parameters is via-->
|
||||
<!--<code>DAT.GUI.saveURL()</code>. This method directs your browser to a-->
|
||||
<!--URL containing the current GUI settings.</p>-->
|
||||
<!--<pre class="prettyprint last">-->
|
||||
<!--// Make a button for the url function-->
|
||||
<!--gui.add(DAT.GUI, "saveURL");</pre>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="collapsed">-->
|
||||
<!--<h2 class="section">Advanced saving</h2>-->
|
||||
|
||||
<div class="collapsable">
|
||||
<div>
|
||||
<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>
|
||||
<!--<div class="collapsable">-->
|
||||
<!--<div>-->
|
||||
<!--<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>DAT.GUI.showSaveString()</code> to a gui
|
||||
object:</p>
|
||||
<pre class="prettyprint">var gui = new DAT.GUI();
|
||||
<!--<p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui-->
|
||||
<!--object:</p>-->
|
||||
<!--<pre class="prettyprint">var gui = new DAT.GUI();-->
|
||||
|
||||
// Add some stuff (and pretend I change their values);
|
||||
gui.add(someObject, "someProperty");
|
||||
gui.add(someObject, "someOtherProperty");
|
||||
<!--// Add some stuff (and pretend I change their values);-->
|
||||
<!--gui.add(someObject, "someProperty");-->
|
||||
<!--gui.add(someObject, "someOtherProperty");-->
|
||||
|
||||
// Make a save button.
|
||||
gui.add(DAT.GUI, "showSaveString");</pre>
|
||||
<!--// Make a save button.-->
|
||||
<!--gui.add(DAT.GUI, "showSaveString");</pre>-->
|
||||
|
||||
<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>
|
||||
before you instantiate any gui objects.</p>
|
||||
<pre class="prettyprint">
|
||||
// Replace COPIED STRING with the value you got from showSaveString()
|
||||
DAT.GUI.load("COPIED 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>-->
|
||||
<!--before you instantiate any gui objects.</p>-->
|
||||
<!--<pre class="prettyprint">-->
|
||||
<!--// Replace COPIED STRING with the value you got from showSaveString()-->
|
||||
<!--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.
|
||||
gui.add(someObject, "someProperty");
|
||||
gui.add(someObject, "someOtherProperty");</pre>
|
||||
<!--// Now these properties will be set to the values you just saved.-->
|
||||
<!--gui.add(someObject, "someProperty");-->
|
||||
<!--gui.add(someObject, "someOtherProperty");</pre>-->
|
||||
|
||||
<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
|
||||
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
|
||||
properties whose values you've saved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<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-->
|
||||
<!--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-->
|
||||
<!--properties whose values you've saved.</p>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
|
||||
|
||||
<div class="collapsed">
|
||||
|
||||
@ -55,6 +55,7 @@ DAT.GUI.Controller.prototype.getValue = function() {
|
||||
};
|
||||
|
||||
DAT.GUI.Controller.prototype.updateDisplay = function() {
|
||||
|
||||
};
|
||||
|
||||
DAT.GUI.Controller.prototype.onChange = function(fnc) {
|
||||
|
||||
@ -123,10 +123,7 @@ DAT.GUI.ControllerNumber = function() {
|
||||
numberField.addEventListener('mousedown', function(e) {
|
||||
py = y = e.pageY;
|
||||
clickedNumberField = true;
|
||||
if (slider) {
|
||||
DAT.GUI.addClass(_this.domElement, 'active');
|
||||
console.log(_this.domElement.className);
|
||||
}
|
||||
DAT.GUI.makeSelectable(numberField);
|
||||
document.addEventListener('mousemove', dragNumberField, false);
|
||||
document.addEventListener('mouseup', mouseup, false);
|
||||
}, false);
|
||||
@ -155,8 +152,8 @@ DAT.GUI.ControllerNumber = function() {
|
||||
|
||||
DAT.GUI.makeSelectable(numberField);
|
||||
if (clickedNumberField && !draggedNumberField) {
|
||||
numberField.focus();
|
||||
numberField.select();
|
||||
//numberField.focus();
|
||||
//numberField.select();
|
||||
}
|
||||
draggedNumberField = false;
|
||||
clickedNumberField = false;
|
||||
@ -174,6 +171,8 @@ DAT.GUI.ControllerNumber = function() {
|
||||
y = e.pageY;
|
||||
var dy = py - y;
|
||||
|
||||
|
||||
|
||||
if (!draggingHorizontal && !draggingVertical) {
|
||||
if (dy == 0) {
|
||||
draggingHorizontal = true;
|
||||
@ -186,6 +185,8 @@ DAT.GUI.ControllerNumber = function() {
|
||||
return true;
|
||||
}
|
||||
|
||||
DAT.GUI.addClass(_this.domElement, 'active');
|
||||
|
||||
DAT.GUI.makeUnselectable(_this.parent.domElement);
|
||||
DAT.GUI.makeUnselectable(numberField);
|
||||
|
||||
|
||||
@ -21,10 +21,15 @@ DAT.GUI.ControllerString = function() {
|
||||
input.addEventListener('keyup', function(e) {
|
||||
if (e.keyCode == 13 && _this.finishChangeFunction != null) {
|
||||
_this.finishChangeFunction.call(this, _this.getValue());
|
||||
input.blur();
|
||||
}
|
||||
_this.setValue(input.value);
|
||||
}, false);
|
||||
|
||||
input.addEventListener('mousedown', function(e) {
|
||||
DAT.GUI.makeSelectable(input);
|
||||
});
|
||||
|
||||
input.addEventListener('blur', function() {
|
||||
DAT.GUI.supressHotKeys = false;
|
||||
if (_this.finishChangeFunction != null) {
|
||||
|
||||
@ -81,6 +81,7 @@ DAT.GUI = function(parameters) {
|
||||
|
||||
var toggleDragged = false;
|
||||
var dragDisplacementY = 0;
|
||||
var dragDisplacementX = 0;
|
||||
var togglePressed = false;
|
||||
|
||||
var my, pmy, mx, pmx;
|
||||
@ -114,15 +115,19 @@ DAT.GUI = function(parameters) {
|
||||
}
|
||||
|
||||
toggleDragged = true;
|
||||
|
||||
dragDisplacementY += dmy;
|
||||
dragDisplacementX += dmx;
|
||||
openHeight += dmy;
|
||||
width += dmx;
|
||||
curControllerContainerHeight += dmy;
|
||||
controllerContainer.style.height = openHeight + 'px';
|
||||
|
||||
dragDisplacementX += dmx;
|
||||
width += dmx;
|
||||
width = DAT.GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
|
||||
_this.domElement.style.width = width + 'px';
|
||||
|
||||
checkForOverflow();
|
||||
|
||||
};
|
||||
|
||||
toggleButton.addEventListener('mousedown', function(e) {
|
||||
@ -130,8 +135,8 @@ DAT.GUI = function(parameters) {
|
||||
pmx = mx = e.pageX;
|
||||
togglePressed = true;
|
||||
e.preventDefault();
|
||||
dragDisplacementY = 0;
|
||||
dragDisplacementX = 0;
|
||||
dragDisplacementY = 0;
|
||||
document.addEventListener('mousemove', resize, false);
|
||||
return false;
|
||||
|
||||
@ -265,12 +270,12 @@ DAT.GUI = function(parameters) {
|
||||
};
|
||||
|
||||
var construct = function(constructor, args) {
|
||||
function F() {
|
||||
function C() {
|
||||
return constructor.apply(this, args);
|
||||
}
|
||||
|
||||
F.prototype = constructor.prototype;
|
||||
return new F();
|
||||
C.prototype = constructor.prototype;
|
||||
return new C();
|
||||
};
|
||||
|
||||
this.add = function() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user