Feat/recalibration

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>

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">

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 },

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>

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>
+

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);
         }
     }
 }

src/views/CalibrationConfig.vue

@@ -12,25 +12,29 @@
             </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>
 
 <script>
 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() {