Better interface, support user provided VNC password.

- host, port and password input boxes (populated by URL values). - clear canvas on disconnect. - Dotted border around VNC area. - mirror bits for VNC password.

Better interface, support user provided VNC password.
- host, port and password input boxes (populated by URL values). - clear canvas on disconnect. - Dotted border around VNC area. - mirror bits for VNC password.
532a9fd9 · Joel Martin · 8580b989 · 532a9fd9 · 532a9fd9 · 532a9fd9
Commit 532a9fd9 authored Apr 06, 2010 by Joel Martin
Hide whitespace changes
Inline Side-by-side

Showing with 89 additions and 38 deletions

canvas.html canvas.html +4 -1

canvas.js canvas.js +15 -4

vnc.html vnc.html +15 -15

vnc.js vnc.js +55 -18

No files found.
--- a/canvas.html
+++ b/canvas.html
@@ -16,6 +16,9 @@
    <script src="canvas.js"></script>
    <script>
-        window.onload = function() { init_canvas('tutorial', 640, 480); }
+        window.onload = function() {
+            Canvas.init_canvas('tutorial', 640, 480);
+            Canvas.draw();
+        }
    </script>
 </html>
--- a/canvas.js
+++ b/canvas.js
@@ -65,15 +65,17 @@ ctxDisable: function (e) {
 },
-init: function (canvas, width, height, keyDown, keyUp, mouseDown, mouseUp) {
+init: function (id, width, height, keyDown, keyUp, mouseDown, mouseUp) {
    debug(">> init_canvas");
+    Canvas.id = id;
    if (! keyDown) keyDown = Canvas.keyDown;
    if (! keyUp) keyUp = Canvas.keyUp;
    if (! mouseDown) mouseDown = Canvas.mouseDown;
    if (! mouseUp) mouseUp = Canvas.mouseUp;
-    c = $(canvas);
+    var c = $(Canvas.id);
    c.width = width;
    c.height = height;
    document.addEvent('keydown', keyDown);
@@ -93,6 +95,17 @@ init: function (canvas, width, height, keyDown, keyUp, mouseDown, mouseUp) {
    if (! c.getContext) return;
    Canvas.ctx = c.getContext('2d'); 
+    debug("<< init_canvas");
+},
+clear: function () {
+    Canvas.ctx.clearRect(0, 0, Canvas.c_wx, Canvas.c_wy);
+    var c = $(Canvas.id);
+    c.width = 640;
+    c.height = 100;
+},
+draw: function () {
    /* Border */
    Canvas.ctx.stroke();  
    Canvas.ctx.rect(0, 0, Canvas.c_wx, Canvas.c_wy);
@@ -116,8 +129,6 @@ init: function (canvas, width, height, keyDown, keyUp, mouseDown, mouseUp) {
        }
    }
    Canvas.ctx.putImageData(img, 100, 100);
-    debug("<< init_canvas");
 },
 rfbImage: function(x, y, width, height, arr) {

--- a/vnc.html
+++ b/vnc.html
@@ -4,8 +4,16 @@
    <body onload="draw();">
-        VNC Window:<br>
+        Host: <input id='host' style='width:100'>&nbsp;
-        <canvas id="vnc" width="800" height="600">
+        Port: <input id='port' style='width:50'>&nbsp;
+        Password: <input id='password' type='password' style='width:80'>&nbsp;
+        <input id='connectButton' type='button' value='Connect' style='width:100px'
+            onclick="RFB.connect();">&nbsp;
+        <br><br>
+        <div id='status'>Disconnected</div>
+        <canvas id="vnc" width="640" height="100"
+                style="border-style: dotted; border-width: 1px;">
            Canvas not supported.
        </canvas>
@@ -22,21 +30,13 @@
    <script src="vnc.js"></script>
    <script>
-        function connect() {
+        window.onload = function() {
-            debug(">> connect");
            var uri = new URI(window.location);
-            var host = uri.getData("host");
+            $('host').value  = uri.getData("host");
-            var port = uri.getData("port");
+            $('port').value  = uri.getData("port");
-            if ((!host) || (!port)) {
+            if (uri.getData("password")) {
-                debug("must set host and port");
+                $('password').value = uri.getData("password");
-                return;
            }
-            RFB.init_ws(host, port);
-            debug("<< connect");
-        }
-        window.onload = function() {
-            connect();
        }
    </script>

--- a/vnc.js
+++ b/vnc.js
 var ws = null;
 var vnc_host = '';
 var vnc_port = 5900;
+var vnc_password = '';
 var fbu = {
    rects    : 0,
    bytes    : 0,
@@ -106,13 +107,10 @@ init_msg: function (data) {
                break;
            case 2:  // VNC authentication
                var challenge = data.shiftBytes(16);
+                debug("vnc_password: " + vnc_password);
                debug("challenge: " + challenge + "(" + challenge.length + ")");
-                //response = Javacrypt.crypt(challenge, "jdm239").toString();
+                //passwd = [194, 242, 234, 194, 242, 234]; // 'COWCOW' bit mirrored
-                //response = Javacrypt.crypt("jdm239", challenge).toString();
+                passwd = RFB.passwdTwiddle(vnc_password);
-                //response = des("jdm239", challenge, 1)
-                //
-                //passwd = [67, 79, 87, 67, 79, 87]; // 'COWCOW'
-                passwd = [194, 242, 234, 194, 242, 234]; // 'COWCOW' bit mirrored
                debug("passwd: " + passwd + "(" + passwd.length + ")");
                response = des(passwd, challenge, 1)
                debug("reponse: " + response + "(" + response.length + ")");
@@ -180,6 +178,7 @@ init_msg: function (data) {
        fb_name = data.shiftStr(name_length);
        debug("Name: " + fb_name);
+        $('status').innerHTML = "Connected to: " + fb_name;
        Canvas.init('vnc', fb_width, fb_height, RFB.keyDown, RFB.keyUp);
@@ -365,6 +364,23 @@ send_array: function (arr) {
    ws.send(Base64.encode_array(arr));
 },
+/* Mirror bits of each character and return as array */
+passwdTwiddle: function (passwd) {
+    var arr = [];
+    for (var i=0; i< passwd.length; i++) {
+        var c = passwd.charCodeAt(i);
+        arr.push( ((c & 0x80) >> 7) +
+                  ((c & 0x40) >> 5) +
+                  ((c & 0x20) >> 3) +
+                  ((c & 0x10) >> 1) +
+                  ((c & 0x08) << 1) +
+                  ((c & 0x04) << 3) +
+                  ((c & 0x02) << 5) +
+                  ((c & 0x01) << 7)   );
+    }
+    return arr;
+},
 poller: function () {
    if (RFB.state == 'normal') {
        RFB.fbUpdateRequest(1, 0, 0, fb_width, fb_height);
@@ -387,8 +403,8 @@ keyUp: function (e) {
 * Setup routines
 */
-_init_ws: function () {
+init_ws: function () {
-    debug(">> _init_ws");
+    debug(">> init_ws");
    var uri = "ws://" + vnc_host + ":" + vnc_port;
    debug("connecting to " + uri);
    ws = new WebSocket(uri);
@@ -403,11 +419,11 @@ _init_ws: function () {
        }
        if (RFB.state == 'reset') {
            /* close and reset connection */
-            ws.close();
+            RFB.disconnect();
-            RFB._init_ws();
+            RFB.init_ws();
        } else if (RFB.state == 'failed') {
            debug("Giving up!");
-            ws.close();
+            RFB.disconnect();
        }
        //debug("<< onmessage");
    };
@@ -423,19 +439,40 @@ _init_ws: function () {
    }
    RFB.poller.delay(RFB.poll_rate);
-    debug("<< _init_ws");
+    debug("<< init_ws");
 },
-init_ws: function (host, port) {
+connect: function () {
-    debug(">> init_ws");
+    debug(">> connect");
-    vnc_host = host;
+    vnc_host = $('host').value;
-    vnc_port = port;
+    vnc_port = $('port').value;
+    vnc_password = $('password').value;
+    if ((!host) || (!port)) {
+        debug("must set host and port");
+        return;
+    }
    if (ws) {
        ws.close();
    }
-    RFB._init_ws();
+    RFB.init_ws();
-    debug("<< init_ws");
+    $('connectButton').value = "Disconnect";
+    $('connectButton').onclick = RFB.disconnect;
+    debug("<< connect");
+},
+disconnect: function () {
+    debug(">> disconnect");
+    if (ws) {
+        ws.close();
+    }
+    if (Canvas.ctx) {
+        Canvas.clear();
+    }
+    $('connectButton').value = "Connect";
+    $('connectButton').onclick = RFB.connect;
+    $('status').innerHTML = "Disconnected";
+    debug("<< disconnect");
 }
 }; /* End of RFB */