Hello everyone,
I am trying to dynamically change the colors of a synthetic vision component and I cannot properly use a SubscribableArray<@number>. I have an object called MyComponent which contains the synthetic vision and another object called MyInstrument which handles the logic and other functions of the instrument. I can dynamically change the synthetic vision’s sky color using a Subscribable<@number> variable in MyComponent that subscribes to changes sent from the MyInstrument object.
Please keep in mind that this code is for testing purposes. Also I am using “<@” to escape the “<” character, since the forum text editor does not display it properly.
The code is the following:
//MyComponent
export interface ComponentEvents {
sky_Color: number;
earth_Colors: number[];
}
private readonly skyColor: Subscribable\<@number>;
const subscriber = props.bus.getSubscriber<@ComponentEvents>();
const skyColorConsumer: Consumer<@number> = subscriber.on('sky_Color').atFrequency(4);
this.skyColor = ConsumerSubject.create(skyColorConsumer, BingComponent.hexaToRGBColor("#0033E6"));
public render(): VNode {
return (
<>
<@div id="synthetic-vision" ref={this.containerRef}>
<@SynVisComponent
ref={this.synVisRef}
bingId={"EEE145"}
resolution={this.resolution}
earthColors={this.earthColors}
skyColor={this.skyColor}
/>
</div>
</>
);
}
//MyInstrument
public Update(): void {
super.Update();
let activeNavFrequency: number = Number(SimVar.GetSimVarValue("NAV ACTIVE FREQUENCY:1", "MHz"));
activeNavFrequency = Math.round(activeNavFrequency * 10) / 10;
console.log(activeNavFrequency);
if (activeNavFrequency == 111) {
this.eventBus.getPublisher<@ComponentEvents>().pub('sky_Color', BingComponent.hexaToRGBColor("#800080"));
}
if (activeNavFrequency == 111.1) {
this.eventBus.getPublisher<@ComponentEvents>().pub('sky_Color', BingComponent.hexaToRGBColor("#008000"));
}
if (activeNavFrequency == 111.2) {
this.eventBus.getPublisher<@ComponentEvents>().pub('sky_Color', BingComponent.hexaToRGBColor("#0033E6"));
}
}
The above approach successfully changes the color of the sky in the synthetic vision, depending on the selected frequency.
I am trying to achieve a similar result for the synthetic vision’s earth colors. For the earth colors the prop should have a type of SubscribableArray<@number>. I create it using the following code:
//MyComponent
private earthColors: SubscribableArray<@number>;
this.earthColors = ArraySubject.create([1, 2, 3, 4, 5]);
Then I assign it to the SynVisComponent, but the synthetic vision’s colors still fail to update in response to changes. I have tried various approaches and while I have managed to change the contents of the earthColors array, through the MyInstrument update function, the displayed synthetic vision does not respond to the changes.
This indicates that the earthColors array does not properly subscribe to changes.
//MyInstrument
if (activeNavFrequency == 111.3) {
//Do another thing 3
console.log("Do another thing 3");
let currentAircraftAltitude: number = Number(SimVar.GetSimVarValue("PLANE ALT ABOVE GROUND MINUS CG", "feet"));
let altitudeCautionThreshold: number = currentAircraftAltitude - 1000;
let altitudeWarningThreshold: number = currentAircraftAltitude - 100;
let terrainColors: number[] = BingComponent.createEarthColorsArray('#000049', [
{
elev: 0,
color: "#00FF00" //Green color
},
{
elev: altitudeCautionThreshold,
color: "#FFFF00" //Yellow color
},
{
elev: altitudeWarningThreshold,
color: "#FF0000" //Red color
}]);
//TODO Post the updated colors to the synthetic vision
}
So I have two questions.
- How do I properly initialize the earthColors variable in the MyComponent and then change its values through the MyInstrument and similar variables of SubscribableArray<@number> type? An example containing actual code would be greatly appreciated.
- Is there another way to dynamically change the colors, using Javascript/Typescript?
To better understand the issue I am including the rest of the code:
//MyComponent
import { FSComponent, DisplayComponent, VNode, MapSystemBuilder, ComponentProps, MapComponentProps, SynVisProps, Subscribable, SynVisComponent, BingComponent, Subject, ArraySubject, ReadonlyFloat64Array, MapWxrModule, EventBus, ConsumerSubject, Consumer, SubscribableArray } from '@microsoft/msfs-sdk';
import './MyInstrument.css';
interface MyComponentProps extends ComponentProps {
bus: EventBus;
}
export interface ComponentEvents {
sky_Color: number;
earth_Colors: number[];
}
export class MyComponent extends DisplayComponent<@MyComponentProps> {
private readonly skyColor: Subscribable<@number>;
private earthColors: SubscribableArray<@number>;
private containerRef = FSComponent.createRef<@HTMLDivElement>();
private synVisRef = FSComponent.createRef<@SynVisComponent>();
private float64Array = new Float64Array([1000, 875]);
private resolution = Subject.create<@ReadonlyFloat64Array>(this.float64Array);
private createSVTEarthColors(): number[] {
return BingComponent.createEarthColorsArray('#000049', [
{
elev: 0,
color: '#0c2e04'
},
{
elev: 500,
color: '#113300'
},
{
elev: 2000,
color: '#463507'
},
{
elev: 3000,
color: '#5c421f'
},
{
elev: 6000,
color: '#50331b'
},
{
elev: 8000,
color: '#512d15'
},
{
elev: 10500,
color: '#673118'
},
{
elev: 27000,
color: '#4d4d4d'
},
{
elev: 29000,
color: '#666666'
}
]
);
}
constructor(props: MyComponentProps) {
super(props);
const subscriber = props.bus.getSubscriber<@ComponentEvents>();
const skyColorConsumer: Consumer<@number> = subscriber.on('sky_Color').atFrequency(4);
this.skyColor = ConsumerSubject.create(skyColorConsumer, BingComponent.hexaToRGBColor("#0033E6"));
this.earthColors = ArraySubject.create([1, 2, 3, 4, 5]);
}
public render(): VNode {
return (
<>
<@div id="synthetic-vision" ref={this.containerRef}>
<@SynVisComponent
ref={this.synVisRef}
bingId={"EEE145"}
resolution={this.resolution}
earthColors={this.earthColors}
skyColor={this.skyColor}
/>
</div>
</>
);
}
public dataLog(): void {
console.log(this.earthColors.getArray());
console.log(this.synVisRef.instance?.props.earthColors?.getArray());
}
}
//MyInstrument
/// <@reference types="@microsoft/msfs-types/Pages/VCockpit/Core/VCockpit" />
import { ArraySubject, BingComponent, EventBus, FSComponent, MapWxrModule, NumberFormatterOptions, NumberUnitInterface, ReadonlyFloat64Array, Subject, SubscribableArray, SynVisComponent, SynVisProps } from '@microsoft/msfs-sdk';
import { ComponentEvents, MyComponent } from './MyComponent';
class MyInstrument extends BaseInstrument {
get templateID(): string {
return 'MyInstrument';
}
private readonly eventBus = new EventBus();
private myComponentRef = FSComponent.createRef<@MyComponent>();
public connectedCallback(): void {
super.connectedCallback();
FSComponent.render(<MyComponent ref={this.myComponentRef} bus={this.eventBus} />, document.getElementById('InstrumentContent'));
}
protected Init(): void {
super.Init();
console.log("Init");
}
public Update(): void {
super.Update();
//For testing
let activeNavFrequency: number = Number(SimVar.GetSimVarValue("NAV ACTIVE FREQUENCY:1", "MHz"));
activeNavFrequency = Math.round(activeNavFrequency * 10) / 10;
console.log(activeNavFrequency);
if (activeNavFrequency == 111) {
//Do a thing
console.log("Do a thing");
this.eventBus.getPublisher<@ComponentEvents>().pub('sky_Color', BingComponent.hexaToRGBColor("#800080"));
}
if (activeNavFrequency == 111.1) {
//Do another thing
console.log("Do another thing");
this.eventBus.getPublisher<@ComponentEvents>().pub('sky_Color', BingComponent.hexaToRGBColor("#008000"));
}
if (activeNavFrequency == 111.2) {
//Do another thing 2
console.log("Do another thing 2");
this.eventBus.getPublisher<@ComponentEvents>().pub('sky_Color', BingComponent.hexaToRGBColor("#0033E6"));
}
if (activeNavFrequency == 111.3) {
//Do another thing 3
console.log("Do another thing 3");
let currentAircraftAltitude: number = Number(SimVar.GetSimVarValue("PLANE ALT ABOVE GROUND MINUS CG", "feet"));
let altitudeCautionThreshold: number = currentAircraftAltitude - 1000;
let altitudeWarningThreshold: number = currentAircraftAltitude - 100;
let terrainColors: number[] = BingComponent.createEarthColorsArray('#000049', [
{
elev: 0,
color: "#00FF00" //Green color
},
{
elev: altitudeCautionThreshold,
color: "#FFFF00" //Yellow color
},
{
elev: altitudeWarningThreshold,
color: "#FF0000" //Red color
}]);
//TODO Post the updated colors to the synthetic vision
}
this.myComponentRef.instance?.dataLog();
}
}
registerInstrument('my-instrument', MyInstrument);