@oicl/openbridge-webcomponents 0.0.15-dev-20240916083108 → 0.0.15-dev-20240923184809

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

@@ -1,4 +1,4 @@
-import {LitElement, svg, html, css} from 'lit';
+import {LitElement, svg, html, css, nothing} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 import {InstrumentState} from '../types';
 import {LinearAdvice, LinearAdviceRaw, renderAdvice} from './advice';
@@ -46,6 +46,7 @@ export class ObcThruster extends LitElement {
         singleDirectionHalfSize: this.singleDirectionHalfSize,
         topPropeller: this.topPropeller,
         bottomPropeller: this.bottomPropeller,
+        narrow: !this.tunnel,
       })}
     </div>`;
   }
@@ -63,11 +64,11 @@ export class ObcThruster extends LitElement {
   `;
 }
 
-function thrusterTop(
+export function thrusterTop(
   height: number,
   value: number,
   colors: {box: string; container: string},
-  hideTicks: boolean
+  options: {hideTicks: boolean; hideContainer: boolean}
 ) {
   const container = svg`
       <path transform="translate(0 -2)" d="M -44 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 72 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
@@ -78,7 +79,7 @@ function thrusterTop(
 
   const nTicks = 2;
   const delta = height / nTicks;
-  if (!hideTicks) {
+  if (!options.hideTicks) {
     for (let i = 1; i < nTicks; i++) {
       tickmarks.push(
         svg`<line x1="-24" x2="-44" y1=${-i * delta - 2}  y2=${
@@ -96,54 +97,86 @@ function thrusterTop(
   const barHeight = (height * value) / 100;
   const barY = -2 - barHeight;
   const bar = svg`<rect width="40" height=${barHeight} x="-20" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
-
-  return [container, track, tickmarks, bar];
+  if (options.hideContainer) {
+    return [track, tickmarks, bar];
+  } else {
+    return [container, track, tickmarks, bar];
+  }
 }
 
-function thrusterTopSingleSided(
+export function thrusterTopSingleSided(
   height: number,
   value: number,
   colors: {box: string; container: string},
-  hideTicks: boolean,
-  advice: LinearAdviceRaw[],
-  flipAdicePattern: boolean = false
+  options: {
+    hideTicks: boolean;
+    flipAdicePattern: boolean;
+    hideContainer: boolean;
+    narrow: boolean;
+  },
+  advice: LinearAdviceRaw[]
 ) {
-  const container = svg`
+  const container = options.narrow
+    ? svg`
       <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  `
+    : svg`
+      <path transform="translate(0 -2)" d="M -40 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 56 a 8 8 0 0 1 8 8 V 0 Z" fill=${colors.container} stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
   `;
-  const track = svg`
+  const track = options.narrow
+    ? svg`
       <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 32 V 0 Z" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
+  `
+    : svg`
+      <path transform="translate(0 -2)" d="M -40 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 40 V 0 Z" fill="var(--instrument-frame-secondary-color)" stroke="var(--instrument-frame-tertiary-color)" vector-effect="non-scaling-stroke"/>
   `;
 
-  const tickmarks = hideTicks
+  const tickmarks = options.hideTicks
     ? []
     : [singleSidedTickmark(height, 50, TickmarkStyle.hinted)];
 
   const barHeight = (height * value) / 100;
+  const barWidth = options.narrow ? 40 : 48;
+  const barX = options.narrow ? -32 : -40;
   const barY = -2 - barHeight;
-  const maskId = flipAdicePattern ? 'thrusterBarMask1' : 'thrusterBarMask2';
-  const bar = svg`
+  const maskId = options.flipAdicePattern
+    ? 'thrusterBarMask1'
+    : 'thrusterBarMask2';
+  // The mask is used to clip the bar to the container shape
+  const mask = options.hideContainer
+    ? nothing
+    : svg`
   <defs>
   <mask id=${maskId}>
-  <path transform="translate(0 -2)" d="M -32 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h 48 a 8 8 0 0 1 8 8 V 0 Z" fill="white" stroke="white" vector-effect="non-scaling-stroke"/>
-  </defs>
-  <rect mask="url(#${maskId})" width="40" height=${barHeight} x="-32" y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
+  <path transform="translate(0 -2)" d="M ${barX} 0  v -${height - 8}  a 8 8 0 0 1 8 -8 h ${barWidth} V 0 Z" fill="white" stroke="white" vector-effect="non-scaling-stroke"/>
+  </defs>`;
+  const maskAttr = options.hideContainer ? '' : `mask="url(#${maskId})"`;
+  const bar = svg`
+    ${mask}
+    <rect ${maskAttr} width=${barWidth} height=${barHeight} x=${barX} y=${barY} fill=${colors.box} stroke=${colors.box} vector-effect="non-scaling-stroke"/>`;
   const advicesSvg = advice.map((a) =>
-    renderAdvice(height, a, flipAdicePattern)
+    renderAdvice(height, a, options.flipAdicePattern)
   );
-
-  return [container, track, tickmarks, bar, advicesSvg];
+  const all = [tickmarks, bar, advicesSvg];
+  if (!options.hideContainer) {
+    all.splice(0, 0, [container, track]);
+  }
+  if (!options.narrow) {
+    return svg`<g transform="translate(4 0)">${all}</g>`;
+  } else {
+    return all;
+  }
 }
 
-function thrusterBottom(
+export function thrusterBottom(
   height: number,
   value: number,
   colors: {box: string; container: string},
-  hideTicks: boolean
+  options: {hideTicks: boolean; hideContainer: boolean}
 ) {
   const container = svg`
       <g transform="rotate(180)">
-        ${thrusterTop(height, value, colors, hideTicks)}
+        ${thrusterTop(height, value, colors, options)}
       </g>
   `;
   return container;
@@ -153,18 +186,23 @@ function thrusterBottomSingleSided(
   height: number,
   value: number,
   colors: {box: string; container: string},
-  hideTicks: boolean,
-  advices: LinearAdviceRaw[]
+  options: {
+    hideTicks: boolean;
+    flipAdicePattern: boolean;
+    hideContainer: boolean;
+    narrow: boolean;
+  },
+  advice: LinearAdviceRaw[]
 ) {
   const container = svg`
       <g transform="rotate(180) scale(-1,1)">
-        ${thrusterTopSingleSided(height, value, colors, hideTicks, advices, true)}
+        ${thrusterTopSingleSided(height, value, colors, {hideTicks: options.hideTicks, flipAdicePattern: options.flipAdicePattern, hideContainer: options.hideContainer, narrow: options.narrow}, advice)}
       </g>
   `;
   return container;
 }
 
-function setpointSvg(
+export function setpointSvg(
   height: number,
   value: number,
   setpointAtZero: boolean,
@@ -172,12 +210,13 @@ function setpointSvg(
   options: {
     inCommand: boolean;
     singleSided: boolean;
+    narrow: boolean;
   }
 ) {
   const y = -(setpointAtZero
     ? 0
     : Math.sign(value) * ((height * Math.abs(value)) / 100 + 2));
-  const extra = options.singleSided ? -12 : 0;
+  const extra = (options.singleSided ? -12 : 0) + (options.narrow ? 0 : 4);
   let path;
   if (options.inCommand) {
     path =
@@ -211,6 +250,27 @@ function setpointSvg(
   `;
 }
 
+export function atSetpoint(
+  thrust: number,
+  setpoint: number | undefined,
+  options: {
+    autoAtSetpoint: boolean;
+    autoSetpointDeadband: number;
+    touching: boolean;
+    atSetpoint: boolean;
+  }
+): boolean {
+  if (options.touching) {
+    return false;
+  }
+
+  if (options.autoAtSetpoint && setpoint !== undefined) {
+    return Math.abs(thrust - setpoint) < options.autoSetpointDeadband;
+  }
+
+  return options.atSetpoint;
+}
+
 export function thruster(
   thrust: number,
   setpoint: number | undefined,
@@ -228,92 +288,38 @@ export function thruster(
     advices: LinearAdvice[];
     topPropeller: PropellerType;
     bottomPropeller: PropellerType;
+    narrow: boolean;
   }
 ) {
-  if (!options.singleSided && options.advices.length > 0) {
-    throw new Error('Double sided thruster does not support advice');
+  if (options.tunnel) {
+    thrust = -thrust;
+    setpoint = setpoint === undefined ? undefined : -setpoint;
   }
 
-  if (options.autoAtSetpoint && setpoint !== undefined) {
-    options.atSetpoint =
-      Math.abs(thrust - setpoint) < options.autoSetpointDeadband;
+  if (!options.singleSided && options.advices.length > 0) {
+    throw new Error('Double sided thruster does not support advice');
   }
 
-  if (options.touching) {
-    options.atSetpoint = false;
-  }
+  options.atSetpoint = atSetpoint(thrust, setpoint, options);
 
-  let boxColor = 'var(--instrument-enhanced-secondary-color)';
-  let setPointColor = 'var(--instrument-enhanced-primary-color)';
-  let arrowColor = 'var(--instrument-regular-secondary-color)';
-  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';
-  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';
-  let hideTicks = false;
-  if (options.atSetpoint) {
-    setPointColor = boxColor;
-  }
-  if (state === InstrumentState.active) {
-    boxColor = 'var(--instrument-regular-secondary-color)';
-    zeroLineColor = 'var(--instrument-regular-secondary-color)';
-    setPointColor = 'var(--instrument-regular-primary-color)';
-    arrowColor = 'var(--instrument-regular-secondary-color)';
-    if (options.atSetpoint) {
-      setPointColor = boxColor;
-    }
-  } else if (state === InstrumentState.loading) {
-    boxColor = 'transparent';
-    setPointColor = 'var(--instrument-frame-tertiary-color)';
-    zeroLineColor = 'var(--instrument-frame-tertiary-color)';
-    arrowColor = 'var(--instrument-regular-secondary-color)';
-    thrust = 0;
-    hideTicks = true;
-    if (setpoint !== undefined) {
-      setpoint = 0;
-    }
-  } else if (state === InstrumentState.off) {
-    boxColor = 'transparent';
-    setPointColor = 'var(--instrument-frame-tertiary-color)';
-    arrowColor = 'var(--instrument-frame-tertiary-color)';
-    zeroLineColor = 'var(--instrument-frame-tertiary-color)';
-    thrust = 0;
-    hideTicks = true;
-    containerBackgroundColor = 'transparent';
-    if (setpoint !== undefined) {
-      setpoint = 0;
-    }
-  }
+  const tc = thrusterColors(options, state);
 
-  const centerLine = options.singleSided
-    ? svg`<rect x="-32" y="-2" width="64" height="4" stroke-width="1" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect="non-scaling-stroke"/>`
-    : svg`
-    <rect x="-44" y="-2" width="88" height="4" stroke-width="1" fill=${zeroLineColor} stroke=${zeroLineColor} vector-effect="non-scaling-stroke"/>
+  let centerLine = svg`
+    <rect x="-44" y="-2" width="88" height="4" stroke-width="1" fill=${tc.zeroLineColor} stroke=${tc.zeroLineColor} vector-effect="non-scaling-stroke"/>
   `;
+  if (options.singleSided) {
+    const width = options.narrow ? 64 : 72;
+    const x = options.narrow ? -32 : -36;
+    centerLine = svg`<rect x=${x} y="-2" width=${width} height="4" stroke-width="1" fill=${tc.zeroLineColor} stroke=${tc.zeroLineColor} vector-effect="non-scaling-stroke"/>`;
+  }
 
   const setpointAtZero =
     Math.abs(setpoint || 0) < options.setpointAtZeroDeadband;
 
-  const advices: LinearAdviceRaw[] = options.advices.map((a) => {
-    const triggered = thrust >= a.min && thrust <= a.max;
-    let state: AdviceState;
-    if (triggered) {
-      state = AdviceState.triggered;
-    } else if (a.hinted) {
-      state = AdviceState.hinted;
-    } else {
-      state = AdviceState.regular;
-    }
-    return {
-      min: a.min,
-      max: a.max,
-      type: a.type,
-      state,
-    };
-  });
-
-  const topAdvices = advices.filter((a) => a.min >= 0);
-  const bottomAdvices = advices
-    .filter((a) => a.max <= 0)
-    .map((a) => ({...a, min: -a.max, max: -a.min}));
+  const {topAdvices, bottomAdvices} = convertThrustAdvices(
+    options.advices,
+    thrust
+  );
 
   const thrusterSvg = [];
   const baseheight = options.topPropeller === PropellerType.none ? 134 : 106;
@@ -323,8 +329,13 @@ export function thruster(
       thrusterTopSingleSided(
         height,
         Math.max(thrust, 0),
-        {box: boxColor, container: containerBackgroundColor},
-        hideTicks,
+        {box: tc.boxColor, container: tc.containerBackgroundColor},
+        {
+          hideTicks: tc.hideTicks,
+          flipAdicePattern: false,
+          hideContainer: false,
+          narrow: options.narrow,
+        },
         topAdvices
       )
     );
@@ -333,8 +344,13 @@ export function thruster(
         thrusterBottomSingleSided(
           height,
           Math.max(-thrust, 0),
-          {box: boxColor, container: containerBackgroundColor},
-          hideTicks,
+          {box: tc.boxColor, container: tc.containerBackgroundColor},
+          {
+            hideTicks: tc.hideTicks,
+            flipAdicePattern: true,
+            hideContainer: false,
+            narrow: options.narrow,
+          },
           bottomAdvices
         )
       );
@@ -345,8 +361,8 @@ export function thruster(
       thrusterTop(
         height,
         Math.max(thrust, 0),
-        {box: boxColor, container: containerBackgroundColor},
-        hideTicks
+        {box: tc.boxColor, container: tc.containerBackgroundColor},
+        {hideTicks: tc.hideTicks, hideContainer: false}
       )
     );
     if (!options.singleDirection) {
@@ -354,8 +370,8 @@ export function thruster(
         thrusterBottom(
           height,
           Math.max(-thrust, 0),
-          {box: boxColor, container: containerBackgroundColor},
-          hideTicks
+          {box: tc.boxColor, container: tc.containerBackgroundColor},
+          {hideTicks: tc.hideTicks, hideContainer: false}
         )
       );
     }
@@ -368,12 +384,13 @@ export function thruster(
         setpoint,
         setpointAtZero,
         {
-          fill: setPointColor,
+          fill: tc.setPointColor,
           stroke: 'var(--border-silhouette-color)',
         },
         {
           inCommand: state === InstrumentState.inCommand,
           singleSided: options.singleSided,
+          narrow: options.narrow,
         }
       )
     );
@@ -382,7 +399,7 @@ export function thruster(
   if (options.tunnel) {
     return svg`
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -64  320 128" x="-160" y="-64">
-        <g transform="rotate(90)">
+        <g transform="rotate(-90)">
           ${thrusterSvg}
         </g>
       </svg>`;
@@ -393,7 +410,7 @@ export function thruster(
       viewBox = '-80 -300 160 320';
       y = -320;
     }
-    const top = topPropeller(height, arrowColor, options.topPropeller);
+    const top = topPropeller(height, tc.arrowColor, options.topPropeller);
     const bottom = bottomPropeller(
       options.singleDirectionHalfSize ? 0.5 : height,
       options.bottomPropeller
@@ -413,3 +430,78 @@ declare global {
     'obc-thruster': ObcThruster;
   }
 }
+
+export function convertThrustAdvices(
+  advices: LinearAdvice[],
+  thrust: number
+): {topAdvices: LinearAdviceRaw[]; bottomAdvices: LinearAdviceRaw[]} {
+  const rawAdvices: LinearAdviceRaw[] = advices.map((a) => {
+    const triggered = thrust >= a.min && thrust <= a.max;
+    let state: AdviceState;
+    if (triggered) {
+      state = AdviceState.triggered;
+    } else if (a.hinted) {
+      state = AdviceState.hinted;
+    } else {
+      state = AdviceState.regular;
+    }
+    return {
+      min: a.min,
+      max: a.max,
+      type: a.type,
+      state,
+      hinted: a.hinted,
+    };
+  });
+
+  const topAdvices = rawAdvices.filter((a) => a.min >= 0);
+  const bottomAdvices = rawAdvices
+    .filter((a) => a.max <= 0)
+    .map((a) => ({...a, min: -a.max, max: -a.min}));
+  return {topAdvices, bottomAdvices};
+}
+
+export function thrusterColors(
+  options: {atSetpoint: boolean; touching: boolean},
+  state: InstrumentState
+) {
+  let boxColor = 'var(--instrument-enhanced-secondary-color)';
+  let setPointColor = 'var(--instrument-enhanced-primary-color)';
+  let arrowColor = 'var(--instrument-regular-secondary-color)';
+  let containerBackgroundColor = 'var(--instrument-frame-primary-color)';
+  let zeroLineColor = 'var(--instrument-enhanced-secondary-color)';
+  let hideTicks = false;
+  if (options.atSetpoint) {
+    setPointColor = boxColor;
+  }
+  if (state === InstrumentState.active) {
+    boxColor = 'var(--instrument-regular-secondary-color)';
+    zeroLineColor = 'var(--instrument-regular-secondary-color)';
+    setPointColor = 'var(--instrument-regular-primary-color)';
+    arrowColor = 'var(--instrument-regular-secondary-color)';
+    if (options.atSetpoint) {
+      setPointColor = boxColor;
+    }
+  } else if (state === InstrumentState.loading) {
+    boxColor = 'transparent';
+    setPointColor = 'var(--instrument-frame-tertiary-color)';
+    zeroLineColor = 'var(--instrument-frame-tertiary-color)';
+    arrowColor = 'var(--instrument-regular-secondary-color)';
+    hideTicks = true;
+  } else if (state === InstrumentState.off) {
+    boxColor = 'transparent';
+    setPointColor = 'var(--instrument-frame-tertiary-color)';
+    arrowColor = 'var(--instrument-frame-tertiary-color)';
+    zeroLineColor = 'var(--instrument-frame-tertiary-color)';
+    hideTicks = true;
+    containerBackgroundColor = 'transparent';
+  }
+  return {
+    zeroLineColor,
+    boxColor,
+    containerBackgroundColor,
+    hideTicks,
+    setPointColor,
+    arrowColor,
+  };
+}

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>
     `;
   }