Split view (#5518)

* Adds a 2, 3, 4 and 8 way split view option * Updated description * Generate the table on demand, so any number of sites from 1 to 8 generates a sensible layout * Update readme & don't crash if a name is missing
2026-08-24 03:14:12 -05:00 · 2020-02-16 14:15:27 +02:00
parent cd2ad5e1ae
commit 77795cae5a
4 changed files with 82 additions and 0 deletions
@@ -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.
@@ -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
      });
    });
  });
@@ -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 = {
@@ -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>