diff --git a/src/styles.css b/src/styles.css index 3f268de..67082f6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -25,13 +25,20 @@ body { .camera video { width: 100%; height: 100%; object-fit: cover; } .frame { + /* Lage (inset) wird von scan-view.js aus FRAME_INSET (camera.js) gesetzt - + einzige Quelle, die sich auch der native Ausschnitt teilt. */ position: absolute; - inset: 20% 8%; border: 3px solid rgba(255, 255, 255, 0.7); border-radius: 8px; pointer-events: none; } +/* Dauersuche hat einen Barcode im Ausschnitt gefunden - schlichte + Farbaenderung, keine Animation. */ +.frame.detected { + border-color: var(--green); +} + .stacks { display: flex; gap: 8px; diff --git a/src/ui/scan-view.js b/src/ui/scan-view.js index 077dd73..4686025 100644 --- a/src/ui/scan-view.js +++ b/src/ui/scan-view.js @@ -1,3 +1,5 @@ +import { FRAME_INSET } from '../camera.js'; + /** * Baut die Hauptansicht auf und liefert Aktualisierungsfunktionen zurueck. * Kennt weder Kamera noch Erkennung - alles kommt ueber die Rueckrufe. @@ -24,6 +26,15 @@ export function renderScanView(root, { onCapture, onUndo, onOpenList, onPickFile const statusEl = root.querySelector('#status'); const fileEl = root.querySelector('#file'); const pickFileButtonEl = root.querySelector('#pick-file-button'); + const frameEl = root.querySelector('.frame'); + + // FRAME_INSET (camera.js) ist die einzige Quelle der Rahmenmasse - sowohl + // fuer diesen sichtbaren Rahmen als auch fuer den nativen Ausschnitt + // (grabFrameRegion). Damit koennen beide nicht mehr auseinanderlaufen; + // das Stilblatt selbst legt keinen Abstand mehr fest. + frameEl.style.inset = + `${FRAME_INSET.top * 100}% ${FRAME_INSET.right * 100}% ` + + `${FRAME_INSET.bottom * 100}% ${FRAME_INSET.left * 100}%`; root.querySelector('#capture').addEventListener('click', onCapture); root.querySelector('#undo').addEventListener('click', onUndo); @@ -82,5 +93,15 @@ export function renderScanView(root, { onCapture, onUndo, onOpenList, onPickFile setFilePickerVisible(visible) { pickFileButtonEl.hidden = !visible; }, + + /** + * Hebt den Zielrahmen hervor, solange die Dauersuche einen Barcode im + * Ausschnitt erkennt - schlichte Farbaenderung, keine Animation. Der + * Nutzer sieht damit beim Hinhalten sofort, ob es klappt. + * @param {boolean} detected + */ + setFrameDetected(detected) { + frameEl.classList.toggle('detected', detected); + }, }; }