diff --git a/src/components/calibration/ConfigModal.vue b/src/components/calibration/ConfigModal.vue
new file mode 100644
index 0000000..bdd5a5c
--- /dev/null
+++ b/src/components/calibration/ConfigModal.vue
@@ -0,0 +1,60 @@
+<template>
+    <v-dialog v-model="aDialog" max-width="300px" max-height="500px">
+        <v-card>
+            <v-card-title class="headline text-center mx-auto">recalibrate</v-card-title>
+            <v-card-text>
+                {{ (mockPattern.length != 0) ? `using ${mockPattern.length} selected points` : `no points selected, using
+                all ${pattern.length} points` }}
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="blue darken-1" text @click="recalibrate">recalib</v-btn>
+                <v-btn color="blue darken-1" text @click="goBack">back</v-btn>
+                <v-btn color="blue darken-1" text @click="aDialog = false">close</v-btn>
+
+                <v-spacer></v-spacer>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+  
+
+<script>
+export default {
+    props: {
+        configDialog: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            aDialog: false
+        }
+    },
+    watch: {
+        configDialog(newDialog) {
+            this.aDialog = newDialog
+        },
+        aDialog(newAdialog) {
+            this.$emit('close', newAdialog);
+        }
+    },
+    computed: {
+        pattern() {
+            return this.$store.state.calibration.pattern
+        },
+        mockPattern() {
+            return this.$store.state.calibration.mockPattern
+        },
+    },
+    methods: {
+        recalibrate() {
+            this.$emit('recalib');
+        },
+        goBack(){
+            this.$emit('goBack');
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/calibration/GeneralConfigCard.vue b/src/components/calibration/GeneralConfigCard.vue
index 630b884..1ab3a29 100644
--- a/src/components/calibration/GeneralConfigCard.vue
+++ b/src/components/calibration/GeneralConfigCard.vue
@@ -10,10 +10,10 @@
                     <TextField :value="calibName" @input="updateCalibName" />
                 </div>
                 <div class="custom-outline">
-                    <Slider :value="pointNumber" :min="Number(1)" :max="Number(9)" label="Point Number"
+                    <Slider :value="pointNumber" :min="Number(2)" :max="Number(9)" label="Point Number"
                         @input="updatePointNumber" />
                     <Slider :value="samplePerPoint" label="Sample Per Point" @input="updateSamplePerPoint" />
-                    <Slider :value="msPerCapture" :min="Number(100)" :max="Number(800)" label="Milliseconds Per Point Capture"
+                    <Slider :value="msPerCapture" :min="Number(10)" :max="Number(800)" label="Milliseconds Per Point Capture"
                         @input="updateMsPerCapture" />
                 </div>
                 <div class="custom-outline">
diff --git a/src/components/calibration/Offset.vue b/src/components/calibration/Offset.vue
index f567ad3..671a85b 100644
--- a/src/components/calibration/Offset.vue
+++ b/src/components/calibration/Offset.vue
@@ -64,16 +64,13 @@ export default {
         generatePoints(offsetX, offsetY, width, height, pointNum) {
             const possiblePatterns = [
                 [
-                    { x: width / 2, y: height / 2 }
-                ],
-                [
-                    { x: offsetX, y: height / 2 },
-                    { x: width - offsetX, y: height / 2 }
+                    { x: offsetX, y: height - offsetY },
+                    { x: width - offsetX, y: offsetY },
                 ],
                 [
-                    { x: offsetX, y: height / 2 },
-                    { x: width / 2, y: offsetY },
-                    { x: width - offsetX, y: height / 2 }
+                    { x: offsetX, y: height - offsetY },
+                    { x: width / 2, y: height / 2 },
+                    { x: width - offsetX, y: offsetY },
                 ],
                 [
                     { x: offsetX, y: offsetY },
diff --git a/src/components/calibration/PointModal.vue b/src/components/calibration/PointModal.vue
new file mode 100644
index 0000000..4ad399b
--- /dev/null
+++ b/src/components/calibration/PointModal.vue
@@ -0,0 +1,96 @@
+<template>
+    <v-dialog v-model="auxDialog" max-width="300px" max-height="500px">
+        <v-card>
+            <v-card-title class="headline text-center mx-auto">Point {{ pointNumber + 1 }}</v-card-title>
+            <v-card-text>
+                <v-container>
+                    <v-row>
+                        <v-col cols="6" class="font-weight-bold">(x, y):</v-col>
+                        <v-col cols="6" class="text-right">({{ x }}, {{ y }})</v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col cols="6" class="font-weight-bold">Accuracy:</v-col>
+                        <v-col cols="6" class="text-right">{{ accuracy }} px</v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col cols="6" class="font-weight-bold">precision (SD):</v-col>
+                        <v-col cols="6" class="text-right">{{ precision }} px</v-col>
+                    </v-row>
+                </v-container>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="blue darken-1" text @click="select">{{ selected ? 'unselect' : 'select' }}</v-btn>
+                <v-btn color="blue darken-1" text @click="auxDialog = false">close</v-btn>
+                <v-spacer></v-spacer>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+  
+
+<script>
+export default {
+    props: {
+        dialog: {
+            type: Boolean,
+            default: false
+        },
+        x: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        precision: {
+            type: Number,
+            default: 0
+        },
+        accuracy: {
+            type: Number,
+            default: 0
+        },
+        pointNumber: {
+            type: Number,
+            default: 0
+        }
+    },
+    computed: {
+        pattern() {
+            return this.$store.state.calibration.pattern
+        },
+        mockPattern() {
+            return this.$store.state.calibration.mockPattern
+        },
+    },
+    data() {
+        return {
+            auxDialog: false,
+            selected: false
+        }
+    },
+    watch: {
+        dialog(newDialog) {
+            this.auxDialog = newDialog
+        },
+        auxDialog(newAuxDialog) {
+            this.$emit('close', newAuxDialog);
+        },
+        mockPattern(newMockPattern) {
+            const point = this.pattern[this.pointNumber]
+            this.selected = newMockPattern.includes(point)
+        },
+        pointNumber(newPointNumber) {
+            const point = this.pattern[newPointNumber]
+            this.selected = this.mockPattern.includes(point)
+        }
+    },
+    methods: {
+        select() {
+            this.$emit('select', this.pointNumber)
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/general/DraggableFloatingButton.vue b/src/components/general/DraggableFloatingButton.vue
new file mode 100644
index 0000000..79f1079
--- /dev/null
+++ b/src/components/general/DraggableFloatingButton.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <v-btn v-if="showButton" class="draggable-btn" fab dark :color="color" ref="draggableBtn" @mousedown="startDrag">
+      <v-icon>{{ icon }}</v-icon>
+    </v-btn>
+  </div>
+</template>
+  
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'green'
+    },
+    icon: {
+      type: String,
+      default: 'mdi-cursor-move',
+    },
+  },
+  data() {
+    return {
+      dragging: false,
+      showButton: true,
+      initialMouseX: 0,
+      initialMouseY: 0,
+      initialBtnX: 0,
+      initialBtnY: 0,
+      startTime: 0,
+    };
+  },
+  methods: {
+    startDrag(event) {
+      this.dragging = true;
+      this.startTime = new Date();
+      this.initialMouseX = event.clientX;
+      this.initialMouseY = event.clientY;
+      const rect = this.$refs.draggableBtn.$el.getBoundingClientRect();
+      this.initialBtnX = rect.left;
+      this.initialBtnY = rect.top;
+
+      window.addEventListener("mousemove", this.handleDrag);
+      window.addEventListener("mouseup", this.endDrag);
+    },
+    handleDrag(event) {
+      if (this.dragging) {
+        const deltaX = event.clientX - this.initialMouseX;
+        const deltaY = event.clientY - this.initialMouseY;
+        this.$refs.draggableBtn.$el.style.left = this.initialBtnX + deltaX + "px";
+        this.$refs.draggableBtn.$el.style.top = this.initialBtnY + deltaY + "px";
+      }
+    },
+    endDrag() {
+      if (this.dragging) {
+        this.dragging = false;
+        const endTime = new Date();
+        const timeDifference = endTime - this.startTime;
+        // console.log(`User dragged for ${timeDifference} milliseconds`);
+        if (timeDifference <= 100) {
+          this.handleClick()
+        }
+      }
+    },
+    handleClick(event) {
+      if (!this.dragging) {
+        this.$emit('click', event);
+      }
+    },
+  },
+};
+</script>
+  
+<style>
+.draggable-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/store/calibration.js b/src/store/calibration.js
index ea60b34..bda1db4 100644
--- a/src/store/calibration.js
+++ b/src/store/calibration.js
@@ -3,7 +3,7 @@ export default {
     state: {
         calibName: '',
         pointNumber: 5,
-        samplePerPoint: 10,
+        samplePerPoint: 20,
         radius: 20,
         offset: 50,
         backgroundColor: '#FFFFFFFF',
@@ -13,7 +13,9 @@ export default {
         leftEyeTreshold: 5,
         rightEyeTreshold: 5,
         index: 0,
-        msPerCapture: 10,
+        msPerCapture: 50,
+        pattern: [],
+        mockPattern: []
     },
     mutations: {
         setCalibName(state, newCalibName) {
@@ -34,6 +36,17 @@ export default {
         setPattern(state, newPattern) {
             state.pattern = newPattern;
         },
+        setMockPatternElement(state, newPatternLike) {
+            if (!state.mockPattern.includes(newPatternLike)) {
+                state.mockPattern.push(newPatternLike)
+            } else {
+                const index = state.mockPattern.indexOf(newPatternLike);
+                state.mockPattern.splice(index, 1);
+            }
+        },
+        setMockPattern(state, newMockPattern) {
+            state.mockPattern = newMockPattern
+        },
         setBackgroundColor(state, newBackgroundColor) {
             state.backgroundColor = newBackgroundColor
         },
@@ -55,7 +68,7 @@ export default {
         setIndex(state, newIndex) {
             state.index = newIndex
         },
-        setMsPerCapture(state, newMsPerCapture){
+        setMsPerCapture(state, newMsPerCapture) {
             state.msPerCapture = newMsPerCapture
         }
     },
@@ -85,7 +98,8 @@ export default {
                     "Content-Type": "multipart/form-data",
                 },
             });
-            console.log(res);
+            return res.data
+            // console.log(res);
         }
     }
 }
\ No newline at end of file
diff --git a/src/views/CalibrationConfig.vue b/src/views/CalibrationConfig.vue
index 999e5b1..b3919f4 100644
--- a/src/views/CalibrationConfig.vue
+++ b/src/views/CalibrationConfig.vue
@@ -12,12 +12,13 @@
             </v-row>
         </v-container>
 
-        <v-btn color="green darken-2" fab bottom right absolute
+        <DraggableFloatingButton :icon="'mdi-content-save'" @click="changePage" />
+        <!-- <v-btn color="green darken-2" fab bottom right absolute
             :style="{ 'z-index': 10, 'elevation': '12', 'bottom': '20px', 'right': '20px' }" @click="changePage">
             <v-icon color="white">
                 mdi-content-save
             </v-icon>
-        </v-btn>
+        </v-btn> -->
     </div>
 </template>
   
@@ -25,12 +26,15 @@
 import Toolbar from "@/components/general/Toolbar.vue";
 import GeneralConfigCard from "@/components/calibration/GeneralConfigCard.vue";
 import MiscConfigCard from "@/components/calibration/MiscConfigCard.vue";
+import DraggableFloatingButton from '@/components/general/DraggableFloatingButton.vue';
+
 
 export default {
     components: {
         Toolbar,
         GeneralConfigCard,
         MiscConfigCard,
+        DraggableFloatingButton
     },
     methods: {
         changePage() {
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 32a1579..db73646 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -8,25 +8,34 @@
     </v-row>
 
     <!-- New Calibration Btn -->
-    <v-tooltip left>
+    <DraggableFloatingButton :color="'black'" :icon="'mdi-plus'" @click="goToClibration" />
+    <!-- <v-tooltip left>
       <template v-slot:activator="{ on, attrs }">
         <v-btn dark bottom right fab fixed v-bind="attrs" v-on="on" :to="`/calibration`">
           <v-icon>mdi-plus</v-icon>
         </v-btn>
       </template>
       <span>New Calibration</span>
-    </v-tooltip>
+    </v-tooltip> -->
   </div>
 </template>
 
 <script>
 import Toolbar from "@/components/general/Toolbar.vue";
 import CalibTable from "@/components/general/CalibTable.vue";
+import DraggableFloatingButton from '@/components/general/DraggableFloatingButton.vue';
 
 export default {
   components: {
     Toolbar,
     CalibTable,
+    DraggableFloatingButton,
   },
+  methods: {
+    goToClibration() {
+      this.$router.push("/calibration");
+    }
+  }
+
 };
 </script>
diff --git a/src/views/DoubleCalibrationRecord.vue b/src/views/DoubleCalibrationRecord.vue
index 554f973..3f6fd13 100644
--- a/src/views/DoubleCalibrationRecord.vue
+++ b/src/views/DoubleCalibrationRecord.vue
@@ -10,21 +10,21 @@
     <div v-else>
       <v-row justify="center" align="center" class="ma-0 justify-center align-center">
         <div v-if="index === 0" class="text-center"
-          style="z-index: 1;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+          style="z-index: 1;position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%);">
           slowly press 'S' while looking at the point to begin
         </div>
-        <div v-if="index === pattern.length - 1" class="text-center"
-          style="z-index: 1;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> press 'S' one
+        <div v-if="index === usedPattern.length - 1" class="text-center"
+          style="z-index: 1;position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);"> press 'S' one
           more time</div>
-        <div v-if="index === pattern.length" class="text-center" style="z-index: 1;">
+        <div v-if="index === usedPattern.length" class="text-center" style="z-index: 1;">
           <div v-if="currentStep === 1"
-            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+            style="position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);">
             <div>
               you've collected {{ circleIrisPoints.length }} train points
             </div>
             <v-btn @click="nextStep()">Next Step</v-btn>
           </div>
-          <div v-else style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+          <div v-else style="position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);">
             <div>
               you've collected {{ calibPredictionPoints.length }} validation points
             </div>
@@ -61,6 +61,7 @@ export default {
       animationRefreshRate: 10,
       animationFrames: 250,
       innerCircleRadius: 5,
+      usedPattern: [],
     };
   },
   computed: {
@@ -76,6 +77,9 @@ export default {
     pattern() {
       return this.$store.state.calibration.pattern
     },
+    mockPattern() {
+      return this.$store.state.calibration.mockPattern
+    },
     backgroundColor() {
       return this.$store.state.calibration.backgroundColor
     },
@@ -104,10 +108,14 @@ export default {
       return this.$store.state.calibration.isControlled
     },
   },
+  created() {
+    this.$store.commit('setIndex', 0)
+    this.usedPattern = (this.mockPattern.length > 0) ? this.mockPattern : this.pattern
+  },
   async mounted() {
     await this.startWebCamCapture();
-    this.drawPoint(this.pattern[0].x, this.pattern[0].y, 1)
-    this.advance(this.pattern, this.circleIrisPoints, this.msPerCapture)
+    this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
+    this.advance(this.usedPattern, this.circleIrisPoints, this.msPerCapture)
   },
   methods: {
     advance(pattern, whereToSave, timeBetweenCaptures) {
@@ -118,6 +126,7 @@ export default {
           if (i <= pattern.length - 1) {
             document.removeEventListener('keydown', keydownHandler)
             await th.extract(pattern[i], timeBetweenCaptures)
+
             th.$store.commit('setIndex', i)
             i++
             if (i != pattern.length) {
@@ -127,7 +136,7 @@ export default {
           } else {
             th.$store.commit('setIndex', i)
             document.removeEventListener('keydown', keydownHandler)
-            th.savePoint(whereToSave, th.pattern)
+            th.savePoint(whereToSave, th.usedPattern)
             const canvas = document.getElementById('canvas');
             const ctx = canvas.getContext('2d');
             ctx.clearRect(0, 0, canvas.width, canvas.height)
@@ -137,13 +146,13 @@ export default {
       document.addEventListener('keydown', keydownHandler)
     },
     nextStep() {
-      this.pattern.forEach(element => {
+      this.usedPattern.forEach(element => {
         delete element.data;
       });
       this.$store.commit('setIndex', 0)
       this.currentStep = 2
-      this.drawPoint(this.pattern[0].x, this.pattern[0].y, 1)
-      this.advance(this.pattern, this.calibPredictionPoints, this.msPerCapture)
+      this.drawPoint(this.usedPattern[0].x, this.usedPattern[0].y, 1)
+      this.advance(this.usedPattern, this.calibPredictionPoints, this.msPerCapture)
     },
     async extract(point, timeBetweenCaptures) {
       point.data = [];
@@ -170,7 +179,6 @@ export default {
         } else {
           const newPrediction = { leftIris: leftIris[0], rightIris: rightIris[0] };
           point.data.push(newPrediction);
-          console.log(point.data.length);
           const radius = (this.radius / this.predByPointCount) * a
           this.drawPoint(point.x, point.y, radius)
           a++;
@@ -251,11 +259,29 @@ export default {
       })
       const screenHeight = window.screen.height;
       const screenWidth = window.screen.width;
-      await this.$store.dispatch('sendData', { circleIrisPoints: this.circleIrisPoints, calibPredictionPoints: this.calibPredictionPoints, screenHeight: screenHeight, screenWidth: screenWidth })
+      var predictions =
+        await this.$store.dispatch('sendData', { circleIrisPoints: this.circleIrisPoints, calibPredictionPoints: this.calibPredictionPoints, screenHeight: screenHeight, screenWidth: screenWidth })
+
+      if (typeof predictions === 'string') {
+        predictions = predictions.replace(/NaN/g, '1');
+        try {
+          predictions = JSON.parse(predictions);
+        } catch (error) {
+          console.error('Error parsing predictions string:', error);
+        }
+      }
+      for (var a = 0; a < this.usedPattern.length; a++) {
+        const element = predictions[this.usedPattern[a].x.toString().split('.')[0]][this.usedPattern[a].y.toString().split('.')[0]]
+        this.usedPattern[a].precision = element.PrecisionSD.toFixed(2)
+        this.usedPattern[a].accuracy = element.Accuracy.toFixed(2)
+        this.usedPattern[a].predictionX = element.predicted_x
+        this.usedPattern[a].predictionY = element.predicted_y
+      }
       this.$store.dispatch('extractXYValues', { extract: this.circleIrisPoints, hasCalib: true })
       this.$store.dispatch('extractXYValues', { extract: this.calibPredictionPoints, hasCalib: false })
       this.stopRecord()
-      this.$router.push('/dashboard');
+      this.$store.commit('setMockPattern', [])
+      this.$router.push('/postCalibration');
     },
     savePoint(whereToSave, patternLike) {
       patternLike.forEach(point => {
diff --git a/src/views/PostCalibration.vue b/src/views/PostCalibration.vue
index f9916f1..dd59dc5 100644
--- a/src/views/PostCalibration.vue
+++ b/src/views/PostCalibration.vue
@@ -1,101 +1,186 @@
 <template>
     <div>
-        <canvas ref="canvas" />
+        <canvas id="canvas" />
+        <div>
+            <PointModal :x="Number(x)" :y="Number(y)" :precision="Number(precision)" :accuracy="Number(accuracy)"
+                :dialog="dialog" :pointNumber="pointNumber" @close="dialogCancel" @select="select" />
+        </div>
+        <div>
+            <ConfigModal :configDialog="configDialog" @close="configDialogCancel" @recalib="recalibrate"
+                @goBack="goToDashboard" />
+        </div>
+        <v-col>
+            <DraggableFloatingButton @click="callConfigModal" :icon="'mdi-cog'" />
+        </v-col>
     </div>
 </template>
 
 <script>
-import * as tf from '@tensorflow/tfjs';
+import PointModal from '@/components/calibration/PointModal.vue';
+import DraggableFloatingButton from '@/components/general/DraggableFloatingButton.vue';
+import ConfigModal from '@/components/calibration/ConfigModal.vue';
+
 export default {
+    components: {
+        PointModal,
+        DraggableFloatingButton,
+        ConfigModal
+    },
+    data() {
+        return {
+            innerCircleRadius: 5,
+            x: 0,
+            y: 0,
+            precision: 0,
+            accuracy: 0,
+            dialog: false,
+            configDialog: false,
+            pointNumber: 0
+        }
+    },
     async mounted() {
-        this.resizeCanvas()
-        this.draw(this.fixedTrainData.calibX, this.fixedTrainData.calibY, 'black')
-        await this.trainModel()
-        await this.predictCalibrationValues()
-        // this.draw(this.fixedTrainData.rightX, this.fixedTrainData.rightY, 'blue')
-        // this.draw(this.fixedTrainData.leftX, this.fixedTrainData.leftY, 'red')
-        // this.draw(this.predictTrainData.rightX, this.predictTrainData.rightY, 'green')
-        // this.draw(this.predictTrainData.leftX, this.predictTrainData.leftY, 'orange')
+        this.initCanvas()
+        this.drawCalibPoints()
     },
     computed: {
+        radius() {
+            return this.$store.state.calibration.radius
+        },
+        backgroundColor() {
+            return this.$store.state.calibration.backgroundColor
+        },
+        pointColor() {
+            return this.$store.state.calibration.pointColor
+        },
+        pattern() {
+            return this.$store.state.calibration.pattern;
+        },
+        mockPattern() {
+            return this.$store.state.calibration.mockPattern;
+        },
         fixedTrainData() {
             return this.$store.state.predict.fixedTrainData;
         },
         predictTrainData() {
             return this.$store.state.predict.predictTrainData;
         },
-        model() {
-            return this.$store.state.model
-        },
-        predictionResults() {
-            return this.makePredictions();
-        },
+    },
+    watch: {
+        mockPattern() {
+            this.drawCalibPoints()
+        }
     },
     methods: {
-        async trainModel() {
-            await this.$store.dispatch('trainModel', tf)
-        },
-        predictCalibrationValues() {
-            // if (!this.model) {
-            //     console.error('Model not trained. Please train the model first.');
-            //     return;
-            // }
-
-            // const rightX = tf.tensor2d(this.predictTrainData.rightX, [this.predictTrainData.rightX.length, 1]);
-            // const rightY = tf.tensor2d(this.predictTrainData.rightY, [this.predictTrainData.rightY.length, 1]);
-            // const leftX = tf.tensor2d(this.predictTrainData.leftX, [this.predictTrainData.leftX.length, 1]);
-            // const leftY = tf.tensor2d(this.predictTrainData.leftY, [this.predictTrainData.leftY.length, 1]);
-
-            // const inputTensors = tf.concat([rightX, rightY, leftX, leftY], 1);
-
-            // const predictions = this.model.predict(inputTensors).dataSync();
-
-            // const calibXPredictions = predictions.slice(0, this.predictTrainData.rightX.length);
-            // const calibYPredictions = predictions.slice(this.predictTrainData.rightX.length);
+        callConfigModal() {
+            this.configDialog = true
+        },
+        select(pointNumber) {
+            this.$store.commit('setMockPatternElement', this.pattern[pointNumber])
+        },
+        drawCalibPoints() {
+            this.initCanvas()
+            for (var i = 0; i < this.pattern.length; i++) {
+                // calib points
+                const isSelected = this.mockPattern.includes(this.pattern[i])
+                this.drawPoints(this.pattern[i].x, this.pattern[i].y, this.radius * this.pattern[i].accuracy, this.innerCircleRadius, true, isSelected)
 
-            // rightX.dispose();
-            // rightY.dispose();
-            // leftX.dispose();
-            // leftY.dispose();
-            // inputTensors.dispose();
-            // console.log(calibXPredictions)
-            // console.log(calibYPredictions);
 
-            // return { calibXPredictions, calibYPredictions };
+                for (var a = 0; a < this.pattern[i].predictionX.length; a++) {
+                    // predicted points
+                    this.drawPoints(this.pattern[i].predictionX[a], this.pattern[i].predictionY[a], 0, 2, false)
+                }
+            }
+        },
+        recalibrate() {
+            this.$router.push('/calibration/record')
+        },
+        goToDashboard() {
+            this.$router.push('/dashboard')
+        },
+        callModal(patternLike, pointNumber) {
+            this.x = patternLike.x
+            this.y = patternLike.y
+            this.precision = patternLike.precision
+            this.accuracy = patternLike.accuracy
+            this.dialog = true
+            this.pointNumber = pointNumber
+        },
+        configDialogCancel(newDialog) {
+            this.configDialog = newDialog
+        },
+        dialogCancel(newDialog) {
+            this.dialog = newDialog
         },
 
-        async makePredictions() {
-            // if (!this.model) {
-            //     console.error('Model not trained. Please train the model first.');
-            //     return;
-            // }
-
-            // const { calibXPredictions, calibYPredictions } = this.predictCalibrationValues();
+        initCanvas() {
+            const canvas = document.getElementById('canvas');
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight
+            const ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            ctx.fillStyle = this.backgroundColor;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            const th = this;
+            canvas.addEventListener('click', function (event) {
+                const rect = canvas.getBoundingClientRect();
+                const mouseX = event.clientX - rect.left;
+                const mouseY = event.clientY - rect.top;
 
-            // console.log('Calibration X Predictions:', calibXPredictions);
-            // console.log('Calibration Y Predictions:', calibYPredictions);
-        },
-        resizeCanvas() {
-            const canvas = this.$refs.canvas;
-            const screenWidth = window.innerWidth;
-            const screenHeight = window.innerHeight;
+                for (let i = 0; i < th.pattern.length; i++) {
+                    const point = th.pattern[i];
+                    const distanceFromCenter = Math.sqrt(
+                        Math.pow(mouseX - point.x, 2) + Math.pow(mouseY - point.y, 2)
+                    );
 
-            canvas.width = screenWidth;
-            canvas.height = screenHeight;
+                    if (distanceFromCenter <= th.radius) {
+                        const patternEquivalent = th.pattern[i]
+                        th.callModal(patternEquivalent, i)
+                    }
+                }
+            });
         },
-
-        draw(arrX, arrY, color) {
-            const canvas = this.$refs.canvas;
+        drawPoints(x, y, radius, innerRadius, hasCircumference, isSelected) {
+            const canvas = document.getElementById('canvas');
             const ctx = canvas.getContext('2d');
+            //circle
+            ctx.beginPath();
+            ctx.strokeStyle = 'black';
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 
-            for (let i = 0; i < arrX.length; i++) {
-                const x = arrX[i];
-                const y = arrY[i];
+            ctx.arc(
+                x,
+                y,
+                radius,
+                0,
+                Math.PI * 2,
+                false
+            );
+            ctx.stroke();
+            ctx.fill();
+            // inner circle
+            ctx.beginPath();
+            ctx.strokeStyle = "red";
+            ctx.fillStyle = "red";
+            ctx.arc(
+                x,
+                y,
+                innerRadius,
+                0,
+                Math.PI * 2,
+                false
+            );
+            ctx.stroke();
+            ctx.fill();
+            // hollow circumference
+            if (hasCircumference) {
+                const color = isSelected ? 'blue' : this.pointColor
+                ctx.strokeStyle = color;
+                ctx.fillStyle = color;
 
+                ctx.lineWidth = 1;
                 ctx.beginPath();
-                ctx.arc(x, y, 5, 0, 2 * Math.PI);
-                ctx.fillStyle = `${color}`;
-                ctx.fill();
+                ctx.arc(x, y, this.radius, 0, 2 * Math.PI, false);
+                ctx.stroke();
             }
         },
     },