Added the ability to control the layer slider of the gcodeViewer with the keyboard (Up Arrow, Down Arrow, Page Up, Page Down) as requested in Issue #1149

src/octoprint/static/js/app/viewmodels/gcode.js

@@ -497,6 +497,54 @@ $(function() {
             GCODE.ui.changeSelectedLayer(value);
         };
 
+        self.onMouseOver = function(data, event) {
+            if (!self.settings.feature_keyboardControl()) return;
+            $("#canvas_container").focus();
+
+        };
+        self.onMouseOut = function(data, event) {
+            if (!self.settings.feature_keyboardControl()) return;
+            $("#canvas_container").blur();
+        };
+        self.onKeyDown = function(data, event) {
+            if (!self.settings.feature_keyboardControl()) return;
+
+            var value = self.currentLayer;
+            switch(event.which){
+                case 33: // Pg up
+                    value = value + 10; // No need to check against max this is done by the Slider anyway
+                    break;
+                case 34: // Pg down
+                    value = value - 10; // No need to check against min, this is done by the Slider anyway
+                    break;
+                case 38: // up arrow key
+                    value = value + 1; // No need to check against max this is done by the Slider anyway
+                    break;
+                case 40: // down arrow key
+                    value = value - 1; // No need to check against min, this is done by the Slider anyway
+                    break;
+            }
+
+            if (value != self.currentLayer) {
+                event.preventDefault();
+
+                self.layerSlider.slider('setValue', value);
+                value = self.layerSlider.slider('getValue');
+                self.layerSlider
+                    .trigger({
+                        type: 'slideStart',
+                        value: value
+                    })
+                    .trigger({
+                        type: 'slide',
+                        value: value
+                    }).trigger({
+                        type: 'slideStop',
+                        value: value
+                    });
+            }
+        };
+
         self.changeCommandRange = function(event) {
             if (self.currentlyPrinting && self.renderer_syncProgress()) self.renderer_syncProgress(false);
 

src/octoprint/static/less/octoprint.less

@@ -638,6 +638,9 @@ ul.dropdown-menu li a {
 
   .canvas_container {
     position: relative;
+    &:hover, &:active {
+      outline: 0;
+    }
   }
 
   #gcode_layer_slider {

src/octoprint/templates/tabs/gcodeviewer.jinja2

@@ -1,5 +1,5 @@
 <div data-bind="visible: !waitForApproval()">
-    <div class="canvas_container">
+    <div id="canvas_container" class="canvas_container" tabindex="0" data-bind="event: { keydown: onKeyDown, mouseover: onMouseOver, mouseout: onMouseOut }">
         <input id="gcode_slider_layers" type="text">
         <canvas id="gcode_canvas" width="568" height="568"></canvas>
         <input id="gcode_slider_commands" type="text" style="width: 554px">