diff --git a/apps/assets/coffee/WVNC.coffee b/apps/assets/coffee/WVNC.coffee index f828f5b..53bb60b 100644 --- a/apps/assets/coffee/WVNC.coffee +++ b/apps/assets/coffee/WVNC.coffee @@ -37,7 +37,38 @@ class WVNC extends window.classes.BaseObject # me.draw() @draw() - updateCanvas: (x, y, w, h, pixels) -> + decodeFB: (d) -> + # the zlib is slower than expected + switch d.flag + when 0x0 # raw data + @drawRaw d.x, d.y, d.w, d.h, d.pixels + when 0x1 # jpeg data + @drawJPEG d.x, d.y, d.pixels + when 0x2 # raw compress in zlib format + pixels = pako.inflate(d.pixels) + @drawRaw d.x, d.y, d.w, d.h, pixels + when 0x3 # jpeg compress in zlib format + jpeg = pako.inflate(d.pixels) + @drawJPEG d.x, d.y, jpeg + + drawJPEG: (x, y, data) -> + me = @ + blob = new Blob [data], { type: "image/jpeg" } + reader = new FileReader() + reader.onloadend = () -> + hiddenImage = new Image() + hiddenImage.style.position = "absolute" + hiddenImage.style.left = "-99999px" + document.body.appendChild hiddenImage + hiddenImage.onload = () -> + ctx = me.buffer.getContext '2d' + ctx.drawImage hiddenImage, x, y + document.body.removeChild hiddenImage + me.draw() + hiddenImage.src = reader.result + reader.readAsDataURL blob + + drawRaw: (x, y, w, h, pixels) -> ctx = @buffer.getContext('2d') ctx.globalAlpha = 1.0 imgData = ctx.createImageData w, h @@ -177,16 +208,15 @@ class WVNC extends window.classes.BaseObject @socket.send(@buildCommand 0x04, 1) when 0x84 #console.log "update" - x = data[1] | (data[2]<<8) - y = data[3] | (data[4]<<8) - w = data[5] | (data[6]<<8) - h = data[7] | (data[8]<<8) - zlib = data[9] + d = {} + 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] #console.log zlib - pixels = data.subarray 10 - # the zlib is slower than expected - pixels = pako.inflate(pixels) if zlib is 1 - @updateCanvas x, y, w, h, pixels + d.pixels = data.subarray 10 + @decodeFB d # ack #@socket.send(@buildCommand 0x04, 1) else diff --git a/apps/assets/scripts/main.js b/apps/assets/scripts/main.js index 6caf93a..837e89e 100644 --- a/apps/assets/scripts/main.js +++ b/apps/assets/scripts/main.js @@ -217,7 +217,48 @@ return this.draw(); }; - WVNC.prototype.updateCanvas = function(x, y, w, h, pixels) { + WVNC.prototype.decodeFB = function(d) { + var jpeg, pixels; + switch (d.flag) { + case 0x0: + return this.drawRaw(d.x, d.y, d.w, d.h, d.pixels); + case 0x1: + return this.drawJPEG(d.x, d.y, d.pixels); + case 0x2: + pixels = pako.inflate(d.pixels); + return this.drawRaw(d.x, d.y, d.w, d.h, pixels); + case 0x3: + jpeg = pako.inflate(d.pixels); + return this.drawJPEG(d.x, d.y, jpeg); + } + }; + + WVNC.prototype.drawJPEG = function(x, y, data) { + var blob, me, reader; + me = this; + blob = new Blob([data], { + type: "image/jpeg" + }); + reader = new FileReader(); + reader.onloadend = function() { + var hiddenImage; + hiddenImage = new Image(); + hiddenImage.style.position = "absolute"; + hiddenImage.style.left = "-99999px"; + document.body.appendChild(hiddenImage); + hiddenImage.onload = function() { + var ctx; + ctx = me.buffer.getContext('2d'); + ctx.drawImage(hiddenImage, x, y); + document.body.removeChild(hiddenImage); + return me.draw(); + }; + return hiddenImage.src = reader.result; + }; + return reader.readAsDataURL(blob); + }; + + WVNC.prototype.drawRaw = function(x, y, w, h, pixels) { var ctx, imgData; ctx = this.buffer.getContext('2d'); ctx.globalAlpha = 1.0; @@ -225,10 +266,7 @@ imgData.data.set(this.getCanvasImageData(pixels, w, h)); ctx.putImageData(imgData, x, y); this.counter = this.counter + 1; - if (this.counter > 50) { - this.draw(); - return this.couter = 0; - } + return this.draw(); }; WVNC.prototype.getCanvasImageData = function(pixels, w, h) { @@ -357,7 +395,7 @@ }; WVNC.prototype.consume = function(e) { - var arr, cmd, data, dec, depth, h, pass, pixels, user, w, x, y, zlib; + var arr, cmd, d, data, dec, depth, h, pass, user, w; data = new Uint8Array(e.data); cmd = data[0]; switch (cmd) { @@ -386,16 +424,14 @@ this.initCanvas(w, h, depth); return this.socket.send(this.buildCommand(0x04, 1)); case 0x84: - x = data[1] | (data[2] << 8); - y = data[3] | (data[4] << 8); - w = data[5] | (data[6] << 8); - h = data[7] | (data[8] << 8); - zlib = data[9]; - pixels = data.subarray(10); - if (zlib === 1) { - pixels = pako.inflate(pixels); - } - return this.updateCanvas(x, y, w, h, pixels); + d = {}; + 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); + return this.decodeFB(d); default: return console.log(cmd); }