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