From c545378ca64c17a6b279d6279d9cdf1a541b8801 Mon Sep 17 00:00:00 2001
From: chk <ckendel@gmail.com>
Date: Mon, 22 Dec 2025 21:58:27 +0100
Subject: [PATCH] Committed and Pushed by ButtonClick

---
 public/index.html      | 4 ++--
 public/indexA.css      | 4 +++-
 public/videoService.js | 8 +++++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/public/index.html b/public/index.html
index ef7a8c0..65dcff0 100755
--- a/public/index.html
+++ b/public/index.html
@@ -21,8 +21,7 @@
             
       <div class="video-wrap">
         <canvas id="canvas0" width="1280" height="960"></canvas>
-        <img id="overlayImg"
-          src="/snapshots/snapshot_video0_1765356085372_two_cam_overlay.png">
+        <img id="overlayImg"/>
       </div>
       <div id="status0" class="status">Connecting…</div>
     </section>
@@ -32,6 +31,7 @@
       <h2>Camera 1</h2>
       <div class="video-wrap">
         <canvas id="canvas1" width="1280" height="960"></canvas>
+        <img id="overlayImg1"/>
       </div>
       <div id="status1" class="status">Connecting…</div>
     </section>
diff --git a/public/indexA.css b/public/indexA.css
index bb85299..aa52d4e 100755
--- a/public/indexA.css
+++ b/public/indexA.css
@@ -51,6 +51,7 @@ h1, h2 {
    so overlays align correctly when the window is resized. */
 .video-wrap canvas,
 .video-wrap img,
+#overlayImg1,
 #overlayImg {
   position: absolute;
   inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
@@ -67,6 +68,7 @@ h1, h2 {
   z-index: 1;
 }
 .video-wrap img,
+#overlayImg1,
 #overlayImg {
   z-index: 2;
   pointer-events: none;    /* don't block interactions with the canvas */
@@ -123,7 +125,7 @@ footer {
 /* Ensure overlay uses contain and respects alpha channel from the PNG
    (the PNG's transparency is the authoritative source of which pixels
    are transparent; CSS opacity only adjusts global alpha). */
-#overlayImg {
+#overlayImg,#overlayImg1 {
   position: absolute;
   inset: 0;                 /* shorthand for top:0; right:0; bottom:0; left:0; */
   width: 100%;
diff --git a/public/videoService.js b/public/videoService.js
index e42569f..3b8199b 100755
--- a/public/videoService.js
+++ b/public/videoService.js
@@ -124,16 +124,18 @@
             if (msg.type === 'snapshot' && control?.snapshotOutEl) {
               if (msg.ok && msg.url && msg.urlApp) {
                 // Use overlay URL and CSV provided by the server (fallback to expected names)
-                const overlayPNG = msg.overlay || msg.urlApp.replace('_annotated.jpg','_two_cam_overlay.png');
+                const overlayPNG0 = msg.overlay || msg.urlApp.replace('_annotated.jpg','_two_cam_overlay.png');
+                const overlayPNG1 = overlayPNG0.replace('video0','video1');
                 // Prefer server-provided overlayCSV. If not present, derive from the original jpg name
                 const overlayCSV = msg.overlayCSV || msg.url.replace('.jpg','_two_cam.csv');
                 
                 control.snapshotOutEl.innerHTML =
                     `Snapshot: <a href="${msg.url}" target="_blank" rel="noopener">${msg.url}</a></br></br>  ` +
                     ` Recognized: <a href="${msg.urlApp}" target="_blank" rel="noopener">${msg.urlApp}</a></br>  ` +
-                    ` Overlay: <a href="${overlayPNG}" target="_blank" rel="noopener">PNG Overlay</a>`;
+                    ` Overlay: <a href="${overlayPNG0}" target="_blank" rel="noopener">PNG Overlay</a>`;
                 // Update overlay immediately — server now ensures files are ready before responding
-                document.getElementById('overlayImg').src = overlayPNG;
+                document.getElementById('overlayImg').src = overlayPNG0;
+                document.getElementById('overlayImg1').src = overlayPNG1;
                 // Render CSV values into the csvTable container (if available)
                 if (window.readCSV) {
                   window.readCSV.renderCSV('csvTable', overlayCSV);