@oicl/openbridge-webcomponents 0.0.15-dev-20240916185711 → 0.0.15-dev-20240923190011

package/src/navigation-instruments/compass-flat/compass-flat.ts

@@ -0,0 +1,221 @@
+import {LitElement, svg, SVGTemplateResult, unsafeCSS} from 'lit';
+import componentStyle from './compass-flat.css?inline';
+import {customElement, property} from 'lit/decorators.js';
+import {Tickmark, TickmarkType} from '../watch-flat/tickmark-flat';
+import '../watch-flat/watch-flat';
+
+export enum LabelPosition {
+  top = -45,
+  bottom = 50,
+}
+
+export enum LabelStyle {
+  regular = 'var(--instrument-tick-mark-secondary-color)',
+}
+
+export interface Label {
+  x: number;
+  y: LabelPosition;
+  text: string;
+}
+
+@customElement('obc-compass-flat')
+export class ObcCompassFlat extends LitElement {
+  @property({type: Boolean}) noPadding: boolean = true;
+  @property({type: Boolean}) FOVIndicator: boolean = false;
+  @property({type: Number}) padding: number = 16;
+  @property({type: Number}) heading = 0;
+  @property({type: Number}) courseOverGround = 0;
+  @property({type: Number}) tickInterval = 5;
+  @property({type: Number}) FOV = 45;
+  @property({type: Number}) minFOV = 45;
+  @property({type: Number}) maxFOV = 180;
+  labels: Label[] = [];
+
+  @property({type: Number}) containerWidth = 0;
+
+  private resizeObserver: ResizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      this.containerWidth = entry.contentRect.width;
+      this.updateLabels();
+    }
+  });
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver.unobserve(this);
+  }
+
+  private updateLabels() {
+    if (this.containerWidth < 192) {
+      this.labels = [];
+    } else if (this.containerWidth <= 300) {
+      this.labels = [
+        {x: -180, y: LabelPosition.top, text: 'S'},
+        {x: -90, y: LabelPosition.top, text: 'W'},
+        {x: 0, y: LabelPosition.top, text: 'N'},
+        {x: 90, y: LabelPosition.top, text: 'E'},
+        {x: 180, y: LabelPosition.top, text: 'S'},
+        {x: 270, y: LabelPosition.top, text: 'W'},
+        {x: 360, y: LabelPosition.top, text: 'N'},
+        {x: 450, y: LabelPosition.top, text: 'E'},
+        {x: 540, y: LabelPosition.top, text: 'S'},
+      ];
+    } else {
+      this.labels = [
+        {x: -180, y: LabelPosition.top, text: 'S'},
+        {x: -135, y: LabelPosition.top, text: 'SW'},
+        {x: -90, y: LabelPosition.top, text: 'W'},
+        {x: -45, y: LabelPosition.top, text: 'NW'},
+        {x: 0, y: LabelPosition.top, text: 'N'},
+        {x: 45, y: LabelPosition.top, text: 'NE'},
+        {x: 90, y: LabelPosition.top, text: 'E'},
+        {x: 135, y: LabelPosition.top, text: 'SE'},
+        {x: 180, y: LabelPosition.top, text: 'S'},
+        {x: 225, y: LabelPosition.top, text: 'SW'},
+        {x: 270, y: LabelPosition.top, text: 'W'},
+        {x: 315, y: LabelPosition.top, text: 'NW'},
+        {x: 360, y: LabelPosition.top, text: 'N'},
+        {x: 405, y: LabelPosition.top, text: 'NE'},
+        {x: 450, y: LabelPosition.top, text: 'E'},
+        {x: 495, y: LabelPosition.top, text: 'SE'},
+        {x: 540, y: LabelPosition.top, text: 'S'},
+      ];
+    }
+  }
+
+  private generateIntervalTickmarks(scale: number): Tickmark[] {
+    const tickmarks: Tickmark[] = [];
+    let cardinalInterval = 90;
+
+    if (this.containerWidth > 300) {
+      cardinalInterval = 45;
+    } else if (this.containerWidth < 192) {
+      cardinalInterval = 0;
+    }
+
+    for (
+      let angle = -180;
+      angle < this.maxFOV * 3;
+      angle += this.tickInterval
+    ) {
+      if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {
+        continue;
+      }
+      tickmarks.push({angle: angle * scale, type: TickmarkType.secondary});
+    }
+
+    return tickmarks;
+  }
+
+  private generateCardinalTickmarks(scale: number): Tickmark[] {
+    const tickmarks: Tickmark[] = [];
+
+    for (const label of this.labels) {
+      tickmarks.push({angle: label.x * scale, type: TickmarkType.main});
+    }
+
+    return tickmarks;
+  }
+
+  private generateTickmarks(scale: number): Tickmark[] {
+    return [
+      ...this.generateCardinalTickmarks(scale),
+      ...this.generateIntervalTickmarks(scale),
+    ];
+  }
+
+  private renderFOVIndicator(): SVGTemplateResult[] {
+    const indicators: SVGTemplateResult[] = [];
+
+    const maxAdjustment = 10;
+    const minContainerWidth = 300;
+    const maxContainerWidth = 512;
+
+    let yAdjustment = 0;
+    if (this.containerWidth < maxContainerWidth) {
+      const widthRange = maxContainerWidth - minContainerWidth;
+      const scaleFactor =
+        (maxContainerWidth - this.containerWidth) / widthRange;
+      yAdjustment = scaleFactor * maxAdjustment;
+    }
+
+    const y = LabelPosition.bottom + yAdjustment;
+
+    indicators.push(svg`
+          <text x="-175" y=${y} class="label left" fill=${LabelStyle.regular}>
+            ${-this.FOV}\u00B0
+          </text>`);
+
+    indicators.push(svg`
+          <text x="0" y=${y} class="label" fill=${LabelStyle.regular}>
+            ${this.heading}\u00B0
+          </text>`);
+
+    indicators.push(svg`
+          <text x="175" y=${y} class="label right" fill=${LabelStyle.regular}>
+            ${this.FOV}\u00B0
+          </text>`);
+
+    return indicators;
+  }
+
+  private get HDGSvg(): SVGTemplateResult {
+    return svg`<g transform="translate(-24, -74)">
+          <path d="M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z" fill="var(--instrument-enhanced-secondary-color)" stroke="var(--border-silhouette-color)"/>
+        </g>`;
+  }
+
+  private COGSvg(translation: number): SVGTemplateResult {
+    return svg`
+      <g transform="translate(${-24 + translation}, -74)">
+        <path d="M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z" fill="var(--instrument-enhanced-secondary-color)" stroke="var(--border-silhouette-color)"/>
+      </g>
+    `;
+  }
+
+  override render() {
+    let angleDiff = this.courseOverGround - this.heading;
+
+    if (angleDiff > this.maxFOV) {
+      angleDiff -= 360;
+    } else if (angleDiff < -this.maxFOV) {
+      angleDiff += 360;
+    }
+
+    this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));
+
+    const baseOffset = 5;
+    const translationScale = (baseOffset * 35) / this.FOV;
+
+    const translation = angleDiff * translationScale;
+
+    const tickmarks = this.generateTickmarks(translationScale);
+    this.labels.map((l) => {
+      l.x = l.x * translationScale;
+    });
+
+    const viewBox = this.noPadding ? '-192 -128 384 128' : '-200 -144 400 144';
+
+    return svg`
+      <div class="container">
+        <obc-watch-flat .noPadding=${this.noPadding} .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []} .labels=${this.labels} .rotation=${this.heading} .tickmarks=${tickmarks} .tickmarkSpacing=${translationScale}></obc-watch-flat>
+        <svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg"> 
+        ${this.HDGSvg}${this.COGSvg(translation)}
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-compass-flat': ObcCompassFlat;
+  }
+}

package/src/navigation-instruments/thruster/advice.ts

@@ -84,20 +84,24 @@ export function renderAdvice(
             ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
         `;
   } else {
-    let mainColor;
+    let strokeColor;
     let tickmarkStyle;
+    let fillColor: string;
     if (advice.state === AdviceState.hinted) {
-      mainColor = 'var(--instrument-frame-tertiary-color)';
+      strokeColor = 'var(--instrument-frame-tertiary-color)';
+      fillColor = 'none';
       tickmarkStyle = TickmarkStyle.hinted;
     } else if (advice.state === AdviceState.regular) {
-      mainColor = 'var(--instrument-regular-secondary-color)';
+      strokeColor = 'var(--instrument-regular-secondary-color)';
+      fillColor = 'none';
       tickmarkStyle = TickmarkStyle.regular;
     } else {
-      mainColor = 'var(--instrument-enhanced-secondary-color)';
+      strokeColor = 'var(--instrument-enhanced-secondary-color)';
+      fillColor = strokeColor;
       tickmarkStyle = TickmarkStyle.regular;
     }
     return svg`
-            ${adviceMask(height, advice.min, advice.max, mainColor, mainColor)}
+            ${adviceMask(height, advice.min, advice.max, fillColor, strokeColor)}
             ${singleSidedTickmark(height, advice.min, tickmarkStyle)}
             ${singleSidedTickmark(height, advice.max, tickmarkStyle)}
         `;

package/src/navigation-instruments/watch/advice.ts

@@ -112,7 +112,7 @@ export function renderAdvice(advice: AngleAdviceRaw): SVGTemplateResult {
       tickmarkStyle = TickmarkStyle.regular;
     }
     return svg`
-            ${adviceMask(advice.minAngle, advice.maxAngle, mainColor, mainColor)}
+            ${adviceMask(advice.minAngle, advice.maxAngle, advice.state === AdviceState.triggered ? mainColor : 'none', mainColor)}
             ${tickmark(advice.minAngle, TickmarkType.primary, tickmarkStyle, 1)}
             ${tickmark(advice.maxAngle, TickmarkType.primary, tickmarkStyle, 1)}
         `;

package/src/navigation-instruments/watch/label.ts

@@ -0,0 +1,69 @@
+import {svg, SVGTemplateResult} from 'lit-html';
+
+export function renderLabels(scale: number): SVGTemplateResult {
+  const labelWidth = 32;
+  const gap = 8;
+  const radius: number = 368 / 2;
+  const labels = [
+    {
+      label: 'E',
+      x: radius + gap / scale + labelWidth / 2,
+      y: 0,
+      class: 'label',
+    },
+    {
+      label: 'S',
+      x: 0,
+      y: radius + gap / scale + labelWidth / 2,
+      class: 'label',
+    },
+    {
+      label: 'W',
+      x: -(radius + gap / scale + labelWidth / 2),
+      y: 0,
+      class: 'label',
+    },
+  ];
+
+  let arrow = svg`<defs>
+        <mask id="circleMask">
+            <rect x="-${radius}" y="-${radius}" width="${radius * 2}" height="${radius * 2}" fill="black"/>
+            <circle cx="0" cy="0" r="${radius}" fill="white"/>
+        </mask>
+    </defs>
+    <g mask="url(#circleMask)" transform="translate(0, ${-(radius + 45 / scale)}) scale(${1 / scale}, ${1 / scale})">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M-32.04 42.7192 0 0 32.039 42.7192C21.627 40.9314 10.922 40 0 40-10.922 40-21.627 40.9314-32.04 42.7192Z" 
+      fill="var(--instrument-tick-mark-secondary-color)"/>
+        <path d="M5.003 29H2.091L-3.013 20.264H-3.077C-3.066 20.52-3.056 20.7813-3.045 21.048-3.034 21.3147-3.024 21.5867-3.013 21.864-2.992 22.1307-2.976 22.4027-2.965 22.68-2.954 22.9573-2.944 23.2347-2.933 23.512V29H-4.997V17.576H-2.101L2.987 26.232H3.035C3.024 25.9867 3.014 25.736 3.003 25.48 2.992 25.2133 2.982 24.952 2.971 24.696 2.971 24.4293 2.966 24.1627 2.955 23.896 2.944 23.6293 2.934 23.3627 2.923 23.096V17.576H5.003V29Z" fill="var(--element-active-inverted-color)"/>
+      </g>`;
+
+  if (scale < 0.58) {
+    arrow = svg`
+      <g mask="url(#circleMask)" transform="translate(0, ${-radius})">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M-17.8457 24.984 0 0 17.8458 24.984C11.9868 24.3338 6.0324 24 0 24-6.0323 24-11.9867 24.3338-17.8457 24.984Z" fill="var(--instrument-frame-tertiary-color)"/>
+        </g>`;
+
+    labels.push({
+      label: 'N',
+      x: 0,
+      y: -(radius + gap / scale + labelWidth / 2),
+      class: 'label',
+    });
+  }
+
+  return svg`
+    ${arrow}
+
+    ${labels.map(
+      (l) => svg`
+        <text
+          x="${l.x}"
+          y="${l.y}"
+          class="${l.class}"
+        >
+          ${l.label}
+        </text>
+      `
+    )}
+  `;
+}

package/src/navigation-instruments/watch/watch.css

@@ -1,11 +1,11 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .label {
-    @mixin font-body;
-    font-size: calc(16px / var(--scale));
-    fill: var(--element-neutral-color);
-    alignment-baseline: middle;
-    text-anchor: middle;
-}
+  @mixin font-body;
+  font-size: calc(16px / var(--scale));
+  fill: var(--element-neutral-color);
+  alignment-baseline: middle;
+  text-anchor: middle;
+}

package/src/navigation-instruments/watch/watch.ts

@@ -14,6 +14,7 @@ import compentStyle from './watch.css?inline';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {AngleAdviceRaw, renderAdvice} from './advice';
 import {Tickmark, TickmarkStyle, tickmark} from './tickmark';
+import {renderLabels} from './label';
 
 @customElement('obc-watch')
 export class ObcWatch extends LitElement {
@@ -27,6 +28,8 @@ export class ObcWatch extends LitElement {
   @property({type: Boolean}) roundInsideCut = false;
   @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];
   @property({type: Array, attribute: false}) advices: AngleAdviceRaw[] = [];
+  @property({type: Boolean}) crosshairEnabled: boolean = false;
+  @property({type: Boolean}) labelFrameEnabled: boolean = false;
 
   // @ts-expect-error TS6133: The controller unsures that the render
   // function is called on resize of the element
@@ -91,6 +94,29 @@ export class ObcWatch extends LitElement {
     }
   }
 
+  private renderCrosshair(radius: number): SVGTemplateResult {
+    return svg`
+      <line
+        x1="-${radius}"
+        y1="0"
+        x2="${radius}"
+        y2="0"
+        stroke="var(--instrument-frame-tertiary-color)"
+        stroke-width="1"
+        vector-effect="non-scaling-stroke"
+      />
+      <line
+        x1="0"
+        y1="-${radius}"
+        x2="0"
+        y2="${radius}"
+        stroke="var(--instrument-frame-tertiary-color)"
+        stroke-width="1"
+        vector-effect="non-scaling-stroke"
+      />
+    `;
+  }
+
   override render() {
     const width = (176 + this.padding) * 2;
     const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
@@ -102,6 +128,8 @@ export class ObcWatch extends LitElement {
     const advices = this.advices
       ? this.advices.map((a) => renderAdvice(a))
       : nothing;
+    const labels = this.labelFrameEnabled ? renderLabels(scale) : nothing;
+
     return html`
       <svg
         width="100%"
@@ -109,7 +137,8 @@ export class ObcWatch extends LitElement {
         viewBox=${viewBox}
         style="--scale: ${scale}"
       >
-        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint}
+        ${this.watchCircle()} ${tickmarks} ${advices} ${angleSetpoint} ${labels}
+        ${this.crosshairEnabled ? this.renderCrosshair(320 / 2) : nothing}
       </svg>
     `;
   }

package/src/navigation-instruments/watch-flat/tickmark-flat.ts

@@ -0,0 +1,62 @@
+import {SVGTemplateResult, svg} from 'lit';
+
+export interface Tickmark {
+  angle: number;
+  type: TickmarkType;
+  text?: string;
+}
+
+export enum TickmarkType {
+  main = 'main',
+  primary = 'primary',
+  secondary = 'secondary',
+  tertiary = 'tertiary',
+}
+
+export enum TickmarkStyle {
+  hinted = 'hinted',
+  regular = 'regular',
+  enhanced = 'enhanced',
+}
+
+export function tickmarkColor(style: TickmarkStyle): string {
+  if (style === TickmarkStyle.hinted) {
+    return 'var(--instrument-frame-tertiary-color)';
+  } else if (style === TickmarkStyle.regular) {
+    return 'var(--instrument-tick-mark-secondary-color)';
+  } else {
+    return 'var(--instrument-tick-mark-primary-color)';
+  }
+}
+
+export function tickmark(
+  angle: number,
+  tickmarkSize: TickmarkType,
+  style: TickmarkStyle,
+  text?: string
+): SVGTemplateResult | SVGTemplateResult[] {
+  const textHeight = -32;
+  let lineStartY: number = -35;
+  let lineEndY: number = -34;
+
+  if (tickmarkSize === TickmarkType.secondary) {
+    lineStartY = -24;
+    lineEndY = lineStartY + 8;
+  } else if (tickmarkSize === TickmarkType.main) {
+    lineEndY = lineStartY + 20;
+  } else if (tickmarkSize === TickmarkType.tertiary) {
+    throw new Error('Tertiary tickmarks are not supported');
+  }
+
+  const colorName = tickmarkColor(style);
+  const tick = svg`<line x1=${angle} y1=${lineStartY} x2=${angle} y2=${lineEndY} stroke=${colorName} stroke-width="1" vector-effect="non-scaling-stroke"/>`;
+  if (text) {
+    const textY = lineEndY + textHeight;
+    return [
+      tick,
+      svg`<text x=${angle} y=${textY} class="label" text-anchor="middle">${text}</text>`,
+    ];
+  }
+
+  return tick;
+}

package/src/navigation-instruments/watch-flat/watch-flat.css

@@ -0,0 +1,19 @@
+* {
+  box-sizing: border-box;
+}
+
+.label {
+  @mixin font-body;
+  font-size: calc(16px / var(--scale));
+  fill: var(--element-neutral-color);
+  alignment-baseline: middle;
+  text-anchor: middle;
+}
+
+.label.left {
+  text-anchor: start;
+}
+
+.label.right {
+  text-anchor: end;
+}

package/src/navigation-instruments/watch-flat/watch-flat.stories.ts

@@ -0,0 +1,17 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcWatchFlat} from './watch-flat';
+import './watch-flat';
+
+const meta: Meta<typeof ObcWatchFlat> = {
+  title: 'Building blocks/Watch flat',
+  tags: ['autodocs'],
+  component: 'obc-watch-flat',
+  args: {},
+} satisfies Meta<ObcWatchFlat>;
+
+export default meta;
+type Story = StoryObj<ObcWatchFlat>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/navigation-instruments/watch-flat/watch-flat.ts

@@ -0,0 +1,148 @@
+import {LitElement, SVGTemplateResult, html, svg, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './watch-flat.css?inline';
+import {Tickmark, TickmarkStyle, tickmark} from './tickmark-flat';
+import {rect} from '../../svghelpers/rectangular';
+import {Label} from '../compass-flat/compass-flat';
+
+@customElement('obc-watch-flat')
+export class ObcWatchFlat extends LitElement {
+  @property({type: Number}) width = 352;
+  @property({type: Number}) height = 72;
+  @property({type: Number}) padding = 0;
+  @property({type: Number}) rotation = 0;
+  @property({type: Number}) tickmarkSpacing = 0;
+  @property({type: Number}) angleSetpoint: number | undefined;
+  @property({type: Array, attribute: false}) tickmarks: Tickmark[] = [];
+  @property({type: Array, attribute: false}) labels: Label[] = [];
+  @property({type: Array, attribute: false}) FOVIndicator: SVGTemplateResult[] =
+    [];
+  @property({type: Number}) trackHeight = (2 / 3) * this.height;
+  @property({type: Number}) ticksHeight = this.height - this.trackHeight;
+  @property({type: Number}) borderRadius = 8;
+
+  private renderClipPath(offsetY: number = 0): SVGTemplateResult {
+    return svg`
+      <clipPath id="frameClipPath${offsetY === 0 ? '' : 'Tickmarks'}">
+        <rect x="${-this.width / 2}" y="${-this.height / 2 + offsetY}" 
+              width="${this.width}" height="${this.height}" 
+              rx="${this.borderRadius}" />
+      </clipPath>
+    `;
+  }
+
+  private renderLabelMask(): SVGTemplateResult {
+    return svg`
+      <mask id="labelMask">
+        <rect x="${-this.width / 2}" y="${-70}" 
+              width="${this.width}" height="${32}"
+               />
+        <linearGradient id="fadeGradient" gradientUnits="userSpaceOnUse"
+                        x1="${-this.width / 2}" y1="0" x2="${this.width / 2}" y2="0">
+          <stop offset="0%" style="stop-color:black; stop-opacity:1;" />
+          <stop offset="10%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="50%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="90%" style="stop-color:white; stop-opacity:1;" />
+          <stop offset="100%" style="stop-color:black; stop-opacity:1;" />
+        </linearGradient>
+        <rect x="${-this.width / 2}" y="${-70}" 
+              width="${this.width}" height="${32}"
+              fill="url(#fadeGradient)" />
+      </mask>
+    `;
+  }
+
+  private renderLabels(scale: number): SVGTemplateResult[] {
+    const labels: SVGTemplateResult[] = [];
+
+    for (const l of this.labels) {
+      labels.push(
+        svg`<g transform="translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})">
+          <text x=${l.x} y=${l.y} class="label" fill=${'var(--instrument-tick-mark-secondary-color)'}>
+            ${l.text}
+          </text>
+          </g>`
+      );
+    }
+
+    return labels;
+  }
+
+  private watchFace(): SVGTemplateResult {
+    const strokeWidth = 1;
+
+    return svg`
+      ${this.renderClipPath()}
+      ${this.renderClipPath(-40)}
+      <g clip-path="url(#frameClipPath)">
+        ${rect('frame-track', {
+          width: this.width,
+          height: this.trackHeight,
+          y: this.height / 2 - this.trackHeight,
+          strokeWidth: strokeWidth,
+          strokeColor: 'var(--instrument-frame-secondary-color)',
+          strokePosition: 'inside',
+          fillColor: 'var(--instrument-frame-secondary-color)',
+          borderRadius: 0,
+        })}
+        ${rect('frame-ticks', {
+          width: this.width,
+          height: this.ticksHeight,
+          y: this.height / 2 - this.trackHeight - this.ticksHeight,
+          strokeWidth: strokeWidth,
+          strokeColor: 'var(--instrument-frame-primary-color)',
+          strokePosition: 'inside',
+          fillColor: 'var(--instrument-frame-primary-color)',
+          borderRadius: 0,
+        })}
+      </g>
+      ${rect('frame-outline', {
+        width: this.width,
+        height: this.height,
+        strokeWidth: strokeWidth,
+        strokeColor: 'var(--instrument-frame-tertiary-color)',
+        strokePosition: 'inside',
+        fillColor: 'none',
+        borderRadius: this.borderRadius,
+      })}
+    `;
+  }
+
+  override render() {
+    const width = (this.width / 2 + this.padding) * 2;
+    const viewBox = `-${width / 2} -${this.height / 2} ${width} ${this.height}`;
+    const scale = this.clientWidth / width;
+
+    return html`
+      <svg
+        width="100%"
+        height="100%"
+        viewBox=${viewBox}
+        style="--scale: ${scale}"
+      >
+        ${this.watchFace()} ${this.renderLabelMask()} ${this.FOVIndicator}
+
+        <g clip-path="url(#frameClipPath)">
+          ${this.tickmarks.map(
+            (t) => svg`
+            <g transform="translate(${-this.rotation * this.tickmarkSpacing}, 0)">
+              ${tickmark(t.angle, t.type, TickmarkStyle.hinted)}
+            </g>
+          `
+          )}
+        </g>
+
+        <g mask="url(#labelMask)">
+          ${this.renderLabels(scale)}
+      </svg>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-watch-flat': ObcWatchFlat;
+  }
+}