From 59f79fcfa8a4589a6e380be2b1c9f512fcfbfd27 Mon Sep 17 00:00:00 2001 From: Justin Georgi Date: Thu, 28 Dec 2023 08:06:06 -0700 Subject: [PATCH] Upgrade image and structure outline to canvas (#64) Closes: #61 Signed-off-by: Justin Georgi Reviewed-on: https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/pulls/64 --- src/pages/detect.vue | 81 ++++++++++++++++++++++++-------------------- 1 file changed, 44 insertions(+), 37 deletions(-) diff --git a/src/pages/detect.vue b/src/pages/detect.vue index 4ede9fe..b74941c 100644 --- a/src/pages/detect.vue +++ b/src/pages/detect.vue @@ -6,8 +6,8 @@
- - + +
@@ -301,9 +301,8 @@ resultData: {}, selectedChip: -1, activeRegion: 4, - imageRegion: '', imageLoaded: false, - imageView: '', + imageView: null, imageLoadMode: "environment", detectPanel: false, showDetectSettings: false, @@ -358,8 +357,11 @@ xhr.send() } }, - deactivated () { - console.log('destroy the panel!') + mounted() { + const imCanvas = this.$refs.image_cvs + const imageCtx = imCanvas.getContext("2d") + imageCtx.strokeStyle = 'yellow' + imageCtx.lineWidth = 3 }, computed: { showResults () { @@ -391,7 +393,6 @@ }, setData () { var self = this - this.resetView() if (this.serverSettings && this.serverSettings.use) { var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect` var xhr = new XMLHttpRequest() @@ -412,7 +413,7 @@ "detect": { "*": 1 }, - "data": this.imageView.split(',')[1] + "data": this.imageView.src.split(',')[1] } xhr.send(JSON.stringify(doodsData)) @@ -445,70 +446,76 @@ alert(`Camera fail: ${message}`) }, selectChip ( iChip ) { + const [imCanvas, imageCtx] = this.resetView() + if (this.selectedChip == iChip) { - this.resetView() + this.selectedChip = -1 return } var imgWidth var imgHeight - this.selectedChip = iChip - const box = this.$refs.structure_box - const img = this.$refs.image_src - var imgAspect = img.naturalWidth / img.naturalHeight - var rendAspect = img.offsetWidth / img.offsetHeight + var imgAspect = this.imageView.width / this.imageView.height + var rendAspect = imCanvas.width / imCanvas.height if (imgAspect >= rendAspect) { - imgWidth = img.offsetWidth - imgHeight = img.offsetWidth / imgAspect + imgWidth = imCanvas.width + imgHeight = imCanvas.width / imgAspect } else { - imgWidth = img.offsetHeight * imgAspect - imgHeight = img.offsetHeight + imgWidth = imCanvas.height * imgAspect + imgHeight = imCanvas.height } - box.style.display = 'block' - box.style.left = `${(img.offsetWidth - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth}px` - box.style.top = `${(img.offsetHeight - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight}px` - box.style.width = `${(Math.min(this.resultData.detections[iChip].right, 1) - Math.max(this.resultData.detections[iChip].left, 0)) * imgWidth}px` - box.style.height = `${(Math.min(this.resultData.detections[iChip].bottom, 1) - Math.max(this.resultData.detections[iChip].top, 0)) * imgHeight}px` + var boxLeft = (imCanvas.width - imgWidth) / 2 + this.resultData.detections[iChip].left * imgWidth + var boxTop = (imCanvas.height - imgHeight) / 2 + this.resultData.detections[iChip].top * imgHeight + var boxWidth = (Math.min(this.resultData.detections[iChip].right, 1) - Math.max(this.resultData.detections[iChip].left, 0)) * imgWidth + var boxHeight = (Math.min(this.resultData.detections[iChip].bottom, 1) - Math.max(this.resultData.detections[iChip].top, 0)) * imgHeight + imageCtx.strokeRect(boxLeft,boxTop,boxWidth,boxHeight) this.resultData.detections[iChip].beenViewed = true }, deleteChip ( iChip ) { f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => { - this.resultData.detections.splice(iChip, 1) this.resetView() + this.resultData.detections.splice(iChip, 1) + this.selectedChip = -1 this.uploadDirty = true }); }, + resetView () { + const imCanvas = this.$refs.image_cvs + const imageCtx = imCanvas.getContext("2d") + imCanvas.width = imCanvas.clientWidth + imCanvas.height = imCanvas.clientHeight + imageCtx.clearRect(0,0,imCanvas.width,imCanvas.height) + return [imCanvas, imageCtx] + }, getImage (searchImage) { - var self = this let loadImage =new Promise(resolve => { if (this.isCordova && this.imageLoadMode == "camera") { - this.imageView = 'data:image/jpg;base64,' + searchImage + resolve('data:image/jpg;base64,' + searchImage) } else { const searchImage = this.$refs.image_chooser.files[0] var reader = new FileReader() reader.addEventListener("loadend", () => { - this.imageView = reader.result - this.setData() + resolve(reader.result) }) reader.readAsDataURL(searchImage) } - resolve() }) - loadImage.then(() => { + loadImage.then((imgData) => { this.imageLoaded = true this.resultData = {} - this.resetView() + this.imageView = new Image() + this.imageView.src = imgData + return(this.imageView.decode()) + }).then( () => { + const [imCanvas, _] = this.resetView() + imCanvas.style['background-image'] = `url(${this.imageView.src})` + this.setData() }).catch((e) => { console.log(e.message) f7.dialog.alert(`Error loading image: ${e.message}`) }) }, - resetView() { - this.selectedChip = -1 - const box = this.$refs.structure_box - box.style.display = 'none' - }, videoStream() { //TODO return null @@ -517,7 +524,7 @@ var uploadData = this.showResults .filter( d => { return d.aboveThreshold && d.isSearched && !d.isDeleted }) .map( r => { return {"top": r.top, "left": r.left, "bottom": r.bottom, "right": r.right, "label": r.label}}) - this.uploadUid = await this.uploadData(this.imageView.split(',')[1],uploadData,this.uploadUid) + this.uploadUid = await this.uploadData(this.imageView.src.split(',')[1],uploadData,this.uploadUid) if (this.uploadUid) { this.uploadDirty = false } }, onLevelChange(value) {