From 17f330f2428087203521b9987569b3e2765fc7b2 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Tue, 15 May 2018 21:40:53 +0200 Subject: [PATCH] Automatic aspect ratio detection runs, but applied css is garbage and everything crashes after first aspect ratio change. --- js/lib/EdgeDetect.js | 108 ++++++++++++++++++++++++++++++++--------- js/modules/ArDetect.js | 6 +-- js/modules/Resizer.js | 10 ++-- 3 files changed, 94 insertions(+), 30 deletions(-) diff --git a/js/lib/EdgeDetect.js b/js/lib/EdgeDetect.js index 5950a54..4db094c 100644 --- a/js/lib/EdgeDetect.js +++ b/js/lib/EdgeDetect.js @@ -177,9 +177,9 @@ class EdgeDetect{ loopEnd = sampleRow_color + sampleEnd; if(Debug.debugCanvas.enabled) { - this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample, edgeCandidatesTop) + this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.top, edgeCandidatesTop) } else { - this._imageTest(image, start, end, sample, edgeCandidatesBottom) + this._imageTest(image, start, end, sample.top, edgeCandidatesTop) } } @@ -219,9 +219,9 @@ class EdgeDetect{ loopEnd = sampleRow_color + sampleEnd; if(Debug.debugCanvas.enabled) { - this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample, edgeCandidatesTop); + this._imageTest_dbg(image, sampleRow_color + sampleStart, loopEnd, sample.bottom, edgeCandidatesBottom); } else { - this._imageTest(image, start, end, sample, edgeCandidatesBottom); + this._imageTest(image, start, end, sample.bottom, edgeCandidatesBottom); } } @@ -236,27 +236,49 @@ class EdgeDetect{ edgePostprocess(edges){ var edgesTop = []; var edgesBottom = []; - var alignMargin = this.conf.context.height * ExtensionConf.arDetect.allowedMisaligned; + var alignMargin = this.conf.canvas.height * ExtensionConf.arDetect.allowedMisaligned; var missingEdge = edges.edgeCandidatesTopCount == 0 || edges.edgeCandidatesBottomCount == 0; // pretvorimo objekt v tabelo // convert objects to array + delete(edges.edgeCandidatesTop.count); + delete(edges.edgeCandidatesBottom.count); + + console.log("edges", edges, "missing edge?" ,missingEdge); + if( edges.edgeCandidatesTopCount > 0){ for(var e in edges.edgeCandidatesTop){ var edge = edges.edgeCandidatesTop[e]; - edgesTop.push({distance: edge.top, count: edge.count}); + edgesTop.push({ + distance: edge.offset, + absolute: edge.offset, + count: edge.count + }); } } if( edges.edgeCandidatesBottomCount > 0){ for(var e in edges.edgeCandidatesBottom){ var edge = edges.edgeCandidatesBottom[e]; - edgesBottom.push({distance: edge.bottomRelative, absolute: edge.bottom, count: edge.count}); + edgesBottom.push({ + distance: this.conf.canvas.height - edge.offset, + absolute: edge.offset, + count: edge.count + }); } } + console.log("edges pre-sort:", edgesTop.slice(0), edgesBottom.slice(0)); + + // sort by distance + edgesTop = edgesTop.sort((a,b) => {return a.distance - b.distance}); + edgesBottom = edgesBottom.sort((a,b) => {return a.distance - b.distance}); + + console.log("edges post-sort:", edgesTop.slice(0), edgesBottom.slice(0)); + + // če za vsako stran (zgoraj in spodaj) poznamo vsaj enega kandidata, potem lahko preverimo nekaj // stvari @@ -274,7 +296,15 @@ class EdgeDetect{ var blackbarWidth = edgesTop[0].distance > edgesBottom[0].distance ? edgesTop[0].distance : edgesBottom[0].distance; - return {status: "ar_known", blackbarWidth: blackbarWidth, guardLineTop: edgesTop[0].distance, guardLineBottom: edgesBottom[0].absolute }; + return { + status: "ar_known", + blackbarWidth: blackbarWidth, + guardLineTop: edgesTop[0].distance, + guardLineBottom: edgesBottom[0].absolute, + + top: edgesTop[0].distance, + bottom: edgesBottom[0].distance + }; } // torej, lahko da je na sliki watermark. Lahko, da je slika samo ornh črna. Najprej preverimo za watermark @@ -297,7 +327,15 @@ class EdgeDetect{ var blackbarWidth = edgesTop[i].distance > edgesBottom[0].distance ? edgesTop[i].distance : edgesBottom[0].distance; - return {status: "ar_known", blackbarWidth: blackbarWidth, guardLineTop: edgesTop[i].distance, guardLineBottom: edgesBottom[0].absolute}; + return { + status: "ar_known", + blackbarWidth: blackbarWidth, + guardLineTop: edgesTop[i].distance, + guardLineBottom: edgesBottom[0].absolute, + + top: edgesTop[i].distance, + bottom: edgesBottom[0].distance + }; } } } @@ -317,7 +355,15 @@ class EdgeDetect{ var blackbarWidth = edgesBottom[i].distance > edgesTop[0].distance ? edgesBottom[i].distance : edgesTop[0].distance; - return {status: "ar_known", blackbarWidth: blackbarWidth, guardLineTop: edgesTop[0].distance, guardLineBottom: edgesBottom[0].absolute}; + return { + status: "ar_known", + blackbarWidth: blackbarWidth, + guardLineTop: edgesTop[0].distance, + guardLineBottom: edgesBottom[0].absolute, + + top: edgesTop[0].distance, + bottom: edgesBottom[i].distance + }; } } } @@ -334,13 +380,29 @@ class EdgeDetect{ if(edges.edgeCandidatesTopCount == 0 && edges.edgeCandidatesBottomCount != 0){ for(var edge of edgesBottom){ if(edge.count >= edgeDetectionTreshold) - return {status: "ar_known", blackbarWidth: edge.distance, guardLineTop: null, guardLineBottom: edge.bottom} + return { + status: "ar_known", + blackbarWidth: edge.distance, + guardLineTop: null, + guardLineBottom: edge.bottom, + + top: edge.distance, + bottom: edge.distance + } } } if(edges.edgeCandidatesTopCount != 0 && edges.edgeCandidatesBottomCount == 0){ for(var edge of edgesTop){ if(edge.count >= edgeDetectionTreshold) - return {status: "ar_known", blackbarWidth: edge.distance, guardLineTop: edge.top, guardLineBottom: null} + return { + status: "ar_known", + blackbarWidth: edge.distance, + guardLineTop: edge.top, + guardLineBottom: null, + + top: edge.distance, + bottom: edge.distance + } } } } @@ -435,8 +497,7 @@ class EdgeDetect{ var bottom = (i / this.conf.canvasImageDataRowLength) + 1; colsOut.push({ col: col, - bottom: bottom, - bottomRelative: this.conf.canvas.height - bottom + bottom: bottom }); colsIn.splice(colsIn.indexOf(col), 1); } @@ -480,8 +541,7 @@ class EdgeDetect{ var bottom = (i / this.conf.canvasImageDataRowLength) + 1; colsOut.push({ col: col, - bottom: bottom, - bottomRelative: this.conf.canvas.height - bottom + bottom: bottom }); colsIn.splice(colsIn.indexOf(col), 1); this.conf.debugCanvas.trace(tmpI,DebugCanvasClasses.EDGEDETECT_CANDIDATE); @@ -550,7 +610,7 @@ class EdgeDetect{ return false; // no violation } - _imageTest(image, start, end, sample, edgeCandidates){ + _imageTest(image, start, end, sampleOffset, edgeCandidates){ var detections = 0; for(var i = start; i < end; i += 4){ @@ -561,16 +621,16 @@ class EdgeDetect{ } } if(detections >= detectionTreshold){ - if(edgeCandidates[sample.top] != undefined) - edgeCandidates[sample.top].count++; + if(edgeCandidates[sampleOffset] != undefined) + edgeCandidates[sampleOffset].count++; else{ - edgeCandidates[sample.top] = {top: sample.top, count: 1}; + edgeCandidates[sampleOffset] = {offset: sampleOffset, count: 1}; edgeCandidates.count++; } } } - _imageTest_dbg(image, start, end, sample, edgeCandidates){ + _imageTest_dbg(image, start, end, sampleOffset, edgeCandidates){ var detections = 0; for(var i = start; i < end; i += 4){ @@ -584,10 +644,10 @@ class EdgeDetect{ } } if(detections >= this.detectionTreshold){ - if(edgeCandidates[sample.top] != undefined) - edgeCandidates[sample.top].count++; + if(edgeCandidates[sampleOffset] != undefined) + edgeCandidates[sampleOffset].count++; else{ - edgeCandidates[sample.top] = {top: sample.top, count: 1}; + edgeCandidates[sampleOffset] = {offset: sampleOffset, count: 1}; edgeCandidates.count++; } } diff --git a/js/modules/ArDetect.js b/js/modules/ArDetect.js index f5a2eac..70dde20 100644 --- a/js/modules/ArDetect.js +++ b/js/modules/ArDetect.js @@ -278,12 +278,12 @@ class ArDetector { } - var trueAr = width / trueHeight; + var trueAr = this.canvas.width / trueHeight; this.detectedAr = trueAr; // poglejmo, če se je razmerje stranic spremenilo // check if aspect ratio is changed: - var lastAr = this.conf.getLastAr(); + var lastAr = this.conf.resizer.getLastAr(); if( lastAr.type == "auto" && lastAr.ar != null){ // spremembo lahko zavrnemo samo, če uporabljamo avtomatski način delovanja in če smo razmerje stranic // že nastavili. @@ -614,7 +614,7 @@ class ArDetector { // } // if(!textEdge){ - this.processAr(GlobalVars.video, this.canvas.width, this.canvas.height, edgePost.blackbarWidth, null, fallbackMode); + this.processAr(edgePost); // we also know edges for guardline, so set them this.guardLine.setBlackbar({top: edgePost.guardLineTop, bottom: edgePost.guardLineBottom}); diff --git a/js/modules/Resizer.js b/js/modules/Resizer.js index ed985f9..771b6c6 100644 --- a/js/modules/Resizer.js +++ b/js/modules/Resizer.js @@ -64,9 +64,9 @@ class Resizer { stretchFactors = Stretcher.conditionalStretch(dimensions, ExtensionConf.stretch.conditionalDifferencePercent); } - zoom.applyZoom(dimensions); + this.zoom.applyZoom(dimensions); - cssOffsets = this.computeOffsets(dimensions); + var cssOffsets = this.computeOffsets(dimensions); this.applyCss(cssOffsets, stretchFactors); } @@ -74,6 +74,10 @@ class Resizer { this.lastAr = override; } + getLastAr(){ + return this.lastAr; + } + setStretchMode(stretchMode){ this.stretch.mode = stretchMode; } @@ -276,7 +280,7 @@ class Resizer { } setStyleString (styleString, count = 0) { - vid.setAttribute("style", styleString); + this.video.setAttribute("style", styleString); if(this.restore_wd){