dat.gui/index.html

72 lines
7.6 KiB
HTML
Raw Normal View History

2011-01-25 07:42:20 +00:00
<!doctype html>
<head>
2011-01-27 02:45:34 +00:00
<title>gui-dat</title>
2011-01-25 08:14:24 +00:00
2011-01-27 06:35:45 +00:00
<link rel="icon" type="image/png" href="demo/assets/favicon.png" />
<link href="demo/demo.css" media="screen" rel="stylesheet" type="text/css" />
2011-01-27 02:45:34 +00:00
<script type="text/javascript" src="gui.min.js"></script>
2011-01-26 23:25:40 +00:00
<script type="text/javascript" src="demo/improvedNoise.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
window.onload = function() {
2011-01-26 02:30:05 +00:00
2011-01-27 02:45:34 +00:00
var fizzyText = new FizzyText("gui-dat");
2011-01-25 07:42:20 +00:00
GUI.start();
2011-01-26 00:58:52 +00:00
2011-01-27 02:45:34 +00:00
// Text field
GUI.add(fizzyText, "message");
2011-01-27 02:45:34 +00:00
// 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);
2011-01-26 23:25:40 +00:00
2011-01-27 02:45:34 +00:00
// Sliders with min, max and increment.
GUI.add(fizzyText, "noiseStrength", 10, 100, 5);
// Boolean checkbox
GUI.add(fizzyText, "displayOutline");
2011-01-27 02:48:27 +00:00
// Fires a function called "explode"
2011-01-27 02:45:34 +00:00
GUI.add(fizzyText, "explode")
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-27 02:45:34 +00:00
<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>
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 23:25:40 +00:00
2011-01-27 02:45:34 +00:00
<ul>
2011-01-27 02:52:08 +00:00
<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>
2011-01-27 21:34:56 +00:00
<li><a href="http://github.com/jonobr1/GUI-DAT">Contribute on GitHub!</a></li>
2011-01-27 02:45:34 +00:00
</ul>
2011-01-26 23:25:40 +00:00
2011-01-26 01:55:59 +00:00
<h2>Basic Usage</h2>
2011-01-27 02:45:34 +00:00
<pre id="demo-pre" class="prettyprint"><span class="tag">&lt;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">&gt;&lt;/script&gt;</span><span class="pln"><br></span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</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>&nbsp; &nbsp;</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>&nbsp; &nbsp;GUI</span><span class="pun">.</span><span class="pln">start</span><span class="pun">();</span><span class="pln"><br>&nbsp; &nbsp;<br>&nbsp; &nbsp;</span><span class="com">// Adds a text field</span><span class="pln"><br>&nbsp; &nbsp;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>&nbsp; &nbsp;<br>&nbsp; &nbsp;</span><span class="com">// Adds sliders with min and max</span><span class="pln"><br>&nbsp; &nbsp;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>&nbsp; &nbsp;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>&nbsp; &nbsp;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>&nbsp; &nbsp;<br>&nbsp; &nbsp;</span><span class="com">// Adds sliders with min, max and increment.</span><span class="pln"><br>&nbsp; &nbsp;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>&nbsp; &nbsp;<br>&nbsp; &nbsp;</span><span class="com">// Adds a boolean checkbox</span><span class="pln"><br>&nbsp; &nbsp;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
2011-01-26 01:55:59 +00:00
2011-01-27 02:45:34 +00:00
<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>
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>