fix(a380x/nd): Update ND and VD Range Change Messages

fbw-a32nx/src/systems/instruments/src/ND/instrument.tsx

@@ -11,7 +11,14 @@ import {
   InstrumentBackplane,
   Subject,
 } from '@microsoft/msfs-sdk';
-import { a320EfisRangeSettings, a320TerrainThresholdPadValue, ArincEventBus, EfisSide } from '@flybywiresim/fbw-sdk';
+import {
+  a320EfisRangeSettings,
+  a320NdModeChange,
+  a320NdRangeChange,
+  a320TerrainThresholdPadValue,
+  ArincEventBus,
+  EfisSide,
+} from '@flybywiresim/fbw-sdk';
 import { NDComponent } from '@flybywiresim/navigation-display';
 
 import { NDSimvarPublisher, NDSimvars } from './NDSimvarPublisher';
@@ -146,6 +153,8 @@ class NDInstrument implements FsInstrument {
           side={this.efisSide}
           rangeValues={a320EfisRangeSettings}
           terrainThresholdPaddingText={a320TerrainThresholdPadValue}
+          rangeChangeMessage={a320NdRangeChange}
+          modeChangeMessage={a320NdModeChange}
         />
       </DisplayUnit>,
       document.getElementById('ND_CONTENT'),

fbw-a32nx/src/systems/instruments/src/ND/style.scss

@@ -21,3 +21,7 @@
   background: $display-background;
   fill: rgb(4,4,5);
 }
+
+.mode-range-change {
+  font-size: 27.5px;
+}

fbw-a380x/src/systems/instruments/src/ND/NDControlEvents.ts

@@ -77,4 +77,9 @@ export interface NDControlEvents {
    * Event for the CHRONO button being pushed
    */
   chrono_pushed: void;
+
+  /**
+   * Set if a range change is in progress for VD (true, false)
+   */
+  set_range_change: boolean;
 }

fbw-a380x/src/systems/instruments/src/ND/VerticalDisplay.tsx

@@ -17,6 +17,7 @@ import {
 } from '@microsoft/msfs-sdk';
 import { NDSimvars } from 'instruments/src/ND/NDSimvarPublisher';
 import { DmcLogicEvents } from 'instruments/src/MsfsAvionicsCommon/providers/DmcPublisher';
+import { NDControlEvents } from './NDControlEvents';
 
 import './style.scss';
 import { SimplaneValues } from 'instruments/src/MsfsAvionicsCommon/providers/SimplaneValueProvider';
@@ -36,7 +37,7 @@ export class VerticalDisplayDummy extends DisplayComponent<VerticalDisplayProps>
   private readonly maxAlt = 24000;
 
   private readonly sub = this.props.bus.getArincSubscriber<
-    GenericFcuEvents & NDSimvars & DmcLogicEvents & SimplaneValues
+    GenericFcuEvents & NDSimvars & DmcLogicEvents & SimplaneValues & NDControlEvents
   >();
 
   private topRef = FSComponent.createRef<SVGElement>();
@@ -47,6 +48,8 @@ export class VerticalDisplayDummy extends DisplayComponent<VerticalDisplayProps>
     (r) => a380EfisRangeSettings[r],
   );
 
+  private readonly rangeChangeInProgress = ConsumerSubject.create(this.sub.on('set_range_change').whenChanged(), false);
+
   private readonly visible = MappedSubject.create(
     ([mode, range]) =>
       [EfisNdMode.PLAN, EfisNdMode.ROSE_ILS, EfisNdMode.ROSE_VOR].includes(mode) || range === -1 ? 'none' : 'block',
@@ -189,6 +192,11 @@ export class VerticalDisplayDummy extends DisplayComponent<VerticalDisplayProps>
             FL
           </text>
         </g>
+        <g visibility={this.rangeChangeInProgress.map((it) => (it ? 'visible' : 'hidden'))}>
+          <text x="422" y="920" class="Green FontSmall MiddleAlign">
+            VD RANGE CHANGE
+          </text>
+        </g>
       </svg>
     );
   }

fbw-a380x/src/systems/instruments/src/ND/instrument.tsx

@@ -17,6 +17,8 @@ import {
 import {
   A380EfisNdRangeValue,
   a380EfisRangeSettings,
+  a380NdModeChange,
+  a380NdRangeChange,
   a380TerrainThresholdPadValue,
   ArincEventBus,
   BtvSimvarPublisher,
@@ -286,6 +288,8 @@ class NDInstrument implements FsInstrument {
             side={this.efisSide}
             rangeValues={a380EfisRangeSettings}
             terrainThresholdPaddingText={a380TerrainThresholdPadValue}
+            rangeChangeMessage={a380NdRangeChange}
+            modeChangeMessage={a380NdModeChange}
           />
           <ContextMenu
             ref={this.contextMenuRef}

fbw-a380x/src/systems/instruments/src/ND/style.scss

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0
 
 @import "../MsfsAvionicsCommon/definitions.scss";
+@import "../MFD/pages/common/widget-style.scss"; // Re-use MFD widget style
 @import "../../../../../../fbw-common/src/systems/instruments/src/ND/style.scss";
 
 @font-face {
@@ -12,6 +13,14 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "FBW-Display-EIS-A380-SlashedZero";
+  //noinspection CssUnknownTarget
+  src: url("/Fonts/fbw-a380x/FBW-Display-EIS-A380-SlashedZero.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
 @font-face {
   font-family: "NDChrono";
   //noinspection CssUnknownTarget
@@ -34,3 +43,13 @@
 .a380xInvisible {
   display: none;
 }
+
+.TerrTextLabel {
+  transform: translateX(5px) translateY(4px);
+  font-size: 25px;
+}
+
+.mode-range-change {
+  font-size: 35px;
+  transform: translateX(0) translateY(-5px)
+}

fbw-common/src/systems/instruments/src/ND/ND.tsx

@@ -72,6 +72,10 @@ export interface NDProps<T extends number> {
   rangeValues: T[];
 
   terrainThresholdPaddingText: string;
+
+  rangeChangeMessage: string;
+
+  modeChangeMessage: string;
 }
 
 export class NDComponent<T extends number> extends DisplayComponent<NDProps<T>> {
@@ -213,6 +217,10 @@ export class NDComponent<T extends number> extends DisplayComponent<NDProps<T>>
         this.invalidateRange();
       });
 
+    this.rangeChangeInProgress.sub((rangechange) => {
+      this.props.bus.getPublisher<NDControlEvents>().pub('set_range_change', rangechange);
+    });
+
     sub
       .on('ndMode')
       .whenChanged()
@@ -449,8 +457,13 @@ export class NDComponent<T extends number> extends DisplayComponent<NDProps<T>>
               HDG
             </Flag>
 
-            <Flag visible={this.rangeChangeInProgress} x={384} y={320} class="Green FontIntermediate">
-              RANGE CHANGE
+            <Flag
+              visible={this.rangeChangeInProgress}
+              x={384}
+              y={320}
+              class="Green FontIntermediate a380xModeRangeChange"
+            >
+              {this.props.rangeChangeMessage}
             </Flag>
             <Flag
               visible={MappedSubject.create(
@@ -460,9 +473,9 @@ export class NDComponent<T extends number> extends DisplayComponent<NDProps<T>>
               )}
               x={384}
               y={320}
-              class="Green FontIntermediate"
+              class="Green mode-range-change"
             >
-              MODE CHANGE
+              {this.props.modeChangeMessage}
             </Flag>
 
             <TerrainMapThresholds bus={this.props.bus} paddingText={this.props.terrainThresholdPaddingText} />

fbw-common/src/systems/instruments/src/ND/NDControlEvents.ts

@@ -77,4 +77,9 @@ export interface NDControlEvents {
    * Event for the CHRONO button being pushed
    */
   chrono_pushed: void;
+
+  /**
+   * Set if a range change is in progress for VD (true, false)
+   */
+  set_range_change: boolean;
 }

fbw-common/src/systems/instruments/src/NavigationDisplay.ts

@@ -21,6 +21,14 @@ export const a320TerrainThresholdPadValue = '0';
 
 export const a380TerrainThresholdPadValue = '\\xa0';
 
+export const a320NdRangeChange = 'RANGE CHANGE';
+
+export const a380NdRangeChange = 'ND RANGE CHANGE';
+
+export const a320NdModeChange = 'MODE CHANGE';
+
+export const a380NdModeChange = 'ND MODE CHANGE';
+
 export enum EfisNdMode {
   ROSE_ILS,
   ROSE_VOR,