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
@@ -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>