src/components/svg-icon.vue

@@ -17,6 +17,8 @@
     <path v-else-if="icon == 'head'" d="M194-80v-395h80v315h280v-193l105-105q29-29 45-65t16-77q0-40-16.5-76T659-741l-25-26-127 127H347l-43 43-57-56 67-67h160l160-160 82 82q40 40 62 90.5T800-600q0 57-22 107.5T716-402l-82 82v240H194Zm197-187L183-475q-11-11-17-26t-6-31q0-16 6-30.5t17-25.5l84-85 124 123q28 28 43.5 64.5T450-409q0 40-15 76.5T391-267Z"/>
     <path v-else-if="icon == 'photo_sample'" d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm40-80h400L545-420 440-280l-65-87-95 127Zm-40 80v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
     <path v-else-if="icon == 'reset_slide'" d="M520-330v-60h160v60H520Zm60 210v-50h-60v-60h60v-50h60v160h-60Zm100-50v-60h160v60H680Zm40-110v-160h60v50h60v60h-60v50h-60Zm111-280h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/>
+    <path v-else-if="icon == 'zoom_to'" d="M440-40v-167l-44 43-56-56 140-140 140 140-56 56-44-43v167h-80ZM220-340l-56-56 43-44H40v-80h167l-43-44 56-56 140 140-140 140Zm520 0L600-480l140-140 56 56-43 44h167v80H753l43 44-56 56Zm-260-80q-25 0-42.5-17.5T420-480q0-25 17.5-42.5T480-540q25 0 42.5 17.5T540-480q0 25-17.5 42.5T480-420Zm0-180L340-740l56-56 44 43v-167h80v167l44-43 56 56-140 140Z"/>
+    <path v-else-if="icon == 'reset_zoom'" d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/>
   </svg>
 </template>
   
@@ -44,7 +46,9 @@
             'limbs',
             'head',
             'photo_sample',
-            'reset_slide'
+            'reset_slide',
+            'zoom_to',
+            'reset_zoom'
           ]
           return iconList.includes(value)
         }

src/pages/detect.vue

@@ -74,15 +74,18 @@
         </f7-button>
       </div>
       <f7-segmented class="image-menu" raised>
-        <f7-button popover-open="#region-popover">
-          <RegionIcon :region="activeRegion" :iconSet="getIconSet" />
-        </f7-button>
         <f7-button v-if="!videoAvailable" :class="(!modelLoading) ? '' : 'disabled'" popover-open="#capture-popover">
           <SvgIcon icon="camera_add"/>
         </f7-button>
         <f7-button v-if="videoAvailable" @click="closeCamera()">
           <SvgIcon icon="no_photography"/>
         </f7-button>
+        <f7-button v-if="!structureZoomed && selectedChip >= 0" style="height: auto; width: auto;" popover-close="#image-popover" @click="zoomToSelected()">
+          <SvgIcon icon="zoom_to" />
+        </f7-button>
+        <f7-button v-else :class="(canvasZoom != 1) ? '' : 'disabled'" style="height: auto; width: auto;" popover-close="#image-popover" @click="resetZoom()">
+          <SvgIcon icon="reset_zoom" />
+        </f7-button>
         <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>
@@ -106,23 +109,6 @@
       </f7-page>
     </f7-panel>
 
-    <f7-popover id="region-popover" class="popover-button-menu">
-      <f7-segmented raised class="segment-button-menu">
-        <f7-button :class="(getRegions.includes('thorax')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/thorax/" popover-close="#region-popover">
-          <RegionIcon :region="0" :iconSet="getIconSet" />
-        </f7-button>
-        <f7-button :class="(getRegions.includes('abdomen')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/abdomen/" popover-close="#region-popover">
-          <RegionIcon :region="1" :iconSet="getIconSet" />
-        </f7-button>
-        <f7-button :class="(getRegions.includes('limbs')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/limbs/" popover-close="#region-popover">
-          <RegionIcon :region="2" :iconSet="getIconSet" />
-        </f7-button>
-        <f7-button :class="(getRegions.includes('head')) ? '' : ' disabled'" style="height: auto; width: auto;" href="/detect/head/" popover-close="#region-popover">
-          <RegionIcon :region="3" :iconSet="getIconSet" />
-        </f7-button>
-      </f7-segmented>
-    </f7-popover>
-
     <f7-popover id="capture-popover" class="popover-button-menu">
       <f7-segmented raised class="segment-button-menu">
         <f7-button style="height: auto; width: auto;" popover-close="#capture-popover" @click="selectImage('camera')">
@@ -200,6 +186,7 @@
         canvasMoving: false,
         canvasOffset: {x: 0, y: 0},
         canvasZoom: 1,
+        structureZoomed: false,
         debugInfo: null
       }
     },
@@ -509,6 +496,7 @@
           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)
         }
+        this.structureZoomed = false
         return [imCanvas, imageCtx]
       },
       getImage (searchImage) {
@@ -651,6 +639,26 @@
           this.canvasOffset.y += -(event.offsetY * scaleChange)
         }
         this.selectChip("redraw")
+      },
+      resetZoom() {
+        this.canvasZoom = 1
+        this.canvasOffset.x = 0
+        this.canvasOffset.y = 0
+        this.selectChip("redraw")
+      },
+      zoomToSelected() {
+        const imCanvas = this.$refs.image_cvs
+        const boxCoords = this.box2cvs(this.resultData.detections[this.selectedChip])[0]
+        const boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
+        const boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
+        const boxMidX = (boxCoords.cvsRight + boxCoords.cvsLeft ) / 2
+        const boxMidY = (boxCoords.cvsBottom + boxCoords.cvsTop ) / 2
+        const zoomFactor = Math.min(imCanvas.width / boxWidth * .9, imCanvas.height / boxHeight * .9, 8)
+        this.canvasZoom = zoomFactor
+        this.canvasOffset.x = -(boxMidX * zoomFactor) + imCanvas.width / 2
+        this.canvasOffset.y = -(boxMidY * zoomFactor) + imCanvas.height / 2
+        this.selectChip("redraw")
+        this.structureZoomed = true
       }
     }
   }