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

package/src/navigation-instruments/gauge-radial/gauge-radial.ts

@@ -1,4 +1,6 @@
-import {LitElement, html} from 'lit';
+import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';
+import {classMap} from 'lit/directives/class-map.js';
+import componentStyle from './gauge-radial.css?inline';
 import {customElement} from '../../decorator.js';
 import {property} from 'lit/decorators.js';
 import {AdviceType} from '../watch/advice.js';
@@ -6,6 +8,11 @@ import {InstrumentState, Priority} from '../types.js';
 import {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';
 import '../../building-blocks/instrument-radial/instrument-radial.js';
 import {TickmarkStyle} from '../watch/tickmark.js';
+import '../readout/readout.js';
+import {
+  ReadoutStackVerticalAlignment,
+  ReadoutVariant,
+} from '../readout/readout.js';
 
 export enum ObcGaugeRadialType {
   filled = 'filled',
@@ -13,6 +20,13 @@ export enum ObcGaugeRadialType {
   needle = 'needle',
 }
 
+export enum GaugeRadialSector {
+  deg270 = '270',
+  deg180 = '180',
+  deg90Left = '90-left',
+  deg90Right = '90-right',
+}
+
 export interface GaugeRadialAdvice {
   minValue: number;
   maxValue: number;
@@ -34,14 +48,17 @@ export interface GaugeRadialAdvice {
  *
  * - **Three display types**: `filled` (solid arc), `bar` (thinner arc), and
  *   `needle` (pointer indicator) via the `type` property.
- * - **Full-range mapping**: The configured `minValue..maxValue` always spans
- *   the full 270° sweep. Symmetric ranges still place `0` at 12 o'clock.
+ * - **Sector sweep**: `sector` selects the arc span (`270`, `180`, `90-left`, or `90-right`).
+ *   The configured `minValue..maxValue` always spans the full sector. For the
+ *   centered sectors (`270`, `180`) a symmetric range places `0` at 12 o'clock;
+ *   for `90-left`/`90-right` the range midpoint sits at the middle of the quadrant.
  * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,
  *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint
  *   properties are provided by `SetpointMixin` and forwarded to the inner
  *   `<obc-instrument-radial>`.
  * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to
- *   render caution/alert arcs on the gauge.
+ *   render caution/alert arcs on the gauge. Not shown on the `90-left` /
+ *   `90-right` sectors.
  *
  * ## Usage Guidelines
  *
@@ -50,6 +67,12 @@ export interface GaugeRadialAdvice {
  * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to
  *   control tickmark density.
  * - Enable `showLabels` to show numeric labels at primary tickmarks.
+ * - Enable `showReadout` with optional `label` and `unit`. Layout depends on `sector`
+ *   and `type`: **270** filled/bar — value at center + a label-only `meta` row in
+ *   the bottom gap (two separate readouts); **180** filled/bar — a single centered
+ *   stack (value + label/unit) at the bottom; **270** needle — bottom stack;
+ *   **180** needle — no readout; **90-left** / **90-right** filled/bar — corner
+ *   readout in a square host; **90** needle — no readout.
  *
  * ## Best Practices
  *
@@ -66,7 +89,7 @@ export interface GaugeRadialAdvice {
  *   minValue="0"
  *   maxValue="100"
  *   type="filled"
- *   enhanced
+ *   priority="enhanced"
  *   showLabels
  *   primaryTickmarkInterval="25"
  *   secondaryTickmarkInterval="5"
@@ -98,47 +121,203 @@ export class ObcGaugeRadial extends SetpointMixin(LitElement) {
   @property({type: Boolean}) tickmarksInside: boolean = false;
   @property({type: String}) tickmarkStyle: TickmarkStyle =
     TickmarkStyle.regular;
+  /** Caution/alert arcs. Ignored on `sector: 90-left` / `90-right`. */
   @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];
+  @property({type: String, reflect: true}) sector: GaugeRadialSector =
+    GaugeRadialSector.deg270;
+  @property({type: Boolean}) showReadout = false;
+  @property({type: String}) label = '';
+  @property({type: String}) unit = '';
+  @property({type: Number}) fractionDigits = 0;
+
+  private get sectorAngles(): {sweep: number; start: number} {
+    switch (this.sector) {
+      case GaugeRadialSector.deg180:
+        return {sweep: 180, start: -90};
+      case GaugeRadialSector.deg90Left:
+        return {sweep: 90, start: -90};
+      case GaugeRadialSector.deg90Right:
+        return {sweep: 90, start: 0};
+      case GaugeRadialSector.deg270:
+      default:
+        return {sweep: 270, start: -135};
+    }
+  }
 
-  getAngle(v: number): number {
+  /**
+   * Per-edge crop (%) of the shared, origin-centered 448 SVG box each sector
+   * shows. All sectors render at the same natural scale, so the dial stays the
+   * same size; the sector only windows a different part (270 whole, 180 wide,
+   * 90 a quadrant).
+   */
+  private get sectorClips(): {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  } {
+    switch (this.sector) {
+      case GaugeRadialSector.deg180:
+        return {top: 0, bottom: 44, left: 0, right: 0};
+      case GaugeRadialSector.deg90Left:
+        return {top: 0, bottom: 45, left: 0, right: 45};
+      case GaugeRadialSector.deg90Right:
+        return {top: 0, bottom: 45, left: 45, right: 0};
+      case GaugeRadialSector.deg270:
+      default:
+        return {top: 0, bottom: 0, left: 0, right: 0};
+    }
+  }
+
+  private get isSector90(): boolean {
+    return (
+      this.sector === GaugeRadialSector.deg90Left ||
+      this.sector === GaugeRadialSector.deg90Right
+    );
+  }
+
+  // Arrow form so `this` binds when passed as `.getAngle=${this.getAngle}`
+  // to <obc-instrument-radial>. Do not convert to a method.
+  getAngle = (v: number): number => {
+    const {sweep, start} = this.sectorAngles;
     const span = this.maxValue - this.minValue;
     if (!Number.isFinite(span) || span <= 0) {
-      return -135;
+      return start;
     }
 
-    return ((v - this.minValue) / span) * 270 - 135;
+    return ((v - this.minValue) / span) * sweep + start;
+  };
+
+  /** Renders one gauge readout; `withMeta`/`labelOnly` pick parts. */
+  private renderReadout({
+    className,
+    variant,
+    alignment = ReadoutStackVerticalAlignment.vertical,
+    withMeta = true,
+    labelOnly = false,
+  }: {
+    className: string;
+    variant: ReadoutVariant;
+    alignment?: ReadoutStackVerticalAlignment;
+    withMeta?: boolean;
+    labelOnly?: boolean;
+  }): TemplateResult {
+    // `labelOnly` already means "no value", so derive it instead of passing both.
+    const withValue = !labelOnly;
+    return html`
+      <obc-readout
+        class=${className}
+        direction="vertical"
+        ?labelOnly=${labelOnly}
+        .variant=${variant}
+        .alignment=${alignment}
+        .valuePriority=${withValue ? this.priority : undefined}
+        .value=${withValue ? this.value : undefined}
+        .fractionDigits=${this.fractionDigits}
+        .label=${withMeta ? this.label : ''}
+        .unit=${withMeta ? this.unit : ''}
+      ></obc-readout>
+    `;
+  }
+
+  private renderReadouts() {
+    if (!this.showReadout) {
+      return nothing;
+    }
+
+    const isNeedle = this.type === ObcGaugeRadialType.needle;
+    const is90 = this.isSector90;
+    const is180 = this.sector === GaugeRadialSector.deg180;
+
+    if (isNeedle && (is180 || is90)) {
+      return nothing;
+    }
+
+    // 90 filled/bar: enhanced corner readout (bold value + label/unit).
+    if (is90) {
+      return this.renderReadout({
+        className: 'gauge-readout-meta',
+        variant: ReadoutVariant.enhanced,
+      });
+    }
+
+    // 270 needle and 180 filled/bar: centered stack (value weight follows `priority`).
+    if (isNeedle || is180) {
+      return this.renderReadout({
+        className: 'gauge-readout-meta',
+        variant: ReadoutVariant.stack,
+        alignment: ReadoutStackVerticalAlignment.center,
+      });
+    }
+
+    // 270 filled/bar: the value sits at the circle center and the label/unit row
+    // lower in the bottom gap, so they are two separately-positioned readouts.
+    return html`
+      ${this.renderReadout({
+        className: 'gauge-readout-value',
+        variant: ReadoutVariant.enhanced,
+        withMeta: false,
+      })}
+      ${this.label || this.unit
+        ? this.renderReadout({
+            className: 'gauge-readout-meta',
+            variant: ReadoutVariant.stack,
+            alignment: ReadoutStackVerticalAlignment.center,
+            labelOnly: true,
+          })
+        : nothing}
+    `;
   }
 
   override render() {
+    const clips = this.sectorClips;
     return html`
-      <obc-instrument-radial
-        .value=${this.value}
-        .state=${this.state}
-        .priority=${this.priority}
-        .setpoint=${this.setpoint}
-        .newSetpoint=${this.newSetpoint}
-        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}
-        .setpointOverride=${this.setpointOverride}
-        .touching=${this.touching}
-        .autoAtSetpoint=${this.autoAtSetpoint}
-        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}
-        .animateSetpoint=${this.animateSetpoint}
-        .maxValue=${this.maxValue}
-        .minValue=${this.minValue}
-        .getAngle=${this.getAngle}
-        .showLabels=${this.showLabels}
-        .primaryTickmarkInterval=${this.primaryTickmarkInterval}
-        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}
-        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}
-        .type=${this.type}
-        .needleType=${this.type}
-        .tickmarksInside=${this.tickmarksInside}
-        .tickmarkStyle=${this.tickmarkStyle}
-        .advices=${this.advices}
+      <div
+        class=${classMap({
+          'gauge-radial-root': true,
+          'type-needle': this.type === ObcGaugeRadialType.needle,
+          'sector-180': this.sector === GaugeRadialSector.deg180,
+          'sector-90-left': this.sector === GaugeRadialSector.deg90Left,
+          'sector-90-right': this.sector === GaugeRadialSector.deg90Right,
+        })}
       >
-      </obc-instrument-radial>
+        <obc-instrument-radial
+          .value=${this.value}
+          .state=${this.state}
+          .priority=${this.priority}
+          .setpoint=${this.setpoint}
+          .newSetpoint=${this.newSetpoint}
+          .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}
+          .setpointOverride=${this.setpointOverride}
+          .touching=${this.touching}
+          .autoAtSetpoint=${this.autoAtSetpoint}
+          .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}
+          .animateSetpoint=${this.animateSetpoint}
+          .maxValue=${this.maxValue}
+          .minValue=${this.minValue}
+          .getAngle=${this.getAngle}
+          .showLabels=${this.showLabels}
+          .primaryTickmarkInterval=${this.primaryTickmarkInterval}
+          .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}
+          .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}
+          .type=${this.type}
+          .needleType=${this.type}
+          .tickmarksInside=${this.tickmarksInside}
+          .tickmarkStyle=${this.tickmarkStyle}
+          .advices=${this.isSector90 ? [] : this.advices}
+          .clipTop=${clips.top}
+          .clipBottom=${clips.bottom}
+          .clipLeft=${clips.left}
+          .clipRight=${clips.right}
+          .endLabelsMaxMin=${this.sector === GaugeRadialSector.deg180}
+        >
+        </obc-instrument-radial>
+        ${this.renderReadouts()}
+      </div>
     `;
   }
+
+  static override styles = unsafeCSS(componentStyle);
 }
 
 declare global {

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

@@ -34,43 +34,22 @@
     grid-template-areas: "meta";
   }
 
-  &:is(
-    .alert-low-integrity,
-    .alert-invalid,
-    .alert-caution,
-    .alert-warning,
-    .alert-alarm
-  ) {
+  &:is(.data-low-integrity, .data-invalid) {
     border-width: 1px;
     border-style: solid;
     border-radius: var(--global-border-radius-border-radius-base);
   }
 
-  &.alert-low-integrity {
+  &.data-low-integrity {
     background: var(--alert-low-integrity-background-color);
     border-color: var(--alert-low-integrity-border-color);
   }
 
-  &.alert-invalid {
+  &.data-invalid {
     background: var(--alert-invalid-background-color);
     border-color: var(--alert-invalid-border-color);
   }
 
-  &.alert-caution {
-    background: var(--alert-caution-container-background-color);
-    border-color: var(--alert-caution-container-border-color);
-  }
-
-  &.alert-warning {
-    background: var(--alert-warning-container-background-color);
-    border-color: var(--alert-warning-container-border-color);
-  }
-
-  &.alert-alarm {
-    background: var(--alert-alarm-container-background-color);
-    border-color: var(--alert-alarm-container-border-color);
-  }
-
   &.stack {
     padding-bottom: calc(
       var(--obc-readout-padding-horizontal-safe) +
@@ -423,6 +402,10 @@
   text-align: center;
 }
 
+.readout.stack.vertical.alignment-center .instrument-label-unit-container {
+  align-items: center;
+}
+
 .readout.stack.vertical.alignment-vertical {
   justify-items: end;
 }

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

@@ -9,7 +9,7 @@ import {
 import {
   ReadoutDirection,
   ReadoutSetpointInteraction,
-  ReadoutAlertState,
+  ReadoutDataState,
   ReadoutVariant,
   ReadoutStackVerticalAlignment,
 } from './readout.js';
@@ -19,6 +19,12 @@ import {
   ReadoutAdviceFormat,
   ReadoutAdviceState,
 } from '../readout-advice/readout-advice.js';
+import {AlertType} from '../../types.js';
+import {
+  ObcAlertFrameMode,
+  ObcAlertFrameThickness,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
 
 const meta: Meta<ObcReadout> = {
   title: 'Instruments/Readout',
@@ -57,11 +63,11 @@ const meta: Meta<ObcReadout> = {
       },
       options: Object.values(Priority),
     },
-    alertState: {
+    dataState: {
       control: {
         type: 'select',
       },
-      options: Object.values(ReadoutAlertState),
+      options: Object.values(ReadoutDataState),
     },
     setpointInteraction: {
       control: {
@@ -193,7 +199,7 @@ function renderComponent(args: ObcReadout): TemplateResult {
     <obc-readout
       .variant=${args.variant}
       .valuePriority=${args.valuePriority}
-      .alertState=${args.alertState}
+      .dataState=${args.dataState}
       .direction=${args.direction}
       .setpointInteraction=${args.setpointInteraction}
       .setpointSize=${args.setpointSize}
@@ -219,6 +225,7 @@ function renderComponent(args: ObcReadout): TemplateResult {
       .fractionDigits=${args.fractionDigits}
       .alignment=${args.alignment}
       .off=${args.off}
+      .alert=${args.alert}
     >
     </obc-readout>
   `;
@@ -252,3 +259,49 @@ export const Center: Story = {
 
   render: (args) => renderComponent(args as ObcReadout),
 };
+
+export const DataLowIntegrity: Story = {
+  args: {
+    value: 42,
+    label: 'RPM',
+    unit: 'rpm',
+    dataState: ReadoutDataState.lowIntegrity,
+  },
+  render: (args) => renderComponent(args as ObcReadout),
+};
+
+export const DataInvalid: Story = {
+  args: {
+    value: 42,
+    label: 'RPM',
+    unit: 'rpm',
+    dataState: ReadoutDataState.invalid,
+  },
+  render: (args) => renderComponent(args as ObcReadout),
+};
+
+export const Alarm: Story = {
+  args: {
+    value: 42,
+    label: 'RPM',
+    unit: 'rpm',
+    alert: {
+      status: 'alarm',
+      mode: 'acked-active',
+    },
+  },
+  render: (args) => renderComponent(args as ObcReadout),
+};
+
+export const IsaCritical: Story = {
+  args: {
+    value: 42,
+    label: 'RPM',
+    unit: 'rpm',
+    alert: {
+      status: 'isa-critical',
+      mode: 'unacked-active',
+    },
+  },
+  render: (args) => renderComponent(args as ObcReadout),
+};

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

@@ -34,6 +34,10 @@ import {
   ReadoutSetpointSize,
 } from '../readout-setpoint/readout-setpoint.js';
 import '../readout-setpoint/readout-setpoint.js';
+import {
+  type AlertFrameConfig,
+  wrapWithAlertFrame,
+} from '../../components/alert-frame/alert-frame.js';
 
 export enum ReadoutVariant {
   regular = 'regular',
@@ -41,13 +45,10 @@ export enum ReadoutVariant {
   stack = 'stack',
 }
 
-export enum ReadoutAlertState {
+export enum ReadoutDataState {
   none = 'none',
   lowIntegrity = 'low-integrity',
   invalid = 'invalid',
-  caution = 'caution',
-  warning = 'warning',
-  alarm = 'alarm',
 }
 
 export enum ReadoutSetpointInteraction {
@@ -123,8 +124,7 @@ export class ObcReadout extends LitElement {
   @property({type: String}) src?: string;
   @property({type: Boolean}) off = false;
   @property({type: String}) valuePriority?: Priority;
-  @property({type: String}) alertState: ReadoutAlertState =
-    ReadoutAlertState.none;
+  @property({type: String}) dataState: ReadoutDataState = ReadoutDataState.none;
   @property({type: String}) setpointInteraction: ReadoutSetpointInteraction =
     ReadoutSetpointInteraction.alwaysVisible;
   @property({type: String}) direction: ReadoutDirection =
@@ -161,6 +161,8 @@ export class ObcReadout extends LitElement {
   @property({type: String}) sourceType?: ReadoutSourceType;
   @property({type: Boolean}) hasLeadingIcon = false;
 
+  @property({type: Object}) alert: AlertFrameConfig | boolean = false;
+
   @property({type: Boolean, attribute: false}) sourceHug = true;
   @property({type: Boolean}) hasSourceLeadingIcon = false;
   @property({type: Boolean, attribute: false}) hasSourceTrailingIcon = true;
@@ -1033,63 +1035,67 @@ export class ObcReadout extends LitElement {
   }
 
   override render() {
-    return html`
-      <div
-        class=${classMap({
-          readout: true,
-          [this.variant]: true,
-          [this.direction]: true,
-          'alignment-left': this.alignment === 'left',
-          'alignment-center': this.alignment === 'center',
-          'alignment-vertical': this.alignment === 'vertical',
-          'interaction-always-visible':
-            this.interactionMode === ReadoutSetpointInteraction.alwaysVisible,
-          'interaction-flip-flop':
-            this.setpointInteractionEnabled &&
-            this.interactionMode === ReadoutSetpointInteraction.flipFlop,
-          'interaction-pop-up':
-            this.setpointInteractionEnabled &&
-            this.interactionMode === ReadoutSetpointInteraction.popUp,
-          'focus-setpoint':
-            this.setpointInteractionEnabled && this.flipFlopSetpointFocused,
-          'focus-value':
-            this.setpointInteractionEnabled && this.flipFlopValueFocused,
-          'alert-none': this.alertState === ReadoutAlertState.none,
-          'alert-low-integrity':
-            this.alertState === ReadoutAlertState.lowIntegrity,
-          'alert-invalid': this.alertState === ReadoutAlertState.invalid,
-          'alert-caution': this.alertState === ReadoutAlertState.caution,
-          'alert-warning': this.alertState === ReadoutAlertState.warning,
-          'alert-alarm': this.alertState === ReadoutAlertState.alarm,
-          'has-source': this.hasSrc,
-          'has-setpoint': this.hasSetpoint,
-          'has-setpoint-button':
-            this.isHorizontal &&
-            this.setpointFormat === ReadoutSetpointFormat.button,
-          'no-hug': !this.hug,
-          'label-only': this.labelOnly,
-        })}
-      >
-        ${!this.labelOnly && this.isVertical ? this.renderAdvice() : nothing}
-        ${!this.labelOnly && this.isVertical ? this.renderSetpoint() : nothing}
-        ${!this.labelOnly && this.isVertical ? this.renderValueZone() : nothing}
-        ${(this.labelOnly || this.isVertical) &&
-        this.shouldRenderReadoutMetaZone
-          ? renderReadoutMetaZone({
-              labelValue: this.label,
-              unitValue: this.unit,
-            })
-          : nothing}
-        ${!this.labelOnly && this.hasSrc && this.isVertical
-          ? this.renderSource()
-          : nothing}
-        ${!this.labelOnly && this.isHorizontal
-          ? this.renderHorizontalLayout()
-          : nothing}
-        ${this.renderSourcePickerSlot()}
-      </div>
-      ${this.renderSourcePickerContent()}
-    `;
+    return wrapWithAlertFrame(
+      this.alert,
+      html`
+        <div
+          class=${classMap({
+            readout: true,
+            [this.variant]: true,
+            [this.direction]: true,
+            'alignment-left': this.alignment === 'left',
+            'alignment-center': this.alignment === 'center',
+            'alignment-vertical': this.alignment === 'vertical',
+            'interaction-always-visible':
+              this.interactionMode === ReadoutSetpointInteraction.alwaysVisible,
+            'interaction-flip-flop':
+              this.setpointInteractionEnabled &&
+              this.interactionMode === ReadoutSetpointInteraction.flipFlop,
+            'interaction-pop-up':
+              this.setpointInteractionEnabled &&
+              this.interactionMode === ReadoutSetpointInteraction.popUp,
+            'focus-setpoint':
+              this.setpointInteractionEnabled && this.flipFlopSetpointFocused,
+            'focus-value':
+              this.setpointInteractionEnabled && this.flipFlopValueFocused,
+            'data-none': this.dataState === ReadoutDataState.none,
+            'data-low-integrity':
+              this.dataState === ReadoutDataState.lowIntegrity,
+            'data-invalid': this.dataState === ReadoutDataState.invalid,
+            'has-source': this.hasSrc,
+            'has-setpoint': this.hasSetpoint,
+            'has-setpoint-button':
+              this.isHorizontal &&
+              this.setpointFormat === ReadoutSetpointFormat.button,
+            'no-hug': !this.hug,
+            'label-only': this.labelOnly,
+          })}
+        >
+          ${!this.labelOnly && this.isVertical ? this.renderAdvice() : nothing}
+          ${!this.labelOnly && this.isVertical
+            ? this.renderSetpoint()
+            : nothing}
+          ${!this.labelOnly && this.isVertical
+            ? this.renderValueZone()
+            : nothing}
+          ${(this.labelOnly || this.isVertical) &&
+          this.shouldRenderReadoutMetaZone
+            ? renderReadoutMetaZone({
+                labelValue: this.label,
+                unitValue: this.unit,
+              })
+            : nothing}
+          ${!this.labelOnly && this.hasSrc && this.isVertical
+            ? this.renderSource()
+            : nothing}
+          ${!this.labelOnly && this.isHorizontal
+            ? this.renderHorizontalLayout()
+            : nothing}
+          ${this.renderSourcePickerSlot()}
+        </div>
+        ${this.renderSourcePickerContent()}
+      `
+    );
   }
 
   static override styles = unsafeCSS(componentStyle);