Set size in keyboard layout, migrate to new on-screen keyboard API, update keyboard style.

guacamole/src/main/webapp/layouts/en-us-qwerty.xml

@@ -18,7 +18,7 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<keyboard lang="en_US" layout="qwerty">
+<keyboard lang="en_US" layout="qwerty" size="21">
     <row>
         <key>
             <cap keysym="0xFF1B">Esc</cap>

guacamole/src/main/webapp/scripts/interface.js

@@ -119,16 +119,26 @@ var GuacamoleUI = {
     };
 
     // Show/Hide keyboard
+    var keyboardResizeInterval = null;
     GuacamoleUI.buttons.showKeyboard.onclick = function() {
 
         var displayed = GuacamoleUI.containers.keyboard.style.display;
         if (displayed != "block") {
             GuacamoleUI.containers.keyboard.style.display = "block";
             GuacamoleUI.buttons.showKeyboard.textContent = "Hide Keyboard";
+
+            // Automatically update size
+            window.onresize = updateKeyboardSize;
+            keyboardResizeInterval = window.setInterval(updateKeyboardSize, 30);
+
+            updateKeyboardSize();
         }
         else {
             GuacamoleUI.containers.keyboard.style.display = "none";
             GuacamoleUI.buttons.showKeyboard.textContent = "Show Keyboard";
+
+            window.onresize = null;
+            window.clearInterval(keyboardResizeInterval);
         }
 
     };
@@ -225,7 +235,17 @@ var GuacamoleUI = {
 
     // On-screen keyboard
     GuacamoleUI.keyboard = new Guacamole.OnScreenKeyboard("layouts/en-us-qwerty.xml");
-    GuacamoleUI.containers.keyboard.appendChild(GuacamoleUI.keyboard);
+    GuacamoleUI.containers.keyboard.appendChild(GuacamoleUI.keyboard.getElement());
+
+    // Function for automatically updating keyboard size
+    var lastKeyboardWidth;
+    function updateKeyboardSize() {
+        var currentSize = GuacamoleUI.keyboard.getElement().offsetWidth;
+        if (lastKeyboardWidth != currentSize) {
+            GuacamoleUI.keyboard.resize(currentSize);
+            lastKeyboardWidth = currentSize;
+        }
+    };
 
 })();
 
@@ -379,17 +399,13 @@ GuacamoleUI.attach = function(guac) {
         GuacamoleUI.clipboard.value = data;
     };
 
-    GuacamoleUI.keyboard.setKeyPressedHandler(
-        function(keysym) {
-            guac.sendKeyEvent(1, keysym);
-        }
-    );
+    GuacamoleUI.keyboard.onkeypress = function(keysym) {
+        guac.sendKeyEvent(1, keysym);
+    };
 
-    GuacamoleUI.keyboard.setKeyReleasedHandler(
-        function(keysym) {
-            guac.sendKeyEvent(0, keysym);
-        }
-    );
+    GuacamoleUI.keyboard.onkeyrelease = function(keysym) {
+        guac.sendKeyEvent(0, keysym);
+    };
 
     // Send Ctrl-Alt-Delete
     GuacamoleUI.buttons.ctrlAltDelete.onclick = function() {

guacamole/src/main/webapp/styles/keyboard.css

@@ -17,107 +17,79 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-div#keyboardContainer {
-    position: fixed;
-    left: 0px;
-    bottom: 0px;
+#keyboardContainer {
     text-align: center;
+
+    position: fixed;
+    left: 0;
+    bottom: 0;
     width: 100%;
+    margin: 0;
+    padding: 0.5em;
+
+    border-top: 1px solid black;
+    background: #222;
+    opacity: 0.85;
+
     display: none;
     z-index: 1;
 }
 
-div.keyboard {
-
-    font-size: 10pt;
-    white-space: pre;
-
-    border: 1px solid black;
-    -moz-border-radius: 0.5em;
-    -webkit-border-radius: 0.5em;
-    -khtml-border-radius: 0.5em;
-    border-radius: 0.5em;
-    background: #222;
-
-    cursor: default;
-
-    opacity: 0.85;
-
-    padding: 0.25em;
-    margin: 0.25em;
-
+.guacamole-keyboard {
     display: inline-block;
-    text-align: left;
-}
-
-div.key {
-
+    width: 100%;
     margin: 0;
     padding: 0;
+    cursor: default;
 
-    width: 5ex;
-    height: 5ex;
-
-    display: inline-block;
-    text-align: center;
+    text-align: left;
+    vertical-align: middle;
 }
 
-div.cap {
+.guacamole-keyboard .guacamole-keyboard-key {
+    display: inline-block;
+}
 
+.guacamole-keyboard .guacamole-keyboard-cap {
+
+    background: #444;
     border: 1px solid #888;
     -moz-border-radius: 0.25em;
     -webkit-border-radius: 0.25em;
     -khtml-border-radius: 0.25em;
     border-radius: 0.25em;
-    background: #444;
-
-    margin: 0;
-    padding: 0;
 
     color: white;
+    font-family: sans-serif;
+    font-size: 50%;
     text-shadow: 0 0.1em 0.1em black;
-
-    width: 4.5ex;
-    height: 4.5ex;
-    line-height: 4.5ex;
+    text-align: center;
     white-space: pre;
 
-    display: inline-block;
-    text-align: center;
 }
 
-div.key:hover div.cap {
+.guacamole-keyboard .guacamole-keyboard-key:hover .guacamole-keyboard-cap {
     background: #666;
     border-color: #666;
     cursor: pointer;
 }
 
-div.key.pressed div.cap {
+.guacamole-keyboard .guacamole-keyboard-key.pressed:hover .guacamole-keyboard-cap {
     background: #822;
     border-color: #D44;
 }
 
-div.key.sticky.active div.cap {
+.guacamole-keyboard .guacamole-keyboard-key.active:hover .guacamole-keyboard-cap {
     background: #882;
     border-color: #DD4;
 }
 
-div.gap {
-    margin: 0;
-    padding: 0;
-
-    width: 5ex;
-    height: 5ex;
+.guacamole-keyboard .guacamole-keyboard-column {
+    display: inline-block;
+    text-align: center;
+}
 
+.guacamole-keyboard .guacamole-keyboard-gap {
     display: inline-block;
 }
  
-div.row {
-    vertical-align: top;
-}
-
-div.col {
-    display: inline-block;
-    vertical-align: top;
-}
-