diff --git a/docs/CAPTURE.md b/docs/CAPTURE.md index 833069b..d987b42 100644 --- a/docs/CAPTURE.md +++ b/docs/CAPTURE.md @@ -3,7 +3,7 @@ Runs in the browser on phone and PC as ordinary client code. No inference URL. No model. Mask, rectangle, measurements, and PNG encode are deterministic functions of the photo and user inputs. -Milestone 1 ends at step 8. Milestone 2 is Review. Milestone 3 is Create. This file does not create a WooCommerce product. +Milestone 1 ends when the user sees the inventory PNG and measurements. Milestone 2 is Review. Milestone 3 is Create. This file does not create a WooCommerce product. ## Setup @@ -16,35 +16,63 @@ Photograph the slab on a green or black sheet. The app expects that sheet. Background removal keys green or black. Other backgrounds are out of Milestone 1. -## Flow +## States -1. User adds one photo taken under Setup. -2. App removes the background and shows a mask overlay on the source photo: slab pixels vs removed pixels. Controls: sheet Auto / Green / Black, one sensitivity slider. Overlay updates as the slider moves. -3. User adjusts until only the slab remains, then approves the mask. That approved mask is the slab footprint for every later step. -4. App draws the minimum-area bounding rectangle of the mask and the length axis on the long side of that rectangle. User rotates the axis if it does not follow the slab length, then approves the axis. -5. User enters length `L` in inches (1/8 in steps) and thickness (1/8 in steps). -6. App sets `scale = longest_axis_px / L`. -7. App computes widths, sqft, and bdft from the mask, and writes the inventory PNG. -8. User sees the PNG and the numbers. Milestone 1 stops here. +One photo component is reused. Each state advances on approve. Back returns to the previous state. A device draft restores the last approved state. -## Device draft +1. Resume — only when a device draft exists. Continue or Start fresh. +2. Add photo — camera or picker. Setup rules visible. +3. Mask — background removal on that photo. +4. Length axis — bounding rectangle and long-side axis on the same photo. +5. Measure — length, thickness, inventory PNG, widths, sqft, bdft. Milestone 1 stops here. -One in-progress slab is stored on the device. -This is not a WooCommerce draft. +## Display -On open or refresh, if that draft exists, the user chooses Continue or Start fresh. +Preview fits the device width. Height is capped so Mask and Measure controls stay on screen. Phone and PC use the same states. -- Continue restores the slab at the last approved step, including step 8. -- Start fresh discards the device draft and returns to Setup. +The preview is display only. Mask, rectangle, `scale`, sqft, and PNG encode use the source photo pixels, not the CSS size of the preview. -Milestone 3 clears the device draft after Woo create. +## Mask -## Measurements +Overlay: slab remains the photograph. Removed pixels are a light gray checkerboard. +Controls on this state, with the photo visible: + +- Sheet: Auto, Green, or Black +- Sensitivity: 0–100, step 1. Slider with minus and plus on each side. Button hit targets sized for a thumb. + +The control value updates immediately. The overlay recomputes 2.0 seconds after the last sensitivity change. A sheet change may recompute on the change. + +Mask work runs off the UI thread. The last good overlay stays visible while a pass runs. Show a busy mark only if a pass lasts more than a fraction of a second. If a pass fails, keep the last overlay; the user may retake. + +User approves the mask when only the slab remains. That mask is the footprint for Length axis, measurements, and the inventory PNG. + +## Length axis + +On the same photo, draw the minimum-area bounding rectangle of the mask and the length axis on the long side of that rectangle. User rotates the axis if it does not follow the slab length, then approves the axis. + +## Measure + +User enters length `L` in inches (1/8 in steps) and thickness (1/8 in steps). + +- `scale = longest_axis_px / L` - Widths: min, max, avg, sampled every 6 in along the approved length axis, perpendicular to it - `sqft = (mask_pixels / scale²) / 144` (2 decimals) - `bdft = sqft × thickness_in` (2 decimals) +User sees the inventory PNG and those numbers. Stop. + +## Device draft + +One in-progress slab is stored on the device. This is not a WooCommerce draft. + +On open or refresh, if that draft exists, the app opens in Resume. + +- Continue restores the last approved state, including Measure. +- Start fresh discards the device draft and opens Add photo. + +Milestone 3 clears the device draft after Woo create. + ## Inventory PNG Role: `kind=inventory`. Filename is an implementation detail.