tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow debug canvas to be shown or hidden from settings

Browse Source
This commit is contained in:
Tamius Han 2025-04-10 00:45:39 +02:00
parent 54c190f86c
commit 7d71dd0507
3 changed files with 86 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue
View File

@ -264,6 +264,15 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="settings.active.ui.devMode" class="settings-segment">
<p>
<b>Debug options</b>
</p>
<div>
<button @click="eventBus.sendToTunnel('aard-enable-debug', true)">Show debug overlay</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

27
src/ext/lib/aard/Aard.ts
View File

@ -233,6 +233,15 @@ export class Aard {
console.log('received extension environment:', newEnvironment, 'player env:', this.videoData?.player?.environment); console.log('received extension environment:', newEnvironment, 'player env:', this.videoData?.player?.environment);
this.startCheck(); this.startCheck();
} }
},
'aard-enable-debug': {
function: (enabled: boolean) => {
if (enabled) {
this.showDebugCanvas();
} else {
this.hideDebugCanvas();
}
}
} }
// 'get-aard-timing': { // 'get-aard-timing': {
// function: () => this.handlePerformanceDataRequest() // function: () => this.handlePerformanceDataRequest()
@ -317,11 +326,11 @@ export class Aard {
}; };
try { // try {
this.showDebugCanvas(); // this.showDebugCanvas();
} catch (e) { // } catch (e) {
console.error('FALIED TO CREATE DEBUGG CANVAS', e); // console.error('FALIED TO CREATE DEBUGG CANVAS', e);
} // }
this.startCheck(); this.startCheck();
} }
@ -367,7 +376,6 @@ export class Aard {
* @param canvasId * @param canvasId
*/ */
private showDebugCanvas() { private showDebugCanvas() {
console.log('SHOWING DEBUG CANVAS!')
if (!this.canvasStore.debug) { if (!this.canvasStore.debug) {
this.canvasStore.debug = new GlDebugCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'uw-debug-gl'}); this.canvasStore.debug = new GlDebugCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'uw-debug-gl'});
} }
@ -381,6 +389,13 @@ export class Aard {
this.canvasStore.debug.drawVideoFrame(this.canvasStore.main.canvas); this.canvasStore.debug.drawVideoFrame(this.canvasStore.main.canvas);
} }
} }
private hideDebugCanvas() {
if (this.debugConfig.debugUi) {
this.debugConfig?.debugUi.destroyContainer();
this.debugConfig.debugUi = undefined;
}
}
//#endregion //#endregion
/** /**

106
src/ext/lib/aard/AardDebugUi.ts
View File

@ -1,6 +1,3 @@
import { Aard } from './../../../../dist-chrome/ext/lib/aard/Aard';
export class AardDebugUi { export class AardDebugUi {
aard: any; aard: any;
@ -24,59 +21,67 @@ export class AardDebugUi {
div.id = 'uw-aard-debug-ui-container'; div.id = 'uw-aard-debug-ui-container';
div.innerHTML = ` div.innerHTML = `
<div style=" <div style="
position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 9999; display: flex; flex-direction: row; font-size: 16px; font-family: 'Overpass Mono', monospace; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; display: flex; flex-direction: column; pointer-events: none; z-index: 9999; font-size: 16px; font-family: 'Overpass Mono', monospace;
"> ">
<div style=""> <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; backdrop-filter: blur(0.5rem) brightness(0.5);">
<div id="uw-aard-debug_aard-sample-canvas" style="min-width: 640px"></div> <div style="padding: 1rem; color: #fff"><h1>Aaard debug overlay</h1></div>
<div style="background: black; color: #fff"; font-size: 24px;">AARD IN</div>
<div style="background: black; color: #ccc; padding: 1rem">
<div>
<span style="color: rgb(0.1, 0.1, 0.35)">■</span>
Black level sample
</div>
<div>
<span style="color: rgb(0.3, 1.0, 0.6)">■</span>
<span style="color: rgb(0.1, 0.5, 0.3)">■</span>
Guard line (middle/corner) OK
</div>
<div>
<span style="color: rgb(1.0, 0.1, 0.1)">■</span>
<span style="color: rgb(0.5, 0.0, 0.0)">■</span>
Guard line (middle/corner) violation
</div>
<div>
Image line — <span style="color: rgb(0.7, 0.7, 0.7)">■</span> image, <span style="color: rgb(0.2, 0.2, 0.6)">■</span> no image
</div>
<div>
Edge scan — <span style="color: rgb(0.1, 0.1, 0.4)">■</span> probe, <span style="color: rgb(0.4, 0.4, 1.0)">■</span> hit
</div>
<div>
Slope test — <span style="color: rgb(0.4, 0.4, 1.0)">■</span> ok, <span style="color: rgb(1.0, 0.0, 0.0)">■</span> fail
</div>
</div>
<div style="pointer-events: all"> <div style="pointer-events: all">
<button id="uw-aard-debug-ui_enable-stop-on-change" style="">Pause video on aspect ratio change</button> <button id="uw-aard-debug-ui_close-overlay">Close overlay</button>
<button id="uw-aard-debug-ui_disable-stop-on-change" style="display: none">Stop pausing video on aspect ratio change</button>
<button id="uw-aard-debug-ui_resume-video" >Resume video</button>
<button id="uw-aard-debug-ui_enable-step" >Run aspect ratio detection</button>
</div> </div>
</div> </div>
<div style="display: flex; flex-direction: row; width: 100%">
<div style="">
<div id="uw-aard-debug_aard-sample-canvas" style="min-width: 640px"></div>
<div style="background: black; color: #fff"; font-size: 24px;">AARD IN</div>
<div style="flex-grow: 1"></div> <div style="background: black; color: #ccc; padding: 1rem">
<div> <div>
<div style="background: black; color: #ccc;"> <span style="color: rgb(0.1, 0.1, 0.35)">■</span>
<div style="font-size: 24px; padding: 1rem;"> Black level sample
Debug results: </div>
<div>
<span style="color: rgb(0.3, 1.0, 0.6)">■</span>
<span style="color: rgb(0.1, 0.5, 0.3)">■</span>
Guard line (middle/corner) OK
</div>
<div>
<span style="color: rgb(1.0, 0.1, 0.1)">■</span>
<span style="color: rgb(0.5, 0.0, 0.0)">■</span>
Guard line (middle/corner) violation
</div>
<div>
Image line — <span style="color: rgb(0.7, 0.7, 0.7)">■</span> image, <span style="color: rgb(0.2, 0.2, 0.6)">■</span> no image
</div>
<div>
Edge scan — <span style="color: rgb(0.1, 0.1, 0.4)">■</span> probe, <span style="color: rgb(0.4, 0.4, 1.0)">■</span> hit
</div>
<div>
Slope test — <span style="color: rgb(0.4, 0.4, 1.0)">■</span> ok, <span style="color: rgb(1.0, 0.0, 0.0)">■</span> fail
</div>
</div> </div>
<pre id="uw-aard-results"></pre>
</div>
</div>
<div style="width: 1920px">
<div id="uw-aard-debug_aard-output" style="zoom: 3; image-rendering: pixelated;"></div>
<div style="background: black; color: #fff; font-size: 24px;">AARD RESULT</div>
<div style="pointer-events: all">
<button id="uw-aard-debug-ui_enable-stop-on-change" style="">Pause video on aspect ratio change</button>
<button id="uw-aard-debug-ui_disable-stop-on-change" style="display: none">Stop pausing video on aspect ratio change</button>
<button id="uw-aard-debug-ui_resume-video" >Resume video</button>
<button id="uw-aard-debug-ui_enable-step" >Run aspect ratio detection</button>
</div>
</div>
<div style="flex-grow: 1"></div>
<div>
<div style="background: black; color: #ccc;">
<div style="font-size: 24px; padding: 1rem;">
Debug results:
</div>
<pre id="uw-aard-results"></pre>
</div>
</div>
<div style="width: 1920px">
<div id="uw-aard-debug_aard-output" style="zoom: 3; image-rendering: pixelated;"></div>
<div style="background: black; color: #fff; font-size: 24px;">AARD RESULT</div>
</div>
</div> </div>
</div> </div>
`; `;
@ -85,9 +90,10 @@ export class AardDebugUi {
this.uiAnchorElement = div; this.uiAnchorElement = div;
document.getElementById('uw-aard-debug-ui_enable-stop-on-change').onclick = () => this.changePauseOnCheck(true); document.getElementById('uw-aard-debug-ui_enable-stop-on-change').onclick = () => this.changePauseOnCheck(true);
document.getElementById('uw-aard-debug-ui_disable-stop-on-change').onclick = () => this.changePauseOnCheck(true); document.getElementById('uw-aard-debug-ui_disable-stop-on-change').onclick = () => this.changePauseOnCheck(false);
document.getElementById('uw-aard-debug-ui_resume-video').onclick = () => this.resumeVideo(); document.getElementById('uw-aard-debug-ui_resume-video').onclick = () => this.resumeVideo();
document.getElementById('uw-aard-debug-ui_enable-step').onclick = () => this.aard.step(); document.getElementById('uw-aard-debug-ui_enable-step').onclick = () => this.aard.step();
document.getElementById('uw-aard-debug-ui_close-overlay').onclick = () => (this.aard as any).hideDebugCanvas();
} }
changePauseOnCheck(pauseOnChange: boolean) { changePauseOnCheck(pauseOnChange: boolean) {