first working version

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();
+        $("#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;
-      $("#stop").click(function(e) {
-        if (me.socket) {
-          return me.socket.close();
-        }
-      });
       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);