feat: Colorize output based on current reading

gabe565 · May 9, 2024 · 217ecec · 217ecec
1 parent 0e79950
commit 217ecec
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,7 @@ A Nightscout plugin for the Elgato Stream Deck.
 - Displays current blood sugar reading, change since last reading, and an arrow
 - Supports mg/dL and mmol/L
 - Supports Nightscout API tokens
+- Changes color based on whether the current reading is in-range
 - Only requests new data when a new reading should be available, which gives timely data while also conserving battery life
 
 ## Installation

diff --git a/src/com.gabe565.nightscout.sdPlugin/actions/template/property-inspector/index.html b/src/com.gabe565.nightscout.sdPlugin/actions/template/property-inspector/index.html
@@ -41,6 +41,49 @@
             </span>
           </div>
         </div>
+
+        <div type="textarea" class="sdpi-item">
+          <label for="normal_high" class="sdpi-item-label">Normal High</label>
+          <span class="sdpi-item-value">
+            <input type="number" id="normal_high" name="normalHigh" required />
+          </span>
+        </div>
+
+        <div type="textarea" class="sdpi-item">
+          <label for="normal_low" class="sdpi-item-label">Normal Low</label>
+          <span class="sdpi-item-value">
+            <input type="number" id="normal_low" name="normalLow" required />
+          </span>
+        </div>
+
+        <div type="textarea" class="sdpi-item">
+          <label for="urgent_high" class="sdpi-item-label">Urgent High</label>
+          <span class="sdpi-item-value">
+            <input type="number" id="urgent_high" name="urgentHigh" required />
+          </span>
+        </div>
+
+        <div type="textarea" class="sdpi-item">
+          <label for="urgent_low" class="sdpi-item-label">Urgent Low</label>
+          <span class="sdpi-item-value">
+            <input type="number" id="urgent_low" name="urgentLow" required />
+          </span>
+        </div>
+
+        <div type="range" class="sdpi-item">
+          <label for="in_range_color" class="sdpi-item-label">In-Range Color</label>
+          <input type="color" id="in_range_color" name="inRangeColor" />
+        </div>
+
+        <div type="range" class="sdpi-item">
+          <label for="normal_color" class="sdpi-item-label">High/Low Color</label>
+          <input type="color" id="normal_color" name="normalColor" />
+        </div>
+
+        <div type="range" class="sdpi-item">
+          <label for="urgent_color" class="sdpi-item-label">Urgent Color</label>
+          <input type="color" id="urgent_color" name="urgentColor" />
+        </div>
       </form>
     </div>
 

diff --git a/src/com.gabe565.nightscout.sdPlugin/js/Nightscout.js b/src/com.gabe565.nightscout.sdPlugin/js/Nightscout.js
@@ -79,7 +79,7 @@ class Nightscout {
 
     this.renderTimeout = null;
 
-    const image = this.template.render(this.response, this.settings.unit);
+    const image = this.template.render(this.response, this.settings);
     if (image) {
       $SD.setImage(this.context, image);
       if (!this.renderTimeout) {

diff --git a/src/com.gabe565.nightscout.sdPlugin/js/Template.js b/src/com.gabe565.nightscout.sdPlugin/js/Template.js
@@ -14,7 +14,7 @@ class Template {
     this.img.src = "actions/template/assets/action.svg";
   }
 
-  render(data, unit) {
+  render(data, settings) {
     if (!this.loaded) {
       return;
     }
@@ -26,19 +26,24 @@ class Template {
     const imgHeight = Height / 4;
     context.drawImage(this.img, 10, Height / 2 - imgHeight / 2, imgWidth, imgHeight);
 
-    context.fillStyle = "#fff";
     context.textAlign = "center";
     context.font = "36px Verdana";
     let last = data.bgnow.last;
-    if (unit === Unit.Mmol) {
+    if (settings.unit === Unit.Mmol) {
       last = NSUtils.toMmol(last);
     }
+    if (last >= settings.urgentHigh || last <= settings.urgentLow) {
+      context.fillStyle = settings.urgentColor;
+    } else if (last >= settings.normalHigh || last <= settings.normalLow) {
+      context.fillStyle = settings.normalColor;
+    } else {
+      context.fillStyle = settings.inRangeColor;
+    }
     context.fillText(last, Width / 2 + 20, Height / 2 - 10);
 
     context.font = "25px Verdana";
-    context.fillStyle = "#ddd";
     let delta = data.delta.display;
-    if (unit === Unit.Mmol) {
+    if (settings.unit === Unit.Mmol) {
       delta = NSUtils.toMmol(data.delta.scaled);
       if (delta >= 0) {
         delta = "+" + delta;

diff --git a/src/com.gabe565.nightscout.sdPlugin/js/const.js b/src/com.gabe565.nightscout.sdPlugin/js/const.js
@@ -10,4 +10,11 @@ const DefaultSettings = {
   token: "",
   updateInterval: 60000,
   unit: Unit.Mgdl,
+  normalHigh: 180,
+  normalLow: 80,
+  urgentHigh: 200,
+  urgentLow: 70,
+  inRangeColor: "#55ff66",
+  normalColor: "#ffff44",
+  urgentColor: "#ff4444",
 };