Skip to content

Commit

Permalink
Merge pull request #25 from uramakilab/feat/recalibration
Browse files Browse the repository at this point in the history
Feat/recalibration
  • Loading branch information
Natanco1 authored Dec 11, 2023
2 parents 7c840ec + 8cd6ffd commit 7fbe9a4
Show file tree
Hide file tree
Showing 10 changed files with 474 additions and 102 deletions.
60 changes: 60 additions & 0 deletions src/components/calibration/ConfigModal.vue
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions src/components/calibration/GeneralConfigCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
13 changes: 5 additions & 8 deletions src/components/calibration/Offset.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
96 changes: 96 additions & 0 deletions src/components/calibration/PointModal.vue
Original file line number Diff line number Diff line change
@@ -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>
81 changes: 81 additions & 0 deletions src/components/general/DraggableFloatingButton.vue
Original file line number Diff line number Diff line change
@@ -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>

22 changes: 18 additions & 4 deletions src/store/calibration.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export default {
state: {
calibName: '',
pointNumber: 5,
samplePerPoint: 10,
samplePerPoint: 20,
radius: 20,
offset: 50,
backgroundColor: '#FFFFFFFF',
Expand All @@ -13,7 +13,9 @@ export default {
leftEyeTreshold: 5,
rightEyeTreshold: 5,
index: 0,
msPerCapture: 10,
msPerCapture: 50,
pattern: [],
mockPattern: []
},
mutations: {
setCalibName(state, newCalibName) {
Expand All @@ -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
},
Expand All @@ -55,7 +68,7 @@ export default {
setIndex(state, newIndex) {
state.index = newIndex
},
setMsPerCapture(state, newMsPerCapture){
setMsPerCapture(state, newMsPerCapture) {
state.msPerCapture = newMsPerCapture
}
},
Expand Down Expand Up @@ -85,7 +98,8 @@ export default {
"Content-Type": "multipart/form-data",
},
});
console.log(res);
return res.data
// console.log(res);
}
}
}
8 changes: 6 additions & 2 deletions src/views/CalibrationConfig.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
Loading

0 comments on commit 7fbe9a4

Please sign in to comment.