Change structure highlight to css filter (#198)

Closes #196

Instead of drawing a bounding box, structures are highlighted when selected by using css fitlers to render non-structure regions of the image in half-opaque grayscale.

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

Reviewed-on: #198

src/pages/detect.vue

@@ -440,17 +440,24 @@
         alert(`Camera fail: ${message}`)
       },
       selectChip ( iChip ) {
-        const [imCanvas, imageCtx] = this.resetView()
-
         if (this.selectedChip == iChip) {
           this.selectedChip = -1
+          this.resetView()
           return
         }
 
         if (iChip == 'redraw') {
-          if (this.selectedChip == -1) return
+          if (this.selectedChip == -1) {
+            this.resetView()
+            return
+          }
           iChip = this.selectedChip
         }
+        const [imCanvas, imageCtx] = this.resetView(true)
+        let structLeft = this.imageView.width * this.resultData.detections[iChip].left
+        let structTop = this.imageView.height * this.resultData.detections[iChip].top
+        let structWidth = this.imageView.width * (this.resultData.detections[iChip].right - this.resultData.detections[iChip].left)
+        let structHeight = this.imageView.height * (this.resultData.detections[iChip].bottom - this.resultData.detections[iChip].top)
 
         const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
 
@@ -461,7 +468,7 @@
         this.infoLinkPos.x = Math.min(Math.max(boxCoords.cvsLeft * this.canvasZoom + this.canvasOffset.x, 0),imCanvas.width)
         this.infoLinkPos.y = Math.min(Math.max(boxCoords.cvsTop * this.canvasZoom + this.canvasOffset.y, 0), imCanvas.height)
 
-        imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight)
+        imageCtx.drawImage(this.imageView, structLeft, structTop, structWidth, structHeight, boxLeft, boxTop, boxWidth, boxHeight)
         this.selectedChip = iChip
         this.resultData.detections[iChip].beenViewed = true
 
@@ -477,7 +484,7 @@
           this.uploadDirty = true
         });
       },
-      resetView () {
+      resetView (drawChip) {
         const imCanvas = this.$refs.image_cvs
         const imageCtx = imCanvas.getContext("2d")
         imCanvas.width = imCanvas.clientWidth
@@ -494,7 +501,9 @@
           this.imCvsLocation.left = imageLoc[0].cvsLeft
           this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft
           this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop
+          if (drawChip) {imageCtx.filter = "grayscale(1) opacity(.5)"}
           imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height)
+          if (drawChip) {imageCtx.filter = "grayscale(0) opacity(1)"}
         }
         this.structureZoomed = false
         return [imCanvas, imageCtx]