• Joel Martin's avatar
    Touch events and mouse button selectors. · ad3f7624
    Joel Martin authored
    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.
    ad3f7624
input.html 3.99 KB
<!DOCTYPE html>
<html>
    <head><title>Input Test</title></head>
    <body>
        <br><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.
        </canvas>

        <br>
        Results:<br>
        <textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
    </body>

    <!--
    <script type='text/javascript' 
        src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    -->
    <script src="../include/util.js"></script>
    <script src="../include/webutil.js"></script> 
    <script src="../include/base64.js"></script>
    <script src="../include/input.js"></script> 
    <script src="../include/display.js"></script>
    <script>
        var msg_cnt = 0, iterations,
            width = 400, height = 200,
            canvas, keyboard, mouse;

        var newline = "\n";
        if (Util.Engine.trident) {
            var newline = "<br>\n";
        }

        function message(str) {
            console.log(str);
            cell = $D('messages');
            cell.innerHTML += msg_cnt + ": " + str + newline;
            cell.scrollTop = cell.scrollHeight;
            msg_cnt++;
        }

        function mouseButton(x, y, down, bmask) {
            msg = 'mouse x,y: ' + x + ',' + y + '  down: ' + down;
            msg += ' bmask: ' + bmask;
            message(msg);
        }

        function mouseMove(x, y) {
            msg = 'mouse x,y: ' + x + ',' + y;
            //console.log(msg);
        }

        function keyPress(keysym, down, e) {
            var d = down ? "down" : " up ";
            msg = "keyPress " + d + " keysym: " + keysym +
                  " (key: " + e.keyCode + ", char: " + e.charCode +
                  ", which: " + e.which +")";
            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() {
            canvas = new Display({'target' : $D('canvas')});
            keyboard = new Keyboard({'target': document,
                                    'onKeyPress': keyPress});
            mouse    = new Mouse({'target': $D('canvas'),
                                'onMouseButton': mouseButton,
                                'onMouseMove': mouseMove});

            canvas.resize(width, height, true);
            keyboard.grab();
            mouse.grab();
            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>