accuracy: add mouseover graph previews

Author: msimerson

htdocs/accuracy.html

@@ -53,16 +53,22 @@
   <h1>GNSS Timing Performance</h1>
   <p class="small center" style="margin-top: -14px;">by: <a href="https://byo-ntp.github.io">Build Your Own NTP server</a></p>
 
-  <div class="legend">
-    <p class="color-ms">ms = millisecond = 1e-3  = 0.001</p>
-    <p class="color-us">µs = microsecond = 1e-6  = 0.000001</p>
-    <p class="color-ns">ns = nanosecond  = 1e-9  = 0.000000001</p>
-    <p class="color-ps">ps = picosecond  = 1e-12 = 0.000000000001</p>
+  <div style="display: flex; width: 80%; text-align: center; max-width: 1200px; align-items: center; justify-content: center; gap: 1em; margin: auto;">
+    <div style="flex: 1; text-align: left;" class="legend">
+      <p class="color-ms">ms = millisecond = 1e-3  = 0.001</p>
+      <p class="color-us">µs = microsecond = 1e-6  = 0.000001</p>
+      <p class="color-ns">ns = nanosecond  = 1e-9  = 0.000000001</p>
+      <p class="color-ps">ps = picosecond  = 1e-12 = 0.000000000001</p>
+    </div>
+    <div style="flex: 1; align-items: center; justify-content: right; max-width: 300px;">
+      <img id="gnss_performance_graph" src="" alt="Hover over a cell to preview a graph of GNSS accuracy." height="85px; width: auto;">
+    </div>
   </div>
+
   <p class="center">This table shows the timing performance of various GNSS receivers on varying hardware,
      operating systems, and NTP daemons. Each numeric value is the most inaccurate reading measured during a 12
-     hour measuring interval. The values are clickable links to the build recipe with instructions for
-     replicating that build.
+     hour measuring interval. The 3 left header columns are clickable links to the build recipe for that row.
+     The numeric values are clickable and will open an image of the GNSS performance graph for that row.
   </p>
   <table id="timing-table">
     <thead>
@@ -120,7 +126,7 @@ <h1>GNSS Timing Performance</h1>
       <tr><th class="grey">LarkBox</th><th class="grey">BSD</th><th>ntp</th>
           <td>0.021700000</td><td>0.010400</td><td>0.0000510</td><td>0.000061000</td><td>0.000047000</td><td></td></tr>
       <tr><th class="grey">LarkBox</th><th class="grey">BSD</th><th>ntp + gpsd</th>
-          <td>           </td><td>        </td><td>0.0001430</td><td>0.0000570000</td><td>0.000025000</td><td></td></tr>
+          <td>           </td><td>        </td><td>0.0001430</td><td>0.000057000</td><td>0.000025000</td><td></td></tr>
       <tr><th class="grey">LarkBox</th><th>Win</th><th>ntp</th>
           <td>           </td><td>0.013600</td><td></td><td></td><td></td><td></td></tr>
       <tr><th>&nbsp;</th><th></th><th></th><td></td><td></td><td></td><td></td><td></td><td></td></tr>
@@ -136,7 +142,7 @@ <h1>GNSS Timing Performance</h1>
       <tr><th>M3 MBA</th><th>Mac</th><th>chrony</th>
           <td>0.00172    </td><td>        </td><td>0.001580 </td><td>           </td><td>            </td><td></td></tr>
       <tr><th class="grey">M3 MBA </th><th class="grey">Mac</th><th>mac-pps</th>
-          <td>           </td><td>        </td><td>0.000358 </td><td>           </td><td>0.000372000</td><td></td></tr>
+          <td>           </td><td>        </td><td>0.000358 </td><td>           </td><td>0.000372   </td><td></td></tr>
       <tr><th class="grey">M3 MBA </th><th class="grey">Mac</th><th>sec</th>
           <td>           </td><td>        </td><td>0.008000 </td><td>           </td><td>            </td><td></td></tr>
       <tr><th class="grey">M3 MBA </th><th class="grey">Mac</th><th>sec + gpsd</th>
@@ -152,6 +158,11 @@ <h1>GNSS Timing Performance</h1>
     <p>Win = Windows 11</p>
   </div>
 
+  <div id="lightbox-overlay" style="display: none;">
+    <span id="close-btn">&times;</span>
+    <img id="lightbox-img" src="" alt="Enlarged">
+  </div>
+
   <footer>
     <p>BYO-NTP is a community project. Please contribute on <a href="https://github.com/BYO-NTP/recipes/wiki">GitHub</a>.</p>
   </footer>
@@ -160,17 +171,17 @@ <h1>GNSS Timing Performance</h1>
     const isNumeric = (val) => /^\d*\.?\d+$/.test(val);
     function styleCell (td) {
       const val = parseFloat(td.textContent);
-      if (td.textContent.trim() === "0" || val === 0) {
-        td.classList.add("color-white");
+      if (td.textContent.trim() === '0' || val === 0) {
+        td.classList.add('color-white');
       } else if (!isNaN(val)) {
         if (val >= 0.001 && val < 1) {
-          td.classList.add("color-ms");
+          td.classList.add('color-ms');
         } else if (val >= 0.000001 && val < 0.001) {
-          td.classList.add("color-us");
+          td.classList.add('color-us');
         } else if (val >= 0.000000001 && val < 0.000001) {
-          td.classList.add("color-ns");
+          td.classList.add('color-ns');
         } else if (val >= 0.000000000001 && val < 0.000000001) {
-          td.classList.add("color-ps");
+          td.classList.add('color-ps');
         }
       }
     }
@@ -179,35 +190,86 @@ <h1>GNSS Timing Performance</h1>
       if (th.length < 1) return;
 
       switch (th[1].textContent.trim()) {
-        case "Pi OS": return "Pi-OS-12-GPIO";
-        case "BSD":
+        case 'Pi OS': return 'Pi-OS-12-GPIO';
+        case 'BSD':
           switch (th[0].textContent.trim()) {
-            case "Pi 4": return "FreeBSD-14-GPIO";
-            case "Pi 5":
-            case "LarkBox": return "FreeBSD-14-USB";
-            case "Xeon E5": return "FreeBSD-14-UART";
+            case 'Pi 4': return 'FreeBSD-14-GPIO';
+            case 'Pi 5':
+            case 'LarkBox': return 'FreeBSD-14-USB';
+            case 'Xeon E5': return 'FreeBSD-14-UART';
           }
-        case "Mac": return "macOS";
-        case "Win": return "Windows-11-USB";
+        case 'Mac': return 'macOS';
+        case 'Win': return 'Windows-11-USB';
+      }
+    }
+
+    function getCellImage (th, tdIndex) {
+      const gnss = ['6M', 'U7', '7M', 'M8Q', 'M8T', 'M10'];
+
+      if (th.length < 1) return;
+
+      let imgHW = th[0].textContent.trim().replace(/\s/g, '').toLowerCase()
+      switch (th[0].textContent.trim()) {
+        case 'Xeon E5': imgHW = 'xeonE5'; break
+        case 'M3 MBA': imgHW = 'm3'; break
+      }
+
+      let imgOS = th[1].textContent.trim().toLowerCase().replace(/\s/g, '')
+      switch (th[1].textContent.trim()) {
+        case 'Linux': imgOS = 'deb'; break
+      }
+
+      let imgDaemon = th[2].textContent.trim().toLowerCase().replace(/\s/g, '').replace(/\+/g, '-')
+      switch (th[2].textContent.trim()) {
+        case 'mac-pps': imgDaemon = 'chrony'; break
+      }
+
+      let imgGNSS = gnss[tdIndex];
+
+      if (imgHW && imgOS && imgDaemon && imgGNSS) {
+        return `https://byo-ntp.github.io/img/ublox/${imgGNSS}/${imgHW}-${imgOS}-${imgGNSS.toLowerCase()}-${imgDaemon}.png`
       }
     }
 
-    document.addEventListener("DOMContentLoaded", () => {
-      const table = document.getElementById("timing-table");
-      const rows = table.querySelectorAll("tbody tr");
+    document.addEventListener('DOMContentLoaded', () => {
+      const graph = document.getElementById('gnss_performance_graph')
+      const overlay = document.getElementById('lightbox-overlay')
+      const lbImg = document.getElementById('lightbox-img')
+      const table = document.getElementById('timing-table')
+      const rows = table.querySelectorAll('tbody tr')
       for (const row of rows) {
-        const th = row.querySelectorAll("th");
-        const recipe = getRowRecipe(th);
+        const th = row.querySelectorAll('th')
+        const recipe = getRowRecipe(th)
+        if (recipe) {
+          for (const td of th) {
+            td.onclick = () => window.open(`https://github.com/BYO-NTP/recipes/wiki/${recipe}`)
+          }
+        }
 
-        const cells = row.querySelectorAll("td");
+        const cells = row.querySelectorAll('td')
+        let cellIndex = 0
         for (const td of cells) {
-          if (td.textContent.trim() !== "") {
-            styleCell(td);
-            if (recipe) td.onclick = () => window.open(`https://github.com/BYO-NTP/recipes/wiki/${recipe}`);
+          if (td.textContent.trim() !== '') {
+            styleCell(td)
+            const imgURI = getCellImage(th, cellIndex)
+            if (graph * imgURI) {
+              td.onclick = () => {
+                td.classList.add('lightbox-link')
+                overlay.style.display = 'flex'
+                lbImg.src = imgURI
+              }
+              td.onmouseover = () => { graph.src = imgURI; }
+              td.onmouseout = () => { graph.src = ''; }
+            }
           }
+          cellIndex++
         }
       }
     })
+
+    document.getElementById('close-btn').addEventListener('click', () => {
+      document.getElementById('lightbox-overlay').style.display = 'none'
+    })
   </script>
 </body>
 </html>

htdocs/img/ublox/M8T/mac-macos-m8t-chrony.png renamed to htdocs/img/ublox/M8T/mac-mac-m8t-chrony.png

@@ -28,12 +28,34 @@ body {
     background-color: #fff;
     border: 1px solid #ccc;
     box-shadow: 0 0 5px rgba(0,0,0,0.1);
+    font-size: 0.9em;
 }
 .legend p {
     font-family: monospace, monospace;
     white-space: pre;
     margin: 0.3em;
 }
+
+#lightbox-overlay {
+  position: fixed;
+  display: none;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  justify-content: center; align-items: center;
+  z-index: 1000;
+}
+#lightbox-img {
+  max-width: 90%;
+  max-height: 90%;
+}
+#close-btn {
+  position: absolute;
+  top: 20px; right: 30px;
+  color: white;
+  font-size: 40px;
+  cursor: pointer;
+}
+
 footer {
     margin-top: 20px;
     padding: 5px;