From 2496a131cb2d7881bb3ac2e5a3e36a49fff00d30 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 01:47:26 -0700 Subject: [PATCH 01/10] initial support for an adjustable focus range --- static/css/main.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++-- static/index.html | 6 ++++++ static/js/client.js | 28 +++++++++++++++++++-------- 3 files changed, 80 insertions(+), 10 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index 8332c965c..6880f6fe1 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -249,6 +249,29 @@ div.tooltip { display: none; } +.focus-range { + list-style: none; + margin: 4px; + padding: 0; + width: 250px; + text-align: center; +} + +.focus-range li { + display: inline-block; + font-size: 14px; + white-space: nowrap; + border-radius: 5px; + border: 2px solid #000; + cursor: pointer; +} + +.focus-range li.selected { + border-color: #bdbdbd; + color: #000; + background: #bdbdbd; +} + @media (max-width: 800px) { .bgStatus { width: 40%; @@ -282,6 +305,10 @@ div.tooltip { line-height: 40px; } + .focus-range { + margin: 0; + } + #silenceBtn * { font-size: 30px; } @@ -401,11 +428,23 @@ div.tooltip { font-size: 15px; } + .focus-range { + position: absolute; + top: 70px; + left: 10px; + margin: 0; + width: auto; + } + + .focus-range li { + display: block; + } + #chartContainer { - top: 210px; + top: 190px; } #chartContainer svg { - height: calc(100vh - (210px)); + height: calc(100vh - (190px)); } } @@ -467,6 +506,7 @@ div.tooltip { .time { font-size: 70px; line-height: 60px; + padding-top: 5px; } .timeOther { @@ -495,4 +535,16 @@ div.tooltip { font-size: 15px; } + .focus-range { + position: absolute; + top: 10px; + left: 10px; + margin: 0; + width: auto; + } + + .focus-range li { + display: block; + } + } diff --git a/static/index.html b/static/index.html index 8efb378d2..e9cce740f 100644 --- a/static/index.html +++ b/static/index.html @@ -48,6 +48,12 @@

Nightscout

+
diff --git a/static/js/client.js b/static/js/client.js index b090a2771..39a970b84 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -10,10 +10,10 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , ONE_MIN_IN_MS = 60000 , FIVE_MINS_IN_MS = 300000 , SIX_MINS_IN_MS = 360000 + , THREE_HOURS_MS = 3 * 60 * 60 * 1000 , TWENTY_FIVE_MINS_IN_MS = 1500000 , THIRTY_MINS_IN_MS = 1800000 , SIXTY_MINS_IN_MS = 3600000 - , FOCUS_DATA_RANGE_MS = 12600000 // 3.5 hours of actual data , FORMAT_TIME_12 = '%I:%M' , FORMAT_TIME_24 = '%H:%M%' , FORMAT_TIME_SCALE = '%I %p' @@ -38,6 +38,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , opacity = {current: 1, DAY: 1, NIGHT: 0.5} , now = Date.now() , data = [] + , foucusRangeMS = THREE_HOURS_MS , audio = document.getElementById('audio') , alarmInProgress = false , currentAlarmType = null @@ -211,7 +212,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; d3.select('.brush') .transition() .duration(UPDATE_TRANS_MS) - .call(brush.extent([new Date(dataRange[1].getTime() - FOCUS_DATA_RANGE_MS), dataRange[1]])); + .call(brush.extent([new Date(dataRange[1].getTime() - foucusRangeMS), dataRange[1]])); brushed(true); // clear user brush tracking @@ -291,15 +292,15 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; var brushExtent = brush.extent(); // ensure that brush extent is fixed at 3.5 hours - if (brushExtent[1].getTime() - brushExtent[0].getTime() != FOCUS_DATA_RANGE_MS) { + if (brushExtent[1].getTime() - brushExtent[0].getTime() != foucusRangeMS) { // ensure that brush updating is with the time range - if (brushExtent[0].getTime() + FOCUS_DATA_RANGE_MS > d3.extent(data, dateFn)[1].getTime()) { - brushExtent[0] = new Date(brushExtent[1].getTime() - FOCUS_DATA_RANGE_MS); + if (brushExtent[0].getTime() + foucusRangeMS > d3.extent(data, dateFn)[1].getTime()) { + brushExtent[0] = new Date(brushExtent[1].getTime() - foucusRangeMS); d3.select('.brush') .call(brush.extent([brushExtent[0], brushExtent[1]])); } else { - brushExtent[1] = new Date(brushExtent[0].getTime() + FOCUS_DATA_RANGE_MS); + brushExtent[1] = new Date(brushExtent[0].getTime() + foucusRangeMS); d3.select('.brush') .call(brush.extent([brushExtent[0], brushExtent[1]])); } @@ -533,7 +534,9 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; // add treatment bubbles // a higher bubbleScale will produce smaller bubbles (it's not a radius like focusDotRadius) - var bubbleScale = prevChartWidth < WIDTH_SMALL_DOTS ? 4 : (prevChartWidth < WIDTH_BIG_DOTS ? 3 : 2); + var focusRangeAdjustment = 1 + (foucusRangeMS / THREE_HOURS_MS) / 10; + var bubbleScale = (prevChartWidth < WIDTH_SMALL_DOTS ? 4 : (prevChartWidth < WIDTH_BIG_DOTS ? 3 : 2)) * focusRangeAdjustment; + focus.selectAll('circle') .data(treatments) .each(function (d) { drawTreatment(d, bubbleScale, true) }); @@ -922,7 +925,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; var updateBrush = d3.select('.brush').transition().duration(UPDATE_TRANS_MS); if (!brushInProgress) { updateBrush - .call(brush.extent([new Date(dataRange[1].getTime() - FOCUS_DATA_RANGE_MS), dataRange[1]])); + .call(brush.extent([new Date(dataRange[1].getTime() - foucusRangeMS), dataRange[1]])); brushed(true); } else { updateBrush @@ -1409,6 +1412,15 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; e.preventDefault(); }); + $('.focus-range li').click(function(e) { + var li = $(e.target); + $('.focus-range li').removeClass('selected'); + li.addClass('selected'); + var hours = Number(li.data('hours')); + foucusRangeMS = hours * 60 * 60 * 1000; + updateChart(false); + }); + //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Client-side code to connect to server and handle incoming data //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// From f472ca31bd4e365de9a35b83baae82bccc579176 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 02:00:29 -0700 Subject: [PATCH 02/10] hide focus range selectors when there is an alarm in narrow mode --- static/css/main.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index 6880f6fe1..8e15c11f3 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -428,10 +428,14 @@ div.tooltip { font-size: 15px; } + .alarming .focus-range { + display: none; + } + .focus-range { position: absolute; top: 70px; - left: 10px; + left: 20px; margin: 0; width: auto; } From c54a3226d52fa3cd4127b08394e1136763a96a26 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 02:20:29 -0700 Subject: [PATCH 03/10] button clean up --- static/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index 8e15c11f3..bec90f9fc 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -208,7 +208,7 @@ span.pill label { .alarming .bgButton { border-color: #bdbdbd; color: #000; - box-shadow: 2px 4px 6px #ddd; + box-shadow: 2px 2px 0 #ddd; } .alarming .bgButton.urgent { From 45f4979819d2d5deb8550959c69954579fee42c7 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 02:40:47 -0700 Subject: [PATCH 04/10] prevent some flashing while data loads --- static/css/main.css | 9 +++++++++ static/index.html | 2 +- static/js/client.js | 4 ++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index bec90f9fc..fe2606b26 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -118,6 +118,11 @@ span.pill label { font-size: 20px; line-height: 30px; } + +.loading #lastEntry { + display: none; +} + #lastEntry { background: #808080; border-color: #808080; @@ -249,6 +254,10 @@ div.tooltip { display: none; } +.loading .focus-range { + display: none; +} + .focus-range { list-style: none; margin: 4px; diff --git a/static/index.html b/static/index.html index e9cce740f..5fab9d6b1 100644 --- a/static/index.html +++ b/static/index.html @@ -24,7 +24,7 @@

Nightscout

-
+
diff --git a/static/js/client.js b/static/js/client.js index 39a970b84..492225f2e 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -973,6 +973,10 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; // update x axis domain context.select('.x') .call(xAxis2); + + if (init) { + $('.container').removeClass('loading'); + } } function sgvToColor(sgv) { From 26ba414d82fa110f027a40e9de58511ecfe0ed64 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 11:20:03 -0700 Subject: [PATCH 05/10] better scaling when using bigger ranges; use same color as clock foe rang selectors --- static/css/main.css | 4 ++-- static/js/client.js | 8 +++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index fe2606b26..d5be82207 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -276,9 +276,9 @@ div.tooltip { } .focus-range li.selected { - border-color: #bdbdbd; + border-color: #808080; color: #000; - background: #bdbdbd; + background: #808080; } @media (max-width: 800px) { diff --git a/static/js/client.js b/static/js/client.js index 492225f2e..c5a98adc8 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -11,6 +11,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , FIVE_MINS_IN_MS = 300000 , SIX_MINS_IN_MS = 360000 , THREE_HOURS_MS = 3 * 60 * 60 * 1000 + , TWELVE_HOURS_MS = 12 * 60 * 60 * 1000 , TWENTY_FIVE_MINS_IN_MS = 1500000 , THIRTY_MINS_IN_MS = 1800000 , SIXTY_MINS_IN_MS = 3600000 @@ -135,7 +136,6 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; } else if (noise < 2 && browserSettings.showRawbg != 'always') { return 0; } else if (filtered == 0 || sgv < 40) { - console.info('Skipping ratio adjustment for SGV ' + sgv); return scale * (unfiltered - intercept) / slope; } else { var ratio = scale * (filtered - intercept) / slope / sgv; @@ -461,11 +461,14 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; // selects all our data into data and uses date function to get current max date var focusCircles = focus.selectAll('circle').data(focusData, dateFn); + var focusRangeAdjustment = foucusRangeMS == THREE_HOURS_MS ? 1 : 1 + ((foucusRangeMS - THREE_HOURS_MS) / THREE_HOURS_MS / 8); + var dotRadius = function(type) { var radius = prevChartWidth > WIDTH_BIG_DOTS ? 4 : (prevChartWidth < WIDTH_SMALL_DOTS ? 2 : 3); if (type == 'mbg') radius *= 2; else if (type == 'rawbg') radius = Math.min(2, radius - 1); - return radius; + + return radius / focusRangeAdjustment; }; function prepareFocusCircles(sel) { @@ -534,7 +537,6 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; // add treatment bubbles // a higher bubbleScale will produce smaller bubbles (it's not a radius like focusDotRadius) - var focusRangeAdjustment = 1 + (foucusRangeMS / THREE_HOURS_MS) / 10; var bubbleScale = (prevChartWidth < WIDTH_SMALL_DOTS ? 4 : (prevChartWidth < WIDTH_BIG_DOTS ? 3 : 2)) * focusRangeAdjustment; focus.selectAll('circle') From bf5c3ddf58d0d411c4485282c6938279d661a6fb Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 19:46:44 -0700 Subject: [PATCH 06/10] bigger pills for bigger screens; only use the briter gray for the pill value --- static/css/main.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index d5be82207..290df78b8 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -72,7 +72,7 @@ body { } .bgStatus .currentDetails { - font-size: 20px; + font-size: 30px; } .currentDetails > span:not(:first-child) { @@ -82,7 +82,7 @@ body { span.pill { white-space: nowrap; border-radius: 5px; - border: 2px solid #bdbdbd; + border: 2px solid #808080; } span.pill * { @@ -97,7 +97,7 @@ span.pill em { span.pill label { color: #000; - background: #bdbdbd; + background: #808080; } .bgStatus.current .currentBG { @@ -129,7 +129,7 @@ span.pill label { } #lastEntry.pill em { - color: #808080; + color: #bdbdbd; background: #000; } @@ -304,6 +304,10 @@ div.tooltip { line-height: 70px; } + .bgStatus .currentDetails { + font-size: 20px; + } + .time { font-size: 70px; line-height: 60px; From 17600b74baa8b8ab853073f05752745a0a81511f Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 19:56:40 -0700 Subject: [PATCH 07/10] fixed radius of time ago value --- static/css/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/static/css/main.css b/static/css/main.css index 290df78b8..2a57d94d1 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -131,6 +131,7 @@ span.pill label { #lastEntry.pill em { color: #bdbdbd; background: #000; + border-radius: 5px 0 0 5px; } #lastEntry.pill label { From 39b141facfb4a18529e023e597bd04e5719862b2 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 19:57:49 -0700 Subject: [PATCH 08/10] make clicking on the focus ranges more responsive by using a timeout --- static/js/client.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index c5a98adc8..34e5d4356 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -1396,9 +1396,13 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; context.append('g') .attr('class', 'y axis'); + window.onresize = function () { + updateChartSoon() + } + // look for resize but use timer to only call the update script when a resize stops var resizeTimer; - window.onresize = function () { + function updateChartSoon() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { updateChart(false); @@ -1424,7 +1428,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; li.addClass('selected'); var hours = Number(li.data('hours')); foucusRangeMS = hours * 60 * 60 * 1000; - updateChart(false); + updateChartSoon(); }); //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// From 7309e66bac45b206b5f1983bbacbd1d38ca41d88 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 20:01:40 -0700 Subject: [PATCH 09/10] another radius tweek --- static/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index 2a57d94d1..18b6944a4 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -131,7 +131,7 @@ span.pill label { #lastEntry.pill em { color: #bdbdbd; background: #000; - border-radius: 5px 0 0 5px; + border-radius: 4px 0 0 4px; } #lastEntry.pill label { From b73aec7c8645ca2668dca319574a9afa251fb983 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 15 Mar 2015 20:13:15 -0700 Subject: [PATCH 10/10] only show 'time ago' offset == -1 (only while loading) --- static/js/client.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/client.js b/static/js/client.js index 34e5d4356..75bc5600c 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -1067,7 +1067,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , parts = {}; if (offset < MINUTE_IN_SECS * -5) parts = { label: 'in the future' }; - else if (offset <= 0) parts = { label: 'time ago' }; + else if (offset == -1) parts = { label: 'time ago' }; else if (offset <= MINUTE_IN_SECS * 2) parts = { value: 1, label: 'min ago' }; else if (offset < (MINUTE_IN_SECS * 60)) parts = { value: Math.round(Math.abs(offset / MINUTE_IN_SECS)), label: 'mins ago' }; else if (offset < (HOUR_IN_SECS * 2)) parts = { value: 1, label: 'hr ago' };