From fa91a36da957d97e72e7b6f829227d5b51102a9e Mon Sep 17 00:00:00 2001
From: chk <79915315+ChKendel@users.noreply.github.com>
Date: Wed, 10 Jun 2026 18:49:26 +0200
Subject: [PATCH] x-axis justierung: lines 2

---
 public/boardViewer.html | 97 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 82 insertions(+), 15 deletions(-)

diff --git a/public/boardViewer.html b/public/boardViewer.html
index 3483277..62efad3 100644
--- a/public/boardViewer.html
+++ b/public/boardViewer.html
@@ -121,6 +121,21 @@
   table.dtbl td:nth-child(2) { text-align: left; }
   table.dtbl tr:hover td { background: #1a1f2b; }
   .row-1cam td:first-child::before { content: ''; }
+  /* ── Viewer-Log ── */
+  #viewer-log {
+    flex-shrink: 0;
+    max-height: 64px;
+    overflow-y: auto;
+    border-top: 1px solid var(--border);
+    background: #090b0e;
+    padding: 2px 10px 3px;
+    font-size: 10px;
+    color: #4a5568;
+    line-height: 1.6;
+  }
+  #viewer-log .vl-ok  { color: #4ade80; }
+  #viewer-log .vl-warn{ color: #fbbf24; }
+  #viewer-log .vl-err { color: #f87171; }
   .cell-hi  { color: #fbbf24; }   /* amber: trianguliert */
   .cell-lo  { color: #dde3ec; }   /* hell: nur 2D */
   .cell-unk { color: #3b82f6; }   /* blau: fremd */
@@ -171,6 +186,7 @@
 </div>
 
 <div id="table-wrap"></div>
+<div id="viewer-log"></div>
 
 <script type="module">
 import * as THREE from 'three';
@@ -221,6 +237,18 @@ scene.add(gPaper, gMarkers, gMeasured, gCameras, gCompare, gCompareLines);
 let _primaryFremdMarkers = [];   // [{marker_id, position_mm, num_cameras}]
 let _compareFremdMarkers = [];   // [{marker_id, position_mm, num_cameras}]
 
+// ── Viewer-interner Logger ────────────────────────────────────────────────────
+function vlog(msg, kind = '') {
+  const el = document.getElementById('viewer-log');
+  if (!el) return;
+  const d   = document.createElement('div');
+  d.className = kind ? `vl-${kind}` : '';
+  d.textContent = `${new Date().toLocaleTimeString('de-CH')}  ${msg}`;
+  el.appendChild(d);
+  while (el.children.length > 40) el.removeChild(el.firstChild);
+  el.scrollTop = el.scrollHeight;
+}
+
 function clearGroup(g) {
   while (g.children.length) {
     const c = g.children[0];
@@ -609,15 +637,35 @@ function buildCompareLines() {
   clearGroup(gCompareLines);
   const compareActive = _compareFremdMarkers.length > 0;
   setSceneOpacity(compareActive);
-  if (!compareActive || !_primaryFremdMarkers.length) return;
 
-  const primaryMap = new Map(_primaryFremdMarkers.map(m => [m.marker_id, m]));
+  if (!compareActive) {
+    vlog(`Vergleich inaktiv – Board-Marker voll sichtbar`);
+    return;
+  }
+  if (!_primaryFremdMarkers.length) {
+    vlog(`⚠ Basis hat 0 fremd-Marker – keine Linien möglich`, 'warn');
+    return;
+  }
+
+  const primaryMap  = new Map(_primaryFremdMarkers.map(m => [m.marker_id, m]));
+  const matchedIds  = [];
+  const onlyCompare = [];   // in compare aber nicht in primary
+  const onlyPrimary = [...primaryMap.keys()];  // werden unten gefiltert
+
   for (const cm of _compareFremdMarkers) {
     const pm = primaryMap.get(cm.marker_id);
-    if (!pm) continue;
+    if (!pm) { onlyCompare.push(cm.marker_id); continue; }
+    matchedIds.push(cm.marker_id);
     // Linie: Basis-Position (blau) → Vergleichs-Position (orange)
     gCompareLines.add(makeLine(r2vArr(pm.position_mm), r2vArr(cm.position_mm), 0xfb923c, 0.85));
   }
+
+  const noMatch = onlyPrimary.filter(id => !matchedIds.includes(id));
+  const parts   = [`${matchedIds.length} Linien`];
+  if (matchedIds.length)  parts.push(`IDs: ${matchedIds.join(' ')}`);
+  if (onlyCompare.length) parts.push(`nur Vergleich: ${onlyCompare.join(' ')}`);
+  if (noMatch.length)     parts.push(`nur Basis: ${noMatch.join(' ')}`);
+  vlog(parts.join('  |  '), matchedIds.length ? 'ok' : 'warn');
 }
 
 // ── Daten laden ───────────────────────────────────────────────────────────────
@@ -645,6 +693,9 @@ async function loadData() {
     // Fremd-Marker für Verbindungslinien merken (Marker, die nicht in Board-Link stehen)
     const bIds = new Set((data.robot?.links?.Board?.markers ?? []).map(m => m.id));
     _primaryFremdMarkers = (data.measuredMarkers?.markers ?? []).filter(m => !bIds.has(m.marker_id));
+    const measTotal = data.measuredMarkers?.markers?.length ?? 0;
+    vlog(`Basis: run=${data.runDir}  gesamt=${measTotal}  fremd=${_primaryFremdMarkers.length}  boardIDs=${bIds.size}` +
+         (_primaryFremdMarkers.length ? `  (${_primaryFremdMarkers.map(m => m.marker_id).join(' ')})` : ''));
     buildCompareLines();
     const robotLabel = data.robotFile ? `  •  Robot: ${data.robotFile}` : '';
     statusEl.textContent = `Run: ${data.runDir}${robotLabel}  •  ${new Date().toLocaleTimeString('de-CH')}`;
@@ -662,21 +713,24 @@ async function loadCompareData() {
   clearGroup(gCompare);
   _compareFremdMarkers = [];
   const selRun = document.getElementById('sel-run-compare')?.value ?? '';
-  if (!selRun) { buildCompareLines(); return; }
+  if (!selRun) { vlog('Vergleich: keiner gewählt'); buildCompareLines(); return; }
+  vlog(`Vergleich: lade ${selRun} …`);
   try {
     const r = await fetch(`/api/board/latest?run=${encodeURIComponent(selRun)}`);
-    if (!r.ok) { buildCompareLines(); return; }
+    if (!r.ok) { vlog(`Vergleich: HTTP ${r.status}`, 'err'); buildCompareLines(); return; }
     const data    = await r.json();
     const markers = data.measuredMarkers?.markers ?? [];
     // Board-Marker-IDs aus Robot.json dieses Runs
     const boardIds = new Set((data.robot?.links?.Board?.markers ?? []).map(m => m.id));
     for (const m of markers) {
       if (!boardIds.has(m.marker_id)) {
-        _compareFremdMarkers.push(m);                                   // für Linien
+        _compareFremdMarkers.push(m);                                      // für Linien
         gCompare.add(makeSphere(r2vArr(m.position_mm), 0.006, 0xf97316)); // orange Kugel
       }
     }
-  } catch { /* kein 3b-Output für diesen Run */ }
+    vlog(`Vergleich: ${markers.length} gesamt  fremd=${_compareFremdMarkers.length}  boardIDs=${boardIds.size}` +
+         (_compareFremdMarkers.length ? `  (${_compareFremdMarkers.map(m => m.marker_id).join(' ')})` : ''));
+  } catch (err) { vlog(`Vergleich Fehler: ${err}`, 'err'); }
   buildCompareLines();   // Linien + Transparenz aktualisieren
 }
 
@@ -699,22 +753,35 @@ async function initRunSelectors() {
         runs5.map(r => `<option value="${r}"${r === cur ? ' selected' : ''}>${r}</option>`).join('');
     }
     if (selC) {
+      // Default: zweiten neuesten Run vorwählen (falls vorhanden und noch kein Wert gesetzt)
+      const prevCompare = selC.value;
       selC.innerHTML = '<option value="">– keiner –</option>' +
         runs10.map(r => `<option value="${r}">${r}</option>`).join('');
+      if (prevCompare) {
+        selC.value = prevCompare;  // bisher gewählten behalten
+      } else if (runs10.length >= 2) {
+        selC.value = runs10[1];    // zweiter neuester als Default
+      }
     }
   } catch { /* offline oder noch keine Runs */ }
 }
 
-initRunSelectors().then(() => loadData());
-document.getElementById('btnReload').addEventListener('click', () => {
-  initRunSelectors().then(() => { loadData(); loadCompareData(); });
+/** Vollständige Initialisierung: Selektoren → Basis → Vergleich (sequenziell!) */
+async function initAll() {
+  await initRunSelectors();
+  await loadData();          // setzt _primaryFremdMarkers
+  await loadCompareData();   // setzt _compareFremdMarkers + baut Linien
+}
+
+initAll();
+document.getElementById('btnReload').addEventListener('click', initAll);
+document.getElementById('sel-run-primary')?.addEventListener('change', async () => {
+  await loadData();
+  await loadCompareData();
 });
-document.getElementById('sel-run-primary')?.addEventListener('change', loadData);
 document.getElementById('sel-run-compare')?.addEventListener('change', loadCompareData);
-window.addEventListener('message', (e) => {
-  if (e.data?.type === 'reload') {
-    initRunSelectors().then(() => { loadData(); loadCompareData(); });
-  }
+window.addEventListener('message', async (e) => {
+  if (e.data?.type === 'reload') await initAll();
 });
 
 // ── Resize & Render-Loop ──────────────────────────────────────────────────────