[mirror_novnc.git] / tests / input.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="../core/util.js"></script>
    <script src="../app/webutil.js"></script>
    <script src="../core/base64.js"></script>
    <script src="../core/input/keysym.js"></script>
    <script src="../core/input/keysymdef.js"></script>
    <script src="../core/input/xtscancodes.js"></script>
    <script src="../core/input/vkeys.js"></script>
    <script src="../core/input/util.js"></script>
    <script src="../core/input/keyboard.js"></script>
    <script src="../core/input/mouse.js"></script>
    <script src="../core/display.js"></script>
    <script>
        var msg_cnt = 0, iterations,
            width = 400, height = 200,
            canvas, keyboard, mouse;

        var newline = "\n";

        function message(str) {
            console.log(str);
            cell = document.getElementById('messages');
            cell.textContent += 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 rfbKeyEvent(keysym, code, down) {
            var d = down ? "down" : " up ";
            var msg = "RFB key event " + d + " keysym: " + keysym + " code: " + code;
            message(msg);
        }
        function rawKey(e) {
            msg = "raw key event " + e.type +
                  " (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) {
                    document.getElementById('button' + blist[b]).style.backgroundColor = "black";
                    document.getElementById('button' + blist[b]).style.color = "lightgray";
                } else {
                    document.getElementById('button' + blist[b]).style.backgroundColor = "";
                    document.getElementById('button' + blist[b]).style.color = "";
                }
            }
        }

        window.onload = function() {
            canvas = new Display({'target' : document.getElementById('canvas')});
            keyboard = new Keyboard({'target': document,
                                    'onKeyEvent': rfbKeyEvent});
            document.addEventListener('keypress', rawKey);
            document.addEventListener('keydown', rawKey);
            document.addEventListener('keyup', rawKey);
            mouse    = new Mouse({'target': document.getElementById('canvas'),
                                'onMouseButton': mouseButton,
                                'onMouseMove': mouseMove});

            canvas.resize(width, height, true);
            keyboard.grab();
            mouse.grab();
            message("Display initialized");

            if (Util.isTouchDevice) {
                message("Touch device detected");
                document.getElementById('button-selection').style.display = "inline";
                document.getElementById('button1').onclick = function(){ selectButton(1) };
                document.getElementById('button2').onclick = function(){ selectButton(2) };
                document.getElementById('button4').onclick = function(){ selectButton(4) };
                selectButton();
            }

        }
    </script>
</html>
Commit	Line	Data
f8990704	1	<!DOCTYPE html>
a575a383 JM	2	<html>
	3	<head><title>Input Test</title></head>
	4	<body>
	5	<br><br>
	6
ad3f7624 JM	7	Canvas:
	8	<span id="button-selection" style="display: none;">
	9	<input id="button1" type="button" value="L"><input id="button2" type="button" value="M"><input id="button4" type="button" value="R">
	10	</span>
	11	<br>
a575a383 JM	12	<canvas id="canvas" width="640" height="20"
	13	style="border-style: dotted; border-width: 1px;">
	14	Canvas not supported.
	15	</canvas>
	16
	17	<br>
	18	Results:<br>
	19	<textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
	20	</body>
	21
	22	<!--
99feba6b	23	<script type='text/javascript'
a575a383 JM	24	src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
a575a383 JM	25	-->
ae510306 SR	26	<script src="../core/util.js"></script>
	27	<script src="../app/webutil.js"></script>
	28	<script src="../core/base64.js"></script>
bd5340c7	29	<script src="../core/input/keysym.js"></script>
c464f47e	30	<script src="../core/input/keysymdef.js"></script>
bd5340c7	31	<script src="../core/input/xtscancodes.js"></script>
80cb8ffd	32	<script src="../core/input/vkeys.js"></script>
bd5340c7	33	<script src="../core/input/util.js"></script>
c1e2785f SM	34	<script src="../core/input/keyboard.js"></script>
c1e2785f SM	35	<script src="../core/input/mouse.js"></script>
ae510306	36	<script src="../core/display.js"></script>
a575a383	37	<script>
ad3f7624 JM	38	var msg_cnt = 0, iterations,
	39	width = 400, height = 200,
	40	canvas, keyboard, mouse;
a575a383	41
c96f9003	42	var newline = "\n";
c96f9003	43
a575a383 JM	44	function message(str) {
a575a383 JM	45	console.log(str);
72bdd06e	46	cell = document.getElementById('messages');
6048299a	47	cell.textContent += msg_cnt + ": " + str + newline;
a575a383	48	cell.scrollTop = cell.scrollHeight;
c96f9003	49	msg_cnt++;
a575a383 JM	50	}
a575a383 JM	51
61dd52c9 JM	52	function mouseButton(x, y, down, bmask) {
	53	msg = 'mouse x,y: ' + x + ',' + y + ' down: ' + down;
	54	msg += ' bmask: ' + bmask;
a575a383 JM	55	message(msg);
	56	}
	57
61dd52c9 JM	58	function mouseMove(x, y) {
	59	msg = 'mouse x,y: ' + x + ',' + y;
	60	//console.log(msg);
a575a383 JM	61	}
a575a383 JM	62
d0703d1b	63	function rfbKeyEvent(keysym, code, down) {
c96f9003	64	var d = down ? "down" : " up ";
d0703d1b	65	var msg = "RFB key event " + d + " keysym: " + keysym + " code: " + code;
9ceef041	66	message(msg);
	67	}
	68	function rawKey(e) {
	69	msg = "raw key event " + e.type +
c96f9003 JM	70	" (key: " + e.keyCode + ", char: " + e.charCode +
c96f9003 JM	71	", which: " + e.which +")";
a575a383 JM	72	message(msg);
	73	}
	74
ad3f7624 JM	75	function selectButton(num) {
	76	var b, blist = [1,2,4];
	77
	78	if (typeof num === 'undefined') {
	79	// Show the default
	80	num = mouse.get_touchButton();
	81	} else if (num === mouse.get_touchButton()) {
	82	// Set all buttons off (no clicks)
	83	mouse.set_touchButton(0);
	84	num = 0;
	85	} else {
	86	// Turn on one button
	87	mouse.set_touchButton(num);
	88	}
	89
	90	for (b = 0; b < blist.length; b++) {
	91	if (blist[b] === num) {
72bdd06e SR	92	document.getElementById('button' + blist[b]).style.backgroundColor = "black";
72bdd06e SR	93	document.getElementById('button' + blist[b]).style.color = "lightgray";
ad3f7624	94	} else {
72bdd06e SR	95	document.getElementById('button' + blist[b]).style.backgroundColor = "";
72bdd06e SR	96	document.getElementById('button' + blist[b]).style.color = "";
ad3f7624 JM	97	}
	98	}
	99	}
	100
a575a383	101	window.onload = function() {
72bdd06e	102	canvas = new Display({'target' : document.getElementById('canvas')});
d3796c14	103	keyboard = new Keyboard({'target': document,
d0703d1b	104	'onKeyEvent': rfbKeyEvent});
b4ef49ea SR	105	document.addEventListener('keypress', rawKey);
	106	document.addEventListener('keydown', rawKey);
	107	document.addEventListener('keyup', rawKey);
72bdd06e	108	mouse = new Mouse({'target': document.getElementById('canvas'),
ad3f7624 JM	109	'onMouseButton': mouseButton,
	110	'onMouseMove': mouseMove});
	111
8db09746	112	canvas.resize(width, height, true);
d3796c14 JM	113	keyboard.grab();
d3796c14 JM	114	mouse.grab();
ad3f7624 JM	115	message("Display initialized");
ad3f7624 JM	116
bea2b3fd	117	if (Util.isTouchDevice) {
ad3f7624	118	message("Touch device detected");
72bdd06e SR	119	document.getElementById('button-selection').style.display = "inline";
	120	document.getElementById('button1').onclick = function(){ selectButton(1) };
	121	document.getElementById('button2').onclick = function(){ selectButton(2) };
	122	document.getElementById('button4').onclick = function(){ selectButton(4) };
ad3f7624 JM	123	selectButton();
	124	}
	125
a575a383 JM	126	}
	127	</script>
	128	</html>