grokbot_ty
d18b96c10b
Add pickCalibration state/UI over batch thumbs. Continue from batch opens pick (including single-photo confirm). User pick enters M1 Mask on that Source only; draft stores calibrationIndex. Removes first-photo proxy.
67 lines
2.0 KiB
Svelte
67 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy } from 'svelte';
|
|
import type { Source } from './capture.types';
|
|
|
|
export let photos: Source[];
|
|
export let onPick: (index: number) => void;
|
|
export let onBack: () => void;
|
|
|
|
let urls: string[] = [];
|
|
|
|
$: {
|
|
for (const u of urls) URL.revokeObjectURL(u);
|
|
urls = photos.map((p) => URL.createObjectURL(p.blob));
|
|
}
|
|
|
|
onDestroy(() => {
|
|
for (const u of urls) URL.revokeObjectURL(u);
|
|
});
|
|
</script>
|
|
|
|
<section class="panel">
|
|
<h1>Pick calibration photo</h1>
|
|
<p class="hint">
|
|
Choose which photo is the top-down reference for length and thickness.
|
|
Mask, length axis, and Measure run on that photo only.
|
|
</p>
|
|
|
|
<ul class="thumbs" aria-label="Calibration candidates">
|
|
{#each photos as _p, i (urls[i])}
|
|
<li class="thumb">
|
|
<img src={urls[i]} alt={`Photo ${i + 1}`} />
|
|
<button
|
|
type="button"
|
|
class="pick"
|
|
aria-label={`Use photo ${i + 1} as calibration`}
|
|
on:click={() => onPick(i)}
|
|
>Use as calibration</button>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
|
|
<button class="back" type="button" on:click={onBack}>Back</button>
|
|
</section>
|
|
|
|
<style>
|
|
.panel { padding: 24px 16px; color: #eee; }
|
|
h1 { font-size: 1.4rem; }
|
|
.hint { color: #bbb; line-height: 1.5; font-size: 0.95rem; }
|
|
.thumbs {
|
|
list-style: none; padding: 0; margin: 16px 0;
|
|
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
|
|
}
|
|
.thumb {
|
|
background: #1e1e1e; border-radius: 8px; overflow: hidden;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #000; }
|
|
.pick {
|
|
border: 0; background: #00e5ff; color: #002; padding: 10px 8px;
|
|
font-size: 0.9rem; font-weight: 700; cursor: pointer;
|
|
}
|
|
.back {
|
|
margin-top: 8px; width: 100%; padding: 12px; font-size: 1rem; border-radius: 10px;
|
|
border: 1px solid #444; background: transparent; color: #ccc; cursor: pointer;
|
|
}
|
|
</style>
|