Changelog

Add performance measurements to Aard
fix #269
2025-04-15 19:03:29 +02:00 · 2025-04-15 18:51:34 +02:00 · 2025-04-10 00:46:44 +02:00 · 2025-04-10 00:46:22 +02:00
8 changed files with 473 additions and 74 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -8,7 +8,10 @@
 * Fixed the bug where popup wouldn't be showing the correct settings
 * Fixed the bug where site settings would default to 'disabled', even if Extension default setting was not disabled.
 * Added ability to export and import settings from file (ft. developer mode editor)
-
+* [dev goodies] Added debug overlay for aard
+* Fixed an issue where aspect ratio wouldn't get calculated correctly on youtube videos with native aspect ratios other than 16:9
+* Fixed an issue that would crash the extension if video element didn't have a player element associated with it
+* Fixed an issue where extension sometimes wouldn't work if video element was grafted/re-parented to a different element

 ### v6.2.4
 * [#264](https://github.com/tamius-han/ultrawidify/issues/264) — fixed issue with white screen that affected some youtube users. Special thanks to [SnowyOwlNugget](https://github.com/SnowyOwlNugget">SnowyOwlNugget), who instead of whining provided the necessary information.
--- a/src/csui/src/PlayerUIWindow.vue
+++ b/src/csui/src/PlayerUIWindow.vue
@ -385,7 +385,7 @@ export default {

      padding: 2rem;
      font-size: 1.5rem;
-      height: 4rem;
+      height: 6rem;

      border-bottom: 1px solid rgba(128, 128, 128, 0.5);
      border-top: 1px solid rgba(128, 128, 128, 0.5);
--- a/src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue
+++ b/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>
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@ -101,7 +101,7 @@
    <div v-if="enableSettingsEditor && settings.active.ui.devMode" class="h-full grow">
      <h2>Settings editor</h2>
      <div class="flex flex-row w-full">
-        <div class="flex flex-row">
+        <div class="flex flex-row items-center">
          <div>Enable save button:</div>
          <input v-model="allowSettingsEditing" type="checkbox">
        </div>
--- a/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
+++ b/src/csui/src/PlayerUiPanels/ChangelogPanel.vue
@ -11,16 +11,11 @@
          <li>Fixed the bug where current extension settings wouldn't be displayed correctly in the popup</li>
          <li>Fixed the issue where extension options using the "Extension default" mode would always be disabled</li>
          <li>Added the ability to import and export settings (ft. developer mode editor)</li>
+          <li>Added some toys not intended for general audience (Aard now has debug tools).</li>
+          <li>Fixed an issue where aspect ratio wouldn't get calculated correctly on youtube videos with native aspect ratios other than 16:9</li>
+          <li>Fixed an issue that would crash the extension if video element didn't have a player element associated with it</li>
+          <li>Fixed an issue where extension sometimes wouldn't work if video element was grafted/re-parented to a different element</li>
        </ul>
-
-        <p>
-          Planned future updates <i>before</i> Tam vanishes due to convention season obligations:
-        </p>
-        <ul>
-          <li>Re-implement manual zoom</li>
-          <li>It appears that ExtConfPatch for version 6.0.0 keeps getting re-applied due to a bug, but my RAID ran out for this release.</li>
-        </ul>
-
      </div>
      <div class="min-w-[400px] max-w-[520px] grow-1 shrink-1">
        <h2>Thank you monies</h2>
--- a/src/ext/lib/aard/Aard.ts
+++ b/src/ext/lib/aard/Aard.ts
@ -7,6 +7,7 @@ import Settings from '../Settings';
 import { SiteSettings } from '../settings/SiteSettings';
 import VideoData from '../video-data/VideoData';
 import { AardDebugUi } from './AardDebugUi';
+import { AardTimer } from './AardTimers';
 import { Corner } from './enums/corner.enum';
 import { VideoPlaybackState } from './enums/video-playback-state.enum';
 import { FallbackCanvas } from './gl/FallbackCanvas';
@ -233,6 +234,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()
@ -251,12 +261,14 @@ export class Aard {
  private fallbackReason: any;
  private canvasStore: AardCanvasStore;
  private testResults: AardTestResults;
+  private verticalTestResults: AardTestResults;
  private canvasSamples: AardDetectionSample;


  private forceFullRecheck: boolean = true;

  private debugConfig: any = {};
+  private timer: AardTimer;
  //#endregion

  //#region getters
@ -292,6 +304,8 @@ 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.init();
  }

@ -317,11 +331,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 +381,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 +394,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

  /**
@ -388,7 +408,9 @@ export class Aard {
   */
  startCheck() {
    if (!this.videoData.player) {
-      console.warn('Player not detected!')
+      console.warn('Player not detected!');
+      console.log('--- video data: ---\n', this.videoData);
+      return;
    }
    if (this.siteSettings.data.enableAard[this.videoData.player.environment] === ExtensionMode.Enabled) {
      this.start();
@ -409,6 +431,7 @@ export class Aard {

    // do full reset of test samples
    this.testResults = initAardTestResults(this.settings.active.arDetect);
+    this.verticalTestResults = initAardTestResults(this.settings.active.arDetect);

    if (this.animationFrame) {
      window.cancelAnimationFrame(this.animationFrame);
@ -422,8 +445,15 @@ export class Aard {
   * Runs autodetection ONCE.
   * If autodetection loop is running, this will also stop autodetection loop.
   */
-  step() {
+  step(options?: {noCache?: boolean}) {
    this.stop();
+
+    if (options?.noCache) {
+      this.testResults = initAardTestResults(this.settings.active.arDetect);
+      this.verticalTestResults = initAardTestResults(this.settings.active.arDetect);
+    }
+
+
    this.main();
  }

@ -485,7 +515,10 @@ export class Aard {
   */
  private async main() {
    try {
+      this.timer.next();
+
      let imageData: Uint8Array;
+      this.timer.current.start = performance.now();

      // We abuse a do-while loop to eat our cake (get early returns)
      // and have it, too (if we return early, we still execute code
@ -495,6 +528,7 @@ export class Aard {
          resolve => {
            try {
              this.canvasStore.main.drawVideoFrame(this.video);
+              this.timer.current.draw = performance.now() - this.timer.current.start;
              resolve(this.canvasStore.main.getImageData());
            } catch (e) {
              if (e.name === 'SecurityError') {
@ -524,6 +558,7 @@ export class Aard {
            }
          }
        );
+        this.timer.current.getImage = performance.now() - this.timer.current.start;

        // STEP 1:
        // Test if corners are black. If they're not, we can immediately quit the loop.
@ -532,6 +567,8 @@ export class Aard {
          this.settings.active.arDetect.canvasDimensions.sampleCanvas.width,
          this.settings.active.arDetect.canvasDimensions.sampleCanvas.height
        );
+        this.timer.current.fastBlackLevel = performance.now() - this.timer.current.start;
+
        if (this.testResults.notLetterbox) {
          // TODO: reset aspect ratio to "AR not applied"
          this.testResults.lastStage = 1;
@ -577,6 +614,7 @@ export class Aard {
            );
          }
        }
+        this.timer.current.guardLine = performance.now() - this.timer.current.start;  // guardLine is for both guardLine and imageLine checks

        // Both need to be checked
        if (! (this.testResults.imageLine.invalidated || this.testResults.guardLine.invalidated)) {
@ -611,6 +649,7 @@ export class Aard {
        if (this.testResults.notLetterbox) {
          // console.log('————not letterbox')
          console.warn('DETECTED NOT LETTERBOX! (resetting)')
+          this.timer.arChanged();
          this.updateAspectRatio(this.defaultAr);
          break;
        }
@ -621,6 +660,7 @@ export class Aard {
          // 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)')
+          this.timer.arChanged();
          this.updateAspectRatio(this.defaultAr);

          break;
@ -639,6 +679,7 @@ export class Aard {
        // except aspectRatioUpdated doesn't get set reliably, so we just call update every time, and update
        // if detected aspect ratio is different from the current aspect ratio
        // if (this.testResults.aspectRatioUpdated) {
+        //   this.timer.arChanged();
          this.updateAspectRatio();
        // }

@ -647,6 +688,7 @@ export class Aard {

      if (this.canvasStore.debug) {
        // this.canvasStore.debug.drawBuffer(imageData);
+        this.timer.getAverage();
        this.debugConfig?.debugUi?.updateTestResults(this.testResults);
      }
    } catch (e) {
@ -655,7 +697,6 @@ export class Aard {
    }
  }

-
  private getVideoPlaybackState(): VideoPlaybackState {
    try {
      if (this.video.ended) {
@ -1251,12 +1292,14 @@ export class Aard {
    // bit more nicely visible (instead of hidden among spagheti)
    this.edgeScan(imageData, width, height);
    this.validateEdgeScan(imageData, width, height);
+    this.timer.current.edgeScan = performance.now() - this.timer.current.start;

    // TODO: _if gradient detection is enabled, then:
    this.sampleForGradient(imageData, width, height);
+    this.timer.current.gradient = performance.now() - this.timer.current.start;

    this.processScanResults(imageData, width, height);
-
+    this.timer.current.scanResults = performance.now() - this.timer.current.start;
  }

  /**
@ -1420,6 +1463,9 @@ export class Aard {
    const slopeTestSample = this.settings.active.arDetect.edgeDetection.slopeTestWidth * 4;

    while (i < this.canvasSamples.top.length) {
+      // if (this.canvasSamples.top[i] < 0) {
+      //   continue;
+      // }
      // calculate row offset:
      row = (this.canvasSamples.top[i + 1] - 1) * width * 4;
      xs = row + this.canvasSamples.top[i] - slopeTestSample;
@ -1445,6 +1491,10 @@ export class Aard {
    i = 0;
    let i1 = 0;
    while (i < this.canvasSamples.bottom.length) {
+      // if (this.canvasSamples.bottom[i] < 0) {
+      //   continue;
+      // }
+
      // calculate row offset:
      i1 = i + 1;
      row = (this.canvasSamples.bottom[i1] + 1) * width * 4;
@ -1491,6 +1541,10 @@ export class Aard {

    upperEdgeCheck:
    for (let i = 1; i < this.canvasSamples.top.length; i += 2) {
+      if (this.canvasSamples.top[i] < 0) {
+        continue;
+      }
+
      pixelOffset = this.canvasSamples.top[i] * realWidth + this.canvasSamples.top[i - 1] * 4;

      lastSubpixel = imageData[pixelOffset] > imageData[pixelOffset + 1] ? imageData[pixelOffset] : imageData[pixelOffset + 1];
@ -1533,6 +1587,9 @@ export class Aard {

    lowerEdgeCheck:
    for (let i = 1; i < this.canvasSamples.bottom.length; i += 2) {
+      if (this.canvasSamples.bottom[i] < 0) {
+        continue;
+      }
      pixelOffset = (height - this.canvasSamples.bottom[i]) * realWidth + this.canvasSamples.bottom[i - 1] * 4;

      lastSubpixel = imageData[pixelOffset] > imageData[pixelOffset + 1] ? imageData[pixelOffset] : imageData[pixelOffset + 1];
@ -1571,7 +1628,6 @@ export class Aard {
      if (lastSubpixel - firstSubpixel > this.settings.active.arDetect.edgeDetection.gradientTestMinDelta) {
        this.canvasSamples.bottom[i] = -1;
      }
-
    }
  }

@ -1928,10 +1984,21 @@ export class Aard {
      return;
    }
    if (maxOffset > 2) {
-      this.testResults.imageLine.top = this.testResults.aspectRatioCheck.topCandidate === Infinity ? -1 : this.testResults.aspectRatioCheck.topCandidate;
-      this.testResults.imageLine.bottom = this.testResults.aspectRatioCheck.bottomCandidate === Infinity ? -1 : this.testResults.aspectRatioCheck.bottomCandidate;
-      this.testResults.guardLine.top = Math.max(this.testResults.imageLine.top - 2, 0);
-      this.testResults.guardLine.bottom = Math.min(this.testResults.imageLine.bottom + 2, this.canvasStore.main.height - 1);
+      if (this.testResults.aspectRatioCheck.topCandidate === Infinity) {
+        this.testResults.imageLine.top = -1;
+        this.testResults.guardLine.top = -1;
+      } else {
+        this.testResults.imageLine.top = this.testResults.aspectRatioCheck.topCandidate = this.testResults.aspectRatioCheck.topCandidate;
+        this.testResults.guardLine.top = Math.max(this.testResults.imageLine.top - 2, 0);
+      }
+
+      if (this.testResults.aspectRatioCheck.bottomCandidate === Infinity) {
+        this.testResults.imageLine.bottom = -1;
+        this.testResults.guardLine.bottom = -1;
+      } else {
+        this.testResults.imageLine.bottom = this.testResults.aspectRatioCheck.bottomCandidate;
+        this.testResults.guardLine.bottom = Math.min(this.testResults.imageLine.bottom + 2, this.canvasStore.main.height - 1);
+      }
    }

    this.testResults.aspectRatioUncertain = false;
@ -1969,7 +2036,7 @@ export class Aard {
    const fileAr = this.video.videoWidth / this.video.videoHeight;
    const canvasAr = this.canvasStore.main.width / this.canvasStore.main.height;

-    const compensatedWidth = fileAr === canvasAr ? this.canvasStore.main.width : this.canvasStore.main.width * fileAr;
+    const compensatedWidth = fileAr === canvasAr ? this.canvasStore.main.width : this.video.videoWidth * this.canvasStore.main.height / (this.video.videoHeight);

    // console.log(`
    //   ———— ASPECT RATIO CALCULATION: —————
--- a/src/ext/lib/aard/AardDebugUi.ts
+++ b/src/ext/lib/aard/AardDebugUi.ts
@ -1,5 +1,4 @@
-import { Aard } from './../../../../dist-chrome/ext/lib/aard/Aard';
-
+import { AardPerformanceData } from './AardTimers';

 export class AardDebugUi {

@ -24,59 +23,99 @@ 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="">
-          <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="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="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
+          <style>
+            #uw-aard-debug_performance-container #uw-aard-debug_performance-popup {
+              display: none;
+            }
+            #uw-aard-debug_performance-container:hover #uw-aard-debug_performance-popup {
+              display: block;
+              position: fixed;
+              left: 0;
+              top: 3rem;
+              width: 100vw;
+
+              color: #aaa;
+              background-color: #000;
+              border: 2px solid #fa6;
+              padding: 16px;
+              padding-right: 32px;
+              box-sizing: border-box;
+
+              backdrop-filter: blur(1rem) brightness(0.5);
+
+              pointer-events: none;
+              font-size: 12px;
+            }
+          </style>
+
+          <div id="uw-aard-debug_performance-container" style="flex-grow: 1; position: relative; pointer-events: auto;">
+            <div id="uw-aard-debug_performance-mini" style="width: 100%; color: #aaa; display: flex; flex-direction: column; font-size: 12px;"></div>
+            <div id="uw-aard-debug_performance-popup" style="position: fixed; top: 3rem; z-index: 3000;">
            </div>
          </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>
+            <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>

-        <div style="flex-grow: 1"></div>
-        <div>
-          <div style="background: black; color: #ccc;">
-            <div style="font-size: 24px; padding: 1rem;">
-              Debug results:
+            <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>
-            <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 ARD once</button>
+              <button id="uw-aard-debug-ui_enable-step-nocache"    >Run ARD (bypass cache)</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>
    `;
@ -85,9 +124,11 @@ export class AardDebugUi {
    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_enable-step-nocache').onclick = () => this.aard.step({noCache: true});
+    document.getElementById('uw-aard-debug-ui_close-overlay').onclick = () => (this.aard as any).hideDebugCanvas();
  }

  changePauseOnCheck(pauseOnChange: boolean) {
@ -113,7 +154,181 @@ export class AardDebugUi {
    this.aard.start();
  }

+  private updatePerformanceResults() {
+    const previewDiv = document.getElementById('uw-aard-debug_performance-mini');
+    const popupDiv = document.getElementById('uw-aard-debug_performance-popup');
+
+    const previewContent = `
+      <div style="display: flex; flex-direction: row">
+        <div style="width: 120px">Current:</div>
+        <div style="flex-grow: 1;">${this.generateMiniGraphBar(this.aard.timer.current)}</div>
+      </div>
+      <div style="display: flex; flex-direction: row">
+        <div style="width: 120px">Average:</div>
+        <div style="flex-grow: 1">${this.generateMiniGraphBar(this.aard.timer.average)}</div>
+      </div>
+      <div style="display: flex; flex-direction: row">
+        <div style="width: 120px">Last chg.:</div><div style="flex-grow: 1">${this.generateMiniGraphBar(this.aard.timer.lastChange)}</div>
+      </div>
+    `;
+
+    const popupContent = `
+      <h2 style="color: #fa6; margin-bottom: 1rem">Detailed performance analysis:</h2>
+      <div style="width: 100%; display: flex; flex-direction: column">
+        <div style="margin-bottom: 1rem;">
+          <span style="color: #fff">Raw times (cumulative; -1 = test was skipped):</span><br/>
+          draw        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.draw.toFixed(2)}ms</span>
+          get data    <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.getImage.toFixed(2)}ms</span>
+          black lv.   <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.fastBlackLevel.toFixed(2)}ms</span>
+          guard/image <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.guardLine.toFixed(3)}ms</span>
+          edge        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.edgeScan.toFixed(2)}ms</span>
+          gradient    <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.gradient.toFixed(3)}ms</span>
+          post        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.scanResults.toFixed(2)}ms</span>
+        </div>
+        <div style="color: #fff">Stage times (not cumulative):</div>
+        <div style="display: flex; flex-direction: row; width: 100%; height: 150px">
+          <div style="width: 160px; text-align: right; padding-right: 4px;">Current:</div>
+          <div style="flex-grow: 1;">${this.generateMiniGraphBar(this.aard.timer.current, true)}</div>
+        </div>
+
+        <div style="margin-bottom: 1rem;">
+          <span style="color: #fff">Raw times (cumulative; -1 = test was skipped):</span><br/>
+          draw        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.draw.toFixed(2)}ms</span>
+          get data    <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.getImage.toFixed(2)}ms</span>
+          black lv.   <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.fastBlackLevel.toFixed(2)}ms</span>
+          guard/image <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.guardLine.toFixed(3)}ms</span>
+          edge        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.edgeScan.toFixed(2)}ms</span>
+          gradient    <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.gradient.toFixed(3)}ms</span>
+          post        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.scanResults.toFixed(2)}ms</span>
+        </div>
+        <div style="color: #fff">Stage times (not cumulative):</div>
+        <div style="display: flex; flex-direction: row; width: 100%; height: 150px">
+          <div style="width: 160px; text-align: right; padding-right: 4px;">Average:</div>
+          <div style="flex-grow: 1;">${this.generateMiniGraphBar(this.aard.timer.average, true)}</div>
+        </div>
+
+        <div style="display: flex; flex-direction: row; width: 100%; height: 150px">
+          <div style="width: 160px; text-align: right; padding-right: 4px;">Last change:</div>
+          <div style="flex-grow: 1;">${this.generateMiniGraphBar(this.aard.timer.lastChange, true)}</div>
+        </div>
+      </div>
+    `
+
+    previewDiv.innerHTML = previewContent;
+    popupDiv.innerHTML = popupContent;
+  }
+
+  private getBarLabel(width: number, leftOffset: number, topOffset: number, label: string, detailed: boolean, extraStyles?: string) {
+    if (!detailed) {
+      return '';
+    }
+
+    let offsets: string;
+    let text: string = '';
+
+    if (leftOffset + width < 80) {
+      // at the end of the bar
+      offsets = `left: ${leftOffset + width}%;`;
+    } else {
+      if (width < 15 && leftOffset < 100) {
+        // before the bar
+        offsets = `right: ${100 - leftOffset}%;`;
+        text = 'color: #fff;';
+      } else {
+        // inside the bar, aligned to right
+        offsets = `right: ${Math.max(100 - (leftOffset + width), 0)}%;`
+      }
+    }
+
+    return `
+      <div style="
+        position: absolute;
+        ${offsets} top: ${topOffset}px;
+        padding-left: 0.5rem; padding-right: 0.5rem;đ
+        ${text}
+        text-shadow: 0 0 2px #000, 0 0 2px #000; 0 0 2px #000; 0 0 2px #000;
+        ${extraStyles}
+      ">
+        ${label}
+      </div>
+    `;
+  }
+
+  private generateMiniGraphBar(perf: AardPerformanceData, detailed: boolean = false) {
+    if (!perf) {
+      return `
+        n/a
+      `;
+    }
+
+    let total = 0;
+
+    const draw = Math.max(perf.draw, 0);
+    total += draw;
+
+    const getImageStart = draw;
+    const getImage = Math.max(perf.getImage - total, 0);
+    total += getImage;
+
+    const fastBlackLevelStart = getImageStart + getImage;
+    const fastBlackLevel = Math.max(perf.fastBlackLevel - total, 0);
+    total += fastBlackLevel;
+
+    const guardLineStart = fastBlackLevelStart + fastBlackLevel;
+    const guardLine = Math.max(perf.guardLine - total, 0);
+    total += guardLine;
+
+    const edgeScanStart = guardLineStart + guardLine;
+    const edgeScan = Math.max(perf.edgeScan - total, 0);
+    total += edgeScan;
+
+    const gradientStart = edgeScanStart + edgeScan;
+    const gradient = Math.max(perf.gradient - total, 0);
+    total += gradient;
+
+    const scanResultsStart = gradientStart + gradient;
+    const scanResults = Math.max(perf.scanResults - total, 0);
+    total += scanResults;
+
+    return `
+      <div style="width: 100%; position: relative; text-align: right;">
+        ${detailed ? '' : `${total.toFixed()} ms`}
+        <div style="position: absolute; top: 0; left: 0; width: ${total}%; background: #fff; height: 2px;"></div>
+        ${detailed ? `<div style="position: absolute; top: 0; left: ${total}%; height: 100px; width: 1px; border-left: 1px dotted rgba(255,255,255,0.5)"></div> ` : ''}
+
+        <div style="position: absolute; top: ${detailed ? '2px'  : '2px'}; left: 0; min-width: 1px; width: ${draw}%; background: #007; height: 12px;"></div>
+        ${this.getBarLabel(draw, 0, 2, `draw: ${draw.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '14px' : '2px'}; left: ${getImageStart}%; min-width: 1px; width: ${getImage}%; background: #00a; height: 12px;"></div>
+        ${this.getBarLabel(getImage, getImageStart, 14, `get data: ${getImage.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '26px' : '2px'}; left: ${fastBlackLevelStart}%; min-width: 1px; width: ${fastBlackLevel}%; background: #03a; height: 12px;"></div>
+        ${this.getBarLabel(fastBlackLevel, fastBlackLevelStart, 26, `black level: ${fastBlackLevel.toFixed(2)} ms`, detailed)};
+
+        <div style="position: absolute; top: ${detailed ? '38px' : '2px'}; left: ${guardLineStart}%; min-width: 1px; width: ${guardLine}%; background: #0f3; height: 12px;"></div>
+        ${this.getBarLabel(guardLine, guardLineStart, 38, `guard/image line: ${guardLine.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '50px' : '2px'}; left: ${edgeScanStart}%; min-width: 1px; width: ${edgeScan}%; background: #f51; height: 12px;"></div>
+        ${this.getBarLabel(edgeScan, edgeScanStart, 50, `edge scan (/w validation): ${edgeScan.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '62px' : '2px'}; left: ${gradientStart}%; min-width: 1px; width: ${gradient}%; background: #fa6; height: 12px;"></div>
+        ${this.getBarLabel(gradient, gradientStart, 62, `gradient: ${gradient.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '74px' : '2px'}; left: ${scanResultsStart}%; min-width: 1px; width: ${scanResults}%; background: #80f; height: 12px;"></div>
+        ${this.getBarLabel(scanResults, scanResultsStart, 74, `scan results processing: ${scanResults.toFixed(2)} ms`, detailed)}
+
+        ${this.getBarLabel(0, scanResults + scanResultsStart, 88, `total: ${total.toFixed(2)} ms`, detailed, 'color: #fff;')}
+
+        <!-- 60/30 fps markers -->
+        <div style="position: absolute; top: ${detailed ? '-12px' : '0'}; left: 16.666%; width: 1px; border-left: 1px dashed #4f9; height: ${detailed ? '112px' : '12px'}; padding-left: 2px; background-color: rgba(0,0,0,0.5); z-index: ${detailed ? '5' : '2'}000;">60fps</div>
+        <div style="position: absolute; top: ${detailed ? '-12px' : '0'}; left: 33.333%; width: 1px; border-left: 1px dashed #ff0; height: ${detailed ? '112px' : '12px'}; padding-left: 2px; background-color: #000; z-index: ${detailed ? '5' : '2'}000;">30fps</div>
+      </div>
+    `;
+  }
+
  updateTestResults(testResults) {
+    this.updatePerformanceResults();
+
    if (testResults.aspectRatioUpdated && this.pauseOnArCheck) {
      (this.aard as any).video.pause();
      this.aard.stop();
--- a/src/ext/lib/aard/AardTimers.ts
+++ b/src/ext/lib/aard/AardTimers.ts
@ -0,0 +1,110 @@
+export interface AardPerformanceData {
+  start: number;
+  draw: number;
+  getImage: number;
+
+  fastBlackLevel: number;
+  guardLine: number; // actually times both guard line and image line checks
+  edgeScan: number; // includes validation step
+  gradient: number;
+  scanResults: number;
+}
+
+
+export class AardTimer {
+  private currentIndex: number = -1;
+
+  private aardPerformanceDataBuffer: AardPerformanceData[];
+
+  current: AardPerformanceData;
+  previous: AardPerformanceData;
+  average: AardPerformanceData;
+  lastChange: AardPerformanceData;
+
+
+  constructor() {
+    this.aardPerformanceDataBuffer = new Array<AardPerformanceData>(16).fill(this.getEmptyMeasurement());
+    this.current = this.aardPerformanceDataBuffer[0];
+    this.previous = undefined;
+    this.lastChange = this.getEmptyMeasurement();
+    this.average = this.getEmptyMeasurement();
+  }
+
+  private getEmptyMeasurement(): AardPerformanceData {
+    return {
+      start: -1,
+      draw: -1,
+      getImage: -1,
+      fastBlackLevel: -1,
+      guardLine: -1,
+      edgeScan: -1,
+      gradient: -1,
+      scanResults: -1
+    }
+  };
+
+  private clearMeasurement(index: number) {
+    this.aardPerformanceDataBuffer[index].draw = -1;
+    this.aardPerformanceDataBuffer[index].getImage = -1;
+    this.aardPerformanceDataBuffer[index].fastBlackLevel = -1;
+    this.aardPerformanceDataBuffer[index].guardLine = -1;
+    this.aardPerformanceDataBuffer[index].edgeScan = -1;
+    this.aardPerformanceDataBuffer[index].gradient = -1;
+    this.aardPerformanceDataBuffer[index].scanResults = -1;
+  }
+
+  next() {
+    // go to next buffer position;
+    this.currentIndex = (this.currentIndex + 1) % this.aardPerformanceDataBuffer.length;
+    this.previous = this.current;
+    this.clearMeasurement(this.currentIndex);
+
+    // TODO: reset values
+    this.current = this.aardPerformanceDataBuffer[this.currentIndex];
+  }
+
+  arChanged() { // copy numbers over
+    this.lastChange.draw = this.current.draw;
+    this.lastChange.getImage = this.current.getImage;
+    this.lastChange.fastBlackLevel = this.current.fastBlackLevel;
+    this.lastChange.guardLine = this.current.guardLine;
+    this.lastChange.edgeScan = this.current.edgeScan;
+    this.lastChange.gradient = this.current.gradient;
+    this.lastChange.scanResults = this.current.scanResults;
+  }
+
+  getAverage() {
+    for (let i = 0; i < this.aardPerformanceDataBuffer.length; i++) {
+      const sample = this.aardPerformanceDataBuffer[i];
+      if (sample.draw !== -1) {
+        this.average.draw += sample.draw;
+      }
+      if (sample.getImage !== -1) {
+        this.average.getImage += sample.getImage;
+      }
+      if (sample.fastBlackLevel !== -1) {
+        this.average.fastBlackLevel += sample.fastBlackLevel;
+      }
+      if (sample.guardLine !== -1) {
+        this.average.guardLine += sample.guardLine;
+      }
+      if (sample.edgeScan !== -1) {
+        this.average.edgeScan += sample.edgeScan;
+      }
+      if (sample.gradient !== -1) {
+        this.average.gradient += sample.gradient;
+      }
+      if (sample.scanResults !== -1) {
+        this.average.scanResults += sample.scanResults;
+      }
+    }
+
+    this.average.draw /= this.aardPerformanceDataBuffer.length;
+    this.average.getImage /= this.aardPerformanceDataBuffer.length;
+    this.average.fastBlackLevel /= this.aardPerformanceDataBuffer.length;
+    this.average.guardLine /= this.aardPerformanceDataBuffer.length;
+    this.average.edgeScan /= this.aardPerformanceDataBuffer.length;
+    this.average.gradient /= this.aardPerformanceDataBuffer.length;
+    this.average.scanResults /= this.aardPerformanceDataBuffer.length;
+  }
+}
Author	SHA1	Message	Date
Tamius Han	8658b3c0d3	Changelog	2025-04-15 19:03:29 +02:00
Tamius Han	8551bc2dc1	Add performance measurements to Aard	2025-04-15 18:51:34 +02:00
Tamius Han	a0abf336cf	fix #269	2025-04-10 00:46:44 +02:00
Tamius Han	7d71dd0507	Allow debug canvas to be shown or hidden from settings	2025-04-10 00:46:22 +02:00