diff --git a/src/pages/detect.vue b/src/pages/detect.vue index e728977..18e9eb2 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -4,14 +4,12 @@ {{ regions[activeRegion] }} - - -
- -
-
- - + +
+ +
+
+ @@ -26,7 +24,7 @@ -
+
@@ -112,15 +110,19 @@ this.$refs.image_chooser.click() //TODO This really needs to be a promise and resolve system this.imageLoaded = true; + var box = this.$refs.structure_box }, selectChip ( iChip ) { this.selectedChip = iChip var box = this.$refs.structure_box + var img = this.$refs.image_src + var imgWidth = img.offsetWidth + var imgHeight = img.offsetHeight box.style.display = "block" - box.style.left = `${this.resultData.detections[iChip].left * 100}%` - box.style.top = `${this.resultData.detections[iChip].top * 100}%` - box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * 100}%` - box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * 100}%` + box.style.left = `calc( 50% - ${imgWidth/2}px + ${this.resultData.detections[iChip].left * imgWidth}px)` + box.style.top = `${this.resultData.detections[iChip].top * imgHeight}px` + box.style.width = `${(this.resultData.detections[iChip].right - this.resultData.detections[iChip].left) * imgWidth}px` + box.style.height = `${(this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top) * imgHeight}px` }, 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?`, () => {