add object visualzation to playground

LuaPlayground/assets/scheme.html

@@ -1,10 +1,12 @@
-<afx-app-window apptitle="Lua Playground" width="500" height="450" data-id="LuaPlayground">
+<afx-app-window apptitle="Lua Playground" width="500" height="400" data-id="LuaPlayground">
+    <afx-hbox >
+        <div data-id="editorea" data-width="250"></div>
+        <afx-resizer data-width="3"></afx-resizer>
         <afx-vbox>
-        <div data-id="editorea"></div>
-        <afx-resizer data-height="1"></afx-resizer>
             <afx-hbox data-height="20" data-id="bottom-vbox">
                 <afx-button data-id = "log-clear" data-width="25" iconclass="fa fa-trash"></afx-button>
             </afx-hbox>
         <div data-id="output"></div>
         </afx-vbox>
+    </afx-hbox>
 </afx-app-window>

LuaPlayground/build/debug/main.css

@@ -8,7 +8,7 @@ afx-app-window[data-id="LuaPlayground"] div[data-id="output"] p{
 afx-app-window[data-id="LuaPlayground"] div[data-id="output"]{
     background-color: #2f3129;
     padding: 10px;
-    padding-left: 40px;
+    /*padding-left: 40px;*/
     color:white;
     overflow: auto;
 }
@@ -26,3 +26,8 @@ afx-app-window[data-id="LuaPlayground"] afx-hbox[data-id="bottom-vbox"] afx-butt
     border:0;
     border-radius: 0;
 }
+
+afx-app-window[data-id="LuaPlayground"] canvas.viewer {
+    background-color: white;
+    display: inline;
+}

LuaPlayground/build/debug/scheme.html

@@ -1,10 +1,12 @@
-<afx-app-window apptitle="Lua Playground" width="500" height="450" data-id="LuaPlayground">
+<afx-app-window apptitle="Lua Playground" width="500" height="400" data-id="LuaPlayground">
+    <afx-hbox >
+        <div data-id="editorea" data-width="250"></div>
+        <afx-resizer data-width="3"></afx-resizer>
         <afx-vbox>
-        <div data-id="editorea"></div>
-        <afx-resizer data-height="1"></afx-resizer>
             <afx-hbox data-height="20" data-id="bottom-vbox">
                 <afx-button data-id = "log-clear" data-width="25" iconclass="fa fa-trash"></afx-button>
             </afx-hbox>
         <div data-id="output"></div>
         </afx-vbox>
+    </afx-hbox>
 </afx-app-window>

LuaPlayground/coffees/main.coffee

@@ -1,3 +1,78 @@
+class DataViewer
+    constructor: (data) ->
+        @target = data
+        @el =  ($ "<canvas>").attr("class", "viewer")[0]
+        @offset = 5
+        @getBound()
+        @prepare()
+        @render()
+    
+    canvasPoint: (v) ->
+        return new paper.Point(v[0] / @target.resolution + @base.x, v[1] / @target.resolution + @base.y)
+    
+    getBound: () ->
+        peak_tl = { x:0, y:0}
+        peak_rb = { x:0, y:0}
+        start = null
+        for v in @target.data
+            x = v[0] / @target.resolution
+            y = v[1] / @target.resolution
+            peak_tl.x = x if x < peak_tl.x
+            peak_tl.y = y if y < peak_tl.y
+            peak_rb.x = x if x > peak_rb.x
+            peak_rb.y = y if y > peak_rb.y
+        
+        @bound = [ peak_tl, peak_rb ]
+        @base = {x: 0 - @bound[0].x + @offset, y: 0- @bound[0].y + @offset}
+        @width = peak_rb.x - peak_tl.x + 2*@offset
+        @height = peak_rb.y - peak_tl.y + 2*@offset
+    prepare: () ->
+        ctx = @el.getContext "2d"
+        ctx.translate(@base.x, @base.y)
+        ctx.canvas.width = @width
+        ctx.canvas.height = @height
+        paper.setup @el
+        # draw the base
+        # x axis
+        path = new paper.Path()
+        path.strokeColor = '#BBBBBB'
+        start = @canvasPoint [@bound[0].x, 0]
+        end = @canvasPoint [@bound[1].x, 0]
+        path.moveTo(start)
+        path.lineTo(end)
+        # y axis
+        path = new paper.Path()
+        path.strokeColor = '#BBBBBB'
+        start = @canvasPoint [0, @bound[0].y]
+        end = @canvasPoint [0, @bound[1].y]
+        path.moveTo(start)
+        path.lineTo(end)
+        
+    render:() ->
+        # sub class responsibility
+
+class PointCloudViewer extends DataViewer
+    constructor: (data) ->
+        super data
+    
+     # point clound render
+    render: () ->
+        path = new paper.Path()
+        path.strokeColor = 'black'
+        start = null
+        for v in @target.data
+            point = @canvasPoint v
+            if not start
+                start = point
+                path.moveTo(start)
+            else
+                path.lineTo point
+        paper.view.draw()
+
+    
+    
+
+
 class LuaPlayground extends this.OS.GUI.BaseApplication
     constructor: ( args ) ->
         super "LuaPlayground", args
@@ -49,11 +124,31 @@ class LuaPlayground extends this.OS.GUI.BaseApplication
             #send data to server
             me.socket.send( JSON.stringify { code: value } )
 
-        @socket.onmessage =  (e) -> me.log "INFO", e.data if  e.data
+        @socket.onmessage =  (e) ->
+            return unless e.data
+            try 
+                obj = JSON.parse e.data
+                me.log "INFO", e.data unless me.view obj
+            catch err
+                me.log "INFO", e.data
+                console.log err
+                
         @socket.onclose = () ->
             me.socket = null
             console.log "socket closed"
         
+    view: (obj) ->
+        return false unless obj and obj.type and  @[obj.type]
+        el = @[obj.type](obj).el
+        p = ($ "<p>").attr("class", "info")[0]
+        $(p).append el
+        ($ @output).append p
+        ($ @output).scrollTop @output.scrollHeight
+        return true
+    
+    pc: (data) ->
+        return  new PointCloudViewer(data)
+    
     cleanup: (e)->
         @socket.close() if @socket
         

LuaPlayground/css/main.css

@@ -7,7 +7,7 @@ afx-app-window[data-id="LuaPlayground"] div[data-id="output"] p{
 afx-app-window[data-id="LuaPlayground"] div[data-id="output"]{
     background-color: #2f3129;
     padding: 10px;
-    padding-left: 40px;
+    /*padding-left: 40px;*/
     color:white;
     overflow: auto;
 }
@@ -25,3 +25,8 @@ afx-app-window[data-id="LuaPlayground"] afx-hbox[data-id="bottom-vbox"] afx-butt
     border:0;
     border-radius: 0;
 }
+
+afx-app-window[data-id="LuaPlayground"] canvas.viewer {
+    background-color: white;
+    display: inline;
+}

RemoteDesktop/build/debug/main.js

@@ -181,7 +181,7 @@
       this.container = this.find("container");
       this.client = new WVNC({
         element: me.canvas,
-        ws: 'wss://lxsang.me/wvnc',
+        ws: 'wss://localhost:9192/wvnc',
         worker: `${me._api.handler.get}/${(me.meta().path)}/decoder.js`
       });
       this.client.onerror = function(m) {

RemoteDesktop/coffees/main.coffee

@@ -85,7 +85,7 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
         @container = @find "container"
         @client = new WVNC { 
             element: me.canvas,
-            ws: 'wss://lxsang.me/wvnc',
+            ws: 'wss://localhost:9192/wvnc',
             worker: "#{me._api.handler.get}/#{me.meta().path}/decoder.js"   
         }
         @client.onerror = (m) ->

TinyEditor/build/debug/README.md

@@ -1,5 +1,5 @@
 # TinyEditor
-This is an example project, generated by AntOS Development Kit
+This is the example project for the tutorial: [https://blog.lxsang.me/post/id/20](https://blog.lxsang.me/post/id/20)
 
 ## Howto