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

Move info link for small structure boxes

Browse Source 
Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
This commit is contained in:
Justin Georgi
2024-04-20 20:25:45 -07:00
parent 7ce02a0468
commit 655c36067b
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/css/detect.css
View File

@@ -129,7 +129,6 @@
.structure-info { .structure-info {
position: absolute; position: absolute;
transform: translate(-50%,-50%);
z-index: 3; z-index: 3;
color: rgb(15, 32, 108); color: rgb(15, 32, 108);
background: yellow; background: yellow;

13
src/pages/detect.vue
View File

@@ -17,7 +17,7 @@
</div> </div>
<canvas id="im-draw" ref="image_cvs" @click="structureClick" :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 id="im-draw" ref="image_cvs" @click="structureClick" :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;`" />
<f7-link v-if="getInfoUrl && (selectedChip > -1)" <f7-link v-if="getInfoUrl && (selectedChip > -1)"
:style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px;`" :style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(calc(-50% - ${infoLinkPos.adj}px),calc(-50% - ${infoLinkPos.adj}px));`"
class="structure-info" class="structure-info"
:icon-only="true" :icon-only="true"
icon-f7="info" icon-f7="info"
@@ -358,14 +358,17 @@
} }
const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0] const boxCoords = this.box2cvs(this.resultData.detections[iChip])[0]
this.infoLinkPos.x = boxCoords.cvsLeft
this.infoLinkPos.y = boxCoords.cvsTop
let boxLeft = boxCoords.cvsLeft let boxLeft = boxCoords.cvsLeft
let boxTop = boxCoords.cvsTop let boxTop = boxCoords.cvsTop
let boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft let boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
var boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop let boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight) this.infoLinkPos.x = boxCoords.cvsLeft
this.infoLinkPos.y = boxCoords.cvsTop
let boxMin = Math.min(boxHeight, boxWidth)
this.infoLinkPos.adj = (boxMin >= 50) ? 0 : Math.min(10, 50 - boxMin)
imageCtx.strokeRect(boxLeft, boxTop, boxWidth, boxHeight)
this.selectedChip = iChip this.selectedChip = iChip
this.resultData.detections[iChip].beenViewed = true this.resultData.detections[iChip].beenViewed = true
}, },