Ty_Tech/SlabUploader
6
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: name crop as Calculate step — 3:4, 80% fill, transparent PNG

Browse Source
This commit is contained in:
Ty
2026-09-14 14:16:41 +00:00
parent d86fc93ed6
commit bb78e35ac3
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/CAPTURE.md
+19 -7
View File
@@ -1,7 +1,7 @@
# Milestone 1 — Capture
Runs in the browser on phone and PC as ordinary client code.
No inference URL. No model. No backend. Mask, rectangle, measurements, and PNG encode are deterministic functions of the photo and user inputs.
No inference URL. No model. No backend. Mask, rectangle, measurements, crop, and PNG encode are deterministic functions of the photo and user inputs.
Milestone 1 uses one reference photo. Further angles are later milestones.
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.
@@ -34,8 +34,8 @@ Otherwise the app opens Add photo.
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), then presses Calculate.
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.
7. App computes widths, sqft, and bdft from the mask. App crops the masked slab into a 3:4 portrait frame: slab centered, 80% fill at the widest and tallest points, background transparent. App writes that frame as an inventory PNG (`image/png`, 8-bit RGBA).
8. User sees the transparent PNG and the numbers. Milestone 1 stops here.
Calculate does not create a WooCommerce product.
@@ -53,13 +53,13 @@ One photo component is reused. Each state advances on approve. Back returns to t
2. Add photo — camera or picker. One photo. 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, Calculate, inventory PNG, widths, sqft, bdft. Milestone 1 stops here.
5. Measure — length, thickness, Calculate, crop, inventory PNG, widths, sqft, bdft. Milestone 1 stops here.
## Display
Preview fits the device width. Height is capped so Mask and Measure controls stay on screen. Phone and PC use the same states.
The preview is display only. Mask, rectangle, `scale`, sqft, and PNG encode use the source photo pixels, not the CSS size of the preview.
The preview is display only. Mask, rectangle, crop, `scale`, sqft, and PNG encode use the source photo pixels, not the CSS size of the preview.
## Runtime
@@ -83,7 +83,7 @@ Mask work runs in the worker. The last good overlay stays visible while a pass r
Approve is blocked when the mask has no slab pixels. User retakes.
User approves the mask when only the slab remains. That mask is the footprint for Length axis, measurements, and the inventory PNG.
User approves the mask when only the slab remains. That mask is the footprint for Length axis, crop, measurements, and the inventory PNG.
## Length axis
@@ -97,8 +97,20 @@ User enters length `L` in inches (1/8 in steps) and thickness (1/8 in steps), th
- 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)
- Crop: 3:4 portrait, slab centered, 80% fill at the widest and tallest points, transparent background
- File: inventory PNG, `image/png`, 8-bit RGBA, alpha kept
User sees the inventory PNG and those numbers. Stop. Calculate does not create a WooCommerce product.
User sees the transparent PNG and those numbers. Stop. Calculate does not create a WooCommerce product.
## Crop
On Calculate, the app builds the inventory image from the approved mask:
1. Keep slab pixels from the source photo. Removed pixels are transparent.
2. Place the slab in a 3:4 portrait frame, centered.
3. Scale so the widest and tallest points of the slab fill 80% of the frame. Extra margin where the slab is narrower.
4. After that crop, shorter side ≥ 1600px when the source can supply it. Otherwise warn and require a new photo. No upscale from an undersized source.
5. Encode as PNG with alpha.
## Device draft