<!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>