Skip to content

feat: add visual focal length simulator with real-time camera zoom#11

Merged
JustCreature merged 1 commit into
mainfrom
F-4
Feb 20, 2026
Merged

feat: add visual focal length simulator with real-time camera zoom#11
JustCreature merged 1 commit into
mainfrom
F-4

Conversation

@JustCreature

Copy link
Copy Markdown
Owner

Summary

Adds an interactive focal length simulator that overlays a ruler-style slider on the camera preview, allowing photographers to visualize and simulate different
focal lengths (15mm-200mm) in real-time through digital zoom.

Key Features

  • Visual Ruler Overlay: Semi-transparent slider at bottom of camera view with marks at common focal lengths (15, 24, 35, 50, 85, 135, 200mm)
  • Real-Time Digital Zoom: Video preview zooms instantly as you adjust focal length
  • Accurate Photo Capture: Photos capture only the zoomed portion matching the preview
  • Letterbox Effect: Shows black bars for ultra-wide angles (<24mm) indicating FOV wider than camera can capture
  • Persistent Settings: Remembers focal length across camera sessions
  • Synced State: Slider and settings dialog share single source of truth (currentSettings.focalLength)

Mobile UX Improvements

  • Larger touch targets (32px thumb, 36px when active)
  • Step size of 5mm for easier control (less jumpy on touch)
  • Visual feedback when dragging (darker overlay, larger focal length text)
  • Smooth transitions on all interactions
  • TextField allows clearing to type new values

Technical Implementation

New Component:

  • FocalLengthRulerOverlay.tsx - Ruler overlay with Material-UI Slider

Updated:

  • CameraScreen.tsx - Integrated zoom calculation, letterbox rendering, overlay positioning
  • camera.ts - Updated captureImage() to accept zoomFactor and crop video frame accordingly
  • FocalLengthSlider.tsx - Fixed TextField to allow empty state for easier value entry

Zoom Formula:
baseline = 24mm (iPhone standard camera)
zoomFactor = focalLength / baseline

Examples: 24mm=1.0x, 50mm=2.08x, 85mm=3.54x

User Benefits

  • Visualize composition with different focal lengths before shooting
  • Educational tool to understand focal length effects
  • Better framing decisions for film photography
  • No need to guess how a scene would look with different lenses

Testing

  • ✅ All E2E tests pass (photography workflow, camera management)
  • ✅ Build succeeds without errors
  • ✅ State persistence verified
  • Manual testing recommended on iPhone for touch interaction quality

Screenshots

Recommended: Add screenshots showing the ruler overlay at different focal lengths

@JustCreature JustCreature self-assigned this Feb 20, 2026
@JustCreature JustCreature added the enhancement New feature or request label Feb 20, 2026
@JustCreature JustCreature merged commit 3ac1fd0 into main Feb 20, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant