tests/input.html

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