dreemgl/docs/api/guides/toolkit/README.js

DreemGL is an open-source multi-screen prototyping framework for mediated environments, with a visual editor and shader styling for webGL and DALi runtimes written in JavaScript. As a toolkit for gpu-accelerated multiscreen development, DreemGL includes

Ext.data.JsonP.toolkit({"guide":"<h1 id='toolkit-section-dreemgl-visual-layout-toolkit'>DreemGL Visual Layout Toolkit</h1>\n<div class='toc'>\n<p><strong>Contents</strong></p>\n<ul>\n<li>1. <a href='#!/guide/toolkit-section-setting-up'>Setting Up</a>\n </li>\n<li>2. <a href='#!/guide/toolkit-section-special-properties'>Special Properties</a>\n </li>\n<li>3. <a href='#!/guide/toolkit-section-component-palette'>Component Palette</a>\n </li>\n<li>4. <a href='#!/guide/toolkit-section-live-example'>Live Example</a>\n </li>\n</ul></div>\n\n<p>The layout <code>toolkit</code> widget is meant for quickly prototyping and designing new compositions.</p>\n\n<h2 id='toolkit-section-setting-up'>Setting Up</h2>\n\n<p>The layout <code>toolkit</code> is for prototyping user interfaces and as such is limited to compositions with simple render functions (particularly functions without loops\nor flow control logic).  The simplest way to begin is with a blank <code>toolkit</code> application to complete the visual layout and design. Then, more complex logic can be added when the application is developed. The purpose of this guide is to describe the process of prototping visual layout.</p>\n\n<p>For example:</p>\n\n<pre><code>define.class(\"$server/composition\", function ($ui$, screen, view, label, icon, cadgrid, $widgets$, toolkit) {\n    this.render = function() {\n      return screen(\n        cadgrid({\n          toolrect:false,\n          toolmove:false,\n          flex:3,\n          name:\"grid\",\n          bgcolor:\"#4e4e4e\",\n          gridsize:5,\n          majorevery:5,\n          majorline:\"#575757\",\n          minorline:\"#484848\"}\n        ),\n        toolkit()\n      );\n    };\n  }\n);\n</code></pre>\n\n<p>Note the there are two special <code>tool-</code> properties being added to the <code>cadgrid</code>.  These indicate to the <code>toolkit</code> that\nthis view should not be mmoved (<code>toolmove:false</code>) and should not show the selection rectangle when\nselected (<code>toolrect:false</code>).  A side effect of <code>toolmove:false</code> informing toolkit that it is unable to move this view,\nit can be used as backdrop for multiple selection, essentially a main canvas for the toolkit to select and drag within.</p>\n\n<h2 id='toolkit-section-special-properties'>Special Properties</h2>\n\n<p>There are a number of special properties that can be added to views to influence toolkit behavior:</p>\n\n<table>\n<thead>\n<tr>\n<th> Property </th>\n<th> Default </th>\n<th> Behavior </th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td> tooltarget </td>\n<td> true </td>\n<td> When false, is completely ignored by <code>toolkit</code> </td>\n</tr>\n<tr>\n<td> tooldragroot </td>\n<td> false </td>\n<td> When true, inner children cannot be dragged </td>\n</tr>\n<tr>\n<td> toolrect </td>\n<td> true </td>\n<td> When true, draw selection rectangle, don't when false </td>\n</tr>\n<tr>\n<td> toolresize </td>\n<td> true </td>\n<td> When true view can be resized, is false then not </td>\n</tr>\n<tr>\n<td> tooldrop </td>\n<td> true </td>\n<td> A valid location for dropping components on to </td>\n</tr>\n<tr>\n<td> toolselect </td>\n<td> true </td>\n<td> When false cannot be selected </td>\n</tr>\n<tr>\n<td> toolremove </td>\n<td> true </td>\n<td> When false, cannot be removed/deleted </td>\n</tr>\n<tr>\n<td> tooltextedit </td>\n<td> true </td>\n<td> When true can edit text in place </td>\n</tr>\n<tr>\n<td> toolrotate </td>\n<td> true </td>\n<td> When true toolkit can rotate view </td>\n</tr>\n</tbody>\n</table>\n\n\n<h2 id='toolkit-section-component-palette'>Component Palette</h2>\n\n<p>The <code>toolkit</code> includes a configurable component palette that allows you to drop coponets and behaviors onto DreemGL\nviews in a simple way.  Custom component descriptors are included in the <code>toolkit</code> as follows:</p>\n\n<pre><code>toolkit({\n  components:[\n      {\n        label:\"Human Readbale Name\",\n        desc:\"A long form description of the item\",\n        icon:\"optional icon code\",\n        classname:\"classname\",\n        classdir:\"$$\",\n        params:{\n          include:\"any params\",\n          to:\"attach to the dropped object\",\n          including:functions() {}            \n        }\n      }  \n  ]\n})\n</code></pre>\n\n<p>For example, the default componets are <code>view</code>, <code>label</code>, <code>checkbox</code>, <code>button</code> and <code>icon</code> objects and, and are configured\nwith param values as such:</p>\n\n<pre><code>    [\n        {\n            label:\"View\",\n            icon:\"sticky-note\",\n            desc:\"A rectangular view\",\n            classname:\"view\",\n            classdir:\"$ui$\",\n            params:{\n                height:150,\n                width:200,\n                pickalpha:-1,\n                bgcolor:'white'\n            }\n        },\n        {\n            label:\"Text\",\n            text:\"Aa\",\n            desc:\"A text label\",\n            classname:\"label\",\n            classdir:\"$ui$\",\n            params:{\n                fontsize:44,\n                pickalpha:-1,\n                bgcolor:\"transparent\",\n                fgcolor:'#999',\n                text:'Label'\n            }\n        },\n        {\n            label:\"Check Button\",\n            icon:\"check-square-o\",\n            desc:\"A check button\",\n            classname:\"checkbox\",\n            classdir:\"$ui$\",\n            params:{\n                tooldragroot:true,\n                fontsize:24,\n                bgcolor:\"transparent\",\n                buttoncolor1:\"transparent\",\n                buttoncolor2:\"transparent\",\n                hovercolor1:\"transparent\",\n                hovercolor2:\"transparent\",\n                pressedcolor1:\"transparent\",\n                pressedcolor2:\"transparent\",\n                pickalpha:-1,\n                fgcolor:'white'\n            }\n        },\n        {\n            label:\"Button\",\n            icon:\"stop\",\n            desc:\"A basic button\",\n            classname:\"button\",\n            classdir:\"$ui$\",\n            params:{\n                tooldragroot:true,\n                fontsize:24,\n                pickalpha:-1,\n                text:'Button'\n            }\n        },\n        {\n            label:\"Icon\",\n            icon:\"info-circle\",\n            desc:\"A Fontawesome icon\",\n            classname:\"icon\",\n            classdir:\"$ui$\",\n            params:{\n                fgcolor:'#e22',\n                bgcolor:'transparent',\n                pickalpha:-1,\n                icon:'heart',\n                fontsize:80\n            }\n        }\n    ]\n</code></pre>\n\n<p>When an item is pulled out of the component palette and dropped onto a view, it inserts a new view at that location,\n populating it with the <code>params</code> attribute in the component descriptor.  Behaviors can also be dropped onto views\n by attaching named functions to the <code>behaviors</code> attribute of the component descriptor.</p>\n\n<h2 id='toolkit-section-live-example'>Live Example</h2>\n\n<p>If you have the DreemGL server running a live example can be found at <a href=\"/examples/usingtoolkit\">/examples/usingtoolkit</a>:</p>\n\n<iframe style=\"border:0;width:900px; height:800px\" src=\"/examples/usingtoolkit\"></iframe>\n\n\n\n","title":"DreemGL Visual Layout Toolkit"});