From ed264b17e1a4a25a18bb21496f2f24274610d2bf Mon Sep 17 00:00:00 2001
From: Jason Calabrese <jason@cbrese.com>
Date: Thu, 19 Mar 2015 23:17:26 -0700
Subject: [PATCH 1/9] initial display of noise level when rawbg is enabled

---
 static/css/main.css | 15 +++++++++++++++
 static/js/client.js | 24 ++++++++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/static/css/main.css b/static/css/main.css
index 9e7e36a65..2146d168d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -227,6 +227,21 @@ body {
     -webkit-box-shadow: none;
 }
 
+.bgButton.noise-heavy, .bgButton.noise-error {
+    border-color: rgba(255, 0, 0, 0.39);
+    box-shadow: 2px 2px 10px rgba(255, 0, 0, 0.75);
+}
+
+.bgButton.noise-medium {
+    border-color: rgba(255, 255, 0, 0.39);
+    box-shadow: 2px 2px 10px rgba(255, 255, 0, 0.75);
+}
+
+.bgButton.noise-light {
+    border-color: rgba(189, 189, 189, 0.39);
+    box-shadow: 2px 2px 10px rgba(189, 189, 189, 0.75);
+}
+
 .button {
     text-align: center;
     background: #ababab;
diff --git a/static/js/client.js b/static/js/client.js
index 96a39931b..ce60307e2 100644
--- a/static/js/client.js
+++ b/static/js/client.js
@@ -341,6 +341,28 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             currentBG.toggleClass('bg-limit', value == 39 || value > 400);
         }
 
+        function updateCurrentNoise(entry) {
+            var noise = entry.noise
+                , noiseType;
+
+            if ((noise <= 1 && entry.y >= 40) || !showRawBGs()) {
+                noiseType = null;
+            } else if (entry.y < 40) {
+                noiseType = 'error';
+            } else if (noise == 2) {
+                noiseType = 'light';
+            } else if (noise == 3) {
+                noiseType = 'medium';
+            } else if (noise >= 4) {
+                noiseType = 'heavy';
+            }
+
+            bgButton.removeClass('noise-light noise-medium noise-heavy noise-error');
+            if (noiseType) {
+                bgButton.addClass('noise-' + noiseType);
+            }
+        }
+
         function updateBGDelta(prev, current) {
 
             var pill = currentDetails.find('span.pill.bgdelta');
@@ -416,6 +438,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
                 var prevfocusPoint = nowData[nowData.length - 2];
 
                 updateCurrentSGV(focusPoint.y);
+                updateCurrentNoise(focusPoint);
 
                 updateBGDelta(prevfocusPoint.y, focusPoint.y);
 
@@ -440,6 +463,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             nowDate = new Date(now);
 
             updateCurrentSGV(latestSGV.y);
+            updateCurrentNoise(latestSGV);
             updateClockDisplay();
             updateTimeAgo();
 

From 1431be6ec950ea66e7df075c1cfe61b014e7e381 Mon Sep 17 00:00:00 2001
From: Jason Calabrese <jason@cbrese.com>
Date: Fri, 20 Mar 2015 00:06:26 -0700
Subject: [PATCH 2/9] display rawbg in top right if enabled; fix alarm button
 border

---
 static/css/main.css | 51 ++++++++++++++++++++++++++++++++-------------------
 static/index.html   |  1 +
 static/js/client.js | 35 +++++++++++++++++++++++------------
 3 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 2146d168d..01b7186dd 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -206,18 +206,41 @@ body {
   width: 320px;
 }
 
+.bgButton.noise-heavy, .bgButton.noise-error {
+    border-color: rgba(255, 0, 0, 0.39);
+    box-shadow: 2px 2px 10px rgba(255, 0, 0, 0.75);
+}
+
+.bgButton.noise-medium {
+    border-color: rgba(255, 255, 0, 0.39);
+    box-shadow: 2px 2px 10px rgba(255, 255, 0, 0.75);
+}
+
+.bgButton.noise-light {
+    border-color: rgba(189, 189, 189, 0.39);
+    box-shadow: 2px 2px 10px rgba(189, 189, 189, 0.75);
+}
+
+.bgButton .rawbg {
+    color: white;
+    position: absolute;
+    top: 60px;
+    right: 20px;
+    text-shadow: 4px 4px 7px rgba(0, 0, 0, 0.84);
+}
+
 .alarming .bgButton {
-  border-color: #bdbdbd;
-  color: #000;
-  box-shadow: 2px 2px 0 #ddd;
+    border-color: #bdbdbd;
+    color: #000;
+    box-shadow: 2px 2px 0 #ddd;
 }
 
 .alarming .bgButton.urgent {
-  background-color: red;
+    background-color: red;
 }
 
 .alarming .bgButton.warning {
-  background-color: yellow;
+    background-color: yellow;
 }
 
 .alarming .bgButton:active {
@@ -227,20 +250,6 @@ body {
     -webkit-box-shadow: none;
 }
 
-.bgButton.noise-heavy, .bgButton.noise-error {
-    border-color: rgba(255, 0, 0, 0.39);
-    box-shadow: 2px 2px 10px rgba(255, 0, 0, 0.75);
-}
-
-.bgButton.noise-medium {
-    border-color: rgba(255, 255, 0, 0.39);
-    box-shadow: 2px 2px 10px rgba(255, 255, 0, 0.75);
-}
-
-.bgButton.noise-light {
-    border-color: rgba(189, 189, 189, 0.39);
-    box-shadow: 2px 2px 10px rgba(189, 189, 189, 0.75);
-}
 
 .button {
     text-align: center;
@@ -513,6 +522,10 @@ div.tooltip {
         display: none;
     }
 
+    .bgButton .rawbg {
+        top: 40px;
+    }
+
     .container {
         top: 15px;
         padding-bottom: 20px;
diff --git a/static/index.html b/static/index.html
index 0ff53abe7..765d6c223 100644
--- a/static/index.html
+++ b/static/index.html
@@ -30,6 +30,7 @@ <h1 class="customTitle">Nightscout</h1>
                     <div class="bgButton ">
                         <span class="currentBG">---</span>
                         <span class="currentDirection">-</span>
+                        <span class="rawbg"></span>
                     </div>
                     <ul class="dropdown-menu" id="silenceBtn">
                         <li><a href="#" data-snooze-time="1800000">Silence for 30 minutes</a></li>
diff --git a/static/js/client.js b/static/js/client.js
index ce60307e2..7d1f73820 100644
--- a/static/js/client.js
+++ b/static/js/client.js
@@ -124,24 +124,25 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
 
     function rawIsigToRawBg(entry, cal) {
 
-      var unfiltered = parseInt(entry.unfiltered) || 0
+      var raw = 0
+        , unfiltered = parseInt(entry.unfiltered) || 0
         , filtered = parseInt(entry.filtered) || 0
         , sgv = entry.y
-        , noise = entry.noise || 0
         , scale = parseFloat(cal.scale) || 0
         , intercept = parseFloat(cal.intercept) || 0
         , slope = parseFloat(cal.slope) || 0;
 
+
         if (slope == 0 || unfiltered == 0 || scale == 0) {
-          return 0;
-        } else if (noise < 2 && browserSettings.showRawbg != 'always') {
-          return 0;
+          raw = 0;
         } else if (filtered == 0 || sgv < 40) {
-            return scale * (unfiltered - intercept) / slope;
+            raw = scale * (unfiltered - intercept) / slope;
         } else {
             var ratio = scale * (filtered - intercept) / slope / sgv;
-            return scale * ( unfiltered - intercept) / slope / ratio;
+            raw = scale * ( unfiltered - intercept) / slope / ratio;
         }
+
+        return Math.round(raw);
     }
 
     // initial setup of chart when data is first made available
@@ -316,7 +317,9 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             , lastEntry = $('#lastEntry');
 
 
-        function updateCurrentSGV(value) {
+        function updateCurrentSGV(entry) {
+            var value = entry.y;
+
             if (value == 9) {
                 currentBG.text('');
             } else if (value < 39) {
@@ -336,6 +339,13 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
               }
             }
 
+            var rawbg = bgButton.find('.rawbg');
+            if (showRawBGs() && (entry.noise >=2 || entry.y < 40)) {
+                rawbg.show().html(scaleBg(rawIsigToRawBg(entry, cal)));
+            } else {
+                rawbg.hide();
+            }
+
             currentBG.toggleClass('icon-hourglass', value == 9);
             currentBG.toggleClass('error-code', value < 39);
             currentBG.toggleClass('bg-limit', value == 39 || value > 400);
@@ -437,7 +447,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
                 var focusPoint = nowData[nowData.length - 1];
                 var prevfocusPoint = nowData[nowData.length - 2];
 
-                updateCurrentSGV(focusPoint.y);
+                updateCurrentSGV(focusPoint);
                 updateCurrentNoise(focusPoint);
 
                 updateBGDelta(prevfocusPoint.y, focusPoint.y);
@@ -462,7 +472,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             nowData = nowData.slice(nowData.length - 1 - lookback, nowData.length);
             nowDate = new Date(now);
 
-            updateCurrentSGV(latestSGV.y);
+            updateCurrentSGV(latestSGV);
             updateCurrentNoise(latestSGV);
             updateClockDisplay();
             updateTimeAgo();
@@ -1506,12 +1516,13 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
                 var temp1 = [ ];
                 if (cal && showRawBGs()) {
                     temp1 = d[0].map(function (entry) {
-                        var rawBg = rawIsigToRawBg(entry, cal);
+                        var noise = entry.noise || 0;
+                        var rawBg = noise < 2 && browserSettings.showRawbg != 'always' ? 0 : rawIsigToRawBg(entry, cal);
                         return { date: new Date(entry.x - 2 * 1000), y: rawBg, sgv: scaleBg(rawBg), color: 'white', type: 'rawbg'}
                     }).filter(function(entry) { return entry.y > 0});
                 }
                 var temp2 = d[0].map(function (obj) {
-                    return { date: new Date(obj.x), y: obj.y, sgv: scaleBg(obj.y), direction: obj.direction, color: sgvToColor(obj.y), type: 'sgv', noise: obj.noise}
+                    return { date: new Date(obj.x), y: obj.y, sgv: scaleBg(obj.y), direction: obj.direction, color: sgvToColor(obj.y), type: 'sgv', noise: obj.noise, filtered: obj.filtered, unfiltered: obj.unfiltered}
                 });
                 data = [];
                 data = data.concat(temp1, temp2);

From f88ea0520eee7f633904341e2dbfe3aa17215f1d Mon Sep 17 00:00:00 2001
From: Kate Farnsworth <KATEFARNSWORTH@ME.COM>
Date: Fri, 20 Mar 2015 21:02:03 -0400
Subject: [PATCH 3/9] add circle around raw

---
 static/css/main.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 01b7186dd..4cef64ddc 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -224,9 +224,18 @@ body {
 .bgButton .rawbg {
     color: white;
     position: absolute;
-    top: 60px;
+    top: 50px;
+    font-size: 16px;
     right: 20px;
-    text-shadow: 4px 4px 7px rgba(0, 0, 0, 0.84);
+    width:30px;
+    height:30px;
+    border-radius: 80px;
+    text-align: center;
+   border: 3px solid #bdbdbd;
+   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.84);
+    text-align: center;
+    line-height: 30px;
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.84);
 }
 
 .alarming .bgButton {

From 209e35917dd8a0bd3cbf39beb79c628ed3072276 Mon Sep 17 00:00:00 2001
From: Jason Calabrese <jason@cbrese.com>
Date: Fri, 20 Mar 2015 21:50:19 -0700
Subject: [PATCH 4/9] tons of css adjustments, moved rawbg to the left, focus
 selectors to the right in narrow mode, etc

---
 static/css/drawer.css |  1 +
 static/css/main.css   | 94 ++++++++++++++++++++++++++++++---------------------
 static/index.html     |  2 +-
 3 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/static/css/drawer.css b/static/css/drawer.css
index 1a3881825..9e99bd04b 100644
--- a/static/css/drawer.css
+++ b/static/css/drawer.css
@@ -156,6 +156,7 @@ h1, legend,
     top: 0;
     margin: 0;
     height: 44px;
+    text-shadow: 0 0 5px black;
 }
 
 #toolbar h1 {
diff --git a/static/css/main.css b/static/css/main.css
index 4cef64ddc..bf7396bdb 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -206,36 +206,37 @@ body {
   width: 320px;
 }
 
-.bgButton.noise-heavy, .bgButton.noise-error {
-    border-color: rgba(255, 0, 0, 0.39);
-    box-shadow: 2px 2px 10px rgba(255, 0, 0, 0.75);
-}
-
-.bgButton.noise-medium {
-    border-color: rgba(255, 255, 0, 0.39);
-    box-shadow: 2px 2px 10px rgba(255, 255, 0, 0.75);
-}
-
-.bgButton.noise-light {
-    border-color: rgba(189, 189, 189, 0.39);
-    box-shadow: 2px 2px 10px rgba(189, 189, 189, 0.75);
+.loading .bgButton .rawbg {
+    display: none;
 }
 
 .bgButton .rawbg {
     color: white;
-    position: absolute;
-    top: 50px;
+    background-color: black;
+    position: relative;
+    top: -5px;
     font-size: 16px;
-    right: 20px;
-    width:30px;
-    height:30px;
+    left: -10px;
+    width: 30px;
+    height: 30px;
+    padding: 4px;
     border-radius: 80px;
     text-align: center;
-   border: 3px solid #bdbdbd;
-   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.84);
-    text-align: center;
+    border: 3px solid white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.84);
     line-height: 30px;
-    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.84);
+}
+
+.bgButton.noise-heavy .rawbg , .bgButton.noise-error  .rawbg {
+    border-color: rgba(255, 0, 0, 0.6);
+}
+
+.bgButton.noise-medium  .rawbg {
+    border-color: rgba(255, 255, 0, 0.6);
+}
+
+.bgButton.noise-light  .rawbg {
+    border-color: rgba(189, 189, 189, 0.6);
 }
 
 .alarming .bgButton {
@@ -313,7 +314,7 @@ div.tooltip {
 
 @media (max-width: 800px) {
     .bgStatus {
-        width: 40%;
+        width: 300px;
     }
 
     .bgButton {
@@ -376,7 +377,7 @@ div.tooltip {
 
 @media (max-width: 750px) {
     .bgStatus {
-        width: 60%;
+        width: 250px;
     }
 
     .bgStatus .currentBG {
@@ -423,9 +424,11 @@ div.tooltip {
         float: none;
         margin: 0 auto;
         padding: 0;
-        width: 100vw;
+        text-align: center;
+        width: 250px;
     }
 
+
     .bgButton {
         margin: 5px;
         width: auto;
@@ -436,6 +439,10 @@ div.tooltip {
         line-height: 70px;
     }
 
+    .bgButton .rawbg {
+        top: 5px;
+    }
+
     .bgStatus .currentBG.bg-limit, .bgStatus .currentBG.icon-hourglass {
         font-size: 60px;
         padding-left: 20px;
@@ -462,10 +469,6 @@ div.tooltip {
         font-size: 20px !important;
     }
 
-    #container.alarming .time {
-        display: none;
-    }
-
     .timebox {
         width: auto;
     }
@@ -485,14 +488,11 @@ div.tooltip {
         font-size: 15px !important;
     }
 
-    .alarming .focus-range {
-        display: none;
-    }
-
     .focus-range {
         position: absolute;
-        top: 70px;
-        left: 20px;
+        top: 80px;
+        left: initial;
+        right: 10px;
         margin: 0;
         width: auto;
     }
@@ -532,7 +532,7 @@ div.tooltip {
     }
 
     .bgButton .rawbg {
-        top: 40px;
+        top: -10px;
     }
 
     .container {
@@ -586,9 +586,17 @@ div.tooltip {
 
 @media (max-height: 480px) and (max-width: 400px) {
 
+    .bgStatus {
+        text-align: center;
+        width: 200px;
+        left: 0px;
+        position: absolute;
+    }
+
     .bgStatus .currentBG {
         font-size: 60px;
         line-height: 60px;
+        padding-left: -10px;
     }
 
     .bgStatus .currentBG.bg-limit, .bgStatus .currentBG.icon-hourglass {
@@ -606,8 +614,9 @@ div.tooltip {
 
     .focus-range {
         position: absolute;
-        top: 10px;
-        left: 10px;
+        top: 40px;
+        left: initial;
+        right: 35px;
         margin: 0;
         width: auto;
     }
@@ -616,4 +625,13 @@ div.tooltip {
         display: block;
     }
 
+    .time {
+        position: absolute;
+        top: 90px;
+    }
+
+    .timebox {
+        width: 220px;
+    }
+
 }
diff --git a/static/index.html b/static/index.html
index 765d6c223..d71c92020 100644
--- a/static/index.html
+++ b/static/index.html
@@ -28,9 +28,9 @@ <h1 class="customTitle">Nightscout</h1>
             <div class="status">
                 <div class="bgStatus current">
                     <div class="bgButton ">
+                        <span class="rawbg"></span>
                         <span class="currentBG">---</span>
                         <span class="currentDirection">-</span>
-                        <span class="rawbg"></span>
                     </div>
                     <ul class="dropdown-menu" id="silenceBtn">
                         <li><a href="#" data-snooze-time="1800000">Silence for 30 minutes</a></li>

From 084e00b11800e6707344b02d24ce21f8d6f70dc3 Mon Sep 17 00:00:00 2001
From: Jason Calabrese <jason@cbrese.com>
Date: Fri, 20 Mar 2015 22:04:33 -0700
Subject: [PATCH 5/9] don't let the tip of the arrow get clipped

---
 static/css/main.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/static/css/main.css b/static/css/main.css
index bf7396bdb..b97437c46 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -38,6 +38,7 @@ body {
     float: right;
     text-align: center;
     white-space: nowrap;
+    padding-right: 20px;
 }
 
 .bgButton.urgent {
@@ -315,6 +316,7 @@ div.tooltip {
 @media (max-width: 800px) {
     .bgStatus {
         width: 300px;
+        padding: 0;
     }
 
     .bgButton {

From 9bed5361d6ac55a5ffdabba942ae1da34d9e3ebe Mon Sep 17 00:00:00 2001
From: Jason Calabrese <jason@cbrese.com>
Date: Sat, 21 Mar 2015 10:19:33 -0700
Subject: [PATCH 6/9] fixed some bugs releated to when to show raw, also more
 css tweeks

---
 static/css/main.css |  7 +++----
 static/js/client.js | 49 ++++++++++++++++++++++++++++++++++---------------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index b97437c46..3af03c963 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -316,7 +316,6 @@ div.tooltip {
 @media (max-width: 800px) {
     .bgStatus {
         width: 300px;
-        padding: 0;
     }
 
     .bgButton {
@@ -379,7 +378,8 @@ div.tooltip {
 
 @media (max-width: 750px) {
     .bgStatus {
-        width: 250px;
+        width: 240px;
+        padding: 0;
     }
 
     .bgStatus .currentBG {
@@ -424,7 +424,6 @@ div.tooltip {
 
     .bgStatus {
         float: none;
-        margin: 0 auto;
         padding: 0;
         text-align: center;
         width: 250px;
@@ -443,6 +442,7 @@ div.tooltip {
 
     .bgButton .rawbg {
         top: 5px;
+        left: 5px;
     }
 
     .bgStatus .currentBG.bg-limit, .bgStatus .currentBG.icon-hourglass {
@@ -466,7 +466,6 @@ div.tooltip {
     }
 
     .time {
-        width: auto;
         padding-top: 0;
         font-size: 20px !important;
     }
diff --git a/static/js/client.js b/static/js/client.js
index 7d1f73820..492aa2f95 100644
--- a/static/js/client.js
+++ b/static/js/client.js
@@ -111,10 +111,16 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
         }
     }
 
-    function showRawBGs() {
-        return app.enabledOptions
-            && app.enabledOptions.indexOf('rawbg') > -1
-            && (browserSettings.showRawbg == 'always' || browserSettings.showRawbg == 'noise');
+    function isRawBGEnabled() {
+        return app.enabledOptions && app.enabledOptions.indexOf('rawbg') > -1;
+    }
+
+    function showRawBGs(sgv, noise, cal) {
+        return cal
+            && isRawBGEnabled()
+            && (browserSettings.showRawbg == 'always'
+                || (browserSettings.showRawbg == 'noise' && (noise >= 2 || sgv < 40))
+            );
     }
 
     function showIOB() {
@@ -268,14 +274,20 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
         return errorDisplay;
     }
 
-    function noiseCodeToDisplay(noise) {
+    function noiseCodeToDisplay(sgv, noise) {
         var display = 'Not Set';
         switch (parseInt(noise)) {
             case 1: display = 'Clean'; break;
             case 2: display = 'Light'; break;
             case 3: display = 'Medium'; break;
             case 4: display = 'Heavy'; break;
-            case 5: display = 'Unknown'; break;
+            case 5:
+                if (sgv < 40) {
+                    display = 'Error';
+                } else {
+                    display = 'Unknown';
+                }
+                break;
         }
 
         return display;
@@ -314,6 +326,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             , currentBG = $('.bgStatus .currentBG')
             , currentDirection = $('.bgStatus .currentDirection')
             , currentDetails = $('.bgStatus .currentDetails')
+            , rawbg = bgButton.find('.rawbg')
             , lastEntry = $('#lastEntry');
 
 
@@ -339,8 +352,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
               }
             }
 
-            var rawbg = bgButton.find('.rawbg');
-            if (showRawBGs() && (entry.noise >=2 || entry.y < 40)) {
+            if (showRawBGs(entry.y, entry.noise, cal)) {
                 rawbg.show().html(scaleBg(rawIsigToRawBg(entry, cal)));
             } else {
                 rawbg.hide();
@@ -355,7 +367,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             var noise = entry.noise
                 , noiseType;
 
-            if ((noise <= 1 && entry.y >= 40) || !showRawBGs()) {
+            if (!showRawBGs(entry.y, noise, cal)) {
                 noiseType = null;
             } else if (entry.y < 40) {
                 noiseType = 'error';
@@ -458,6 +470,8 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
                 updateBGDelta();
                 currentBG.text('---');
                 currentDirection.text('-');
+                rawbg.hide();
+                bgButton.removeClass('urgent warning inrange');
             }
 
             updateIOBIndicator(time);
@@ -558,17 +572,22 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             .on('mouseover', function (d) {
                 if (d.type != 'sgv' && d.type != 'mbg') return;
 
-                var device = d.device && d.device.toLowerCase();
-                var bgType = (d.type == 'sgv' ? 'CGM' : (device == 'dexcom' ? 'Calibration' : 'Meter'));
-                var noiseLabel = '';
+                var device = d.device && d.device.toLowerCase()
+                    , bgType = (d.type == 'sgv' ? 'CGM' : (device == 'dexcom' ? 'Calibration' : 'Meter'))
+                    , rawBG = 0
+                    , noiseLabel = '';
 
-                if (d.type == 'sgv' && showRawBGs()) {
-                    noiseLabel = noiseCodeToDisplay(d.noise);
+                if (d.type == 'sgv') {
+                    if (showRawBGs(d.y, d.noise, cal)) {
+                        rawBG = scaleBg(rawIsigToRawBg(d, cal));
+                    }
+                    noiseLabel = noiseCodeToDisplay(d.y, d.noise);
                 }
 
                 tooltip.transition().duration(TOOLTIP_TRANS_MS).style('opacity', .9);
                 tooltip.html('<strong>' + bgType + ' BG:</strong> ' + d.sgv +
                     (d.type == 'mbg' ? '<br/><strong>Device: </strong>' + d.device : '') +
+                    (rawBG ? '<br/><strong>Raw BG:</strong> ' + rawBG : '') +
                     (noiseLabel ? '<br/><strong>Noise:</strong> ' + noiseLabel : '') +
                     '<br/><strong>Time:</strong> ' + formatTime(d.date))
                     .style('left', (d3.event.pageX) + 'px')
@@ -1514,7 +1533,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
                 devicestatusData = d[6];
 
                 var temp1 = [ ];
-                if (cal && showRawBGs()) {
+                if (cal && isRawBGEnabled()) {
                     temp1 = d[0].map(function (entry) {
                         var noise = entry.noise || 0;
                         var rawBg = noise < 2 && browserSettings.showRawbg != 'always' ? 0 : rawIsigToRawBg(entry, cal);

From f58b2fac31901e4895843760b609e960d5009fa9 Mon Sep 17 00:00:00 2001
From: Jason Calabrese <jason@cbrese.com>
Date: Sat, 21 Mar 2015 10:42:29 -0700
Subject: [PATCH 7/9] adjusted (max-height: 480px) and (min-width: 400px) break
 point to prevent wrapping

---
 static/css/main.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 3af03c963..3ac971b92 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -552,8 +552,8 @@ div.tooltip {
 
 @media (max-height: 480px) and (min-width: 400px) {
     .bgStatus .currentBG {
-        font-size: 80px;
-        line-height: 80px;
+        font-size: 70px;
+        line-height: 60px;
     }
 
     .bgStatus .currentBG.bg-limit, .bgStatus .currentBG.icon-hourglass {
@@ -561,8 +561,8 @@ div.tooltip {
     }
 
     .bgStatus .currentDirection {
-        font-size: 70px;
-        line-height: 70px;
+        font-size: 50px;
+        line-height: 50px;
     }
 
     .bgStatus .currentDetails {
@@ -570,8 +570,8 @@ div.tooltip {
     }
 
     .time {
-        font-size: 70px;
-        line-height: 60px;
+        font-size: 50px;
+        line-height: 40px;
         padding-top: 5px;
     }
 

From b3a5cf4371c503399d08a9cc8c73848384406674 Mon Sep 17 00:00:00 2001
From: Jason Calabrese <jason@cbrese.com>
Date: Sat, 21 Mar 2015 22:41:36 -0700
Subject: [PATCH 8/9] only update the chart when the document is visible

also start an update when the doc becomes visible again
---
 static/js/client.js | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/static/js/client.js b/static/js/client.js
index 96a39931b..33775aec0 100644
--- a/static/js/client.js
+++ b/static/js/client.js
@@ -61,6 +61,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
         , focusHeight
         , contextHeight
         , dateFn = function (d) { return new Date(d.date) }
+        , documentHidden = false
         , brush
         , brushTimer
         , brushInProgress = false
@@ -656,6 +657,10 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
     // called for initial update and updates for resize
     function updateChart(init) {
 
+        if (documentHidden && !init) {
+            console.info('Document Hidden, not updating - ' + (new Date()));
+            return;
+        }
         // get current data range
         var dataRange = d3.extent(data, dateFn);
 
@@ -1421,19 +1426,32 @@ 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;
         function updateChartSoon() {
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(function () {
                 updateChart(false);
-            }, 100);
+            }, 200);
+        }
+
+        function visibilityChanged() {
+            var prevHidden = documentHidden;
+            documentHidden = (document.hidden || document.webkitHidden || document.mozHidden || document.msHidden);
+
+            if (prevHidden && !documentHidden) {
+                console.info('Document now visible, updating - ' + (new Date()));
+                updateChartSoon();
+            }
+        }
+
+        window.onresize = function () {
+            updateChartSoon()
         };
 
+        document.addEventListener('webkitvisibilitychange', visibilityChanged);
+
+
         updateClock();
 
         var silenceDropdown = new Dropdown('.dropdown-menu');

From b3d5b17dae49b7a665e823652f0506373887bd5a Mon Sep 17 00:00:00 2001
From: Jason Calabrese <jason@cbrese.com>
Date: Sat, 21 Mar 2015 23:43:56 -0700
Subject: [PATCH 9/9] new raw bg/noise vertical pill

---
 static/css/main.css | 61 +++++++++++++++----------------------
 static/index.html   |  2 +-
 static/js/client.js | 88 ++++++++++++++++++++++++++++++++++-------------------
 3 files changed, 81 insertions(+), 70 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 3ac971b92..775afcc51 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -204,40 +204,29 @@ body {
   margin: 10px;
   border: 2px solid #000;
   border-radius: 5px;
-  width: 320px;
+  width: 360px;
 }
 
-.loading .bgButton .rawbg {
+.loading .bgButton .rawnoise {
     display: none;
 }
 
-.bgButton .rawbg {
-    color: white;
-    background-color: black;
-    position: relative;
-    top: -5px;
-    font-size: 16px;
-    left: -10px;
-    width: 30px;
-    height: 30px;
-    padding: 4px;
-    border-radius: 80px;
-    text-align: center;
-    border: 3px solid white;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.84);
-    line-height: 30px;
-}
-
-.bgButton.noise-heavy .rawbg , .bgButton.noise-error  .rawbg {
-    border-color: rgba(255, 0, 0, 0.6);
+.bgButton .rawnoise {
+    display: inline-block;
+    border-radius: 2px;
+    border: 1px solid #808080;
 }
 
-.bgButton.noise-medium  .rawbg {
-    border-color: rgba(255, 255, 0, 0.6);
+.bgButton .rawnoise em {
+    color: white;
+    background-color: black;
+    display: block;
+    font-size: 20px;
 }
 
-.bgButton.noise-light  .rawbg {
-    border-color: rgba(189, 189, 189, 0.6);
+.bgButton .rawnoise label {
+    display: block;
+    font-size: 14px;
 }
 
 .alarming .bgButton {
@@ -382,6 +371,14 @@ div.tooltip {
         padding: 0;
     }
 
+    .bgButton .rawnoise em {
+        font-size: 14px;
+    }
+
+    .bgButton .rawnoise label {
+        font-size: 12px;
+    }
+
     .bgStatus .currentBG {
         font-size: 70px;
         line-height: 60px;
@@ -440,11 +437,6 @@ div.tooltip {
         line-height: 70px;
     }
 
-    .bgButton .rawbg {
-        top: 5px;
-        left: 5px;
-    }
-
     .bgStatus .currentBG.bg-limit, .bgStatus .currentBG.icon-hourglass {
         font-size: 60px;
         padding-left: 20px;
@@ -532,10 +524,6 @@ div.tooltip {
         display: none;
     }
 
-    .bgButton .rawbg {
-        top: -10px;
-    }
-
     .container {
         top: 15px;
         padding-bottom: 20px;
@@ -589,15 +577,14 @@ div.tooltip {
 
     .bgStatus {
         text-align: center;
-        width: 200px;
-        left: 0px;
+        width: 220px;
+        left: 0;
         position: absolute;
     }
 
     .bgStatus .currentBG {
         font-size: 60px;
         line-height: 60px;
-        padding-left: -10px;
     }
 
     .bgStatus .currentBG.bg-limit, .bgStatus .currentBG.icon-hourglass {
diff --git a/static/index.html b/static/index.html
index d71c92020..788fd06d2 100644
--- a/static/index.html
+++ b/static/index.html
@@ -28,7 +28,7 @@ <h1 class="customTitle">Nightscout</h1>
             <div class="status">
                 <div class="bgStatus current">
                     <div class="bgButton ">
-                        <span class="rawbg"></span>
+                        <span class="rawnoise pill"><em></em><label></label></span>
                         <span class="currentBG">---</span>
                         <span class="currentDirection">-</span>
                     </div>
diff --git a/static/js/client.js b/static/js/client.js
index 492aa2f95..33cd3f8b5 100644
--- a/static/js/client.js
+++ b/static/js/client.js
@@ -61,6 +61,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
         , focusHeight
         , contextHeight
         , dateFn = function (d) { return new Date(d.date) }
+        , documentHidden = false
         , brush
         , brushTimer
         , brushInProgress = false
@@ -123,9 +124,24 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             );
     }
 
-    function showIOB() {
-        return app.enabledOptions
-            && app.enabledOptions.indexOf('iob') > -1;
+    function noiseCodeToDisplay(sgv, noise) {
+        var display;
+        switch (parseInt(noise)) {
+            case 0: display = '---'; break;
+            case 1: display = 'Clean'; break;
+            case 2: display = 'Light'; break;
+            case 3: display = 'Medium'; break;
+            case 4: display = 'Heavy'; break;
+            default:
+                if (sgv < 40) {
+                    display = 'Heavy';
+                } else {
+                    display = '~~~';
+                }
+                break;
+        }
+
+        return display;
     }
 
     function rawIsigToRawBg(entry, cal) {
@@ -151,6 +167,11 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
         return Math.round(raw);
     }
 
+    function showIOB() {
+        return app.enabledOptions
+            && app.enabledOptions.indexOf('iob') > -1;
+    }
+
     // initial setup of chart when data is first made available
     function initializeCharts() {
 
@@ -274,25 +295,6 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
         return errorDisplay;
     }
 
-    function noiseCodeToDisplay(sgv, noise) {
-        var display = 'Not Set';
-        switch (parseInt(noise)) {
-            case 1: display = 'Clean'; break;
-            case 2: display = 'Light'; break;
-            case 3: display = 'Medium'; break;
-            case 4: display = 'Heavy'; break;
-            case 5:
-                if (sgv < 40) {
-                    display = 'Error';
-                } else {
-                    display = 'Unknown';
-                }
-                break;
-        }
-
-        return display;
-    }
-
     // function to call when context chart is brushed
     function brushed(skipTimer) {
 
@@ -326,7 +328,9 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             , currentBG = $('.bgStatus .currentBG')
             , currentDirection = $('.bgStatus .currentDirection')
             , currentDetails = $('.bgStatus .currentDetails')
-            , rawbg = bgButton.find('.rawbg')
+            , rawNoise = bgButton.find('.rawnoise')
+            , rawbg = rawNoise.find('em')
+            , noiseLevel = rawNoise.find('label')
             , lastEntry = $('#lastEntry');
 
 
@@ -353,9 +357,11 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
             }
 
             if (showRawBGs(entry.y, entry.noise, cal)) {
-                rawbg.show().html(scaleBg(rawIsigToRawBg(entry, cal)));
+                rawNoise.css('display', 'inline-block');
+                rawbg.text(scaleBg(rawIsigToRawBg(entry, cal)));
+                noiseLevel.text(noiseCodeToDisplay(entry.y, entry.noise));
             } else {
-                rawbg.hide();
+                rawNoise.hide();
             }
 
             currentBG.toggleClass('icon-hourglass', value == 9);
@@ -470,7 +476,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
                 updateBGDelta();
                 currentBG.text('---');
                 currentDirection.text('-');
-                rawbg.hide();
+                rawNoise.hide();
                 bgButton.removeClass('urgent warning inrange');
             }
 
@@ -709,6 +715,10 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
     // called for initial update and updates for resize
     function updateChart(init) {
 
+        if (documentHidden && !init) {
+            console.info('Document Hidden, not updating - ' + (new Date()));
+            return;
+        }
         // get current data range
         var dataRange = d3.extent(data, dateFn);
 
@@ -1180,9 +1190,10 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage;
         var totalBG = 0;
         closeBGs.forEach(function(d) {
           totalBG += Number(d.y);
+            parseFloat()
         });
 
-        return totalBG > 0 && closeBGs.length > 0 ? (totalBG / closeBGs.length) : 450;
+        return totalBG > 0 ? (totalBG / closeBGs.length) : 450;
       }
 
       var treatmentGlucose = null;
@@ -1474,19 +1485,32 @@ 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;
         function updateChartSoon() {
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(function () {
                 updateChart(false);
-            }, 100);
+            }, 200);
+        }
+
+        function visibilityChanged() {
+            var prevHidden = documentHidden;
+            documentHidden = (document.hidden || document.webkitHidden || document.mozHidden || document.msHidden);
+
+            if (prevHidden && !documentHidden) {
+                console.info('Document now visible, updating - ' + (new Date()));
+                updateChartSoon();
+            }
+        }
+
+        window.onresize = function () {
+            updateChartSoon()
         };
 
+        document.addEventListener('webkitvisibilitychange', visibilityChanged);
+
+
         updateClock();
 
         var silenceDropdown = new Dropdown('.dropdown-menu');