src/pages/detect.vue

@@ -70,7 +70,7 @@
         <f7-button v-if="videoAvailable" @click="closeCamera()">
           <SvgIcon icon="no_photography"/>
         </f7-button>
-        <f7-button @click="() => showDetectSettings = !showDetectSettings" :class="(imageLoaded) ? '' : 'disabled'">
+        <f7-button @click="toggleSettings()" :class="(imageLoaded) ? '' : 'disabled'">
           <SvgIcon icon="visibility"/>
           <f7-badge v-if="numResults && (showResults.length != numResults)" color="red" style="position: absolute; right: 15%; top: 15%;">{{ showResults.length - numResults }}</f7-badge>
         </f7-button>
@@ -335,6 +335,9 @@
               self.reloadModel = false
               loadSuccess()
             }
+            f7.utils.nextFrame(() => {
+              this.selectChip("redraw")
+            })
           }
         }
 
@@ -376,6 +379,9 @@
             f7.dialog.alert(`ALVINN structure finding error: ${e.message}`)
           })
         }
+        f7.utils.nextFrame(() => {
+          this.selectChip("redraw")
+        })
       },
       selectAll (ev) {
         if (ev.target.checked) {
@@ -429,7 +435,7 @@
         alert(`Camera fail: ${message}`)
       },
       selectChip ( iChip ) {
-        const [imCanvas, imageCtx] = this.resetView()
+        const [_, imageCtx] = this.resetView()
 
         if (this.selectedChip == iChip) {
           this.selectedChip = -1
@@ -478,6 +484,11 @@
         imageCtx.strokeStyle = 'yellow'
         imageCtx.lineWidth = 3
         if (this.imageLoaded) {
+          let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1})
+          this.imCvsLocation.top = imageLoc[0].cvsTop
+          this.imCvsLocation.left = imageLoc[0].cvsLeft
+          this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft
+          this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop
           imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height)
         }
         return [imCanvas, imageCtx]
@@ -564,9 +575,7 @@
       box2cvs(boxInput) {
         if (!boxInput || boxInput.length == 0) return []
         const boxList = boxInput.length ? boxInput : [boxInput]
-        //const [imCanvas, imageCtx] = this.resetView()
         const imCanvas = this.$refs.image_cvs
-        //const imageCtx = imCanvas.getContext("2d")
         var imgWidth
         var imgHeight
         const imgAspect = this.imageView.width / this.imageView.height
@@ -587,6 +596,12 @@
           }
         })
         return cvsCoords
+      },
+      toggleSettings() {
+        this.showDetectSettings = !this.showDetectSettings
+        f7.utils.nextFrame(() => {
+          this.selectChip("redraw")
+        })
       }
     }
   }