update IAQ zones, hide IAQ status when calibrated

data/airqmon.js

@@ -3,25 +3,11 @@ var websock;
 var timeseries = {};
 var charts = {};
 
-var gaugeModes = {
-    staticZones: [
-       {strokeStyle: "#00E400", min: 0, max: 50}, // Green
-       {strokeStyle: "#FFFF00", min: 51, max: 100}, // Yellow
-       {strokeStyle: "#FF7E00", min: 101, max: 150}, // Orange
-       {strokeStyle: "#FF0000", min: 151, max: 200}, // Red
-       {strokeStyle: "#8F3F97", min: 201, max: 300}, // Violet
-       {strokeStyle: "#7E0023", min: 301, max: 500}  // Brown
-    ],
-    percentColors: [
-        [0.0, "#00E400" ],
-        [0.1, "#FFFF00" ],
-        [0.2, "#FF7E00"],
-        [0.3, "#FF0000"],
-        [0.4, "#8F3F97"],
-        [0.6, "#7E0023"]
-    ]
-}
-
+$(document).ready(function(event) {
+    setupGauge('staticZones');
+    //setupGauge('percentColors');
+    startWebsocket();
+});
 
 var metrics = {
     "iaq": {name: "IAQ", has_accuracy: true, decimals: 0},
@@ -64,12 +50,33 @@ var gaugeOptions = {
     highDpiSupport: true,     // High resolution support
     staticLabels: {
       font: "10px sans-serif",  // Specifies font
-      labels: [50, 100, 150, 200, 300, 500],  // Print labels at these values
+      labels: [50, 100, 150, 200, 250, 350, 500],  // Print labels at these values
       color: "#000000",  // Optional: Label text color
       fractionDigits: 0  // Optional: Numerical precision. 0=round off.
     }
 };
 
+var gaugeModes = {
+    staticZones: [
+       {strokeStyle: "#01E400", min: 0, max: 50}, // Bright Green
+       {strokeStyle: "#92D050", min: 51, max: 100}, // Green 
+       {strokeStyle: "#FFFF00", min: 101, max: 150}, // Yellow
+       {strokeStyle: "#FF7E00", min: 151, max: 200}, // Orange
+       {strokeStyle: "#FF0000", min: 201, max: 250}, // Red
+       {strokeStyle: "#99004C", min: 251, max: 350}, // Violet
+       {strokeStyle: "#663300", min: 351, max: 500}  // Brown
+    ],
+    percentColors: [
+        [0.0, "#01E400" ],
+        [0.1, "#92D050" ],
+        [0.2, "#FFFF00"],
+        [0.3, "#FF7E00"],
+        [0.4, "#FF0000"],
+        [0.5, "#99004C"],
+        [0.7, "#663300"]
+    ]
+}
+
 var chartOptions = {
     responsive: true,
     millisPerPixel: 100,
@@ -88,11 +95,6 @@ var lineOptions = {
     strokeStyle:'#00ff00'
 }
 
-$(document).ready(function(event) {
-    setupGauge('staticZones');
-    startWebsocket();
-});
-
 function setupGauge(mode) {
     var objColor = {}
     objColor[mode] = gaugeModes[mode];
@@ -101,6 +103,7 @@ function setupGauge(mode) {
     gauge.setMinValue(0);
     gauge.maxValue = 500;
     gauge.animationSpeed = 128;
+    gauge.set(0);
 }
 
 function startWebsocket() {
@@ -146,7 +149,7 @@ function updateMetric(name, value, accuracy) {
     if ('unit' in metrics[name]) {
         value += metrics[name].unit;
     }
-    if (accuracy !== false) {
+    if (accuracy !== false && accuracy < 3) {
         value = '<span class="badge bg-'+accuracyStatus[accuracy].class+'">'+accuracyStatus[accuracy].name+'</span> '+value;
     }
     if(!$('#metric_'+name).length && name in metrics) {