diff --git a/octoprint_bettergrblsupport/static/js/bettergrblsupport.js b/octoprint_bettergrblsupport/static/js/bettergrblsupport.js
index 2b0e0f5..95f1d33 100644
--- a/octoprint_bettergrblsupport/static/js/bettergrblsupport.js
+++ b/octoprint_bettergrblsupport/static/js/bettergrblsupport.js
@@ -112,8 +112,6 @@ $(function() {
 
         self.onWebcamLoaded = function() {
             if (self.webcamLoaded()) return;
-
-            console.log("Webcam stream loaded");
             self.webcamLoaded(true);
             self.webcamError(false);
         };
@@ -1108,6 +1106,130 @@ $(function() {
             }
             return span + " " + offset;
         };
+
+        self.onKeyDown = function (data, event) {
+            if (!self.settings.feature_keyboardControl()) return;
+
+            var button = undefined;
+            var visualizeClick = true;
+            var simulateTouch = false;
+
+            switch (event.which) {
+                case 37: // left arrow key
+                    // X-
+                    button = $("#control-west");
+                    simulateTouch = true;
+                    break;
+                case 38: // up arrow key
+                    // Y+
+                    button = $("#control-north");
+                    simulateTouch = true;
+                    break;
+                case 39: // right arrow key
+                    // X+
+                    button = $("#control-east");
+                    simulateTouch = true;
+                    break;
+                case 40: // down arrow key
+                    // Y-
+                    button = $("#control-south");
+                    simulateTouch = true;
+                    break;
+                case 49: // number 1
+                case 97: // numpad 1
+                    // toggle operator
+                    button = $("#control-distance-operator");
+                    break;
+                case 50: // number 2
+                case 98: // numpad 2
+                    // Distance 0.1
+                    button = $("#control-distance-0");
+                    break;
+                case 51: // number 3
+                case 99: // numpad 3
+                    // Distance 1
+                    button = $("#control-distance-1");
+                    break;
+                case 52: // number 4
+                case 100: // numpad 4
+                    // Distance 5
+                    button = $("#control-distance-2");
+                    break;
+                case 53: // number 5
+                case 101: // numpad 5
+                    // Distance 10
+                    button = $("#control-distance-3");
+                    break;
+                case 54: // number 6
+                case 102: // numpad 6
+                    // Distance 50
+                    button = $("#control-distance-4");
+                    break;
+                case 55: // number 7
+                case 103: // numpad 7
+                    // Distance 100
+                    button = $("#control-distance-5");
+                    break;
+                case 33: // page up key
+                case 87: // w key
+                    // z lift up
+                    button = $("#control-zup");
+                    break;
+                case 34: // page down key
+                case 83: // s key
+                    // z lift down
+                    button = $("#control-zdown");
+
+                    break;
+                case 36: // home key
+                    // xy home
+                    button = $("#control-home");
+                    $("#control-axes-XY").click();
+                    break;
+                case 35: // end key
+                    // z home
+                    button = $("#control-home");
+                    $("#control-axes-Z").click();
+                    break;
+                default:
+                    event.preventDefault();
+                    return false;
+            }
+
+            if (button === undefined) {
+                return false;
+            } else {
+                event.preventDefault();
+                if (visualizeClick) {
+                    button.addClass("active");
+                    setTimeout(function () {
+                        button.removeClass("active");
+                    }, 150);
+                }
+                if (simulateTouch) {
+                    button.mousedown();
+                    setTimeout(function () {
+                        button.mouseup();
+                    }, 150);
+                } else {
+                    button.click();
+                }
+            }
+        };
+
+        $(document).ready(function() {
+            $(this).keydown(function(e) {
+                if (OctoPrint.coreui.selectedTab != undefined &&
+                        OctoPrint.coreui.selectedTab == "#tab_plugin_bettergrblsupport" &&
+                        OctoPrint.coreui.browserTabVisible && $(":focus").length == 0) {
+                    self.onKeyDown(undefined, e);
+                }
+            });
+        
+            $(this).keyup(function(e) {
+                // console.log("keyup");
+            });
+        });
     }
 
     // cute little hack for removing "Print" from the start button
diff --git a/octoprint_bettergrblsupport/templates/bettergrblsupport_tab.jinja2 b/octoprint_bettergrblsupport/templates/bettergrblsupport_tab.jinja2
index 50ecd3b..1c41378 100644
--- a/octoprint_bettergrblsupport/templates/bettergrblsupport_tab.jinja2
+++ b/octoprint_bettergrblsupport/templates/bettergrblsupport_tab.jinja2
@@ -89,7 +89,7 @@
           <td colspan=3 align="center">
             <span class="btn-group" data-toggle="buttons-radio" style="margin: 0px 0px 10px 0px;">
                <!-- ko foreach: origin_axes -->
-                <button type="button" class="btn origin_axis" style="border: 1px solid;" data-bind="click: function() { $root.origin_axis($data) }, text: $data, css: { active: $root.origin_axis() === $data }"></button>
+                <button type="button" class="btn origin_axis" style="border: 1px solid;" data-bind="attr: { id: 'control-axes-' + $data }, click: function() { $root.origin_axis($data) }, text: $data, css: { active: $root.origin_axis() === $data }"></button>
                <!-- /ko -->
             </span>
           </td>
@@ -112,7 +112,7 @@
          </tr>
          <tr>
             <td style="padding: 0px 0px 10px 0px;">
-               <button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="enable: isIdleOrJogging() && operator() != 'J', click: function() {moveHead('up')}">
+               <button id="control-zup" class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="enable: isIdleOrJogging() && operator() != 'J', click: function() {moveHead('up')}">
                  <i class="fa fa-arrow-up"></i>
                </button>
             </td>
@@ -120,7 +120,7 @@
                <button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('northwest')}, mousedown: function() {jog('northwest')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
                  <i class="fa fa-arrow-up" style="transform: rotate(-45deg);"></i>
                </button>
-               <button class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('north')}, mousedown: function() {jog('north')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
+               <button id="control-north" class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('north')}, mousedown: function() {jog('north')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
                  <i class="fa fa-arrow-up"></i>
                </button>
                <button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('northeast')}, mousedown: function() {jog('northeast')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
@@ -135,20 +135,20 @@
                </button>
             </td>
             <td style="padding: 0px 0px 10px 0px;">
-               <button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('west')}, mousedown: function() {jog('west')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
+               <button id="control-west" class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('west')}, mousedown: function() {jog('west')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
                  <i class="fa fa-arrow-left"></i>
                </button>
-               <button class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="enable: is_operational() && !is_printing() && state() == 'Idle', click: function() {moveHead('home')}">
+               <button id="control-home" class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="enable: is_operational() && !is_printing() && state() == 'Idle', click: function() {moveHead('home')}">
                  <i class="fa fa-home"></i>
                </button>
-               <button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('east')}, mousedown: function() {jog('east')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
+               <button id="control-east" class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('east')}, mousedown: function() {jog('east')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
                  <i class="fa fa-arrow-right"></i>
                </button>
             </td>
          </tr>
          <tr>
             <td style="padding: 0px 0px 20px 0px;">
-               <button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="enable: isIdleOrJogging() && operator() != 'J', click: function() {moveHead('down')}">
+               <button id="control-zdown" class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="enable: isIdleOrJogging() && operator() != 'J', click: function() {moveHead('down')}">
                <i class="fa fa-arrow-down"></i>
                </button>
             </td>
@@ -156,7 +156,7 @@
                <button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('southwest')}, mousedown: function() {jog('southwest')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
                <i class="fa fa-arrow-down" style="transform: rotate(45deg);"></i>
                </button>
-               <button class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('south')}, mousedown: function() {jog('south')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
+               <button id="control-south" class="btn box" style="border: 1px solid; margin: 0px 5px 0px 5px; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('south')}, mousedown: function() {jog('south')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
                <i class="fa fa-arrow-down"></i>
                </button>
                <button class="btn box" style="border: 1px solid; width: 40px; height: 40px" data-bind="event: { touchstart: function() {jog('southeast')}, mousedown: function() {jog('southeast')}, touchend: function() {cancelJog()}, mouseup: function() {cancelJog()}}, enable: isIdleOrJogging()">
@@ -168,12 +168,12 @@
             <td colspan=3 align="center" class="distance">
               <span>
                 <span>
-                  <button type="button" class="btn" style="border: 1px solid; width: 35px; margin: 5px 0px 0px 0px" data-bind="click: function() { operatorClicked() }, text: operator"></button>
+                  <button id="control-distance-operator" type="button" class="btn" style="border: 1px solid; width: 35px; margin: 5px 0px 0px 0px" data-bind="click: function() { operatorClicked() }, text: operator"></button>
                 </span>
                 <span style="margin: 0px 1px 0px 1px">&nbsp;</span>
                  <span align="center" class="btn-group">
                     <!-- ko foreach: distances -->
-                      <button type="button" class="btn dist" style="border: 1px solid; margin: 5px 0px 0px 0px" data-bind="click: function() { $parent.distanceClicked($data) }, text: $data, enable: $root.operator() != 'J'"></button>
+                      <button id="control-distance-$data" type="button" class="btn dist" style="border: 1px solid; margin: 5px 0px 0px 0px" data-bind="attr: { id: 'control-distance-' + $index() }, click: function() { $parent.distanceClicked($data) }, text: $data, enable: $root.operator() != 'J'"></button>
                     <!-- /ko -->
                  </span>
                 <span style="margin: 0px 1px 0px 1px">&nbsp;</span>