dreemgl/docs/api/guides/flowgraph/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.flowgraph({"guide":"<h1 id='flowgraph-section-dreemgl-flow-graph'>DreemGL Flow Graph</h1>\n<div class='toc'>\n<p><strong>Contents</strong></p>\n<ul>\n<li>1. <a href='#!/guide/flowgraph-section-loading-a-composition'>Loading a Composition</a>\n </li>\n<li>2. <a href='#!/guide/flowgraph-section-blocks'>Blocks</a>\n <ul>\n<li>2.1. <a href='#!/guide/flowgraph-section-services'>Services</a>\n </li>\n<li>2.2. <a href='#!/guide/flowgraph-section-screens'>Screens</a>\n </li>\n</ul></li>\n<li>3. <a href='#!/guide/flowgraph-section-wires'>Wires</a>\n <ul>\n<li>3.1. <a href='#!/guide/flowgraph-section-preparing-attributes'>Preparing attributes</a>\n </li>\n<li>3.2. <a href='#!/guide/flowgraph-section-wiring-attributes'>Wiring attributes</a>\n </li>\n</ul></li>\n<li>4. <a href='#!/guide/flowgraph-section-debugging'>Debugging</a>\n <ul>\n<li>4.1. <a href='#!/guide/flowgraph-section-service-%28debugd%29'>Service (debugd)</a>\n </li>\n<li>4.2. <a href='#!/guide/flowgraph-section-screen-%28debug%29'>Screen (debug)</a>\n </li>\n<li>4.3. <a href='#!/guide/flowgraph-section-manual-input-screen-%28outputs%29'>Manual Input Screen (outputs)</a>\n </li>\n</ul></li>\n<li>5. <a href='#!/guide/flowgraph-section-live-example'>Live Example</a>\n </li>\n</ul></div>\n\n<p>The Flow Graph is an application which allows a user to visually design application data flow.</p>\n\n<h2 id='flowgraph-section-loading-a-composition'>Loading a Composition</h2>\n\n<p>The Flow Graph is located at <a href=\"/apps/flowgraph\">/apps/flowgraph</a>.  It loads compositions using the <code>#composition</code> hash\nparameter (see example below).</p>\n\n<h2 id='flowgraph-section-blocks'>Blocks</h2>\n\n<p>There are two varieties of top-level composition blocks that can be wired together, Services and Screens.  All arguments\nin the composition's main function will be available for use by the flowgraph.</p>\n\n<h3 id='flowgraph-section-services'>Services</h3>\n\n<p>Service blocks are objects that extend from <code>$server/service</code>.  To be visible in the flowgraph services must have\na <code>flowdata</code> attribute which contains contains position object e.g. <code>{x:100, y:100}</code>.</p>\n\n<h3 id='flowgraph-section-screens'>Screens</h3>\n\n<p>Screen blocks are objects that extend from <code>$ui/screen</code>.  To be visible in the flowgraph services must have\na <code>flowdata</code> attribute which contains contains position object, with <code>screen=true</code> e.g. <code>{x:100, y:100, screen:true}</code>.</p>\n\n<p>Clicking on the small screen icon will open an <code>target='_blank'</code> browser window to the appropriate screen using the\ndefault <code>screenForClient</code> mechanic (i.e. <code>?screenname</code>).</p>\n\n<h2 id='flowgraph-section-wires'>Wires</h2>\n\n<p>Blocks are connected via attribute wires.  In DreemGL code an atrribute wire is an initializer using a wire function,\ntypically an rpc call, such as:</p>\n\n<pre><code>userscreen({\n    userProfile:wire(\"this.rpc.userservice.profile\")\n})\n</code></pre>\n\n<p>Complex wires that supply data into arrays and objects can be built using javascript in the wire expressions.  For example,\narrays can be built from multiple calls:</p>\n\n<pre><code>map({\n    locations:wire(\"[this.rpc.source1.data,this.rpc.source2.data,this.rpc.source3.data]\")\n})\n</code></pre>\n\n<p>And objects can be built inline with static keys:</p>\n\n<pre><code>profilescreen({\n    profile:wire(\"{username:this.rpc.userservice.username, likes:this.rpc.prefsservice.favorites, address:this.rpc.locationservice.location}\")\n})\n</code></pre>\n\n<h3 id='flowgraph-section-preparing-attributes'>Preparing attributes</h3>\n\n<p>In order to make an attribute visible to the flowgraph, an attribute must have a <code>flow</code> property with a value of either\n'out' or 'in'.  e.g.</p>\n\n<pre><code>this.attributes = {\n    userid: Config({type: int, flow: 'in'}),\n    onuserid:function(ev,v,o) { this.profile = this.getProfileFromUserID(v) },\n    profile: Config({type:Object, flow: 'out'})\n}\n</code></pre>\n\n<h3 id='flowgraph-section-wiring-attributes'>Wiring attributes</h3>\n\n<p>To wire attributes in the flowgraph click on either the output or the input and click again on the corespondingly\nrespective input or output you want to attach it to.</p>\n\n<h4 id='flowgraph-section-solid%2C-single-color-wires-%28one-to-one%2C-one-to-many%29'>Solid, single-color wires (one-to-one, one-to-many)</h4>\n\n<p>When wires are a solid color, this indicates an exact type match, so there will be no conversion.</p>\n\n<h4 id='flowgraph-section-solid%2C-mixed-color-wires-%28one-to-one%2C-one-to-many%29'>Solid, mixed-color wires (one-to-one, one-to-many)</h4>\n\n<p>A mixed color indicates a type conversion.  Many data types are type convertable, however can produce unexpected\nconversions, so be wary when using automatic conversion.</p>\n\n<h4 id='flowgraph-section-dashed-wires-%28many-to-one%29'>Dashed wires (many-to-one)</h4>\n\n<p>Wires that appear to be chopped up or dashed indicates that the value is being added as an item inside of a larger\ncontainer object, typically an <code>Array</code> or an <code>Object</code>.  Adding more than one wire to an <code>Array</code> or an <code>Object</code> will\nautomatically trigger this value-inserting behavior, as will connecting any primitive type to an array.</p>\n\n<h2 id='flowgraph-section-debugging'>Debugging</h2>\n\n<h3 id='flowgraph-section-service-%28debugd%29'>Service (debugd)</h3>\n\n<p>A debug service which will print out values to the console can be added to the library by including <code>$flow$services$,debugd</code>\nin your composition's main function.</p>\n\n<h3 id='flowgraph-section-screen-%28debug%29'>Screen (debug)</h3>\n\n<p>A debug screen which will print out values on a special screen can be added to the library by including <code>$flow$displays$,debug</code>\nin your composition's main function.</p>\n\n<h3 id='flowgraph-section-manual-input-screen-%28outputs%29'>Manual Input Screen (outputs)</h3>\n\n<p>Similar to the debug screen the <code>outputs</code> screen provides writable output values that can be used as inputs into ther screens.\nThe outputs screen can be added to the library by including <code>$flow$displays$,outputs</code> in your compostion's main function</p>\n\n<h2 id='flowgraph-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=\"/apps/flowgraph?#composition=$examples/flow.js\">/apps/flowgraph?#composition=$examples/flow.js</a>:</p>\n\n<iframe style=\"border:0;width:900px; height:800px\" src=\"/apps/flowgraph?#composition=$examples/flow.js\"></iframe>\n\n\n\n","title":"DreemGL Flow Graph"});