diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index add4e995..15e81b53 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -25,6 +25,7 @@ function WorkingAreaViewModel(loginStateViewModel, settingsViewModel, printerSta var ratio = self.settings.printer_bedDimensionY() / self.settings.printer_bedDimensionX(); return ratio; }, self); + self.workingAreaDim = ko.computed(function(){ var maxH = self.availableHeight(); var maxW = self.availableWidth(); @@ -38,26 +39,28 @@ function WorkingAreaViewModel(loginStateViewModel, settingsViewModel, printerSta } else { w = maxH / hwRatio; h = maxH; - console.log(w,h, hwRatio); } var dim = [w,h]; return dim; } }); + self.workingAreaWidth = ko.computed(function(){ var dim = self.workingAreaDim(); return dim ? dim[0] : 1; }, self); + self.workingAreaHeight = ko.computed(function(){ var dim = self.workingAreaDim(); return dim ? dim[1] : 1; }, self); + self.px2mm_factor = ko.computed(function(){ return self.settings.printer_bedDimensionX() / self.workingAreaWidth(); }); self.trigger_resize = function(){ - self.availableHeight(document.documentElement.clientHeight - $('body>nav').height() - $('footer>*').outerHeight()); + self.availableHeight(document.documentElement.clientHeight - $('body>nav').outerHeight() - $('footer>*').outerHeight() - 39); // magic number self.availableWidth($('#workingarea div.span8').innerWidth()); }; diff --git a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 index 5ba1ea9e..9f468b7f 100644 --- a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 +++ b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 @@ -15,32 +15,33 @@ {% if stylesheet == "less" %} - + + - - {% for name, assets in assetPlugins.items() %} - {% if "less" in assets %} - {% for asset in assets["less"] %} - - {% endfor %} - {% endif %} - {% endfor %} - + + {% for name, assets in assetPlugins.items() %} + {% if "less" in assets %} + {% for asset in assets["less"] %} + + {% endfor %} + {% endif %} + {% endfor %} + - + {% else %} - - - {% for name, assets in assetPlugins.items() %} - {% if "css" in assets %} - {% for asset in assets["css"] %} - - {% endfor %} - {% endif %} - {% endfor %} - + + + + {% for name, assets in assetPlugins.items() %} + {% if "css" in assets %} + {% for asset in assets["css"] %} + + {% endfor %} + {% endif %} + {% endfor %} + {% endif %} - +
-
+
- -
- {{ _('State') }} + {{ _('State') }}
-
- {{ _('Position') }}: - - -
-
-
- -
-
- - - -
-
- -
-
- {% if hasZAxis %} - Z jogging control panel -
-
- -
-
- -
-
- -
-
- {% endif %} - -
- Jog distance -
- -
- - - - -
-
-
-
+
+ +
+ {{ _('Position') }}: + +
+
+
+ XY-Axes +
+ +
+
+ + + +
+
+ +
+
+ {% if hasZAxis %} +
+ Z-Axis +
+ +
+
+ +
+
+ +
+
+ {% endif %} + +
+ Jog distance +
+ +
+ + + + +
+
+
+
@@ -228,18 +229,21 @@ var UI_API_KEY = "{{ uiApiKey }}";
- +
+
-
+
-
+
- {{ _('Files') }} - -
+
+ {{ _('Files') }} +
+ +