Pluggablebus

README.md

@@ -3,18 +3,67 @@
 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 features such as:
+
 * IoT Integration for Smart Environments that is elegantly simple
 * Visual layouts and compositions using real data from network services
-* Fast protoyping that allows designers to easily test compositions that connect multiple users in shared experiences on big screens or projections, while allowing each person to use the control tools and preferences they have configured.
+* Fast prototyping that allows designers to easily test compositions that connect multiple users in shared experiences on big screens or projections, while allowing each person to use the control tools and preferences they have configured.
 
-An overview of the DreemGL's architecture is:
-![Architecture Image]
-(https://raw.githubusercontent.com/dreemproject/dreemgl/dev/docs/images/architecture.png)
+An overview of the DreemGL's architecture:
+<img alt="Architecture Image" src="https://raw.githubusercontent.com/dreemproject/dreemgl/dev/docs/images/architecture.png"/>
 
 ## Getting Started with DreemGL
+
 The fastest way to get started with DreemGL is to walk through [DreemGL in 10 Minutes](http://docs.dreemproject.org/docs/api/index.html#!/guide/dreem_in_10_part1).
 
-Once you have downloaded the source from the [master branch of dreemproject in Github](https://github.com/dreemproject/dreemgl), you can start DreemGL by typing: 
+### Working with DreemGL NPM
+
+Install the DreemGl NPM globally to include the `dreemgl` command line standalone launcher:
+
+`npm install -g dreemgl`
+
+#### Serve a single DreemGL composition
+
+The easiest way to get started quickly is to have DreemGL serve an individual composition using the standalone launcher:
+
+`dreemgl -port 3000 ./mydreemglapp.js`
+
+#### Serve DreemGL from within an expresss app
+
+It's easy to integrate the DreemGL runtime from within an express app:
+
+```
+// Create an express app
+var express = require('express');
+var app = express();
+
+// Init DreemGL setup
+require = require('dreemgl')
+
+// These options will be used when building composition servers, use dummy bus for simplicity
+define.$compositionOptions = {
+	busclass: '$system/rpc/dummybusserver',
+	clientdefines: { busclass:"$system/rpc/dummybusclient" }
+}
+
+// The ExpressAdapter helps configure DreemGl to work with express easily
+var ExpressAdapter = require('$system/adapters/expressadapter')()
+
+// Configure serving the static JS files that DreemGL will ask for
+ExpressAdapter.mountStatic(express, app)
+
+// Configure requests to be handled by the ExpressAdapter.requestHandler, in this case everything:
+app.get('/*', ExpressAdapter.requestHandler);
+
+// Start the server listening on port 3000
+app.listen(3000, function() { console.log("Started express server on port 3000") });
+
+```
+
+A more complex example using the firebase bus can be found in the DreemGL repository at `./examples/express+firebase.js`
+
+### Working with DreemGL Repository
+
+For more complex usage, it's often easier to work outside of the NPM with the full DreemGL stack from the github repository.  Once you have downloaded the source from the [master branch of dreemproject in Github](https://github.com/dreemproject/dreemgl), you can start DreemGL by typing: 
 
 ```node server.js```
 
@@ -25,6 +74,7 @@ To try livecoding a shader open this:
 [./test/rendertest.js](/test/rendertest.js) in your editor and start typing away and saving, reload is live.
 
 ## Documentation
+
 DreemGL provides an [API
 reference](http://docs.dreemproject.org/docs/api/index.html#!/api), a [Developer's Guide](http://docs.dreemproject.org/docs/api/index.html#!/guide/devguide), and
 guides for all components, including the visual layout toolkit, the
@@ -35,15 +85,24 @@ DreemGL can generate documentation automatically from all the code in its system
 
 Instructions for adding documentation and rebuilding the documentation can be found in the [Developer's Guide](http://docs.dreemproject.org/docs/api/index.html#!/guide/devguide).
 
+##Talk to Us
+
+Have a question? Comment? Something cool to show people? We're all on Slack. Join us!
+[![Slack Status](https://dreemproject.herokuapp.com/badge.svg)](https://dreemproject.herokuapp.com/)
+
 ## Contributing to DreemGL
+
 Like DreemGL? Get involved. Find more information in the file ["Contributing.md"](https://github.com/dreemproject/dreemgl/blob/master/CONTRIBUTING.md), also in this directory. 
 
 ### Filing Feature Requests and Bug Reports
+
 DreemGl is an open-source project and uses [JIRA](https://dreem2.atlassian.net/secure/Dashboard.jspa) to track feature requests and bug reports. We encourage you to post your reports here.
 
 ## License
+
 This software is licensed under the  Apache License, Version 2.0. You will find the terms in the file named
 ["LICENSE.md"](https://github.com/dreemproject/dreemgl/blob/master/LICENSE.md), also in this directory.
 
 ## Attribution
+
 DreemGL is produced in collaboration between [Teeming Society](http://teem.nu) and [Samsung Electronics](http://www.samsung.com/us/), sponsored by Samsung Electronics and others.

apps/docs/example.js

@@ -16,14 +16,15 @@ define.class('$server/composition', function(require, $ui$, screen, view, label,
 					padding:10,
 					flex:1,
 					flexdirection:'column',
-					classconstr: Config({type:Function, persist:true}),
+					classconstr: Config({type:Function, persist:false}),
 					init:function() {
 						this.screen.locationhash = function(event){
 							if (event.value.path) {
 								require
 									.async(event.value.path)
 									.then(function(module){
-										this.classconstr = module;
+										this._classconstr = module;
+										this.emit('classconstr', module)
 									}.bind(this))
 							}
 						}.bind(this)
@@ -35,6 +36,7 @@ define.class('$server/composition', function(require, $ui$, screen, view, label,
 						var parseDoc = require('$system/parse/jsdocgen').parseDoc;
 
 						var class_doc = parseDoc(this.classconstr);
+
 						if (class_doc && class_doc.examples) {
 							for (var i = 0;i< class_doc.examples.length;i++){
 								var example = class_doc.examples[i];

apps/flowgraph/connection.js

@@ -166,7 +166,7 @@ define.class('$ui/view', function(require, $ui$, view, icon, treeview, cadgrid,
 	}
 
 	this.frompos= vec2(0,0);
-	this.topos= vec2(0,100);
+	this.topos= vec2(0,0);
 	this.bgcolor = NaN
 
 	define.class(this, "connectionshader", this.Shader,function($ui$, view){

apps/flowgraph/flowgraph.js

@@ -464,15 +464,13 @@ define.class('$ui/view', function(require,
 	this.updateConnector = function(ev) {
 		var connectingconnection = this.find("openconnector")
 		if (connectingconnection && connectingconnection.ready) {
+		  connectingconnection.visible = true
 		  if (connectingconnection.to === "undefined") {
 			  connectingconnection.topos = this.find("centralconstructiongrid").globalToLocal(ev.position);
-			  connectingconnection.visible = true
-			  connectingconnection.redraw();
 		  } else if (connectingconnection.from === "undefined") {
 			  connectingconnection.frompos = this.find("centralconstructiongrid").globalToLocal(ev.position);
-			  connectingconnection.visible = true
-			  connectingconnection.redraw();
 		  }
+		  connectingconnection.redraw();
 		}
 	}
 
@@ -578,6 +576,7 @@ define.class('$ui/view', function(require,
 		var connectingconnection = this.find("openconnector")
 		if (connectingconnection) {
 			connectingconnection.ready = true;
+			connectingconnection.visible = true;
 			connectingconnection.from = this.newconnection.sourceblock
 			connectingconnection.fromoutput = this.newconnection.sourceoutput
 			connectingconnection.to = this.newconnection.targetblock
@@ -977,7 +976,7 @@ define.class('$ui/view', function(require,
 							return this.renderConnections()
 						}.bind(this)}
 						)
-						,view({bgcolor: NaN}, connection({name: "openconnector", hasball: false, visible: false}))
+						,view({bgcolor: NaN}, connection({name: "openconnector", hasball: false}))
 						,view({name: "blocklayer", bgcolor: NaN,  dataset: this.sourceset, render: function() {
 							return this.renderBlocks()
 						}.bind(this)})

apps/flowgraph/flowtest1/index.js

@@ -1,22 +1,9 @@
 define.class("$server/composition",function($server$,service,$ui$,screen,view,$flow$services$,map,webrequest,$flow$controllers$,xypad,knob,keyboard,dpad,$flow$displays$,labtext){
-
-
-this.render=function(){
-
-
-return [
-xypad({name:"xypad0",flowdata:{x:25,y:133}}),
-labtext({name:"labtext0",flowdata:{x:326,y:24},vec2:wire("this.rpc.xypad0.pointerpos"),string:wire("this.rpc.dpad0.value")}),
-dpad({name:"dpad0",flowdata:{x:21,y:23}})
-]
-
-
-
-
-	}
-
-
-
-
-	}
-)
+  this.render=function(){
+    return [
+      xypad({name:"xypad0",flowdata:{x:77,y:430,screen:true}}),
+      labtext({name:"labtext0",flowdata:{x:347,y:224,screen:true},string:wire("this.rpc.dpad0.value"),vec2:wire("this.rpc.xypad0.pointerpos")}),
+      dpad({name:"dpad0",flowdata:{x:21,y:23,screen:true}})
+    ]
+  }
+})

apps/fontuploader.js

@@ -0,0 +1,161 @@
+/* DreemGL is a collaboration between Teeming Society & Samsung Electronics, sponsored by Samsung and others.
+ Copyright 2015-2016 Teeming Society. Licensed under the Apache License, Version 2.0 (the "License"); You may not use this file except in compliance with the License.
+ You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and limitations under the License.*/
+
+define.class('$server/composition', function(require, $ui$, screen, view, $server$, fileio){
+
+	var myview = define.class(view, function(){
+
+		this.Rect = function(){
+			this.margin = [0,0,1,0],
+				this.fgcolor = vec4('orange')
+		}
+
+		// make our sdf font shader
+		define.class(this, 'Sdfgen', '$shaders/fontarcshader', function(){
+			this.font = require('$resources/fonts/fontawesome.glf')
+			this.compute_position = function(){
+				// we want to compute a measure of scale relative to the actual pixels
+				var matrix = view.totalmatrix  * state.viewmatrix
+				var pos = mix(
+					vec2(
+						canvas.minx,
+						canvas.maxy
+					),
+					vec2(
+						canvas.maxx,
+						canvas.miny
+					),
+					mesh.xy
+				)
+
+				var pos1 = vec4(pos.x, pos.y, 0., 1.) * matrix
+				pos1.w += polygonoffset;
+				return pos1
+			}
+
+			this.color = function(){
+				var nominal_size = (ivec2(mod(glyph.zw, 256.)) + 2) / 4
+				var atlas_pos = ivec2(glyph.zw) / 256
+				var pos = glyph.xy
+
+				var dist = arc_sdf(glyph.xy, nominal_size, atlas_pos) //+ noise.noise3d(vec3(glyph.x, glyph.y, time))*0.6
+
+				return sdf_encode(dist)
+			}
+
+			this.canvasverbs = {
+				drawUnicode: function(unicode, minx, miny, maxx, maxy){
+					this.GETBUFFER(1)
+					this.ARGSTOCANVAS()
+					var info = (this.font || this.classNAME.font).glyphs[unicode]
+					var texx = ((info.atlas_x<<6) | info.nominal_w)
+					var texy = ((info.atlas_y<<6) | info.nominal_h)
+					this.CANVASTOBUFFER({
+						minx:minx,
+						maxx:maxx,
+						miny:miny,
+						maxy:maxy,
+						unicode:unicode,
+						texminx:texx,
+						texminy:texy
+					})
+				}
+			}
+		})
+
+		this.draw = function(){
+			var c = this.canvas
+
+			var tgt = c.pushTarget('surface', c.RGBA, 2048, 2048)
+
+			c.clear(0,0,0,1.)
+
+			var width = 2048
+			var height = 2048
+			var px = 0
+			var py = 0
+			var pad = 4
+			var xsize = 64
+			var ysize = 64
+			var font = c.classSdfgen.font
+			var glyphs = font.glyphs
+			var xymap = {}
+
+			for(var unicode in glyphs){
+				xymap[unicode] = {x:px, y:py}
+				if(unicode == 10 || unicode == 32 || unicode == 9)continue
+				c.drawUnicodeSdfgen(unicode, px, py, px + xsize, py + ysize)
+				px += xsize + pad
+				if(px+xsize >= width) px = 0, py += ysize + pad
+			}
+
+			var sdf_pixel_width = 2048
+			var sdf_pixel_height = int.nextHighestPowerOfTwo(py)
+
+			var header = 12 + font.count * 10 * 4
+			var body = sdf_pixel_width * sdf_pixel_height * 1
+
+			var alldata = new Uint8Array(header + body)
+			var vuint32 = new Uint32Array(alldata.buffer)
+			var vfloat32 = new Float32Array(alldata.buffer)
+			var vuint16 = new Uint16Array(alldata.buffer)
+
+			var off = 0
+			vuint32[off++] = 0x02F01175
+			vuint16[2] = sdf_pixel_width
+			vuint16[3] = sdf_pixel_height
+			off++
+			vuint32[off++] = font.count
+			var glyphs = font.glyphs
+			var normwidth = xsize / sdf_pixel_width
+			var normheight = ysize / sdf_pixel_height
+			for(var unicode in glyphs){
+				var info = glyphs[unicode]
+				var map = xymap[unicode]
+
+				vuint32[off++] = unicode
+				vfloat32[off++] = info.min_x
+				vfloat32[off++] = info.min_y
+				vfloat32[off++] = info.max_x
+				vfloat32[off++] = info.max_y
+				vfloat32[off++] = info.advance
+				vfloat32[off++] = map.x / sdf_pixel_width
+				vfloat32[off++] = map.y / sdf_pixel_height + normheight
+				vfloat32[off++] = map.x / sdf_pixel_width + normwidth
+				vfloat32[off++] = map.y / sdf_pixel_height
+			}
+
+			// lets send the data over
+			//var storepixels = alldata.subarray(header)
+			var pixoffset = header
+			var pixuint8 = new Uint8Array(alldata.buffer)
+			//var myvuint32 = new Uint32Array(alldata.buffer)
+
+			define.parseGLF(alldata.buffer)
+			//console.log(myvuint32[0] === 0x02F01175)
+			c.readPixels(0, 0, sdf_pixel_width, sdf_pixel_height).then(function(result){
+				for(var y = 0; y < sdf_pixel_height; y++){
+					for(var x = 0; x < sdf_pixel_width; x++){
+						pixuint8[pixoffset + y * sdf_pixel_width + x] = result[y * sdf_pixel_width * 4 + x * 4]
+					}
+				}
+				this.rpc.fileio.writefile("$resources/fonts/fontawesome_baked.glf",alldata).then(function(){
+					console.log('file written')
+				})
+			}.bind(this))
+
+			c.popTarget()
+			c.drawImage(tgt)
+		}
+	})
+
+	this.render = function(){ return [
+		fileio({name:'fileio'}),
+		screen({name:'default', bgcolor:'orange',rect:{color:function(){return 'blue'}},clearcolor:vec4('purple')},
+			myview({flex:1, bgcolor:'orange'})
+		)
+	]}
+})