performance improvement & add more keyboard

apps/assets/coffee/WVNC.coffee

@@ -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 = 0.8
-        @scale = 1.0
         @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))
+            #console.log e
-                code = e.key.charCodeAt(0)
+            switch keycode
-            else 
+                when 8  then code = 0xFF08 #back space
-                code = keycode
+                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
+            depth: @depth,
-        @decoder.postMessage @resolution
+            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[1] = 1
-        data[2] = 50 # jpeg quality
+        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 = new Uint8Array 3
-        data[0] = code
+        data[0] = code & 0xFF
-        data[1] = v
+        data[1] = code >> 8
+        data[2] = v
         console.log code, v
         @socket.send( @buildCommand 0x06, data )
 

apps/assets/coffee/decoder.1.coffee

@@ -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

apps/assets/coffee/decoder.coffee

@@ -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
+        return wasm_update e.data if engine.wasm
-        x = datain[1] | (datain[2] << 8)
+        update e.data
-        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

apps/assets/scripts/decoder.js

@@ -1,11 +1,15 @@
-// Generated by CoffeeScript 1.9.3
+// Generated by CoffeeScript 1.12.7
-  var api, onmessage, resolution;
+  var api, decodeJPEG, decodeRaw, engine, getImageData, onmessage, pixelValue, update, wasm_update;
 
   importScripts('wvnc_asm.js');
 
+  importScripts('pako.min.js');
+
+  importScripts('jpeg-decoder.js');
+
   api = {};
 
-  resolution = void 0;
+  engine = void 0;
 
   Module.onRuntimeInitialized = function() {
     return api = {
@@ -16,35 +20,140 @@
     };
   };
 
-  onmessage = function(e) {
+  pixelValue = function(value, depth) {
-    var datain, dataout, flag, h, msg, p, po, size, tmp, w, x, y;
+    var pixel;
-    if (e.data.depth) {
+    pixel = {
-      return resolution = e.data;
+      r: 255,
-    } else {
+      g: 255,
-      datain = new Uint8Array(e.data);
+      b: 255,
-      x = datain[1] | (datain[2] << 8);
+      a: 255
-      y = datain[3] | (datain[4] << 8);
+    };
-      w = datain[5] | (datain[6] << 8);
+    if (depth === 24 || depth === 32) {
-      h = datain[7] | (datain[8] << 8);
+      pixel.r = value & 0xFF;
-      flag = datain[9];
+      pixel.g = (value >> 8) & 0xFF;
-      p = api.createBuffer(datain.length);
+      pixel.b = (value >> 16) & 0xFF;
-      Module.HEAP8.set(datain, p);
+    } else if (depth === 16) {
-      size = w * h * 4;
+      pixel.r = (value & 0x1F) * (255 / 31);
-      po = api.decodeBuffer(p, datain.length, resolution.depth, size);
+      pixel.g = ((value >> 5) & 0x3F) * (255 / 63);
-      dataout = new Uint8Array(Module.HEAP8.buffer, po, size);
+      pixel.b = ((value >> 11) & 0x1F) * (255 / 31);
-      msg = {};
+    }
-      tmp = new Uint8Array(size);
+    return pixel;
-      tmp.set(dataout, 0);
+  };
-      msg.buffer = tmp.buffer;
+
-      msg.x = x;
+  getImageData = function(d) {
-      msg.y = y;
+    var data, i, j, k, l, npixels, pixel, ref, ref1, step, value;
-      msg.w = w;
+    if (engine.depth === 32) {
-      msg.h = h;
+      return d.pixels;
-      postMessage(msg, [msg.buffer]);
+    }
-      api.destroyBuffer(p);
+    step = engine.depth / 8;
-      if (flag !== 0x0 || resolution.depth !== 32) {
+    npixels = d.pixels.length / step;
-        return api.destroyBuffer(po);
+    data = new Uint8ClampedArray(d.w * d.h * 4);
+    for (i = k = 0, ref = npixels - 1; 0 <= ref ? k <= ref : k >= ref; i = 0 <= ref ? ++k : --k) {
+      value = 0;
+      for (j = l = 0, ref1 = step - 1; 0 <= ref1 ? l <= ref1 : l >= ref1; j = 0 <= ref1 ? ++l : --l) {
+        value = value | d.pixels[i * step + j] << (j * 8);
       }
+      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 = function(d) {
+    d.pixels = getImageData(d);
+    return d;
+  };
+
+  decodeJPEG = function(d) {
+    var raw;
+    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 = function(msg) {
+    var d, data, raw;
+    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);
+    switch (d.flag) {
+      case 0x0:
+        raw = decodeRaw(d);
+        break;
+      case 0x1:
+        raw = decodeJPEG(d);
+        break;
+      case 0x2:
+        d.pixels = pako.inflate(d.pixels);
+        raw = decodeRaw(d);
+        break;
+      case 0x3:
+        d.pixels = pako.inflate(d.pixels);
+        raw = decodeJPEG(d);
+    }
+    if (!raw) {
+      return;
+    }
+    raw.pixels = raw.pixels.buffer;
+    return postMessage(raw, [raw.pixels]);
+  };
+
+  wasm_update = function(msg) {
+    var datain, dataout, flag, h, p, po, size, tmp, w, x, y;
+    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);
+    dataout = new Uint8Array(Module.HEAP8.buffer, po, size);
+    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 !== 0x0 || engine.depth !== 32) {
+      return api.destroyBuffer(po);
+    }
+  };
+
+  onmessage = function(e) {
+    if (e.data.depth) {
+      return engine = e.data;
+    } else {
+      if (engine.wasm) {
+        return wasm_update(e.data);
+      }
+      return update(e.data);
     }
   };
 

apps/assets/scripts/main.js

@@ -176,11 +176,7 @@
       if (this.args && this.args.length > 1) {
         this.canvas = ($(this.args[1]))[0];
       }
-      this.lastPose = {
+      this.scale = 0.8;
-        x: 0,
-        y: 0
-      };
-      this.scale = 1.0;
       this.decoder = new Worker('/assets/scripts/decoder.js');
       me = this;
       this.mouseMask = 0;
@@ -227,6 +223,7 @@
       if (!me.canvas) {
         return;
       }
+      ($(me.canvas)).css("cursor", "none");
       ($(me.canvas)).contextmenu(function(e) {
         e.preventDefault();
         return false;
@@ -246,20 +243,103 @@
         me.mouseMask = me.mouseMask & (~state);
         return sendMouseLocation(e);
       });
-      me.canvas.onkeydown = me.canvas.onkeyup = me.canvas.onkeypress = function(e) {
+      me.canvas.onkeydown = me.canvas.onkeyup = function(e) {
         var code, keycode;
         keycode = e.keyCode;
-        if ((keycode > 47 && keycode < 58) || (keycode > 64 && keycode < 91) || (keycode > 95 && keycode < 112) || (keycode > 185 && keycode < 193) || (keycode > 218 && keycode < 223)) {
+        switch (keycode) {
-          code = e.key.charCodeAt(0);
+          case 8:
-        } else {
+            code = 0xFF08;
-          code = keycode;
+            break;
+          case 9:
+            code = 0xff89;
+            break;
+          case 13:
+            code = 0xFF0D;
+            break;
+          case 27:
+            code = 0xFF1B;
+            break;
+          case 46:
+            code = 0xFFFF;
+            break;
+          case 38:
+            code = 0xFF52;
+            break;
+          case 40:
+            code = 0xFF54;
+            break;
+          case 37:
+            code = 0xFF51;
+            break;
+          case 39:
+            code = 0xFF53;
+            break;
+          case 91:
+            code = 0xFFE7;
+            break;
+          case 93:
+            code = 0xFFE8;
+            break;
+          case 16:
+            code = 0xFFE1;
+            break;
+          case 17:
+            code = 0xFFE3;
+            break;
+          case 18:
+            code = 0xFFE9;
+            break;
+          case 20:
+            code = 0xFFE5;
+            break;
+          case 113:
+            code = 0xFFBF;
+            break;
+          case 112:
+            code = 0xFFBE;
+            break;
+          case 114:
+            code = 0xFFC0;
+            break;
+          case 115:
+            code = 0xFFC1;
+            break;
+          case 116:
+            code = 0xFFC2;
+            break;
+          case 117:
+            code = 0xFFC3;
+            break;
+          case 118:
+            code = 0xFFC4;
+            break;
+          case 119:
+            code = 0xFFC5;
+            break;
+          case 120:
+            code = 0xFFC6;
+            break;
+          case 121:
+            code = 0xFFC7;
+            break;
+          case 122:
+            code = 0xFFC8;
+            break;
+          case 123:
+            code = 0xFFC9;
+            break;
+          default:
+            code = e.key.charCodeAt(0);
+        }
+        e.preventDefault();
+        if (!code) {
+          return;
         }
         if (e.type === "keydown") {
-          me.sendKeyEvent(code, 1);
+          return me.sendKeyEvent(code, 1);
         } else if (e.type === "keyup") {
-          me.sendKeyEvent(code, 0);
+          return me.sendKeyEvent(code, 0);
         }
-        return e.preventDefault();
       };
       hamster = Hamster(this.canvas);
       return hamster.wheel(function(event, delta, deltaX, deltaY) {
@@ -281,12 +361,14 @@
       this.depth = d;
       this.canvas.width = w;
       this.canvas.height = h;
-      this.resolution = {
+      this.engine = {
         w: w,
         h: h,
-        depth: this.depth
+        depth: this.depth,
+        wasm: true
       };
-      return this.decoder.postMessage(this.resolution);
+      this.decoder.postMessage(this.engine);
+      return this.setScale(this.scale);
     };
 
     WVNC.prototype.process = function(msg) {
@@ -294,8 +376,10 @@
       if (!this.socket) {
         return;
       }
-      data = new Uint8Array(msg.buffer);
+      data = new Uint8Array(msg.pixels);
-      ctx = this.canvas.getContext("2d");
+      ctx = this.canvas.getContext("2d", {
+        alpha: false
+      });
       imgData = ctx.createImageData(msg.w, msg.h);
       imgData.data.set(data);
       return ctx.putImageData(imgData, msg.x, msg.y);
@@ -303,7 +387,8 @@
 
     WVNC.prototype.setScale = function(n) {
       this.scale = n;
-      return this.draw();
+      this.canvas.style.transformOrigin = '0 0';
+      return this.canvas.style.transform = 'scale(' + n + ')';
     };
 
     WVNC.prototype.openSession = function() {
@@ -331,9 +416,9 @@
     };
 
     WVNC.prototype.initConnection = function() {
-      var data, rate, vncserver;
+      var data, vncserver;
       vncserver = "192.168.1.20:5901";
-      data = new Uint8Array(vncserver.length + 5);
+      data = new Uint8Array(vncserver.length + 3);
       data[0] = 32;
 
       /*
@@ -343,12 +428,9 @@
           2: raw data compressed by zlib
           3: jpeg data compressed by zlib
        */
-      data[1] = 3;
+      data[1] = 1;
-      data[2] = 50;
+      data[2] = 40;
-      rate = 30;
+      data.set((new TextEncoder()).encode(vncserver), 3);
-      data[3] = rate & 0xFF;
-      data[4] = (rate >> 8) & 0xFF;
-      data.set((new TextEncoder()).encode(vncserver), 5);
       return this.socket.send(this.buildCommand(0x01, data));
     };
 
@@ -371,9 +453,10 @@
       if (!this.socket) {
         return;
       }
-      data = new Uint8Array(2);
+      data = new Uint8Array(3);
-      data[0] = code;
+      data[0] = code & 0xFF;
-      data[1] = v;
+      data[1] = code >> 8;
+      data[2] = v;
       console.log(code, v);
       return this.socket.send(this.buildCommand(0x06, data));
     };