pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
agarwali 2016-04-07 23:28:41 -04:00
parent 45a79b1939
commit e5a8d4ad94
2 changed files with 51 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/octoprint/static/js/app/viewmodels/gcode.js
View file

@ -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([

10
src/octoprint/templates/tabs/gcodeviewer.jinja2
View file

@ -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" >