mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
121 lines
4.1 KiB
HTML
121 lines
4.1 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<title>GUI-DAT</title>
|
|
|
|
<link rel="icon" type="image/gif" href="demo/assets/favicon.gif">
|
|
|
|
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
|
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
|
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
|
|
|
|
<script type="text/javascript" src="gui.js"></script>
|
|
<script type="text/javascript" src="controllers/slider.js"></script>
|
|
<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>
|
|
<script type="text/javascript" src="demo/demo.js"></script>
|
|
<script id="demo" type="text/javascript">
|
|
var controllableObject =
|
|
{
|
|
numberProperty: 20,
|
|
constrainedNum: 0,
|
|
notchedNum: 200,
|
|
textProperty: "a string",
|
|
anotherTextProperty: "another string",
|
|
booleanProperty: false,
|
|
anotherBooleanProperty: false,
|
|
functionProperty: function() {
|
|
alert("I am a function!");
|
|
}
|
|
};
|
|
|
|
window.onload = function() {
|
|
|
|
prettyPrint();
|
|
|
|
GUI.start();
|
|
|
|
// Creates a number box
|
|
GUI.add(controllableObject, "numberProperty");
|
|
|
|
// Creates a slider (min, max)
|
|
GUI.add(controllableObject, "constrainedNum", -100, 100)
|
|
|
|
// Creates a slider with notches
|
|
GUI.add(controllableObject, "notchedNum", 0, 800, 100)
|
|
|
|
// Creates a text field
|
|
GUI.add(controllableObject, "textProperty");
|
|
|
|
// Creates a checkbox
|
|
GUI.add(controllableObject, "booleanProperty");
|
|
|
|
// Creates a button
|
|
GUI.add(controllableObject, "functionProperty")
|
|
.setName("Fire a Function");
|
|
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" border = "0" alt = "GUI-DAT flag" /></a>GUI-DAT</h1>
|
|
<p>
|
|
<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>
|
|
|
|
<h2>Basic Usage</h2>
|
|
|
|
<pre id="demo-pre" class="prettyprint">
|
|
<script type="text/javascript" src="gui.min.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var controllableObject =
|
|
{
|
|
numberProperty: 20,
|
|
constrainedNum: 0,
|
|
notchedNum: 240,
|
|
textProperty: "a string",
|
|
anotherTextProperty: "another string",
|
|
booleanProperty: false,
|
|
anotherBooleanProperty: false,
|
|
functionProperty: function() {
|
|
alert("I am a function!");
|
|
}
|
|
};
|
|
|
|
window.onload = function() {
|
|
|
|
GUI.start();
|
|
|
|
// Closed by default.
|
|
GUI.open();
|
|
|
|
// Creates a number box
|
|
GUI.add(controllableObject, "numberProperty");
|
|
|
|
// Creates a slider (min, max)
|
|
GUI.add(controllableObject, "constrainedNum", -100, 100)
|
|
|
|
// Creates a slider with notches
|
|
GUI.add(controllableObject, "notchedNum", 0, 800, 100)
|
|
|
|
// Creates a text field
|
|
GUI.add(controllableObject, "textProperty");
|
|
|
|
// Creates a checkbox
|
|
GUI.add(controllableObject, "booleanProperty");
|
|
|
|
// Creates a button
|
|
GUI.add(controllableObject, "functionProperty")
|
|
.setName("Fire a Function");
|
|
|
|
};
|
|
|
|
</script></pre>
|
|
<footer>
|
|
|
|
</footer>
|
|
</body>
|
|
</html> |