Merge branch 'dev/gcodeLayerButton' of https://github.com/agarwali/OctoPrint into pr/agarwali/dev/gcodeLayerButton

Conflicts:
	AUTHORS.md

AUTHORS.md

@@ -63,6 +63,8 @@ date of first contribution):
   * [Andrew Malota](https://github.com/2bitoperations)
   * [Alexander Leisentritt](https://github.com/Alex9779)
   * [therealbstern](https://github.com/therealbstern)
+  * [Ishwar Agarwal](https://github.com/agarwali)
+  * [Kye Hoover](https://github.com/eykrevooh)
 
 OctoPrint started off as a fork of [Cura](https://github.com/daid/Cura) by
 [Daid Braam](https://github.com/daid). Parts of its communication layer and

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

@@ -52,6 +52,8 @@ $(function() {
 
         self.reader_sortLayers = ko.observable(true);
         self.reader_hideEmptyLayers = ko.observable(true);
+        
+        self.layerSelectionEnabled = ko.observable(false)
 
         self.synchronizeOptions = function(additionalRendererOptions, additionalReaderOptions) {
             var renderer = {
@@ -419,6 +421,7 @@ $(function() {
                     self.layerSlider.slider("disable");
                     self.layerSlider.slider("setMax", 1);
                     self.layerSlider.slider("setValue", 0);
+                    self.layerSelectionEnabled(false);
                 }
                 self.currentLayer = 0;
             } else {
@@ -434,6 +437,7 @@ $(function() {
                     self.layerSlider.slider("enable");
                     self.layerSlider.slider("setMax", model.layersPrinted - 1);
                     self.layerSlider.slider("setValue", 0);
+                    self.layerSelectionEnabled(true);
                 }
             }
         };
@@ -498,16 +502,16 @@ $(function() {
         };
 
         self.onMouseOver = function(data, event) {
-            if (!self.settings.feature_keyboardControl()) return;
+            if (!self.settings.feature_keyboardControl() || self.layerSlider != undefined) return;
             $("#canvas_container").focus();
 
         };
         self.onMouseOut = function(data, event) {
-            if (!self.settings.feature_keyboardControl()) return;
+            if (!self.settings.feature_keyboardControl() || self.layerSlider != undefined) return;
             $("#canvas_container").blur();
         };
         self.onKeyDown = function(data, event) {
-            if (!self.settings.feature_keyboardControl()) return;
+            if (!self.settings.feature_keyboardControl() || self.layerSlider != undefined) return;
 
             var value = self.currentLayer;
             switch(event.which){
@@ -524,25 +528,7 @@ $(function() {
                     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.shiftLayer(value);
         };
 
         self.changeCommandRange = function(event) {
@@ -566,6 +552,38 @@ $(function() {
         self.onTabChange = function(current, previous) {
             self.tabActive = current == "#gcode";
         };
+        
+        self.shiftLayer = function(value){
+            if (value != self.currentLayer) {
+                event.preventDefault();
+
+                self.layerSlider.slider('setValue', value);
+                value = self.layerSlider.slider('getValue');
+                //This sets the srollbar to the appropriate position.
+                self.layerSlider
+                    .trigger({
+                        type: 'slideStart',
+                        value: value
+                    })
+                    .trigger({
+                        type: 'slide',
+                        value: value
+                    }).trigger({
+                        type: 'slideStop',
+                        value: value
+                    });
+            }
+        };
+        
+        self.incrementLayer = function() {
+          var value = self.layerSlider.slider('getValue')+1;
+          self.shiftLayer(value);
+        };
+        
+        self.decrementLayer = function() {
+          var value = self.layerSlider.slider('getValue')-1;
+          self.shiftLayer(value);
+        };
     }
 
     OCTOPRINT_VIEWMODELS.push([

src/octoprint/templates/tabs/gcodeviewer.jinja2

@@ -3,6 +3,16 @@
         <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">
+        <div id ="button_control" class="btn-group-toolbar" style="width: 100%; padding-bottom: 7px; padding-top: 5px;text-align: center;">
+            <button id = "btn_layer_up" type="button" class="btn btn-primary btn-medium" style="width:48%"  data-bind = "click: incrementLayer, enable: layerSelectionEnabled">
+                <i class="icon-white icon-arrow-up"></i>
+                <span>{{ _('Layer up') }}</span>
+            </button>
+            <button id = "btn_layer_down" type="button" class="btn btn-primary btn-medium" style="width:48%" data-bind = "click: decrementLayer, enable: layerSelectionEnabled">
+                <i class="icon-white icon-arrow-down"></i>
+                <span>{{ _('Layer Down') }}</span>
+            </button>
+        </div>
     </div>
 
     <div class="progress" >