Select detections by image click (#78)

Closes: #77

If the user clocks on the image, any detections present at that location will be selecting in descending order of confidence.

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#78

src/pages/detect.vue

@@ -6,7 +6,7 @@
     </f7-navbar>
     <f7-block class="detect-grid">
       <div class="image-container">
-        <canvas id="im-draw" ref="image_cvs" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
+        <canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
         <SvgIcon v-if="!imageView"  icon="image" fill-color="var(--avn-theme-color)" @click="selectImage" />
       </div>
       <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -362,6 +362,18 @@
       showResults () {
         var filteredResults = this.resultData.detections
         if (!filteredResults) return []
+        const imCanvas = this.$refs.image_cvs
+        var imgWidth
+        var imgHeight
+        const imgAspect = this.imageView.width / this.imageView.height
+        const rendAspect = imCanvas.width / imCanvas.height
+        if (imgAspect >= rendAspect) {
+          imgWidth = imCanvas.width
+          imgHeight = imCanvas.width / imgAspect
+        } else {
+          imgWidth = imCanvas.height * imgAspect
+          imgHeight = imCanvas.height
+        }
         var allSelect = this.detectorLabels.every( s => { return s.detect } )
         var selectedLabels = this.detectorLabels
             .filter( l => { return l.detect })
@@ -370,6 +382,10 @@
           filteredResults[i].resultIndex = i
           filteredResults[i].aboveThreshold = d.confidence >= this.detectorLevel
           filteredResults[i].isSearched = allSelect || selectedLabels.includes(d.label)
+          filteredResults[i].cvsLeft = (imCanvas.width - imgWidth) / 2 + filteredResults[i].left * imgWidth
+          filteredResults[i].cvsRight = (imCanvas.width - imgWidth) / 2 + filteredResults[i].right * imgWidth
+          filteredResults[i].cvsTop = (imCanvas.height - imgHeight) / 2 + filteredResults[i].top * imgHeight
+          filteredResults[i].cvsBottom = (imCanvas.height - imgHeight) / 2 + filteredResults[i].bottom * imgHeight
         })
         return filteredResults
       },
@@ -454,23 +470,12 @@
           return
         }
 
-        var imgWidth
+        var boxLeft = this.resultData.detections[iChip].cvsLeft
-        var imgHeight
+        var boxTop = this.resultData.detections[iChip].cvsTop
-        this.selectedChip = iChip
+        var boxWidth = this.resultData.detections[iChip].cvsRight - this.resultData.detections[iChip].cvsLeft
-        var imgAspect = this.imageView.width / this.imageView.height
+        var boxHeight = this.resultData.detections[iChip].cvsBottom - this.resultData.detections[iChip].cvsTop
-        var rendAspect = imCanvas.width / imCanvas.height
-        if (imgAspect >= rendAspect) {
-          imgWidth = imCanvas.width
-          imgHeight = imCanvas.width / imgAspect
-        } else {
-          imgWidth = imCanvas.height * imgAspect
-          imgHeight = imCanvas.height
-        }
-        var boxLeft = (imCanvas.width - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth
-        var boxTop = (imCanvas.height - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight
-        var boxWidth = (Math.min(this.resultData.detections[iChip].right, 1) - Math.max(this.resultData.detections[iChip].left, 0)) * imgWidth
-        var boxHeight = (Math.min(this.resultData.detections[iChip].bottom, 1) - Math.max(this.resultData.detections[iChip].top, 0)) * imgHeight
         imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight)
+        this.selectedChip = iChip
         this.resultData.detections[iChip].beenViewed = true
       },
       deleteChip ( iChip ) {
@@ -533,6 +538,15 @@
       },
       onLevelChange(value) {
         this.detectorLevel = value
+      },
+      structureClick(e) {
+        var findBox = this.showResults.find( r => { return r.cvsLeft <= e.offsetX &&
+            r.cvsRight >= e.offsetX &&
+            r.cvsTop <= e.offsetY &&
+            r.cvsBottom >= e.offsetY &&
+            r.resultIndex > this.selectedChip
+        })
+        this.selectChip(findBox ? findBox.resultIndex : this.selectedChip)
       }
     }
   }