From d9a584842aefa9e709104231ca62fe9ae9989b86 Mon Sep 17 00:00:00 2001
From: harsshks <the.hk.25102003@gmail.com>
Date: Thu, 29 Jan 2026 01:11:16 +0530
Subject: [PATCH 1/4] feat(calibration): fullscreen mode and camera preview fix

- 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 #100
---
 .gitignore                            |   3 +
 src/App.vue                           |  21 ++
 src/main.js                           |  19 +-
 src/store/calibration.js              | 125 ++++----
 src/views/CameraConfiguration.vue     | 398 ++++++++++++++++++++++++++
 src/views/DoubleCalibrationRecord.vue | 371 +++++++++++++++++++++++-
 vue.config.js                         |  13 +-
 7 files changed, 864 insertions(+), 86 deletions(-)

diff --git a/.gitignore b/.gitignore
index 499bd980..61ced855 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Firebase config (local only)
+src/firebase.js
diff --git a/src/App.vue b/src/App.vue
index 23c43a10..fff870f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,3 +12,24 @@ export default {
   name: 'App',
 };
 </script>
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  height: auto;
+  min-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* Vuetify root fix */
+.v-application {
+  min-height: 100vh !important;
+}
+
+.v-main {
+  min-height: 100vh;
+  overflow-y: auto;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 910184c9..50619057 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,25 +2,16 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import vuetify from './plugins/vuetify';
+import vuetify from './plugins/vuetify'
 import './services/axios'
+<<<<<<< HEAD
 import firebase from 'firebase/app'
 import 'firebase/firestore'
+=======
 
-Vue.config.productionTip = false
-
-const firebaseConfig = {
-  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
-  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
-  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
-  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
-  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
-  appId: process.env.VUE_APP_FIREBASE_APP_ID,
-  measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID,
-};
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 
-// Initialize Firebase
-firebase.initializeApp(firebaseConfig);
+Vue.config.productionTip = false
 
 new Vue({
   router,
diff --git a/src/store/calibration.js b/src/store/calibration.js
index beb8026a..c64b3663 100644
--- a/src/store/calibration.js
+++ b/src/store/calibration.js
@@ -1,7 +1,13 @@
+<<<<<<< HEAD
 import axios from 'axios';
 import firebase from 'firebase/app';
 import 'firebase/firestore';
 import router from '@/router';
+=======
+import axios from "axios";
+import firebase from "@/firebase";
+import router from "@/router";
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 export default {
   state: {
     calibName: "",
@@ -180,20 +186,18 @@ export default {
 
       return positions;
     },
-    async saveCalib(context) {
-      const state = context.state;
-      const db = firebase.firestore();
-      const calibrationData = { ...state };
-      delete calibrationData.calibrations;
-      try {
-        const calibrationsCollection = db.collection("calibrations");
-        await calibrationsCollection.add(calibrationData);
-        console.log("Data successfully saved to calibrations collection!");
-        context.dispatch("getAllCalibs");
-      } catch (error) {
-        console.error("Error saving data to calibrations collection:", error);
-      }
-    },
+ async saveCalib({ state, dispatch }) {
+  try {
+    const data = { ...state };
+    delete data.calibrations;
+
+    await firebase.firestore().collection("calibrations").add(data);
+    dispatch("getAllCalibs");
+  } catch (e) {
+    console.error("Save failed:", e);
+  }
+  },
+
     async finishCalibration({ state, dispatch }) {
       console.log("[Calibration] finishCalibration started");
 
@@ -250,48 +254,63 @@ export default {
       commit("setMsPerCapture", calibData.msPerCapture);
       router.push("/postCalibration");
     },
-    async getAllCalibs({ commit }) {
-      try {
-        const db = firebase.firestore();
-        const calibrationsCollection = await db
-          .collection("calibrations")
-          .get();
+  async getAllCalibs({ commit }) {
+  try {
+    const snapshot = await firebase
+      .firestore()
+      .collection("calibrations")
+      .get();
 
-        const calibrations = [];
-        calibrationsCollection.forEach((doc) => {
-          var averageAccuracy = 0;
-          var averagePrecision = 0;
-          var data = doc.data();
-          data.pattern.forEach((element) => {
-            averageAccuracy += Number(element.accuracy);
-            averagePrecision += Number(element.precision);
-          });
-          data.averageAccuracy = averageAccuracy / data.pattern.length;
-          data.averagePrecision = averagePrecision / data.pattern.length;
-          calibrations.push({
-            id: doc.id,
-            model: doc.data().models,
-            ...data,
-          });
-        });
+    const calibrations = [];
 
-        commit("setCalibrations", calibrations);
-      } catch (error) {
-        console.error("Error getting calibrations:", error);
-        throw error;
-      }
-    },
-    async deleteCalib({ dispatch }, calib) {
-      try {
-        const db = firebase.firestore();
-        const calibrationsCollection = db.collection("calibrations");
-        await calibrationsCollection.doc(calib.id).delete();
-        dispatch("getAllCalibs");
-      } catch (error) {
-        console.error("Error deleting calibration:", error);
-        return { success: false, message: "Failed to delete calibration" };
+    snapshot.forEach((doc) => {
+      const data = doc.data();
+
+      let averageAccuracy = 0;
+      let averagePrecision = 0;
+
+      if (data.runtime?.usedPattern?.length) {
+        const total = data.runtime.usedPattern.length;
+
+        averageAccuracy =
+          data.runtime.usedPattern.reduce(
+            (sum, p) => sum + Number(p.accuracy || 0),
+            0
+          ) / total;
+
+        averagePrecision =
+          data.runtime.usedPattern.reduce(
+            (sum, p) => sum + Number(p.precision || 0),
+            0
+          ) / total;
       }
-    },
+
+      calibrations.push({
+        id: doc.id,
+        ...data,
+        averageAccuracy: Number(averageAccuracy.toFixed(2)),
+        averagePrecision: Number(averagePrecision.toFixed(2)),
+      });
+    });
+
+    commit("setCalibrations", calibrations);
+  } catch (err) {
+    console.error("Error getting calibrations:", err);
+  }
+  },
+  async deleteCalib({ dispatch }, calib) {
+  try {
+    await firebase
+      .firestore()
+      .collection("calibrations")
+      .doc(calib.id)
+      .delete();
+
+    dispatch("getAllCalibs");
+  } catch (e) {
+    console.error("Delete failed:", e);
+  }
+  },
     async sendData(context, data) {
       let formData = new FormData();
 
diff --git a/src/views/CameraConfiguration.vue b/src/views/CameraConfiguration.vue
index bd395dbe..ff9abd9a 100644
--- a/src/views/CameraConfiguration.vue
+++ b/src/views/CameraConfiguration.vue
@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
   <div id="box">
     <Toolbar v-if="!fromRuxailab" />
 
@@ -157,6 +158,28 @@
                     <div class="d-flex justify-center mb-2">
                       <v-btn
                         x-small
+=======
+    <div id="box" style="min-height: 100vh; overflow-y: auto;">
+        <Toolbar v-if="!fromRuxailab" />
+        
+        <!-- Camera Selection Modal -->
+        <v-dialog v-model="showCameraModal" max-width="500">
+            <v-card class="blue-bg">
+                <v-card-title class="d-flex justify-center white--text pb-4 pt-6">
+                    <v-icon color="white" left size="32">mdi-camera</v-icon>
+                    <span style="font-size: 20px;">Select Camera</span>
+                </v-card-title>
+                <v-card-text class="px-6 pb-2">
+                    <p class="white--text text-center mb-4" style="font-size: 14px;">
+                        If you don't see your face correctly, please select the correct camera from the list below.
+                    </p>
+                    <v-select 
+                        v-model="selectedMediaDevice" 
+                        :items="mediaDevices" 
+                        item-text="label"
+                        item-value="deviceId" 
+                        label="Available Cameras" 
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
                         outlined
                         color="#002D51"
                         @click="showCameraModal = true"
@@ -198,6 +221,7 @@
                       <v-icon left>mdi-arrow-left</v-icon>
                       Back
                     </v-btn>
+<<<<<<< HEAD
                     <v-btn
                       color="#FF425A"
                       dark
@@ -216,6 +240,110 @@
       </v-row>
     </v-container>
   </div>
+=======
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+
+        <v-container fluid>
+            <v-row justify="center" align="center">
+                <v-col cols="12" md="10" lg="8" xl="6">
+                    <v-stepper v-model="setupStep" elevation="0" class="mx-auto compact-stepper">
+                        <v-stepper-header>
+                            <v-stepper-step :complete="setupStep > 1" step="1" color="#FF425A">
+                                Camera Setup
+                            </v-stepper-step>
+                            <v-divider></v-divider>
+                            <v-stepper-step :complete="setupStep > 2" step="2" color="#FF425A">
+                                Preview & Calibration
+                            </v-stepper-step>
+                        </v-stepper-header>
+
+                        <v-stepper-items>
+                            <!-- Step 1: Instructions -->
+                            <v-stepper-content step="1" class="compact-content">
+                            <v-card flat>
+                                <v-card-text class="text-center py-2">
+                                    <div class="mb-2">
+                                        <v-icon size="64" color="#FF425A">mdi-camera-iris</v-icon>
+                                    </div>
+                                    <v-alert color="#fff"  dense class="mb-3">
+                                        <h4 class="mb-2 text-center">What will happen:</h4>
+                                        <div class="text-left mx-auto" style="max-width: 400px; font-size: 16px;">
+                                            <ul class="compact-list">
+                                                <li>The system will request camera permission</li>
+                                                <li>Your webcam image will appear with a face guide</li>
+                                                <li>Position your face inside the mask overlay</li>
+                                                <li>Make sure both eyes are clearly visible</li>
+                                            </ul>
+                                        </div>
+                                    </v-alert>
+                                    <v-alert outlined color="#FF425A" dense class="mx-auto" style="max-width: 400px; font-size: 14px;">
+                                        <strong>Important:</strong> Please allow camera access when prompted.
+                                    </v-alert>
+                                </v-card-text>
+                            </v-card>
+                            <div class="text-center pb-2">
+                                <v-btn color="#FF425A" dark @click="startCameraSetup">
+                                    <v-icon left>mdi-arrow-right</v-icon>
+                                    Continue
+                                </v-btn>
+                            </div>
+                        </v-stepper-content>
+
+                        <!-- Step 2: Camera Preview -->
+                        <v-stepper-content step="2" class="compact-content">
+                            <v-card flat>
+                                <!-- Blink Threshold Configuration -->
+                                <v-card-text v-if="!fromRuxailab" class="pb-1 pt-2 text-center">
+                                    <BlinkTresholdCard />
+                                </v-card-text>
+
+                                <!-- Camera Preview -->
+                                <v-card-text class="pa-2 text-center">
+                                    <div class="d-flex justify-center mb-2">
+                                        <v-btn x-small outlined color="#002D51" @click="showCameraModal = true">
+                                            <v-icon left x-small>mdi-help-circle</v-icon>
+                                            Camera Help
+                                        </v-btn>
+                                    </div>
+                                    <div v-if="isModelLoaded" class="camera-wrapper mx-auto">
+                                        <!-- Simple video test -->
+                                        <video 
+                                            id="video-tag" 
+                                            autoplay 
+                                            playsinline 
+                                            style="width: 100%; height: auto; transform: scaleX(-1); display: block;"
+                                        />
+                                        <canvas id="canvas" />
+                                        <v-img v-if="isCameraOn" class="mask" src="@/assets/mask_desktop.svg" />
+                                    </div>
+                                    <div v-else class="loading-container" style="min-height: 300px;">
+                                        <v-progress-circular :size="50" :width="6" color="#FF425A"
+                                            indeterminate></v-progress-circular>
+                                        <h4 class="mt-3">Loading face detection model...</h4>
+                                    </div>
+                                </v-card-text>
+
+                                <v-card-actions class="justify-center py-2">
+                                    <v-btn text @click="setupStep = 1" class="mr-2">
+                                        <v-icon left>mdi-arrow-left</v-icon>
+                                        Back
+                                    </v-btn>
+                                    <v-btn color="#FF425A" dark :disabled="!isCameraOn" @click="goToCalibRecord()">
+                                        <v-icon left>mdi-play</v-icon>
+                                        Start Calibration
+                                    </v-btn>
+                                </v-card-actions>
+                            </v-card>
+                        </v-stepper-content>
+                        </v-stepper-items>
+                    </v-stepper>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 </template>
 
 <script>
@@ -374,11 +502,223 @@ export default {
               canvas.width = this.video.videoWidth || 500;
               canvas.height = this.video.videoHeight || 400;
 
+<<<<<<< HEAD
               this.isCameraOn = true;
               this.detectFace();
             };
           });
       });
+=======
+                // Set default selected media device if not set
+                if (!this.selectedMediaDevice && videoDevices.length > 0) {
+                    this.selectedMediaDevice = videoDevices[0].deviceId;
+                }
+
+                navigator.mediaDevices
+                    .getUserMedia({
+                        audio: false,
+                        video: {
+                            deviceId: this.selectedMediaDevice
+                        },
+                    })
+                    .then((stream) => {
+                        // stream is a MediaStream object
+                        this.video.srcObject = stream;
+
+                        this.webcamStream = stream;
+
+                        tf.getBackend();
+
+                        this.video.onloadeddata = () => {
+                            const canvas = document.getElementById("canvas");
+                            
+                            // Debug: Log video dimensions
+                            console.log('Video loaded:', {
+                                videoWidth: this.video.videoWidth,
+                                videoHeight: this.video.videoHeight,
+                                clientWidth: this.video.clientWidth,
+                                clientHeight: this.video.clientHeight
+                            });
+                            
+                            // Set canvas size to match video dimensions
+                            canvas.width = this.video.videoWidth || 640;
+                            canvas.height = this.video.videoHeight || 480;
+
+                            this.isCameraOn = true;
+                            this.detectFace();
+                        };
+                    });
+            });
+        },
+        async restartCameraWithDevice(deviceId) {
+            if (this.webcamStream) {
+                this.webcamStream.getTracks().forEach(track => track.stop());
+            }
+
+            const constraints = {
+                video: {
+                    deviceId: deviceId
+                },
+                audio: false
+            };
+
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia(constraints);
+                this.video.srcObject = stream;
+                this.webcamStream = stream;
+
+                this.video.onloadeddata = () => {
+                    this.isCameraOn = true;
+                    this.detectFace();
+                };
+            } catch (err) {
+                console.error("Erro ao acessar dispositivo de vídeo:", err);
+            }
+        },
+        async detectFace() {
+            let canvas = document.getElementById("canvas");
+            let ctx = canvas.getContext("2d");
+            let prediction = await this.model.estimateFaces({
+                input: this.video,
+            })
+            this.$store.commit('setPredictions', prediction)
+            
+            // Debug: Log canvas and video dimensions
+            console.log('DetectFace - Dimensions:', {
+                canvasWidth: canvas.width,
+                canvasHeight: canvas.height,
+                videoWidth: this.video.videoWidth,
+                videoHeight: this.video.videoHeight
+            });
+            
+            // Set canvas size to match video dimensions
+            canvas.width = this.video.videoWidth || 640;
+            canvas.height = this.video.videoHeight || 480;
+            
+            // Clear the canvas to make it transparent
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            const th = this
+
+            this.predictions.forEach((pred) => {
+                // left eye
+                const leftIris = pred.annotations.leftEyeIris;
+                const leftEyelid = pred.annotations.leftEyeUpper0.concat(pred.annotations.leftEyeLower0);
+                const leftEyelidTip = leftEyelid[3]
+                const leftEyelidBottom = leftEyelid[11]
+                const isLeftBlink = this.calculateDistance(leftEyelidTip, leftEyelidBottom) < th.leftEyeTreshold
+                th.blinkFilter ? this.drawEye(leftIris, leftEyelid, ctx, isLeftBlink) : this.drawEye(leftIris, leftEyelid, ctx, false)
+
+                // right eye
+                const rightIris = pred.annotations.rightEyeIris;
+                const rightEyelid = pred.annotations.rightEyeUpper0.concat(pred.annotations.rightEyeLower0);
+                const rightEyelidTip = rightEyelid[3]
+                const rightEyelidBottom = rightEyelid[11]
+                const isRightBlink = this.calculateDistance(rightEyelidTip, rightEyelidBottom) < th.rightEyeTreshold
+                th.blinkFilter ? this.drawEye(rightIris, rightEyelid, ctx, isRightBlink) : this.drawEye(rightIris, rightEyelid, ctx, false)
+
+                // face contour
+                this.drawFace(ctx, pred)
+            });
+        },
+        calculateDistance(eyelidTip, eyelidBottom) {
+            const xDistance = eyelidBottom[0] - eyelidTip[0];
+            const yDistance = eyelidBottom[1] - eyelidTip[1];
+            const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
+            return distance;
+        },
+        drawEye(iris, eyelid, ctx, isBlink) {
+            if (isBlink) {
+                ctx.fillStyle = 'red'
+                for (let i = 0; i < eyelid.length; i++) {
+                    ctx.fillRect(eyelid[i][0], eyelid[i][1], 3, 3);
+                }
+            } else {
+                ctx.fillStyle = 'yellow'
+                for (let i = 0; i < eyelid.length; i++) {
+                    ctx.fillRect(eyelid[i][0], eyelid[i][1], 3, 3);
+                }
+                ctx.fillStyle = 'blue'
+                ctx.fillRect(eyelid[3][0], eyelid[3][1], 3, 3);
+                ctx.fillRect(eyelid[11][0], eyelid[11][1], 3, 3);
+                ctx.fillStyle = 'red'
+                ctx.fillRect(
+                    iris[0][0],
+                    iris[0][1],
+                    3,
+                    3
+                );
+            }
+
+        },
+        drawFace(ctx, pred) {
+            ctx.beginPath();
+            ctx.lineWidth = "4";
+            ctx.strokeStyle = "blue";
+            ctx.rect(
+                pred.boundingBox.topLeft[0],
+                pred.boundingBox.topLeft[1],
+                pred.boundingBox.bottomRight[0] - pred.boundingBox.topLeft[0],
+                pred.boundingBox.bottomRight[1] - pred.boundingBox.topLeft[1]
+            );
+            ctx.stroke();
+        },
+        fullScreen() {
+            var element = document.documentElement;
+            if (element.requestFullscreen) {
+                if (!document.fullscreenElement) {
+                    element.requestFullscreen().catch((err) => {
+                        console.error("Erro ao entrar em tela cheia:", err);
+                    });
+                } else {
+                    document.exitFullscreen();
+                }
+            } else if (element.mozRequestFullScreen) {
+                // Para o Firefox
+                if (!document.mozFullScreenElement) {
+                    element.mozRequestFullScreen().catch((err) => {
+                        console.error("Erro ao entrar em tela cheia:", err);
+                    });
+                } else {
+                    document.mozCancelFullScreen();
+                }
+            } else if (element.webkitRequestFullscreen) {
+                // Para o Chrome, Safari e Opera
+                if (!document.webkitFullscreenElement) {
+                    element.webkitRequestFullscreen().catch((err) => {
+                        console.error("Erro ao entrar em tela cheia:", err);
+                    });
+                } else {
+                    document.webkitExitFullscreen();
+                }
+            } else if (element.msRequestFullscreen) {
+                // Para o Internet Explorer e Microsoft Edge
+                if (!document.msFullscreenElement) {
+                    element.msRequestFullscreen().catch((err) => {
+                        console.error("Erro ao entrar em tela cheia:", err);
+                    });
+                } else {
+                    document.msExitFullscreen();
+                }
+            }
+        },
+        goToCalibRecord() {
+            this.webcamStream.getTracks().forEach((track) => {
+                track.stop();
+            });
+            const urlParams = new URLSearchParams(window.location.search);
+            if (this.fromRuxailab) this.$router.push(`/calibration/record?auth=${this.calibName}&test=${urlParams.get('test')}`);
+            else this.$router.push("/calibration/record");
+        },
+        verifyFromRuxailab() {
+            const urlParams = new URLSearchParams(window.location.search);
+            if (urlParams.has('auth') && urlParams.has('test')) {
+                const auth = urlParams.get('auth');
+                this.$store.commit('setCalibName', auth);
+                this.fromRuxailab = true
+            }
+        },
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
     },
     async restartCameraWithDevice(deviceId) {
       if (this.webcamStream) {
@@ -536,7 +876,12 @@ export default {
 
 /* Compact Stepper Styles */
 .compact-stepper {
+<<<<<<< HEAD
   margin-bottom: 24px;
+=======
+    /* Allow content to expand; page scrolls if needed */
+    max-height: none;
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 }
 
 .compact-content {
@@ -560,8 +905,19 @@ export default {
 }
 
 .compact-stepper {
+<<<<<<< HEAD
   border-radius: 12px !important;
   overflow: hidden !important;
+=======
+    border-radius: 12px !important;
+    /* Do not clip content (prevents scrolling) */
+    overflow: visible !important;
+}
+
+/* Ensure stepper content isn't clipped */
+.v-stepper__content {
+    overflow: visible !important;
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 }
 
 .compact-stepper .v-stepper__step__step {
@@ -605,6 +961,7 @@ export default {
 }
 
 .camera-wrapper {
+<<<<<<< HEAD
   position: relative;
   width: 100%;
   max-width: 500px;
@@ -632,6 +989,47 @@ export default {
 
 #canvas {
   transform: scaleX(-1);
+=======
+    position: relative;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    border: 5px solid #FF425A;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #000;
+}
+
+#video-tag {
+    width: 100%;
+    height: auto;
+    transform: scaleX(-1);
+    z-index: 1;
+    display: block;
+    max-height: none; /* Remove any height constraints */
+}
+
+#canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: scaleX(-1);
+    z-index: 2;
+    background: transparent;
+    pointer-events: none;
+}
+
+.mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 3;
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 }
 
 .mask {
diff --git a/src/views/DoubleCalibrationRecord.vue b/src/views/DoubleCalibrationRecord.vue
index c665dcbe..39b9281d 100644
--- a/src/views/DoubleCalibrationRecord.vue
+++ b/src/views/DoubleCalibrationRecord.vue
@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
   <div style="height: 100%;">
     <!-- Fullscreen required during calibration -->
     <v-dialog v-model="fullscreenRequiredDialog" max-width="520" persistent>
@@ -37,6 +38,9 @@
       </v-card>
     </v-dialog>
 
+=======
+  <div class="page-root">
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
     <div v-if="!model" class="center-container">
       <v-progress-circular :size="80" :width="8" indeterminate color="black" class="loading-spinner"
         style="margin-bottom: 16px;"></v-progress-circular>
@@ -250,9 +254,18 @@
         </v-stepper>
       </v-card>
     </v-dialog>
+    <video
+     id="video-preview"
+     autoplay
+     playsinline
+     muted
+     :style="videoPreviewStyle"
+     ></video>
+
     <canvas id="canvas" style="z-index: 0;" />
     <video autoplay id="video-tag" style="display: none;"></video>
   </div>
+  
 </template>
 
 <script>
@@ -264,11 +277,17 @@ export default {
   data() {
     return {
       // camera
+      keydownHandlerRef: null,
       webcamfile: null,
       recordWebCam: null,
       configWebCam: {
         audio: false,
-        video: true
+        video: {
+          width: { ideal: 1280, min: 640 },
+          height: { ideal: 720, min: 480 },
+          aspectRatio: { ideal: 16/9 },
+          facingMode: 'user'
+        }
       },
 
       // calibration
@@ -288,13 +307,39 @@ export default {
       showStepper: true,
       calibrationStarted: false,
       loadingConfig: false,
+<<<<<<< HEAD
 
       fullscreenRequiredDialog: false,
       navigationBlockedDialog: false,
       finishingCalibration: false,
+=======
+      isFullscreen: false,
+      beforeUnloadHandlerRef: null,
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
     };
   },
   computed: {
+    videoPreviewStyle() {
+      if (this.calibrationStarted && !this.showStepper) {
+        // During calibration - hide the preview
+        return {
+          display: 'none'
+        };
+      } else {
+        // Normal preview mode - ensure proper aspect ratio and sizing
+        return {
+          width: '100%',
+          height: 'auto',
+          maxWidth: '600px',
+          maxHeight: '400px',
+          objectFit: 'contain', // Changed from 'cover' to 'contain' to show full video
+          borderRadius: '12px',
+          marginBottom: '16px',
+          display: 'block',
+          margin: '0 auto 16px auto' // Center the video
+        };
+      }
+    },
     radius() {
       return this.$store.state.calibration.radius
     },
@@ -336,6 +381,7 @@ export default {
     },
   },
   async created() {
+<<<<<<< HEAD
     console.log("rodou created");
     await this.verifyFromRuxailab()
     this.$store.commit('setIndex', 0)
@@ -358,8 +404,30 @@ export default {
     this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
     this.advance(this.usedPattern, this.circleIrisPoints, this.msPerCapture)
     console.log("UsedPattern inteiro", this.usedPattern);
+=======
+    try {
+      await this.verifyFromRuxailab()
+      this.$store.commit('setIndex', 0)
+      this.usedPattern = this.generateRuntimePattern()
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 
+      await this.startWebCamCapture();
+      
+      // Wait for model to be loaded before drawing
+      if (!this.model) {
+        console.warn('Model not loaded yet, waiting...');
+        // You might want to add a watcher for model loading
+        return;
+      }
+      
+      console.log("chamou drawPoint no created com os valores:", this.usedPattern[0].x, this.usedPattern[0].y);
+      this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
+      this.advance(this.usedPattern, this.circleIrisPoints, this.msPerCapture)
+    } catch (error) {
+      console.error('Error during component initialization:', error);
+    }
   },
+<<<<<<< HEAD
   mounted() {
     document.addEventListener("fullscreenchange", this.onFullscreenChange);
     document.addEventListener("webkitfullscreenchange", this.onFullscreenChange);
@@ -552,14 +620,164 @@ export default {
         this.fullscreenRequiredDialog = true;
         return;
       }
+=======
+
+  mounted() {
+    // Handle window resize events
+    window.addEventListener('resize', this.handleResize);
+    // Track fullscreen changes so we can react if the user exits fullscreen mid-calibration
+    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
+    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
+  },
+
+  beforeDestroy() {
+    // Clean up event listeners
+    window.removeEventListener('resize', this.handleResize);
+    if (this.keydownHandlerRef) {
+      document.removeEventListener('keydown', this.keydownHandlerRef);
+    }
+    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
+    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
+    if (this.beforeUnloadHandlerRef) {
+      window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
+    }
+  },
+
+  beforeRouteLeave(to, from, next) {
+  this.exitFullscreen();
+  if (this.keydownHandlerRef) {
+    document.removeEventListener('keydown', this.keydownHandlerRef);
+  }
+  next();
+  },
+
+  methods: {
+    handleFullscreenChange() {
+      const isNowFullscreen =
+        !!document.fullscreenElement ||
+        !!document.webkitFullscreenElement ||
+        !!document.mozFullScreenElement ||
+        !!document.msFullscreenElement;
+
+      this.isFullscreen = isNowFullscreen;
+
+      // If user exits fullscreen in the middle of calibration, pause and return to instructions
+      if (!isNowFullscreen && this.calibrationStarted && !this.showStepper) {
+        this.calibrationStarted = false;
+        this.showStepper = true;
+        // Keep the current stepper step (training or validation) so user can resume explicitly
+        this.exitFullscreen();
+        // Optional lightweight notice – avoid blocking alerts during calibration
+        // eslint-disable-next-line no-console
+        console.warn('Calibration left fullscreen; showing instructions again.');
+      }
+    },
+
+    handleResize() {
+      // Regenerate pattern for new screen size if needed
+      if (this.calibrationStarted) {
+        const canvas = document.getElementById('canvas');
+        if (canvas) {
+          canvas.width = window.innerWidth;
+          canvas.height = window.innerHeight;
+        }
+      }
+    },
+    
+    // Note: Fullscreen may be blocked on some mobile browsers (iOS Safari).
+    // Failure is safely ignored.
+    enterFullscreen() {
+      const canvas = document.getElementById('canvas');
+      const el = canvas || document.documentElement;
+
+      // Guard: fullscreen not supported
+      const requestFullscreen =
+        el.requestFullscreen ||
+        el.webkitRequestFullscreen ||
+        el.mozRequestFullScreen ||
+        el.msRequestFullscreen;
+
+      if (!requestFullscreen) {
+        // eslint-disable-next-line no-console
+        console.warn('Fullscreen API not supported in this browser');
+        return;
+      }
+
+      if (
+        !document.fullscreenElement &&
+        !document.webkitFullscreenElement &&
+        !document.mozFullScreenElement &&
+        !document.msFullscreenElement
+      ) {
+        try {
+          requestFullscreen.call(el);
+          // While in fullscreen, capture pointer events on the canvas to avoid clicking underlying UI
+          if (canvas) {
+            canvas.style.pointerEvents = 'auto';
+          }
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.warn('Fullscreen request failed:', err);
+        }
+      }
+    },
+
+    exitFullscreen() {
+      const exitFullscreenFn =
+        document.exitFullscreen ||
+        document.webkitExitFullscreen ||
+        document.mozCancelFullScreen ||
+        document.msExitFullscreen;
+
+      const canvas = document.getElementById('canvas');
+      if (canvas) {
+        canvas.style.pointerEvents = 'none';
+      }
+
+      if (
+        (document.fullscreenElement ||
+          document.webkitFullscreenElement ||
+          document.mozFullScreenElement ||
+          document.msFullscreenElement) &&
+        exitFullscreenFn
+      ) {
+        try {
+          exitFullscreenFn.call(document);
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.warn('Exit fullscreen failed:', err);
+        }
+      }
+    },
+
+    startTraining() {
+      this.enterFullscreen();
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       this.showStepper = false;
       this.calibrationStarted = true;
+      // Warn user if they try to refresh/close tab mid-calibration
+      if (!this.beforeUnloadHandlerRef) {
+        this.beforeUnloadHandlerRef = (e) => {
+          if (!this.calibrationStarted) return;
+          e.preventDefault();
+          e.returnValue = '';
+        };
+        window.addEventListener('beforeunload', this.beforeUnloadHandlerRef);
+      }
     },
     startValidation() {
+<<<<<<< HEAD
       if (!this.isFullscreen()) {
         this.fullscreenRequiredDialog = true;
         return;
       }
+=======
+      this.enterFullscreen();
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       this.showStepper = false;
       this.calibrationStarted = true;
     },
@@ -619,9 +837,11 @@ export default {
           }
         }
       }
-      document.addEventListener('keydown', keydownHandler)
+      this.keydownHandlerRef = keydownHandler;
+      document.addEventListener('keydown', keydownHandler);
     },
     nextStep() {
+      this.exitFullscreen();
       this.usedPattern.forEach(element => {
         delete element.data;
       });
@@ -630,6 +850,11 @@ export default {
       this.stepperStep = 3;
       this.showStepper = true;
       this.calibrationStarted = false;
+      // Allow tab close/refresh again when calibration is paused
+      if (this.beforeUnloadHandlerRef) {
+        window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
+        this.beforeUnloadHandlerRef = null;
+      }
 
       console.log("nextStep rodou drawPoint com os valores:", this.usedPattern[0].x, this.usedPattern[0].y);
 
@@ -716,15 +941,25 @@ export default {
     },
     drawPoint(x, y, radius) {
       const canvas = document.getElementById('canvas');
+      if (!canvas) {
+        console.error('Canvas element not found');
+        return;
+      }
 
-      console.log('Window size:', window.innerWidth, 'x', window.innerHeight);
-
+      // Set canvas size to current window/screen size
       canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight
+      canvas.height = window.innerHeight;
+      
       const ctx = canvas.getContext('2d');
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      if (!ctx) {
+        console.error('Canvas context not available');
+        return;
+      }
+      
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.fillStyle = this.backgroundColor;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
+      
       //circle 
       ctx.beginPath();
       ctx.strokeStyle = this.pointColor;
@@ -739,6 +974,7 @@ export default {
       );
       ctx.stroke();
       ctx.fill();
+      
       // inner circle
       ctx.beginPath();
       ctx.strokeStyle = "red";
@@ -753,6 +989,7 @@ export default {
       );
       ctx.stroke();
       ctx.fill();
+      
       // hollow circumference
       ctx.strokeStyle = this.pointColor;
       ctx.lineWidth = 1;
@@ -761,10 +998,14 @@ export default {
       ctx.stroke();
     },
     async endCalib() {
+<<<<<<< HEAD
       if (this.finishingCalibration) return;
       this.finishingCalibration = true;
       this.calibrationStarted = false;
 
+=======
+      this.exitFullscreen();
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       this.calibPredictionPoints.forEach(element => {
         delete element.point_x;
         delete element.point_y;
@@ -818,6 +1059,11 @@ export default {
       this.$router.push(
         `/postCalibration?redirectingToRuxailab=${this.fromRuxailab}`
       )
+      // Calibration is fully finished; remove beforeunload guard
+      if (this.beforeUnloadHandlerRef) {
+        window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
+        this.beforeUnloadHandlerRef = null;
+      }
     },
     savePoint(whereToSave, patternLike) {
       patternLike.forEach(point => {
@@ -837,14 +1083,20 @@ export default {
     // canvas related
     async startWebCamCapture() {
       // Request permission for screen capture
-
-      return navigator.mediaDevices
-        .getUserMedia(this.configWebCam)
-        .then(async (mediaStreamObj) => {
-          // Create media recorder object
-          this.recordWebCam = new MediaRecorder(mediaStreamObj, {
-            mimeType: "video/webm;",
+      try {
+        let mediaStreamObj;
+        
+        try {
+          // Try with ideal constraints first
+          mediaStreamObj = await navigator.mediaDevices.getUserMedia(this.configWebCam);
+        } catch (error) {
+          console.warn('Failed with ideal constraints, trying basic video:', error);
+          // Fallback to basic video if constraints fail
+          mediaStreamObj = await navigator.mediaDevices.getUserMedia({
+            audio: false,
+            video: true
           });
+<<<<<<< HEAD
 
           let recordingWebCam = [];
           let video = document.getElementById("video-tag");
@@ -882,7 +1134,65 @@ export default {
         })
         .catch((e) => {
           console.error("Error", e);
+=======
+        }
+        
+        // Create media recorder object
+        this.recordWebCam = new MediaRecorder(mediaStreamObj, {
+          mimeType: "video/webm;",
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
         });
+
+        let recordingWebCam = [];
+        const video = document.getElementById("video-tag");      // ML
+        const preview = document.getElementById("video-preview"); // UI
+
+        if (!video || !preview) {
+          console.error('Video elements not found');
+          return;
+        }
+
+        video.srcObject = mediaStreamObj;
+        preview.srcObject = mediaStreamObj;
+        
+        // Define screen capture events
+        // Save frames to recordingWebCam array
+        this.recordWebCam.ondataavailable = (ev) => {
+          recordingWebCam.push(ev.data);
+        };
+        
+        // OnStop WebCam Record
+        const th = this;
+
+        this.recordWebCam.onstop = () => {
+          // Generate blob from the frames
+          let blob = new Blob(recordingWebCam, { type: "video/webm" });
+          recordingWebCam = [];
+          const uploadMediaWebCam = { blob: blob, name: mediaStreamObj.id };
+          th.webcamfile = uploadMediaWebCam;
+          // End webcam capture
+          mediaStreamObj.getTracks().forEach((track) => track.stop());
+          th.stopRecord();
+        };
+
+        // Init record webcam
+        this.recordWebCam.start();
+        
+        // Wait for video to load before detecting face
+        return new Promise((resolve) => {
+          video.onloadeddata = () => {
+            console.log('Video loaded with dimensions:', video.videoWidth, 'x', video.videoHeight);
+            this.detectFace();
+            resolve();
+          };
+        });
+        
+      } catch (e) {
+        console.error("Error accessing webcam:", e);
+        // Handle webcam access denied or not available
+        alert("Camera access is required for eye tracking. Please allow camera permissions and refresh the page.");
+        throw e;
+      }
     },
 
     async verifyFromRuxailab() {
@@ -973,12 +1283,27 @@ export default {
 </script>
 
 <style scoped>
+<<<<<<< HEAD
+=======
+
+>>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 #canvas {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+  z-index: 1000;
+  background-color: transparent;
+}
+
+/* When in fullscreen, ensure canvas covers entire screen */
+:fullscreen #canvas,
+:-webkit-full-screen #canvas,
+:-moz-full-screen #canvas {
+  width: 100% !important;
+  height: 100% !important;
 }
 
 .center-container {
@@ -1248,6 +1573,22 @@ kbd {
 .calibration-stepper .v-divider {
   border-color: rgba(255, 255, 255, 0.3) !important;
 }
+.page-root {
+  min-height: 100vh;
+  overflow-y: auto;
+  position: relative;
+  z-index: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Video preview container */
+#video-preview {
+  max-width: 90vw; /* Ensure it doesn't exceed viewport width */
+  max-height: 60vh; /* Limit height to 60% of viewport */
+}
 </style>
 
 <style>
diff --git a/vue.config.js b/vue.config.js
index 2ae460b7..f34a2e45 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,10 @@
 module.exports = {
-  transpileDependencies: [
-    'vuetify'
-  ]
-}
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:5000',
+        changeOrigin: true,
+      },
+    },
+  },
+};

From 7820163c4e89e3015684dd0a37ad59447cb928fe Mon Sep 17 00:00:00 2001
From: harsshks <the.hk.25102003@gmail.com>
Date: Thu, 5 Feb 2026 14:12:15 +0530
Subject: [PATCH 2/4] feat: implement single-point calibration mode (#99)

- 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 #99
---
 src/store/calibration.js              | 33 +++++++++++
 src/views/CameraConfiguration.vue     | 81 +++++++++++++++++++++++++++
 src/views/DoubleCalibrationRecord.vue | 52 ++++++++++++++---
 3 files changed, 158 insertions(+), 8 deletions(-)

diff --git a/src/store/calibration.js b/src/store/calibration.js
index c64b3663..c7504ae8 100644
--- a/src/store/calibration.js
+++ b/src/store/calibration.js
@@ -29,6 +29,9 @@ export default {
     threshold: 200,
     calibrations: [],
     fromDashboard: false,
+    // New single-point calibration features
+    calibrationMode: 'multi-point', // 'multi-point' | 'single-point'
+    singlePointPosition: null, // Will be calculated as screen center
     runtime: {
       circleIrisPoints: [],
       calibPredictionPoints: [],
@@ -125,6 +128,22 @@ export default {
     setFromDashboard(state, newFromDashboard) {
       state.fromDashboard = newFromDashboard;
     },
+    
+    // New single-point calibration mutations
+    setCalibrationMode(state, mode) {
+      state.calibrationMode = mode;
+      // If switching to single-point, set pointNumber to 1
+      if (mode === 'single-point') {
+        state.pointNumber = 1;
+      } else {
+        state.pointNumber = 9; // Default multi-point
+      }
+    },
+    
+    setSinglePointPosition(state, position) {
+      state.singlePointPosition = position;
+    },
+    
     setRuntimeData(state, payload) {
       state.runtime.circleIrisPoints = payload.circleIrisPoints;
       state.runtime.calibPredictionPoints = payload.calibPredictionPoints;
@@ -161,6 +180,9 @@ export default {
       state.threshold = 200;
       state.calibrations = [];
       state.fromDashboard = false;
+      // Reset single-point calibration properties
+      state.calibrationMode = 'multi-point';
+      state.singlePointPosition = null;
     },
   },
   actions: {
@@ -186,6 +208,17 @@ export default {
 
       return positions;
     },
+
+    // Generate single-point calibration pattern (center of screen)
+    generateSinglePointPattern({ commit }, { width, height }) {
+      const centerPoint = {
+        x: width / 2,
+        y: height / 2,
+      };
+      
+      commit('setSinglePointPosition', centerPoint);
+      return [centerPoint];
+    },
  async saveCalib({ state, dispatch }) {
   try {
     const data = { ...state };
diff --git a/src/views/CameraConfiguration.vue b/src/views/CameraConfiguration.vue
index ff9abd9a..73c38c06 100644
--- a/src/views/CameraConfiguration.vue
+++ b/src/views/CameraConfiguration.vue
@@ -294,6 +294,48 @@
                         <!-- Step 2: Camera Preview -->
                         <v-stepper-content step="2" class="compact-content">
                             <v-card flat>
+                                <!-- Calibration Mode Selection -->
+                                <v-card-text v-if="!fromRuxailab" class="pb-2 pt-2">
+                                    <v-card outlined class="pa-3 mb-3">
+                                        <v-card-title class="text-h6 pa-2">
+                                            <v-icon left color="#FF425A">mdi-target</v-icon>
+                                            Calibration Mode
+                                        </v-card-title>
+                                        <v-card-text class="pa-2">
+                                            <v-radio-group v-model="calibrationMode" @change="updateCalibrationMode">
+                                                <v-radio 
+                                                    label="Multi-point (High Accuracy)" 
+                                                    value="multi-point"
+                                                    color="#FF425A"
+                                                >
+                                                    <template v-slot:label>
+                                                        <div>
+                                                            <strong>Multi-point (High Accuracy)</strong>
+                                                            <div class="text-caption text--secondary">
+                                                                9 points across screen - Best accuracy for precise tracking
+                                                            </div>
+                                                        </div>
+                                                    </template>
+                                                </v-radio>
+                                                <v-radio 
+                                                    label="Single-point (Quick Setup)" 
+                                                    value="single-point"
+                                                    color="#FF425A"
+                                                >
+                                                    <template v-slot:label>
+                                                        <div>
+                                                            <strong>Single-point (Quick Setup)</strong>
+                                                            <div class="text-caption text--secondary">
+                                                                Center point only - Faster setup, lower accuracy
+                                                            </div>
+                                                        </div>
+                                                    </template>
+                                                </v-radio>
+                                            </v-radio-group>
+                                        </v-card-text>
+                                    </v-card>
+                                </v-card-text>
+
                                 <!-- Blink Threshold Configuration -->
                                 <v-card-text v-if="!fromRuxailab" class="pb-1 pt-2 text-center">
                                     <BlinkTresholdCard />
@@ -377,8 +419,23 @@ export default {
     model() {
       return this.$store.state.detect.model;
     },
+<<<<<<< HEAD
     isModelLoaded() {
       return this.$store.state.detect.loaded;
+=======
+    data() {
+        return {
+            isCameraOn: false,
+            webcamStream: null,
+            video: null,
+            fromRuxailab: false,
+            mediaDevices: [],
+            selectedMediaDevice: null,
+            setupStep: 1,
+            showCameraModal: false,
+            calibrationMode: 'multi-point', // Default to multi-point
+        };
+>>>>>>> 5886ed7 (feat: implement single-point calibration mode (#99))
     },
     predictions() {
       return this.$store.state.detect.predictions;
@@ -487,10 +544,34 @@ export default {
               width: 600,
               height: 500,
             },
+<<<<<<< HEAD
           })
           .then((stream) => {
             // stream is a MediaStream object
             this.video.srcObject = stream;
+=======
+            deep: true,
+        },
+    },
+    mounted() {
+        this.verifyFromRuxailab()
+    },
+    methods: {
+        updateCalibrationMode(mode) {
+            this.$store.commit('setCalibrationMode', mode);
+        },
+        
+        startCameraSetup() {
+            this.setupStep = 2;
+            this.setupCamera();
+        },
+        async setupCamera() {
+            // Load the faceLandmarksDetection model assets.
+            const model = await faceLandmarksDetection.load(
+                faceLandmarksDetection.SupportedPackages.mediapipeFacemesh,
+                { maxFaces: 1 }
+            );
+>>>>>>> 5886ed7 (feat: implement single-point calibration mode (#99))
 
             this.webcamStream = stream;
 
diff --git a/src/views/DoubleCalibrationRecord.vue b/src/views/DoubleCalibrationRecord.vue
index 39b9281d..c33d2e10 100644
--- a/src/views/DoubleCalibrationRecord.vue
+++ b/src/views/DoubleCalibrationRecord.vue
@@ -91,16 +91,26 @@
               <v-card flat>
                 <v-card-text class="text-center px-6 py-6">
                   <v-icon size="50" color="#FF425A" class="mb-4">mdi-eye-settings</v-icon>
-                  <h2 class="text-h4 font-weight-bold mb-4">Eye Tracking Calibration</h2>
+                  <h2 class="text-h4 font-weight-bold mb-4">{{ calibrationTitle }}</h2>
 
                   <v-alert color="#002D51" dark class="mb-4 text-left">
                     <div class="text-body-1">
-                      <p class="font-weight-bold mb-2">This calibration consists of two phases:</p>
-                      <ol class="pl-4">
-                        <li class="mb-1"><strong>Training Phase:</strong> The system learns your eye movement patterns
-                        </li>
-                        <li><strong>Validation Phase:</strong> The system verifies the calibration accuracy</li>
-                      </ol>
+                      <p class="font-weight-bold mb-2">{{ calibrationDescription }}</p>
+                      <div v-if="isSinglePointMode">
+                        <p class="mb-1"><strong>Single-Point Mode:</strong></p>
+                        <ul class="pl-4">
+                          <li>Quick setup with center screen point only</li>
+                          <li>Lower accuracy but faster calibration</li>
+                          <li>Good for quick testing or demos</li>
+                        </ul>
+                      </div>
+                      <div v-else>
+                        <p class="font-weight-bold mb-2">This calibration consists of two phases:</p>
+                        <ol class="pl-4">
+                          <li class="mb-1"><strong>Training Phase:</strong> The system learns your eye movement patterns</li>
+                          <li><strong>Validation Phase:</strong> The system verifies the calibration accuracy</li>
+                        </ol>
+                      </div>
                     </div>
                   </v-alert>
 
@@ -155,6 +165,7 @@
 
                   <v-alert color="#FF425A" dark dense class="text-center">
                     <strong>Total points to calibrate:</strong> {{ usedPattern.length }}
+                    <span v-if="isSinglePointMode"> (Center point only)</span>
                   </v-alert>
                 </v-card-text>
                 <v-card-actions class="justify-space-between px-6 pb-6">
@@ -379,6 +390,22 @@ export default {
     isControlled() {
       return this.$store.state.calibration.isControlled
     },
+    
+    // New single-point calibration computed properties
+    calibrationMode() {
+      return this.$store.state.calibration.calibrationMode;
+    },
+    isSinglePointMode() {
+      return this.calibrationMode === 'single-point';
+    },
+    calibrationTitle() {
+      return this.isSinglePointMode ? 'Single-Point Calibration' : 'Multi-Point Calibration';
+    },
+    calibrationDescription() {
+      return this.isSinglePointMode 
+        ? 'Quick calibration using center point only. Lower accuracy but faster setup.'
+        : 'High accuracy calibration using multiple points across the screen.';
+    },
   },
   async created() {
 <<<<<<< HEAD
@@ -1249,6 +1276,16 @@ export default {
     generateRuntimePattern() {
       const width = window.innerWidth
       const height = window.innerHeight
+      
+      // Check if single-point mode is enabled
+      if (this.isSinglePointMode) {
+        return [{
+          x: width / 2,
+          y: height / 2
+        }];
+      }
+      
+      // Multi-point calibration (existing logic)
       const offset = this.offset || 100
       const points = this.$store.state.calibration.pointNumber || 9
 
@@ -1256,7 +1293,6 @@ export default {
       const cols = Math.max(minCols, Math.round(Math.sqrt(points)))
       const rows = Math.ceil(points / cols)
 
-
       const usableWidth = width - 2 * offset
       const usableHeight = height - 2 * offset
 

From 21a5fa7c7bba858ca8c65d2b624ecfe40f9bfe96 Mon Sep 17 00:00:00 2001
From: harsshks <the.hk.25102003@gmail.com>
Date: Fri, 6 Mar 2026 13:43:04 +0530
Subject: [PATCH 3/4] fix: resolve merge conflicts with main

---
 src/main.js                           |   1 +
 src/store/calibration.js              | 135 +++---
 src/views/CameraConfiguration.vue     | 643 ++++----------------------
 src/views/DoubleCalibrationRecord.vue | 356 +++++---------
 4 files changed, 267 insertions(+), 868 deletions(-)

diff --git a/src/main.js b/src/main.js
index b22b838e..90f89e68 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import { envConfig } from './config/environment'
 
 const firebaseConfig = envConfig.firebase;
 
+
 Vue.config.productionTip = false
 
 new Vue({
diff --git a/src/store/calibration.js b/src/store/calibration.js
index c7504ae8..3c74c1f7 100644
--- a/src/store/calibration.js
+++ b/src/store/calibration.js
@@ -1,13 +1,8 @@
-<<<<<<< HEAD
 import axios from 'axios';
 import firebase from 'firebase/app';
 import 'firebase/firestore';
 import router from '@/router';
-=======
-import axios from "axios";
-import firebase from "@/firebase";
-import router from "@/router";
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
+
 export default {
   state: {
     calibName: "",
@@ -128,7 +123,7 @@ export default {
     setFromDashboard(state, newFromDashboard) {
       state.fromDashboard = newFromDashboard;
     },
-    
+
     // New single-point calibration mutations
     setCalibrationMode(state, mode) {
       state.calibrationMode = mode;
@@ -139,11 +134,11 @@ export default {
         state.pointNumber = 9; // Default multi-point
       }
     },
-    
+
     setSinglePointPosition(state, position) {
       state.singlePointPosition = position;
     },
-    
+
     setRuntimeData(state, payload) {
       state.runtime.circleIrisPoints = payload.circleIrisPoints;
       state.runtime.calibPredictionPoints = payload.calibPredictionPoints;
@@ -215,21 +210,21 @@ export default {
         x: width / 2,
         y: height / 2,
       };
-      
+
       commit('setSinglePointPosition', centerPoint);
       return [centerPoint];
     },
- async saveCalib({ state, dispatch }) {
-  try {
-    const data = { ...state };
-    delete data.calibrations;
+    async saveCalib({ state, dispatch }) {
+      try {
+        const data = { ...state };
+        delete data.calibrations;
 
-    await firebase.firestore().collection("calibrations").add(data);
-    dispatch("getAllCalibs");
-  } catch (e) {
-    console.error("Save failed:", e);
-  }
-  },
+        await firebase.firestore().collection("calibrations").add(data);
+        dispatch("getAllCalibs");
+      } catch (e) {
+        console.error("Save failed:", e);
+      }
+    },
 
     async finishCalibration({ state, dispatch }) {
       console.log("[Calibration] finishCalibration started");
@@ -254,7 +249,7 @@ export default {
       state.runtime.usedPattern.forEach((p) => {
         const data =
           predictions[p.x.toString().split(".")[0]][
-            p.y.toString().split(".")[0]
+          p.y.toString().split(".")[0]
           ];
 
         p.precision = Number(data.PrecisionSD).toFixed(2);
@@ -287,63 +282,63 @@ export default {
       commit("setMsPerCapture", calibData.msPerCapture);
       router.push("/postCalibration");
     },
-  async getAllCalibs({ commit }) {
-  try {
-    const snapshot = await firebase
-      .firestore()
-      .collection("calibrations")
-      .get();
+    async getAllCalibs({ commit }) {
+      try {
+        const snapshot = await firebase
+          .firestore()
+          .collection("calibrations")
+          .get();
 
-    const calibrations = [];
+        const calibrations = [];
 
-    snapshot.forEach((doc) => {
-      const data = doc.data();
+        snapshot.forEach((doc) => {
+          const data = doc.data();
 
-      let averageAccuracy = 0;
-      let averagePrecision = 0;
+          let averageAccuracy = 0;
+          let averagePrecision = 0;
 
-      if (data.runtime?.usedPattern?.length) {
-        const total = data.runtime.usedPattern.length;
+          if (data.runtime?.usedPattern?.length) {
+            const total = data.runtime.usedPattern.length;
 
-        averageAccuracy =
-          data.runtime.usedPattern.reduce(
-            (sum, p) => sum + Number(p.accuracy || 0),
-            0
-          ) / total;
+            averageAccuracy =
+              data.runtime.usedPattern.reduce(
+                (sum, p) => sum + Number(p.accuracy || 0),
+                0
+              ) / total;
 
-        averagePrecision =
-          data.runtime.usedPattern.reduce(
-            (sum, p) => sum + Number(p.precision || 0),
-            0
-          ) / total;
-      }
+            averagePrecision =
+              data.runtime.usedPattern.reduce(
+                (sum, p) => sum + Number(p.precision || 0),
+                0
+              ) / total;
+          }
 
-      calibrations.push({
-        id: doc.id,
-        ...data,
-        averageAccuracy: Number(averageAccuracy.toFixed(2)),
-        averagePrecision: Number(averagePrecision.toFixed(2)),
-      });
-    });
+          calibrations.push({
+            id: doc.id,
+            ...data,
+            averageAccuracy: Number(averageAccuracy.toFixed(2)),
+            averagePrecision: Number(averagePrecision.toFixed(2)),
+          });
+        });
 
-    commit("setCalibrations", calibrations);
-  } catch (err) {
-    console.error("Error getting calibrations:", err);
-  }
-  },
-  async deleteCalib({ dispatch }, calib) {
-  try {
-    await firebase
-      .firestore()
-      .collection("calibrations")
-      .doc(calib.id)
-      .delete();
-
-    dispatch("getAllCalibs");
-  } catch (e) {
-    console.error("Delete failed:", e);
-  }
-  },
+        commit("setCalibrations", calibrations);
+      } catch (err) {
+        console.error("Error getting calibrations:", err);
+      }
+    },
+    async deleteCalib({ dispatch }, calib) {
+      try {
+        await firebase
+          .firestore()
+          .collection("calibrations")
+          .doc(calib.id)
+          .delete();
+
+        dispatch("getAllCalibs");
+      } catch (e) {
+        console.error("Delete failed:", e);
+      }
+    },
     async sendData(context, data) {
       let formData = new FormData();
 
diff --git a/src/views/CameraConfiguration.vue b/src/views/CameraConfiguration.vue
index 73c38c06..02c28d13 100644
--- a/src/views/CameraConfiguration.vue
+++ b/src/views/CameraConfiguration.vue
@@ -1,6 +1,5 @@
 <template>
-<<<<<<< HEAD
-  <div id="box">
+  <div id="box" style="min-height: 100vh; overflow-y: auto;">
     <Toolbar v-if="!fromRuxailab" />
 
     <!-- Fullscreen Required Modal -->
@@ -73,28 +72,16 @@
     </v-dialog>
 
     <v-container fluid>
-      <v-row justify="center" align="center" style="min-height: 100%">
+      <v-row justify="center" align="center">
         <v-col cols="12" md="10" lg="8" xl="6">
-          <v-stepper
-            v-model="setupStep"
-            elevation="0"
-            class="mx-auto compact-stepper"
-          >
+          <v-stepper v-model="setupStep" elevation="0" class="mx-auto compact-stepper">
             <v-stepper-header>
-              <v-stepper-step
-                :complete="setupStep > 1"
-                step="1"
-                color="#FF425A"
-              >
+              <v-stepper-step :complete="setupStep > 1" step="1" color="#FF425A">
                 Camera Setup
               </v-stepper-step>
               <v-divider></v-divider>
-              <v-stepper-step
-                :complete="setupStep > 2"
-                step="2"
-                color="#FF425A"
-              >
-                Preview & Calibration
+              <v-stepper-step :complete="setupStep > 2" step="2" color="#FF425A">
+                Preview &amp; Calibration
               </v-stepper-step>
             </v-stepper-header>
 
@@ -108,15 +95,10 @@
                     </div>
                     <v-alert color="#fff" dense class="mb-3">
                       <h4 class="mb-2 text-center">What will happen:</h4>
-                      <div
-                        class="text-left mx-auto"
-                        style="max-width: 400px; font-size: 16px"
-                      >
+                      <div class="text-left mx-auto" style="max-width: 400px; font-size: 16px">
                         <ul class="compact-list">
                           <li>The system will request camera permission</li>
-                          <li>
-                            Your webcam image will appear with a face guide
-                          </li>
+                          <li>Your webcam image will appear with a face guide</li>
                           <li>Position your face inside the mask overlay</li>
                           <li>Make sure both eyes are clearly visible</li>
                         </ul>
@@ -129,8 +111,7 @@
                       class="mx-auto"
                       style="max-width: 400px; font-size: 14px"
                     >
-                      <strong>Important:</strong> Please allow camera access
-                      when prompted.
+                      <strong>Important:</strong> Please allow camera access when prompted.
                     </v-alert>
                   </v-card-text>
                 </v-card>
@@ -145,11 +126,50 @@
               <!-- Step 2: Camera Preview -->
               <v-stepper-content step="2" class="compact-content">
                 <v-card flat>
+                  <!-- Calibration Mode Selection -->
+                  <v-card-text v-if="!fromRuxailab" class="pb-2 pt-2">
+                    <v-card outlined class="pa-3 mb-3">
+                      <v-card-title class="text-h6 pa-2">
+                        <v-icon left color="#FF425A">mdi-target</v-icon>
+                        Calibration Mode
+                      </v-card-title>
+                      <v-card-text class="pa-2">
+                        <v-radio-group v-model="calibrationMode" @change="updateCalibrationMode">
+                          <v-radio
+                            label="Multi-point (High Accuracy)"
+                            value="multi-point"
+                            color="#FF425A"
+                          >
+                            <template v-slot:label>
+                              <div>
+                                <strong>Multi-point (High Accuracy)</strong>
+                                <div class="text-caption text--secondary">
+                                  9 points across screen - Best accuracy for precise tracking
+                                </div>
+                              </div>
+                            </template>
+                          </v-radio>
+                          <v-radio
+                            label="Single-point (Quick Setup)"
+                            value="single-point"
+                            color="#FF425A"
+                          >
+                            <template v-slot:label>
+                              <div>
+                                <strong>Single-point (Quick Setup)</strong>
+                                <div class="text-caption text--secondary">
+                                  Center point only - Faster setup, lower accuracy
+                                </div>
+                              </div>
+                            </template>
+                          </v-radio>
+                        </v-radio-group>
+                      </v-card-text>
+                    </v-card>
+                  </v-card-text>
+
                   <!-- Blink Threshold Configuration -->
-                  <v-card-text
-                    v-if="!fromRuxailab"
-                    class="pb-1 pt-2 text-center"
-                  >
+                  <v-card-text v-if="!fromRuxailab" class="pb-1 pt-2 text-center">
                     <BlinkTresholdCard />
                   </v-card-text>
 
@@ -158,28 +178,6 @@
                     <div class="d-flex justify-center mb-2">
                       <v-btn
                         x-small
-=======
-    <div id="box" style="min-height: 100vh; overflow-y: auto;">
-        <Toolbar v-if="!fromRuxailab" />
-        
-        <!-- Camera Selection Modal -->
-        <v-dialog v-model="showCameraModal" max-width="500">
-            <v-card class="blue-bg">
-                <v-card-title class="d-flex justify-center white--text pb-4 pt-6">
-                    <v-icon color="white" left size="32">mdi-camera</v-icon>
-                    <span style="font-size: 20px;">Select Camera</span>
-                </v-card-title>
-                <v-card-text class="px-6 pb-2">
-                    <p class="white--text text-center mb-4" style="font-size: 14px;">
-                        If you don't see your face correctly, please select the correct camera from the list below.
-                    </p>
-                    <v-select 
-                        v-model="selectedMediaDevice" 
-                        :items="mediaDevices" 
-                        item-text="label"
-                        item-value="deviceId" 
-                        label="Available Cameras" 
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
                         outlined
                         color="#002D51"
                         @click="showCameraModal = true"
@@ -188,24 +186,17 @@
                         Camera Help
                       </v-btn>
                     </div>
-                    <div
-                      v-if="isModelLoaded"
-                      class="camera-wrapper mx-auto"
-                      style="max-height: 400px"
-                    >
-                      <video id="video-tag" autoplay playsinline />
-                      <canvas id="canvas" />
-                      <v-img
-                        v-if="isCameraOn"
-                        class="mask"
-                        src="@/assets/mask_desktop.svg"
+                    <div v-if="isModelLoaded" class="camera-wrapper mx-auto">
+                      <video
+                        id="video-tag"
+                        autoplay
+                        playsinline
+                        style="width: 100%; height: auto; transform: scaleX(-1); display: block;"
                       />
+                      <canvas id="canvas" />
+                      <v-img v-if="isCameraOn" class="mask" src="@/assets/mask_desktop.svg" />
                     </div>
-                    <div
-                      v-else
-                      class="loading-container"
-                      style="min-height: 300px"
-                    >
+                    <div v-else class="loading-container" style="min-height: 300px">
                       <v-progress-circular
                         :size="50"
                         :width="6"
@@ -221,7 +212,6 @@
                       <v-icon left>mdi-arrow-left</v-icon>
                       Back
                     </v-btn>
-<<<<<<< HEAD
                     <v-btn
                       color="#FF425A"
                       dark
@@ -240,152 +230,6 @@
       </v-row>
     </v-container>
   </div>
-=======
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
-        <v-container fluid>
-            <v-row justify="center" align="center">
-                <v-col cols="12" md="10" lg="8" xl="6">
-                    <v-stepper v-model="setupStep" elevation="0" class="mx-auto compact-stepper">
-                        <v-stepper-header>
-                            <v-stepper-step :complete="setupStep > 1" step="1" color="#FF425A">
-                                Camera Setup
-                            </v-stepper-step>
-                            <v-divider></v-divider>
-                            <v-stepper-step :complete="setupStep > 2" step="2" color="#FF425A">
-                                Preview & Calibration
-                            </v-stepper-step>
-                        </v-stepper-header>
-
-                        <v-stepper-items>
-                            <!-- Step 1: Instructions -->
-                            <v-stepper-content step="1" class="compact-content">
-                            <v-card flat>
-                                <v-card-text class="text-center py-2">
-                                    <div class="mb-2">
-                                        <v-icon size="64" color="#FF425A">mdi-camera-iris</v-icon>
-                                    </div>
-                                    <v-alert color="#fff"  dense class="mb-3">
-                                        <h4 class="mb-2 text-center">What will happen:</h4>
-                                        <div class="text-left mx-auto" style="max-width: 400px; font-size: 16px;">
-                                            <ul class="compact-list">
-                                                <li>The system will request camera permission</li>
-                                                <li>Your webcam image will appear with a face guide</li>
-                                                <li>Position your face inside the mask overlay</li>
-                                                <li>Make sure both eyes are clearly visible</li>
-                                            </ul>
-                                        </div>
-                                    </v-alert>
-                                    <v-alert outlined color="#FF425A" dense class="mx-auto" style="max-width: 400px; font-size: 14px;">
-                                        <strong>Important:</strong> Please allow camera access when prompted.
-                                    </v-alert>
-                                </v-card-text>
-                            </v-card>
-                            <div class="text-center pb-2">
-                                <v-btn color="#FF425A" dark @click="startCameraSetup">
-                                    <v-icon left>mdi-arrow-right</v-icon>
-                                    Continue
-                                </v-btn>
-                            </div>
-                        </v-stepper-content>
-
-                        <!-- Step 2: Camera Preview -->
-                        <v-stepper-content step="2" class="compact-content">
-                            <v-card flat>
-                                <!-- Calibration Mode Selection -->
-                                <v-card-text v-if="!fromRuxailab" class="pb-2 pt-2">
-                                    <v-card outlined class="pa-3 mb-3">
-                                        <v-card-title class="text-h6 pa-2">
-                                            <v-icon left color="#FF425A">mdi-target</v-icon>
-                                            Calibration Mode
-                                        </v-card-title>
-                                        <v-card-text class="pa-2">
-                                            <v-radio-group v-model="calibrationMode" @change="updateCalibrationMode">
-                                                <v-radio 
-                                                    label="Multi-point (High Accuracy)" 
-                                                    value="multi-point"
-                                                    color="#FF425A"
-                                                >
-                                                    <template v-slot:label>
-                                                        <div>
-                                                            <strong>Multi-point (High Accuracy)</strong>
-                                                            <div class="text-caption text--secondary">
-                                                                9 points across screen - Best accuracy for precise tracking
-                                                            </div>
-                                                        </div>
-                                                    </template>
-                                                </v-radio>
-                                                <v-radio 
-                                                    label="Single-point (Quick Setup)" 
-                                                    value="single-point"
-                                                    color="#FF425A"
-                                                >
-                                                    <template v-slot:label>
-                                                        <div>
-                                                            <strong>Single-point (Quick Setup)</strong>
-                                                            <div class="text-caption text--secondary">
-                                                                Center point only - Faster setup, lower accuracy
-                                                            </div>
-                                                        </div>
-                                                    </template>
-                                                </v-radio>
-                                            </v-radio-group>
-                                        </v-card-text>
-                                    </v-card>
-                                </v-card-text>
-
-                                <!-- Blink Threshold Configuration -->
-                                <v-card-text v-if="!fromRuxailab" class="pb-1 pt-2 text-center">
-                                    <BlinkTresholdCard />
-                                </v-card-text>
-
-                                <!-- Camera Preview -->
-                                <v-card-text class="pa-2 text-center">
-                                    <div class="d-flex justify-center mb-2">
-                                        <v-btn x-small outlined color="#002D51" @click="showCameraModal = true">
-                                            <v-icon left x-small>mdi-help-circle</v-icon>
-                                            Camera Help
-                                        </v-btn>
-                                    </div>
-                                    <div v-if="isModelLoaded" class="camera-wrapper mx-auto">
-                                        <!-- Simple video test -->
-                                        <video 
-                                            id="video-tag" 
-                                            autoplay 
-                                            playsinline 
-                                            style="width: 100%; height: auto; transform: scaleX(-1); display: block;"
-                                        />
-                                        <canvas id="canvas" />
-                                        <v-img v-if="isCameraOn" class="mask" src="@/assets/mask_desktop.svg" />
-                                    </div>
-                                    <div v-else class="loading-container" style="min-height: 300px;">
-                                        <v-progress-circular :size="50" :width="6" color="#FF425A"
-                                            indeterminate></v-progress-circular>
-                                        <h4 class="mt-3">Loading face detection model...</h4>
-                                    </div>
-                                </v-card-text>
-
-                                <v-card-actions class="justify-center py-2">
-                                    <v-btn text @click="setupStep = 1" class="mr-2">
-                                        <v-icon left>mdi-arrow-left</v-icon>
-                                        Back
-                                    </v-btn>
-                                    <v-btn color="#FF425A" dark :disabled="!isCameraOn" @click="goToCalibRecord()">
-                                        <v-icon left>mdi-play</v-icon>
-                                        Start Calibration
-                                    </v-btn>
-                                </v-card-actions>
-                            </v-card>
-                        </v-stepper-content>
-                        </v-stepper-items>
-                    </v-stepper>
-                </v-col>
-            </v-row>
-        </v-container>
-    </div>
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 </template>
 
 <script>
@@ -413,29 +257,15 @@ export default {
       showCameraModal: false,
       showFullscreenModal: false,
       fullscreenError: "",
+      calibrationMode: 'multi-point',
     };
   },
   computed: {
     model() {
       return this.$store.state.detect.model;
     },
-<<<<<<< HEAD
     isModelLoaded() {
       return this.$store.state.detect.loaded;
-=======
-    data() {
-        return {
-            isCameraOn: false,
-            webcamStream: null,
-            video: null,
-            fromRuxailab: false,
-            mediaDevices: [],
-            selectedMediaDevice: null,
-            setupStep: 1,
-            showCameraModal: false,
-            calibrationMode: 'multi-point', // Default to multi-point
-        };
->>>>>>> 5886ed7 (feat: implement single-point calibration mode (#99))
     },
     predictions() {
       return this.$store.state.detect.predictions;
@@ -468,6 +298,9 @@ export default {
     }
   },
   methods: {
+    updateCalibrationMode(mode) {
+      this.$store.commit('setCalibrationMode', mode);
+    },
     isFullscreen() {
       return !!(
         document.fullscreenElement ||
@@ -541,37 +374,11 @@ export default {
             audio: false,
             video: {
               deviceId: this.selectedMediaDevice,
-              width: 600,
-              height: 500,
             },
-<<<<<<< HEAD
           })
           .then((stream) => {
             // stream is a MediaStream object
             this.video.srcObject = stream;
-=======
-            deep: true,
-        },
-    },
-    mounted() {
-        this.verifyFromRuxailab()
-    },
-    methods: {
-        updateCalibrationMode(mode) {
-            this.$store.commit('setCalibrationMode', mode);
-        },
-        
-        startCameraSetup() {
-            this.setupStep = 2;
-            this.setupCamera();
-        },
-        async setupCamera() {
-            // Load the faceLandmarksDetection model assets.
-            const model = await faceLandmarksDetection.load(
-                faceLandmarksDetection.SupportedPackages.mediapipeFacemesh,
-                { maxFaces: 1 }
-            );
->>>>>>> 5886ed7 (feat: implement single-point calibration mode (#99))
 
             this.webcamStream = stream;
 
@@ -580,226 +387,14 @@ export default {
             this.video.onloadeddata = () => {
               const canvas = document.getElementById("canvas");
 
-              canvas.width = this.video.videoWidth || 500;
-              canvas.height = this.video.videoHeight || 400;
+              canvas.width = this.video.videoWidth || 640;
+              canvas.height = this.video.videoHeight || 480;
 
-<<<<<<< HEAD
               this.isCameraOn = true;
               this.detectFace();
             };
           });
       });
-=======
-                // Set default selected media device if not set
-                if (!this.selectedMediaDevice && videoDevices.length > 0) {
-                    this.selectedMediaDevice = videoDevices[0].deviceId;
-                }
-
-                navigator.mediaDevices
-                    .getUserMedia({
-                        audio: false,
-                        video: {
-                            deviceId: this.selectedMediaDevice
-                        },
-                    })
-                    .then((stream) => {
-                        // stream is a MediaStream object
-                        this.video.srcObject = stream;
-
-                        this.webcamStream = stream;
-
-                        tf.getBackend();
-
-                        this.video.onloadeddata = () => {
-                            const canvas = document.getElementById("canvas");
-                            
-                            // Debug: Log video dimensions
-                            console.log('Video loaded:', {
-                                videoWidth: this.video.videoWidth,
-                                videoHeight: this.video.videoHeight,
-                                clientWidth: this.video.clientWidth,
-                                clientHeight: this.video.clientHeight
-                            });
-                            
-                            // Set canvas size to match video dimensions
-                            canvas.width = this.video.videoWidth || 640;
-                            canvas.height = this.video.videoHeight || 480;
-
-                            this.isCameraOn = true;
-                            this.detectFace();
-                        };
-                    });
-            });
-        },
-        async restartCameraWithDevice(deviceId) {
-            if (this.webcamStream) {
-                this.webcamStream.getTracks().forEach(track => track.stop());
-            }
-
-            const constraints = {
-                video: {
-                    deviceId: deviceId
-                },
-                audio: false
-            };
-
-            try {
-                const stream = await navigator.mediaDevices.getUserMedia(constraints);
-                this.video.srcObject = stream;
-                this.webcamStream = stream;
-
-                this.video.onloadeddata = () => {
-                    this.isCameraOn = true;
-                    this.detectFace();
-                };
-            } catch (err) {
-                console.error("Erro ao acessar dispositivo de vídeo:", err);
-            }
-        },
-        async detectFace() {
-            let canvas = document.getElementById("canvas");
-            let ctx = canvas.getContext("2d");
-            let prediction = await this.model.estimateFaces({
-                input: this.video,
-            })
-            this.$store.commit('setPredictions', prediction)
-            
-            // Debug: Log canvas and video dimensions
-            console.log('DetectFace - Dimensions:', {
-                canvasWidth: canvas.width,
-                canvasHeight: canvas.height,
-                videoWidth: this.video.videoWidth,
-                videoHeight: this.video.videoHeight
-            });
-            
-            // Set canvas size to match video dimensions
-            canvas.width = this.video.videoWidth || 640;
-            canvas.height = this.video.videoHeight || 480;
-            
-            // Clear the canvas to make it transparent
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-            const th = this
-
-            this.predictions.forEach((pred) => {
-                // left eye
-                const leftIris = pred.annotations.leftEyeIris;
-                const leftEyelid = pred.annotations.leftEyeUpper0.concat(pred.annotations.leftEyeLower0);
-                const leftEyelidTip = leftEyelid[3]
-                const leftEyelidBottom = leftEyelid[11]
-                const isLeftBlink = this.calculateDistance(leftEyelidTip, leftEyelidBottom) < th.leftEyeTreshold
-                th.blinkFilter ? this.drawEye(leftIris, leftEyelid, ctx, isLeftBlink) : this.drawEye(leftIris, leftEyelid, ctx, false)
-
-                // right eye
-                const rightIris = pred.annotations.rightEyeIris;
-                const rightEyelid = pred.annotations.rightEyeUpper0.concat(pred.annotations.rightEyeLower0);
-                const rightEyelidTip = rightEyelid[3]
-                const rightEyelidBottom = rightEyelid[11]
-                const isRightBlink = this.calculateDistance(rightEyelidTip, rightEyelidBottom) < th.rightEyeTreshold
-                th.blinkFilter ? this.drawEye(rightIris, rightEyelid, ctx, isRightBlink) : this.drawEye(rightIris, rightEyelid, ctx, false)
-
-                // face contour
-                this.drawFace(ctx, pred)
-            });
-        },
-        calculateDistance(eyelidTip, eyelidBottom) {
-            const xDistance = eyelidBottom[0] - eyelidTip[0];
-            const yDistance = eyelidBottom[1] - eyelidTip[1];
-            const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
-            return distance;
-        },
-        drawEye(iris, eyelid, ctx, isBlink) {
-            if (isBlink) {
-                ctx.fillStyle = 'red'
-                for (let i = 0; i < eyelid.length; i++) {
-                    ctx.fillRect(eyelid[i][0], eyelid[i][1], 3, 3);
-                }
-            } else {
-                ctx.fillStyle = 'yellow'
-                for (let i = 0; i < eyelid.length; i++) {
-                    ctx.fillRect(eyelid[i][0], eyelid[i][1], 3, 3);
-                }
-                ctx.fillStyle = 'blue'
-                ctx.fillRect(eyelid[3][0], eyelid[3][1], 3, 3);
-                ctx.fillRect(eyelid[11][0], eyelid[11][1], 3, 3);
-                ctx.fillStyle = 'red'
-                ctx.fillRect(
-                    iris[0][0],
-                    iris[0][1],
-                    3,
-                    3
-                );
-            }
-
-        },
-        drawFace(ctx, pred) {
-            ctx.beginPath();
-            ctx.lineWidth = "4";
-            ctx.strokeStyle = "blue";
-            ctx.rect(
-                pred.boundingBox.topLeft[0],
-                pred.boundingBox.topLeft[1],
-                pred.boundingBox.bottomRight[0] - pred.boundingBox.topLeft[0],
-                pred.boundingBox.bottomRight[1] - pred.boundingBox.topLeft[1]
-            );
-            ctx.stroke();
-        },
-        fullScreen() {
-            var element = document.documentElement;
-            if (element.requestFullscreen) {
-                if (!document.fullscreenElement) {
-                    element.requestFullscreen().catch((err) => {
-                        console.error("Erro ao entrar em tela cheia:", err);
-                    });
-                } else {
-                    document.exitFullscreen();
-                }
-            } else if (element.mozRequestFullScreen) {
-                // Para o Firefox
-                if (!document.mozFullScreenElement) {
-                    element.mozRequestFullScreen().catch((err) => {
-                        console.error("Erro ao entrar em tela cheia:", err);
-                    });
-                } else {
-                    document.mozCancelFullScreen();
-                }
-            } else if (element.webkitRequestFullscreen) {
-                // Para o Chrome, Safari e Opera
-                if (!document.webkitFullscreenElement) {
-                    element.webkitRequestFullscreen().catch((err) => {
-                        console.error("Erro ao entrar em tela cheia:", err);
-                    });
-                } else {
-                    document.webkitExitFullscreen();
-                }
-            } else if (element.msRequestFullscreen) {
-                // Para o Internet Explorer e Microsoft Edge
-                if (!document.msFullscreenElement) {
-                    element.msRequestFullscreen().catch((err) => {
-                        console.error("Erro ao entrar em tela cheia:", err);
-                    });
-                } else {
-                    document.msExitFullscreen();
-                }
-            }
-        },
-        goToCalibRecord() {
-            this.webcamStream.getTracks().forEach((track) => {
-                track.stop();
-            });
-            const urlParams = new URLSearchParams(window.location.search);
-            if (this.fromRuxailab) this.$router.push(`/calibration/record?auth=${this.calibName}&test=${urlParams.get('test')}`);
-            else this.$router.push("/calibration/record");
-        },
-        verifyFromRuxailab() {
-            const urlParams = new URLSearchParams(window.location.search);
-            if (urlParams.has('auth') && urlParams.has('test')) {
-                const auth = urlParams.get('auth');
-                this.$store.commit('setCalibName', auth);
-                this.fromRuxailab = true
-            }
-        },
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
     },
     async restartCameraWithDevice(deviceId) {
       if (this.webcamStream) {
@@ -807,7 +402,7 @@ export default {
       }
 
       const constraints = {
-        video: { deviceId: deviceId, width: 600, height: 500 },
+        video: { deviceId: deviceId },
         audio: false,
       };
 
@@ -821,7 +416,7 @@ export default {
           this.detectFace();
         };
       } catch (err) {
-        console.error("Erro ao acessar dispositivo de vídeo:", err);
+        console.error("Error accessing video device:", err);
       }
     },
     async detectFace() {
@@ -839,9 +434,11 @@ export default {
 
         this.$store.commit("setPredictions", prediction);
 
-        canvas.width = this.video.videoWidth || 500;
-        canvas.height = this.video.videoHeight || 400;
-        ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
+        canvas.width = this.video.videoWidth || 640;
+        canvas.height = this.video.videoHeight || 480;
+
+        // Clear the canvas to make it transparent
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
         const th = this;
 
@@ -957,12 +554,8 @@ export default {
 
 /* Compact Stepper Styles */
 .compact-stepper {
-<<<<<<< HEAD
+  max-height: none;
   margin-bottom: 24px;
-=======
-    /* Allow content to expand; page scrolls if needed */
-    max-height: none;
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 }
 
 .compact-content {
@@ -986,19 +579,13 @@ export default {
 }
 
 .compact-stepper {
-<<<<<<< HEAD
   border-radius: 12px !important;
-  overflow: hidden !important;
-=======
-    border-radius: 12px !important;
-    /* Do not clip content (prevents scrolling) */
-    overflow: visible !important;
+  overflow: visible !important;
 }
 
 /* Ensure stepper content isn't clipped */
 .v-stepper__content {
-    overflow: visible !important;
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
+  overflow: visible !important;
 }
 
 .compact-stepper .v-stepper__step__step {
@@ -1042,79 +629,45 @@ export default {
 }
 
 .camera-wrapper {
-<<<<<<< HEAD
   position: relative;
   width: 100%;
-  max-width: 500px;
-  height: auto;
-  aspect-ratio: 5/4;
+  max-width: 800px;
   margin: 0 auto;
   border: 5px solid #ff425a;
   border-radius: 12px;
   overflow: hidden;
-}
-
-#video-tag,
-#canvas,
-.mask {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  background: #000;
 }
 
 #video-tag {
+  width: 100%;
+  height: auto;
   transform: scaleX(-1);
+  z-index: 1;
+  display: block;
+  max-height: none;
 }
 
 #canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   transform: scaleX(-1);
-=======
-    position: relative;
-    width: 100%;
-    max-width: 800px;
-    margin: 0 auto;
-    border: 5px solid #FF425A;
-    border-radius: 12px;
-    overflow: hidden;
-    background: #000;
-}
-
-#video-tag {
-    width: 100%;
-    height: auto;
-    transform: scaleX(-1);
-    z-index: 1;
-    display: block;
-    max-height: none; /* Remove any height constraints */
-}
-
-#canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transform: scaleX(-1);
-    z-index: 2;
-    background: transparent;
-    pointer-events: none;
-}
-
-.mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 3;
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
+  z-index: 2;
+  background: transparent;
+  pointer-events: none;
 }
 
 .mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
+  z-index: 3;
 }
 </style>
 
diff --git a/src/views/DoubleCalibrationRecord.vue b/src/views/DoubleCalibrationRecord.vue
index db8641dc..ace7dbfb 100644
--- a/src/views/DoubleCalibrationRecord.vue
+++ b/src/views/DoubleCalibrationRecord.vue
@@ -1,6 +1,5 @@
 <template>
-<<<<<<< HEAD
-  <div style="height: 100%;">
+  <div class="page-root">
     <!-- Fullscreen required during calibration -->
     <v-dialog v-model="fullscreenRequiredDialog" max-width="520" persistent>
       <v-card>
@@ -38,9 +37,6 @@
       </v-card>
     </v-dialog>
 
-=======
-  <div class="page-root">
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
     <div v-if="!model" class="center-container">
       <v-progress-circular :size="80" :width="8" indeterminate color="black" class="loading-spinner"
         style="margin-bottom: 16px;"></v-progress-circular>
@@ -319,15 +315,11 @@ export default {
       showStepper: true,
       calibrationStarted: false,
       loadingConfig: false,
-<<<<<<< HEAD
 
       fullscreenRequiredDialog: false,
       navigationBlockedDialog: false,
       finishingCalibration: false,
-=======
-      isFullscreen: false,
       beforeUnloadHandlerRef: null,
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
     };
   },
   computed: {
@@ -409,57 +401,46 @@ export default {
     },
   },
   async created() {
-<<<<<<< HEAD
-    console.log("rodou created");
-    await this.verifyFromRuxailab()
-    this.$store.commit('setIndex', 0)
-    this.usedPattern = this.generateRuntimePattern()
-
-    if (this.usedPattern.length === 0) {
-      const width = window.innerWidth
-      const height = window.innerHeight
-      const offset = this.offset || 100
-      const pointCount = this.$store.state.calibration.pointNumber
-
-      const generatedPattern = this.generateCalibrationPattern(pointCount, width, height, offset)
-
-      this.$store.commit('setMockPattern', generatedPattern)
-      this.usedPattern = generatedPattern
-
-    }
-    await this.startWebCamCapture();
-    console.log("chamou drawPoint no created com os valores:", this.usedPattern[0].x, this.usedPattern[0].y);
-    this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
-    this.advance(this.usedPattern, this.circleIrisPoints, this.msPerCapture)
-    console.log("UsedPattern inteiro", this.usedPattern);
-=======
     try {
       await this.verifyFromRuxailab()
       this.$store.commit('setIndex', 0)
       this.usedPattern = this.generateRuntimePattern()
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
+
+      if (this.usedPattern.length === 0) {
+        const width = window.innerWidth
+        const height = window.innerHeight
+        const offset = this.offset || 100
+        const pointCount = this.$store.state.calibration.pointNumber
+
+        const generatedPattern = this.generateCalibrationPattern(pointCount, width, height, offset)
+
+        this.$store.commit('setMockPattern', generatedPattern)
+        this.usedPattern = generatedPattern
+      }
 
       await this.startWebCamCapture();
-      
+
       // Wait for model to be loaded before drawing
       if (!this.model) {
         console.warn('Model not loaded yet, waiting...');
-        // You might want to add a watcher for model loading
         return;
       }
-      
-      console.log("chamou drawPoint no created com os valores:", this.usedPattern[0].x, this.usedPattern[0].y);
+
       this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
       this.advance(this.usedPattern, this.circleIrisPoints, this.msPerCapture)
     } catch (error) {
       console.error('Error during component initialization:', error);
     }
   },
-<<<<<<< HEAD
+
   mounted() {
-    document.addEventListener("fullscreenchange", this.onFullscreenChange);
-    document.addEventListener("webkitfullscreenchange", this.onFullscreenChange);
-    window.addEventListener("beforeunload", this.onBeforeUnload);
+    // Handle window resize events
+    window.addEventListener('resize', this.handleResize);
+    // Track fullscreen changes
+    document.addEventListener('fullscreenchange', this.onFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', this.onFullscreenChange);
+    document.addEventListener('mozfullscreenchange', this.onFullscreenChange);
+    document.addEventListener('MSFullscreenChange', this.onFullscreenChange);
 
     this.applyCalibrationScrollLock();
 
@@ -467,14 +448,29 @@ export default {
       this.fullscreenRequiredDialog = true;
     }
   },
+
   beforeDestroy() {
-    document.removeEventListener("fullscreenchange", this.onFullscreenChange);
-    document.removeEventListener("webkitfullscreenchange", this.onFullscreenChange);
-    window.removeEventListener("beforeunload", this.onBeforeUnload);
+    // Clean up event listeners
+    window.removeEventListener('resize', this.handleResize);
+    if (this.keydownHandlerRef) {
+      document.removeEventListener('keydown', this.keydownHandlerRef);
+    }
+    document.removeEventListener('fullscreenchange', this.onFullscreenChange);
+    document.removeEventListener('webkitfullscreenchange', this.onFullscreenChange);
+    document.removeEventListener('mozfullscreenchange', this.onFullscreenChange);
+    document.removeEventListener('MSFullscreenChange', this.onFullscreenChange);
+    if (this.beforeUnloadHandlerRef) {
+      window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
+    }
 
     this.removeCalibrationScrollLock();
   },
+
   beforeRouteLeave(to, from, next) {
+    this.exitFullscreen();
+    if (this.keydownHandlerRef) {
+      document.removeEventListener('keydown', this.keydownHandlerRef);
+    }
     if (this.calibrationStarted && !this.calibFinished && !this.finishingCalibration) {
       this.navigationBlockedDialog = true;
       next(false);
@@ -482,6 +478,7 @@ export default {
     }
     next();
   },
+
   methods: {
     applyCalibrationScrollLock() {
       const body = document.body;
@@ -511,20 +508,73 @@ export default {
         document.msFullscreenElement
       );
     },
-    requestFullscreen(element) {
-      const el = element || document.documentElement;
-      if (el.requestFullscreen) return el.requestFullscreen();
-      if (el.mozRequestFullScreen) return el.mozRequestFullScreen();
-      if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();
-      if (el.msRequestFullscreen) return el.msRequestFullscreen();
-      return Promise.reject(new Error("Fullscreen API not supported"));
+    handleResize() {
+      // Regenerate pattern for new screen size if needed
+      if (this.calibrationStarted) {
+        const canvas = document.getElementById('canvas');
+        if (canvas) {
+          canvas.width = window.innerWidth;
+          canvas.height = window.innerHeight;
+        }
+      }
+    },
+    // Note: Fullscreen may be blocked on some mobile browsers (iOS Safari).
+    // Failure is safely ignored.
+    enterFullscreen() {
+      const canvas = document.getElementById('canvas');
+      const el = canvas || document.documentElement;
+
+      // Guard: fullscreen not supported
+      const requestFullscreen =
+        el.requestFullscreen ||
+        el.webkitRequestFullscreen ||
+        el.mozRequestFullScreen ||
+        el.msRequestFullscreen;
+
+      if (!requestFullscreen) {
+        console.warn('Fullscreen API not supported in this browser');
+        return;
+      }
+
+      if (!this.isFullscreen()) {
+        try {
+          requestFullscreen.call(el);
+          if (canvas) {
+            canvas.style.pointerEvents = 'auto';
+          }
+        } catch (err) {
+          console.warn('Fullscreen request failed:', err);
+        }
+      }
+    },
+    exitFullscreen() {
+      const exitFullscreenFn =
+        document.exitFullscreen ||
+        document.webkitExitFullscreen ||
+        document.mozCancelFullScreen ||
+        document.msExitFullscreen;
+
+      const canvas = document.getElementById('canvas');
+      if (canvas) {
+        canvas.style.pointerEvents = 'none';
+      }
+
+      if (this.isFullscreen() && exitFullscreenFn) {
+        try {
+          exitFullscreenFn.call(document);
+        } catch (err) {
+          console.warn('Exit fullscreen failed:', err);
+        }
+      }
     },
     async requestFullscreenAndClose() {
       try {
-        await this.requestFullscreen(document.documentElement);
+        this.enterFullscreen();
       } catch (e) {
         // Keep dialog open; browser will show its own UI hints if blocked.
       }
+      // Small delay to let fullscreen engage
+      await new Promise(resolve => setTimeout(resolve, 200));
       if (this.isFullscreen()) {
         this.fullscreenRequiredDialog = false;
       }
@@ -535,12 +585,6 @@ export default {
         this.showStepper = true;
       }
     },
-    onBeforeUnload(e) {
-      if (this.calibrationStarted && !this.calibFinished) {
-        e.preventDefault();
-        e.returnValue = "";
-      }
-    },
     generateCalibrationPattern(pointCount, width, height, offset) {
       const patterns = [];
       
@@ -643,148 +687,8 @@ export default {
       return patterns;
     },
     
-    startTraining() {
-      if (!this.isFullscreen()) {
-        this.fullscreenRequiredDialog = true;
-        return;
-      }
-=======
-
-  mounted() {
-    // Handle window resize events
-    window.addEventListener('resize', this.handleResize);
-    // Track fullscreen changes so we can react if the user exits fullscreen mid-calibration
-    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
-    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
-    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
-    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
-  },
-
-  beforeDestroy() {
-    // Clean up event listeners
-    window.removeEventListener('resize', this.handleResize);
-    if (this.keydownHandlerRef) {
-      document.removeEventListener('keydown', this.keydownHandlerRef);
-    }
-    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
-    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
-    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
-    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
-    if (this.beforeUnloadHandlerRef) {
-      window.removeEventListener('beforeunload', this.beforeUnloadHandlerRef);
-    }
-  },
-
-  beforeRouteLeave(to, from, next) {
-  this.exitFullscreen();
-  if (this.keydownHandlerRef) {
-    document.removeEventListener('keydown', this.keydownHandlerRef);
-  }
-  next();
-  },
-
-  methods: {
-    handleFullscreenChange() {
-      const isNowFullscreen =
-        !!document.fullscreenElement ||
-        !!document.webkitFullscreenElement ||
-        !!document.mozFullScreenElement ||
-        !!document.msFullscreenElement;
-
-      this.isFullscreen = isNowFullscreen;
-
-      // If user exits fullscreen in the middle of calibration, pause and return to instructions
-      if (!isNowFullscreen && this.calibrationStarted && !this.showStepper) {
-        this.calibrationStarted = false;
-        this.showStepper = true;
-        // Keep the current stepper step (training or validation) so user can resume explicitly
-        this.exitFullscreen();
-        // Optional lightweight notice – avoid blocking alerts during calibration
-        // eslint-disable-next-line no-console
-        console.warn('Calibration left fullscreen; showing instructions again.');
-      }
-    },
-
-    handleResize() {
-      // Regenerate pattern for new screen size if needed
-      if (this.calibrationStarted) {
-        const canvas = document.getElementById('canvas');
-        if (canvas) {
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-        }
-      }
-    },
-    
-    // Note: Fullscreen may be blocked on some mobile browsers (iOS Safari).
-    // Failure is safely ignored.
-    enterFullscreen() {
-      const canvas = document.getElementById('canvas');
-      const el = canvas || document.documentElement;
-
-      // Guard: fullscreen not supported
-      const requestFullscreen =
-        el.requestFullscreen ||
-        el.webkitRequestFullscreen ||
-        el.mozRequestFullScreen ||
-        el.msRequestFullscreen;
-
-      if (!requestFullscreen) {
-        // eslint-disable-next-line no-console
-        console.warn('Fullscreen API not supported in this browser');
-        return;
-      }
-
-      if (
-        !document.fullscreenElement &&
-        !document.webkitFullscreenElement &&
-        !document.mozFullScreenElement &&
-        !document.msFullscreenElement
-      ) {
-        try {
-          requestFullscreen.call(el);
-          // While in fullscreen, capture pointer events on the canvas to avoid clicking underlying UI
-          if (canvas) {
-            canvas.style.pointerEvents = 'auto';
-          }
-        } catch (err) {
-          // eslint-disable-next-line no-console
-          console.warn('Fullscreen request failed:', err);
-        }
-      }
-    },
-
-    exitFullscreen() {
-      const exitFullscreenFn =
-        document.exitFullscreen ||
-        document.webkitExitFullscreen ||
-        document.mozCancelFullScreen ||
-        document.msExitFullscreen;
-
-      const canvas = document.getElementById('canvas');
-      if (canvas) {
-        canvas.style.pointerEvents = 'none';
-      }
-
-      if (
-        (document.fullscreenElement ||
-          document.webkitFullscreenElement ||
-          document.mozFullScreenElement ||
-          document.msFullscreenElement) &&
-        exitFullscreenFn
-      ) {
-        try {
-          exitFullscreenFn.call(document);
-        } catch (err) {
-          // eslint-disable-next-line no-console
-          console.warn('Exit fullscreen failed:', err);
-        }
-      }
-    },
-
     startTraining() {
       this.enterFullscreen();
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       this.showStepper = false;
       this.calibrationStarted = true;
       // Warn user if they try to refresh/close tab mid-calibration
@@ -798,14 +702,7 @@ export default {
       }
     },
     startValidation() {
-<<<<<<< HEAD
-      if (!this.isFullscreen()) {
-        this.fullscreenRequiredDialog = true;
-        return;
-      }
-=======
       this.enterFullscreen();
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       this.showStepper = false;
       this.calibrationStarted = true;
     },
@@ -1026,14 +923,10 @@ export default {
       ctx.stroke();
     },
     async endCalib() {
-<<<<<<< HEAD
       if (this.finishingCalibration) return;
       this.finishingCalibration = true;
       this.calibrationStarted = false;
-
-=======
       this.exitFullscreen();
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
       this.calibPredictionPoints.forEach(element => {
         delete element.point_x;
         delete element.point_y;
@@ -1124,51 +1017,11 @@ export default {
             audio: false,
             video: true
           });
-<<<<<<< HEAD
-
-          let recordingWebCam = [];
-          let video = document.getElementById("video-tag");
-          video.srcObject = mediaStreamObj;
-          // Define screen capture events
-          // Save frames to recordingWebCam array
-          this.recordWebCam.ondataavailable = (ev) => {
-            recordingWebCam.push(ev.data);
-          };
-          // OnStop WebCam Record
-          const th = this;
-
-          this.recordWebCam.onstop = () => {
-            // Generate blob from the frames
-            let blob = new Blob(recordingWebCam, { type: "video/webm" });
-            recordingWebCam = [];
-            const uploadMediaWebCam = { blob: blob, name: mediaStreamObj.id };
-            th.webcamfile = uploadMediaWebCam;
-            // End webcam capture
-            mediaStreamObj.getTracks().forEach((track) => track.stop());
-            th.stopRecord();
-          };
-
-          // Init record webcam
-          this.recordWebCam.start();
-          
-          // Wait for video to be fully ready with proper dimensions
-          video.onloadedmetadata = async () =>{
-            // Additional wait to ensure video renders properly
-            await new Promise(resolve => setTimeout(resolve, 200));
-            if (video.videoWidth > 0 && video.videoHeight > 0) {
-              this.detectFace();
-            }
-          }
-        })
-        .catch((e) => {
-          console.error("Error", e);
-=======
         }
         
         // Create media recorder object
         this.recordWebCam = new MediaRecorder(mediaStreamObj, {
           mimeType: "video/webm;",
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
         });
 
         let recordingWebCam = [];
@@ -1320,10 +1173,7 @@ export default {
 </script>
 
 <style scoped>
-<<<<<<< HEAD
-=======
 
->>>>>>> 2b1bb29 (feat(calibration): fullscreen mode and camera preview fix)
 #canvas {
   position: fixed;
   top: 0;

From 7353eba8fb6f29a0c6d8f8413fd18a845c55e732 Mon Sep 17 00:00:00 2001
From: harsshks <the.hk.25102003@gmail.com>
Date: Fri, 6 Mar 2026 13:46:09 +0530
Subject: [PATCH 4/4] refactor: extract CalibrationCalculator service and
 CameraMixin (#112)

---
 src/mixins/CameraMixin.js             | 139 ++++++++++++++
 src/services/CalibrationCalculator.js | 170 +++++++++++++++++
 src/views/DoubleCalibrationRecord.vue | 261 ++------------------------
 3 files changed, 325 insertions(+), 245 deletions(-)
 create mode 100644 src/mixins/CameraMixin.js
 create mode 100644 src/services/CalibrationCalculator.js

diff --git a/src/mixins/CameraMixin.js b/src/mixins/CameraMixin.js
new file mode 100644
index 00000000..7a83db97
--- /dev/null
+++ b/src/mixins/CameraMixin.js
@@ -0,0 +1,139 @@
+/**
+ * CameraMixin — Reusable webcam / MediaRecorder logic.
+ *
+ * Extracted from DoubleCalibrationRecord.vue (Issue #112).
+ * Mix this into any Vue component that needs camera capture
+ * and face-detection support.
+ *
+ * Requirements for the host component:
+ *  - Must have a <video id="video-tag"> in its template (for ML inference).
+ *  - Must have a <video id="video-preview"> in its template (for UI display).
+ *  - Must provide `this.model` (the face-landmarks-detection model instance)
+ *    and `this.configWebCam` (getUserMedia constraints) via its own
+ *    data / computed / store.
+ */
+
+export default {
+    data() {
+        return {
+            /** @type {MediaRecorder|null} */
+            recordWebCam: null,
+            /** Blob + name of the recorded webcam video */
+            webcamfile: null,
+        };
+    },
+
+    methods: {
+        /**
+         * Request camera access, wire up MediaRecorder, and start recording.
+         * Resolves once the video element fires `loadeddata`.
+         */
+        async startWebCamCapture() {
+            try {
+                let mediaStreamObj;
+
+                try {
+                    // Try with ideal constraints first
+                    mediaStreamObj = await navigator.mediaDevices.getUserMedia(
+                        this.configWebCam,
+                    );
+                } catch (error) {
+                    console.warn(
+                        'Failed with ideal constraints, trying basic video:',
+                        error,
+                    );
+                    mediaStreamObj = await navigator.mediaDevices.getUserMedia({
+                        audio: false,
+                        video: true,
+                    });
+                }
+
+                // Create media recorder
+                this.recordWebCam = new MediaRecorder(mediaStreamObj, {
+                    mimeType: 'video/webm;',
+                });
+
+                let recordingWebCam = [];
+                const video = document.getElementById('video-tag'); // ML
+                const preview = document.getElementById('video-preview'); // UI
+
+                if (!video || !preview) {
+                    console.error('Video elements not found');
+                    return;
+                }
+
+                video.srcObject = mediaStreamObj;
+                preview.srcObject = mediaStreamObj;
+
+                // Save frames
+                this.recordWebCam.ondataavailable = (ev) => {
+                    recordingWebCam.push(ev.data);
+                };
+
+                // On stop → build blob
+                const self = this;
+                this.recordWebCam.onstop = () => {
+                    const blob = new Blob(recordingWebCam, { type: 'video/webm' });
+                    recordingWebCam = [];
+                    self.webcamfile = { blob, name: mediaStreamObj.id };
+                    mediaStreamObj.getTracks().forEach((track) => track.stop());
+                    self.stopRecord();
+                };
+
+                // Start recording
+                this.recordWebCam.start();
+
+                // Wait for video to be ready
+                return new Promise((resolve) => {
+                    video.onloadeddata = () => {
+                        this.detectFace();
+                        resolve();
+                    };
+                });
+            } catch (e) {
+                console.error('Error accessing webcam:', e);
+                alert(
+                    'Camera access is required for eye tracking. Please allow camera permissions and refresh the page.',
+                );
+                throw e;
+            }
+        },
+
+        /**
+         * Run face-landmark detection on the current video frame.
+         * Retries automatically if the video isn't ready yet.
+         *
+         * @returns {Promise<Array>} Face predictions from the model.
+         */
+        async detectFace() {
+            const video = document.getElementById('video-tag');
+
+            if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
+                console.warn('Video not ready yet, waiting...');
+                await new Promise((resolve) => setTimeout(resolve, 100));
+                return this.detectFace();
+            }
+
+            const lastPrediction = await this.model.estimateFaces({ input: video });
+            return lastPrediction;
+        },
+
+        /**
+         * Stop the MediaRecorder if it is still active.
+         */
+        async stopRecord() {
+            if (!this.recordWebCam) return;
+            if (this.recordWebCam.state !== 'inactive') {
+                await this.stopWebCamCapture();
+            }
+        },
+
+        /**
+         * Stop the MediaRecorder and mark calibration as finished.
+         */
+        async stopWebCamCapture() {
+            await this.recordWebCam.stop();
+            this.calibFinished = true;
+        },
+    },
+};
diff --git a/src/services/CalibrationCalculator.js b/src/services/CalibrationCalculator.js
new file mode 100644
index 00000000..09b9f352
--- /dev/null
+++ b/src/services/CalibrationCalculator.js
@@ -0,0 +1,170 @@
+/**
+ * CalibrationCalculator — Pure calibration math utilities.
+ *
+ * Extracted from DoubleCalibrationRecord.vue (Issue #112) so they
+ * can be unit-tested independently of the Vue component.
+ */
+
+/**
+ * Generate a calibration-point pattern for a given screen size.
+ *
+ * @param {number} pointCount  Number of calibration points (1-9).
+ * @param {number} width       Screen / viewport width in px.
+ * @param {number} height      Screen / viewport height in px.
+ * @param {number} offset      Margin from screen edge in px.
+ * @returns {{ x: number, y: number }[]}
+ */
+export function generateCalibrationPattern(pointCount, width, height, offset) {
+    const patterns = [];
+
+    switch (pointCount) {
+        case 1:
+            patterns.push({ x: width / 2, y: height / 2 });
+            break;
+
+        case 2:
+            patterns.push({ x: offset, y: height / 2 });
+            patterns.push({ x: width - offset, y: height / 2 });
+            break;
+
+        case 3:
+            patterns.push({ x: offset, y: height / 2 });
+            patterns.push({ x: width / 2, y: height / 2 });
+            patterns.push({ x: width - offset, y: height / 2 });
+            break;
+
+        case 4:
+            patterns.push({ x: offset, y: offset });
+            patterns.push({ x: width - offset, y: offset });
+            patterns.push({ x: offset, y: height - offset });
+            patterns.push({ x: width - offset, y: height - offset });
+            break;
+
+        case 5:
+            patterns.push({ x: offset, y: offset });
+            patterns.push({ x: width - offset, y: offset });
+            patterns.push({ x: width / 2, y: height / 2 });
+            patterns.push({ x: offset, y: height - offset });
+            patterns.push({ x: width - offset, y: height - offset });
+            break;
+
+        case 6: {
+            const stepX6 = (width - 2 * offset) / 2;
+            const stepY6 = (height - 2 * offset) / 1;
+            for (let i = 0; i < 2; i++) {
+                for (let j = 0; j < 3; j++) {
+                    patterns.push({
+                        x: offset + j * stepX6,
+                        y: offset + i * stepY6,
+                    });
+                }
+            }
+            break;
+        }
+
+        case 7:
+            patterns.push({ x: offset, y: offset });
+            patterns.push({ x: width / 2, y: offset });
+            patterns.push({ x: width - offset, y: offset });
+            patterns.push({ x: offset, y: height / 2 });
+            patterns.push({ x: width - offset, y: height / 2 });
+            patterns.push({ x: offset, y: height - offset });
+            patterns.push({ x: width - offset, y: height - offset });
+            break;
+
+        case 8:
+            patterns.push({ x: offset, y: offset });
+            patterns.push({ x: width / 2, y: offset });
+            patterns.push({ x: width - offset, y: offset });
+            patterns.push({ x: offset, y: height / 2 });
+            patterns.push({ x: width - offset, y: height / 2 });
+            patterns.push({ x: offset, y: height - offset });
+            patterns.push({ x: width / 2, y: height - offset });
+            patterns.push({ x: width - offset, y: height - offset });
+            break;
+
+        case 9:
+        default: {
+            const cols = 3;
+            const rows = 3;
+            const usableWidth = width - 2 * offset;
+            const usableHeight = height - 2 * offset;
+            const stepX = usableWidth / (cols - 1);
+            const stepY = usableHeight / (rows - 1);
+
+            for (let i = 0; i < rows; i++) {
+                for (let j = 0; j < cols; j++) {
+                    patterns.push({
+                        x: offset + j * stepX,
+                        y: offset + i * stepY,
+                    });
+                }
+            }
+            break;
+        }
+    }
+
+    return patterns;
+}
+
+/**
+ * Generate a runtime calibration pattern based on screen dimensions.
+ *
+ * @param {Object} opts
+ * @param {boolean} opts.isSinglePointMode  Use centre-only pattern.
+ * @param {number}  opts.offset             Margin from screen edge.
+ * @param {number}  opts.pointNumber        Number of calibration points.
+ * @param {number}  [opts.width]            Viewport width  (default: window.innerWidth).
+ * @param {number}  [opts.height]           Viewport height (default: window.innerHeight).
+ * @returns {{ x: number, y: number }[]}
+ */
+export function generateRuntimePattern({
+    isSinglePointMode,
+    offset = 100,
+    pointNumber = 9,
+    width = window.innerWidth,
+    height = window.innerHeight,
+}) {
+    if (isSinglePointMode) {
+        return [{ x: width / 2, y: height / 2 }];
+    }
+
+    const points = pointNumber;
+    const minCols = 3;
+    const cols = Math.max(minCols, Math.round(Math.sqrt(points)));
+    const rows = Math.ceil(points / cols);
+
+    const usableWidth = width - 2 * offset;
+    const usableHeight = height - 2 * offset;
+
+    const stepX = usableWidth / (cols - 1);
+    const stepY = usableHeight / (rows - 1);
+
+    const pattern = [];
+
+    for (let i = 0; i < rows; i++) {
+        for (let j = 0; j < cols; j++) {
+            if (pattern.length < points) {
+                pattern.push({
+                    x: offset + j * stepX,
+                    y: offset + i * stepY,
+                });
+            }
+        }
+    }
+
+    return pattern;
+}
+
+/**
+ * Euclidean distance between two 2-D landmark points (arrays).
+ *
+ * @param {number[]} pointA  [x, y, …]
+ * @param {number[]} pointB  [x, y, …]
+ * @returns {number}
+ */
+export function calculateDistance(pointA, pointB) {
+    const dx = pointB[0] - pointA[0];
+    const dy = pointB[1] - pointA[1];
+    return Math.sqrt(dx * dx + dy * dy);
+}
diff --git a/src/views/DoubleCalibrationRecord.vue b/src/views/DoubleCalibrationRecord.vue
index ace7dbfb..41c7f089 100644
--- a/src/views/DoubleCalibrationRecord.vue
+++ b/src/views/DoubleCalibrationRecord.vue
@@ -278,16 +278,21 @@
 <script>
 import axios from 'axios';
 import { envConfig } from '../config/environment';
+import {
+  generateCalibrationPattern,
+  generateRuntimePattern,
+  calculateDistance,
+} from '@/services/CalibrationCalculator';
+import CameraMixin from '@/mixins/CameraMixin';
 
 
 export default {
+  mixins: [CameraMixin],
 
   data() {
     return {
       // camera
       keydownHandlerRef: null,
-      webcamfile: null,
-      recordWebCam: null,
       configWebCam: {
         audio: false,
         video: {
@@ -586,105 +591,7 @@ export default {
       }
     },
     generateCalibrationPattern(pointCount, width, height, offset) {
-      const patterns = [];
-      
-      switch(pointCount) {
-        case 1:
-          // Center point only
-          patterns.push({ x: width/2, y: height/2 });
-          break;
-          
-        case 2:
-          // Left and right edges (horizontal coverage)
-          patterns.push({ x: offset, y: height/2 });
-          patterns.push({ x: width - offset, y: height/2 });
-          break;
-          
-        case 3:
-          // Horizontal line: left, center, right
-          patterns.push({ x: offset, y: height/2 });
-          patterns.push({ x: width/2, y: height/2 });
-          patterns.push({ x: width - offset, y: height/2 });
-          break;
-          
-        case 4:
-          // Four corners (optimal for 4-point calibration)
-          patterns.push({ x: offset, y: offset });
-          patterns.push({ x: width - offset, y: offset });
-          patterns.push({ x: offset, y: height - offset });
-          patterns.push({ x: width - offset, y: height - offset });
-          break;
-          
-        case 5:
-          // Four corners + center (cross pattern)
-          patterns.push({ x: offset, y: offset });
-          patterns.push({ x: width - offset, y: offset });
-          patterns.push({ x: width/2, y: height/2 });
-          patterns.push({ x: offset, y: height - offset });
-          patterns.push({ x: width - offset, y: height - offset });
-          break;
-          
-        case 6: {
-          // 3x2 rectangle pattern
-          const stepX6 = (width - 2 * offset) / 2;
-          const stepY6 = (height - 2 * offset) / 1;
-          for (let i = 0; i < 2; i++) {
-            for (let j = 0; j < 3; j++) {
-              patterns.push({
-                x: offset + j * stepX6,
-                y: offset + i * stepY6,
-              });
-            }
-          }
-          break;
-        }
-          
-        case 7:
-          // Partial 3x3 grid (strategic selection)
-          patterns.push({ x: offset, y: offset });
-          patterns.push({ x: width/2, y: offset });
-          patterns.push({ x: width - offset, y: offset });
-          patterns.push({ x: offset, y: height/2 });
-          patterns.push({ x: width - offset, y: height/2 });
-          patterns.push({ x: offset, y: height - offset });
-          patterns.push({ x: width - offset, y: height - offset });
-          break;
-          
-        case 8:
-          // Partial 3x3 grid (without center)
-          patterns.push({ x: offset, y: offset });
-          patterns.push({ x: width/2, y: offset });
-          patterns.push({ x: width - offset, y: offset });
-          patterns.push({ x: offset, y: height/2 });
-          patterns.push({ x: width - offset, y: height/2 });
-          patterns.push({ x: offset, y: height - offset });
-          patterns.push({ x: width/2, y: height - offset });
-          patterns.push({ x: width - offset, y: height - offset });
-          break;
-          
-        case 9:
-        default: {
-          // Full 3x3 grid (current working pattern)
-          const cols = 3;
-          const rows = 3;
-          const usableWidth = width - 2 * offset;
-          const usableHeight = height - 2 * offset;
-          const stepX = usableWidth / (cols - 1);
-          const stepY = usableHeight / (rows - 1);
-          
-          for (let i = 0; i < rows; i++) {
-            for (let j = 0; j < cols; j++) {
-              patterns.push({
-                x: offset + j * stepX,
-                y: offset + i * stepY,
-              });
-            }
-          }
-          break;
-        }
-      }
-      
-      return patterns;
+      return generateCalibrationPattern(pointCount, width, height, offset);
     },
     
     startTraining() {
@@ -859,10 +766,7 @@ export default {
       }
     },
     calculateDistance(eyelidTip, eyelidBottom) {
-      const xDistance = eyelidBottom[0] - eyelidTip[0];
-      const yDistance = eyelidBottom[1] - eyelidTip[1];
-      const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
-      return distance;
+      return calculateDistance(eyelidTip, eyelidBottom);
     },
     drawPoint(x, y, radius) {
       const canvas = document.getElementById('canvas');
@@ -1001,80 +905,8 @@ export default {
         });
       });
     },
-    // canvas related
-    async startWebCamCapture() {
-      // Request permission for screen capture
-      try {
-        let mediaStreamObj;
-        
-        try {
-          // Try with ideal constraints first
-          mediaStreamObj = await navigator.mediaDevices.getUserMedia(this.configWebCam);
-        } catch (error) {
-          console.warn('Failed with ideal constraints, trying basic video:', error);
-          // Fallback to basic video if constraints fail
-          mediaStreamObj = await navigator.mediaDevices.getUserMedia({
-            audio: false,
-            video: true
-          });
-        }
-        
-        // Create media recorder object
-        this.recordWebCam = new MediaRecorder(mediaStreamObj, {
-          mimeType: "video/webm;",
-        });
-
-        let recordingWebCam = [];
-        const video = document.getElementById("video-tag");      // ML
-        const preview = document.getElementById("video-preview"); // UI
-
-        if (!video || !preview) {
-          console.error('Video elements not found');
-          return;
-        }
-
-        video.srcObject = mediaStreamObj;
-        preview.srcObject = mediaStreamObj;
-        
-        // Define screen capture events
-        // Save frames to recordingWebCam array
-        this.recordWebCam.ondataavailable = (ev) => {
-          recordingWebCam.push(ev.data);
-        };
-        
-        // OnStop WebCam Record
-        const th = this;
-
-        this.recordWebCam.onstop = () => {
-          // Generate blob from the frames
-          let blob = new Blob(recordingWebCam, { type: "video/webm" });
-          recordingWebCam = [];
-          const uploadMediaWebCam = { blob: blob, name: mediaStreamObj.id };
-          th.webcamfile = uploadMediaWebCam;
-          // End webcam capture
-          mediaStreamObj.getTracks().forEach((track) => track.stop());
-          th.stopRecord();
-        };
-
-        // Init record webcam
-        this.recordWebCam.start();
-        
-        // Wait for video to load before detecting face
-        return new Promise((resolve) => {
-          video.onloadeddata = () => {
-            console.log('Video loaded with dimensions:', video.videoWidth, 'x', video.videoHeight);
-            this.detectFace();
-            resolve();
-          };
-        });
-        
-      } catch (e) {
-        console.error("Error accessing webcam:", e);
-        // Handle webcam access denied or not available
-        alert("Camera access is required for eye tracking. Please allow camera permissions and refresh the page.");
-        throw e;
-      }
-    },
+    // startWebCamCapture, detectFace, stopRecord, stopWebCamCapture
+    // are provided by CameraMixin
 
     async verifyFromRuxailab() {
       const urlParams = new URLSearchParams(window.location.search);
@@ -1098,75 +930,14 @@ export default {
       this.loadingConfig = false;
     },
 
-    async detectFace() {
-      const video = document.getElementById("video-tag");
-      
-      // Ensure video has valid dimensions before processing
-      if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
-        console.warn('Video not ready yet, waiting...');
-        // Wait a bit and try again
-        await new Promise(resolve => setTimeout(resolve, 100));
-        return this.detectFace(); // Retry
-      }
-      
-      const lastPrediction = await this.model.estimateFaces({
-        input: video,
-      });
-      return lastPrediction
-    },
-
-    async stopRecord() {
-      if (!this.recordWebCam) return;
-      if (this.recordWebCam.state != "inactive") {
-        await this.stopWebCamCapture();
-      }
-    },
 
-    async stopWebCamCapture() {
-      await this.recordWebCam.stop();
-      this.calibFinished = true;
-    },
 
     generateRuntimePattern() {
-      const width = window.innerWidth
-      const height = window.innerHeight
-      
-      // Check if single-point mode is enabled
-      if (this.isSinglePointMode) {
-        return [{
-          x: width / 2,
-          y: height / 2
-        }];
-      }
-      
-      // Multi-point calibration (existing logic)
-      const offset = this.offset || 100
-      const points = this.$store.state.calibration.pointNumber || 9
-
-      const minCols = 3
-      const cols = Math.max(minCols, Math.round(Math.sqrt(points)))
-      const rows = Math.ceil(points / cols)
-
-      const usableWidth = width - 2 * offset
-      const usableHeight = height - 2 * offset
-
-      const stepX = usableWidth / (cols - 1)
-      const stepY = usableHeight / (rows - 1)
-
-      const pattern = []
-
-      for (let i = 0; i < rows; i++) {
-        for (let j = 0; j < cols; j++) {
-          if (pattern.length < points) {
-            pattern.push({
-              x: offset + j * stepX,
-              y: offset + i * stepY
-            })
-          }
-        }
-      }
-
-      return pattern
+      return generateRuntimePattern({
+        isSinglePointMode: this.isSinglePointMode,
+        offset: this.offset || 100,
+        pointNumber: this.$store.state.calibration.pointNumber || 9,
+      });
     }
   },
 };