feat: remote flyPad and displays

build-utils.js

@@ -2,6 +2,7 @@ const dotenv = require("dotenv");
 const path = require("path");
 const childProcess = require("child_process");
 const fs = require("fs");
+const fsp = require("fs/promises");
 
 function defineEnvVars() {
     dotenv.config({ path: '.env.local' });
@@ -143,3 +144,91 @@ function typecheckingPlugin() {
 }
 
 module.exports.typecheckingPlugin = typecheckingPlugin;
+
+/**
+ * @param instruments {import('@synaptic-simulations/mach').Instrument[]}
+ * @param packageName {string}
+ * @param outDIr {string}
+ */
+async function generateInstrumentsMetadata(instruments, packageName, outDIr) {
+    const file = await fsp.open(path.join(outDIr, `${packageName.toLowerCase()}_instruments_metadata.json`), 'w+');
+
+    const data = instruments.filter((it) => it.makeAvailableAsRemote !== false).map((it) => {
+        /** @type {import('@flybywiresim/remote-bridge-types').InstrumentMetadata} */
+        const metadata = {
+            instrumentID: it.name,
+            dimensions: it.dimensions,
+            gauges: [
+                {
+                    name: it.name,
+                    bundles: {
+                        js: `/Pages/VCockpit/Instruments/${packageName}/${it.name}/${it.simulatorPackage.fileName}.js`,
+                        css: `/Pages/VCockpit/Instruments/${packageName}/${it.name}/${it.simulatorPackage.fileName}.css`,
+                    },
+                },
+            ],
+        };
+
+        return metadata;
+    });
+
+    await file.writeFile(JSON.stringify({ protocolVersion: 0, data }, null, 4));
+
+    await file.close();
+}
+
+module.exports.generateInstrumentsMetadata = generateInstrumentsMetadata;
+
+function getMachInstrumentBuilders({ templateIDPrefix, reactImports }) {
+    return {
+        /**
+         * @param name {string}
+         * @param dimensions {{ width: number, height: number }}
+         * @param makeAvailableAsRemote {boolean}
+         */
+        msfsAvionicsInstrument(name, dimensions, makeAvailableAsRemote) {
+            return {
+                name,
+                index: `src/systems/instruments/src/${name}/instrument.tsx`,
+                simulatorPackage: {
+                    type: 'baseInstrument',
+                    templateId: `${templateIDPrefix.toUpperCase()}_${name}`,
+                    mountElementId: `INSTRUMENT_CONTENT`,
+                    fileName: name.toLowerCase(),
+                    imports: ['/JS/dataStorage.js'],
+                },
+                makeAvailableAsRemote,
+                dimensions: {
+                    width: dimensions[0],
+                    height: dimensions[1],
+                },
+            };
+        },
+
+        /**
+         * @param name {string}
+         * @param additionalImports {string[]}
+         * @param dimensions {{ width: number, height: number }}
+         * @param makeAvailableAsRemote {boolean}
+         */
+        reactInstrument(name, additionalImports, dimensions, makeAvailableAsRemote) {
+            return {
+                name,
+                index: `src/systems/instruments/src/${name}/index.tsx`,
+                simulatorPackage: {
+                    type: 'react',
+                    isInteractive: false,
+                    fileName: name.toLowerCase(),
+                    imports: [...reactImports, ...(additionalImports ?? [])],
+                },
+                makeAvailableAsRemote,
+                dimensions: {
+                    width: dimensions[0],
+                    height: dimensions[1],
+                },
+            };
+        },
+    }
+}
+
+module.exports.getMachInstrumentBuilders = getMachInstrumentBuilders;

fbw-a32nx/mach.config.js

@@ -3,7 +3,13 @@ const postCssPlugin = require('esbuild-style-plugin');
 const tailwind = require('tailwindcss');
 const postCssColorFunctionalNotation = require('postcss-color-functional-notation');
 const postCssInset = require('postcss-inset');
-const { typecheckingPlugin } = require('#build-utils');
+const { typecheckingPlugin, generateInstrumentsMetadata, getMachInstrumentBuilders } = require('#build-utils');
+const path = require('path');
+
+const { msfsAvionicsInstrument, reactInstrument } = getMachInstrumentBuilders({
+  templateIDPrefix: 'A32NX',
+  reactImports: ['/JS/dataStorage.js', '/JS/fbw-a32nx/A32NX_Simvars.js'],
+});
 
 // process.env.FBW_TYPECHECK = "1";
 
@@ -30,45 +36,24 @@ module.exports = {
     typecheckingPlugin(),
   ],
   instruments: [
-    msfsAvionicsInstrument('PFD'),
-    msfsAvionicsInstrument('ND'),
-    msfsAvionicsInstrument('EWD'),
-    msfsAvionicsInstrument('Clock'),
+    msfsAvionicsInstrument('PFD', [768, 768], true),
+    msfsAvionicsInstrument('ND', [768, 768], true),
+    msfsAvionicsInstrument('EWD', [768, 768], true),
+    msfsAvionicsInstrument('Clock', [256, 256], false),
 
-    reactInstrument('SD'),
-    reactInstrument('DCDU'),
-    reactInstrument('RTPI'),
-    reactInstrument('RMP'),
-    reactInstrument('ISIS'),
-    reactInstrument('BAT'),
-    reactInstrument('ATC'),
-    reactInstrument('EFB', ['/Pages/VCockpit/Instruments/Shared/Map/MapInstrument.html']),
+    reactInstrument('SD', [], [768, 768], true),
+    reactInstrument('DCDU', [], [4096, 3072], false),
+    reactInstrument('RTPI', [], [338, 128], false),
+    reactInstrument('RMP', [], [432, 512], false),
+    reactInstrument('ISIS', [], [512, 512], false),
+    reactInstrument('BAT', [], [256, 128], false),
+    reactInstrument('ATC', [], [316, 128], false),
+    reactInstrument('EFB', ['/Pages/VCockpit/Instruments/Shared/Map/MapInstrument.html'], [1430, 1000], true),
   ],
 };
 
-function msfsAvionicsInstrument(name, folder = name) {
-  return {
-    name,
-    index: `src/systems/instruments/src/${folder}/instrument.tsx`,
-    simulatorPackage: {
-      type: 'baseInstrument',
-      templateId: `A32NX_${name}`,
-      mountElementId: `${name}_CONTENT`,
-      fileName: name.toLowerCase(),
-      imports: ['/JS/dataStorage.js'],
-    },
-  };
-}
-
-function reactInstrument(name, additionalImports) {
-  return {
-    name,
-    index: `src/systems/instruments/src/${name}/index.tsx`,
-    simulatorPackage: {
-      type: 'react',
-      isInteractive: false,
-      fileName: name.toLowerCase(),
-      imports: ['/JS/dataStorage.js', '/JS/fbw-a32nx/A32NX_Simvars.js', ...(additionalImports ?? [])],
-    },
-  };
-}
+generateInstrumentsMetadata(
+  module.exports.instruments,
+  'A32NX',
+  path.join(__dirname, 'out/flybywire-aircraft-a320-neo/'),
+);

fbw-a32nx/src/systems/extras-host/index.ts

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: GPL-3.0
 
 import { EventBus, HEventPublisher } from '@microsoft/msfs-sdk';
-import { NotificationManager } from '@flybywiresim/fbw-sdk';
+import { NotificationManager, RemoteClient } from '@flybywiresim/fbw-sdk';
 import { ExtrasSimVarPublisher } from 'extras-host/modules/common/ExtrasSimVarPublisher';
 import { PushbuttonCheck } from 'extras-host/modules/pushbutton_check/PushbuttonCheck';
 import { KeyInterceptor } from './modules/key_interceptor/KeyInterceptor';
 import { VersionCheck } from './modules/version_check/VersionCheck';
-import { AircraftSync } from './modules/aircraft_sync/AircraftSync';
+import { getSimBridgeUrl } from '@simbridge/common';
 
 /**
  * This is the main class for the extras-host instrument.
@@ -41,9 +41,7 @@ class ExtrasHost extends BaseInstrument {
 
   private readonly keyInterceptor: KeyInterceptor;
 
-  private readonly aircraftSync: AircraftSync;
-
-  public readonly xmlConfig: Document;
+  private readonly remoteClient: RemoteClient;
 
   /**
    * "mainmenu" = 0
@@ -63,9 +61,16 @@ class ExtrasHost extends BaseInstrument {
     this.notificationManager = new NotificationManager();
 
     this.pushbuttonCheck = new PushbuttonCheck(this.bus, this.notificationManager);
+    this.versionCheck = new VersionCheck(this.bus);
     this.keyInterceptor = new KeyInterceptor(this.bus, this.notificationManager);
-    this.versionCheck = new VersionCheck(process.env.AIRCRAFT_PROJECT_PREFIX, this.bus);
-    this.aircraftSync = new AircraftSync(process.env.AIRCRAFT_PROJECT_PREFIX, this.bus);
+
+    this.remoteClient = new RemoteClient({
+      websocketUrl: () => `${getSimBridgeUrl('ws')}/interfaces/v1/remote-app`,
+      airframeName: 'A320-251N',
+      clientName: 'A32NX',
+      instrumentsMetadataFile: '/VFS/a32nx_instruments_metadata.json',
+      fileDownloadBasePath: '/Pages/VCockpit/Instruments/A32NX/',
+    });
 
     console.log('A32NX_EXTRASHOST: Created');
   }
@@ -88,12 +93,6 @@ class ExtrasHost extends BaseInstrument {
     this.pushbuttonCheck.connectedCallback();
     this.versionCheck.connectedCallback();
     this.keyInterceptor.connectedCallback();
-    this.aircraftSync.connectedCallback();
-  }
-
-  public parseXMLConfig(): void {
-    super.parseXMLConfig();
-    this.aircraftSync.parseXMLConfig(this.xmlConfig);
   }
 
   public Update(): void {
@@ -106,7 +105,6 @@ class ExtrasHost extends BaseInstrument {
         this.versionCheck.startPublish();
         this.keyInterceptor.startPublish();
         this.simVarPublisher.startPublish();
-        this.aircraftSync.startPublish();
       }
       this.gameState = gs;
     } else {
@@ -115,7 +113,7 @@ class ExtrasHost extends BaseInstrument {
 
     this.versionCheck.update();
     this.keyInterceptor.update();
-    this.aircraftSync.update();
+    this.remoteClient.update();
   }
 }
 

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

@@ -57,10 +57,10 @@ class A32NX_Clock extends BaseInstrument {
 
     this.simVarPublisher.subscribe('dc2IsPowered');
 
-    FSComponent.render(<ClockRoot bus={this.bus} />, document.getElementById('Clock_CONTENT'));
+    FSComponent.render(<ClockRoot bus={this.bus} />, document.getElementById('INSTRUMENT_CONTENT'));
 
     // Remove "instrument didn't load" text
-    document.getElementById('Clock_CONTENT').querySelector(':scope > h1').remove();
+    document.getElementById('INSTRUMENT_CONTENT').querySelector(':scope > h1').remove();
   }
 
   public Update(): void {

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

@@ -45,10 +45,13 @@ class A32NX_EWD extends BaseInstrument {
     this.arincProvider.init();
     this.backplane.init();
 
-    FSComponent.render(<EwdComponent bus={this.bus} instrument={this} />, document.getElementById('EWD_CONTENT'));
+    FSComponent.render(
+      <EwdComponent bus={this.bus} instrument={this} />,
+      document.getElementById('INSTRUMENT_CONTENT'),
+    );
 
     // Remove "instrument didn't load" text
-    document.getElementById('EWD_CONTENT').querySelector(':scope > h1').remove();
+    document.getElementById('INSTRUMENT_CONTENT').querySelector(':scope > h1').remove();
   }
 
   public Update(): void {

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

@@ -143,11 +143,11 @@ class NDInstrument implements FsInstrument {
       >
         <NDComponent bus={this.bus} side={this.efisSide} rangeValues={a320EfisRangeSettings} />
       </DisplayUnit>,
-      document.getElementById('ND_CONTENT'),
+      document.getElementById('INSTRUMENT_CONTENT'),
     );
 
     // Remove "instrument didn't load" text
-    document.getElementById('ND_CONTENT').querySelector(':scope > h1').remove();
+    document.getElementById('INSTRUMENT_CONTENT').querySelector(':scope > h1').remove();
   }
 
   /**

fbw-a32nx/src/systems/instruments/src/PFD/PFD.tsx

@@ -29,7 +29,7 @@ import { VerticalSpeedIndicator } from './VerticalSpeedIndicator';
 import { PFDSimvars } from './shared/PFDSimvarPublisher';
 
 export const getDisplayIndex = () => {
-  const url = document.getElementsByTagName('a32nx-pfd')[0].getAttribute('url');
+  const url = document.querySelector('vcockpit-panel > *').getAttribute('url');
   return url ? parseInt(url.substring(url.length - 1), 10) : 0;
 };
 

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

@@ -83,10 +83,13 @@ class A32NX_PFD extends BaseInstrument {
     this.clock.init();
     this.dmcPublisher.startPublish();
 
-    FSComponent.render(<PFDComponent bus={this.bus} instrument={this} />, document.getElementById('PFD_CONTENT'));
+    FSComponent.render(
+      <PFDComponent bus={this.bus} instrument={this} />,
+      document.getElementById('INSTRUMENT_CONTENT'),
+    );
 
     // Remove "instrument didn't load" text
-    document.getElementById('PFD_CONTENT').querySelector(':scope > h1').remove();
+    document.getElementById('INSTRUMENT_CONTENT').querySelector(':scope > h1').remove();
   }
 
   /**

fbw-a32nx/src/systems/simbridge-client/src/common.ts

@@ -9,8 +9,8 @@ export const getSimBridgeIp = (): string =>
     ? 'localhost'
     : NXDataStore.get('CONFIG_SIMBRIDGE_IP', 'localhost');
 
-export const getSimBridgeUrl = (): string =>
-  `http://${getSimBridgeIp()}:${NXDataStore.get('CONFIG_SIMBRIDGE_PORT', '8380')}`;
+export const getSimBridgeUrl = (protocol = 'http'): string =>
+  `${protocol}://${getSimBridgeIp()}:${NXDataStore.get('CONFIG_SIMBRIDGE_PORT', '8380')}`;
 
 export const fetchWithTimeout = (resource: RequestInfo, options?: object, timeout: number = 2000): Promise<Response> =>
   new Promise((resolve, reject) => {