ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Add small features to detect page (#34)

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Reviewed-on: Georgi_Lab/ALVINN_f7#34
This commit is contained in:
Justin Georgi
2023-12-08 07:56:41 -07:00
parent 484dff54c7
commit e7a8c43a74
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/detect.vue
View File

@@ -10,7 +10,7 @@
<f7-block class="detect-grid"> <f7-block class="detect-grid">
<div class="image-container"> <div class="image-container">
<img v-if="imageView" :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" /> <img v-if="imageView" :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
<SvgIcon v-else icon="image" fill-color="var(--avn-theme-color)"/> <SvgIcon v-else icon="image" fill-color="var(--avn-theme-color)" @click="selectImage" />
<div ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" /> <div ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" />
</div> </div>
<div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;"> <div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -216,7 +216,7 @@
filter: [] filter: []
}, },
serverSettings: {}, serverSettings: {},
debugOn: true, debugOn: false,
debugText: ['Variables loaded'] debugText: ['Variables loaded']
} }
}, },
@@ -276,6 +276,7 @@
}, },
setData () { setData () {
var self = this var self = this
this.resetView()
if (this.serverSettings && this.serverSettings.use) { if (this.serverSettings && this.serverSettings.use) {
var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect` var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
var xhr = new XMLHttpRequest() var xhr = new XMLHttpRequest()
@@ -326,6 +327,11 @@
var imgWidth var imgWidth
var imgHeight var imgHeight
if (this.selectedChip == iChip) {
this.resetView()
return
}
this.selectedChip = iChip this.selectedChip = iChip
const box = this.$refs.structure_box const box = this.$refs.structure_box
const img = this.$refs.image_src const img = this.$refs.image_src
@@ -347,9 +353,7 @@
deleteChip ( iChip ) { deleteChip ( iChip ) {
f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => { f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {
this.resultData.detections.splice(iChip, 1) this.resultData.detections.splice(iChip, 1)
this.selectedChip = -1 this.resetView()
const box = this.$refs.structure_box
box.style.display = 'none'
}); });
}, },
getImage () { getImage () {
@@ -363,13 +367,16 @@
loadImage.then(() => { loadImage.then(() => {
this.imageLoaded = true this.imageLoaded = true
this.resultData = {} this.resultData = {}
this.selectedChip = -1 this.resetView()
const box = this.$refs.structure_box
box.style.display = 'none'
}).catch((e) => { }).catch((e) => {
console.log(e.message) console.log(e.message)
f7.dialog.alert('Error loading image') f7.dialog.alert('Error loading image')
}) })
},
resetView() {
this.selectedChip = -1
const box = this.$refs.structure_box
box.style.display = 'none'
} }
} }
} }