Bilder

public/client.js

@@ -123,6 +123,7 @@ async function fetchCSV() {
 
 async function renderSnapshot() {
   const table = document.getElementById("snapshot-table");
+  const pictureEl = document.getElementById("snapshot-info-picture");
   if (!table) return;
 
   try {
@@ -134,6 +135,22 @@ async function renderSnapshot() {
       infoEl.textContent = `Datei: ${data.filename}, Geändert: ${new Date(data.mtime).toLocaleString()}, Zeilen: ${rows.length}`;
     }
 
+    // Bild anzeigen, falls vorhanden
+    if (pictureEl) {
+      let imagesHtml = '';
+      if (data.imageFile) {
+        imagesHtml += `<img src="data:${data.imageFile.mimeType};base64,${data.imageFile.contentBase64}" alt="${data.imageFile.filename}" style="max-width: calc(50% - 2.5px); height: auto;">`;
+      }
+      if (data.image2) {
+        imagesHtml += `<img src="data:${data.image2.mimeType};base64,${data.image2.contentBase64}" alt="${data.image2.filename}" style="max-width: calc(50% - 2.5px); height: auto;">`;
+      }
+      if (imagesHtml) {
+        pictureEl.innerHTML = `<div style="display: flex; gap: 5px;">${imagesHtml}</div>`;
+      } else {
+        pictureEl.innerHTML = "";
+      }
+    }
+
     // Tabelle leeren
     table.innerHTML = "";
 

public/index.html

@@ -80,9 +80,8 @@
     </div>
 
     <div class="section full">
-      <h2>Snapshot Image</h2>
-      <div id="snapshot-info"></div>
-      <table id="snapshot-table"></table>
+      <h2>Snapshot</h2>
+      <div id="snapshot-info-picture"></div>
     </div>
 
   </div>

server/server.js

@@ -209,6 +209,8 @@ app.get('/api/latest-snapshot', (req, res) => {
     const baseName = path.basename(latestFile.name, path.extname(latestFile.name));
     const imageFilename = `${baseName}_annotated.jpg`;
     const imagePath = path.join(snapshotsDir, imageFilename);
+    const imatePath2 = imagePath.includes('video0') ? imagePath.replace('video0', 'video1') : imagePath.replace('video1', 'video0');
+    
 
     fs.readFile(latestFile.path, 'utf8', (err, data) => {
       if (err) {
@@ -221,6 +223,7 @@ app.get('/api/latest-snapshot', (req, res) => {
         content: data
       };
 
+      // Lade beide Bilder
       fs.readFile(imagePath, { encoding: 'base64' }, (jpgErr, jpgBase64) => {
         if (!jpgErr && jpgBase64) {
           response.imageFile = {
@@ -229,10 +232,20 @@ app.get('/api/latest-snapshot', (req, res) => {
             contentBase64: jpgBase64
           };
         }
+
+        fs.readFile(imatePath2, { encoding: 'base64' }, (jpgErr2, jpgBase642) => {
+          if (!jpgErr2 && jpgBase642) {
+            response.image2 = {
+              filename: path.basename(imatePath2),
+              mimeType: 'image/jpeg',
+              contentBase64: jpgBase642
+            };
+          }
           res.json(response);
         });
       });
     });
+  });
 });
 
 // Statisches Frontend