]> git.proxmox.com Git - mirror_novnc.git/blobdiff - tests/input.html
Merge branch 'qemufix' of https://github.com/CendioOssman/noVNC
[mirror_novnc.git] / tests / input.html
index 36c4bf5c8c965c34011472b7120353c0d7faaaf6..4925a3a80d3f45d87015b7c7694e09dec1aa0716 100644 (file)
@@ -4,7 +4,11 @@
     <body>
         <br><br>
 
-        Canvas:<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.
     </body>
 
     <!--
-    <script type='text/javascript' 
+    <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/canvas.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/devices.js"></script>
+    <script src="../core/display.js"></script>
     <script>
-        var msg_cnt = 0;
-        var width = 400, height = 200;
-        var iterations;
+        var msg_cnt = 0, iterations,
+            width = 400, height = 200,
+            canvas, keyboard, mouse;
+
+        var newline = "\n";
 
         function message(str) {
             console.log(str);
-            cell = $D('messages');
-            cell.innerHTML += msg_cnt + ": " + str + "\n";
+            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;
-            console.log(msg);
             message(msg);
         }
 
             //console.log(msg);
         }
 
-        function keyPress(keysym, down) {
-            msg = "keyPress keysym: " + keysym + " down: " + down;
-            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() {
-            var canvas = new Canvas({'target' : $D('canvas')});
+            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);
-            canvas.start(keyPress, mouseButton, mouseMove);
-            message("Canvas initialized");
+            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>