Make compatible with jQuery. Slight API change.

Rename the $() selector to $D() so that it doesn't collide with
the jQuery name.

The API change is that the 'target' option for Canvas and RFB objects
must now be a DOM Canvas element. A string is no longer accepted
because this requires that a DOM lookup is done and the Canvas and RFB
should have no UI code in them. Modularity.

include/canvas.js

@@ -99,7 +99,7 @@ function constructor() {
     if (! conf.target) { throw("target must be set"); }
 
     if (typeof conf.target === 'string') {
-        conf.target = window.$(conf.target);
+        throw("target must be a DOM element");
     }
 
     c = conf.target;
@@ -215,7 +215,7 @@ function constructor() {
     return that ;
 }
 
-/* Translate DOM key event to keysym value */
+/* Translate DOM key down/up event to keysym value */
 function getKeysym(e) {
     var evt, keysym;
     evt = (e ? e : window.event);

include/rfb.js

@@ -127,13 +127,13 @@ var that           = {},         // Public API interface
 function cdef(v, type, defval, desc) {
     Util.conf_default(conf, that, v, type, defval, desc); }
 
-cdef('target',         'str', 'VNC_canvas', 'VNC viewport rendering Canvas');
-cdef('focusContainer', 'dom', document, 'Area that traps keyboard input');
+cdef('target',            'str', null, 'VNC viewport rendering Canvas');
+cdef('focusContainer',    'dom', document, 'Area that traps keyboard input');
 
-cdef('encrypt',        'bool', false, 'Use TLS/SSL/wss encryption');
-cdef('true_color',     'bool', true,  'Request true color pixel data');
-cdef('local_cursor',   'bool', false, 'Request locally rendered cursor');
-cdef('shared',         'bool', true,  'Request shared mode');
+cdef('encrypt',         'bool', false, 'Use TLS/SSL/wss encryption');
+cdef('true_color',      'bool', true,  'Request true color pixel data');
+cdef('local_cursor',    'bool', false, 'Request locally rendered cursor');
+cdef('shared',          'bool', true,  'Request shared mode');
 
 cdef('connectTimeout',    'int', 2,    'Time (s) to wait for connection');
 cdef('disconnectTimeout', 'int', 3,    'Time (s) to wait for disconnection');

include/ui.js

@@ -18,7 +18,11 @@ load: function(target) {
     var html = '', i, sheet, sheets, llevels;
 
     /* Populate the 'target' DOM element with default UI */
-    if (!target) { target = 'vnc'; }
+    if (!target) {
+        target = $D('vnc');
+    } else if (typeof target === 'string') {
+        target = $D(target);
+    }
 
     if ((!document.createElement('canvas').getContext) &&
         window.ActiveXObject) {
@@ -31,7 +35,7 @@ load: function(target) {
         html += '  <a href="http://google.com/chromeframe" target="cframe">';
         html += '  Google Chrome Frame.</a>';
         html += '</div></center>';
-        $(target).innerHTML = html;
+        target.innerHTML = html;
         return;
     }
 
@@ -114,7 +118,7 @@ load: function(target) {
     html += '    onblur="UI.canvasFocus();"';
     html += '    onchange="UI.clipSend();"></textarea>';
     html += '</div>';
-    $(target).innerHTML = html;
+    target.innerHTML = html;
 
     // Settings with immediate effects
     UI.initSetting('logging', 'warn');
@@ -134,15 +138,15 @@ load: function(target) {
     UI.initSetting('shared', true);
     UI.initSetting('connectTimeout', 2);
 
-    UI.rfb = RFB({'target': 'VNC_canvas',
+    UI.rfb = RFB({'target': $D('VNC_canvas'),
                   'updateState': UI.updateState,
                   'clipboardReceive': UI.clipReceive});
 
     // Unfocus clipboard when over the VNC area
-    $('VNC_screen').onmousemove = function () {
+    $D('VNC_screen').onmousemove = function () {
             var canvas = UI.rfb.get_canvas();
             if ((! canvas) || (! canvas.get_focused())) {
-                $('VNC_clipboard_text').blur();
+                $D('VNC_clipboard_text').blur();
             }
         };
 
@@ -150,7 +154,7 @@ load: function(target) {
 
 // Read form control compatible setting from cookie
 getSetting: function(name) {
-    var val, ctrl = $('VNC_' + name);
+    var val, ctrl = $D('VNC_' + name);
     val = WebUtil.readCookie(name);
     if (ctrl.type === 'checkbox') {
         if (val.toLowerCase() in {'0':1, 'no':1, 'false':1}) {
@@ -165,7 +169,7 @@ getSetting: function(name) {
 // Update cookie and form control setting. If value is not set, then
 // updates from control to current cookie setting.
 updateSetting: function(name, value) {
-    var i, ctrl = $('VNC_' + name);
+    var i, ctrl = $D('VNC_' + name);
     // Save the cookie for this session
     if (typeof value !== 'undefined') {
         WebUtil.createCookie(name, value);
@@ -189,7 +193,7 @@ updateSetting: function(name, value) {
 
 // Save control setting to cookie
 saveSetting: function(name) {
-    var val, ctrl = $('VNC_' + name);
+    var val, ctrl = $D('VNC_' + name);
     if (ctrl.type === 'checkbox') {
         val = ctrl.checked;
     } else if (typeof ctrl.options !== 'undefined') {
@@ -232,7 +236,7 @@ clickSettingsMenu: function() {
             UI.updateSetting('cursor');
         } else {
             UI.updateSetting('cursor', false);
-            $('VNC_cursor').disabled = true;
+            $D('VNC_cursor').disabled = true;
         }
         UI.updateSetting('shared');
         UI.updateSetting('connectTimeout');
@@ -245,29 +249,29 @@ clickSettingsMenu: function() {
 
 // Open menu
 openSettingsMenu: function() {
-    $('VNC_settings_menu').style.display = "block";
+    $D('VNC_settings_menu').style.display = "block";
     UI.settingsOpen = true;
 },
 
 // Close menu (without applying settings)
 closeSettingsMenu: function() {
-    $('VNC_settings_menu').style.display = "none";
+    $D('VNC_settings_menu').style.display = "none";
     UI.settingsOpen = false;
 },
 
 // Disable/enable controls depending on connection state
 settingsDisabled: function(disabled, rfb) {
     //Util.Debug(">> settingsDisabled");
-    $('VNC_encrypt').disabled = disabled;
-    $('VNC_true_color').disabled = disabled;
+    $D('VNC_encrypt').disabled = disabled;
+    $D('VNC_true_color').disabled = disabled;
     if (rfb && rfb.get_canvas() && rfb.get_canvas().get_cursor_uri()) {
-        $('VNC_cursor').disabled = disabled;
+        $D('VNC_cursor').disabled = disabled;
     } else {
         UI.updateSetting('cursor', false);
-        $('VNC_cursor').disabled = true;
+        $D('VNC_cursor').disabled = true;
     }
-    $('VNC_shared').disabled = disabled;
-    $('VNC_connectTimeout').disabled = disabled;
+    $D('VNC_shared').disabled = disabled;
+    $D('VNC_connectTimeout').disabled = disabled;
     //Util.Debug("<< settingsDisabled");
 },
 
@@ -294,7 +298,7 @@ settingsApply: function() {
 
 
 setPassword: function() {
-    UI.rfb.sendPassword($('VNC_password').value);
+    UI.rfb.sendPassword($D('VNC_password').value);
     return false;
 },
 
@@ -304,10 +308,10 @@ sendCtrlAltDel: function() {
 
 updateState: function(rfb, state, oldstate, msg) {
     var s, sb, c, cad, klass;
-    s = $('VNC_status');
-    sb = $('VNC_status_bar');
-    c = $('VNC_connect_button');
-    cad = $('sendCtrlAltDelButton');
+    s = $D('VNC_status');
+    sb = $D('VNC_status_bar');
+    c = $D('VNC_connect_button');
+    cad = $D('sendCtrlAltDelButton');
     switch (state) {
         case 'failed':
         case 'fatal':
@@ -361,7 +365,7 @@ updateState: function(rfb, state, oldstate, msg) {
 
 clipReceive: function(rfb, text) {
     Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "...");
-    $('VNC_clipboard_text').value = text;
+    $D('VNC_clipboard_text').value = text;
     Util.Debug("<< UI.clipReceive");
 },
 
@@ -371,9 +375,9 @@ connect: function() {
 
     UI.closeSettingsMenu();
 
-    host = $('VNC_host').value;
-    port = $('VNC_port').value;
-    password = $('VNC_password').value;
+    host = $D('VNC_host').value;
+    port = $D('VNC_port').value;
+    password = $D('VNC_password').value;
     if ((!host) || (!port)) {
         throw("Must set host and port");
     }
@@ -402,12 +406,12 @@ canvasFocus: function() {
 },
 
 clipClear: function() {
-    $('VNC_clipboard_text').value = "";
+    $D('VNC_clipboard_text').value = "";
     UI.rfb.clipboardPasteFrom("");
 },
 
 clipSend: function() {
-    var text = $('VNC_clipboard_text').value;
+    var text = $D('VNC_clipboard_text').value;
     Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "...");
     UI.rfb.clipboardPasteFrom(text);
     Util.Debug("<< UI.clipSend");

include/webutil.js

@@ -16,8 +16,8 @@ var WebUtil = {}, $;
 /*
  * Simple DOM selector by ID
  */
-if (!window.$) {
-    $ = function (id) {
+if (!window.$D) {
+    $D = function (id) {
         if (document.getElementById) {
             return document.getElementById(id);
         } else if (document.all) {

tests/base64.html

@@ -19,7 +19,7 @@
 <script> 
     function debug(str) {
         console.log(str);
-        cell = $('debug');
+        cell = $D('debug');
         cell.innerHTML += str + "\n";
         cell.scrollTop = cell.scrollHeight;
     }

tests/canvas.html

@@ -40,7 +40,7 @@
 
         function message(str) {
             console.log(str);
-            cell = $('messages');
+            cell = $D('messages');
             cell.innerHTML += msg_cnt + ": " + str + "\n";
             cell.scrollTop = cell.scrollHeight;
             msg_cnt += 1;
@@ -80,10 +80,10 @@
         }
 
         function begin () {
-            $('startButton').value = "Running";
-            $('startButton').disabled = true;
+            $D('startButton').value = "Running";
+            $D('startButton').disabled = true;
             setTimeout(start_delayed, 250);
-            iterations = $('iterations').value;
+            iterations = $D('iterations').value;
         }
 
         function start_delayed () {
@@ -109,14 +109,14 @@
                 canvas.resize(start_width, start_height, true);
                 test_functions();
             }
-            $('startButton').disabled = false;
-            $('startButton').value = "Do Performance Test";
+            $D('startButton').disabled = false;
+            $D('startButton').value = "Do Performance Test";
         }
 
         function run_test () {
             var width, height;
-            width = $('width').value;
-            height = $('height').value;
+            width = $D('width').value;
+            height = $D('height').value;
             canvas.resize(width, height);
             var color, start_time = (new Date()).getTime(), w, h;
             for (var i=0; i < iterations; i++) {
@@ -137,8 +137,8 @@
 
         window.onload = function() {
             message("in onload");
-            $('iterations').value = 10;
-            canvas = Canvas({'target' : 'canvas'});
+            $D('iterations').value = 10;
+            canvas = new Canvas({'target' : $D('canvas')});
             canvas.resize(start_width, start_height, true);
             message("Canvas initialized");
             test_functions();

tests/cursor.html

@@ -34,7 +34,7 @@
   <script> 
     function debug(str) {
         console.log(str);
-        cell = $('debug');
+        cell = $D('debug');
         cell.innerHTML += str + "\n";
         cell.scrollTop = cell.scrollHeight;
     }
@@ -119,16 +119,16 @@
         debug("onload");
         var canvas, cross, cursor, cursor64;
 
-        canvas = new Canvas({'target' : "testcanvas"});
+        canvas = new Canvas({'target' : $D("testcanvas")});
         debug("canvas indicates Data URI cursor support is: " + canvas.get_cursor_uri());
 
-        $('button1').style.cursor="url(face.png), default";
+        $D('button1').style.cursor="url(face.png), default";
 
         cursor = makeCursor();
         cursor64 = Base64.encode(cursor);
         //debug("cursor: " + cursor.slice(0,100) + " (" + cursor.length + ")");
         //debug("cursor64: " + cursor64.slice(0,100) + " (" + cursor64.length + ")");
-        $('button2').style.cursor="url(data:image/x-icon;base64," + cursor64 + "), default";
+        $D('button2').style.cursor="url(data:image/x-icon;base64," + cursor64 + "), default";
 
         debug("onload complete");
     }

tests/input.html

@@ -29,7 +29,7 @@
 
         function message(str) {
             console.log(str);
-            cell = $('messages');
+            cell = $D('messages');
             cell.innerHTML += msg_cnt + ": " + str + "\n";
             cell.scrollTop = cell.scrollHeight;
         }
@@ -53,7 +53,7 @@
         }
 
         window.onload = function() {
-            var canvas = Canvas({'target' : 'canvas'});
+            var canvas = new Canvas({'target' : $D('canvas')});
             canvas.resize(width, height, true);
             canvas.start(keyPress, mouseButton, mouseMove);
             message("Canvas initialized");

tests/vnc_perf.html

@@ -47,7 +47,7 @@
 
         function msg(str) {
             console.log(str);
-            var cell = $('messages');
+            var cell = $D('messages');
             cell.innerHTML += str + "\n";
             cell.scrollTop = cell.scrollHeight;
         }
@@ -68,20 +68,20 @@
                     test_state = 'failed';
                     break;
                 case 'loaded':
-                    $('startButton').disabled = false;
+                    $D('startButton').disabled = false;
                     break;
             }
             if (typeof mesg !== 'undefined') {
-                $('VNC_status').innerHTML = mesg;
+                $D('VNC_status').innerHTML = mesg;
             }
         }
 
         function start() {
-            $('startButton').value = "Running";
-            $('startButton').disabled = true;
+            $D('startButton').value = "Running";
+            $D('startButton').disabled = true;
 
             mode = 'perftest'; // full-speed
-            passes = $('passes').value;
+            passes = $D('passes').value;
             pass = 1;
             encIdx = 0;
 
@@ -123,8 +123,8 @@
                 if (pass > passes) {
                     // We are finished
                     rfb.get_canvas().stop();   // Shut-off event interception
-                    $('startButton').disabled = false;
-                    $('startButton').value = "Start";
+                    $D('startButton').disabled = false;
+                    $D('startButton').value = "Start";
                     finish_passes();
                     return; // We are finished, terminate
                 }
@@ -189,8 +189,8 @@
                 enc = encOrder[i];
                 dbgmsg("  " + enc + ": " + VNC_frame_data_multi[enc].length);
             }
-            rfb = RFB({'target': 'VNC_canvas',
-                    'updateState': updateState});
+            rfb = new RFB({'target': $D('VNC_canvas'),
+                           'updateState': updateState});
             rfb.testMode(send_array);
         }
     </script>

tests/vnc_playback.html

@@ -45,7 +45,7 @@
 
         function message(str) {
             console.log(str);
-            var cell = $('messages');
+            var cell = $D('messages');
             cell.innerHTML += str + "\n";
             cell.scrollTop = cell.scrollHeight;
         }
@@ -67,23 +67,23 @@
                     test_state = 'failed';
                     break;
                 case 'loaded':
-                    $('startButton').disabled = false;
+                    $D('startButton').disabled = false;
                     break;
             }
             if (typeof msg !== 'undefined') {
-                $('VNC_status').innerHTML = msg;
+                $D('VNC_status').innerHTML = msg;
             }
         }
 
         function start() {
-            $('startButton').value = "Running";
-            $('startButton').disabled = true;
+            $D('startButton').value = "Running";
+            $D('startButton').disabled = true;
 
-            iterations = $('iterations').value;
+            iterations = $D('iterations').value;
             iteration = 0;
             start_time = (new Date()).getTime();
 
-            if ($('mode1').checked) {
+            if ($D('mode1').checked) {
                 message("Starting performance playback (fullspeed) [" + iterations + " iteration(s)]");
                 mode = 'perftest';
             } else {
@@ -103,24 +103,24 @@
             message(iterations + " iterations took " + total_time + "ms, " +
                     iter_time + "ms per iteration");
             rfb.get_canvas().stop();   // Shut-off event interception
-            $('startButton').disabled = false;
-            $('startButton').value = "Start";
+            $D('startButton').disabled = false;
+            $D('startButton').value = "Start";
 
         }
 
         window.onload = function() {
             iterations = WebUtil.getQueryVar('iterations', 3);
-            $('iterations').value = iterations;
+            $D('iterations').value = iterations;
             mode = WebUtil.getQueryVar('mode', 3);
             if (mode === 'realtime') {
-                $('mode2').checked = true;
+                $D('mode2').checked = true;
             } else {
-                $('mode1').checked = true;
+                $D('mode1').checked = true;
             }
             if (fname) {
                 message("VNC_frame_data.length: " + VNC_frame_data.length);
-                rfb = RFB({'target': 'VNC_canvas',
-                        'updateState': updateState});
+                rfb = new RFB({'target': $D('VNC_canvas'),
+                               'updateState': updateState});
                 rfb.testMode(send_array);
             }
         }

tests/ws.html

@@ -47,7 +47,7 @@
 
         function error(str) {
             console.error(str);
-            cell = $('error');
+            cell = $D('error');
             cell.innerHTML += errors + ": " + str + "\n";
             cell.scrollTop = cell.scrollHeight;
         }
@@ -147,15 +147,15 @@
         }
 
         function update_stats() {
-            $('sent').innerHTML = sent;
-            $('received').innerHTML = received;
-            $('errors').innerHTML = errors;
+            $D('sent').innerHTML = sent;
+            $D('received').innerHTML = received;
+            $D('errors').innerHTML = errors;
         }
 
         function init_ws() {
             console.log(">> init_ws");
             var scheme = "ws://";
-            if ($('encrypt').checked) {
+            if ($D('encrypt').checked) {
                 scheme = "wss://";
             }
             var uri = scheme + host + ":" + port;
@@ -188,9 +188,9 @@
 
         function connect() {
             console.log(">> connect");
-            host = $('host').value;
-            port = $('port').value;
-            sendDelay = parseInt($('sendDelay').value, 10);
+            host = $D('host').value;
+            port = $D('port').value;
+            sendDelay = parseInt($D('sendDelay').value, 10);
             if ((!host) || (!port)) {
                 console.log("must set host and port");
                 return;
@@ -202,8 +202,8 @@
             init_ws();
             update_ref = setInterval(update_stats, 1);
 
-            $('connectButton').value = "Stop";
-            $('connectButton').onclick = disconnect;
+            $D('connectButton').value = "Stop";
+            $D('connectButton').onclick = disconnect;
             console.log("<< connect");
         }
 
@@ -218,8 +218,8 @@
             recv_seq = 0;
             send_seq = 0;
 
-            $('connectButton').value = "Start";
-            $('connectButton').onclick = connect;
+            $D('connectButton').value = "Start";
+            $D('connectButton').onclick = connect;
             console.log("<< disconnect");
         }
 
@@ -244,8 +244,8 @@
                 WebSocket.__initialize();
             }
             var url = document.location.href;
-            $('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
-            $('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
+            $D('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
+            $D('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
         }
     </script>
 

tests/wsencoding.html

@@ -34,7 +34,7 @@
 
         function message(str) {
             console.log(str);
-            cell = $('messages');
+            cell = $D('messages');
             cell.innerHTML += str + "\n";
             cell.scrollTop = cell.scrollHeight;
         }
@@ -65,7 +65,7 @@
         function init_ws() {
             console.log(">> init_ws");
             var scheme = "ws://";
-            if ($('encrypt').checked) {
+            if ($D('encrypt').checked) {
                 scheme = "wss://";
             }
             var uri = scheme + host + ":" + port;
@@ -97,8 +97,8 @@
 
         function connect() {
             console.log(">> connect");
-            host = $('host').value;
-            port = $('port').value;
+            host = $D('host').value;
+            port = $D('port').value;
             if ((!host) || (!port)) {
                 console.log("must set host and port");
                 return;
@@ -109,8 +109,8 @@
             }
             init_ws();
 
-            $('connectButton').value = "Stop";
-            $('connectButton').onclick = disconnect;
+            $D('connectButton').value = "Stop";
+            $D('connectButton').onclick = disconnect;
             console.log("<< connect");
         }
 
@@ -120,8 +120,8 @@
                 ws.close();
             }
 
-            $('connectButton').value = "Start";
-            $('connectButton').onclick = connect;
+            $D('connectButton').value = "Start";
+            $D('connectButton').onclick = connect;
             console.log("<< disconnect");
         }
 
@@ -143,8 +143,8 @@
                 WebSocket.__initialize();
             }
             var url = document.location.href;
-            $('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
-            $('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
+            $D('host').value = (url.match(/host=([^&#]*)/) || ['',''])[1];
+            $D('port').value = (url.match(/port=([^&#]*)/) || ['',''])[1];
         }
     </script>
 

vnc_auto.html

@@ -42,7 +42,7 @@
         var rfb;
 
         function setPassword() {
-            rfb.sendPassword($('password_input').value);
+            rfb.sendPassword($D('password_input').value);
             return false;
         }
         function sendCtrlAltDel() {
@@ -51,9 +51,9 @@
         }
         function updateState(rfb, state, oldstate, msg) {
             var s, sb, cad, klass;
-            s = $('VNC_status');
-            sb = $('VNC_status_bar');
-            cad = $('sendCtrlAltDelButton');
+            s = $D('VNC_status');
+            sb = $D('VNC_status_bar');
+            cad = $D('sendCtrlAltDelButton');
             switch (state) {
                 case 'failed':
                 case 'fatal':
@@ -90,7 +90,7 @@
         window.onload = function () {
             var host, port, password;
 
-            $('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
+            $D('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
 
             host = WebUtil.getQueryVar('host', null);
             port = WebUtil.getQueryVar('port', null);
@@ -101,7 +101,8 @@
                 return;
             }
 
-            rfb = new RFB({'encrypt':      WebUtil.getQueryVar('encrypt', false),
+            rfb = new RFB({'target':       $D('VNC_canvas'),
+                           'encrypt':      WebUtil.getQueryVar('encrypt', false),
                            'true_color':   WebUtil.getQueryVar('true_color', true),
                            'local_cursor': WebUtil.getQueryVar('cursor', true),
                            'shared':       WebUtil.getQueryVar('shared', true),