@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.55 → 2.0.0-next.57

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

@@ -8,7 +8,11 @@ import {
   OUTER_RING_RADIUS,
   innerRingRadiusFor,
   vesselImages,
+  type WatchArea,
 } from '../watch/watch.js';
+import '../readout/readout.js';
+import {ReadoutDirection, ReadoutVariant} from '../readout/readout.js';
+import {Priority} from '../types.js';
 import {TickmarkType} from '../watch/tickmark.js';
 import {AdviceState, AdviceType, AngleAdviceRaw} from '../watch/advice.js';
 import {customElement} from '../../decorator.js';
@@ -23,6 +27,23 @@ const watchRadius = OUTER_RING_RADIUS;
 /** Half-side of the centre overlay viewBox in SVG units. */
 const CENTRE_HALF = 200;
 
+export enum ObcPitchType {
+  /** Single arc scale on the right (default). */
+  singleScale = 'single-scale',
+  /** Right scale duplicated to the opposite (left) arc as well. */
+  dualScale = 'dual-scale',
+}
+
+/**
+ * `<obc-pitch>` — Pitch (trim) indicator with a side arc scale.
+ *
+ * Shows `pitch` against a watch arc centred on the right, with an average-pitch
+ * band and a rotating indicator. Supports an optional opposite-side scale
+ * (`dual-scale`), a centre readout (`hasReadout`), and a `regular`/`enhanced`
+ * palette.
+ *
+ * @element obc-pitch
+ */
 @customElement('obc-pitch')
 export class ObcPitch extends LitElement {
   @property({type: Number}) pitch = 0;
@@ -32,6 +53,22 @@ export class ObcPitch extends LitElement {
   @property({type: Number}) maxPitchAdvice: number | undefined = undefined;
   @property({type: Boolean}) triggerPitchAdvice = false;
   @property({type: Boolean}) zoomToFitArc: boolean = false;
+  /**
+   * When `true`, the centre shows an `<obc-readout>` with the pitch value
+   * (label `Pitch`, unit `DEG`) instead of the horizon line, rotating indicator
+   * and vessel. Default `false`.
+   */
+  @property({type: Boolean}) hasReadout: boolean = false;
+  /**
+   * `single-scale` shows one arc on the right (default); `dual-scale` also
+   * shows the scale on the opposite (left) arc (the indicator's opposite end).
+   */
+  @property({type: String}) type: ObcPitchType = ObcPitchType.singleScale;
+  /**
+   * Colour palette for the scale fill / indicator and the readout value:
+   * `regular` (default) or `enhanced`.
+   */
+  @property({type: String}) priority: Priority = Priority.regular;
   /**
    * Half-extent of the watch arc in degrees. The arc spans `90° ± arcAngle`
    * and pitch values are placed at their true position within it. Default
@@ -47,6 +84,18 @@ export class ObcPitch extends LitElement {
 
   private _arcFrame: ZoomToFitArcFrame | undefined;
 
+  private get scaleFillColor(): string {
+    return this.priority === Priority.enhanced
+      ? 'var(--instrument-enhanced-tertiary-color)'
+      : 'var(--instrument-regular-tertiary-color)';
+  }
+
+  private get indicatorColor(): string {
+    return this.priority === Priority.enhanced
+      ? 'var(--instrument-enhanced-secondary-color)'
+      : 'var(--instrument-regular-secondary-color)';
+  }
+
   override render() {
     const arcAngle = normalizeArcAngle(this.arcAngle, 45);
     // Outer thin-ring complement endpoints. The arc band is centred at
@@ -55,7 +104,7 @@ export class ObcPitch extends LitElement {
     const x = watchRadius * Math.cos((arcAngle * Math.PI) / 180);
     const y = watchRadius * Math.sin((arcAngle * Math.PI) / 180);
 
-    const areas = [
+    const areas: WatchArea[] = [
       {
         startAngle: 90 - arcAngle,
         endAngle: 90 + arcAngle,
@@ -98,107 +147,146 @@ export class ObcPitch extends LitElement {
     return html`
       <div class="container">
         <svg viewBox="${centreViewBox}">
-          ${svg`
-            <line
-              x1="-${watchRadius}"
-              y1="0"
-              x2="${watchRadius}"
-              y2="0"
-              stroke="var(--instrument-frame-tertiary-color)"
-            />
-            <line
-              x1="0"
-              y1="0"
-              x2="${watchRadius - 10}"
-              y2="0"
-              stroke="var(--instrument-enhanced-secondary-color)"
-              transform="${needleTransform}"
-            />
-            <g
-              style="transform: rotate(${this.pitch}deg) scale(${vesselScale}) translate(-80px, -80px);"
-            >
-              ${vesselImages[this.vesselImageSide]}
-            </g>
-            ${
-              this.zoomToFitArc
-                ? nothing
-                : svg`
-                    <path
-                      d="M ${x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${-y}"
-                      fill="none"
-                      stroke="var(--instrument-frame-tertiary-color)"
-                    />
-                  `
-            }
-          `}
+          ${this.hasReadout
+            ? nothing
+            : svg`
+                <line
+                  x1="-${watchRadius}"
+                  y1="0"
+                  x2="${watchRadius}"
+                  y2="0"
+                  stroke="var(--instrument-frame-tertiary-color)"
+                />
+                <line
+                  x1="0"
+                  y1="0"
+                  x2="${watchRadius - 10}"
+                  y2="0"
+                  stroke="${this.indicatorColor}"
+                  transform="${needleTransform}"
+                />
+                <g
+                  style="transform: rotate(${this.pitch}deg) scale(${vesselScale}) translate(-80px, -80px);"
+                >
+                  ${this.zoomToFitArc ? vesselImages[this.vesselImageSide] : nothing}
+                </g>
+              `}
+          ${this.zoomToFitArc
+            ? nothing
+            : this.type === ObcPitchType.dualScale
+              ? svg`
+                  <path
+                    d="M ${x} ${-y} A ${watchRadius} ${watchRadius} 0 0 0 ${-x} ${-y}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                  <path
+                    d="M ${x} ${y} A ${watchRadius} ${watchRadius} 0 0 1 ${-x} ${y}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                `
+              : svg`
+                  <path
+                    d="M ${x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${-y}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                `}
         </svg>
-        <obc-watch
-          .watchCircleType=${WatchCircleType.double}
-          .zoomToFitArc=${this.zoomToFitArc}
-          .arcFrame=${this._arcFrame}
-          .areas=${areas}
-          .barAreas=${[
-            {
-              startAngle: 90 + this.minAvgPitch,
-              endAngle: 90 + this.maxAvgPitch,
-              fillColor: 'var(--instrument-enhanced-tertiary-color)',
-            },
-          ]}
-          .needles=${[
-            {
-              angle: 90 + this.pitch,
-              fillColor: 'var(--instrument-enhanced-secondary-color)',
-              strokeColor: 'var(--border-silhouette-color)',
-            },
-          ]}
-          .vessels=${this.zoomToFitArc
-            ? []
-            : [
-                {
-                  size: VesselImageSize.large,
-                  vesselImage: this.vesselImageSide,
-                  transform: `rotate(${this.pitch}deg)`,
-                },
-              ]}
-          .tickmarks=${[
-            {
-              angle: 90,
-              type: TickmarkType.main,
-            },
-          ]}
-          .advices=${this.advices}
-        ></obc-watch>
+        ${this.renderScale(areas, false)}
+        ${this.type === ObcPitchType.dualScale
+          ? this.renderScale(areas, true)
+          : nothing}
+        ${this.hasReadout
+          ? html`<div class="readout">
+              <obc-readout
+                .variant=${ReadoutVariant.enhanced}
+                .direction=${ReadoutDirection.vertical}
+                .hasSetpoint=${false}
+                .hasAdvice=${false}
+                .value=${this.pitch}
+                .fractionDigits=${0}
+                .valuePriority=${this.priority}
+                label="Pitch"
+                unit="DEG"
+              ></obc-readout>
+            </div>`
+          : nothing}
       </div>
     `;
   }
 
+  // `opposite` rotates a second watch 180° onto the opposite (left) arc for
+  // dual-scale — a rotation (opposite end of the indicator), not a mirror. A
+  // separate watch keeps the zoomed `arcFrame` correct.
+  private renderScale(areas: WatchArea[], opposite: boolean) {
+    return html`
+      <obc-watch
+        class=${opposite ? 'scale-opposite' : nothing}
+        .priority=${this.priority}
+        .watchCircleType=${WatchCircleType.double}
+        .zoomToFitArc=${this.zoomToFitArc}
+        .arcFrame=${this._arcFrame}
+        tickmarksInside
+        .areas=${areas}
+        .barAreas=${[
+          {
+            startAngle: 90 + this.minAvgPitch,
+            endAngle: 90 + this.maxAvgPitch,
+            fillColor: this.scaleFillColor,
+          },
+        ]}
+        .needles=${[
+          {
+            angle: 90 + this.pitch,
+            fillColor: this.indicatorColor,
+            strokeColor: 'var(--border-silhouette-color)',
+          },
+        ]}
+        .vessels=${opposite || this.zoomToFitArc || this.hasReadout
+          ? []
+          : [
+              {
+                size: VesselImageSize.large,
+                vesselImage: this.vesselImageSide,
+                transform: `rotate(${this.pitch}deg)`,
+              },
+            ]}
+        .tickmarks=${[{angle: 90, type: TickmarkType.main}]}
+        .advices=${this.advices}
+      ></obc-watch>
+    `;
+  }
+
   private get advices(): AngleAdviceRaw[] {
-    const advices = [];
-    if (this.maxPitchAdvice !== undefined) {
-      const arcAngle = normalizeArcAngle(this.arcAngle, 45);
-      // Caution band fills the remainder of the arc out to a default 30°
-      // caution range (clamped to the arc edge).
-      const outer = Math.min(arcAngle, 30);
-      const inner = Math.min(this.maxPitchAdvice, outer);
-      const state = this.triggerPitchAdvice
-        ? AdviceState.triggered
-        : AdviceState.regular;
-      advices.push({
+    if (this.maxPitchAdvice === undefined) {
+      return [];
+    }
+    const arcAngle = normalizeArcAngle(this.arcAngle, 45);
+    // Caution band fills the remainder of the arc out to a default 30° caution
+    // range (clamped to the arc edge).
+    const outer = Math.min(arcAngle, 30);
+    const inner = Math.min(this.maxPitchAdvice, outer);
+    const state = this.triggerPitchAdvice
+      ? AdviceState.triggered
+      : AdviceState.regular;
+    return [
+      {
         minAngle: 90 - outer,
         maxAngle: 90 - inner,
         type: AdviceType.caution,
         state: state,
         hideMinTickmark: true,
-      });
-      advices.push({
+      },
+      {
         minAngle: 90 + inner,
         maxAngle: 90 + outer,
         type: AdviceType.caution,
         state: state,
         hideMaxTickmark: true,
-      });
-    }
-    return advices;
+      },
+    ];
   }
 
   static override styles = css`
@@ -219,6 +307,16 @@ export class ObcPitch extends LitElement {
       width: 100%;
       height: 100%;
     }
+
+    .readout {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .scale-opposite {
+      transform: rotate(180deg);
+    }
   `;
 }
 

package/src/navigation-instruments/pitch-roll/pitch-roll.stories.ts

@@ -61,6 +61,19 @@ export const Primary: Story = {
   args: {},
 };
 
+export const WithReadout: Story = {
+  args: {
+    hasReadout: true,
+  },
+};
+
+export const ZoomedInWithReadout: Story = {
+  args: {
+    zoomToFitArc: true,
+    hasReadout: true,
+  },
+};
+
 export const Rov: Story = {
   args: {
     vesselImageSide: VesselImage.rovSideFaded,

package/src/navigation-instruments/pitch-roll/pitch-roll.ts

@@ -14,6 +14,8 @@ import {TickmarkType} from '../watch/tickmark.js';
 import {AdviceState, AdviceType, AngleAdviceRaw} from '../watch/advice.js';
 import {customElement} from '../../decorator.js';
 import {Priority} from '../types.js';
+import '../readout/readout.js';
+import {ReadoutDirection, ReadoutVariant} from '../readout/readout.js';
 import {
   computeZoomToFitArcFrame,
   normalizeArcAngle,
@@ -65,6 +67,11 @@ export class ObcPitchRoll extends LitElement {
     PitchRollPriorityElement.pitch,
     PitchRollPriorityElement.roll,
   ];
+  /**
+   * When `true`, the centre shows two stacked `<obc-readout>`s (pitch above
+   * roll) instead of the vessel images. Default `false`.
+   */
+  @property({type: Boolean}) hasReadout: boolean = false;
   @property({type: Boolean}) zoomToFitArc: boolean = false;
   /**
    * Half-extent of each of the four watch arcs in degrees, measured from the
@@ -156,7 +163,9 @@ export class ObcPitchRoll extends LitElement {
     return html`
       <div class="container">
         <svg viewBox="${overlayViewBox}">
-          ${svg`
+          ${this.hasReadout
+            ? nothing
+            : svg`
             <line
               x1="-150"
               y1="0"
@@ -179,10 +188,47 @@ export class ObcPitchRoll extends LitElement {
         ${this.zoomToFitArc
           ? this.renderZoomedArcs(pitchReq, rollReq)
           : this.renderFullWatch(areas)}
+        ${this.hasReadout
+          ? html`<div class="readout">
+              <div class="readout-group">
+                ${this.renderReadout(
+                  this.pitch,
+                  'Pitch',
+                  PitchRollPriorityElement.pitch
+                )}
+                <div class="readout-divider"></div>
+                ${this.renderReadout(
+                  this.roll,
+                  'Roll',
+                  PitchRollPriorityElement.roll
+                )}
+              </div>
+            </div>`
+          : nothing}
       </div>
     `;
   }
 
+  private renderReadout(
+    value: number,
+    label: string,
+    element: PitchRollPriorityElement
+  ) {
+    return html`
+      <obc-readout
+        .variant=${ReadoutVariant.enhanced}
+        .direction=${ReadoutDirection.vertical}
+        .hasSetpoint=${false}
+        .hasAdvice=${false}
+        .value=${value}
+        .fractionDigits=${0}
+        .valuePriority=${this.priorityFor(element)}
+        label=${label}
+        unit="DEG"
+      ></obc-readout>
+    `;
+  }
+
   /**
    * Zoomed-arc layer: four CSS-rotated `<obc-watch>` instances, each
    * containing a single arc rendered at the watch's natural top
@@ -579,18 +625,20 @@ export class ObcPitchRoll extends LitElement {
             strokeColor: 'var(--border-silhouette-color)',
           },
         ]}
-        .vessels=${[
-          {
-            size: VesselImageSize.large,
-            vesselImage: this.vesselImageSide,
-            transform: `rotate(${this.pitch}deg)`,
-          },
-          {
-            size: VesselImageSize.large,
-            vesselImage: this.vesselImageFore,
-            transform: `rotate(${this.roll}deg) scale(${this.normalizedScaleForeImage})`,
-          },
-        ]}
+        .vessels=${this.hasReadout
+          ? []
+          : [
+              {
+                size: VesselImageSize.large,
+                vesselImage: this.vesselImageSide,
+                transform: `rotate(${this.pitch}deg)`,
+              },
+              {
+                size: VesselImageSize.large,
+                vesselImage: this.vesselImageFore,
+                transform: `rotate(${this.roll}deg) scale(${this.normalizedScaleForeImage})`,
+              },
+            ]}
         .tickmarks=${[
           {angle: 0, type: TickmarkType.main},
           {angle: 90, type: TickmarkType.main},
@@ -697,6 +745,25 @@ export class ObcPitchRoll extends LitElement {
       width: 100%;
       height: 100%;
     }
+
+    .readout {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .readout-group {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: fit-content;
+    }
+
+    .readout-divider {
+      align-self: stretch;
+      height: 1px;
+      background: var(--border-divider-color);
+    }
   `;
 }
 

package/src/navigation-instruments/roll/roll.stories.ts

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
-import {ObcRoll} from './roll.js';
+import {ObcRoll, ObcRollType} from './roll.js';
 import './roll.js';
+import {Priority} from '../types.js';
 import {widthDecorator} from '../../storybook-util.js';
 import {VesselImage} from '../watch/vessel.js';
 import {foreVessels} from '../watch/vessels/storybook-helper.js';
@@ -26,6 +27,8 @@ const meta: Meta<typeof ObcRoll> = {
       control: 'select',
       options: foreVessels,
     },
+    type: {control: 'select', options: Object.values(ObcRollType)},
+    priority: {control: 'select', options: Object.values(Priority)},
   },
   decorators: [widthDecorator],
 } satisfies Meta<ObcRoll>;
@@ -59,3 +62,22 @@ export const ZoomedInNarrow: Story = {
     maxRollAdvice: 10,
   },
 };
+
+export const WithReadout: Story = {
+  args: {
+    hasReadout: true,
+  },
+};
+
+export const DualScale: Story = {
+  args: {
+    type: ObcRollType.dualScale,
+    hasReadout: true,
+  },
+};
+
+export const Enhanced: Story = {
+  args: {
+    priority: Priority.enhanced,
+  },
+};