ALVINN/ALVINN_f7
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 7 Wiki Activity

Improve infolink visuals
All checks were successful
Build Dev PWA / Build-PWA (push) Successful in 37s
Details

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-10-03 08:50:46 -07:00
parent 966782d8b9
commit 9415fa3783
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/detect.css
View File

@@ -150,8 +150,7 @@
.structure-info {
position: absolute;
z-index: 3;
color: rgb(15, 32, 108);
background: yellow;
color: #0f206c;
border-radius: 100%;
}

17
src/pages/detect.vue
View File

@@ -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