Added temp gauge coloring for #40

j7126 · Oct 12, 2019 · 989d9ee · 989d9ee
1 parent d779b8c
commit 989d9ee
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 13 deletions.
diff --git a/octoprint_dashboard/__init__.py b/octoprint_dashboard/__init__.py
@@ -113,7 +113,9 @@ def get_settings_defaults(self):
             showSensorInfo=False,
             showJobControlButtons=False,
             cpuTempWarningThreshold="70",
-            cpuTempCriticalThreshold="85"
+            cpuTempCriticalThreshold="85",
+            showTempGaugeColors=False,
+            targetTempDeviation="10"
 		)
 
     def on_settings_save(self, data):

diff --git a/octoprint_dashboard/static/js/dashboard.js b/octoprint_dashboard/static/js/dashboard.js
@@ -267,18 +267,37 @@ $(function () {
         };
 
 
-        self.cpuTempColor =function() {
-            if (self.cpuTemp() >= 80.0) {
+        self.cpuTempColor = function() {
+            if (self.cpuTemp() >= self.settingsViewModel.settings.plugins.dashboard.cpuTempCriticalThreshold()) {
                 return "red";
             }
-            else if (self.cpuTemp() >= 70.0) {
+            else if (self.cpuTemp() >= self.settingsViewModel.settings.plugins.dashboard.cpuTempWarningThreshold()) {
                 return "orange";
             } 
-            else if (self.cpuTemp()  < 70.0) {
+            else if (self.cpuTemp() < self.settingsViewModel.settings.plugins.dashboard.cpuTempWarningThreshold()) {
                 return "#08c";
          } 
         }
 
+        self.tempColor = function(actual, target) {
+            if (self.settingsViewModel.settings.plugins.dashboard.showTempGaugeColors() == true ){
+                if (target == 0) {
+                    return "#08c";       
+                }
+                else if (target > 0) {
+                    if ( actual < target - self.settingsViewModel.settings.plugins.dashboard.targetTempDeviation() ) {
+                        return "#08c"; //blue   
+                    }
+                    else if ( actual > target + self.settingsViewModel.settings.plugins.dashboard.targetTempDeviation() ) {
+                        return "#ff3300"; //red   
+                    }
+                    else return "#28b623"; //green
+
+                }
+            }
+            else return "#08c";
+        } 
+
         self.embedUrl = function () {
             if (self.settingsViewModel.settings.webcam && self.settingsViewModel.settings.plugins.dashboard.showWebCam() == true) {
                 return self.settingsViewModel.settings.webcam.streamUrl() + '?' + new Date().getTime();

diff --git a/octoprint_dashboard/templates/dashboard_settings.jinja2 b/octoprint_dashboard/templates/dashboard_settings.jinja2
@@ -19,19 +19,32 @@
         </div>
     </div>
 
-    <legend>{{ _('Temperature Gauge Maximums') }}</legend>
+    <legend>{{ _('Temperature Gauge Settings') }}</legend>
     <div class="control-group">
-        <label class="control-label">{{ _('Hotend Max:')}}</label>
+        <div >
+            <label class="checkbox">{{ _('Enable Temp Gauge Colors') }}
+                <input type="checkbox" data-bind="checked: settings.plugins.dashboard.showTempGaugeColors">
+            </label>
+        </div>
+        <span class="label label-info">Info:</span> Temp gauges will be blue below the temp deviation of the target temp and red if it goes above. </span>
+        <label class="control-label">{{ _('Target temp deviation:')}}</label>
+        <div class="controls">
+            <input type="number" min="0" max="50" step="1" class="input-mini text-left" data-bind="value: settings.plugins.dashboard.targetTempDeviation">
+            <span class="add-on">&deg;C</span>
+        </div>
+        <span class="label label-info">Info:</span> The max range of the respective temp gauge: </span>
+        <br/>
+        <label class="control-label">{{ _('Hotend Max Temp:')}}</label>
         <div class="controls">
             <input type="number" min="0" max="300" step="10" class="input-mini text-left" data-bind="value: settings.plugins.dashboard.hotendTempMax">
             <span class="add-on">&deg;C</span>
         </div>
-        <label class="control-label">{{ _('Bed Max:')}}</label>
+        <label class="control-label">{{ _('Bed Max Temp:')}}</label>
         <div class="controls">
             <input type="number" min="0" max="300" step="10" class="input-mini text-left" data-bind="value: settings.plugins.dashboard.bedTempMax">
             <span class="add-on">&deg;C</span>
         </div>
-        <label class="control-label">{{ _('Chamber Max:')}}</label>
+        <label class="control-label">{{ _('Chamber Max Temp:')}}</label>
         <div class="controls">
             <input type="number" min="0" max="300" step="10" class="input-mini text-left" data-bind="value: settings.plugins.dashboard.chamberTempMax">
             <span class="add-on">&deg;C</span>
@@ -103,6 +116,7 @@
    </div>
 
     <legend>{{ _('CPU Temperature warning thresholds') }}</legend>
+    <span class="label label-info">Info:</span> The CPU temp indicator will be set to orange above the warning threshold and red above the critical threshold.</span>
     <div class="control-group">
         <label class="control-label">{{ _('CPU warning threshold:')}}</label>
         <div class="controls">

diff --git a/octoprint_dashboard/templates/dashboard_tab.jinja2 b/octoprint_dashboard/templates/dashboard_tab.jinja2
@@ -57,7 +57,9 @@
         <img class="dashboardIcon" title="Hotend temp (target temp)" src="plugin/dashboard/static/img/hotend-icon.png">
         <svg xmlns="http://www.w3.org/2000/svg" height="120" width="120" viewBox="0 0 200 200">
           <path class="bg" stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none"/>
-          <path class="dashboardGauge" stroke="#09c" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': $parent.formatTempOffset(actual(), $parent.settingsViewModel.settings.plugins.dashboard.hotendTempMax()) }"/>
+
+          <path class="tempCurrent" stroke="##08c" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': $parent.formatTempOffset(actual(), $parent.settingsViewModel.settings.plugins.dashboard.hotendTempMax()), 'stroke':  $parent.tempColor(actual(), target()) }"/>
+
           <path class="target" stroke="gray" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': $parent.formatTempOffset(target(), $parent.settingsViewModel.settings.plugins.dashboard.hotendTempMax()) }" />
           <text class="dashboardGauge" font-size="30" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="html: Math.round(actual()) + '°C'"></text>
           <text class="dashboardGauge" font-size="20" x="50%" y="65%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="html: name()"></text>
@@ -70,8 +72,10 @@
       <div class="dashboardGridItem" data-bind="visible: temperatureModel.isOperational() && temperatureModel.hasBed">
         <img class="dashboardIcon" title="Bed temp (target temp)" src="plugin/dashboard/static/img/bed-icon.png">
         <svg xmlns="http://www.w3.org/2000/svg" height="120" width="120" viewBox="0 0 200 200">
-          <path class="bg" stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" />
-          <path class="dashboardGauge" stroke="#09c" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': formatTempOffset(temperatureModel.bedTemp.actual(), settingsViewModel.settings.plugins.dashboard.bedTempMax()) }" />
+          <path class="bg" stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" />    style: { color: cpuTempColor()
+
+          <path class="tempCurrent" stroke="##08c" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': formatTempOffset(temperatureModel.bedTemp.actual(), settingsViewModel.settings.plugins.dashboard.bedTempMax()), 'stroke':  tempColor(temperatureModel.bedTemp.actual(), temperatureModel.bedTemp.target()) }" />
+
           <path class="target" stroke="gray" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': formatTempOffset(temperatureModel.bedTemp.target(), settingsViewModel.settings.plugins.dashboard.bedTempMax()) }"/>
           <text class="dashboardGauge" font-size="30" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="html: Math.round(temperatureModel.bedTemp.actual()) + '°C'"></text>
           <text class="dashboardGauge" font-size="20" x="50%" y="85%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="html: 'Target: ' + temperatureModel.bedTemp.target() + '°C' "></text>
@@ -83,7 +87,9 @@
         <img class="dashboardIcon" title="Chamber temp (target temp)" src="plugin/dashboard/static/img/chamber-icon.png">
         <svg xmlns="http://www.w3.org/2000/svg" height="120" width="120" viewBox="0 0 200 200">
           <path class="bg" stroke="#ccc" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" />
-          <path class="dashboardGauge" stroke="#09c" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': formatTempOffset(temperatureModel.chamberTemp.actual(), settingsViewModel.settings.plugins.dashboard.chamberTempMax()) }" />
+
+          <path class="tempCurrent" stroke="##08c" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': formatTempOffset(temperatureModel.chamberTemp.actual(), settingsViewModel.settings.plugins.dashboard.chamberTempMax()), 'stroke':  tempColor(temperatureModel.chamberTemp.actual(), temperatureModel.chamberTemp.target()) }" />
+
           <path class="target" stroke="gray" d="M41 149.5a77 77 0 1 1 117.93 0" fill="none" stroke-dasharray="350" data-bind="attr: { 'stroke-dashoffset': formatTempOffset(temperatureModel.chamberTemp.target(), settingsViewModel.settings.plugins.dashboard.chamberTempMax()) }" />
           <text class="dashboardGauge" font-size="30" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="html: Math.round(temperatureModel.chamberTemp.actual()) + '°C'"></text>
           <text class="dashboardGauge" font-size="20" x="50%" y="85%" dominant-baseline="middle" text-anchor="middle" fill="#08c" data-bind="html: 'Target: ' + temperatureModel.chamberTemp.target() + '°C' "></text>