Feature/settings ui

README.md

@@ -1,8 +1,9 @@
 cgm-remote-monitor (a.k.a. NightScout)
 ======================================
-
+ 
 [![Build Status](https://travis-ci.org/nightscout/cgm-remote-monitor.png)](https://travis-ci.org/nightscout/cgm-remote-monitor)
 [![Dependency Status](https://david-dm.org/nightscout/cgm-remote-monitor.png)](https://david-dm.org/nightscout/cgm-remote-monitor)
+[![Gitter chat](https://badges.gitter.im/nightscout.png)](https://gitter.im/nightscout)
 
 This acts as a web-based CGM (Continuous Glucose Montinor) to allow
 multiple caregivers to remotely view a patients glucose data in

bower.json

@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "dependencies": {
     "d3": "3.4.3",
-    "jquery": "2.1.0"
+    "jquery": "2.1.0",
+    "jQuery-Storage-API": "~1.7.2"
   }
 }

lib/pebble.js

@@ -20,36 +20,50 @@ function directionToTrend (direction) {
 }
 
 function pebble (req, res) {
-  var FORTY_MINUTES = 2400000;
+  var FORTY_MINUTES = 2400000,
+    cgmData = [ ],
+    units = req.query.units,
+    useMetricBg = false
+  ;
+
+  if (units == "mmol") {
+    useMetricBg = true;
+  }
+
+  function scaleBg(bg) {
+      if (useMetricBg) {
+          return (Math.round((bg / 18) * 10) / 10).toFixed(1);
+      } else
+          return bg;
+  }
 
-  var cgmData = [ ];
   function get_latest (err, results) {
     var now = Date.now();
-        results.forEach(function(element, index, array) {
-            var next = null;
-            if (index + 1 < results.length) {
-              next = results[index + 1];
-            }
-            if (element) {
-                var obj = {};
-                obj.sgv = element.sgv;
-                obj.bgdelta = (next ? (element.sgv - next.sgv ) : 0);
-                if ('direction' in element) {
-                  obj.trend = directionToTrend(element.direction);
-                  obj.direction = element.direction;
-                }
-                // obj.y = element.sgv;
-                // obj.x = element.date;
-                obj.datetime = element.date;
-                // obj.date = element.date.toString( );
-                cgmData.push(obj);
+    results.forEach(function(element, index, array) {
+        var next = null;
+        if (index + 1 < results.length) {
+          next = results[index + 1];
+        }
+        if (element) {
+            var obj = {};
+            obj.sgv = scaleBg(element.sgv);
+            obj.bgdelta = (next ? (scaleBg(element.sgv) - scaleBg(next.sgv) ) : 0);
+            if ('direction' in element) {
+              obj.trend = directionToTrend(element.direction);
+              obj.direction = element.direction;
             }
-        });
-        var result = { status: [ {now:now}], bgs: cgmData.slice(0, 1) };
-        res.setHeader('content-type', 'application/json');
-        res.write(JSON.stringify(result));
-        res.end( );
-        // collection.db.close();
+            // obj.y = element.sgv;
+            // obj.x = element.date;
+            obj.datetime = element.date;
+            // obj.date = element.date.toString( );
+            cgmData.push(obj);
+        }
+    });
+    var result = { status: [ {now:now}], bgs: cgmData.slice(0, 1) };
+    res.setHeader('content-type', 'application/json');
+    res.write(JSON.stringify(result));
+    res.end( );
+    // collection.db.close();
   }
   req.entries.list({count: 2}, get_latest);
 }
@@ -63,4 +77,3 @@ function configure (entries) {
 
 configure.pebble = pebble;
 module.exports = configure;
-

lib/settings.js

@@ -6,7 +6,7 @@ var ObjectID = require('mongodb').ObjectID;
 function configure (collection, storage) {
   var DEFAULT_SETTINGS_JSON = {
           "units": "mg/dl"
-  }; // possible future settings: "theme": "subdued", "websockets": false
+  }; // possible future settings: "theme": "subdued", "websockets": false, alertLow: 80, alertHigh: 180
 
   var with_collection = storage.with_collection(collection);
   function getSettings (fn) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Nightscout",
-  "version": "0.1.20140708",
+  "version": "0.2.0",
   "description": "Nightscout acts as a web-based CGM (Continuous Glucose Montinor) to allow multiple caregivers to remotely view a patients glucose data in realtime.",
   "license": "MIT",
   "author": "Nightscout Team",

server.js

@@ -46,9 +46,9 @@ var appInfo = software.name + ' ' + software.version;
 app.set('title', appInfo);
 app.enable('trust proxy'); // Allows req.secure test on heroku https connections.
 
-if (env.api_secret) {
-    console.log("API_SECRET", env.api_secret);
-}
+//if (env.api_secret) {
+//    console.log("API_SECRET", env.api_secret);
+//}
 app.use('/api/v1', api);
 
 // pebble data

static/css/drawer.css

@@ -0,0 +1,88 @@
+body {
+    margin: 0;
+    padding: 0;
+    overflow: none;
+}
+.row-fluid {
+    margin: 0 8px;
+}
+
+.container {
+    background: #000;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    margin: 0;
+    width: 100%;
+    top: 45px;
+    z-index: 2;
+}
+
+#drawer {
+    background-color: #666;
+    border-left: 1px solid #999;
+    box-shadow: inset 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+    color: #eee;
+    display: none;
+    height: calc(100% - 45px);
+    overflow-y: auto;
+    position: absolute;
+    margin-top: 45px;
+    right: -200px;
+    width: 200px;
+    top: 0;
+    z-index: 1;
+}
+
+form {
+    margin: 0;
+    padding: 0 10px;
+}
+fieldset.numbers input {
+    text-align: right;
+    width: 50px;
+}
+fieldset.numbers label {
+display: block;
+    float: left;
+    width: 50px;
+}
+
+h1, h2, h3, h4 {
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+#toolbar {
+    background: url(/images/logo.png) no-repeat 3px 3px #333;
+    border-bottom: 1px solid #999;
+    top: 0;
+    margin: 0;
+    height: 44px;
+}
+
+#toolbar h1 {
+    margin-top: 0;
+    margin-left: 42px;
+    padding: 10px;
+    color: #ccc;
+    font-size: 16px;
+    line-height: 22px;
+}
+#buttonbar {
+    padding: 0;
+    float: right;
+    height: 44px;
+    width: 88px;
+    opacity: 0.5;
+}
+#buttonbar a {
+    float: left;
+    width: 44px;
+    height: 44px;
+}
+#drawerToggle {
+    background: url(/images/open.png) center center no-repeat;
+}
+#testAlarms {
+    background: url(/images/speaker.png) center center no-repeat;
+}

static/css/main.css

@@ -67,6 +67,12 @@ body {
   fill-opacity: 0;
 }
 
+@media (max-width: 1045px) {
+  body {
+    font-size: 70%;
+  }
+}
+
 @media (max-width: 768px) {
   body {
     font-size: 60%;
@@ -77,15 +83,33 @@ body {
   }
 }
 
-@media (max-width: 480px) {
+@media (max-width: 675px) {
+  body {
+    font-size: 50%;
+  }
+}
+
+@media (max-width: 580px) {
   body {
     font-size: 40%;
   }
+}
+
+@media (max-width: 480px) {
+  body {
+    font-size: 35%;
+  }
   #chartContainer {
     font-size: 150%;
   }
 }
 
+@media (max-width: 440px) {
+  body {
+    font-size: 30%;
+  }
+}
+
 [class*='span']{float:left;min-height:1px;}
 
 .span1{width: 20%; float: left; padding-top: 3%; line-height: 50%;}
@@ -137,6 +161,10 @@ body {
   font-size: 70%;
 }
 
+.alarms {
+    display: none;
+}
+
 #testAlarms {
   font-size: 20%;
   color: blue;

static/drawer-test.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <title>Drawer Tutorial</title>
+        <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
+        <script>
+function openDrawer()  {
+    $("#main_page").animate({marginLeft: "-300px"}, 300);
+}
+function closeDrawer() {
+    $("#main_page").animate({marginLeft: "0px"}, 300);
+}	
+function toggleDrawer() {
+    if(drawerIsOpen) {
+        closeDrawer();
+        drawerIsOpen = false;
+    }  else {
+        openDrawer();
+        drawerIsOpen = true;
+    }
+}
+var drawerIsOpen = false;
+        </script>
+        <style>
+#main_page {
+    background: #000;
+    color: #fff;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+}
+
+#drawer_element {
+    position: absolute;
+    top: 0px;
+    right: 0; 
+    width: 300px;
+    height: 100%;
+    background-color: blue;
+    z-index: 1;
+}
+        </style>
+    </head>
+    <body>
+<div id="main_page">
+    <h1>Main Page</h1>
+
+    <div style="float:right"><a href="javascript:toggleDrawer()">Toggle Drawer</a></div>
+</div>
+
+<div id="drawer_element">
+    <h2>drawer</h2>
+</div>
+    </body>
+</html>