Minor UI changes for new layer progress bar

j7126 · Oct 5, 2019 · 89ad8e0 · 89ad8e0
1 parent b1f6d0a
commit 89ad8e0
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 13 deletions.
diff --git a/octoprint_dashboard/__init__.py b/octoprint_dashboard/__init__.py
@@ -83,6 +83,7 @@ def on_event(self, event, payload):
 
         if event == Events.FILE_SELECTED:
             self._logger.info("File Selected: " + payload.get("file", ""))
+            #TODO: GCODE analysis here
 
 
     ##~~ SettingsPlugin mixin

diff --git a/octoprint_dashboard/static/css/dashboard.css b/octoprint_dashboard/static/css/dashboard.css
@@ -77,7 +77,7 @@ svg path {
   will-change: auto;
   stroke-width: 20px;
   stroke-miterlimit: round;
-  transition: stroke-dashoffset 1000ms ease-in-out;
+  transition: stroke-dashoffset 500ms ease-in-out;
 }
 
 svg text {

diff --git a/octoprint_dashboard/static/js/dashboard.js b/octoprint_dashboard/static/js/dashboard.js
@@ -29,6 +29,7 @@ $(function () {
         self.fanspeed = ko.observable("Off");
         self.lastLayerDuration = ko.observable("-");
         self.averageLayerDuration = ko.observable("-");
+
         self.getEta = ko.observable();
         self.embedUrl = ko.observable("");
         self.extrudedFilament = ko.observable(0.00);

diff --git a/octoprint_dashboard/templates/dashboard_settings.jinja2 b/octoprint_dashboard/templates/dashboard_settings.jinja2
@@ -61,10 +61,15 @@
             </label>
         </div>
         <div >
-            <label class="checkbox">{{ _('Show Progress Gauge') }}
+            <label class="checkbox">{{ _('Show Job Progress Gauge') }}
                 <input type="checkbox" data-bind="checked: settings.plugins.dashboard.showProgress">
             </label>
         </div>
+        <div >
+            <label class="checkbox">{{ _('Show Layer Progress Gauge (Note: Experimental!)') }}
+                <input type="checkbox" data-bind="checked: settings.plugins.dashboard.showLayerProgress">
+            </label>
+        </div>
         <div >
             <label class="checkbox">{{ _('Show Layer Duration Graph (Requires DisplaylayerProgress V1.14.0 or later)') }}
                 <input type="checkbox" data-bind="checked: settings.plugins.dashboard.showLayerGraph">
@@ -91,13 +96,6 @@
             </label>
         </div>
    </div>
-   <div class="control-group">
-        <div >
-            <label class="checkbox">{{ _('Show Layer Progress Gauge (experimental)') }}
-                <input type="checkbox" data-bind="checked: settings.plugins.dashboard.showLayerProgress">
-            </label>
-        </div>
-    </div>
 </form>
 
 
diff --git a/octoprint_dashboard/templates/dashboard_tab.jinja2 b/octoprint_dashboard/templates/dashboard_tab.jinja2
@@ -105,16 +105,19 @@
             <circle cx="60" cy="60" r="54" fill="none" stroke="#ccc" stroke-width="12" />
             <circle class="dashboardGauge" cx="60" cy="60" r="54" fill="none" stroke="#09c" stroke-width="12" stroke-dasharray="339.292" transform="rotate(-90 60 60)" data-bind="attr: { 'stroke-dashoffset': formatProgressOffset(printerStateModel.progressString()) }" />
             <text class="dashboardGauge" font-size="30" x="50%" y="45%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="text: printerStateModel.progressBarString()"></text>
-            <text class="dashboardGauge" font-size="14" x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" fill="#08c">Job Progress</text>
+            <text class="dashboardGauge" font-size="14" x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" fill="#08c">Job</text>
           </svg>
         </div>
+
+        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
+
         <!-- Layer Progress Circle-->
         <div class="dashboardProgressContainer dashboardLayerProgressContainer" data-bind="visible: printerStateModel.isPrinting() && settingsViewModel.settings.plugins.dashboard.showLayerProgress() && (settingsViewModel.settings.plugins.dashboard.gaugetype() == 'circle'), DashboardContextMenu: jobMenu, css: { dashboardLayerProgressInline: settingsViewModel.settings.plugins.dashboard.showProgress() && settingsViewModel.settings.plugins.dashboard.showLayerProgress() }">
           <svg class="current" width="120" height="120" viewBox="0 0 120 120">
             <circle cx="60" cy="60" r="54" fill="none" stroke="#ccc" stroke-width="12" />
             <circle class="dashboardGauge" cx="60" cy="60" r="54" fill="none" stroke="#09c" stroke-width="12" stroke-dasharray="339.292" transform="rotate(-90 60 60)" data-bind="attr: { 'stroke-dashoffset': formatProgressOffset(layerProgressString()) }" />
             <text class="dashboardGauge" font-size="30" x="50%" y="45%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="text: layerProgressBarString()"></text>
-            <text class="dashboardGauge" font-size="14" x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" fill="#08c">Layer Progress</text>
+            <text class="dashboardGauge" font-size="14" x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" fill="#08c">Layer</text>
           </svg>
         </div>
       </div>
@@ -124,7 +127,7 @@
 
     <!-- SVG Progress Bar-->
     <div class="dashboardGridItem" style="text-align:center;" data-bind="visible: settingsViewModel.settings.plugins.dashboard.gaugetype() == 'bar' && printerStateModel.isPrinting() && settingsViewModel.settings.plugins.dashboard.showProgress(), DashboardContextMenu: jobMenu ">
-      <h5 style="display: inline;">Job Progress: </h5>
+      <h5 style="display: inline;">Job: </h5>
       <span data-bind="attr: { title: 'Printer status' }, html: printerStateModel.progressBarString()"></span>
       <svg preserveAspectRatio="none" width="100%" height="20px" viewBox="0 0 339.292 20">
         <path class="bg" stroke="#ccc" d="M0 10, 339.292 10"></path>
@@ -134,7 +137,7 @@
 
     <!-- SVG Layer Progress Bar-->
     <div class="dashboardGridItem" style="text-align:center;" data-bind="visible: settingsViewModel.settings.plugins.dashboard.gaugetype() == 'bar' && printerStateModel.isPrinting() && settingsViewModel.settings.plugins.dashboard.showLayerProgress(), DashboardContextMenu: jobMenu ">
-      <h5 style="display: inline;">Layer Progress: </h5>
+      <h5 style="display: inline;">Layer: </h5>
       <span data-bind="attr: { title: 'Printer status' }, html: layerProgressBarString()"></span>
       <svg preserveAspectRatio="none" width="100%" height="20px" viewBox="0 0 339.292 20">
         <path class="bg" stroke="#ccc" d="M0 10, 339.292 10"></path>