Extra info (delta and last measurement time) on clock view.

README.md

@@ -309,7 +309,7 @@ To learn more about the Nightscout API, visit https://YOUR-SITE.com/api-docs/ or
 
   There are a few alternate web views available from the main menu that display a simplified BG stream. (If you launch one of these in a fullscreen view in iOS, you can use a left-to-right swipe gesture to exit the view.)
   * `Clock` - Shows current BG, trend arrow, and time of day. Grey text on a black background.
-  * `Color` - Shows current BG and trend arrow. White text on a background that changes color to indicate current BG threshold (green = in range; blue = below range; yellow = above range; red = urgent below/above).
+  * `Color` - Shows current BG and trend arrow. White text on a background that changes color to indicate current BG threshold (green = in range; blue = below range; yellow = above range; red = urgent below/above). Set `SHOW_CLOCK_DELTA` to `true` to show BG change in the last 5 minutes, set `SHOW_CLOCK_LAST_TIME` to `true` to always show BG age.
   * `Simple` - Shows current BG. Grey text on a black background.
 
 ### Plugins

lib/client/clock-client.js

@@ -37,11 +37,14 @@ client.render = function render (xhr) {
   console.log('got data', xhr);
 
   let rec;
+  let delta;
 
-  xhr.some(element => {
-    if (element.sgv) {
+  xhr.forEach(element => {
+    if (element.sgv && !rec && !delta) {
       rec = element;
-      return true;
+    }
+    else if (element.sgv && rec && !delta) {
+      delta = (rec.sgv - element.sgv)/((rec.date - element.date)/(5*60*1000));
     }
   });
 
@@ -67,8 +70,14 @@ client.render = function render (xhr) {
   // Convert BG to mmol/L if necessary.
   if (window.serverSettings.settings.units === 'mmol') {
     var displayValue = window.Nightscout.units.mgdlToMMOL(rec.sgv);
+    var deltaDisplayValue = window.Nightscout.units.mgdlToMMOL(delta);
   } else {
     displayValue = rec.sgv;
+    deltaDisplayValue = Math.round(delta);
+  }
+
+  if (deltaDisplayValue > 0) {
+    deltaDisplayValue = '+' +  deltaDisplayValue;
   }
 
   // Insert the BG value text.
@@ -118,7 +127,30 @@ client.render = function render (xhr) {
     var elapsedMins = Math.round(((now - last) / 1000) / 60);
 
     // Insert the BG stale time text.
-    $('#staleTime').text(elapsedMins + ' minutes ago');
+    let staleTimeText;
+    if (elapsedMins == 0) {
+      staleTimeText = 'Just now';
+    }
+    else if (elapsedMins == 1) {
+      staleTimeText = '1 minute ago';
+    }
+    else {
+      staleTimeText = elapsedMins + ' minutes ago';
+    }
+    $('#staleTime').text(staleTimeText);
+
+    // Force NS to always show 'x minutes ago'
+    if (window.serverSettings.settings.showClockLastTime) {
+      $('#staleTime').css('display', 'block');
+    }
+
+    // Insert the delta value text.
+    $('#delta').html(deltaDisplayValue);
+
+    // Show delta
+    if (window.serverSettings.settings.showClockDelta) {
+      $('#delta').css('display', 'inline-block');
+    }
 
     // Threshold background coloring.
     if (bgNum < bgLow) {
@@ -141,12 +173,20 @@ client.render = function render (xhr) {
     if (now - last > threshold) {
       $('body').css('background-color', 'grey');
       $('body').css('color', 'black');
-      $('#staleTime').css('display', 'block');
       $('#arrow').css('filter', 'brightness(0%)');
+
+      if (!window.serverSettings.settings.showClockLastTime) {
+        $('#staleTime').css('display', 'block');
+      }
+
     } else {
-      $('#staleTime').css('display', 'none');
       $('body').css('color', 'white');
       $('#arrow').css('filter', 'brightness(100%)');
+
+      if (!window.serverSettings.settings.showClockLastTime) {
+        $('#staleTime').css('display', 'none');
+      }
+
     }
   }
 };

lib/settings.js

@@ -48,6 +48,8 @@ function init () {
     , secureHstsHeaderPreload: false
     , secureCsp: false
     , deNormalizeDates: false
+    , showClockDelta: false
+    , showClockLastTime: false
   };
 
   var valueMappers = {
@@ -69,6 +71,8 @@ function init () {
     , secureHstsHeader: mapTruthy
     , secureCsp: mapTruthy
     , deNormalizeDates: mapTruthy
+    , showClockDelta: mapTruthy
+    , showClockLastTime: mapTruthy
   };
 
   function mapNumberArray (value) {

views/clockviews/clock-color.css

@@ -8,6 +8,20 @@ body {
   flex-direction: column;
 }
 
+#bgnow {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#delta {
+    font-size: 16vmin;
+    vertical-align: middle;
+}
+
+#innerTrend {
+    word-spacing: 2em;
+}
+
 #arrowDiv {
   flex-grow: 1;
   text-align: center;

views/clockviews/clock-shared.css

@@ -52,6 +52,10 @@ main {
   display: none;
 }
 
+#delta {
+  display: none;
+}
+
 .close {
   color: white;
   font: 4em 'Open Sans';

views/clockviews/shared.html

@@ -30,7 +30,10 @@
     <a href="/" id="closeButton" class="close"></a>
     <div class="inner">
       <div id="trend">
-        <div id="bgnow"></div>
+        <div id="innerTrend">
+          <span id="bgnow"></span>
+          <span id="delta"></span>
+        </div>
         <div id="arrowDiv"><img id="arrow" src="" alt="arrow" /></div>
       </div>
       <div id="clock"></div>