From 9415fa378333984c736c3716401f13b35ca75b16 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Thu, 3 Oct 2024 08:50:46 -0700
Subject: [PATCH] Improve infolink visuals

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 src/css/detect.css   |  3 +--
 src/pages/detect.vue | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/css/detect.css b/src/css/detect.css
index d137d0f..dbe646e 100644
--- a/src/css/detect.css
+++ b/src/css/detect.css
@@ -150,8 +150,7 @@
 .structure-info {
   position: absolute;
   z-index: 3;
-  color: rgb(15, 32, 108);
-  background: yellow;
+  color: #0f206c;
   border-radius: 100%;
 }
 
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 0de0000..419d4e9 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -30,8 +30,7 @@
           :style="`display: ${(imageLoaded || videoAvailable) ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 2;`"
         ></canvas>
         <f7-link v-if="getInfoUrl && (selectedChip > -1)"
-          :style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(-50%,-50%);`"
-          class="structure-info"
+          :style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(-50%,-50%); background: hsla(${showResults[selectedChip].confidence / 100 * 120}deg, 100%, 50%, .5)`"          class="structure-info"
           :icon-only="true"
           icon-f7="info"
           target="_blank"
@@ -468,7 +467,21 @@
         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)
 
+        let imageScale = Math.max(this.imageView.width / imCanvas.width, this.imageView.height / imCanvas.height)
         imageCtx.drawImage(this.imageView, structLeft, structTop, structWidth, structHeight, boxLeft, boxTop, boxWidth, boxHeight)
+        imageCtx.save()
+        imageCtx.arc(boxLeft, boxTop, 14 / this.canvasZoom, 0, 2 * Math.PI)
+        imageCtx.closePath()
+        imageCtx.clip()
+        imageCtx.drawImage(this.imageView,
+          structLeft - (14 / this.canvasZoom * imageScale),
+          structTop - (14 / this.canvasZoom * imageScale),
+          (28 / this.canvasZoom * imageScale),
+          (28 / this.canvasZoom * imageScale),
+          boxLeft - (14 / this.canvasZoom),
+          boxTop - (14 / this.canvasZoom),
+          (28 / this.canvasZoom), (28 / this.canvasZoom))
+        imageCtx.restore()
         this.selectedChip = iChip
         this.resultData.detections[iChip].beenViewed = true