agentscript/docs/GUI.html at master · backspaces/agentscript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html><htmllang="en" style="font-size:16px"><head><metacharset="utf-8"><metaname="viewport" content="width=device-width,initial-scale=1"><linkrel="icon" href="../favicon.ico"><title>Class: GUI</title><!--[if lt IE 9]>
 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]--><scriptsrc="scripts/third-party/hljs.js" defer="defer"></script><scriptsrc="scripts/third-party/hljs-line-num.js" defer="defer"></script><scriptsrc="scripts/third-party/popper.js" defer="defer"></script><scriptsrc="scripts/third-party/tippy.js" defer="defer"></script><scriptsrc="scripts/third-party/tocbot.min.js"></script><script>varbaseURL="/",locationPathname="";baseURL=(locationPathname=document.location.pathname).substr(0,locationPathname.lastIndexOf("/")+1)</script><linkrel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><svgaria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbolid="copy-icon" viewbox="0 0 488.3 488.3"><g><pathd="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><pathd="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbolid="search-icon" viewBox="0 0 512 512"><g><g><pathd="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474 c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323 c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848 S326.847,409.323,225.474,409.323z"/></g></g><g><g><pathd="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328 c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbolid="font-size-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbolid="add-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbolid="minus-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M5 11h14v2H5z"/></symbol><symbolid="dark-theme-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbolid="light-theme-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbolid="reset-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbolid="down-icon" viewBox="0 0 16 16"><pathfill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbolid="codepen-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbolid="close-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbolid="menu-icon" viewBox="0 0 24 24"><pathfill="none" d="M0 0h24v24H0z"/><pathd="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><bodydata-theme="dark"><divclass="sidebar-container"><divclass="sidebar" id="sidebar"><ahref="/" class="sidebar-title sidebar-title-anchor">Home</a><divclass="sidebar-items-container"><divclass="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><usexlink:href="#down-icon"></use></svg></div><divclass="sidebar-section-children-container"><divclass="sidebar-section-children"><ahref="AgentArray.html">AgentArray</a></div><divclass="sidebar-section-children"><ahref="AgentList.html">AgentList</a></div><divclass="sidebar-section-children"><ahref="AgentSet.html">AgentSet</a></div><divclass="sidebar-section-children"><ahref="Animator.html">Animator</a></div><divclass="sidebar-section-children"><ahref="DataSet.html">DataSet</a></div><divclass="sidebar-section-children"><ahref="GUI.html">GUI</a></div><divclass="sidebar-section-children"><ahref="GeoDataSet.html">GeoDataSet</a></div><divclass="sidebar-section-children"><ahref="Keyboard.html">Keyboard</a></div><divclass="sidebar-section-children"><ahref="Link.html">Link</a></div><divclass="sidebar-section-children"><ahref="Links.html">Links</a></div><divclass="sidebar-section-children"><ahref="Model.html">Model</a></div><divclass="sidebar-section-children"><ahref="Model3D.html">Model3D</a></div><divclass="sidebar-section-children"><ahref="Mouse.html">Mouse</a></div><divclass="sidebar-section-children"><ahref="Patch.html">Patch</a></div><divclass="sidebar-section-children"><ahref="Patches.html">Patches</a></div><divclass="sidebar-section-children"><ahref="RGBDataSet.html">RGBDataSet</a></div><divclass="sidebar-section-children"><ahref="ThreeDraw.html">ThreeDraw</a></div><divclass="sidebar-section-children"><ahref="Turtle.html">Turtle</a></div><divclass="sidebar-section-children"><ahref="Turtle3D.html">Turtle3D</a></div><divclass="sidebar-section-children"><ahref="Turtles.html">Turtles</a></div><divclass="sidebar-section-children"><ahref="TwoDraw.html">TwoDraw</a></div><divclass="sidebar-section-children"><ahref="World.html">World</a></div></div><divclass="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><usexlink:href="#down-icon"></use></svg></div><divclass="sidebar-section-children-container"><divclass="sidebar-section-children"><ahref="module-src_geojson.html">src/geojson</a></div><divclass="sidebar-section-children"><ahref="module-src_gis.html">src/gis</a></div><divclass="sidebar-section-children"><ahref="module-src_utils.html">src/utils</a></div></div><divclass="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><usexlink:href="#down-icon"></use></svg></div><divclass="sidebar-section-children-container"><divclass="sidebar-section-children"><ahref="tutorial-1 - AgentScript.html">1 - AgentScript</a></div><divclass="sidebar-section-children"><ahref="tutorial-2 - JavaScript.html">2 - JavaScript</a></div><divclass="sidebar-section-children"><ahref="tutorial-3 - Browser.html">3 - Browser</a></div><div class="sidebar-section-children"><a href="tutorial-4 - Model.html">4 - Model</a></div><div class="sidebar-section-children"><a href="tutorial-5 - View.html">5 - View</a></div><div class="sidebar-section-children"><a href="tutorial-6.1 - AnimatorController.html">6.1 - AnimatorController</a></div><div class="sidebar-section-children"><a href="tutorial-6.2 - KeyboardController.html">6.2 - KeyboardController</a></div><div class="sidebar-section-children"><a href="tutorial-6.3 - GuiController.html">6.3 - GuiController</a></div><div class="sidebar-section-children"><a href="tutorial-6.4 - MouseController.html">6.4 - MouseController</a></div><div class="sidebar-section-children"><a href="tutorial-7 - CodePenServer.html">7 - CodePenServer</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"><div class="navbar-item"><a id="github" href="https://github.com/backspaces/agentscript" target="">Github</a></div><div class="navbar-item"><a id="AgentScript" href="https://agentscript.org" target="">AgentScript.org</a></div><div class="navbar-item"><a id="npm" href="https://www.npmjs.com/package/agentscript" target="">npm</a></div><div class="navbar-item"><a id="unpkg" href="https://unpkg.com/browse/agentscript/" target="">unpkg</a></div></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section><header><h1 id="GUI-title" class="has-anchor">GUI</h1></header><article><div class="container-overview"><h3 class="name has-anchor" id="GUI"><span class="type-signature"></span>new GUI<span class="signature">(template)</span></h3><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>template</code></td><td class="type"><span class="param-type">Object</span></td><td class="description last"><p>A set of name/object pairs, one per UI element</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="GUI.js.html">GUI.js</a>, <a href="GUI.js.html#line15">line 15</a></li></ul></dd></div></dl><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Example</strong><div class="rel"><pre class="prettyprint"><code>const gui = new GUI ({
 opacity: {
 slider: [canvas.opacity, [0, 1, 0.1]],
 cmd: val => canvas.setOpacity(val),
 },
 download: {
 button: () => util.downloadBlob(data, 'data.json', false),
 },
 ...
})</code></pre></div></div></div></article></section><footerclass="footer" id="PeOAagUepe"><divclass="wrapper">AgentScript version: 0.10.20 using clean-jsdoc-theme</div></footer></div></div></div><divclass="search-container" id="PkfLWpAbet" style="display:none"><divclass="wrapper" id="iCxFxjkHbP"><buttonclass="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><usexlink:href="#close-icon"></use></svg></button><divclass="search-box-c"><svg><usexlink:href="#search-icon"></use></svg><inputtype="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><divclass="search-result-c" id="fWwVHRuDuN"><spanclass="search-result-c-text">Type anything to view search result</span></div></div></div><divclass="mobile-menu-icon-container"><buttonclass="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><usexlink:href="#menu-icon"></use></svg></button></div><divid="mobile-sidebar" class="mobile-sidebar-container"><divclass="mobile-sidebar-wrapper"><ahref="/" class="sidebar-title sidebar-title-anchor">Home</a><divclass="mobile-nav-links"><divclass="navbar-item"><aid="github-mobile" href="https://github.com/backspaces/agentscript" target="">Github</a></div><divclass="navbar-item"><aid="AgentScript-mobile" href="https://agentscript.org" target="">AgentScript.org</a></div><divclass="navbar-item"><aid="npm-mobile" href="https://www.npmjs.com/package/agentscript" target="">npm</a></div><divclass="navbar-item"><aid="unpkg-mobile" href="https://unpkg.com/browse/agentscript/" target="">unpkg</a></div></div><divclass="mobile-sidebar-items-c"><divclass="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><usexlink:href="#down-icon"></use></svg></div><divclass="sidebar-section-children-container"><divclass="sidebar-section-children"><ahref="AgentArray.html">AgentArray</a></div><divclass="sidebar-section-children"><ahref="AgentList.html">AgentList</a></div><divclass="sidebar-section-children"><ahref="AgentSet.html">AgentSet</a></div><divclass="sidebar-section-children"><ahref="Animator.html">Animator</a></div><divclass="sidebar-section-children"><ahref="DataSet.html">DataSet</a></div><divclass="sidebar-section-children"><ahref="GUI.html">GUI</a></div><divclass="sidebar-section-children"><ahref="GeoDataSet.html">GeoDataSet</a></div><divclass="sidebar-section-children"><ahref="Keyboard.html">Keyboard</a></div><divclass="sidebar-section-children"><ahref="Link.html">Link</a></div><divclass="sidebar-section-children"><ahref="Links.html">Links</a></div><divclass="sidebar-section-children"><ahref="Model.html">Model</a></div><divclass="sidebar-section-children"><ahref="Model3D.html">Model3D</a></div><divclass="sidebar-section-children"><ahref="Mouse.html">Mouse</a></div><divclass="sidebar-section-children"><ahref="Patch.html">Patch</a></div><divclass="sidebar-section-children"><ahref="Patches.html">Patches</a></div><divclass="sidebar-section-children"><ahref="RGBDataSet.html">RGBDataSet</a></div><divclass="sidebar-section-children"><ahref="ThreeDraw.html">ThreeDraw</a></div><divclass="sidebar-section-children"><ahref="Turtle.html">Turtle</a></div><divclass="sidebar-section-children"><ahref="Turtle3D.html">Turtle3D</a></div><divclass="sidebar-section-children"><ahref="Turtles.html">Turtles</a></div><divclass="sidebar-section-children"><ahref="TwoDraw.html">TwoDraw</a></div><divclass="sidebar-section-children"><ahref="World.html">World</a></div></div><divclass="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><usexlink:href="#down-icon"></use></svg></div><divclass="sidebar-section-children-container"><divclass="sidebar-section-children"><ahref="module-src_geojson.html">src/geojson</a></div><divclass="sidebar-section-children"><ahref="module-src_gis.html">src/gis</a></div><divclass="sidebar-section-children"><ahref="module-src_utils.html">src/utils</a></div></div><divclass="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><usexlink:href="#down-icon"></use></svg></div><divclass="sidebar-section-children-container"><divclass="sidebar-section-children"><ahref="tutorial-1 - AgentScript.html">1 - AgentScript</a></div><divclass="sidebar-section-children"><ahref="tutorial-2 - JavaScript.html">2 - JavaScript</a></div><divclass="sidebar-section-children"><ahref="tutorial-3 - Browser.html">3 - Browser</a></div><divclass="sidebar-section-children"><ahref="tutorial-4 - Model.html">4 - Model</a></div><divclass="sidebar-section-children"><ahref="tutorial-5 - View.html">5 - View</a></div><divclass="sidebar-section-children"><ahref="tutorial-6.1 - AnimatorController.html">6.1 - AnimatorController</a></div><divclass="sidebar-section-children"><ahref="tutorial-6.2 - KeyboardController.html">6.2 - KeyboardController</a></div><divclass="sidebar-section-children"><ahref="tutorial-6.3 - GuiController.html">6.3 - GuiController</a></div><divclass="sidebar-section-children"><ahref="tutorial-6.4 - MouseController.html">6.4 - MouseController</a></div><divclass="sidebar-section-children"><ahref="tutorial-7 - CodePenServer.html">7 - CodePenServer</a></div></div></div><divclass="mobile-navbar-actions"><divclass="navbar-right-item"><buttonclass="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html>