Switch to much faster console.log and separate utils into util.js.

canvas.html

@@ -6,22 +6,19 @@
                 style="border-style: dotted; border-width: 1px;">
             Canvas not supported.
         </canvas>
-
-        <br>
-        Debug:<br>
-        <textarea id="debug" style="font-size: 9;" cols=80 rows=25></textarea>
     </body>
 
     <script src="include/mootools.js"></script>
     <script src="include/mootools-more.js"></script>
+    <script src="include/util.js"></script>
     <script src="canvas.js"></script>
 
     <script>
         window.onload = function() {
-            debug("here1");
+            console.log("here1");
             Canvas.init('tutorial', 640, 480);
             Canvas.draw();
-            debug("here2");
+            console.log("here2");
         }
     </script>
 </html>

canvas.js

@@ -1,32 +1,3 @@
-function debug(str) {
-    cell = $('debug');
-    cell.innerHTML += str + "\n";
-    cell.scrollTop = cell.scrollHeight;
-}
-
-function dirObj(obj, parent, depth) {
-    var msg = "";
-    var val = "";
-    if (! depth) { depth=2; }
-    if (! parent) { parent= ""; }
-
-    // Print the properties of the passed-in object 
-    for (var i in obj) {
-        if ((depth > 1) && (typeof obj[i] == "object")) { 
-            // Recurse attributes that are objects
-            msg += dirObj(obj[i], parent + "." + i, depth-1);
-        } else {
-            val = new String(obj[i]).replace("\n", " ");
-            if (val.length > 30) {
-                val = val.substr(0,30) + "...";
-            } 
-            msg += parent + "." + i + ": " + val + "\n";
-        }
-    }
-    return msg;
-}
-
-
 Canvas = {
 
 c_x : 0,
@@ -38,25 +9,25 @@ ctx  : null,
 mouseDown: function (e) {
     evt = e.event || window.event;
     e.stop();
-    debug('mouse ' + evt.which + '/' + evt.button + ' down:' +
+    console.log('mouse ' + evt.which + '/' + evt.button + ' down:' +
             (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
 },
 
 mouseUp: function (e) {
     evt = e.event || window.event;
     e.stop();
-    debug('mouse ' + evt.which + '/' + evt.button + ' up:' +
+    console.log('mouse ' + evt.which + '/' + evt.button + ' up:' +
             (evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
 },
 
 keyDown: function (e) {
     e.stop();
-    debug("keydown: " + e.key + "(" + e.code + ")");
+    console.log("keydown: " + e.key + "(" + e.code + ")");
 },
 
 keyUp : function (e) {
     e.stop();
-    debug("keyup: " + e.key + "(" + e.code + ")");
+    console.log("keyup: " + e.key + "(" + e.code + ")");
 },
 
 ctxDisable: function (e) {
@@ -71,7 +42,7 @@ ctxDisable: function (e) {
 
 
 init: function (id, width, height, keyDown, keyUp, mouseDown, mouseUp) {
-    debug(">> init_canvas");
+    console.log(">> init_canvas");
 
     Canvas.id = id;
 
@@ -100,7 +71,7 @@ init: function (id, width, height, keyDown, keyUp, mouseDown, mouseUp) {
     if (! c.getContext) return;
     Canvas.ctx = c.getContext('2d'); 
 
-    debug("<< init_canvas");
+    console.log("<< init_canvas");
 },
 
 clear: function () {
@@ -162,7 +133,7 @@ copyImage: function(old_x, old_y, new_x, new_y, width, height) {
 getKeysym: function(e) {
     evt = e.event || window.event;
     var keysym;
-    //debug(dirObj(e, null, 1));
+    //console.log(dirObj(e, null, 1));
 
     /* Remap modifier and special keys */
     switch ( evt.keyCode ) {

include/util.js

@@ -0,0 +1,27 @@
+if ((!window.console) || (! /__debug__$/i.test(document.location.href))) {
+ // non-debug mode, an empty function  
+  window.console = window.console || {};  
+  window.console.log = function(message) {}; 
+}
+
+function dirObj(obj, parent, depth) {
+    var msg = "";
+    var val = "";
+    if (! depth) { depth=2; }
+    if (! parent) { parent= ""; }
+
+    // Print the properties of the passed-in object 
+    for (var i in obj) {
+        if ((depth > 1) && (typeof obj[i] == "object")) { 
+            // Recurse attributes that are objects
+            msg += dirObj(obj[i], parent + "." + i, depth-1);
+        } else {
+            val = new String(obj[i]).replace("\n", " ");
+            if (val.length > 30) {
+                val = val.substr(0,30) + "...";
+            } 
+            msg += parent + "." + i + ": " + val + "\n";
+        }
+    }
+    return msg;
+}

vnc.html

@@ -16,21 +16,19 @@
                 style="border-style: dotted; border-width: 1px;">
             Canvas not supported.
         </canvas>
-
-        <br>
-        Debug:<br>
-        <textarea id="debug" style="font-size: 9;" cols=80 rows=25></textarea>
     </body>
 
     <script src="include/mootools.js"></script>
     <script src="include/mootools-more.js"></script>
     <script src="include/base64.js"></script>
     <script src="include/des.js"></script>
+    <script src="include/util.js"></script>
     <script src="canvas.js"></script>
     <script src="vnc.js"></script>
 
     <script>
         window.onload = function() {
+            console.log("onload");
             var uri = new URI(window.location);
             $('host').value  = uri.getData("host") || '';
             $('port').value  = uri.getData("port") || '';

vnc.js

@@ -51,6 +51,7 @@ var FBU = {
     width    : 0, 
     height   : 0,
     encoding : 0,
+    subencoding : -1,
     arr      : null};
 
 
@@ -84,35 +85,35 @@ rre_chunk : 100,
 
 /* RFB/VNC initialisation */
 init_msg: function (data) {
-    debug(">> init_msg: " + RFB.state);
+    console.log(">> init_msg: " + RFB.state);
 
     switch (RFB.state) {
 
     case 'ProtocolVersion' :
         if (data.length != 12) {
-            debug("Invalid protocol version from server");
+            console.log("Invalid protocol version from server");
             RFB.state = 'reset';
             return;
         }
-        debug("Server  ProtocolVersion: " + data.shiftStr(11));
-        debug("Sending ProtocolVersion: " + RFB.version.substr(0,11));
+        console.log("Server  ProtocolVersion: " + data.shiftStr(11));
+        console.log("Sending ProtocolVersion: " + RFB.version.substr(0,11));
         RFB.send_string(RFB.version);
         RFB.state = 'Authentication';
         break;
 
     case 'Authentication' :
         if (data.length < 4) {
-            debug("Invalid auth frame");
+            console.log("Invalid auth frame");
             RFB.state = 'reset';
             return;
         }
         var scheme = data.shift32();
-        debug("Auth scheme: " + scheme);
+        console.log("Auth scheme: " + scheme);
         switch (scheme) {
             case 0:  // connection failed
                 var strlen = data.shift32();
                 var reason = data.shiftStr(strlen);
-                debug("auth failed: " + reason);
+                console.log("auth failed: " + reason);
                 RFB.state = "failed";
                 return;
             case 1:  // no authentication
@@ -121,12 +122,12 @@ init_msg: function (data) {
                 break;
             case 2:  // VNC authentication
                 var challenge = data.shiftBytes(16);
-                debug("Password: " + RFB.password);
-                debug("Challenge: " + challenge + "(" + challenge.length + ")");
+                console.log("Password: " + RFB.password);
+                console.log("Challenge: " + challenge + "(" + challenge.length + ")");
                 passwd = RFB.passwdTwiddle(RFB.password);
-                //debug("passwd: " + passwd + "(" + passwd.length + ")");
+                //console.log("passwd: " + passwd + "(" + passwd.length + ")");
                 response = des(passwd, challenge, 1);
-                //debug("reponse: " + response + "(" + response.length + ")");
+                //console.log("reponse: " + response + "(" + response.length + ")");
 
                 RFB.send_array(response);
                 RFB.state = "SecurityResult";
@@ -136,21 +137,21 @@ init_msg: function (data) {
 
     case 'SecurityResult' :
         if (data.length != 4) {
-            debug("Invalid server auth response");
+            console.log("Invalid server auth response");
             RFB.state = 'reset';
             return;
         }
         var resp = data.shift32();
         switch (resp) {
             case 0:  // OK
-                debug("Authentication OK");
+                console.log("Authentication OK");
                 break;
             case 1:  // failed
-                debug("Authentication failed");
+                console.log("Authentication failed");
                 RFB.state = "reset";
                 return;
             case 2:  // too-many
-                debug("Too many authentication attempts");
+                console.log("Too many authentication attempts");
                 RFB.state = "failed";
                 return;
         }
@@ -160,17 +161,17 @@ init_msg: function (data) {
 
     case 'ServerInitialisation' :
         if (data.length < 24) {
-            debug("Invalid server initialisation");
+            console.log("Invalid server initialisation");
             RFB.state = 'reset';
             return;
         }
 
         /* Screen size */
-        //debug("data: " + data);
+        //console.log("data: " + data);
         RFB.fb_width  = data.shift16();
         RFB.fb_height = data.shift16();
 
-        debug("Screen size: " + RFB.fb_width + "x" + RFB.fb_height);
+        console.log("Screen size: " + RFB.fb_width + "x" + RFB.fb_height);
 
         /* PIXEL_FORMAT */
         var bpp            = data.shift8();
@@ -178,17 +179,17 @@ init_msg: function (data) {
         var big_endian     = data.shift8();
         var true_color     = data.shift8();
 
-        debug("bpp: " + bpp);
-        debug("depth: " + depth);
-        debug("big_endian: " + big_endian);
-        debug("true_color: " + true_color);
+        console.log("bpp: " + bpp);
+        console.log("depth: " + depth);
+        console.log("big_endian: " + big_endian);
+        console.log("true_color: " + true_color);
 
         /* Connection name/title */
         data.shiftStr(12);
         var name_length   = data.shift32();
         RFB.fb_name = data.shiftStr(name_length);
 
-        debug("Name: " + RFB.fb_name);
+        console.log("Name: " + RFB.fb_name);
         $('status').innerHTML = "Connected to: " + RFB.fb_name;
 
         Canvas.init('vnc', RFB.fb_width, RFB.fb_height, RFB.keyDown, RFB.keyUp);
@@ -201,19 +202,19 @@ init_msg: function (data) {
         RFB.state = 'normal';
         break;
     }
-    debug("<< init_msg (" + RFB.state + ")");
+    console.log("<< init_msg (" + RFB.state + ")");
 },
 
 /* Framebuffer update display functions */
 display_raw: function () {
-    debug(">> display_raw");
+    console.log(">> display_raw");
     Canvas.rfbImage(FBU.x, FBU.y, FBU.width, FBU.height, FBU.arr);
-    FBU.rects --;
     FBU.arr.splice(0, FBU.width * FBU.height * RFB.fb_Bpp);
+    FBU.rects --;
 },
 
 display_copy_rect: function () {
-    debug(">> display_copy_rect");
+    console.log(">> display_copy_rect");
     var old_x = FBU.arr.shift16();
     var old_y = FBU.arr.shift16();
     Canvas.copyImage(old_x, old_y, FBU.x, FBU.y, FBU.width, FBU.height);
@@ -221,10 +222,10 @@ display_copy_rect: function () {
 },
 
 display_rre: function () {
-    //debug(">> display_rre (" + FBU.arr.length + " bytes)");
+    //console.log(">> display_rre (" + FBU.arr.length + " bytes)");
     if (FBU.subrects == 0) {
         FBU.subrects = FBU.arr.shift32();
-        debug(">> display_rre " + "(" + FBU.subrects + " subrects)");
+        console.log(">> display_rre " + "(" + FBU.subrects + " subrects)");
         var color = FBU.arr.shiftBytes(RFB.fb_Bpp); // Background
         Canvas.rfbRect(FBU.x, FBU.y, FBU.width, FBU.height, color);
     }
@@ -237,7 +238,7 @@ display_rre: function () {
         var height = FBU.arr.shift16();
         Canvas.rfbRect(FBU.x + x, FBU.y + y, width, height, color);
     }
-    //debug("   display_rre: rects: " + FBU.rects + ", FBU.subrects: " + FBU.subrects);
+    //console.log("   display_rre: rects: " + FBU.rects + ", FBU.subrects: " + FBU.subrects);
 
     if (FBU.subrects > 0) {
         var chunk = Math.min(RFB.rre_chunk, FBU.subrects);
@@ -245,21 +246,124 @@ display_rre: function () {
     } else {
         FBU.rects --;
     }
-    //debug("<< display_rre, FBU.bytes: " + FBU.bytes);
+    //console.log("<< display_rre, FBU.bytes: " + FBU.bytes);
 },
 
 display_hextile: function() {
-    if (FBU.tiles == 0) {
-        FBU.tiles = (Math.ceiling(FBU.width/16.0)) * (Math.ceiling(FBU.height/16.0));
+    console.log(">> display_hextile, tiles: " + FBU.tiles + ", arr.length: " + FBU.arr.length + ", bytes: " + FBU.bytes + ", subencoding: " + FBU.subencoding);
+    var subencoding, subrects = 0;
+
+    /* FBU.bytes comes in as 0, FBU.arr.length at least 2 */
+    while ((FBU.tiles > 0) && (FBU.arr.length >= FBU.bytes)) {
+        var cur_tile = FBU.total_tiles - FBU.tiles;
+        var tile_x = cur_tile % FBU.tiles_x;
+        var tile_y = Math.floor(cur_tile / FBU.tiles_x);
+        if (FBU.subencoding == -1) {
+            /* We enter with at least 2 bytes */
+            var subencoding = FBU.arr[0];  // Peek
+            FBU.bytes += 1;   // Since we aren't shifting it off
+            //console.log("   subencoding: " + subencoding);
+            if (subencoding > 30) { // Raw
+                console.log("Illegal subencoding " + subencoding);
+                RFB.state = "failed";
+                return;
+            }
+
+            /* Figure out how much we are expecting */
+            if (subencoding & 0x01) { // Raw
+                var twidth = 16, theight = 16;
+                if ((FBU.width % 16) && (tile_x + 1 == FBU.tiles_x)) {
+                    twidth = FBU.width % 16;
+                }
+                if ((FBU.height % 16) && (tile_y + 1 == FBU.tiles_y)) {
+                    theight = FBU.height % 16;
+                }
+                FBU.bytes = twidth * theight * RFB.fb_Bpp;
+            } else {
+                if (subencoding & 0x02) { // Background
+                    FBU.bytes += RFB.fb_Bpp;
+                }
+                if (subencoding & 0x04) { // Foreground
+                    FBU.bytes += RFB.fb_Bpp;
+                }
+                if (subencoding & 0x08) { // AnySubrects
+                    subrects = FBU.arr[FBU.bytes]; // Peek
+                    FBU.bytes += 1;   // Since we aren't shifting it off
+                    if (subencoding & 0x016) { // SubrectsColoured
+                        FBU.bytes += subrects * (RFB.fb_Bpp + 2);
+                    } else {
+                        FBU.bytes += subrects * 2;
+                    }
+                }
+            }
+        }
+
+        console.log("   subencoding: " + subencoding + " tile " + cur_tile + "/" + (FBU.total_tiles - 1) + ", subrects: " + subrects + ", tile_x/y: " + tile_x + "," + tile_y + " , arr.length: " + FBU.arr.length + ", bytes: " + FBU.bytes);
+        if (FBU.arr.length < FBU.bytes) {
+            console.log("   not enough");
+            return;
+        }
+
+        if (subencoding > -1) {
+            /* We know the encoding and have a whole tile */
+            FBU.subencoding = FBU.arr.shift();
+            if (FBU.subencoding == 0) {
+                Canvas.rfbRect(FBU.x + tile_x * 16, FBU.y + tile_y * 16, 16, 16, FBU.background);
+            } else if (FBU.subencoding & 0x01) { // Raw
+                console.log("   Raw subencoding");
+                Canvas.rfbImage(FBU.x, FBU.y, FBU.width, FBU.height, FBU.arr);
+                FBU.arr.splice(0, FBU.width * FBU.height * RFB.fb_Bpp);
+            } else {
+                if (FBU.subencoding & 0x02) { // Background
+                    FBU.background = FBU.arr.shiftBytes(RFB.fb_Bpp);
+                    console.log("   background: " + FBU.background);
+                }
+                if (FBU.subencoding & 0x04) { // Foreground
+                    FBU.foreground = FBU.arr.shiftBytes(RFB.fb_Bpp);
+                    console.log("   foreground: " + FBU.foreground);
+                }
+                Canvas.rfbRect(FBU.x + tile_x * 16, FBU.y + tile_y * 16, 16, 16, FBU.background);
+                if (FBU.subencoding & 0x08) { // AnySubrects
+                    subrects = FBU.arr.shift8();
+                    for (var i = 0; i < subrects; i ++) {
+                        if (FBU.subencoding & 0x016) { // SubrectsColoured
+                            var color = FBU.arr.shiftBytes(RFB.fb_Bpp);
+                        } else {
+                            var color = FBU.foreground;
+                        }
+                        var xy = FBU.arr.shift8();
+                        var x = tile_x * 16 + (xy & 0xf0) >> 4;
+                        var y = tile_y * 16 + (xy & 0x0f);
+
+                        var wh = FBU.arr.shift8();
+                        var w = ((wh & 0xf0) >> 4) + 1;
+                        var h = ((wh & 0x0f)     ) + 1;
+
+                        Canvas.rfbRect(FBU.x + x, FBU.y + y, w, h, color);
+                    }
+                }
+            }
+            FBU.subencoding = -1;
+            FBU.tiles --;
+            FBU.bytes = 0;
+        }
     }
 
-    while (FBU.arr.length) {};
+    if (FBU.tiles > 0) {
+        FBU.bytes = 2;
+    } else {
+        FBU.background = [255, 255, 0, 0];  // Yellow: invalid
+        FBU.rects --;
+    }
+
+    console.log("<< display_hextile");
+
 },
 
 
 /* Normal RFB/VNC messages */
 normal_msg: function (data) {
-    //debug(">> normal_msg");
+    //console.log(">> normal_msg");
     if ((FBU.rects > 0) || (FBU.bytes > 0)) {
         var msg_type = 0;
     } else {
@@ -270,11 +374,11 @@ normal_msg: function (data) {
         if (FBU.rects == 0) {
             data.shift8();
             FBU.rects = data.shift16();
-            debug("FramebufferUpdate, " + FBU.rects + " rects");
+            console.log("FramebufferUpdate, " + FBU.rects + " rects");
             FBU.bytes = 0;
             FBU.arr = [];
         } else {
-            //debug("FramebufferUpdate continuation");
+            //console.log("FramebufferUpdate continuation");
         }
 
         if (data.length > 0 ) {
@@ -288,7 +392,7 @@ normal_msg: function (data) {
                 FBU.width  = FBU.arr.shift16();
                 FBU.height = FBU.arr.shift16();
                 FBU.encoding = parseInt(FBU.arr.shift32(), 10);
-                debug("encoding: " + FBU.encoding);
+                console.log("encoding: " + FBU.encoding);
                 switch (FBU.encoding) {
                     case 0:  // Raw
                         FBU.bytes = FBU.width * FBU.height * RFB.fb_Bpp;
@@ -300,14 +404,22 @@ normal_msg: function (data) {
                         FBU.bytes = 4 + RFB.fb_Bpp;
                         break;
                     case 5:  // hextile
-                        FBU.bytes = 1;  // No header; get it started
+                        FBU.bytes = 2;  // No header; get it started
+                        FBU.tiles_x = Math.ceil(FBU.width/16);
+                        FBU.tiles_y = Math.ceil(FBU.height/16);
+                        FBU.total_tiles = FBU.tiles_x * FBU.tiles_y;
+                        FBU.tiles = FBU.total_tiles;
+                        break;
+                    default:
+                        console.log("Unsupported encoding " + FBU.encoding);
+                        RFB.state = "failed";
                         break;
                 }
             }
-            //debug("FBU.arr.length: " + FBU.arr.length + ", FBU.bytes: " + FBU.bytes);
+            //console.log("FBU.arr.length: " + FBU.arr.length + ", FBU.bytes: " + FBU.bytes);
 
             if (FBU.arr.length >= FBU.bytes) {
-                //debug('Done rect:');
+                //console.log('Done rect:');
                 FBU.bytes = 0;
                 
                 switch (FBU.encoding) {
@@ -321,24 +433,25 @@ normal_msg: function (data) {
                 FBU.bytes = FBU.bytes - data.length;
                 break;
             }
+            if (RFB.state != "normal") return;
         }
 
-        //debug("Finished frame buffer update");
+        //console.log("Finished frame buffer update");
         break;
     case 1:  // SetColourMapEntries
-        debug("SetColourMapEntries");
+        console.log("SetColourMapEntries");
         break;
     case 2:  // Bell
-        debug("Bell");
+        console.log("Bell");
         break;
     case 3:  // ServerCutText
-        debug("ServerCutText");
+        console.log("ServerCutText");
         break;
     default:
-        debug("Unknown server message type: " + msg_type);
+        console.log("Unknown server message type: " + msg_type);
         break;
     }
-    //debug("<< normal_msg");
+    //console.log("<< normal_msg");
 },
 
 /*
@@ -346,7 +459,7 @@ normal_msg: function (data) {
  */
 
 setPixelFormat: function () {
-    debug(">> setPixelFormat");
+    console.log(">> setPixelFormat");
     var arr = [0];  // msg-type
     arr.push8(0);  // padding
     arr.push8(0);  // padding
@@ -368,28 +481,30 @@ setPixelFormat: function () {
     arr.push8(0);  // padding
     arr.push8(0);  // padding
     RFB.send_array(arr);
-    debug("<< setPixelFormat");
+    console.log("<< setPixelFormat");
 },
 
 fixColourMapEntries: function () {
 },
 
 setEncodings: function () {
-    debug(">> setEncodings");
+    console.log(">> setEncodings");
     var arr = [2]; // msg-type
     arr.push8(0);  // padding
-    arr.push16(3); // encoding count
-    //arr.push16(4); // encoding count
-    //arr.push32(5); // hextile encoding
+
+    //arr.push16(3); // encoding count
+    arr.push16(4); // encoding count
+    arr.push32(5); // hextile encoding
+
     arr.push32(2); // RRE encoding
     arr.push32(1); // copy-rect encoding
     arr.push32(0); // raw encoding
     RFB.send_array(arr);
-    debug("<< setEncodings");
+    console.log("<< setEncodings");
 },
 
 fbUpdateRequest: function (incremental, x, y, xw, yw) {
-    //debug(">> fbUpdateRequest");
+    //console.log(">> fbUpdateRequest");
     var arr = [3];  // msg-type
     arr.push8(incremental);
     arr.push16(x);
@@ -397,19 +512,19 @@ fbUpdateRequest: function (incremental, x, y, xw, yw) {
     arr.push16(xw);
     arr.push16(yw);
     RFB.send_array(arr);
-    //debug("<< fbUpdateRequest");
+    //console.log("<< fbUpdateRequest");
 },
 
 keyEvent: function (keysym, down) {
-    debug(">> keyEvent, keysym: " + keysym + ", down: " + down);
+    console.log(">> keyEvent, keysym: " + keysym + ", down: " + down);
     var arr = [4];  // msg-type
     arr.push8(down);
     arr.push16(0);
     arr.push32(keysym);
-    //debug("keyEvent array: " + arr);
+    //console.log("keyEvent array: " + arr);
     RFB.send_array(arr);
     RFB.fbUpdateRequest(1, 0, 0, RFB.fb_width, RFB.fb_height);
-    //debug("<< keyEvent");
+    //console.log("<< keyEvent");
 },
 
 pointerEvent: function () {
@@ -424,14 +539,14 @@ clientCutText: function () {
  */
 
 send_string: function (str) {
-    //debug(">> send_string: " + str);
+    //console.log(">> send_string: " + str);
     var arr = str.split('').map(function (chr) {
             return chr.charCodeAt(0) } );
     RFB.send_array(arr);
 },
 
 send_array: function (arr) {
-    //debug(">> send_array: " + Base64.encode_array(arr));
+    //console.log(">> send_array: " + Base64.encode_array(arr));
     RFB.ws.send(Base64.encode_array(arr));
 },
 
@@ -460,13 +575,13 @@ poller: function () {
 },
 
 keyDown: function (e) {
-    //debug(">> keyDown: " + e.key + "(" + e.code + ")");
+    //console.log(">> keyDown: " + e.key + "(" + e.code + ")");
     e.stop();
     RFB.keyEvent(Canvas.getKeysym(e), 1);
 },
 
 keyUp: function (e) {
-    //debug(">> keyUp: " + e.key + "(" + e.code + ")");
+    //console.log(">> keyUp: " + e.key + "(" + e.code + ")");
     e.stop();
     RFB.keyEvent(Canvas.getKeysym(e), 0);
 },
@@ -477,14 +592,14 @@ keyUp: function (e) {
  */
 
 init_ws: function () {
-    debug(">> init_ws");
+    console.log(">> init_ws");
     var uri = "ws://" + RFB.host + ":" + RFB.port;
-    debug("connecting to " + uri);
+    console.log("connecting to " + uri);
     RFB.ws = new WebSocket(uri);
     RFB.ws.onmessage = function(e) {
-        //debug(">> onmessage");
+        //console.log(">> onmessage");
         var data = Base64.decode_array(e.data);
-        //debug("decoded array: " + data);
+        //console.log("decoded array: " + data);
         if (RFB.state != 'normal') {
             RFB.init_msg(data);
         } else {
@@ -495,33 +610,33 @@ init_ws: function () {
             RFB.disconnect();
             RFB.init_ws();
         } else if (RFB.state == 'failed') {
-            debug("Giving up!");
+            console.log("Giving up!");
             RFB.disconnect();
         }
-        //debug("<< onmessage");
+        //console.log("<< onmessage");
     };
     RFB.ws.onopen = function(e) {
-        debug(">> onopen");
+        console.log(">> onopen");
         RFB.state = "ProtocolVersion";
-        debug("<< onopen");
+        console.log("<< onopen");
     };
     RFB.ws.onclose = function(e) {
-        debug(">> onclose");
+        console.log(">> onclose");
         RFB.state = "closed";
-        debug("<< onclose");
+        console.log("<< onclose");
     }
     RFB.poller.delay(RFB.poll_rate);
 
-    debug("<< init_ws");
+    console.log("<< init_ws");
 },
 
 connect: function () {
-    debug(">> connect");
+    console.log(">> connect");
     RFB.host = $('host').value;
     RFB.port = $('port').value;
     RFB.password = $('password').value;
     if ((!host) || (!port)) {
-        debug("must set host and port");
+        console.log("must set host and port");
         return;
     }
     if (RFB.ws) {
@@ -530,12 +645,12 @@ connect: function () {
     RFB.init_ws();
     $('connectButton').value = "Disconnect";
     $('connectButton').onclick = RFB.disconnect;
-    debug("<< connect");
+    console.log("<< connect");
 
 },
 
 disconnect: function () {
-    debug(">> disconnect");
+    console.log(">> disconnect");
     if (RFB.ws) {
         RFB.ws.close();
     }
@@ -545,7 +660,7 @@ disconnect: function () {
     $('connectButton').value = "Connect";
     $('connectButton').onclick = RFB.connect;
     $('status').innerHTML = "Disconnected";
-    debug("<< disconnect");
+    console.log("<< disconnect");
 }
 
 }; /* End of RFB */