tamius-han/ultrawidify
1
0
Fork 0
Code Issues 1 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 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>

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);
this.startCheck();
}
},
'aard-enable-debug': {
function: (enabled: boolean) => {
if (enabled) {
this.showDebugCanvas();
} else {
this.hideDebugCanvas();
}
}
}
// 'get-aard-timing': {
// function: () => this.handlePerformanceDataRequest()
@ -317,11 +326,11 @@ export class Aard {
};
try {
this.showDebugCanvas();
} catch (e) {
console.error('FALIED TO CREATE DEBUGG CANVAS', e);
}
// try {
// this.showDebugCanvas();
// } catch (e) {
// console.error('FALIED TO CREATE DEBUGG CANVAS', e);
// }
this.startCheck();
}
@ -367,7 +376,6 @@ export class Aard {
* @param canvasId
*/
private showDebugCanvas() {
console.log('SHOWING DEBUG CANVAS!')
if (!this.canvasStore.debug) {
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);
}
}
private hideDebugCanvas() {
if (this.debugConfig.debugUi) {
this.debugConfig?.debugUi.destroyContainer();
this.debugConfig.debugUi = undefined;
}
}
//#endregion
/**

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

@ -1,6 +1,3 @@
import { Aard } from './../../../../dist-chrome/ext/lib/aard/Aard';
export class AardDebugUi {
aard: any;
@ -24,8 +21,15 @@ export class AardDebugUi {
div.id = 'uw-aard-debug-ui-container';
div.innerHTML = `
<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="width: 100%; display: flex; flex-direction: row; justify-content: space-between; backdrop-filter: blur(0.5rem) brightness(0.5);">
<div style="padding: 1rem; color: #fff"><h1>Aaard debug overlay</h1></div>
<div style="pointer-events: all">
<button id="uw-aard-debug-ui_close-overlay">Close overlay</button>
</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>
@ -79,15 +83,17 @@ export class AardDebugUi {
</div>
</div>
</div>
`;
document.body.appendChild(div);
this.uiAnchorElement = div;
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_enable-step').onclick = () => this.aard.step();
document.getElementById('uw-aard-debug-ui_close-overlay').onclick = () => (this.aard as any).hideDebugCanvas();
}
changePauseOnCheck(pauseOnChange: boolean) {