Merge pull request #284 from samhed/ctrlalttabesc

Support for extra keys such as Ctrl, Alt, Tab and Esc on mobile devices

LICENSE.txt

@@ -10,6 +10,7 @@ is not limited to):
     include/display.js
     include/input.js
     include/jsunzip.js
+    include/keysym.js
     include/logo.js
     include/rfb.js
     include/ui.js

include/base.css

@@ -62,6 +62,14 @@ html {
   display: none;
 }
 
+#noVNC_extra_keys {
+  display: inline;
+  list-style-type: none;
+  padding: 0px;
+  margin: 0px;
+  position: relative;
+}
+
 .noVNC-buttons-left {
   float: left;
   z-index: 1;
@@ -402,33 +410,70 @@ html {
   z-index: 0;
   position: absolute;
   width: 100%;
+  margin-left: 0px;
 }
 
-@media screen and (max-width: 640px){
-  .noVNC_status_button {
-    font-size: 10px;
-  }
-  .noVNC-buttons-left {
-    padding-left: 0px;
-  }
-  .noVNC-buttons-right {
-    padding-right: 0px;
-  }
+#showExtraKeysButton { display: none; }
+#toggleCtrlButton { display: inline; }
+#toggleAltButton {  display: inline; }
+#sendTabButton { display: inline; }
+#sendEscButton { display: inline; }
+
+/* left-align the status text on lower resolutions */
+@media screen and (max-width: 800px){
   #noVNC_status {
     z-index: 1;
     position: relative;
     width: auto;
     float: left;
+    margin-left: 4px;
   }
 }
 
-@media screen and (min-width: 481px) and (max-width: 640px) {
+@media screen and (max-width: 640px){
   #noVNC_clipboard_text {
     width: 410px;
   }
   #noVNC_logo {
     font-size: 150px;
   }
+  .noVNC_status_button {
+    font-size: 10px;
+  }
+  .noVNC-buttons-left {
+    padding-left: 0px;
+  }
+  .noVNC-buttons-right {
+    padding-right: 0px;
+  }
+  /* collapse the extra keys on lower resolutions */
+  #showExtraKeysButton {
+    display: inline;
+  }
+  #toggleCtrlButton {
+    display: none;
+    position: absolute;
+    top: 30px;
+    left: 0px;
+  }
+  #toggleAltButton {
+    display: none;
+    position: absolute;
+    top: 65px;
+    left: 0px;
+  }
+  #sendTabButton {
+    display: none;
+    position: absolute;
+    top: 100px;
+    left: 0px;
+  }
+  #sendEscButton {
+    display: none;
+    position: absolute;
+    top: 135px;
+    left: 0px;
+  }
 }
 
 @media screen and (min-width: 321px) and (max-width: 480px) {

include/ui.js

@@ -14,7 +14,8 @@
 // Load supporting scripts
 window.onscriptsload = function () { UI.load(); };
 Util.load_scripts(["webutil.js", "base64.js", "websock.js", "des.js",
-                   "input.js", "display.js", "jsunzip.js", "rfb.js"]);
+                   "input.js", "display.js", "jsunzip.js", "rfb.js",
+                   "keysym.js"]);
 
 var UI = {
 
@@ -24,6 +25,10 @@ connSettingsOpen : false,
 popupStatusOpen : false,
 clipboardOpen: false,
 keyboardVisible: false,
+hideKeyboardTimeout: null,
+extraKeysVisible: false,
+ctrlOn: false,
+altOn: false,
 isTouchDevice: false,
 
 // Setup rfb object, load settings from browser storage, then call
@@ -173,6 +178,12 @@ addMouseHandlers: function() {
     $D("keyboardinput").oninput = UI.keyInput;
     $D("keyboardinput").onblur = UI.keyInputBlur;
 
+    $D("showExtraKeysButton").onclick = UI.showExtraKeys;
+    $D("toggleCtrlButton").onclick = UI.toggleCtrl;
+    $D("toggleAltButton").onclick = UI.toggleAlt;
+    $D("sendTabButton").onclick = UI.sendTab;
+    $D("sendEscButton").onclick = UI.sendEsc;
+
     $D("sendCtrlAltDelButton").onclick = UI.sendCtrlAltDel;
     $D("noVNC_status").onclick = UI.togglePopupStatusPanel;
     $D("noVNC_popup_status_panel").onclick = UI.togglePopupStatusPanel;
@@ -547,13 +558,16 @@ updateVisualState: function() {
         UI.setMouseButton(1);
         $D('clipboardButton').style.display = "inline";
         $D('showKeyboard').style.display = "inline";
+        $D('noVNC_extra_keys').style.display = "";
         $D('sendCtrlAltDelButton').style.display = "inline";
     } else {
         UI.setMouseButton();
         $D('clipboardButton').style.display = "none";
         $D('showKeyboard').style.display = "none";
+        $D('noVNC_extra_keys').style.display = "none";
         $D('sendCtrlAltDelButton').style.display = "none";
     }
+    
     // State change disables viewport dragging.
     // It is enabled (toggled) by direct click on the button
     UI.setViewDrag(false);
@@ -732,6 +746,17 @@ showKeyboard: function() {
     }
 },
 
+keepKeyboard: function() {
+    clearTimeout(UI.hideKeyboardTimeout);
+    if(UI.keyboardVisible === true) {
+        $D('keyboardinput').focus();
+        $D('showKeyboard').className = "noVNC_status_button_selected";
+    } else if(UI.keyboardVisible === false) {
+        $D('keyboardinput').blur();
+        $D('showKeyboard').className = "noVNC_status_button";
+    }
+},
+
 // When keypress events are left uncought, catch the input events from
 // the keyboardinput element instead and send the corresponding key events.
 keyInput: function(event) {
@@ -766,7 +791,62 @@ keyInputBlur: function() {
     //Weird bug in iOS if you change keyboardVisible
     //here it does not actually occur so next time
     //you click keyboard icon it doesnt work.
-    setTimeout(function() { UI.setKeyboard(); },100);
+    UI.hideKeyboardTimeout = setTimeout(function() { UI.setKeyboard(); },100);
+},
+
+showExtraKeys: function() {
+    UI.keepKeyboard();
+    if(UI.extraKeysVisible === false) {
+        $D('toggleCtrlButton').style.display = "inline";
+        $D('toggleAltButton').style.display = "inline";
+        $D('sendTabButton').style.display = "inline";
+        $D('sendEscButton').style.display = "inline";
+        $D('showExtraKeysButton').className = "noVNC_status_button_selected";
+        UI.extraKeysVisible = true;
+    } else if(UI.extraKeysVisible === true) {
+        $D('toggleCtrlButton').style.display = "";
+        $D('toggleAltButton').style.display = "";
+        $D('sendTabButton').style.display = "";
+        $D('sendEscButton').style.display = "";
+        $D('showExtraKeysButton').className = "noVNC_status_button";
+        UI.extraKeysVisible = false;
+    }
+},
+
+toggleCtrl: function() {
+    UI.keepKeyboard();
+    if(UI.ctrlOn === false) {
+        UI.rfb.sendKey(XK_Control_L, true);
+        $D('toggleCtrlButton').className = "noVNC_status_button_selected";
+        UI.ctrlOn = true;
+    } else if(UI.ctrlOn === true) {
+        UI.rfb.sendKey(XK_Control_L, false);
+        $D('toggleCtrlButton').className = "noVNC_status_button";
+        UI.ctrlOn = false;
+    }
+},
+
+toggleAlt: function() {
+    UI.keepKeyboard();
+    if(UI.altOn === false) {
+        UI.rfb.sendKey(XK_Alt_L, true);
+        $D('toggleAltButton').className = "noVNC_status_button_selected";
+        UI.altOn = true;
+    } else if(UI.altOn === true) {
+        UI.rfb.sendKey(XK_Alt_L, false);
+        $D('toggleAltButton').className = "noVNC_status_button";
+        UI.altOn = false;
+    }
+},
+
+sendTab: function() {
+    UI.keepKeyboard();
+    UI.rfb.sendKey(XK_Tab);
+},
+
+sendEsc: function() {
+    UI.keepKeyboard();
+    UI.rfb.sendKey(XK_Escape);
 },
 
 setKeyboard: function() {

vnc.html

@@ -67,7 +67,24 @@
                     id="showKeyboard" class="noVNC_status_button"
                     value="Keyboard" title="Show Keyboard"/>
                 <input type="text" autocapitalize="off" autocorrect="off"
-                    id="keyboardinput" class="" value="&nbsp;"/>
+                    id="keyboardinput" class=""/>
+                <div id="noVNC_extra_keys">
+                    <input type="image" src="images/showextrakeys.png"
+                        id="showExtraKeysButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/ctrl.png"
+                        id="toggleCtrlButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/alt.png"
+                        id="toggleAltButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/tab.png"
+                        id="sendTabButton"
+                        class="noVNC_status_button">
+                    <input type="image" src="images/esc.png"
+                        id="sendEscButton"
+                        class="noVNC_status_button">
+                </div>
             </div>
         </div>