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

package/bundle/openbridge-webcomponents.bundle.js

@@ -206553,6 +206553,18 @@ const componentStyle$c = i$7`
   height: 100%;
 }
 
+.container > .readout {
+  left: 50%;
+  width: auto;
+  height: auto;
+  transform: translate(-50%, -50%);
+}
+
+obc-readout::part(value-wrapper),
+obc-readout::part(meta-wrapper) {
+  justify-self: center;
+}
+
 :host {
   display: block;
   width: 100%;
@@ -206650,6 +206662,7 @@ let ObcCompassSector = class extends i$4 {
     ];
     this.tickmarksInside = false;
     this.zoomToFitArc = false;
+    this.hasReadout = false;
     this._headingSp = new SetpointBundle({
       angularWraparound: true,
       onAnimationEnd: () => this.requestUpdate()
@@ -206837,6 +206850,32 @@ let ObcCompassSector = class extends i$4 {
     const selected = Array.isArray(this.priorityElements) ? this.priorityElements : [];
     return selected.includes(element) ? this.priority : Priority.regular;
   }
+  /**
+   * Vertical placement of the readout as a percentage of the host height.
+   *
+   * With `zoomToFitArc` the arc is reframed by `computeZoomToFitArcFrame`, whose
+   * `radiusOffset`/`viewBox` depend on the arc's *absolute* orientation (which
+   * cardinal axes its bounding box crosses), not just its bend. The arc itself
+   * is always rotated back to the top, so it stays put on screen — but a
+   * frame-derived offset would swing wildly as `heading` rotates the bbox around
+   * the circle. So in zoom we use a fixed offset, which keeps the readout steady
+   * under the (stationary) arc regardless of heading.
+   *
+   * Without zoom the viewBox is the fixed, origin-symmetric 120° framing, so the
+   * geometry is orientation-independent: place the readout halfway down the inner
+   * radius from the watch center toward the arc's inner edge.
+   */
+  get _readoutTopPercent() {
+    if (this.zoomToFitArc) {
+      return 70;
+    }
+    const [, vy, , vh] = this._cachedViewBox.split(" ").map(Number);
+    if (!vh || Number.isNaN(vy)) {
+      return 50;
+    }
+    const anchorY = -INNER_RADIUS * 0.5;
+    return Math.round((anchorY - vy) / vh * 1e3) / 10;
+  }
   // ---------------------------------------------------------------------------
   // Render
   // ---------------------------------------------------------------------------
@@ -206918,6 +206957,22 @@ let ObcCompassSector = class extends i$4 {
       rOff
     )}
         </svg>
+        ${this.hasReadout ? b`<div class="readout" style="top: ${this._readoutTopPercent}%">
+              <obc-readout
+                .variant=${ReadoutVariant.enhanced}
+                .direction=${ReadoutDirection.vertical}
+                .hasSetpoint=${false}
+                .hasAdvice=${false}
+                .value=${this.heading}
+                .fractionDigits=${0}
+                .valuePriority=${this.priorityFor(
+      "hdg"
+      /* hdg */
+    )}
+                label="HDG"
+                unit="DEG"
+              ></obc-readout>
+            </div>` : A}
       </div>
     `;
   }
@@ -207001,6 +207056,9 @@ __decorateClass$D([
 __decorateClass$D([
   n$3({ type: Boolean })
 ], ObcCompassSector.prototype, "zoomToFitArc", 2);
+__decorateClass$D([
+  n$3({ type: Boolean })
+], ObcCompassSector.prototype, "hasReadout", 2);
 ObcCompassSector = __decorateClass$D([
   customElement("obc-compass-sector")
 ], ObcCompassSector);
@@ -216460,6 +216518,7 @@ let ObcPitchRoll = class extends i$4 {
       "roll"
       /* roll */
     ];
+    this.hasReadout = false;
     this.zoomToFitArc = false;
     this.arcAngle = 30;
   }
@@ -216520,7 +216579,7 @@ let ObcPitchRoll = class extends i$4 {
     return b`
       <div class="container">
         <svg viewBox="${overlayViewBox}">
-          ${w`
+          ${this.hasReadout ? A : w`
             <line
               x1="-150"
               y1="0"
@@ -216541,9 +216600,41 @@ let ObcPitchRoll = class extends i$4 {
           `}
         </svg>
         ${this.zoomToFitArc ? this.renderZoomedArcs(pitchReq, rollReq) : this.renderFullWatch(areas)}
+        ${this.hasReadout ? b`<div class="readout">
+              <div class="readout-group">
+                ${this.renderReadout(
+      this.pitch,
+      "Pitch",
+      "pitch"
+      /* pitch */
+    )}
+                <div class="readout-divider"></div>
+                ${this.renderReadout(
+      this.roll,
+      "Roll",
+      "roll"
+      /* roll */
+    )}
+              </div>
+            </div>` : A}
       </div>
     `;
   }
+  renderReadout(value, label, element) {
+    return b`
+      <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
@@ -216873,7 +216964,7 @@ let ObcPitchRoll = class extends i$4 {
         strokeColor: "var(--border-silhouette-color)"
       }
     ]}
-        .vessels=${[
+        .vessels=${this.hasReadout ? [] : [
       {
         size: VesselImageSize.large,
         vesselImage: this.vesselImageSide,
@@ -216986,6 +217077,25 @@ ObcPitchRoll.styles = i$7`
       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);
+    }
   `;
 __decorateClass$k([
   n$3({ type: Number })
@@ -217032,6 +217142,9 @@ __decorateClass$k([
 __decorateClass$k([
   n$3({ type: Array, attribute: false })
 ], ObcPitchRoll.prototype, "priorityElements", 2);
+__decorateClass$k([
+  n$3({ type: Boolean })
+], ObcPitchRoll.prototype, "hasReadout", 2);
 __decorateClass$k([
   n$3({ type: Boolean })
 ], ObcPitchRoll.prototype, "zoomToFitArc", 2);
@@ -217069,8 +217182,17 @@ let ObcPitch = class extends i$4 {
     this.maxPitchAdvice = void 0;
     this.triggerPitchAdvice = false;
     this.zoomToFitArc = false;
+    this.hasReadout = false;
+    this.type = "single-scale";
+    this.priority = Priority.regular;
     this.arcAngle = 45;
   }
+  get scaleFillColor() {
+    return this.priority === Priority.enhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)";
+  }
+  get indicatorColor() {
+    return this.priority === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
+  }
   render() {
     const arcAngle = normalizeArcAngle(this.arcAngle, 45);
     const x2 = watchRadius$1 * Math.cos(arcAngle * Math.PI / 180);
@@ -217108,96 +217230,128 @@ let ObcPitch = class extends i$4 {
     return b`
       <div class="container">
         <svg viewBox="${centreViewBox}">
-          ${w`
-            <line
-              x1="-${watchRadius$1}"
-              y1="0"
-              x2="${watchRadius$1}"
-              y2="0"
-              stroke="var(--instrument-frame-tertiary-color)"
-            />
-            <line
-              x1="0"
-              y1="0"
-              x2="${watchRadius$1 - 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 ? A : w`
-                    <path
-                      d="M ${x2} ${y3} A ${watchRadius$1} ${watchRadius$1} 0 1 1 ${x2} ${-y3}"
-                      fill="none"
-                      stroke="var(--instrument-frame-tertiary-color)"
-                    />
-                  `}
-          `}
+          ${this.hasReadout ? A : w`
+                <line
+                  x1="-${watchRadius$1}"
+                  y1="0"
+                  x2="${watchRadius$1}"
+                  y2="0"
+                  stroke="var(--instrument-frame-tertiary-color)"
+                />
+                <line
+                  x1="0"
+                  y1="0"
+                  x2="${watchRadius$1 - 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] : A}
+                </g>
+              `}
+          ${this.zoomToFitArc ? A : this.type === "dual-scale" ? w`
+                  <path
+                    d="M ${x2} ${-y3} A ${watchRadius$1} ${watchRadius$1} 0 0 0 ${-x2} ${-y3}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                  <path
+                    d="M ${x2} ${y3} A ${watchRadius$1} ${watchRadius$1} 0 0 1 ${-x2} ${y3}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                ` : w`
+                  <path
+                    d="M ${x2} ${y3} A ${watchRadius$1} ${watchRadius$1} 0 1 1 ${x2} ${-y3}"
+                    fill="none"
+                    stroke="var(--instrument-frame-tertiary-color)"
+                  />
+                `}
         </svg>
-        <obc-watch
-          .watchCircleType=${WatchCircleType.double}
-          .zoomToFitArc=${this.zoomToFitArc}
-          .arcFrame=${this._arcFrame}
-          .areas=${areas}
-          .barAreas=${[
+        ${this.renderScale(areas, false)}
+        ${this.type === "dual-scale" ? this.renderScale(areas, true) : A}
+        ${this.hasReadout ? b`<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>` : A}
+      </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.
+  renderScale(areas, opposite) {
+    return b`
+      <obc-watch
+        class=${opposite ? "scale-opposite" : A}
+        .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: "var(--instrument-enhanced-tertiary-color)"
+        fillColor: this.scaleFillColor
       }
     ]}
-          .needles=${[
+        .needles=${[
       {
         angle: 90 + this.pitch,
-        fillColor: "var(--instrument-enhanced-secondary-color)",
+        fillColor: this.indicatorColor,
         strokeColor: "var(--border-silhouette-color)"
       }
     ]}
-          .vessels=${this.zoomToFitArc ? [] : [
+        .vessels=${opposite || this.zoomToFitArc || this.hasReadout ? [] : [
       {
         size: VesselImageSize.large,
         vesselImage: this.vesselImageSide,
         transform: `rotate(${this.pitch}deg)`
       }
     ]}
-          .tickmarks=${[
-      {
-        angle: 90,
-        type: TickmarkType$1.main
-      }
-    ]}
-          .advices=${this.advices}
-        ></obc-watch>
-      </div>
+        .tickmarks=${[{ angle: 90, type: TickmarkType$1.main }]}
+        .advices=${this.advices}
+      ></obc-watch>
     `;
   }
   get advices() {
-    const advices = [];
-    if (this.maxPitchAdvice !== void 0) {
-      const arcAngle = normalizeArcAngle(this.arcAngle, 45);
-      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 === void 0) {
+      return [];
+    }
+    const arcAngle = normalizeArcAngle(this.arcAngle, 45);
+    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,
         hideMinTickmark: true
-      });
-      advices.push({
+      },
+      {
         minAngle: 90 + inner,
         maxAngle: 90 + outer,
         type: AdviceType.caution,
         state,
         hideMaxTickmark: true
-      });
-    }
-    return advices;
+      }
+    ];
   }
 };
 ObcPitch.styles = i$7`
@@ -217218,6 +217372,16 @@ ObcPitch.styles = i$7`
       width: 100%;
       height: 100%;
     }
+
+    .readout {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .scale-opposite {
+      transform: rotate(180deg);
+    }
   `;
 __decorateClass$j([
   n$3({ type: Number })
@@ -217240,6 +217404,15 @@ __decorateClass$j([
 __decorateClass$j([
   n$3({ type: Boolean })
 ], ObcPitch.prototype, "zoomToFitArc", 2);
+__decorateClass$j([
+  n$3({ type: Boolean })
+], ObcPitch.prototype, "hasReadout", 2);
+__decorateClass$j([
+  n$3({ type: String })
+], ObcPitch.prototype, "type", 2);
+__decorateClass$j([
+  n$3({ type: String })
+], ObcPitch.prototype, "priority", 2);
 __decorateClass$j([
   n$3({ type: Number })
 ], ObcPitch.prototype, "arcAngle", 2);
@@ -218783,6 +218956,9 @@ let ObcRoll = class extends i$4 {
     this.maxRollAdvice = void 0;
     this.triggerRollAdvice = false;
     this.zoomToFitArc = false;
+    this.hasReadout = false;
+    this.type = "single-scale";
+    this.priority = Priority.regular;
     this.arcAngle = 45;
   }
   get normalizedScaleForeImage() {
@@ -218791,6 +218967,12 @@ let ObcRoll = class extends i$4 {
     }
     return Math.max(0, Math.min(2, this.scaleForeImage));
   }
+  get scaleFillColor() {
+    return this.priority === Priority.enhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)";
+  }
+  get indicatorColor() {
+    return this.priority === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
+  }
   render() {
     const arcAngle = normalizeArcAngle(this.arcAngle, 45);
     const x2 = watchRadius * Math.sin(arcAngle * Math.PI / 180);
@@ -218828,97 +219010,117 @@ let ObcRoll = class extends i$4 {
     return b`
       <div class="container">
         <svg viewBox="${centreViewBox}">
-          ${w`
-            <line
-              x1="-${watchRadius}"
-              y1="0"
-              x2="${watchRadius}"
-              y2="0"
-              stroke="var(--instrument-frame-tertiary-color)"
-            />
-            <line
-              x1="0"
-              y1="0"
-              y2="${watchRadius - 10}"
-              x2="0"
-              stroke="var(--instrument-enhanced-secondary-color)"
-              transform="${needleTransform}"
-            />
-            <g
-              style="transform: rotate(${this.roll}deg) scale(${vesselScale * this.normalizedScaleForeImage}) translate(-80px, -80px);"
-            >
-              ${this.zoomToFitArc ? vesselImages[this.vesselImageFore] : A}
-            </g>
-            ${this.zoomToFitArc ? A : w`
-                    <path
-                      d="M ${-x2} ${y3} A ${watchRadius} ${watchRadius} 0 1 1 ${x2} ${y3}"
-                      fill="none"
-                      stroke="var(--instrument-frame-tertiary-color)"
-                    />
-                  `}
-          `}
+          ${this.hasReadout ? A : w`
+                <line
+                  x1="-${watchRadius}"
+                  y1="0"
+                  x2="${watchRadius}"
+                  y2="0"
+                  stroke="var(--instrument-frame-tertiary-color)"
+                />
+                <line
+                  x1="0"
+                  y1="0"
+                  y2="${watchRadius - 10}"
+                  x2="0"
+                  stroke="${this.indicatorColor}"
+                  transform="${needleTransform}"
+                />
+                <g
+                  style="transform: rotate(${this.roll}deg) scale(${vesselScale * this.normalizedScaleForeImage}) translate(-80px, -80px);"
+                >
+                  ${this.zoomToFitArc ? vesselImages[this.vesselImageFore] : A}
+                </g>
+              `}
+          ${this.zoomToFitArc ? A : w`
+                <path
+                  d="M ${-x2} ${y3} A ${watchRadius} ${watchRadius} 0 1 1 ${x2} ${y3}"
+                  fill="none"
+                  stroke="var(--instrument-frame-tertiary-color)"
+                />
+              `}
         </svg>
-        <obc-watch
-          .watchCircleType=${WatchCircleType.double}
-          .zoomToFitArc=${this.zoomToFitArc}
-          .arcFrame=${this._arcFrame}
-          tickmarksInside
-          .areas=${areas}
-          .barAreas=${[
+        ${this.renderScale(areas, false)}
+        ${this.type === "dual-scale" ? this.renderScale(areas, true) : A}
+        ${this.hasReadout ? b`<div class="readout">
+              <obc-readout
+                .variant=${ReadoutVariant.enhanced}
+                .direction=${ReadoutDirection.vertical}
+                .hasSetpoint=${false}
+                .hasAdvice=${false}
+                .value=${this.roll}
+                .fractionDigits=${0}
+                .valuePriority=${this.priority}
+                label="Roll"
+                unit="DEG"
+              ></obc-readout>
+            </div>` : A}
+      </div>
+    `;
+  }
+  // `top` rotates a second watch 180° onto the top arc for dual-scale — a
+  // rotation (opposite end of the indicator), not a mirror. A separate watch
+  // keeps the zoomed `arcFrame` correct.
+  renderScale(areas, top) {
+    return b`
+      <obc-watch
+        class=${top ? "scale-top" : A}
+        .priority=${this.priority}
+        .watchCircleType=${WatchCircleType.double}
+        .zoomToFitArc=${this.zoomToFitArc}
+        .arcFrame=${this._arcFrame}
+        tickmarksInside
+        .areas=${areas}
+        .barAreas=${[
       {
         startAngle: 180 + this.minAvgRoll,
         endAngle: 180 + this.maxAvgRoll,
-        fillColor: "var(--instrument-enhanced-tertiary-color)"
+        fillColor: this.scaleFillColor
       }
     ]}
-          .needles=${[
+        .needles=${[
       {
         angle: 180 + this.roll,
-        fillColor: "var(--instrument-enhanced-secondary-color)",
+        fillColor: this.indicatorColor,
         strokeColor: "var(--border-silhouette-color)"
       }
     ]}
-          .vessels=${this.zoomToFitArc ? [] : [
+        .vessels=${top || this.zoomToFitArc || this.hasReadout ? [] : [
       {
         size: VesselImageSize.large,
         vesselImage: this.vesselImageFore,
         transform: `rotate(${this.roll}deg) scale(${this.normalizedScaleForeImage})`
       }
     ]}
-          .tickmarks=${[
-      {
-        angle: 180,
-        type: TickmarkType$1.main
-      }
-    ]}
-          .advices=${this.advices}
-        ></obc-watch>
-      </div>
+        .tickmarks=${[{ angle: 180, type: TickmarkType$1.main }]}
+        .advices=${this.advices}
+      ></obc-watch>
     `;
   }
   get advices() {
-    const advices = [];
-    if (this.maxRollAdvice !== void 0) {
-      const arcAngle = normalizeArcAngle(this.arcAngle, 45);
-      const outer = Math.min(arcAngle, 45);
-      const inner = Math.min(this.maxRollAdvice, outer);
-      const state = this.triggerRollAdvice ? AdviceState.triggered : AdviceState.regular;
-      advices.push({
+    if (this.maxRollAdvice === void 0) {
+      return [];
+    }
+    const arcAngle = normalizeArcAngle(this.arcAngle, 45);
+    const outer = Math.min(arcAngle, 45);
+    const inner = Math.min(this.maxRollAdvice, outer);
+    const state = this.triggerRollAdvice ? AdviceState.triggered : AdviceState.regular;
+    return [
+      {
         minAngle: 180 - outer,
         maxAngle: 180 - inner,
         type: AdviceType.caution,
         state,
         hideMinTickmark: true
-      });
-      advices.push({
+      },
+      {
         minAngle: 180 + inner,
         maxAngle: 180 + outer,
         type: AdviceType.caution,
         state,
         hideMaxTickmark: true
-      });
-    }
-    return advices;
+      }
+    ];
   }
 };
 ObcRoll.styles = i$7`
@@ -218939,6 +219141,16 @@ ObcRoll.styles = i$7`
       width: 100%;
       height: 100%;
     }
+
+    .readout {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .scale-top {
+      transform: rotate(180deg);
+    }
   `;
 __decorateClass$d([
   n$3({ type: Number })
@@ -218964,6 +219176,15 @@ __decorateClass$d([
 __decorateClass$d([
   n$3({ type: Boolean })
 ], ObcRoll.prototype, "zoomToFitArc", 2);
+__decorateClass$d([
+  n$3({ type: Boolean })
+], ObcRoll.prototype, "hasReadout", 2);
+__decorateClass$d([
+  n$3({ type: String })
+], ObcRoll.prototype, "type", 2);
+__decorateClass$d([
+  n$3({ type: String })
+], ObcRoll.prototype, "priority", 2);
 __decorateClass$d([
   n$3({ type: Number })
 ], ObcRoll.prototype, "arcAngle", 2);
@@ -219226,6 +219447,7 @@ let ObcRotSector = class extends SetpointMixin(i$4) {
     this.advices = [];
     this.zoomToFitArc = false;
     this.rotArcExtent = 60;
+    this.hasReadout = false;
     this.getAngle = (v2) => {
       if (!this.maxValue) return 0;
       return v2 / this.maxValue * this.rotArcExtent;
@@ -219260,6 +219482,22 @@ let ObcRotSector = class extends SetpointMixin(i$4) {
     }
     return "var(--instrument-enhanced-tertiary-color)";
   }
+  /**
+   * Vertical position of the readout, in % of the host. In the zoomed view the
+   * arc's lower edge shifts with `rotArcExtent`, so the position is interpolated
+   * between the narrow- and wide-arc anchors to keep a roughly constant gap
+   * between the arc and the readout. The static (unzoomed) arc uses a fixed
+   * position.
+   */
+  get _readoutTopPercent() {
+    if (!this.zoomToFitArc) {
+      return 60;
+    }
+    const narrowTop = 70;
+    const wideTop = 66;
+    const extent = Math.min(60, Math.max(10, this.rotArcExtent));
+    return narrowTop + (wideTop - narrowTop) * (extent - 10) / (60 - 10);
+  }
   render() {
     const barColor = this._barColor;
     return b`
@@ -219290,6 +219528,19 @@ let ObcRotSector = class extends SetpointMixin(i$4) {
         .zoomToFitArc=${this.zoomToFitArc}
       >
       </obc-instrument-radial>
+      ${this.hasReadout ? b`<div class="readout" style="top: ${this._readoutTopPercent}%">
+            <obc-readout
+              .variant=${ReadoutVariant.enhanced}
+              .direction=${ReadoutDirection.vertical}
+              .hasSetpoint=${false}
+              .hasAdvice=${false}
+              .value=${this.value}
+              .fractionDigits=${0}
+              .valuePriority=${this.priority}
+              label="ROT"
+              unit="DEG/min"
+            ></obc-readout>
+          </div>` : A}
     `;
   }
   get _needleColor() {
@@ -219308,6 +219559,24 @@ let ObcRotSector = class extends SetpointMixin(i$4) {
     return "var(--instrument-enhanced-secondary-color)";
   }
 };
+ObcRotSector.styles = i$7`
+    :host {
+      position: relative;
+      display: block;
+      height: 100%;
+    }
+
+    .readout {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    /* Center the value over the label/unit row instead of right-aligning it. */
+    obc-readout::part(value-wrapper) {
+      justify-self: center;
+    }
+  `;
 __decorateClass$b([
   n$3({ type: Number })
 ], ObcRotSector.prototype, "value", 2);
@@ -219353,6 +219622,9 @@ __decorateClass$b([
 __decorateClass$b([
   n$3({ type: Number })
 ], ObcRotSector.prototype, "rotArcExtent", 2);
+__decorateClass$b([
+  n$3({ type: Boolean })
+], ObcRotSector.prototype, "hasReadout", 2);
 ObcRotSector = __decorateClass$b([
   customElement("obc-rot-sector")
 ], ObcRotSector);