Include annotation heading height in chrome calculations

ecoacoustics · Jan 22, 2025 · 491e712 · 491e712
1 parent 3cc5853
commit 491e712
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 52 deletions.
diff --git a/dev/spectrogram-axes.html b/dev/spectrogram-axes.html
@@ -9,9 +9,31 @@
 
   <body>
     <oe-axes>
-      <oe-spectrogram id="spectrogram" src="/example.flac"></oe-spectrogram>
+      <oe-indicator>
+        <oe-spectrogram
+          id="playing-spectrogram"
+          src="/public/example_34s.flac"
+          color-map="magma"
+          window-function="gaussian"
+          window-size="2048"
+          window-overlap="512"
+          paused=""
+          scaling="stretch"
+          offset="0"
+          brightness="-0.35"
+          contrast="2.5"
+          mel-scale
+        ></oe-spectrogram>
+      </oe-indicator>
     </oe-axes>
 
     <oe-media-controls for="spectrogram"></oe-media-controls>
+
+    <style>
+      oe-spectrogram {
+        height: 500px;
+        width: 500px;
+      }
+    </style>
   </body>
 </html>
diff --git a/dev/spectrogram.html b/dev/spectrogram.html
@@ -8,38 +8,36 @@
   </head>
 
   <body>
-    <oe-axes>
+    <oe-annotate>
       <oe-indicator>
-        <oe-annotate>
-          <oe-spectrogram
-            id="playing-spectrogram"
-            class="large"
-            window-size="1024"
-            color-map="magma"
-            brightness="-0.4"
-            contrast="2"
-            scaling="stretch"
-          >
-            <source src="/example.flac" />
-          </oe-spectrogram>
-
-          <oe-annotation
-            tags="bird"
-            start-time="0.4"
-            end-time="4.99"
-            low-frequency="2500"
-            high-frequency="3500"
-          ></oe-annotation>
-
-          <oe-annotation start-time="2.93" end-time="3.32" low-frequency="8000" high-frequency="9900">
-            <oe-tag value="bat">Bat</oe-tag>
-            <oe-tag value="ultrasonic">
-              <a href="https://en.wikipedia.org/wiki/Ultrasonic_transducer">Ultrasonic</a>
-            </oe-tag>
-          </oe-annotation>
-        </oe-annotate>
+        <oe-spectrogram
+          id="playing-spectrogram"
+          class="large"
+          window-size="1024"
+          color-map="magma"
+          brightness="-0.4"
+          contrast="2"
+          scaling="stretch"
+        >
+          <source src="/example.flac" />
+        </oe-spectrogram>
+
+        <oe-annotation
+          tags="bird"
+          start-time="0.4"
+          end-time="4.99"
+          low-frequency="2500"
+          high-frequency="3500"
+        ></oe-annotation>
+
+        <oe-annotation start-time="2.93" end-time="3.32" low-frequency="8000" high-frequency="9900">
+          <oe-tag value="bat">Bat</oe-tag>
+          <oe-tag value="ultrasonic">
+            <a href="https://en.wikipedia.org/wiki/Ultrasonic_transducer">Ultrasonic</a>
+          </oe-tag>
+        </oe-annotation>
       </oe-indicator>
-    </oe-axes>
+    </oe-annotate>
 
     <oe-media-controls for="playing-spectrogram">
       <span slot="play-icon">Play</span>

diff --git a/src/components/annotate/annotate.ts b/src/components/annotate/annotate.ts
@@ -93,31 +93,37 @@ export class AnnotateComponent extends AbstractComponent(LitElement) {
   public updated(): void {
     // prettier-ignore
     const boundingBoxes = Array.from(this.headingElements).map(
-      (element) => element.getBoundingClientRect(),
+      (element) => {
+        const x = element.getBoundingClientRect();
+        console.debug(element, x);
+        return x;
+      }
     );
 
     let maximumHeight = -Infinity;
     boundingBoxes.forEach((bounds) => {
-      /*
-                  /
-                 /?
-                / ?
-      hypo     /  ? opposite (unknown; chrome height)
-      (width) /   ?
-             /.   ?
-             ------
-             .deg: 20
-      */
-
-      const angle: AngleDegrees = 20;
-      const hypotenuse = bounds.width;
-
-      const opposite = hypotenuse * Math.sin(angle);
-
-      console.debug(bounds);
-
-      if (opposite > maximumHeight) {
-        maximumHeight = opposite;
+      // 1. we first have to calculate how much height the heading has
+      // 2. then we calculate how much height the 20 degree angle creates
+      // 3. we add the two heights together to get the chrome height required
+      // 4. we set the chrome height to the maximum of these values
+
+      const headingAngle = 20 satisfies AngleDegrees;
+
+      // 1.
+      const hypotOppositeAngle: AngleDegrees = 90 - headingAngle;
+      const innerAngle: AngleDegrees = 90 - hypotOppositeAngle;
+      const headingHeight: Pixel = Math.cos(innerAngle) * bounds.height;
+
+      // 2.
+      const labelHeight: Pixel = Math.sin(headingAngle) * bounds.width;
+
+      console.debug(labelHeight);
+
+      // 3.
+      const totalHeight: Pixel = headingHeight + labelHeight;
+
+      if (totalHeight > maximumHeight) {
+        maximumHeight = totalHeight;
       }
     });