Changes to debugging UI

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -269,9 +269,28 @@
             <p>
               <b>Debug options</b>
             </p>
+            <div class="flex flex-row">
+              <div>
                 <div>
                   <button @click="eventBus.sendToTunnel('aard-enable-debug', true)">Show debug overlay</button>
                 </div>
+                <div>
+                  <div class="label">Show debug overlay on startup</div>
+                  <input
+                    type="checkbox"
+                    v-model="settings.active.ui.dev.aardDebugOverlay.showOnStartup"
+                    @change="settings.saveWithoutReload"
+                  >
+                </div>
+              </div>
+              <div>
+                <JsonEditor
+                  v-model="settingsJson"
+                >
+                </JsonEditor>
+                <button @click="saveDebugUiSettings">Save debug UI settings</button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -289,14 +308,15 @@ import AspectRatioType from '../../../common/enums/AspectRatioType.enum';
 import StretchType from '../../../common/enums/StretchType.enum';
 import CropModePersistence from '../../../common/enums/CropModePersistence.enum';
 import AlignmentOptionsControlComponent from './AlignmentOptionsControlComponent.vue';
+import JsonEditor from '@csui/src/components/JsonEditor';
 
 export default {
-  data() {
+  components: {
-    return {
+    ShortcutButton,
-      exec: null,
+    EditShortcutButton,
-      performanceData: {},
+    Button,
-      graphRefreshInterval: undefined,
+    AlignmentOptionsControlComponent,
-    }
+    JsonEditor
   },
   mixins: [
   ],
@@ -306,6 +326,16 @@ export default {
     'eventBus',
     'site'
   ],
+  data() {
+    return {
+      exec: null,
+      performanceData: {},
+      graphRefreshInterval: undefined,
+      settingsJson: {},
+    }
+  },
+  computed: {
+  },
   created() {
     this.eventBus.subscribe(
       'uw-config-broadcast',
@@ -315,24 +345,15 @@ export default {
       }
     );
   },
-  destroyed() {
-    this.eventBus.unsubscribeAll(this);
-  },
   mounted() {
     this.eventBus.sendToTunnel('get-aard-timing');
     this.graphRefreshInterval = setInterval(() => this.eventBus.sendToTunnel('get-aard-timing'), 500);
+    this.resetSettingsEditor();
   },
   destroyed() {
+    this.eventBus.unsubscribeAll(this);
     clearInterval(this.graphRefreshInterval);
   },
-  components: {
-    ShortcutButton,
-    EditShortcutButton,
-    Button,
-    AlignmentOptionsControlComponent
-  },
-  computed: {
-  },
   methods: {
     async openOptionsPage() {
       BrowserDetect.runtime.openOptionsPage();
@@ -349,7 +370,15 @@ export default {
         this.$nextTick( () => this.$forceUpdate() );
       }
     },
+    resetSettingsEditor() {
+      this.settingsJson = JSON.parse(JSON.stringify(this.settings?.active.ui.dev.aardDebugOverlay ?? {}));
+    },
+    saveDebugUiSettings() {
+      this.settings.active.ui.dev.aardDebugOverlay = JSON.parse(JSON.stringify(this.settingsJson));
+      this.settings.saveWithoutReload();
     }
+  },
+
 }
 </script>
 

src/ext/lib/aard/Aard.ts

@@ -219,7 +219,6 @@ import { AardTimers, initAardTimers } from './interfaces/aard-timers.interface';
  *
  */
 export class Aard {
-
   //#region configuration parameters
   private logger: Logger;
   private videoData: VideoData;
@@ -269,6 +268,7 @@ export class Aard {
 
   private debugConfig: any = {};
   private timer: AardTimer;
+  private lastAnimationFrameTime: number = Infinity;
   //#endregion
 
   //#region getters
@@ -304,8 +304,7 @@ export class Aard {
     // we can tick manually, for debugging
     this.logger.log('info', 'init', `[ArDetector::ctor] creating new ArDetector. arid: ${this.arid}`);
 
-    this.timer = new AardTimer()
+    this.timer = new AardTimer();
-
     this.init();
   }
 
@@ -337,6 +336,14 @@ export class Aard {
     //   console.error('FALIED TO CREATE DEBUGG CANVAS', e);
     // }
 
+    try {
+      if (this.settings.active.ui.dev?.aardDebugOverlay?.showOnStartup) {
+        this.showDebugCanvas();
+      }
+    } catch (e) {
+      console.error(`[uw::aard] failed to create debug UI:`, e);
+    }
+
     this.startCheck();
   }
 
@@ -407,6 +414,7 @@ export class Aard {
    * Checks whether autodetection can run
    */
   startCheck() {
+    console.log('aard - starting checks')
     if (!this.videoData.player) {
       console.warn('Player not detected!');
       console.log('--- video data: ---\n', this.videoData);
@@ -453,7 +461,6 @@ export class Aard {
       this.verticalTestResults = initAardTestResults(this.settings.active.arDetect);
     }
 
-
     this.main();
   }
 
@@ -648,7 +655,7 @@ export class Aard {
       do {
         if (this.testResults.notLetterbox) {
           // console.log('————not letterbox')
-          console.warn('DETECTED NOT LETTERBOX! (resetting)')
+          // console.warn('DETECTED NOT LETTERBOX! (resetting)')
           this.timer.arChanged();
           this.updateAspectRatio(this.defaultAr);
           break;
@@ -659,7 +666,7 @@ export class Aard {
           // console.info('aspect ratio not certain:', this.testResults.aspectRatioUncertainReason);
           // console.warn('check finished:', JSON.parse(JSON.stringify(this.testResults)), JSON.parse(JSON.stringify(this.canvasSamples)), '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n');
 
-          console.warn('ASPECT RATIO UNCERTAIN, GUARD LINE INVALIDATED (resetting)')
+          // console.warn('ASPECT RATIO UNCERTAIN, GUARD LINE INVALIDATED (resetting)')
           this.timer.arChanged();
           this.updateAspectRatio(this.defaultAr);
 
@@ -669,11 +676,11 @@ export class Aard {
         // TODO: emit debug values if debugging is enabled
         this.testResults.isFinished = true;
 
-        console.warn(
+        // console.warn(
-          `[${(+new Date() % 10000) / 100} | ${this.arid}]`,'check finished — aspect ratio updated:', this.testResults.aspectRatioUpdated,
+        //   `[${(+new Date() % 10000) / 100} | ${this.arid}]`,'check finished — aspect ratio updated:', this.testResults.aspectRatioUpdated,
-          '\ndetected ar:', this.testResults.activeAspectRatio, '->', this.getAr(),
+        //   '\ndetected ar:', this.testResults.activeAspectRatio, '->', this.getAr(),
-          '\nis video playing?', this.getVideoPlaybackState() === VideoPlaybackState.Playing,
+        //   '\nis video playing?', this.getVideoPlaybackState() === VideoPlaybackState.Playing,
-          '\n\n', JSON.parse(JSON.stringify(this.testResults)), JSON.parse(JSON.stringify(this.canvasSamples)), '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n');
+        //   '\n\n', JSON.parse(JSON.stringify(this.testResults)), JSON.parse(JSON.stringify(this.canvasSamples)), '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n');
 
         // if edge width changed, emit update event.
         // except aspectRatioUpdated doesn't get set reliably, so we just call update every time, and update

src/ext/lib/aard/AardDebugUi.ts

@@ -7,9 +7,15 @@ export class AardDebugUi {
   uiAnchorElement: HTMLDivElement;
   pauseOnArCheck: boolean = false;
 
+  uiVisibility: any = {};
+
   constructor(aard: any) {
     this.aard = aard;
 
+    this.uiVisibility = {
+      detectionDetails: aard.settings.active.ui.dev.aardDebugOverlay.showDetectionDetails
+    };
+
     (window as any).ultrawidify_uw_aard_debug_tools = {
       enableStopOnChange: () => this.changePauseOnCheck(true),
       disableStopOnChange: () => this.changePauseOnCheck(false),
@@ -26,7 +32,13 @@ export class AardDebugUi {
         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>Aard debug overlay</h1></div>
+          <div style="padding: 1rem; color: #fff">
+            <h1>Aard debug overlay</h1>
+          </div>
+          <div style="pointer-events: all; display: flex; flex-direction: column; margin-right: 1rem;">
+            <button id="uw-aard-debug_show-detection-details">Show det. details</button>
+            <button id="uw-aard-debug_hide-detection-details">Hide det. details</button>
+          </div>
 
           <style>
             #uw-aard-debug_performance-container #uw-aard-debug_performance-popup {
@@ -62,7 +74,9 @@ export class AardDebugUi {
             <button id="uw-aard-debug-ui_close-overlay">Close overlay</button>
           </div>
         </div>
-        <div style="display: flex; flex-direction: row; width: 100%">
+
+
+        <div id="uw-aard-debug-ui_body" 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>
@@ -129,6 +143,10 @@ export class AardDebugUi {
     document.getElementById('uw-aard-debug-ui_enable-step').onclick = () => this.aard.step();
     document.getElementById('uw-aard-debug-ui_enable-step-nocache').onclick = () => this.aard.step({noCache: true});
     document.getElementById('uw-aard-debug-ui_close-overlay').onclick = () => (this.aard as any).hideDebugCanvas();
+    document.getElementById('uw-aard-debug_show-detection-details').onclick = () => {this.uiVisibility.detectionDetails = true; this.setOverlayVisibility();};
+    document.getElementById('uw-aard-debug_hide-detection-details').onclick = () => {this.uiVisibility.detectionDetails = false; this.setOverlayVisibility();};
+
+    this.setOverlayVisibility();
   }
 
   changePauseOnCheck(pauseOnChange: boolean) {
@@ -388,5 +406,10 @@ export class AardDebugUi {
     resultsDiv.textContent = out;
   }
 
+  private setOverlayVisibility() {
+    document.getElementById('uw-aard-debug-ui_body').style.display = this.uiVisibility.detectionDetails ? 'flex' : 'none';
+    document.getElementById('uw-aard-debug_hide-detection-details').style.display = this.uiVisibility.detectionDetails ? '' : 'none';
+    document.getElementById('uw-aard-debug_show-detection-details').style.display = this.uiVisibility.detectionDetails ? 'none' : '';
+  }
 }