nightscout · sulkaharo · Feb 16, 2020 · Feb 10, 2020 · Feb 10, 2020 · Feb 11, 2020
diff --git a/README.md b/README.md
@@ -310,6 +310,12 @@ To learn more about the Nightscout API, visit https://YOUR-SITE.com/api-docs/ or
   * `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.
 
+### Split View
+
+  Some users will need easy access to multiple Nightscout views at the same time. We have a special view for this case, accessed on /split path on your Nightscout URL. The view supports any number of sites between 1 to 8 way split, where the content for the screen can be loaded from multiple Nightscout instances. Note you still need to host separate instances for each Nightscout being monitored including the one that hosts the split view page - these variables only add the ability to load multiple views into one browser page. To set the URLs from which the content is loaded, set:
+  * `FRAME_URL_1` - URL where content is loaded, for the first view (increment the number up to 8 to get more views)
+  * `FRAME_NAME_1` - Name for the first split view portion of the screen (increment the number to name more views)
+
 ### Plugins
 
   Plugins are used extend the way information is displayed, how notifications are sent, alarms are triggered, and more.

diff --git a/app.js b/app.js
@@ -171,6 +171,11 @@ function create (env, ctx) {
       , title: 'Nightscout translations'
       , type: 'translations'
     }
+    , "/split": {
+      file: "frame.html"
+      , title: '8-user view'
+      , type: 'index'
+    }
   };
 
   Object.keys(appPages).forEach(function(page) {
@@ -179,6 +184,7 @@ function create (env, ctx) {
         locals: app.locals,
         title: appPages[page].title ? appPages[page].title : '',
         type: appPages[page].type ? appPages[page].type : '',
+        settings: env.settings
       });
     });
   });

diff --git a/lib/settings.js b/lib/settings.js
@@ -51,6 +51,22 @@ function init () {
     , deNormalizeDates: false
     , showClockDelta: false
     , showClockLastTime: false
+    , frameUrl1: ''
+    , frameUrl2: ''
+    , frameUrl3: ''
+    , frameUrl4: ''
+    , frameUrl5: ''
+    , frameUrl6: ''
+    , frameUrl7: ''
+    , frameUrl8: ''
+    , frameName1: ''
+    , frameName2: ''
+    , frameName3: ''
+    , frameName4: ''
+    , frameName5: ''
+    , frameName6: ''
+    , frameName7: ''
+    , frameName8: ''
   };
 
   var valueMappers = {

diff --git a/views/frame.html b/views/frame.html
@@ -0,0 +1,54 @@
+<% 
+
+let urlArray = [];
+let nameArray = [];
+
+for (let i = 0; i <= 8; i++) {
+  let u = settings['frameUrl' + i];
+  let n = settings['frameName' + i] || " ";
+  if (u) {
+    urlArray.push(u);
+    nameArray.push(n);
+  }
+}
+
+const sitesPerRow = urlArray.length > 3 ? Math.round(urlArray.length / 2) : urlArray.length;
+const rows = urlArray.length > 3 ? 2 : 1;
+
+%><html>
+<head>
+  <title>Nightscout multiframe view</title>
+  <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <style media="screen" type="text/css">
+  html, body, table, tr, td {
+    margin:0 !important;
+    padding:0 !important;
+    border: 0;
+}
+table {
+  width:100%;
+  height:100%;
+}
+  </style>
+</head>
+<body>
+  <table>
+    <% let s = 0;
+       for (let r = 1; r <= rows; r++) {
+      %><tr>
+        <% for (let sp = 0; sp < sitesPerRow; sp++) {
+          let pointer = sp + s;
+          %><td align="center" style="height:20px"><%= nameArray[pointer] %></td>
+        <% } %>
+        </tr>
+        <tr>
+          <% for (let sp = 0; sp < sitesPerRow; sp++) {
+            let pointer = sp + s;
+            %><td align="center" width="auto"><iframe src="<%= urlArray[pointer] %>" style="width:100%;height:100%;"></iframe></td>
+          <% } %>
+        </tr>
+    <% s += sitesPerRow; } %>
+  </table>
+</body>
+
+</html>