From 47363b9a4c23acfacecd7ecf7b5c9d1669e10623 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sun, 15 Sep 2024 12:58:08 -0700 Subject: [PATCH 1/8] Switch image display to canvas Signed-off-by: Justin Georgi --- src/pages/detect.vue | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index 243077d..ead910a 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -160,6 +160,7 @@ classesList: [], imageLoaded: false, imageView: new Image(), + imCvsLocation: {}, imageLoadMode: "environment", detecting: false, detectPanel: false, @@ -476,6 +477,9 @@ imageCtx.globalAlpha = 1 imageCtx.strokeStyle = 'yellow' imageCtx.lineWidth = 3 + if (this.imageLoaded) { + imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height) + } return [imCanvas, imageCtx] }, getImage (searchImage) { @@ -516,8 +520,16 @@ this.imageView.src = imgData return(this.imageView.decode()) }).then( () => { - const [imCanvas, _] = this.resetView() - imCanvas.style['background-image'] = `url(${this.imageView.src})` + const imCanvas = this.$refs.image_cvs + imCanvas.width = imCanvas.clientWidth + imCanvas.height = imCanvas.clientHeight + const imageCtx = imCanvas.getContext("2d") + let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1}) + this.imCvsLocation.top = imageLoc[0].cvsTop + this.imCvsLocation.left = imageLoc[0].cvsLeft + this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft + this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop + imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height) f7.utils.nextFrame(() => { this.setData() }) @@ -552,7 +564,9 @@ box2cvs(boxInput) { if (!boxInput || boxInput.length == 0) return [] const boxList = boxInput.length ? boxInput : [boxInput] - const [imCanvas, imageCtx] = this.resetView() + //const [imCanvas, imageCtx] = this.resetView() + const imCanvas = this.$refs.image_cvs + //const imageCtx = imCanvas.getContext("2d") var imgWidth var imgHeight const imgAspect = this.imageView.width / this.imageView.height -- 2.49.1 From 8ef2ea6aa4949535bfd9feeda2504a071169969f Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sun, 15 Sep 2024 16:13:20 -0700 Subject: [PATCH 2/8] Fix timing of image refreshing Signed-off-by: Justin Georgi --- src/pages/detect.vue | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index ead910a..0b8a6f5 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -70,7 +70,7 @@ - + {{ showResults.length - numResults }} @@ -335,6 +335,9 @@ self.reloadModel = false loadSuccess() } + f7.utils.nextFrame(() => { + this.selectChip("redraw") + }) } } @@ -376,6 +379,9 @@ f7.dialog.alert(`ALVINN structure finding error: ${e.message}`) }) } + f7.utils.nextFrame(() => { + this.selectChip("redraw") + }) }, selectAll (ev) { if (ev.target.checked) { @@ -429,7 +435,7 @@ alert(`Camera fail: ${message}`) }, selectChip ( iChip ) { - const [imCanvas, imageCtx] = this.resetView() + const [_, imageCtx] = this.resetView() if (this.selectedChip == iChip) { this.selectedChip = -1 @@ -478,6 +484,11 @@ imageCtx.strokeStyle = 'yellow' imageCtx.lineWidth = 3 if (this.imageLoaded) { + let imageLoc = this.box2cvs({top: 0,left: 0,right: 1,bottom: 1}) + this.imCvsLocation.top = imageLoc[0].cvsTop + this.imCvsLocation.left = imageLoc[0].cvsLeft + this.imCvsLocation.width = imageLoc[0].cvsRight - imageLoc[0].cvsLeft + this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height) } return [imCanvas, imageCtx] @@ -564,9 +575,7 @@ box2cvs(boxInput) { if (!boxInput || boxInput.length == 0) return [] const boxList = boxInput.length ? boxInput : [boxInput] - //const [imCanvas, imageCtx] = this.resetView() const imCanvas = this.$refs.image_cvs - //const imageCtx = imCanvas.getContext("2d") var imgWidth var imgHeight const imgAspect = this.imageView.width / this.imageView.height @@ -587,6 +596,12 @@ } }) return cvsCoords + }, + toggleSettings() { + this.showDetectSettings = !this.showDetectSettings + f7.utils.nextFrame(() => { + this.selectChip("redraw") + }) } } } -- 2.49.1 From 1133676b0e22359a9ae781eed0a79ac897b11078 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Tue, 17 Sep 2024 08:42:15 -0700 Subject: [PATCH 3/8] Add pan and zoom Signed-off-by: Justin Georgi --- src/pages/detect.vue | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index 0b8a6f5..bdbd080 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -15,7 +15,7 @@ Capture - + { + this.canvasOffset = {x: 0, y: 0} + this.canvasZoom = 1 const imCanvas = this.$refs.image_cvs imCanvas.width = imCanvas.clientWidth imCanvas.height = imCanvas.clientHeight @@ -602,6 +609,34 @@ f7.utils.nextFrame(() => { this.selectChip("redraw") }) + }, + startMove() { + this.canvasMoving = true + }, + endMove() { + this.canvasMoving = false + }, + makeMove(event) { + if (this.canvasMoving) { + this.canvasOffset.x += event.movementX + this.canvasOffset.y += event.movementY + this.selectChip("redraw") + } + }, + spinWheel(event) { + console.log(this.canvasOffset) + console.log({x: event.clientX, y: event.clientY}) + if (event.wheelDelta > 0) { + this.canvasZoom *= 1.05 + this.canvasOffset.x = (((1.05 ** -1) - 1)*event.clientX + this.canvasOffset.x)*1.05 + this.canvasOffset.y = (((1.05 ** -1) - 1)*event.clientY + this.canvasOffset.y)*1.05 + } else if (event.wheelDelta < 0) { + this.canvasZoom /= 1.05 + this.canvasOffset.x = ((.05)*event.clientX + this.canvasOffset.x)/1.05 + this.canvasOffset.y = ((.05)*event.clientY + this.canvasOffset.y)/1.05 + } + console.log(this.canvasOffset) + this.selectChip("redraw") } } } -- 2.49.1 From 601cf28d897c97d10f006232c8646faa59492c00 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Wed, 18 Sep 2024 19:54:20 -0700 Subject: [PATCH 4/8] Add touch events Signed-off-by: Justin Georgi --- src/pages/detect.vue | 24 +++++++++++++++----- src/pages/touch-mixin.js | 49 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 6 deletions(-) create mode 100644 src/pages/touch-mixin.js diff --git a/src/pages/detect.vue b/src/pages/detect.vue index bdbd080..e14130e 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -9,13 +9,26 @@ +
Capture
- + 0) { this.canvasZoom *= 1.05 this.canvasOffset.x = (((1.05 ** -1) - 1)*event.clientX + this.canvasOffset.x)*1.05 @@ -635,7 +648,6 @@ this.canvasOffset.x = ((.05)*event.clientX + this.canvasOffset.x)/1.05 this.canvasOffset.y = ((.05)*event.clientY + this.canvasOffset.y)/1.05 } - console.log(this.canvasOffset) this.selectChip("redraw") } } diff --git a/src/pages/touch-mixin.js b/src/pages/touch-mixin.js new file mode 100644 index 0000000..1a6dcfb --- /dev/null +++ b/src/pages/touch-mixin.js @@ -0,0 +1,49 @@ +export default { + data () { + return { + touchPrevious: {} + } + }, + methods: { + startTouch(event) { + if (event.touches.length == 1) { + this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} + } + if (event.touches.length == 2) { + this.touchPrevious = {distance: this.touchDistance(event.touches)} + } + }, + endTouch(event) { + if (event.touches.length == 1) { + this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} + } else { + this.debugInfo = null + } + }, + moveTouch(event) { + switch (event.touches.length) { + case 1: + this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x + this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y + this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} + break; + case 2: + let newDistance = this.touchDistance(event.touches) + let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2 + let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2 + let scale = newDistance / this.touchPrevious.distance + this.canvasZoom *= scale + this.canvasOffset.x = (((scale ** -1) - 1) * midX + this.canvasOffset.x) * scale + this.canvasOffset.y = (((scale ** -1) - 1) * midY + this.canvasOffset.y) * scale + this.touchPrevious = {distance: newDistance} + break; + } + this.selectChip("redraw") + }, + touchDistance(touches) { + let touch1 = touches.item(0) + let touch2 = touches.item(1) + return Math.sqrt((touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2) + } + } +} \ No newline at end of file -- 2.49.1 From a457453e95a8cba891c7177cdc2641f11282f5d7 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sat, 21 Sep 2024 14:17:51 -0700 Subject: [PATCH 5/8] Improve zoom accuracy Signed-off-by: Justin Georgi --- src/pages/detect.vue | 11 +++++++---- src/pages/touch-mixin.js | 14 +++++++++----- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index e14130e..b3e6884 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -639,14 +639,17 @@ } }, spinWheel(event) { + console.log(event) if (event.wheelDelta > 0) { + let scaleChange = this.canvasZoom * .05 this.canvasZoom *= 1.05 - this.canvasOffset.x = (((1.05 ** -1) - 1)*event.clientX + this.canvasOffset.x)*1.05 - this.canvasOffset.y = (((1.05 ** -1) - 1)*event.clientY + this.canvasOffset.y)*1.05 + this.canvasOffset.x += -(event.offsetX * scaleChange) + this.canvasOffset.y += -(event.offsetY * scaleChange) } else if (event.wheelDelta < 0) { + let scaleChange = this.canvasZoom * (1 / 1.05 - 1) this.canvasZoom /= 1.05 - this.canvasOffset.x = ((.05)*event.clientX + this.canvasOffset.x)/1.05 - this.canvasOffset.y = ((.05)*event.clientY + this.canvasOffset.y)/1.05 + this.canvasOffset.x += -(event.offsetX * scaleChange) + this.canvasOffset.y += -(event.offsetY * scaleChange) } this.selectChip("redraw") } diff --git a/src/pages/touch-mixin.js b/src/pages/touch-mixin.js index 1a6dcfb..4c4981c 100644 --- a/src/pages/touch-mixin.js +++ b/src/pages/touch-mixin.js @@ -10,19 +10,22 @@ export default { this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} } if (event.touches.length == 2) { - this.touchPrevious = {distance: this.touchDistance(event.touches)} + let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2 + let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2 + this.touchPrevious = {distance: this.touchDistance(event.touches), x: midX, y: midY} } }, endTouch(event) { if (event.touches.length == 1) { this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} } else { - this.debugInfo = null + //this.debugInfo = null } }, moveTouch(event) { switch (event.touches.length) { case 1: + console.log(event) this.canvasOffset.x += event.touches[0].clientX - this.touchPrevious.x this.canvasOffset.y += event.touches[0].clientY - this.touchPrevious.y this.touchPrevious = {x: event.touches[0].clientX, y: event.touches[0].clientY} @@ -32,10 +35,11 @@ export default { let midX = (event.touches.item(0).clientX + event.touches.item(1).clientX) / 2 let midY = (event.touches.item(0).clientY + event.touches.item(1).clientY) / 2 let scale = newDistance / this.touchPrevious.distance + let scaleChange = this.canvasZoom * (scale - 1) this.canvasZoom *= scale - this.canvasOffset.x = (((scale ** -1) - 1) * midX + this.canvasOffset.x) * scale - this.canvasOffset.y = (((scale ** -1) - 1) * midY + this.canvasOffset.y) * scale - this.touchPrevious = {distance: newDistance} + this.canvasOffset.x += -((midX - 16) * scaleChange) + (midX - this.touchPrevious.x) + this.canvasOffset.y += -((midY - 96) * scaleChange) + (midY - this.touchPrevious.y) + this.touchPrevious = {distance: newDistance, x: midX, y: midY} break; } this.selectChip("redraw") -- 2.49.1 From 727c47e19765d3d5619c6c79a0d1abbb2d0d97c6 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sat, 21 Sep 2024 16:00:58 -0700 Subject: [PATCH 6/8] Make info link and selection click zoom aware Signed-off-by: Justin Georgi --- src/pages/detect.vue | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index b3e6884..db9d527 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -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;`" > = 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 -- 2.49.1 From 04730ed0a67b2c08f21ea85bea34da993309505e Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Sun, 22 Sep 2024 17:47:14 -0700 Subject: [PATCH 7/8] Add zoom to structure button and move zoom reset Signed-off-by: Justin Georgi --- src/components/svg-icon.vue | 6 ++++- src/pages/detect.vue | 48 +++++++++++++++++++++---------------- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/src/components/svg-icon.vue b/src/components/svg-icon.vue index 5e64430..e3b27ff 100644 --- a/src/components/svg-icon.vue +++ b/src/components/svg-icon.vue @@ -17,6 +17,8 @@ + + @@ -44,7 +46,9 @@ 'limbs', 'head', 'photo_sample', - 'reset_slide' + 'reset_slide', + 'zoom_to', + 'reset_zoom' ] return iconList.includes(value) } diff --git a/src/pages/detect.vue b/src/pages/detect.vue index db9d527..614660c 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -74,15 +74,18 @@
- - - + + + + + + {{ showResults.length - numResults }} @@ -106,23 +109,6 @@ - - - - - - - - - - - - - - - - - @@ -200,6 +186,7 @@ canvasMoving: false, canvasOffset: {x: 0, y: 0}, canvasZoom: 1, + structureZoomed: false, debugInfo: null } }, @@ -509,6 +496,7 @@ this.imCvsLocation.height = imageLoc[0].cvsBottom - imageLoc[0].cvsTop imageCtx.drawImage(this.imageView, 0, 0, this.imageView.width, this.imageView.height, this.imCvsLocation.left, this.imCvsLocation.top, this.imCvsLocation.width, this.imCvsLocation.height) } + this.structureZoomed = false return [imCanvas, imageCtx] }, getImage (searchImage) { @@ -651,6 +639,26 @@ this.canvasOffset.y += -(event.offsetY * scaleChange) } this.selectChip("redraw") + }, + resetZoom() { + this.canvasZoom = 1 + this.canvasOffset.x = 0 + this.canvasOffset.y = 0 + this.selectChip("redraw") + }, + zoomToSelected() { + const imCanvas = this.$refs.image_cvs + const boxCoords = this.box2cvs(this.resultData.detections[this.selectedChip])[0] + const boxWidth = boxCoords.cvsRight - boxCoords.cvsLeft + const boxHeight = boxCoords.cvsBottom - boxCoords.cvsTop + const boxMidX = (boxCoords.cvsRight + boxCoords.cvsLeft ) / 2 + const boxMidY = (boxCoords.cvsBottom + boxCoords.cvsTop ) / 2 + const zoomFactor = Math.min(imCanvas.width / boxWidth * .9, imCanvas.height / boxHeight * .9, 8) + this.canvasZoom = zoomFactor + this.canvasOffset.x = -(boxMidX * zoomFactor) + imCanvas.width / 2 + this.canvasOffset.y = -(boxMidY * zoomFactor) + imCanvas.height / 2 + this.selectChip("redraw") + this.structureZoomed = true } } } -- 2.49.1 From 8950345975478d5461d2a243e65716aceda7f67a Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Tue, 24 Sep 2024 20:59:55 -0700 Subject: [PATCH 8/8] Improve scroll wheel zoom Signed-off-by: Justin Georgi --- src/pages/detect.vue | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index 614660c..06882f6 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -627,17 +627,15 @@ } }, spinWheel(event) { + let zoomFactor if (event.wheelDelta > 0) { - let scaleChange = this.canvasZoom * .05 - this.canvasZoom *= 1.05 - this.canvasOffset.x += -(event.offsetX * scaleChange) - this.canvasOffset.y += -(event.offsetY * scaleChange) + zoomFactor = 1.05 } else if (event.wheelDelta < 0) { - let scaleChange = this.canvasZoom * (1 / 1.05 - 1) - this.canvasZoom /= 1.05 - this.canvasOffset.x += -(event.offsetX * scaleChange) - this.canvasOffset.y += -(event.offsetY * scaleChange) + zoomFactor = 1 / 1.05 } + this.canvasZoom *= zoomFactor + this.canvasOffset.x = event.offsetX * (1 - zoomFactor) + this.canvasOffset.x * zoomFactor + this.canvasOffset.y = event.offsetY * (1 - zoomFactor) + this.canvasOffset.y * zoomFactor this.selectChip("redraw") }, resetZoom() { -- 2.49.1