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

Use canvas for image rendering #197

Merged
jgeorgi merged 8 commits from bas-canvas-update into main 2024-09-25 15:05:00 +00:00
Conversation 0 Commits 8 Files Changed 3 +148 -17
2 changed files with 148 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 727c47e197 - Show all commits

23
src/pages/detect.vue
View File

@@ -30,7 +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(calc(-50% - ${infoLinkPos.adj}px),calc(-50% - ${infoLinkPos.adj}px));`"
:style="`left: ${infoLinkPos.x}px; top: ${infoLinkPos.y}px; transform: translate(-50%,-50%);`"
class="structure-info"
:icon-only="true"
icon-f7="info"
@@ -453,7 +453,7 @@
alert(`Camera fail: ${message}`)
},
selectChip ( iChip ) {
const [_, imageCtx] = this.resetView()
const [imCanvas, imageCtx] = this.resetView()
if (this.selectedChip == iChip) {
this.selectedChip = -1
@@ -471,10 +471,8 @@
let boxTop = boxCoords.cvsTop
let boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft
let boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop
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)
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)
this.selectedChip = iChip
@@ -502,7 +500,7 @@
imageCtx.scale(this.canvasZoom,this.canvasZoom)
imageCtx.globalAlpha = 1
imageCtx.strokeStyle = 'yellow'
imageCtx.lineWidth = 3
imageCtx.lineWidth = 3 / this.canvasZoom
if (this.imageLoaded) {
let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1})
this.imCvsLocation.top = imageLoc[0].cvsTop
@@ -583,10 +581,12 @@
},
structureClick(e) {
const boxCoords = this.box2cvs(this.showResults)
var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= e.offsetX &&
r.cvsRight >= e.offsetX &&
r.cvsTop <= e.offsetY &&
r.cvsBottom >= e.offsetY &&
let clickX = (e.offsetX - this.canvasOffset.x) / this.canvasZoom
let clickY = (e.offsetY - this.canvasOffset.y) / this.canvasZoom
var findBox = boxCoords.findIndex( (r, i) => { return r.cvsLeft <= clickX &&
r.cvsRight >= clickX &&
r.cvsTop <= clickY &&
r.cvsBottom >= clickY &&
this.resultData.detections[i].resultIndex > this.selectedChip &&
this.resultData.detections[i].aboveThreshold &&
this.resultData.detections[i].isSearched &&
@@ -639,7 +639,6 @@
}
},
spinWheel(event) {
console.log(event)
if (event.wheelDelta > 0) {
let scaleChange = this.canvasZoom * .05
this.canvasZoom *= 1.05