library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-10-10 06:54:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:jonobr1/GUI-DAT

Browse Source
This commit is contained in:
jonobr1 2011-01-25 19:30:13 -07:00
commit 0dfe848480
4 changed files with 60 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
controllers/controller.js
View File

@ -1,17 +1,26 @@
var Controller = function() {
var onChange = null;
this.setName = function(n) {
this.propertyNameElement.innerHTML = n;
}
this.setValue = function(n) {
this.object[this.propertyName] = n;
if (onChange != null) {
onChange.call(this, n);
}
}
this.getValue = function() {
return this.object[this.propertyName];
}
this.onChange = function(fnc) {
onChange = fnc;
}
this.makeUnselectable = function(elem) {
elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none";

20
demo/demo.css
View File

@ -18,7 +18,7 @@ h1 {
font-weight: 800;
text-transform: lowercase;
line-height: 80px;
margin: 20px 0 20px 0;
margin: 20px 0 30px 0;
}
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
@ -33,6 +33,10 @@ h1 img {
border-radius: 9px;
}
h2 {
font-size: 18px;
}
pre {
margin: 20px 0 20px 0;
padding: 15px;
@ -41,7 +45,7 @@ pre {
font: 10px Monaco, monospace;
}
p { font-size: 125%; max-width: 530px; }
p { font-size: 125%; max-width: 530px; line-height: 18px; margin-bottom: 36px; }
a:link {
color: #00aeff;
@ -56,6 +60,12 @@ a:active {
color: #54396e;
}
footer {
background-color: #eee;
width: 510px;
padding: 10px;
}
#columns {
position: fixed;
bottom: 0;
@ -78,7 +88,7 @@ a:active {
.lit { color: #00aeff; }
.pun, .opn, .clo { color: #777; }
.pln { color: #ccc; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.tag { color: #555; }
.atn { color: #555; }
.atv { color: #777; }
.dec { color: #606; }

4
gui.js
View File

@ -17,8 +17,8 @@ var GUI = new function() {
// Have we already added this?
if (alreadyControlled(object, propertyName)) {
// error("Controller for \"" + propertyName+"\" already added.");
// return;
error("Controller for \"" + propertyName+"\" already added.");
return;
}
var value = object[propertyName];

56
index.html
View File

@ -45,7 +45,7 @@
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", 0, 16);
GUI.add(controllableObject, "constrainedNum", -100, 100);
// Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 100);
@ -60,7 +60,6 @@
GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function");
};
</script>
</head>
@ -69,53 +68,60 @@
<div id = "helvetica-test"></div>
<p>
is a super-light javascript library for making GUI elements. It is inspired by <a href = "http://www.sojamo.de/libraries/controlP5/">controlP5</a>.
<strong>gui-dat</strong> is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
</p>
<p>&bull; <a href="#"><strong>Download the minified source</strong></a> <small>[2.3kb]</small><br/>
&bull; <a href="http://github.com/jonobr1/GUI-DAT">Contribute on GitHub!</a></p>
<h2>Basic Usage</h2>
<pre id="demo-pre" class="prettyprint">
&lt;script type=&quot;text/javascript&quot; src=&quot;gui.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var controllableObject =
{
numberProperty: 20,
constrainedNum: 0,
notchedNum: 240,
pageTitle: "gui-dat",
anotherTextProperty: "another string",
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
numberProperty: 20,
constrainedNum: 0,
notchedNum: 240,
textProperty: &quot;a string&quot;,
anotherTextProperty: &quot;another string&quot;,
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
alert(&quot;I am a function!&quot;);
}
};
window.onload = function() {
prettyPrint();
GUI.start();
// Creates a number box
GUI.add(controllableObject, "numberProperty");
GUI.add(controllableObject, &quot;numberProperty&quot;);
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100)
GUI.add(controllableObject, &quot;constrainedNum&quot;, -100, 100)
// Creates a slider with notches
GUI.add(controllableObject, "notchedNum", 0, 800, 100)
GUI.add(controllableObject, &quot;notchedNum&quot;, 0, 800, 100)
// Creates a text field
GUI.add(controllableObject, "pageTitle");
GUI.add(controllableObject, &quot;textProperty&quot;);
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
GUI.add(controllableObject, &quot;booleanProperty&quot;);
// Creates a button
GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function");
GUI.add(controllableObject, &quot;functionProperty&quot;)
.setName(&quot;Fire a Function&quot;);
};
</pre>
<footer>
&lt;/script&gt;</pre>
<footer>
By <a href="http://georgemichaelbrower.com/">George Michael Brower</a>, <a href="http://jonobr1.com/">Jono Brandel</a>, and <a href="http://github.com/jonobr1/GUI-DAT">you</a>.
</footer>
<div id = "columns"></div>
</body>
</html>