mirror of
https://github.com/novnc/noVNC.git
synced 2026-05-27 15:39:41 +00:00
ad3f762409
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.
119 lines
4.0 KiB
HTML
119 lines
4.0 KiB
HTML
<!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>
|