Small fixes on the layer buttons
Removed unnecessary (and broken) call to event.preventDefault, moved styles to less/css and also made sure to disable the buttons not currently usable.
This commit is contained in:
parent
d2b0387994
commit
e42ef3d070
4 changed files with 36 additions and 16 deletions
File diff suppressed because one or more lines are too long
|
|
@ -53,7 +53,9 @@ $(function() {
|
|||
self.reader_sortLayers = ko.observable(true);
|
||||
self.reader_hideEmptyLayers = ko.observable(true);
|
||||
|
||||
self.layerSelectionEnabled = ko.observable(false)
|
||||
self.layerSelectionEnabled = ko.observable(false);
|
||||
self.layerUpEnabled = ko.observable(false);
|
||||
self.layerDownEnabled = ko.observable(false);
|
||||
|
||||
self.synchronizeOptions = function(additionalRendererOptions, additionalReaderOptions) {
|
||||
var renderer = {
|
||||
|
|
@ -221,6 +223,7 @@ $(function() {
|
|||
|
||||
self.currentLayer = undefined;
|
||||
self.currentCommand = undefined;
|
||||
self.maxLayer = undefined;
|
||||
|
||||
self.initialize = function() {
|
||||
var layerSliderElement = $("#gcode_slider_layers");
|
||||
|
|
@ -428,8 +431,11 @@ $(function() {
|
|||
self.layerSlider.slider("setMax", 1);
|
||||
self.layerSlider.slider("setValue", 0);
|
||||
self.layerSelectionEnabled(false);
|
||||
self.layerDownEnabled(false);
|
||||
self.layerUpEnabled(false);
|
||||
}
|
||||
self.currentLayer = 0;
|
||||
self.maxLayer = 0;
|
||||
} else {
|
||||
var output = [];
|
||||
output.push(gettext("Model size") + ": " + model.width.toFixed(2) + "mm × " + model.depth.toFixed(2) + "mm × " + model.height.toFixed(2) + "mm");
|
||||
|
|
@ -439,11 +445,14 @@ $(function() {
|
|||
|
||||
self.ui_modelInfo(output.join("<br>"));
|
||||
|
||||
self.maxLayer = model.layersPrinted - 1;
|
||||
if (self.layerSlider != undefined) {
|
||||
self.layerSlider.slider("enable");
|
||||
self.layerSlider.slider("setMax", model.layersPrinted - 1);
|
||||
self.layerSlider.slider("setMax", self.maxLayer);
|
||||
self.layerSlider.slider("setValue", 0);
|
||||
self.layerSelectionEnabled(true);
|
||||
self.layerDownEnabled(false);
|
||||
self.layerUpEnabled(self.maxLayer > 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -455,6 +464,9 @@ $(function() {
|
|||
self.layerCommandSlider.slider("disable");
|
||||
self.layerCommandSlider.slider("setMax", 1);
|
||||
self.layerCommandSlider.slider("setValue", [0, 1]);
|
||||
|
||||
self.layerDownEnabled(false);
|
||||
self.layerUpEnabled(false);
|
||||
}
|
||||
self.currentCommand = [0, 1];
|
||||
} else {
|
||||
|
|
@ -475,10 +487,14 @@ $(function() {
|
|||
|
||||
self.ui_layerInfo(output.join("<br>"));
|
||||
|
||||
console.log("#### Layer number:", layer.number, ", max layer:", self.maxLayer);
|
||||
if (self.layerCommandSlider != undefined) {
|
||||
self.layerCommandSlider.slider("enable");
|
||||
self.layerCommandSlider.slider("setMax", layer.commands - 1);
|
||||
self.layerCommandSlider.slider("setValue", [0, layer.commands - 1]);
|
||||
|
||||
self.layerDownEnabled(layer.number > 0);
|
||||
self.layerUpEnabled(layer.number < self.maxLayer);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -561,8 +577,6 @@ $(function() {
|
|||
|
||||
self.shiftLayer = function(value){
|
||||
if (value != self.currentLayer) {
|
||||
event.preventDefault();
|
||||
|
||||
self.layerSlider.slider('setValue', value);
|
||||
value = self.layerSlider.slider('getValue');
|
||||
//This sets the scroll bar to the appropriate position.
|
||||
|
|
|
|||
|
|
@ -651,7 +651,7 @@ ul.dropdown-menu li a {
|
|||
|
||||
#gcode {
|
||||
.progress {
|
||||
width: 582px;
|
||||
width: 588px;
|
||||
|
||||
.bar {
|
||||
.transition(width 0s linear);
|
||||
|
|
@ -665,6 +665,11 @@ ul.dropdown-menu li a {
|
|||
}
|
||||
}
|
||||
|
||||
.layer-buttons {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
#gcode_layer_slider {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -3,16 +3,17 @@
|
|||
<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="layer-buttons btn-group-toolbar row-fluid">
|
||||
<button type="button" class="btn btn-primary btn-medium span6" data-bind = "click: incrementLayer, enable: layerSelectionEnabled() && layerUpEnabled()">
|
||||
<i class="icon-white icon-arrow-up"></i>
|
||||
<span>{{ _('Layer Up') }}</span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-medium span6" data-bind = "click: decrementLayer, enable: layerSelectionEnabled() && layerDownEnabled()">
|
||||
<i class="icon-white icon-arrow-down"></i>
|
||||
<span>{{ _('Layer Down') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-text-centered">
|
||||
|
|
|
|||
Loading…
Reference in a new issue