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 index.html

Browse Source
This commit is contained in:
George Michael Brower 2011-01-25 18:55:59 -07:00
parent 1fda37326b
commit 86f5579cbe
4 changed files with 43 additions and 20 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 Controller = function() {
var onChange = null;
this.setName = function(n) { this.setName = function(n) {
this.propertyNameElement.innerHTML = n; this.propertyNameElement.innerHTML = n;
} }
this.setValue = function(n) { this.setValue = function(n) {
this.object[this.propertyName] = n; this.object[this.propertyName] = n;
if (onChange != null) {
onChange.call(this, n);
}
} }
this.getValue = function() { this.getValue = function() {
return this.object[this.propertyName]; return this.object[this.propertyName];
} }
this.onChange = function(fnc) {
onChange = fnc;
}
this.makeUnselectable = function(elem) { this.makeUnselectable = function(elem) {
elem.onselectstart = function() { return false; }; elem.onselectstart = function() { return false; };
elem.style.MozUserSelect = "none"; elem.style.MozUserSelect = "none";

14
demo/demo.css
View File

@ -18,7 +18,7 @@ h1 {
font-weight: 800; font-weight: 800;
text-transform: lowercase; text-transform: lowercase;
line-height: 80px; 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 { h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
@ -33,6 +33,10 @@ h1 img {
border-radius: 9px; border-radius: 9px;
} }
h2 {
font-size: 18px;
}
pre { pre {
margin: 20px 0 20px 0; margin: 20px 0 20px 0;
padding: 15px; padding: 15px;
@ -41,7 +45,7 @@ pre {
font: 10px Monaco, monospace; 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 { a:link {
color: #00aeff; color: #00aeff;
@ -64,7 +68,7 @@ a:active {
.lit { color: #00aeff; } .lit { color: #00aeff; }
.pun, .opn, .clo { color: #777; } .pun, .opn, .clo { color: #777; }
.pln { color: #ccc; } .pln { color: #ccc; }
.tag { color: #008; } .tag { color: #555; }
.atn { color: #606; } .atn { color: #555; }
.atv { color: #080; } .atv { color: #777; }
.dec { color: #606; } .dec { color: #606; }

4
gui.js
View File

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

36
index.html
View File

@ -62,50 +62,60 @@
<body> <body>
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a>GUI-DAT</h1> <h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a>GUI-DAT</h1>
<p> <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>
<h2>Basic Usage</h2>
<pre id="demo-pre" class="prettyprint"> <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 = var controllableObject =
{ {
numberProperty: 20, numberProperty: 20,
constrainedNum: 0, constrainedNum: 0,
notchedNum: 240, notchedNum: 240,
textProperty: "a string", textProperty: &quot;a string&quot;,
anotherTextProperty: "another string", anotherTextProperty: &quot;another string&quot;,
booleanProperty: false, booleanProperty: false,
anotherBooleanProperty: false, anotherBooleanProperty: false,
functionProperty: function() { functionProperty: function() {
alert("I am a function!"); alert(&quot;I am a function!&quot;);
} }
}; };
window.onload = function() { window.onload = function() {
GUI.start(); GUI.start();
// Closed by default.
GUI.open();
// Creates a number box // Creates a number box
GUI.add(controllableObject, "numberProperty"); GUI.add(controllableObject, &quot;numberProperty&quot;);
// Creates a slider (min, max) // Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100) GUI.add(controllableObject, &quot;constrainedNum&quot;, -100, 100)
// Creates a slider with notches // 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 // Creates a text field
GUI.add(controllableObject, "textProperty"); GUI.add(controllableObject, &quot;textProperty&quot;);
// Creates a checkbox // Creates a checkbox
GUI.add(controllableObject, "booleanProperty"); GUI.add(controllableObject, &quot;booleanProperty&quot;);
// Creates a button // Creates a button
GUI.add(controllableObject, "functionProperty") GUI.add(controllableObject, &quot;functionProperty&quot;)
.setName("Fire a Function"); .setName(&quot;Fire a Function&quot;);
}; };
</pre>
&lt;/script&gt;</pre>
<footer> <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> </footer>
</body> </body>
</html> </html>