add object visualzation to playground

This commit is contained in:
lxsang 2019-05-06 16:08:46 +02:00
parent d04fc7a2af
commit ad1019391a
11 changed files with 453 additions and 24 deletions

View File

@ -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> <afx-vbox>
<div data-id="editorea"></div>
<afx-resizer data-height="1"></afx-resizer>
<afx-hbox data-height="20" data-id="bottom-vbox"> <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-button data-id = "log-clear" data-width="25" iconclass="fa fa-trash"></afx-button>
</afx-hbox> </afx-hbox>
<div data-id="output"></div> <div data-id="output"></div>
</afx-vbox> </afx-vbox>
</afx-hbox>
</afx-app-window> </afx-app-window>

View File

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

File diff suppressed because one or more lines are too long

View File

@ -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> <afx-vbox>
<div data-id="editorea"></div>
<afx-resizer data-height="1"></afx-resizer>
<afx-hbox data-height="20" data-id="bottom-vbox"> <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-button data-id = "log-clear" data-width="25" iconclass="fa fa-trash"></afx-button>
</afx-hbox> </afx-hbox>
<div data-id="output"></div> <div data-id="output"></div>
</afx-vbox> </afx-vbox>
</afx-hbox>
</afx-app-window> </afx-app-window>

View File

@ -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 class LuaPlayground extends this.OS.GUI.BaseApplication
constructor: ( args ) -> constructor: ( args ) ->
super "LuaPlayground", args super "LuaPlayground", args
@ -49,11 +124,31 @@ class LuaPlayground extends this.OS.GUI.BaseApplication
#send data to server #send data to server
me.socket.send( JSON.stringify { code: value } ) 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 = () -> @socket.onclose = () ->
me.socket = null me.socket = null
console.log "socket closed" 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)-> cleanup: (e)->
@socket.close() if @socket @socket.close() if @socket

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

@ -1,5 +1,5 @@
# TinyEditor # 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 ## Howto