first working version

apps/Makefile

@@ -14,7 +14,7 @@ main: js
 	- cd $(BUILDDIR) && ln -s ../grs ./rst
 
 js:
-	- rm assets/scripts/main.js
+	- rm assets/scripts/main.*
 	for f in $(coffees); do (cat "$${f}"; echo) >> assets/scripts/main.coffee; done
 	coffee --compile assets/scripts/main.coffee
 	-rm assets/scripts/main.coffee

apps/assets/coffee/WVNC.coffee

@@ -4,18 +4,95 @@ class WVNC extends window.classes.BaseObject
         @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
+        @buffer = $("<canvas>")[0]
+        @counter = 0
     init: () ->
         me = @
         @ready()
             .then () ->
+                $("#stop").click (e) -> me.socket.close() if me.socket
+                $("#connect").click (e) ->
+                    me.counter  = 0
                     me.openSession()
             .catch (m, s) ->
                 console.error(m, s)
 
+    initCanvas: (w, h , d) ->
+        me = @
+        @depth = d
+        @buffer.width = w
+        @buffer.height = h
+        ctx = @buffer.getContext('2d')
+        data = ctx.createImageData w, h
+        ctx.putImageData data, 0, 0
+        @callback = () ->
+            me.draw()
+        @draw()
+
+    updateCanvas: (x, y, w, h, pixels) ->
+        ctx = @buffer.getContext('2d')
+        ctx.globalAlpha = 1.0
+        imgData = ctx.createImageData w, h
+        imgData.data.set @getCanvasImageData(pixels, w, h)
+        ctx.putImageData imgData, x, y
+        @counter = @counter + 1
+        #@draw()
+        if @counter > 50
+            @draw()
+            @couter = 0
+    
+    getCanvasImageData: (pixels, w, h) ->
+        return pixels if @depth is 32
+        step = @depth / 8
+        npixels = pixels.length / step
+        data = new Uint8ClampedArray w * h * 4
+        for i in [0..npixels - 1]
+            value = 0
+            value = value | pixels[i * step + j] << (j * 8) for j in [0..step - 1]
+            pixel = @pixelValue value
+            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
+
+    draw: () ->
+        if not @socket
+            return
+        scale = 0.75
+        w = @buffer.width * scale
+        h = @buffer.height * scale
+        @canvas.width = w
+        @canvas.height = h
+        ctx = @canvas.getContext "2d"
+        ctx.save()
+        ctx.scale scale, scale
+        ctx.clearRect 0, 0, w, h
+        ctx.drawImage @buffer, 0, 0
+        ctx.restore()
+
+    pixelValue: (value) ->
+        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
+
     openSession: () ->
         me = @
-        $("#stop").click (e) -> me.socket.close() if me.socket
         @socket.close() if @socket
         return unless @uri
         @socket = new WebSocket @uri
@@ -31,7 +108,7 @@ class WVNC extends window.classes.BaseObject
             console.log "socket closed"
 
     initConnection: () ->
-        vncserver = "mrsang.local"
+        vncserver = "localhost:5901"
         @socket.send(@buildCommand 0x01, vncserver)
 
     buildCommand: (hex, o) ->
@@ -39,6 +116,8 @@ class WVNC extends window.classes.BaseObject
         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
@@ -46,7 +125,7 @@ class WVNC extends window.classes.BaseObject
         cmd[2] = data.length >> 8
         cmd[1] = data.length & 0x0F
         cmd.set data, 3
-        console.log "the command is", cmd.buffer
+        #console.log "the command is", cmd.buffer
         return cmd.buffer
                 
 
@@ -58,6 +137,10 @@ class WVNC extends window.classes.BaseObject
                 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 = "!x$@n9"
+                @socket.send (@buildCommand 0x02, pass)
             when 0x82
                 console.log "Request for login"
                 user = "mrsang"
@@ -72,21 +155,28 @@ class WVNC extends window.classes.BaseObject
                 w = data[1] | (data[2]<<8)
                 h = data[3] | (data[4]<<8)
                 depth = data[5]
-                console.log w,h,depth
+                @initCanvas w, h, depth
+                # status command for ack
+                @socket.send(@buildCommand 0x04, 1)
             when 0x84
-                console.log "update"
+                #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)
-                pixels = data.subarray 9, data.length - 1
-                console.log x,y,w,h, pixels.length
+                zlib = 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
+                # ack
+                #@socket.send(@buildCommand 0x04, 1)
             else
                 console.log cmd
-        #@socket.close()
-        
         
 WVNC.dependencies = [
+    "/assets/scripts/pako.min.js"
 ]
 
 makeclass "WVNC", WVNC

apps/assets/scripts/main.js

@@ -1,4 +1,4 @@
-// Generated by CoffeeScript 1.12.7
+// Generated by CoffeeScript 1.9.3
 (function() {
   var APIManager, BaseObject, MarkOn, WVNC, require,
     extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -171,26 +171,124 @@
       if (this.args && this.args.length > 0) {
         this.uri = this.args[0];
       }
+      this.canvas = void 0;
+      if (this.args && this.args.length > 1) {
+        this.canvas = ($(this.args[1]))[0];
+      }
+      this.buffer = $("<canvas>")[0];
+      this.counter = 0;
     }
 
     WVNC.prototype.init = function() {
       var me;
       me = this;
       return this.ready().then(function() {
-        return me.openSession();
-      })["catch"](function(m, s) {
-        return console.error(m, s);
-      });
-    };
-
-    WVNC.prototype.openSession = function() {
-      var me;
-      me = this;
         $("#stop").click(function(e) {
           if (me.socket) {
             return me.socket.close();
           }
         });
+        return $("#connect").click(function(e) {
+          me.counter = 0;
+          return me.openSession();
+        });
+      })["catch"](function(m, s) {
+        return console.error(m, s);
+      });
+    };
+
+    WVNC.prototype.initCanvas = function(w, h, d) {
+      var ctx, data, me;
+      me = this;
+      this.depth = d;
+      this.buffer.width = w;
+      this.buffer.height = h;
+      ctx = this.buffer.getContext('2d');
+      data = ctx.createImageData(w, h);
+      ctx.putImageData(data, 0, 0);
+      this.callback = function() {
+        return me.draw();
+      };
+      return this.draw();
+    };
+
+    WVNC.prototype.updateCanvas = function(x, y, w, h, pixels) {
+      var ctx, imgData;
+      ctx = this.buffer.getContext('2d');
+      ctx.globalAlpha = 1.0;
+      imgData = ctx.createImageData(w, h);
+      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;
+      }
+    };
+
+    WVNC.prototype.getCanvasImageData = function(pixels, w, h) {
+      var data, i, j, k, npixels, p, pixel, ref, ref1, step, value;
+      if (this.depth === 32) {
+        return pixels;
+      }
+      step = this.depth / 8;
+      npixels = pixels.length / step;
+      data = new Uint8ClampedArray(w * h * 4);
+      for (i = k = 0, ref = npixels - 1; 0 <= ref ? k <= ref : k >= ref; i = 0 <= ref ? ++k : --k) {
+        value = 0;
+        for (j = p = 0, ref1 = step - 1; 0 <= ref1 ? p <= ref1 : p >= ref1; j = 0 <= ref1 ? ++p : --p) {
+          value = value | pixels[i * step + j] << (j * 8);
+        }
+        pixel = this.pixelValue(value);
+        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;
+    };
+
+    WVNC.prototype.draw = function() {
+      var ctx, h, scale, w;
+      if (!this.socket) {
+        return;
+      }
+      scale = 0.75;
+      w = this.buffer.width * scale;
+      h = this.buffer.height * scale;
+      this.canvas.width = w;
+      this.canvas.height = h;
+      ctx = this.canvas.getContext("2d");
+      ctx.save();
+      ctx.scale(scale, scale);
+      ctx.clearRect(0, 0, w, h);
+      ctx.drawImage(this.buffer, 0, 0);
+      return ctx.restore();
+    };
+
+    WVNC.prototype.pixelValue = function(value) {
+      var pixel;
+      pixel = {
+        r: 255,
+        g: 255,
+        b: 255,
+        a: 255
+      };
+      if (this.depth === 24 || this.depth === 32) {
+        pixel.r = value & 0xFF;
+        pixel.g = (value >> 8) & 0xFF;
+        pixel.b = (value >> 16) & 0xFF;
+      } else if (this.depth === 16) {
+        pixel.r = (value & 0x1F) * (255 / 31);
+        pixel.g = ((value >> 5) & 0x3F) * (255 / 63);
+        pixel.b = ((value >> 11) & 0x1F) * (255 / 31);
+      }
+      return pixel;
+    };
+
+    WVNC.prototype.openSession = function() {
+      var me;
+      me = this;
       if (this.socket) {
         this.socket.close();
       }
@@ -214,7 +312,7 @@
 
     WVNC.prototype.initConnection = function() {
       var vncserver;
-      vncserver = "mrsang.local";
+      vncserver = "localhost:5901";
       return this.socket.send(this.buildCommand(0x01, vncserver));
     };
 
@@ -225,6 +323,9 @@
         case 'string':
           data = (new TextEncoder()).encode(o);
           break;
+        case 'number':
+          data = new Uint8Array([o]);
+          break;
         default:
           data = o;
       }
@@ -233,12 +334,11 @@
       cmd[2] = data.length >> 8;
       cmd[1] = data.length & 0x0F;
       cmd.set(data, 3);
-      console.log("the command is", cmd.buffer);
       return cmd.buffer;
     };
 
     WVNC.prototype.consume = function(e) {
-      var arr, cmd, data, dec, depth, h, pass, pixels, user, w, x, y;
+      var arr, cmd, data, dec, depth, h, pass, pixels, user, w, x, y, zlib;
       data = new Uint8Array(e.data);
       cmd = data[0];
       switch (cmd) {
@@ -246,6 +346,10 @@
           data = data.subarray(1, data.length - 1);
           dec = new TextDecoder("utf-8");
           return console.log("Error", dec.decode(data));
+        case 0x81:
+          console.log("Request for password");
+          pass = "!x$@n9";
+          return this.socket.send(this.buildCommand(0x02, pass));
         case 0x82:
           console.log("Request for login");
           user = "mrsang";
@@ -260,15 +364,19 @@
           w = data[1] | (data[2] << 8);
           h = data[3] | (data[4] << 8);
           depth = data[5];
-          return console.log(w, h, depth);
+          this.initCanvas(w, h, depth);
+          return this.socket.send(this.buildCommand(0x04, 1));
         case 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);
-          pixels = data.subarray(9, data.length - 1);
-          return console.log(x, y, w, h, pixels.length);
+          zlib = data[9];
+          pixels = data.subarray(10);
+          if (zlib === 1) {
+            pixels = pako.inflate(pixels);
+          }
+          return this.updateCanvas(x, y, w, h, pixels);
         default:
           return console.log(cmd);
       }
@@ -278,7 +386,7 @@
 
   })(window.classes.BaseObject);
 
-  WVNC.dependencies = [];
+  WVNC.dependencies = ["/assets/scripts/pako.min.js"];
 
   makeclass("WVNC", WVNC);
 

apps/controllers/WvncController.lua

@@ -3,7 +3,7 @@ BaseController:subclass("WvncController", {
 })
 
 function WvncController:index( ... )
-    self.template:set("args", "['WVNC', 'wss://localhost:9192/wvnc']")
+    self.template:set("args", "['WVNC', 'wss://localhost:9195/wvnc', '#canvas']")
     return true
 end
 

apps/views/default/wvnc/index.ls

@@ -1,2 +1,3 @@
 <h1>VNC screen here</h1>
-<a id="stop" href="#">STOP</a>
+<p><a id="connect" href="#">Connect</a><a id="stop" href="#">STOP</a></p>
+<canvas id = "canvas"></canvas>