dany/antd-web-apps
1
0
Fork 0
mirror of https://github.com/lxsang/antd-web-apps synced 2025-07-27 19:19:46 +02:00
Code Issues Projects Releases Wiki Activity

performance improvement & add more keyboard

Browse Source
This commit is contained in:
lxsang
2018-09-22 01:17:45 +02:00
parent ec0a87ef5a
commit 4709c5c3ed
6 changed files with 424 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
apps/assets/coffee/WVNC.coffee
View File

@ -6,8 +6,7 @@ class WVNC extends window.classes.BaseObject
@uri = @args[0] if @args and @args.length > 0
@canvas = undefined
@canvas = ($ @args[1])[0] if @args and @args.length > 1
@lastPose = { x: 0, y: 0 }
@scale = 1.0
@scale = 0.8
@decoder = new Worker('/assets/scripts/decoder.js')
me = @
@mouseMask = 0
@ -39,7 +38,7 @@ class WVNC extends window.classes.BaseObject
me.sendPointEvent p.x, p.y, me.mouseMask
return unless me.canvas
#($ me.canvas).css "cursor", "none"
($ me.canvas).css "cursor", "none"
($ me.canvas).contextmenu (e) ->
e.preventDefault()
return false
@ -58,18 +57,50 @@ class WVNC extends window.classes.BaseObject
sendMouseLocation e
#e.preventDefault()
me.canvas.onkeydown = me.canvas.onkeyup = me.canvas.onkeypress = (e) ->
me.canvas.onkeydown = me.canvas.onkeyup = (e) ->
# get the key code
keycode = e.keyCode
if ((keycode > 47 and keycode < 58) or (keycode > 64 and keycode < 91) or (keycode > 95 and keycode < 112) or (keycode > 185 and keycode < 193) or (keycode > 218 && keycode < 223))
code = e.key.charCodeAt(0)
else
code = keycode
#console.log e
switch keycode
when 8 then code = 0xFF08 #back space
when 9 then code = 0xff89 #0xFF09 # tab ?
when 13 then code = 0xFF0D # return
when 27 then code = 0xFF1B # esc
when 46 then code = 0xFFFF # delete to verify
when 38 then code = 0xFF52 # up
when 40 then code = 0xFF54 # down
when 37 then code = 0xFF51 # left
when 39 then code = 0xFF53 # right
when 91 then code = 0xFFE7 # meta left
when 93 then code = 0xFFE8 # meta right
when 16 then code = 0xFFE1 # shift left
when 17 then code = 0xFFE3 # ctrl left
when 18 then code = 0xFFE9 # alt left
when 20 then code = 0xFFE5 # capslock
when 113 then code = 0xFFBF # f2
when 112 then code = 0xFFBE # f1
when 114 then code = 0xFFC0 # f3
when 115 then code = 0xFFC1 # f4
when 116 then code = 0xFFC2 # f5
when 117 then code = 0xFFC3 # f6
when 118 then code = 0xFFC4 # f7
when 119 then code = 0xFFC5 # f8
when 120 then code = 0xFFC6 # f9
when 121 then code = 0xFFC7 # f10
when 122 then code = 0xFFC8 # f11
when 123 then code = 0xFFC9 # f12
else
code = e.key.charCodeAt(0) #if not e.ctrlKey and not e.altKey
#if ((keycode > 47 and keycode < 58) or (keycode > 64 and keycode < 91) or (keycode > 95 and keycode < 112) or (keycode > 185 and keycode < 193) or (keycode > 218 && keycode < 223))
# code = e.key.charCodeAt(0)
#else
# code = keycode
e.preventDefault()
return unless code
if e.type is "keydown"
me.sendKeyEvent code, 1
else if e.type is "keyup"
me.sendKeyEvent code, 0
e.preventDefault()
# mouse wheel event
hamster = Hamster @canvas
@ -87,19 +118,21 @@ class WVNC extends window.classes.BaseObject
@depth = d
@canvas.width = w
@canvas.height = h
@resolution =
@engine =
w: w,
h: h,
depth: @depth
@decoder.postMessage @resolution
depth: @depth,
wasm: true
@decoder.postMessage @engine
@setScale @scale
process: (msg) ->
if not @socket
return
data = new Uint8Array msg.buffer
data = new Uint8Array msg.pixels
#w = @buffer.width * @scale
#h = @buffer.height * @scale
ctx = @canvas.getContext "2d"
ctx = @canvas.getContext "2d", { alpha: false }
imgData = ctx.createImageData msg.w, msg.h
imgData.data.set data
ctx.putImageData imgData, msg.x, msg.y
@ -107,7 +140,8 @@ class WVNC extends window.classes.BaseObject
setScale: (n) ->
@scale = n
@draw()
@canvas.style.transformOrigin = '0 0'
@canvas.style.transform = 'scale(' + n + ')'
openSession: () ->
@ -128,7 +162,7 @@ class WVNC extends window.classes.BaseObject
initConnection: () ->
vncserver = "192.168.1.20:5901"
data = new Uint8Array vncserver.length + 5
data = new Uint8Array vncserver.length + 3
data[0] = 32 # bbp
###
flag:
@ -137,14 +171,11 @@ class WVNC extends window.classes.BaseObject
2: raw data compressed by zlib
3: jpeg data compressed by zlib
###
data[1] = 3
data[2] = 50 # jpeg quality
data[1] = 1
data[2] = 40 # jpeg quality
## rate in milisecond
rate = 30
data[3] = rate & 0xFF
data[4] = (rate >> 8) & 0xFF
data.set (new TextEncoder()).encode(vncserver), 5
data.set (new TextEncoder()).encode(vncserver), 3
@socket.send(@buildCommand 0x01, data)
sendPointEvent: (x, y, mask) ->
@ -155,14 +186,14 @@ class WVNC extends window.classes.BaseObject
data[2] = y & 0xFF
data[3] = y >> 8
data[4] = mask
#console.log x,y
@socket.send( @buildCommand 0x05, data )
sendKeyEvent: (code, v) ->
return unless @socket
data = new Uint8Array 2
data[0] = code
data[1] = v
data = new Uint8Array 3
data[0] = code & 0xFF
data[1] = code >> 8
data[2] = v
console.log code, v
@socket.send( @buildCommand 0x06, data )

84
apps/assets/coffee/decoder.1.coffee
View File

@ -1,84 +0,0 @@
#zlib library
importScripts('pako.min.js')
# jpeg library
importScripts('jpeg-decoder.js')
resolution = undefined
pixelValue = (value, depth) ->
pixel =
r: 255
g: 255
b: 255
a: 255
#console.log("len is" + arr.length)
if depth is 24 or depth is 32
pixel.r = value & 0xFF
pixel.g = (value >> 8) & 0xFF
pixel.b = (value >> 16) & 0xFF
else if depth is 16
pixel.r = (value & 0x1F) * (255 / 31)
pixel.g = ((value >> 5) & 0x3F) * (255 / 63)
pixel.b = ((value >> 11) & 0x1F) * (255 / 31)
#console.log pixel
return pixel
getImageData = (d) ->
return d.pixels if resolution.depth is 32
step = resolution.depth / 8
npixels = d.pixels.length / step
data = new Uint8ClampedArray d.w * d.h * 4
for i in [0..npixels - 1]
value = 0
value = value | d.pixels[i * step + j] << (j * 8) for j in [0..step - 1]
pixel = pixelValue value, resolution.depth
data[i * 4] = pixel.r
data[i * 4 + 1] = pixel.g
data[i * 4 + 2] = pixel.b
data[i * 4 + 3] = pixel.a
return data
decodeRaw = (d) ->
d.pixels = getImageData d
return d
decodeJPEG = (d) ->
raw = decode d.pixels, { useTArray: true, colorTransform: true }
d.pixels = raw.data
return d
###
blob = new Blob [d.pixels], { type: "image/jpeg" }
reader = new FileReader()
reader.onloadend = () ->
d.pixels = reader.result
postMessage d
reader.readAsDataURL blob
###
update = (msg) ->
d = {}
data = new Uint8Array msg
d.x = data[1] | (data[2]<<8)
d.y = data[3] | (data[4]<<8)
d.w = data[5] | (data[6]<<8)
d.h = data[7] | (data[8]<<8)
d.flag = data[9]
d.pixels = data.subarray 10
# the zlib is slower than expected
switch d.flag
when 0x0 # raw data
raw = decodeRaw d
when 0x1 # jpeg data
raw = decodeJPEG(d)
when 0x2 # raw compress in zlib format
d.pixels = pako.inflate(d.pixels)
raw = decodeRaw d
when 0x3 # jpeg compress in zlib format
d.pixels = pako.inflate(d.pixels)
raw = decodeJPEG(d)
return unless raw
raw.pixels = raw.pixels.buffer
# fill the rectangle
postMessage raw, [raw.pixels]
onmessage = (e) ->
return resolution = e.data if e.data.depth
update e.data

143
apps/assets/coffee/decoder.coffee
View File

@ -1,7 +1,11 @@
#zlib library
importScripts('wvnc_asm.js')
#zlib library
importScripts('pako.min.js')
# jpeg library
importScripts('jpeg-decoder.js')
api = {}
resolution = undefined
engine = undefined
#frame_buffer = undefined
Module.onRuntimeInitialized = () ->
api =
@ -12,37 +16,118 @@ Module.onRuntimeInitialized = () ->
decodeBuffer: Module.cwrap("decode",'number', ['number', 'number', 'number','number'] )
}
pixelValue = (value, depth) ->
pixel =
r: 255
g: 255
b: 255
a: 255
#console.log("len is" + arr.length)
if depth is 24 or depth is 32
pixel.r = value & 0xFF
pixel.g = (value >> 8) & 0xFF
pixel.b = (value >> 16) & 0xFF
else if depth is 16
pixel.r = (value & 0x1F) * (255 / 31)
pixel.g = ((value >> 5) & 0x3F) * (255 / 63)
pixel.b = ((value >> 11) & 0x1F) * (255 / 31)
#console.log pixel
return pixel
getImageData = (d) ->
return d.pixels if engine.depth is 32
step = engine.depth / 8
npixels = d.pixels.length / step
data = new Uint8ClampedArray d.w * d.h * 4
for i in [0..npixels - 1]
value = 0
value = value | d.pixels[i * step + j] << (j * 8) for j in [0..step - 1]
pixel = pixelValue value, engine.depth
data[i * 4] = pixel.r
data[i * 4 + 1] = pixel.g
data[i * 4 + 2] = pixel.b
data[i * 4 + 3] = pixel.a
return data
decodeRaw = (d) ->
d.pixels = getImageData d
return d
decodeJPEG = (d) ->
raw = decode d.pixels, { useTArray: true, colorTransform: true }
d.pixels = raw.data
return d
###
blob = new Blob [d.pixels], { type: "image/jpeg" }
reader = new FileReader()
reader.onloadend = () ->
d.pixels = reader.result
postMessage d
reader.readAsDataURL blob
###
update = (msg) ->
d = {}
#ecconho "native"
data = new Uint8Array msg
d.x = data[1] | (data[2]<<8)
d.y = data[3] | (data[4]<<8)
d.w = data[5] | (data[6]<<8)
d.h = data[7] | (data[8]<<8)
d.flag = data[9]
d.pixels = data.subarray 10
# the zlib is slower than expected
switch d.flag
when 0x0 # raw data
raw = decodeRaw d
when 0x1 # jpeg data
raw = decodeJPEG(d)
when 0x2 # raw compress in zlib format
d.pixels = pako.inflate(d.pixels)
raw = decodeRaw d
when 0x3 # jpeg compress in zlib format
d.pixels = pako.inflate(d.pixels)
raw = decodeJPEG(d)
return unless raw
raw.pixels = raw.pixels.buffer
# fill the rectangle
postMessage raw, [raw.pixels]
wasm_update = (msg) ->
datain = new Uint8Array msg
x = datain[1] | (datain[2] << 8)
y = datain[3] | (datain[4] << 8)
w = datain[5] | (datain[6] << 8)
h = datain[7] | (datain[8] << 8)
flag = datain[9]
p = api.createBuffer datain.length
Module.HEAP8.set datain, p
size = w * h * 4
po = api.decodeBuffer p, datain.length, engine.depth, size
#api.updateBuffer frame_buffer, p, datain.length, engine.w, engine.h, engine.depth
# create buffer array and send back to main
dataout = new Uint8Array Module.HEAP8.buffer, po, size
# console.log dataout
msg = {}
tmp = new Uint8Array size
tmp.set dataout, 0
msg.pixels = tmp.buffer
msg.x = x
msg.y = y
msg.w = w
msg.h = h
postMessage msg, [msg.pixels]
api.destroyBuffer p
if flag isnt 0x0 or engine.depth isnt 32
api.destroyBuffer po
onmessage = (e) ->
if e.data.depth
resolution = e.data
engine = e.data
#api.destroyBuffer frame_buffer if frame_buffer
#frame_buffer = api.createBuffer resolution.w * resolution.h * 4
#frame_buffer = api.createBuffer engine.w * engine.h * 4
#else if e.data.cleanup
# api.destroyBuffer frame_buffer if frame_buffer
else
datain = new Uint8Array e.data
x = datain[1] | (datain[2] << 8)
y = datain[3] | (datain[4] << 8)
w = datain[5] | (datain[6] << 8)
h = datain[7] | (datain[8] << 8)
flag = datain[9]
p = api.createBuffer datain.length
Module.HEAP8.set datain, p
size = w * h * 4
po = api.decodeBuffer p, datain.length, resolution.depth, size
#api.updateBuffer frame_buffer, p, datain.length, resolution.w, resolution.h, resolution.depth
# create buffer array and send back to main
dataout = new Uint8Array Module.HEAP8.buffer, po, size
# console.log dataout
msg = {}
tmp = new Uint8Array size
tmp.set dataout, 0
msg.buffer = tmp.buffer
msg.x = x
msg.y = y
msg.w = w
msg.h = h
postMessage msg, [msg.buffer]
api.destroyBuffer p
if flag isnt 0x0 or resolution.depth isnt 32
api.destroyBuffer po
return wasm_update e.data if engine.wasm
update e.data