docs/index.html
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>data-gui</title><meta name="description" content="Documentation for data-gui"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">data-gui</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><h1> data-gui</h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><div class="tsd-panel tsd-typography">
<a href="#data-gui" id="data-gui" style="color: inherit; text-decoration: none;">
<h1>data-gui</h1>
</a>
<p><a href="https://github.com/SolalDR/data-gui/actions/workflows/build.yml"><img src="https://github.com/SolalDR/data-gui/actions/workflows/build.yml/badge.svg" alt="build"></a>
<a href="https://codeclimate.com/github/SolalDR/data-gui/maintainability"><img src="https://api.codeclimate.com/v1/badges/0e90a12eb9040d1865b0/maintainability" alt="Maintainability"></a>
<a href="https://github.com/GIScience/badges#experimental"><img src="https://github.com/GIScience/badges/raw/master/status/experimental.svg" alt="status: experimental"></a>
<a href="https://github.com/SolalDR/data-gui"><img src="https://img.shields.io/github/package-json/v/SolalDR/data-gui" alt="version"></a></p>
<p><em>The aim of <code>data-gui</code> is to create a scalable and lightweight user interface to tweak variables in JS.</em></p>
<p><a href="https://solaldr.github.io/data-gui/modules.html#default">Documentation</a> — <a href="https://data-gui.netlify.app">Demo</a> — <a href="https://github.com/SolalDR/data-gui">Source</a>
<br></p>
<a href="#installation" id="installation" style="color: inherit; text-decoration: none;">
<h2>Installation</h2>
</a>
<pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">i</span><span class="hl-1"> </span><span class="hl-0">data</span><span class="hl-1">-</span><span class="hl-0">gui</span><span class="hl-1"> --</span><span class="hl-0">save</span>
</code></pre>
<pre><code><span class="hl-0">yarn</span><span class="hl-1"> </span><span class="hl-0">add</span><span class="hl-1"> </span><span class="hl-0">data</span><span class="hl-1">-</span><span class="hl-0">gui</span>
</code></pre>
<a href="#how-to-use" id="how-to-use" style="color: inherit; text-decoration: none;">
<h2>How to use</h2>
</a>
<a href="#basic-use" id="basic-use" style="color: inherit; text-decoration: none;">
<h3>Basic use</h3>
</a>
<img src="https://raw.githubusercontent.com/SolalDR/data-gui/master/public/light.png" width="300" align="right"/>
<pre><code class="language-javascript"><span class="hl-2">// See result below </span><br/><span class="hl-3">import</span><span class="hl-1"> </span><span class="hl-0">GUI</span><span class="hl-1"> </span><span class="hl-3">from</span><span class="hl-1"> </span><span class="hl-4">'data-gui'</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">target</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-0">a:</span><span class="hl-1"> </span><span class="hl-7">1</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">b:</span><span class="hl-1"> </span><span class="hl-4">"Jonh"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">c:</span><span class="hl-1"> </span><span class="hl-4">"rgba(0, 0, 0, 0.5)"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">d:</span><span class="hl-1"> </span><span class="hl-5">false</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-8">e</span><span class="hl-0">:</span><span class="hl-1"> () </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-8">alert</span><span class="hl-1">(</span><span class="hl-4">"Hello E"</span><span class="hl-1">)</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">gui</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-8">GUI</span><span class="hl-1">()</span><br/><span class="hl-0">gui</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'a'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">)</span><br/><span class="hl-0">gui</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'b'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">)</span><br/><span class="hl-0">gui</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'c'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">)</span><br/><span class="hl-0">gui</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'d'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">)</span><br/><span class="hl-0">gui</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'e'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">)</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">g</span><span class="hl-1"> = </span><span class="hl-0">gui</span><span class="hl-1">.</span><span class="hl-8">group</span><span class="hl-1">({ </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-4">'With options'</span><span class="hl-1"> })</span><br/><span class="hl-0">g</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'a'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">, { </span><span class="hl-0">min:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-0">max:</span><span class="hl-1"> </span><span class="hl-7">100</span><span class="hl-1">, </span><span class="hl-0">step:</span><span class="hl-1"> </span><span class="hl-7">0.1</span><span class="hl-1"> })</span><br/><span class="hl-0">g</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'b'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">, { </span><span class="hl-0">choices:</span><span class="hl-1"> [</span><span class="hl-4">"Jonh"</span><span class="hl-1">, </span><span class="hl-4">"Foo"</span><span class="hl-1">, </span><span class="hl-4">"Bar"</span><span class="hl-1">] })</span><br/><span class="hl-0">g</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'c'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">, { </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-4">"Custom name C"</span><span class="hl-1">})</span>
</code></pre>
<p>Consult <a href="https://solaldr.github.io/data-gui/classes/basecontroller.html">controller documentation</a> for more information</p>
<a href="#gui-configuration" id="gui-configuration" style="color: inherit; text-decoration: none;">
<h3>GUI Configuration</h3>
</a>
<img src="https://raw.githubusercontent.com/SolalDR/data-gui/master/public/dark-with-name2.png" width="300" align="right"/>
<pre><code class="language-javascript"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-6">gui</span><span class="hl-1"> = </span><span class="hl-5">new</span><span class="hl-1"> </span><span class="hl-8">GUI</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-4">"Custom name"</span><br/><span class="hl-1"> </span><span class="hl-0">theme</span><span class="hl-1">: </span><span class="hl-4">"dark"</span><br/><span class="hl-1">}) </span><br/><span class="hl-0">gui</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'width'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">, { </span><span class="hl-0">min:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-0">max:</span><span class="hl-1"> </span><span class="hl-7">500</span><span class="hl-1"> })</span><br/><span class="hl-0">gui</span><span class="hl-1">.</span><span class="hl-8">add</span><span class="hl-1">(</span><span class="hl-4">'height'</span><span class="hl-1">, </span><span class="hl-0">target</span><span class="hl-1">, { </span><span class="hl-0">min:</span><span class="hl-1"> </span><span class="hl-7">0</span><span class="hl-1">, </span><span class="hl-0">max:</span><span class="hl-1"> </span><span class="hl-7">500</span><span class="hl-1"> })</span>
</code></pre>
</p>
<p>Consult <a href="https://solaldr.github.io/data-gui/classes/gui.html">GUI page</a> in the documentation for more information</p>
<a href="#dependencies" id="dependencies" style="color: inherit; text-decoration: none;">
<h2>Dependencies</h2>
</a>
<ul>
<li><a href="https://github.com/Polymer/lit-element">LitElement</a> for webcomponents. </li>
<li><a href="https://github.com/SolalDR/raf">@solaldr/raf</a></li>
</ul>
<a href="#license" id="license" style="color: inherit; text-decoration: none;">
<h2>License</h2>
</a>
<p><a href="LICENSE">MIT</a>.</p>
</div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Exports</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="tsd-kind-interface"><a href="interfaces/GroupConstructor.html" class="tsd-kind-icon">Group<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/Group.html" class="tsd-kind-icon">Group</a></li><li class="tsd-kind-interface"><a href="interfaces/GUIConstructor.html" class="tsd-kind-icon">GUIConstructor</a></li><li class="tsd-kind-class"><a href="classes/GUI.html" class="tsd-kind-icon">GUI</a></li><li class="tsd-kind-interface"><a href="interfaces/ActionControllerArgument.html" class="tsd-kind-icon">Action<wbr/>Controller<wbr/>Argument</a></li><li class="tsd-kind-interface"><a href="interfaces/ActionControllerConstructor.html" class="tsd-kind-icon">Action<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/ActionController.html" class="tsd-kind-icon">Action<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/BooleanControllerConstructor.html" class="tsd-kind-icon">Boolean<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/BooleanController.html" class="tsd-kind-icon">Boolean<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/ImageControllerConstructor.html" class="tsd-kind-icon">Image<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/ImageController.html" class="tsd-kind-icon">Image<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/NumberControllerConstructor.html" class="tsd-kind-icon">Number<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/NumberController.html" class="tsd-kind-icon">Number<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/SelectControllerChoice.html" class="tsd-kind-icon">Select<wbr/>Controller<wbr/>Choice</a></li><li class="tsd-kind-interface"><a href="interfaces/SelectControllerConstructor.html" class="tsd-kind-icon">Select<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/SelectController.html" class="tsd-kind-icon">Select<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/TextControllerConstructor.html" class="tsd-kind-icon">Text<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/TextController.html" class="tsd-kind-icon">Text<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/ControllerConstructor.html" class="tsd-kind-icon">Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/BaseController.html" class="tsd-kind-icon">Base<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/BaseGroupConstructor.html" class="tsd-kind-icon">Base<wbr/>Group<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/BaseGroup.html" class="tsd-kind-icon">Base<wbr/>Group</a></li><li class="tsd-kind-interface"><a href="interfaces/CanvasControllerConstructor.html" class="tsd-kind-icon">Canvas<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/CanvasController.html" class="tsd-kind-icon">Canvas<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/ColorControllerConstructor.html" class="tsd-kind-icon">Color<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-class"><a href="classes/ColorController.html" class="tsd-kind-icon">Color<wbr/>Controller</a></li><li class="tsd-kind-interface"><a href="interfaces/VectorControllerConstructor.html" class="tsd-kind-icon">Vector<wbr/>Controller<wbr/>Constructor</a></li><li class="tsd-kind-interface"><a href="interfaces/Vector.html" class="tsd-kind-icon">Vector</a></li><li class="tsd-kind-class"><a href="classes/VectorController.html" class="tsd-kind-icon">Vector<wbr/>Controller</a></li></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li><li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li><li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li><li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="assets/main.js"></script></body></html>