mirror of
https://github.com/lxsang/antd-web-apps
synced 2025-07-27 02:59:47 +02:00
add remote building script support
This commit is contained in:
lxsang
@ -1,257 +0,0 @@
|
||||
class WVNC extends window.classes.BaseObject
|
||||
constructor: (@args) ->
|
||||
super "WVNC"
|
||||
@socket = undefined
|
||||
@uri = undefined
|
||||
@uri = @args[0] if @args and @args.length > 0
|
||||
@canvas = undefined
|
||||
@canvas = ($ @args[1])[0] if @args and @args.length > 1
|
||||
@scale = 0.8
|
||||
@decoder = new Worker('/assets/scripts/decoder.js')
|
||||
me = @
|
||||
@mouseMask = 0
|
||||
@decoder.onmessage = (e) ->
|
||||
me.process e.data
|
||||
init: () ->
|
||||
me = @
|
||||
@ready()
|
||||
.then () ->
|
||||
$("#stop").click (e) -> me.socket.close() if me.socket
|
||||
$("#connect").click (e) ->
|
||||
me.openSession()
|
||||
me.initInputEvent()
|
||||
.catch (m, s) ->
|
||||
console.error(m, s)
|
||||
|
||||
initInputEvent: () ->
|
||||
me = @
|
||||
|
||||
getMousePos = (e) ->
|
||||
rect = me.canvas.getBoundingClientRect()
|
||||
pos=
|
||||
x: Math.floor((e.clientX - rect.left) / me.scale)
|
||||
y: Math.floor((e.clientY - rect.top) / me.scale)
|
||||
return pos
|
||||
|
||||
sendMouseLocation = (e) ->
|
||||
p = getMousePos e
|
||||
me.sendPointEvent p.x, p.y, me.mouseMask
|
||||
|
||||
return unless me.canvas
|
||||
($ me.canvas).css "cursor", "none"
|
||||
($ me.canvas).contextmenu (e) ->
|
||||
e.preventDefault()
|
||||
return false
|
||||
|
||||
($ me.canvas).mousemove (e) -> sendMouseLocation e
|
||||
|
||||
($ me.canvas).mousedown (e) ->
|
||||
state = 1 << e.button
|
||||
me.mouseMask = me.mouseMask | state
|
||||
sendMouseLocation e
|
||||
#e.preventDefault()
|
||||
|
||||
($ me.canvas).mouseup (e) ->
|
||||
state = 1 << e.button
|
||||
me.mouseMask = me.mouseMask & (~state)
|
||||
sendMouseLocation e
|
||||
#e.preventDefault()
|
||||
|
||||
me.canvas.onkeydown = me.canvas.onkeyup = (e) ->
|
||||
# get the key code
|
||||
keycode = e.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
|
||||
|
||||
# mouse wheel event
|
||||
hamster = Hamster @canvas
|
||||
hamster.wheel (event, delta, deltaX, deltaY) ->
|
||||
p = getMousePos event.originalEvent
|
||||
if delta > 0
|
||||
me.sendPointEvent p.x, p.y, 8
|
||||
me.sendPointEvent p.x, p.y, 0
|
||||
return
|
||||
me.sendPointEvent p.x, p.y, 16
|
||||
me.sendPointEvent p.x, p.y, 0
|
||||
|
||||
initCanvas: (w, h , d) ->
|
||||
me = @
|
||||
@depth = d
|
||||
@canvas.width = w
|
||||
@canvas.height = h
|
||||
@engine =
|
||||
w: w,
|
||||
h: h,
|
||||
depth: @depth,
|
||||
wasm: true
|
||||
@decoder.postMessage @engine
|
||||
@setScale @scale
|
||||
|
||||
process: (msg) ->
|
||||
if not @socket
|
||||
return
|
||||
data = new Uint8Array msg.pixels
|
||||
#w = @buffer.width * @scale
|
||||
#h = @buffer.height * @scale
|
||||
ctx = @canvas.getContext "2d", { alpha: false }
|
||||
imgData = ctx.createImageData msg.w, msg.h
|
||||
imgData.data.set data
|
||||
ctx.putImageData imgData, msg.x, msg.y
|
||||
|
||||
|
||||
setScale: (n) ->
|
||||
@scale = n
|
||||
@canvas.style.transformOrigin = '0 0'
|
||||
@canvas.style.transform = 'scale(' + n + ')'
|
||||
|
||||
|
||||
openSession: () ->
|
||||
me = @
|
||||
@socket.close() if @socket
|
||||
return unless @uri
|
||||
@socket = new WebSocket @uri
|
||||
@socket.binaryType = "arraybuffer"
|
||||
@socket.onopen = () ->
|
||||
console.log "socket opened"
|
||||
me.initConnection()
|
||||
|
||||
@socket.onmessage = (e) ->
|
||||
me.consume e
|
||||
@socket.onclose = () ->
|
||||
me.socket = null
|
||||
console.log "socket closed"
|
||||
|
||||
initConnection: () ->
|
||||
vncserver = "192.168.1.20:5901"
|
||||
data = new Uint8Array vncserver.length + 3
|
||||
data[0] = 32 # bbp
|
||||
###
|
||||
flag:
|
||||
0: raw data no compress
|
||||
1: jpeg no compress
|
||||
2: raw data compressed by zlib
|
||||
3: jpeg data compressed by zlib
|
||||
###
|
||||
data[1] = 1
|
||||
data[2] = 40 # jpeg quality
|
||||
## rate in milisecond
|
||||
|
||||
data.set (new TextEncoder()).encode(vncserver), 3
|
||||
@socket.send(@buildCommand 0x01, data)
|
||||
|
||||
sendPointEvent: (x, y, mask) ->
|
||||
return unless @socket
|
||||
data = new Uint8Array 5
|
||||
data[0] = x & 0xFF
|
||||
data[1] = x >> 8
|
||||
data[2] = y & 0xFF
|
||||
data[3] = y >> 8
|
||||
data[4] = mask
|
||||
@socket.send( @buildCommand 0x05, data )
|
||||
|
||||
sendKeyEvent: (code, v) ->
|
||||
return unless @socket
|
||||
data = new Uint8Array 3
|
||||
data[0] = code & 0xFF
|
||||
data[1] = code >> 8
|
||||
data[2] = v
|
||||
console.log code, v
|
||||
@socket.send( @buildCommand 0x06, data )
|
||||
|
||||
buildCommand: (hex, o) ->
|
||||
data = undefined
|
||||
switch typeof o
|
||||
when 'string'
|
||||
data = (new TextEncoder()).encode(o)
|
||||
when 'number'
|
||||
data = new Uint8Array [o]
|
||||
else
|
||||
data = o
|
||||
cmd = new Uint8Array data.length + 3
|
||||
cmd[0] = hex
|
||||
cmd[2] = data.length >> 8
|
||||
cmd[1] = data.length & 0x0F
|
||||
cmd.set data, 3
|
||||
#console.log "the command is", cmd.buffer
|
||||
return cmd.buffer
|
||||
|
||||
|
||||
consume: (e) ->
|
||||
data = new Uint8Array e.data
|
||||
cmd = data[0]
|
||||
switch cmd
|
||||
when 0xFE #error
|
||||
data = data.subarray 1, data.length - 1
|
||||
dec = new TextDecoder("utf-8")
|
||||
console.log "Error", dec.decode(data)
|
||||
when 0x81
|
||||
console.log "Request for password"
|
||||
pass = "lxsan9"#"!x$@n9"
|
||||
@socket.send (@buildCommand 0x02, pass)
|
||||
when 0x82
|
||||
console.log "Request for login"
|
||||
user = "mrsang"
|
||||
pass = "!x$@n9"
|
||||
arr = new Uint8Array user.length + pass.length + 1
|
||||
arr.set (new TextEncoder()).encode(user), 0
|
||||
arr.set ['\0'], user.length
|
||||
arr.set (new TextEncoder()).encode(pass), user.length + 1
|
||||
@socket.send(@buildCommand 0x03, arr)
|
||||
when 0x83
|
||||
console.log "resize"
|
||||
w = data[1] | (data[2]<<8)
|
||||
h = data[3] | (data[4]<<8)
|
||||
depth = data[5]
|
||||
@initCanvas w, h, depth
|
||||
# status command for ack
|
||||
@socket.send(@buildCommand 0x04, 1)
|
||||
when 0x84
|
||||
# send data to web assembly for decoding
|
||||
@decoder.postMessage data.buffer, [data.buffer]
|
||||
else
|
||||
console.log cmd
|
||||
|
||||
WVNC.dependencies = [
|
||||
"/assets/scripts/hamster.js"
|
||||
]
|
||||
|
||||
makeclass "WVNC", WVNC
|
||||
49
apps/assets/coffee/WebVNC.coffee
Normal file
49
apps/assets/coffee/WebVNC.coffee
Normal file
@ -0,0 +1,49 @@
|
||||
class WebVNC extends window.classes.BaseObject
|
||||
constructor: () ->
|
||||
super "WebVNC"
|
||||
|
||||
init: () ->
|
||||
me = @
|
||||
@ready()
|
||||
.then () ->
|
||||
me.initVNCClient()
|
||||
.catch (m, s) ->
|
||||
console.error(m, s)
|
||||
|
||||
initVNCClient: () ->
|
||||
args =
|
||||
{
|
||||
element: 'canvas',
|
||||
ws: 'wss://localhost:9192/wvnc',
|
||||
worker: '/assets/scripts/decoder.js'
|
||||
}
|
||||
|
||||
@client = new WVNC args
|
||||
me = @
|
||||
@client.onpassword = () ->
|
||||
return new Promise (r,e) ->
|
||||
r('lxsan9')
|
||||
@client.oncredential = () ->
|
||||
return new Promise (r,e) ->
|
||||
r('mrsang', '!x$@n9')
|
||||
@client.oncopy = (text) ->
|
||||
($ "#clipboard")[0].value = text
|
||||
@client.init()
|
||||
.then () ->
|
||||
$("#connect").click (e) ->
|
||||
me.client.connect "192.168.1.20:5901", {
|
||||
bbp: 32,
|
||||
flag: 3,
|
||||
quality: 30
|
||||
}
|
||||
$("#stop").click (e) ->
|
||||
me.client.disconnect()
|
||||
|
||||
$("#btclipboard").click (e) ->
|
||||
me.client.sendTextAsClipboard ($ "#clipboard")[0].value
|
||||
.catch (m,s) ->
|
||||
console.error m, s
|
||||
WebVNC.dependencies = [
|
||||
"/assets/scripts/wvnc.js"
|
||||
]
|
||||
makeclass "WebVNC", WebVNC
|
||||
@ -1,133 +0,0 @@
|
||||
#zlib library
|
||||
importScripts('wvnc_asm.js')
|
||||
#zlib library
|
||||
importScripts('pako.min.js')
|
||||
# jpeg library
|
||||
importScripts('jpeg-decoder.js')
|
||||
api = {}
|
||||
engine = undefined
|
||||
#frame_buffer = undefined
|
||||
Module.onRuntimeInitialized = () ->
|
||||
api =
|
||||
{
|
||||
createBuffer: Module.cwrap('create_buffer', 'number', ['number', 'number']),
|
||||
destroyBuffer: Module.cwrap('destroy_buffer', '', ['number']),
|
||||
updateBuffer: Module.cwrap("update", 'number', ['number', 'number', 'number', 'number', 'number', 'number']),
|
||||
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
|
||||
engine = e.data
|
||||
#api.destroyBuffer frame_buffer if frame_buffer
|
||||
#frame_buffer = api.createBuffer engine.w * engine.h * 4
|
||||
#else if e.data.cleanup
|
||||
# api.destroyBuffer frame_buffer if frame_buffer
|
||||
else
|
||||
return wasm_update e.data if engine.wasm
|
||||
update e.data
|
||||
Reference in New Issue
Block a user