mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
3b4f6e3944
Included prettify.js in the repo so people checking the demo localy doesn't need the internets. Changed way of hidding the panel (controllerContainer.style.height rather than this.domElement.stylemarginTop).
116 lines
4.4 KiB
HTML
116 lines
4.4 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<title>gui-dat</title>
|
|
|
|
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
|
|
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- <script type="text/javascript" src="gui.min.js"></script> -->
|
|
|
|
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
|
|
|
|
<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.boolean.js"></script>
|
|
<script type="text/javascript" src="controllers/controller.function.js"></script>
|
|
<script type="text/javascript" src="controllers/controller.number.js"></script>
|
|
<script type="text/javascript" src="controllers/controller.string.js"></script>
|
|
<script type="text/javascript" src="gui.js"></script>
|
|
|
|
<script type="text/javascript" src="demo/improvedNoise.js"></script>
|
|
<script type="text/javascript" src="demo/prettify.js"></script>
|
|
<script type="text/javascript" src="demo/demo.js"></script>
|
|
<script type="text/javascript">
|
|
window.onload = function() {
|
|
|
|
prettyPrint();
|
|
|
|
var fizzyText = new FizzyText("gui-dat");
|
|
|
|
var gui = new GUI();
|
|
document.body.appendChild( gui.domElement );
|
|
|
|
// Text field
|
|
gui.add(fizzyText, "message");
|
|
|
|
// Sliders with min and max
|
|
gui.add(fizzyText, "maxSize", 0.5, 7);
|
|
gui.add(fizzyText, "growthSpeed", 0.01, 1);
|
|
gui.add(fizzyText, "speed", 0.1, 2);
|
|
|
|
// Sliders with min, max and increment.
|
|
gui.add(fizzyText, "noiseStrength", 10, 100, 5);
|
|
|
|
// Boolean checkbox
|
|
gui.add(fizzyText, "displayOutline");
|
|
|
|
// Fires a function called "explode"
|
|
gui.add(fizzyText, "explode").setName('Explode!'); // Specify a custom name.
|
|
|
|
};
|
|
|
|
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);
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id = "helvetica-demo"></div>
|
|
<div id = "notifier"></div>
|
|
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/profile.png" border = "0" alt = "GUI-DAT flag" /></a></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>
|
|
|
|
<ul>
|
|
<li><a href="https://github.com/jonobr1/GUI-DAT/raw/master/gui.min.js"><strong>Download the minified source</strong></a> <small>[9.8kb]</small></li>
|
|
<li><a href="http://github.com/jonobr1/GUI-DAT">Contribute on GitHub!</a></li>
|
|
</ul>
|
|
|
|
<h2>Basic Usage</h2>
|
|
<pre id="demo-pre" class="prettyprint"><script type="text/javascript" src="demo/demo.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
window.onload = function() {
|
|
|
|
var fizzyText = new <a href="demo/demo.js">FizzyText</a>("gui-dat");
|
|
|
|
GUI.start();
|
|
|
|
// Text field
|
|
GUI.add(fizzyText, "message");
|
|
|
|
// Sliders with min and max
|
|
GUI.add(fizzyText, "maxSize", 0.5, 7);
|
|
GUI.add(fizzyText, "growthSpeed", 0.01, 1);
|
|
GUI.add(fizzyText, "speed", 0.1, 2);
|
|
|
|
// Sliders with min, max and increment.
|
|
GUI.add(fizzyText, "noiseStrength", 10, 100, 5);
|
|
|
|
// Boolean checkbox
|
|
GUI.add(fizzyText, "displayOutline");
|
|
|
|
// Fires a function called "explode"
|
|
GUI.add(fizzyText, "explode").setName('Explode!'); // Specify a custom name.
|
|
|
|
};
|
|
|
|
</script></pre>
|
|
|
|
<ul id="desc">
|
|
<li><strong>gui-dat</strong> will infer the type of the property you're trying to add<br/>(based on its initial value) and create the corresponding control.</li>
|
|
<li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop = value</code>.</li>
|
|
</ul>
|
|
<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>
|
|
</body>
|
|
</html>
|