v0.3.0: OCR via camera, FAB UX, side drawer #4
Reference in New Issue
Block a user
No description provided.
Delete Branch "feature/ocr-camera"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Release notes in CHANGELOG.md
- Scan button is now a 📷 floating action button at bottom-right of the viewport (camera emoji per explicit request). Replaces the small "Scan image" button in the input header. - Crop modal: inner padding on .modal-body so cropperjs's bottom-right corner handle isn't on top of Android's edge-swipe back-gesture zone. Backdrop also respects iOS safe-area insets (env(safe-area-inset-{right,left,bottom})).- Material Symbols Outlined webfont (Google Fonts) — used for the FAB camera (photo_camera), and the rotate_left / rotate_right / restart_alt / check buttons in the crop modal. Replaces the platform-rendered 📷 emoji that was off-centre, and replaces text labels on rotate/use buttons. Cancel stays text. - Cropper: autoCrop=false — no default selection. User drags on the image to draw the crop region; if they "Use this" without drawing, falls back to the full (possibly rotated) image. - Modal-body padding bumped from 1.25 rem to 2 rem so the bottom-right corner handle sits ~48 px from the screen edge, outside Android's edge-swipe back-gesture zone. - Header copy updated to "Drag on the image to select the text region" since there's no longer a default box to convey intent.Four wins: 1. Replace <input type=file capture> with a getUserMedia viewfinder modal on mobile. Tapping the shutter goes straight to the crop modal — skips the OS "retake/use" confirm step. Falls back to file picker if camera permission is denied or the API is unavailable. "Pick from file" icon (photo_library) inside the camera modal opens the gallery on demand. 2. Drop the Reset button — with no default crop box, "reset" is just "no box again," which is the starting state anyway. 3. The check (Use this) button is now larger and more prominent — wider padding, 24px icon, accent fill. 4. Invert-colours toggle (invert_colors icon) in the crop modal. White-on-dark text (signs, menus, screenshots) breaks Tesseract because the binariser was made for ink on paper. Toggling the button flips the grayscale buffer before adaptive thresholding so the binary output ends up black-on-white. State plumbed cleanly: openCropper now resolves with {blob, invert}; preprocessForOCR takes an {invert} option; binarizeAdaptive applies the flip. Also: drop `capture=environment` from the file <input>. Without it the file path correctly opens the gallery/file dialog instead of re-opening the OS camera when the user picks "Pick from file".Two-pronged fix so the Translate + Scan FABs stay reachable when the mobile soft keyboard is open: - Add `interactive-widget=resizes-content` to the viewport meta — Chrome on Android then shrinks the layout viewport when the keyboard opens, so `position: fixed; bottom: ...` is naturally above it. iOS Safari ignores this directive, hence: - VisualViewport listener computes inset = innerHeight - vv.height - vv.offsetTop and writes it to a `--kb-inset` CSS custom property. The FAB bottom calc uses `max(var(--kb-inset), safe-area-inset-bottom)` so the keyboard inset wins when it's open and the home-indicator inset wins when it isn't. Net: tap the editor on iOS → keyboard slides up → Translate / Scan FABs rise with it, no manual minimise required.