mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-10-10 06:54:18 +00:00
69 lines
7.5 KiB
HTML
69 lines
7.5 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<title>gui-dat</title>
|
|
|
|
<link rel="icon" type="image/gif" href="demo/assets/favicon.gif">
|
|
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
|
|
<script type="text/javascript" src="gui.min.js"></script>
|
|
<script type="text/javascript" src="demo/improvedNoise.js"></script>
|
|
<script type="text/javascript" src="demo/demo.js"></script>
|
|
<script type="text/javascript">
|
|
window.onload = function() {
|
|
|
|
var fizzyText = new FizzyText("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");
|
|
|
|
GUI.add(fizzyText, "explode")
|
|
|
|
};
|
|
|
|
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>
|
|
<h1><a href = "http://twitter.com/guidat"><img src = "demo/assets/favicon.gif" 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=""><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></p></li>
|
|
</ul>
|
|
|
|
<h2>Basic Usage</h2>
|
|
<pre id="demo-pre" class="prettyprint"><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"gui.min.js"</span><span class="tag">></script></span><span class="pln"><br></span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><span class="pln"><br><br>window</span><span class="pun">.</span><span class="pln">onload </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br><br> </span><span class="kwd">var</span><span class="pln"> fizzyText </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ"><a href="demo/demo.js">FizzyText</a></span><span class="pun">(</span><span class="str">"gui-dat"</span><span class="pun">);</span><span class="pln"><br><br> GUI</span><span class="pun">.</span><span class="pln">start</span><span class="pun">();</span><span class="pln"><br> <br> </span><span class="com">// Adds a text field</span><span class="pln"><br> GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"message"</span><span class="pun">);</span><span class="pln"><br> <br> </span><span class="com">// Adds sliders with min and max</span><span class="pln"><br> GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"maxSize"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">7</span><span class="pun">);</span><span class="pln"><br> GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"growthSpeed"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.01</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">);</span><span class="pln"><br> GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"speed"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">);</span><span class="pln"><br> <br> </span><span class="com">// Adds sliders with min, max and increment.</span><span class="pln"><br> GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"noiseStrength"</span><span class="pun">,</span><span class="pln"> </span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="lit">100</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">);</span><span class="pln"><br> <br> </span><span class="com">// Adds a boolean checkbox</span><span class="pln"><br> GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"displayOutline"</span><span class="pun">);</span><span class="pln"><br><br> </span><span class="com">// Adds a function button</span><span class="pln"><br> GUI</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="pln">fizzyText</span><span class="pun">,</span><span class="pln"> </span><span class="str">"explode"</span><span class="pun">)</span><span class="pln"><br> <br></span><span class="pun">};</span><span class="pln"><br><br></span><span class="tag"></script></span></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> |