mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Fixed a bug in slider
This commit is contained in:
parent
678967c3d6
commit
f9c0b16314
@ -4,6 +4,7 @@ var Controller = function() {
|
||||
|
||||
this.setName = function(n) {
|
||||
this.propertyNameElement.innerHTML = n;
|
||||
return this;
|
||||
}
|
||||
|
||||
this.setValue = function(n) {
|
||||
@ -11,6 +12,7 @@ var Controller = function() {
|
||||
if (onChange != null) {
|
||||
onChange.call(this, n);
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
this.getValue = function() {
|
||||
@ -19,6 +21,7 @@ var Controller = function() {
|
||||
|
||||
this.onChange = function(fnc) {
|
||||
onChange = fnc;
|
||||
return this;
|
||||
}
|
||||
|
||||
this.makeUnselectable = function(elem) {
|
||||
|
@ -20,13 +20,15 @@ var NumberController = function() {
|
||||
var step = arguments[4];
|
||||
|
||||
if (!step) {
|
||||
if (min && max) {
|
||||
if (min != undefined && max != undefined) {
|
||||
step = (max-min)*0.01;
|
||||
} else {
|
||||
step = 1;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("step " + step);
|
||||
|
||||
var numberField = document.createElement('input');
|
||||
numberField.setAttribute('id', this.propertyName);
|
||||
|
||||
@ -114,10 +116,15 @@ var NumberController = function() {
|
||||
}
|
||||
_this.setValue(val);
|
||||
|
||||
numberField.value = _this.getValue();
|
||||
numberField.value = roundToDecimal(_this.getValue(), 4);
|
||||
if (slider) slider.value = _this.getValue();
|
||||
}
|
||||
|
||||
var roundToDecimal = function(n, decimals) {
|
||||
var t = Math.pow(10, decimals);
|
||||
return Math.round(n*t)/t;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
NumberController.prototype = new Controller();
|
||||
|
@ -13,8 +13,9 @@ var Slider = function(numberController, min, max, step, initValue) {
|
||||
var x, px;
|
||||
|
||||
this.domElement = document.createElement('div');
|
||||
this.fg = document.createElement('div');
|
||||
this.domElement.setAttribute('class', 'guidat-slider-bg');
|
||||
|
||||
this.fg = document.createElement('div');
|
||||
this.fg.setAttribute('class', 'guidat-slider-fg');
|
||||
|
||||
this.domElement.appendChild(this.fg);
|
||||
@ -38,10 +39,8 @@ var Slider = function(numberController, min, max, step, initValue) {
|
||||
}
|
||||
|
||||
this.__defineSetter__('value', function(e) {
|
||||
|
||||
var pct = map(e, min, max, 0, 100);
|
||||
this.fg.style.width = pct+"%";
|
||||
|
||||
});
|
||||
|
||||
var onDrag = function(e) {
|
||||
@ -68,9 +67,6 @@ var Slider = function(numberController, min, max, step, initValue) {
|
||||
}, false);
|
||||
|
||||
document.addEventListener('mousemove', onDrag, false);
|
||||
|
||||
|
||||
|
||||
|
||||
this.value = initValue;
|
||||
|
||||
|
23
gui.js
23
gui.js
@ -38,7 +38,7 @@ var GUI = new function() {
|
||||
return;
|
||||
}
|
||||
|
||||
var controllerObject = handler.apply(this, arguments);
|
||||
var controllerObject = construct(handler, arguments);
|
||||
|
||||
// Were we able to make the controller?
|
||||
if (!controllerObject) {
|
||||
@ -55,23 +55,10 @@ var GUI = new function() {
|
||||
}
|
||||
|
||||
var addHandlers = {
|
||||
|
||||
"number": function() {
|
||||
return construct(NumberController, arguments);
|
||||
},
|
||||
|
||||
"string": function() {
|
||||
return construct(StringController, arguments);
|
||||
},
|
||||
|
||||
"boolean": function() {
|
||||
return construct(BooleanController, arguments);
|
||||
},
|
||||
|
||||
"function": function() {
|
||||
return construct(FunctionController, arguments);
|
||||
},
|
||||
|
||||
"number": NumberController,
|
||||
"string": StringController,
|
||||
"boolean": BooleanController,
|
||||
"function": FunctionController
|
||||
};
|
||||
|
||||
var alreadyControlled = function(object, propertyName) {
|
||||
|
12
index.html
12
index.html
@ -6,15 +6,16 @@
|
||||
|
||||
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<!-- <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
|
||||
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="gui.js"></script>
|
||||
<script type="text/javascript" src="controllers/slider.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.string.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.number.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
|
||||
<script type="text/javascript" src="controllers/controller.function.js"></script>
|
||||
<script type="text/javascript" src="gui.js"></script>
|
||||
<script type="text/javascript" src="demo/demo.js"></script>
|
||||
<script type="text/javascript">
|
||||
var controllableObject =
|
||||
@ -35,7 +36,7 @@
|
||||
|
||||
var testDisplay = new DynamicText("gui-dat", 600, 300, 160);
|
||||
|
||||
// prettyPrint();
|
||||
prettyPrint();
|
||||
|
||||
GUI.start();
|
||||
|
||||
@ -43,7 +44,7 @@
|
||||
GUI.add(testDisplay, "minSize", 0, 1);
|
||||
|
||||
// Creates a number box
|
||||
GUI.add(testDisplay, "maxSize", 1, 5);
|
||||
GUI.add(testDisplay, "maxSize", 1, 20);
|
||||
|
||||
// Creates a slider (min, max)
|
||||
GUI.add(testDisplay, "growthSpeed", 0.01, 0.5);
|
||||
@ -122,8 +123,7 @@ window.onload = function() {
|
||||
GUI.add(controllableObject, "booleanProperty");
|
||||
|
||||
// Creates a button
|
||||
GUI.add(controllableObject, "functionProperty")
|
||||
.setName("Fire a Function");
|
||||
GUI.add(controllableObject, "functionProperty").setName("Fire a Function");
|
||||
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user