From e5a8d4ad94d89d8316b3cd0b1aa9672555eb1ab1 Mon Sep 17 00:00:00 2001
From: agarwali <a.isshwar@gmail.com>
Date: Thu, 7 Apr 2016 23:28:41 -0400
Subject: [PATCH] Added buttons to change layer in the gcodeviewer canvas, and
 fixed bug for layer up and down key-binding. It is now disabled when no file
 is uploaded

---
 .../static/js/app/viewmodels/gcode.js         | 63 ++++++++++++-------
 .../templates/tabs/gcodeviewer.jinja2         | 10 +++
 2 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/src/octoprint/static/js/app/viewmodels/gcode.js b/src/octoprint/static/js/app/viewmodels/gcode.js
index a4498903..c6b1cb95 100644
--- a/src/octoprint/static/js/app/viewmodels/gcode.js
+++ b/src/octoprint/static/js/app/viewmodels/gcode.js
@@ -419,6 +419,9 @@ $(function() {
                     self.layerSlider.slider("disable");
                     self.layerSlider.slider("setMax", 1);
                     self.layerSlider.slider("setValue", 0);
+                    $('#btn_layer_up').prop('disabled', true);
+                    $('#btn_layer_down').prop('disabled', true);
+  
                 }
                 self.currentLayer = 0;
             } else {
@@ -434,6 +437,8 @@ $(function() {
                     self.layerSlider.slider("enable");
                     self.layerSlider.slider("setMax", model.layersPrinted - 1);
                     self.layerSlider.slider("setValue", 0);
+                    $('#btn_layer_up').prop('disabled', false);
+                    $('#btn_layer_down').prop('disabled', false);
                 }
             }
         };
@@ -498,16 +503,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 +529,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.incrementLayer(value);
         };
 
         self.changeCommandRange = function(event) {
@@ -566,6 +553,38 @@ $(function() {
         self.onTabChange = function(current, previous) {
             self.tabActive = current == "#gcode";
         };
+        
+        self.incrementLayer = 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
+                    });
+            }
+        };
+        
+        $( "#btn_layer_up" ).click(function() {
+          var value = self.layerSlider.slider('getValue')+1;
+          self.incrementLayer(value);
+        });
+        
+        $( "#btn_layer_down" ).click(function() {
+          var value = self.layerSlider.slider('getValue')-1;
+          self.incrementLayer(value);
+        });
     }
 
     OCTOPRINT_VIEWMODELS.push([
diff --git a/src/octoprint/templates/tabs/gcodeviewer.jinja2 b/src/octoprint/templates/tabs/gcodeviewer.jinja2
index 223720a9..fd733b3f 100644
--- a/src/octoprint/templates/tabs/gcodeviewer.jinja2
+++ b/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%" disabled='disabled'>
+                <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%" disabled='disabled'>
+                <i class="icon-white icon-arrow-down"></i>
+                <span>Layer Down</span>
+            </button>
+        </div>
     </div>
 
     <div class="progress" >