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.

diff --git a/include/input.js b/include/input.js
index 47b6d772df29376d1d4b7c899396038c2ad12584..6c7fecf562b7dd7ee47b182a11696ef81dfc7ec9 100644 (file)
--- a/include/input.js
+++ b/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);

diff --git a/include/ui.js b/include/ui.js
index df66da82d4f568b47daf052e6a4f78d03906240a..f3388ebd9effbf4b8dfdcb44418c9e0f88a78a13 100644 (file)
--- a/include/ui.js
+++ b/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');

diff --git a/include/util.js b/include/util.js
index 738c7bb91c02dece4e11c1cd65978c3f70354a96..0a9e0e01c90aa2eae22645e6213b89a62dce9df6 100644 (file)
--- a/include/util.js
+++ b/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;

diff --git a/tests/input.html b/tests/input.html
index f89faf90529a6e701f2e2715c14d0f05ca216b06..248d24e70160db8f23db6289062d0e0443745b14 100644 (file)
--- a/tests/input.html
+++ b/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>