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

Added gui-bare.css and split controllers into seperate files.

Browse Source
This commit is contained in:
George Michael Brower 2011-01-24 12:38:52 -07:00
parent 222a82a9a1
commit 84d80133ef
7 changed files with 124 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
controller.boolean.js Normal file
View File

@ -0,0 +1,9 @@
var BooleanController = function() {
this.type = "boolean";
Controller.apply(this, arguments);
var input = document.createElement('input');
input.setAttribute('type', 'checkbox');
this.domElement.appendChild(input);
};
BooleanController.prototype = new Controller();
BooleanController.prototype.constructor = BooleanController;

9
controller.function.js Normal file
View File

@ -0,0 +1,9 @@
var FunctionController = function() {
this.type = "function";
Controller.apply(this, arguments);
var input = document.createElement('input');
input.setAttribute('type', 'submit');
this.domElement.appendChild(input);
};
FunctionController.prototype = new Controller();
FunctionController.prototype.constructor = FunctionController;

97
controller.js
View File

@ -1,6 +1,6 @@
var Controller = function() {
this.setName = function(n) {
this.name = function(n) {
this.propertyNameElement.innerHTML = n;
}
this.domElement = document.createElement('div');
@ -11,99 +11,8 @@ var Controller = function() {
this.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.setName(this.propertyName);
this.name(this.propertyName);
this.domElement.appendChild(this.propertyNameElement);
};
// Only works on the last one
var NumberController = function() {
this.type = "number";
Controller.apply(this, arguments);
var _this = this;
this.isClicked = false;
this.py = this.y = 0;
this.inc = 0; // TODO pass argument to inc
// Get min and max
(arguments[2] != null) ? this.min = arguments[2] : this.min = null;
(arguments[3] != null) ? this.max = arguments[3] : this.max = null;
this.button = document.createElement('input');
this.button.setAttribute('id', this.propertyName);
this.button.setAttribute('type', 'number');
this.button.setAttribute('value', this.inc);
this.domElement.appendChild(this.button);
this.button.onmousedown = function(e) {
_this.isClicked = true;
};
document.onmouseup = function(e) {
_this.isClicked = false;
};
document.onmousemove = function(e) {
if(_this.isClicked) {
_this.py = _this.y;
_this.y = e.offsetY;
var dy = _this.y - _this.py;
if(dy > 0) {
if(_this.max != null)
(_this.inc >= _this.max) ? _this.inc = _this.max : _this.inc++;
else
_this.inc++;
} else if(dy < 0) {
if(_this.min != null)
(_this.inc <= _this.min) ? _this.inc = _this.min : _this.inc--;
else
_this.inc--;
}
_this.button.setAttribute('value', _this.inc);
}
};
this.__defineSetter__("position", function(val) {
_this.inc = val;
_this.button.setAttribute('value', _this.inc);
});
};
NumberController.prototype = new Controller();
NumberController.prototype.constructor = NumberController;
var StringController = function() {
this.type = "string";
Controller.apply(this, arguments);
// TODO
};
StringController.prototype = new Controller();
StringController.prototype.constructor = StringController;
var BooleanController = function() {
this.type = "boolean";
Controller.apply(this, arguments);
// TODO
};
BooleanController.prototype = new Controller();
BooleanController.prototype.constructor = BooleanController;
var FunctionController = function() {
this.type = "function";
Controller.apply(this, arguments);
// TODO
};
FunctionController.prototype = new Controller();
FunctionController.prototype.constructor = FunctionController;
};

64
controller.number.js Normal file
View File

@ -0,0 +1,64 @@
// Only works on the last one
var NumberController = function() {
this.type = "number";
Controller.apply(this, arguments);
var _this = this;
this.isClicked = false;
this.py = this.y = 0;
this.inc = 0; // TODO pass argument to inc
// Get min and max
(arguments[2] != null) ? this.min = arguments[2] : this.min = null;
(arguments[3] != null) ? this.max = arguments[3] : this.max = null;
this.button = document.createElement('input');
this.button.setAttribute('id', this.propertyName);
this.button.setAttribute('type', 'number');
this.button.setAttribute('value', this.inc);
this.domElement.appendChild(this.button);
this.button.onmousedown = function(e) {
_this.isClicked = true;
};
document.onmouseup = function(e) {
_this.isClicked = false;
};
document.onmousemove = function(e) {
if(_this.isClicked) {
_this.py = _this.y;
_this.y = e.offsetY;
var dy = _this.y - _this.py;
if(dy > 0) {
if(_this.max != null)
(_this.inc >= _this.max) ? _this.inc = _this.max : _this.inc++;
else
_this.inc++;
} else if(dy < 0) {
if(_this.min != null)
(_this.inc <= _this.min) ? _this.inc = _this.min : _this.inc--;
else
_this.inc--;
}
_this.button.setAttribute('value', _this.inc);
}
};
this.__defineSetter__("position", function(val) {
_this.inc = val;
_this.button.setAttribute('value', _this.inc);
});
};
NumberController.prototype = new Controller();
NumberController.prototype.constructor = NumberController;

9
controller.string.js Normal file
View File

@ -0,0 +1,9 @@
var StringController = function() {
this.type = "string";
Controller.apply(this, arguments);
var input = document.createElement('input');
input.setAttribute('value', this.object[this.propertyName]);
this.domElement.appendChild(input);
};
StringController.prototype = new Controller();
StringController.prototype.constructor = StringController;

8
demo.html
View File

@ -1,6 +1,6 @@
<html>
<head>
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="gui-bare.css" media="screen" rel="stylesheet" type="text/css" />
<link href="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="controller.js"></script>
@ -19,7 +19,7 @@ var controllableObject =
window.onload = function() {
//prettyPrint();
prettyPrint();
GUI.start();
@ -28,7 +28,7 @@ window.onload = function() {
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100)
.setName("customName");
.name("customName");
// Creates a text field
GUI.add(controllableObject, "textProperty");
@ -64,7 +64,7 @@ window.onload = function() {
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100)
.setName("customName");
.name("customName");
// Creates a text field
GUI.add(controllableObject, "textProperty");

26
gui-bare.css Normal file
View File

@ -0,0 +1,26 @@
#guidat {
position: fixed;
width: 250px;
z-index: 200;
top: 0;
left: 100%;
margin-left: -270px;
}
#guidat-controllers {
height: 300px;
overflow-y: auto;
}
#guidat-toggle {
cursor: pointer;
}
.guidat-controller {
clear: both;
}
.guidat-controller input {
float: right;
clear: both;
}