2011-01-23 21:23:53 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
2011-01-23 23:43:02 +00:00
|
|
|
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
2011-01-24 02:59:29 +00:00
|
|
|
<link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
|
2011-01-24 00:15:04 +00:00
|
|
|
<script type="text/javascript" src="controller.js"></script>
|
2011-01-23 21:23:53 +00:00
|
|
|
<script type="text/javascript" src="gui.js"></script>
|
2011-01-24 02:59:29 +00:00
|
|
|
<script id="demo" type="text/javascript">var controllableObject =
|
|
|
|
|
{
|
|
|
|
|
numberProperty: 20,
|
|
|
|
|
constrainedNum: 0,
|
|
|
|
|
textProperty: "a string",
|
|
|
|
|
booleanProperty: false,
|
|
|
|
|
functionProperty: function() {
|
|
|
|
|
alert("I am a function!");
|
|
|
|
|
}
|
|
|
|
|
};
|
2011-01-23 21:39:07 +00:00
|
|
|
|
2011-01-23 22:35:19 +00:00
|
|
|
window.onload = function() {
|
|
|
|
|
|
2011-01-24 02:59:29 +00:00
|
|
|
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");
|
2011-01-23 22:35:19 +00:00
|
|
|
|
|
|
|
|
}
|
2011-01-23 21:23:53 +00:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2011-01-24 02:59:29 +00:00
|
|
|
<pre id="demo-pre">
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
document.getElementById("demo-pre").innerHTML = document.getElementById("demo").innerHTML;
|
|
|
|
|
</script>
|
|
|
|
|
</pre>
|
2011-01-23 21:23:53 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
