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

55
controller.js
View File

@ -1,32 +1,44 @@
var Controller = function(object, propertyName) { var Controller = function(object, propertyName) {
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
}
this.domElement = document.createElement('div'); this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller'); this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
this.object = arguments[0]; this.object = arguments[0];
this.propertyName = arguments[1]; this.propertyName = arguments[1];
this.propertyNameElement = document.createElement('span'); this.propertyNameElement = document.createElement('span');
this.propertyNameElement.setAttribute('class', 'guidat-propertyname'); this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
this.propertyNameElement.innerHTML = arguments[1]; this.setName(this.propertyName);
this.domElement.appendChild(this.propertyNameElement); this.domElement.appendChild(this.propertyNameElement);
}; };
// Only works on the last one
var NumberController = function() { var NumberController = function() {
this.type = "number";
Controller.apply(this, arguments); Controller.apply(this, arguments);
var _this = this; var _this = this;
this.isClicked = false; this.isClicked = false;
this.py = this.y = 0; this.py = this.y = 0;
// TODO pass argument to inc this.inc = 0; // TODO pass argument to inc
this.inc = 0;
this.button; // 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 = document.createElement('input');
this.button.setAttribute('id', this.propertyName); this.button.setAttribute('id', this.propertyName);
this.button.setAttribute('type', 'number'); this.button.setAttribute('type', 'number');
this.button.setAttribute('value', this.y); this.button.setAttribute('value', this.inc);
this.domElement.appendChild(this.button); this.domElement.appendChild(this.button);
this.button.onmousedown = function(e) { this.button.onmousedown = function(e) {
@ -43,13 +55,38 @@ var NumberController = function() {
_this.y = e.offsetY; _this.y = e.offsetY;
var dy = _this.y - _this.py; var dy = _this.y - _this.py;
if(dy > 0) if(dy > 0) {
_this.button.setAttribute('value', _this.inc++); if(_this.max != null)
(_this.inc >= _this.max) ? _this.inc = _this.max : _this.inc++;
else else
_this.button.setAttribute('value', _this.inc--); _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 = 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;
}

16
demo.html
View File

@ -1,14 +1,13 @@
<html> <html>
<head> <head>
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" /> <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="controller.js"></script>
<script type="text/javascript" src="gui.js"></script> <script type="text/javascript" src="gui.js"></script>
<script type="text/javascript"> <script id="demo" type="text/javascript">var controllableObject =
var controllableObject =
{ {
numberProperty: 20, numberProperty: 20,
anotherNumberProperty: 0, constrainedNum: 0,
textProperty: "a string", textProperty: "a string",
booleanProperty: false, booleanProperty: false,
functionProperty: function() { functionProperty: function() {
@ -19,12 +18,13 @@ var controllableObject =
window.onload = function() { window.onload = function() {
GUI.start(); GUI.start();
GUI.show(); // collapsed by default
// Creates a number box // Creates a number box
GUI.add(controllableObject, "numberProperty"); GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "anotherNumberProperty", -100, 100); GUI.add(controllableObject, "constrainedNum", -100, 100).setName("customName");
// Creates a text field // Creates a text field
GUI.add(controllableObject, "textProperty"); GUI.add(controllableObject, "textProperty");
@ -39,6 +39,10 @@ window.onload = function() {
</script> </script>
</head> </head>
<body> <body>
<pre id="demo-pre">
<script type="text/javascript">
document.getElementById("demo-pre").innerHTML = document.getElementById("demo").innerHTML;
</script>
</pre>
</body> </body>
</html> </html>

27
gui.css
View File

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

36
gui.js
View File

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