Merge pull request #14 from uramakilab/feat/blink-filter

Feat/blink filter

src/components/calibration/BlinkTreshold.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <Slider :value="leftEyeTreshold" :min="Number(3)" :max="Number(10)" :decimal="true" label="left eye treshold"
+            @input="updateLeftTreshold" />
+        <Slider :value="rightEyeTreshold" :min="Number(3)" :max="Number(10)" :decimal="true" label="right eye treshold"
+            @input="updateRightTreshold" />
+    </div>
+</template>
+
+<script>
+import Slider from "@/components/general/Slider.vue";
+
+export default {
+    components: {
+        Slider,
+    },
+    computed: {
+        leftEyeTreshold() {
+            return Number(this.$store.state.calibration.leftEyeTreshold)
+        },
+        rightEyeTreshold() {
+            return Number(this.$store.state.calibration.rightEyeTreshold)
+        },
+    },
+    methods: {
+        updateLeftTreshold(value) {
+            this.$store.commit('setLeftTreshold', value);
+        },
+        updateRightTreshold(value) {
+            this.$store.commit('setRightTreshold', value);
+        },
+    },
+}
+</script>

src/components/calibration/BlinkTresholdCard.vue

@@ -0,0 +1,53 @@
+<template>
+    <v-container>
+        <v-col>
+            <v-card outlined>
+                <v-card-title>
+                    blink filter config:
+                </v-card-title>
+                <div class="custom-outline">
+                    Control:
+                    <v-checkbox v-model="blinkFilter" label="Blink Filter" color="black"></v-checkbox>
+                </div>
+                <div v-if="blinkFilter" class="custom-outline">
+                    <BlinkTreshold />
+                </div>
+
+            </v-card>
+        </v-col>
+    </v-container>
+</template>
+
+<script>
+import BlinkTreshold from './BlinkTreshold.vue'
+
+export default {
+    components: {
+        BlinkTreshold,
+    },
+    data() {
+        return {
+            blinkFilter: true
+        }
+    },
+    watch: {
+        blinkFilter(value) {
+            this.updateBlinkFilter(value)
+        },
+    },
+    methods: {
+        updateBlinkFilter(value) {
+            this.$store.commit('setBlinkFilter', value)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.custom-outline {
+    border: 1px solid #000;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 10px;
+}
+</style>

src/components/calibration/GeneralConfigCard.vue

@@ -14,12 +14,6 @@
                         @input="updatePointNumber" />
                     <Slider :value="samplePerPoint" label="Sample Per Point" @input="updateSamplePerPoint" />
                 </div>
-                <div v-if="blinkFilter" class="custom-outline">
-                    <Slider :value="leftEyeTreshold" :min="Number(3)" :max="Number(7)" :decimal="true"
-                        label="left eye treshold" @input="updateLeftTreshold" />
-                    <Slider :value="rightEyeTreshold" :min="Number(3)" :max="Number(7)" :decimal="true"
-                        label="right eye treshold" @input="updateRightTreshold" />
-                </div>
                 <div class="custom-outline">
                     <Radius />
                     <Offset />
@@ -40,7 +34,7 @@ export default {
         Radius,
         Offset,
         Slider,
-        TextField
+        TextField,
     },
     computed: {
         samplePerPoint() {
@@ -55,12 +49,6 @@ export default {
         blinkFilter() {
             return this.$store.state.calibration.blinkFilter
         },
-        leftEyeTreshold() {
-            return Number(this.$store.state.calibration.leftEyeTreshold)
-        },
-        rightEyeTreshold() {
-            return Number(this.$store.state.calibration.rightEyeTreshold)
-        },
     },
     methods: {
         updateSamplePerPoint(value) {
@@ -78,12 +66,6 @@ export default {
                 console.log('Value contains only white spaces or is empty');
             }
         },
-        updateLeftTreshold(value) {
-            this.$store.commit('setLeftTreshold', value);
-        },
-        updateRightTreshold(value) {
-            this.$store.commit('setRightTreshold', value);
-        },
     },
 };
 </script>

src/components/calibration/MiscConfigCard.vue

@@ -8,7 +8,6 @@
                 <div class="custom-outline">
                     Control:
                     <v-checkbox v-model="isControlled" label="Controlled Calibration" color="black"></v-checkbox>
-                    <v-checkbox v-model="blinkFilter" label="Blink Filter" color="black"></v-checkbox>
                 </div>
                 <div class="custom-outline">
                     Background Color:
@@ -30,7 +29,6 @@ export default {
             backgroundColor: '#FFFFFFFF',
             pointColor: '#000000FF',
             isControlled: true,
-            blinkFilter: true,
         }
     },
     watch: {
@@ -43,9 +41,6 @@ export default {
         isControlled(value) {
             this.updateControlled(value)
         },
-        blinkFilter(value) {
-            this.updateBlinkFilter(value)
-        },
     },
     methods: {
         updateBackgroundColor(value) {
@@ -57,9 +52,6 @@ export default {
         updateControlled(value) {
             this.$store.commit('setControlled', value)
         },
-        updateBlinkFilter(value) {
-            this.$store.commit('setBlinkFilter', value)
-        },
     }
 }
 </script>

src/store/calibration.js

@@ -12,6 +12,7 @@ export default {
         blinkFilter: true,
         leftEyeTreshold: 5,
         rightEyeTreshold: 5,
+        index: 0,
     },
     mutations: {
         setCalibName(state, newCalibName) {
@@ -50,6 +51,10 @@ export default {
         setRightTreshold(state, newRightTreshold) {
             state.rightEyeTreshold = newRightTreshold
         },
+        setIndex(state, newIndex) {
+            state.index = newIndex
+            console.log(`index: ${state.index}`)
+        },
     },
     actions: {
         async sendData(context, data) {

src/views/CameraConfiguration.vue

@@ -3,12 +3,15 @@
         <Toolbar />
         <v-container class="mt-12">
             <v-row justify="center">
+                <v-col>
+                    <BlinkTresholdCard />
+                </v-col>
                 <v-col cols="12" lg="7" md="7">
                     <div id="box" style="text-align: center;">
                         <v-col>
                             <div v-if="isModelLoaded"
                                 style="position: relative; display: flex; justify-content: center; align-items: center;">
-                                <video autoplay id="video-tag" />
+                                <video autoplay id="video-tag" style="transform: scaleX(-1)" />
                                 <canvas id="canvas" width="600" height="500"
                                     style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(-1)" />
                                 <v-img v-if="isCameraOn" style="width: 100%; height: 100%; position: absolute;"
@@ -33,19 +36,21 @@
 
 <script>
 import Toolbar from "@/components/general/Toolbar.vue";
+import BlinkTresholdCard from "@/components/calibration/BlinkTresholdCard.vue";
 
 const tf = require("@tensorflow/tfjs");
 const faceLandmarksDetection = require("@tensorflow-models/face-landmarks-detection");
 
 export default {
     components: {
         Toolbar,
+        BlinkTresholdCard
     },
     data() {
         return {
             isCameraOn: false,
             webcamStream: null,
-            video: null
+            video: null,
         };
     },
     computed: {
@@ -132,14 +137,14 @@ export default {
                 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) 
+                th.blinkFilter ? this.drawEye(rightIris, rightEyelid, ctx, isRightBlink) : this.drawEye(rightIris, rightEyelid, ctx, false)
 
                 // face contour
                 this.drawFace(ctx, pred)