Skip to content

Comments

Add fullscreen calibration mode and fix camera preview clipping#103

Open
harsshks wants to merge 2 commits intoruxailab:mainfrom
harsshks:feat/fullscreen-calibration
Open

Add fullscreen calibration mode and fix camera preview clipping#103
harsshks wants to merge 2 commits intoruxailab:mainfrom
harsshks:feat/fullscreen-calibration

Conversation

@harsshks
Copy link

What this PR does

  • Adds fullscreen mode during eye-tracking calibration to prevent UI clipping
  • Automatically enters fullscreen during training/validation
  • Exits fullscreen cleanly on completion or route leave
  • Fixes camera preview being clipped by stepper container constraints

Root cause

Camera preview was being clipped by a parent stepper container using
max-height + overflow: hidden.

Fix

  • Remove height constraints on stepper container
  • Allow natural scrolling
  • Add defensive fullscreen API handling

Testing

  • Chrome, Edge (desktop)
  • Calibration flow: training → validation → completion
  • Verified fullscreen enter/exit and no camera cropping

Fixes #100

@harsshks
Copy link
Author

harsshks commented Feb 5, 2026

Conflicts Resolved & Ready for Review

I've successfully resolved the merge conflicts and updated this PR with the latest changes from main. Here's a summary of what this PR implements:

🎯 Core Features Implemented

1. Fullscreen Calibration Mode

  • Cross-browser support: Chrome, Firefox, Safari, Edge
  • Auto-enter fullscreen when training/validation phases start
  • Auto-exit fullscreen when calibration completes or user navigates away
  • Graceful fallback for browsers that don't support fullscreen API

2. Camera Preview Fixes

  • Resolved cropping issue in CameraConfiguration.vue
  • Removed stepper height constraints that were clipping camera view
  • Improved video element sizing for better compatibility
  • Added natural scrolling when content exceeds viewport

- Enter fullscreen during training and validation
- Exit fullscreen on completion or route leave
- Fix camera preview being clipped by stepper container
- Allow natural scrolling during calibration

Fixes ruxailab#100
- Add calibration mode selection (multi-point vs single-point)
- Update store with calibrationMode state and mutations
- Add single-point pattern generation (center screen)
- Update DoubleCalibrationRecord.vue to support single-point mode
- Add calibration mode selector in CameraConfiguration.vue
- Dynamic stepper content based on calibration mode
- Maintain backward compatibility with existing multi-point mode

Features:
- Quick single-point calibration for faster setup
- Lower accuracy trade-off for speed
- Center screen point positioning
- Dynamic UI based on selected mode
- Proper state management integration

Addresses ruxailab#99
@harsshks harsshks force-pushed the feat/fullscreen-calibration branch from b36b336 to 7820163 Compare February 19, 2026 05:01
@harsshks
Copy link
Author

harsshks commented Feb 19, 2026

Hi @jvJUCA ,

Just a quick follow-up on this PR.

I’ve rebased with the latest main and resolved the merge conflicts in:

  • src/main.js

  • src/store/calibration.js

  • src/views/CameraConfiguration.vue

  • src/views/DoubleCalibrationRecord.vue

Everything is now up to date and should merge cleanly.

Please let me know if any further changes are required from my side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(calibration): add Fullscreen mode during calibration

1 participant