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

Changes to gui.css

Browse Source
This commit is contained in:
George Michael Brower 2011-01-23 19:59:29 -07:00
commit ab86edc849
5 changed files with 132 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
controller.js
View File

@ -1,32 +1,44 @@
var Controller = function(object, propertyName) {
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
}
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
this.object = arguments[0];
this.propertyName = arguments[1];
this.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.propertyNameElement.innerHTML = arguments[1];
this.setName(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;
// TODO pass argument to inc
this.inc = 0;
this.button;
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.y);
this.button.setAttribute('value', this.inc);
this.domElement.appendChild(this.button);
this.button.onmousedown = function(e) {
@ -43,13 +55,38 @@ var NumberController = function() {
_this.y = e.offsetY;
var dy = _this.y - _this.py;
if(dy > 0)
_this.button.setAttribute('value', _this.inc++);
else
_this.button.setAttribute('value', _this.inc--);
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;
NumberController.prototype.constructor = NumberController;
var StringController = function() {
this.type = "string";
Controller.apply(this, arguments);
};
StringController.prototype = new Controller();
StringController.prototype.constructor = StringController;

4
demo.css Normal file
View File

@ -0,0 +1,4 @@
pre {
display: none;
}

62
demo.html
View File

@ -1,44 +1,48 @@
<html>
<head>
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript">
var controllableObject =
{
numberProperty: 20,
anotherNumberProperty: 0,
textProperty: "a string",
booleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
<script id="demo" type="text/javascript">var controllableObject =
{
numberProperty: 20,
constrainedNum: 0,
textProperty: "a string",
booleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
window.onload = function() {
GUI.start();
// Creates a number box
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
GUI.add(controllableObject, "anotherNumberProperty", -100, 100);
// Creates a text field
GUI.add(controllableObject, "textProperty");
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty");
GUI.start();
GUI.show(); // collapsed by default
// Creates a number box
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100).setName("customName");
// Creates a text field
GUI.add(controllableObject, "textProperty");
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty");
}
</script>
</head>
<body>
<pre id="demo-pre">
<script type="text/javascript">
document.getElementById("demo-pre").innerHTML = document.getElementById("demo").innerHTML;
</script>
</pre>
</body>
</html>

27
gui.css
View File

@ -1,5 +1,6 @@
#guidat {
font: 12px Helvetica, Arial, 'sans-serif';
font: 9px Monaco, monospace;
color: #fff;
position: fixed;
width: 250px;
z-index: 200;
@ -25,7 +26,6 @@
#guidat-toggle {
text-decoration: none;
cursor: pointer;
font-weight: bold;
color: #fff;
background-color: #222;
text-align: center;
@ -39,17 +39,31 @@
.guidat-controller {
padding: 5px;
border-bottom: 1px solid #ccc;
clear: both;
border-left: 4px solid #333;
text-align: right;
background-color: #fff;
background-color: #111;
}
.guidat-controller.number {
border-left-color: #f03;
}
.guidat-controller.number input[type=number] {
width: 55px;
}
.guidat-controller.string {
border-left-color: #0af;
}
.guidat-controller:nth-child(even) {
background-color: #E1F9FF;
background-color: #222;
}
.guidat-controller:last-child {
border-bottom: 1px solid #ccc;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
@ -58,5 +72,4 @@
.guidat-propertyname {
float: left;
margin: 5px;
font-size: 11px;
}

38
gui.js
View File

@ -52,19 +52,18 @@ var GUI = new function() {
controllerContainer.appendChild(controllerObject.domElement);
registeredProperties.push([object, propertyName, controllerObject]);
return controllerObject;
}
var addHandlers = {
"number": function() {
return new NumberController(arguments);
// return n.button;
return construct(NumberController, arguments);
},
"string": function() {
//
return construct(StringController, arguments);
},
"boolean": function() {
@ -87,6 +86,14 @@ var GUI = new function() {
console.error("[GUI ERROR] " + str);
}
};
var construct = function(constructor, args) {
function F() {
return constructor.apply(this, args);
}
F.prototype = constructor.prototype;
return new F();
};
@ -132,18 +139,25 @@ var GUI = new function() {
if (open) {
domElement.style.marginTop = -domElementMarginTop+"px";
toggleButton.innerHTML = "Show Controls";
open = false;
this.hide();
} else {
domElement.style.marginTop = 0+"px";
toggleButton.innerHTML = "Hide Controls";
open = true;
this.show();
}
};
this.show = function() {
domElement.style.marginTop = 0+"px";
toggleButton.innerHTML = "Hide Controls";
open = true;
}
this.hide = function() {
domElement.style.marginTop = -domElementMarginTop+"px";
toggleButton.innerHTML = "Show Controls";
open = false;
}
};