dat.gui/index.html

135 lines
5.1 KiB
HTML
Raw Normal View History

2011-01-25 07:42:20 +00:00
<!doctype html>
<head>
<title>GUI-DAT</title>
2011-01-25 08:14:24 +00:00
<link rel="icon" type="image/gif" href="demo/assets/favicon.gif">
2011-01-25 08:14:24 +00:00
2011-01-25 07:42:20 +00:00
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
2011-01-25 07:42:20 +00:00
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
2011-01-25 07:42:20 +00:00
<script type="text/javascript" src="gui.js"></script>
2011-01-25 08:28:18 +00:00
<script type="text/javascript" src="controllers/slider.js"></script>
2011-01-25 08:26:18 +00:00
<script type="text/javascript" src="controllers/controller.js"></script>
<script type="text/javascript" src="controllers/controller.string.js"></script>
<script type="text/javascript" src="controllers/controller.number.js"></script>
<script type="text/javascript" src="controllers/controller.boolean.js"></script>
<script type="text/javascript" src="controllers/controller.function.js"></script>
2011-01-26 02:30:05 +00:00
<script type="text/javascript" src="demo/demo.js"></script>
<script type="text/javascript">
2011-01-25 07:42:20 +00:00
var controllableObject =
{
numberProperty: 20,
constrainedNum: 0,
2011-01-25 09:35:45 +00:00
notchedNum: 240,
pageTitle: "gui-dat",
2011-01-25 07:42:20 +00:00
anotherTextProperty: "another string",
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
alert("I am a function!");
}
};
2011-01-26 02:30:05 +00:00
2011-01-25 07:42:20 +00:00
window.onload = function() {
2011-01-26 02:30:05 +00:00
var testDisplay = new DynamicText("gui-dat", 500, 100, 80);
2011-01-25 07:42:20 +00:00
prettyPrint();
2011-01-25 07:42:20 +00:00
GUI.start();
2011-01-26 00:58:52 +00:00
2011-01-25 07:42:20 +00:00
// Creates a number box
GUI.add(controllableObject, "numberProperty");
2011-01-25 07:42:20 +00:00
// Creates a slider (min, max)
2011-01-26 02:15:20 +00:00
GUI.add(controllableObject, "constrainedNum", -100, 100);
2011-01-25 09:35:45 +00:00
// Creates a slider with notches
2011-01-26 00:58:52 +00:00
GUI.add(controllableObject, "notchedNum", 0, 800, 100);
2011-01-25 07:42:20 +00:00
// Creates a text field
2011-01-26 03:14:15 +00:00
GUI.add(testDisplay, "message");
2011-01-25 07:42:20 +00:00
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
2011-01-25 07:42:20 +00:00
// Creates a button
GUI.add(controllableObject, "functionProperty")
.setName("Fire a Function");
2011-01-25 07:42:20 +00:00
};
2011-01-26 18:00:39 +00:00
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20996084-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
2011-01-25 07:42:20 +00:00
</script>
</head>
<body>
2011-01-26 03:14:15 +00:00
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a><span id = "helvetica-demo"></span></h1>
2011-01-26 02:30:05 +00:00
<div id = "helvetica-test"></div>
<p>
2011-01-26 01:55:59 +00:00
<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>
2011-01-26 02:15:20 +00:00
<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>
2011-01-26 01:55:59 +00:00
<h2>Basic Usage</h2>
2011-01-25 07:42:20 +00:00
<pre id="demo-pre" class="prettyprint">
2011-01-26 01:55:59 +00:00
&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 =
{
2011-01-25 09:35:45 +00:00
numberProperty: 20,
constrainedNum: 0,
notchedNum: 240,
2011-01-26 01:55:59 +00:00
textProperty: &quot;a string&quot;,
anotherTextProperty: &quot;another string&quot;,
2011-01-25 09:35:45 +00:00
booleanProperty: false,
anotherBooleanProperty: false,
functionProperty: function() {
2011-01-26 01:55:59 +00:00
alert(&quot;I am a function!&quot;);
2011-01-25 09:35:45 +00:00
}
};
window.onload = function() {
GUI.start();
2011-01-26 02:15:20 +00:00
// Creates a number box
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, &quot;numberProperty&quot;);
2011-01-25 07:42:20 +00:00
// Creates a slider (min, max)
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, &quot;constrainedNum&quot;, -100, 100)
2011-01-25 09:35:45 +00:00
// Creates a slider with notches
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, &quot;notchedNum&quot;, 0, 800, 100)
2011-01-25 07:42:20 +00:00
// Creates a text field
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, &quot;textProperty&quot;);
2011-01-25 07:42:20 +00:00
// Creates a checkbox
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, &quot;booleanProperty&quot;);
2011-01-25 07:42:20 +00:00
// Creates a button
2011-01-26 01:55:59 +00:00
GUI.add(controllableObject, &quot;functionProperty&quot;)
.setName(&quot;Fire a Function&quot;);
};
2011-01-26 01:55:59 +00:00
&lt;/script&gt;</pre>
2011-01-26 02:15:20 +00:00
<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>.
2011-01-26 02:15:20 +00:00
</footer>
2011-01-25 07:42:20 +00:00
</body>
2011-01-23 21:23:53 +00:00
</html>