From 1197292446070fd824696bb5279c331e71952470 Mon Sep 17 00:00:00 2001 From: Ireneusz Ptak Date: Thu, 24 Oct 2019 20:12:27 +0200 Subject: [PATCH 1/2] Parametrized clock view --- README.md | 2 +- lib/client/clock-client.js | 52 +++++++++++++++++++++++++++---- lib/settings.js | 4 +++ views/clockviews/clock-color.css | 18 +++++++++++ views/clockviews/clock-shared.css | 4 +++ views/clockviews/shared.html | 5 ++- 6 files changed, 77 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 8ad79a39d72..fc36b144b46 100644 --- a/README.md +++ b/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 diff --git a/lib/client/clock-client.js b/lib/client/clock-client.js index 5ff3a787e28..62c204a696d 100644 --- a/lib/client/clock-client.js +++ b/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'); + } + } } }; diff --git a/lib/settings.js b/lib/settings.js index cd2aa3dc928..5024157e70d 100644 --- a/lib/settings.js +++ b/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) { diff --git a/views/clockviews/clock-color.css b/views/clockviews/clock-color.css index 5a8c41d2451..6c656d3c8e0 100644 --- a/views/clockviews/clock-color.css +++ b/views/clockviews/clock-color.css @@ -8,6 +8,24 @@ body { flex-direction: column; } +#bgnow { + display: inline-block; + vertical-align: middle; +} + +#delta { + font-size: 16vmin; + vertical-align: middle; +} + +#innerTrend { + word-spacing: 2em; +} + +#innerTrend { + word-spacing: 2em; +} + #arrowDiv { flex-grow: 1; text-align: center; diff --git a/views/clockviews/clock-shared.css b/views/clockviews/clock-shared.css index 9919a1a11c1..83328fe4114 100644 --- a/views/clockviews/clock-shared.css +++ b/views/clockviews/clock-shared.css @@ -52,6 +52,10 @@ main { display: none; } +#delta { + display: none; +} + .close { color: white; font: 4em 'Open Sans'; diff --git a/views/clockviews/shared.html b/views/clockviews/shared.html index 1be330dee66..cb27b137dfb 100644 --- a/views/clockviews/shared.html +++ b/views/clockviews/shared.html @@ -30,7 +30,10 @@
-
+
+ + +
arrow
From 6ca1b9dad03c6a3df208f403ace81441cb0a57d7 Mon Sep 17 00:00:00 2001 From: Ireneusz Ptak Date: Thu, 24 Oct 2019 20:22:23 +0200 Subject: [PATCH 2/2] Parametrized clock view --- views/clockviews/clock-color.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/views/clockviews/clock-color.css b/views/clockviews/clock-color.css index 6c656d3c8e0..6a6796ef823 100644 --- a/views/clockviews/clock-color.css +++ b/views/clockviews/clock-color.css @@ -22,10 +22,6 @@ body { word-spacing: 2em; } -#innerTrend { - word-spacing: 2em; -} - #arrowDiv { flex-grow: 1; text-align: center;