Allow debug canvas to be shown or hidden from settings

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -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>

src/ext/lib/aard/Aard.ts

@@ -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 {
+    // 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();
   }
@@ -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
 
   /**

src/ext/lib/aard/AardDebugUi.ts

@@ -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) {