Touch events and mouse button selectors.

First crack at supporting touch screen for devices like Android and
iOS tablets. Part of https://github.com/kanaka/noVNC/issues/48.

This change detects touch screen support and uses the touchstart,
touchmove, touchend events in place of the normal mouse events.

In order to support middle and right mouse clicks, if the device is
a touch device, then three toggle buttons are added to the UI
representing the left, middle and right mouse buttons. These select
which mouse button will be sent when the screen is touched. All the
buttons can be toggled off, in which case then the touch events only
move the mouse cursor rather than sending a mouse down and mouse up
for touchstart and touchend events respectively. This allows fairly
full control with the mouse on touch screens.

include/input.js

@@ -460,7 +460,8 @@ Util.conf_defaults(conf, that, defaults, [
     ['scale',          'rw', 'float', 1.0, 'Viewport scale factor 0.0 - 1.0'],
 
     ['onMouseButton',  'rw', 'func', null, 'Handler for mouse button click/release'],
-    ['onMouseMove',    'rw', 'func', null, 'Handler for mouse movement']
+    ['onMouseMove',    'rw', 'func', null, 'Handler for mouse movement'],
+    ['touchButton',    'rw', 'int', 1, 'Button mask (1, 2, 4) for touch devices (0 means ignore clicks)']
     ]);
 
 
@@ -475,7 +476,11 @@ function onMouseButton(e, down) {
     }
     evt = (e ? e : window.event);
     pos = Util.getEventPosition(e, conf.target, conf.scale);
-    if (evt.which) {
+    if (e.touches || e.changedTouches) {
+        // Touch device
+        bmask = conf.touchButton;
+        // If bmask is set
+    } else if (evt.which) {
         /* everything except IE */
         bmask = 1 << evt.button;
     } else {
@@ -486,7 +491,7 @@ function onMouseButton(e, down) {
     }
     //Util.Debug("mouse " + pos.x + "," + pos.y + " down: " + down +
     //           " bmask: " + bmask + "(evt.button: " + evt.button + ")");
-    if (conf.onMouseButton) {
+    if (bmask > 0 && conf.onMouseButton) {
         Util.Debug("onMouseButton " + (down ? "down" : "up") +
                    ", x: " + pos.x + ", y: " + pos.y + ", bmask: " + bmask);
         conf.onMouseButton(pos.x, pos.y, down, bmask);
@@ -536,6 +541,8 @@ function onMouseMove(e) {
     if (conf.onMouseMove) {
         conf.onMouseMove(pos.x, pos.y);
     }
+    Util.stopEvent(e);
+    return false;
 }
 
 function onMouseDisable(e) {
@@ -565,11 +572,17 @@ that.grab = function() {
     //Util.Debug(">> Mouse.grab");
     var c = conf.target;
 
-    Util.addEvent(c, 'mousedown', onMouseDown);
-    Util.addEvent(c, 'mouseup', onMouseUp);
-    Util.addEvent(c, 'mousemove', onMouseMove);
-    Util.addEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
-            onMouseWheel);
+    if ('ontouchstart' in document.documentElement) {
+        Util.addEvent(c, 'touchstart', onMouseDown);
+        Util.addEvent(c, 'touchend', onMouseUp);
+        Util.addEvent(c, 'touchmove', onMouseMove);
+    } else {
+        Util.addEvent(c, 'mousedown', onMouseDown);
+        Util.addEvent(c, 'mouseup', onMouseUp);
+        Util.addEvent(c, 'mousemove', onMouseMove);
+        Util.addEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
+                onMouseWheel);
+    }
 
     /* Work around right and middle click browser behaviors */
     Util.addEvent(document, 'click', onMouseDisable);
@@ -582,11 +595,17 @@ that.ungrab = function() {
     //Util.Debug(">> Mouse.ungrab");
     var c = conf.target;
 
-    Util.removeEvent(c, 'mousedown', onMouseDown);
-    Util.removeEvent(c, 'mouseup', onMouseUp);
-    Util.removeEvent(c, 'mousemove', onMouseMove);
-    Util.removeEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
-            onMouseWheel);
+    if ('ontouchstart' in document.documentElement) {
+        Util.removeEvent(c, 'touchstart', onMouseDown);
+        Util.removeEvent(c, 'touchend', onMouseUp);
+        Util.removeEvent(c, 'touchmove', onMouseMove);
+    } else {
+        Util.removeEvent(c, 'mousedown', onMouseDown);
+        Util.removeEvent(c, 'mouseup', onMouseUp);
+        Util.removeEvent(c, 'mousemove', onMouseMove);
+        Util.removeEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel',
+                onMouseWheel);
+    }
 
     /* Work around right and middle click browser behaviors */
     Util.removeEvent(document, 'click', onMouseDisable);

include/ui.js

@@ -54,6 +54,19 @@ load: function(target) {
     html += '  <div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">';
     html += '    <table border=0 width=100%><tr>';
     html += '      <td><div id="VNC_status">Loading</div></td>';
+
+    // Mouse button selectors for touch devices
+    html += '      <td width=1%><div class="VNC_buttons_right">';
+    html += '        <nobr><span id="VNC_mouse_buttons" style="display: none;">';
+    html += '          <input type="button" class="VNC_status_button"';
+    html += '            id="VNC_mouse_button1" value="L" onclick="UI.setMouseButton(1);"';
+    html += '            ><input type="button" class="VNC_status_button"';
+    html += '            id="VNC_mouse_button2" value="M" onclick="UI.setMouseButton(2);"';
+    html += '            ><input type="button" class="VNC_status_button"';
+    html += '            id="VNC_mouse_button4" value="R" onclick="UI.setMouseButton(4);">';
+    html += '        </span></nobr></div></td>';
+
+    // Settings drop-down menu
     html += '      <td width=1%><div class="VNC_buttons_right">';
     html += '        <input type=button class="VNC_status_button" value="Settings"';
     html += '          id="menuButton"';
@@ -97,10 +110,13 @@ load: function(target) {
     html += '                onclick="UI.settingsApply()"></li>';
     html += '          </ul>';
     html += '        </span></div></td>';
+
+    // CtrlAltDel Button
     html += '      <td width=1%><div class="VNC_buttons_right">';
-    html += '        <input type=button class="VNC_status_button" value="Send CtrlAltDel"';
+    html += '        <input type=button class="VNC_status_button" value="CtrlAltDel"';
     html += '          id="sendCtrlAltDelButton"';
     html += '          onclick="UI.sendCtrlAltDel();"></div></td>';
+
     html += '    </tr></table>';
     html += '  </div>';
     html += '  <canvas id="VNC_canvas" width="640px" height="20px">';
@@ -151,6 +167,12 @@ load: function(target) {
             }
         };
 
+    // Show mouse selector buttons on touch screen devices
+    if ('ontouchstart' in document.documentElement) {
+        $D('VNC_mouse_buttons').style.display = "inline";
+        UI.setMouseButton();
+    }
+
 },
 
 // Read form control compatible setting from cookie
@@ -307,6 +329,35 @@ sendCtrlAltDel: function() {
     UI.rfb.sendCtrlAltDel();
 },
 
+setMouseButton: function(num) {
+    var b, blist = [1,2,4], button,
+        mouse = UI.rfb.get_mouse();
+
+    if (typeof num === 'undefined') {
+        // Show the default
+        num = mouse.get_touchButton();
+    } else if (num === mouse.get_touchButton()) {
+        // Set all buttons off (no clicks)
+        mouse.set_touchButton(0);
+        num = 0;
+    } else {
+        // Turn on one button
+        mouse.set_touchButton(num);
+    }
+
+    for (b = 0; b < blist.length; b++) {
+        button = $D('VNC_mouse_button' + blist[b]);
+        if (blist[b] === num) {
+            button.style.backgroundColor = "black";
+            button.style.color = "lightgray";
+        } else {
+            button.style.backgroundColor = "";
+            button.style.color = "";
+        }
+    }
+
+},
+
 updateState: function(rfb, state, oldstate, msg) {
     var s, sb, c, cad, klass;
     s = $D('VNC_status');

include/util.js

@@ -184,6 +184,7 @@ Util.getEventPosition = function (e, obj, scale) {
     var evt, docX, docY, pos;
     //if (!e) evt = window.event;
     evt = (e ? e : window.event);
+    evt = (evt.changedTouches ? evt.changedTouches[0] : evt.touches ? evt.touches[0] : evt);
     if (evt.pageX || evt.pageY) {
         docX = evt.pageX;
         docY = evt.pageY;

tests/input.html

@@ -4,7 +4,11 @@
     <body>
         <br><br>
 
-        Canvas:<br>
+        Canvas:
+        <span id="button-selection" style="display: none;">
+            <input id="button1" type="button" value="L"><input id="button2" type="button" value="M"><input id="button4" type="button" value="R">
+        </span>
+        <br>
         <canvas id="canvas" width="640" height="20"
                 style="border-style: dotted; border-width: 1px;">
             Canvas not supported.
@@ -23,11 +27,11 @@
     <script src="../include/webutil.js"></script> 
     <script src="../include/base64.js"></script>
     <script src="../include/input.js"></script> 
-    <script src="../include/canvas.js"></script>
+    <script src="../include/display.js"></script>
     <script>
-        var msg_cnt = 0;
-        var width = 400, height = 200;
-        var iterations;
+        var msg_cnt = 0, iterations,
+            width = 400, height = 200,
+            canvas, keyboard, mouse;
 
         var newline = "\n";
         if (Util.Engine.trident) {
@@ -61,17 +65,54 @@
             message(msg);
         }
 
+        function selectButton(num) {
+            var b, blist = [1,2,4];
+
+            if (typeof num === 'undefined') {
+                // Show the default
+                num = mouse.get_touchButton();
+            } else if (num === mouse.get_touchButton()) {
+                // Set all buttons off (no clicks)
+                mouse.set_touchButton(0);
+                num = 0;
+            } else {
+                // Turn on one button
+                mouse.set_touchButton(num);
+            }
+
+            for (b = 0; b < blist.length; b++) {
+                if (blist[b] === num) {
+                    $D('button' + blist[b]).style.backgroundColor = "black";
+                    $D('button' + blist[b]).style.color = "lightgray";
+                } else {
+                    $D('button' + blist[b]).style.backgroundColor = "";
+                    $D('button' + blist[b]).style.color = "";
+                }
+            }
+        }
+
         window.onload = function() {
-            var canvas = new Canvas({'target' : $D('canvas')});
+            canvas = new Display({'target' : $D('canvas')});
             keyboard = new Keyboard({'target': document,
-                                    'keyPress': keyPress});
+                                    'onKeyPress': keyPress});
             mouse    = new Mouse({'target': $D('canvas'),
-                                'mouseButton': mouseButton,
-                                'mouseMove': mouseMove});
+                                'onMouseButton': mouseButton,
+                                'onMouseMove': mouseMove});
+
             canvas.resize(width, height, true);
             keyboard.grab();
             mouse.grab();
-            message("Canvas initialized");
+            message("Display initialized");
+
+            if ('ontouchstart' in document.documentElement) {
+                message("Touch device detected");
+                $D('button-selection').style.display = "inline";
+                $D('button1').onclick = function(){ selectButton(1) };
+                $D('button2').onclick = function(){ selectButton(2) };
+                $D('button4').onclick = function(){ selectButton(4) };
+                selectButton();
+            }
+
         }
     </script>
 </html>