MSFS20 Switch control for HTML element

[kcgb]

Hi everyone, this seems like it might be fairly basic but I'm very new to javascript and this is stumping me.

I want an HTML element to be visible or not dependent on a L:Var, in order to turn a screen on or off. At the moment my code looks like this:

HTML

<link rel="stylesheet" href="F117_IRADS.css" />

<script type="text/html" id="F117_IRADS">
    <div id="Mainframe">
        <div id="Electricity" state="off">
            <div id="Camera">
                <div id="CameraMap">
                    <map-instrument id="SyntheticVision" bing-mode="horizon" bing-id="PFD_SyntheticVision" show-overlay="false" config-path="/Pages/VCockpit/Instruments/F117_inst/IRADS/"></map-instrument>
                </div>
            </div>
        </div>
    </div>
</script>

.....

Javascript

class F117_IRADS extends BaseAirliners {
    get templateID() { return "F117_IRADS"; }
    get IsGlassCockpit() { return true; }
    get isInteractive() { return true; }
    Init() {
        super.Init();
        if (this.radioNav)
            this.radioNav.init(NavMode.FOUR_SLOTS);
        this.pageGroups = [
            new NavSystemPageGroup("Main", this, [
                new F117_IRADS_MainPage()
            ]),
        ];
    }
}
class F117_IRADS_MainPage extends NavSystemPage {
    constructor() {
        super("Main", "Mainframe", null);
        this.element = new NavSystemElementGroup([
            new F117_IRADS_Camera(),            
        ]);
    }
}

class F117_IRADS_Camera extends NavSystemElement {
    constructor() {
        super(...arguments);
        this.zoomLevelTestInitialized = false;
        this.mapTopViewSettings = undefined;
    }
    init(root) {
        this.initMap();
    }
    initMap() {
        this.map = new MapInstrumentElement();
        if (this.map) {
            this.map.setGPS(this.gps);
            this.map.init(this.gps.getChildById("Camera"));
            this.map.isInitialized = true;
            this.mapTopViewSettings = this.map.instrument.getTopViewSettings();
        }
    }
    onUpdate(_deltaTime) {
        if (this.map) {
            if (!this.mapTopViewSettings && this.map.instrument.getTopViewSettings())
                this.mapTopViewSettings = this.map.instrument.getTopViewSettings();
            this.map.onUpdate(_deltaTime);
        }
    }
    onEnter() { }
    onExit() { }
    onEvent(_event) { }
}
registerInstrument("darkstar-mfd-element", F117_IRADS);

:root {
    --bodyHeightScale: 1;
  }
 
  @keyframes TemporaryShow {
    0%, 100% {
      visibility: visible;
    }
  }
  @keyframes TemporaryHide {
    0%, 100% {
      visibility: hidden;
    }
  }
  html {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  html body {
    -webkit-user-select: none;
    font-family: var(--font);
    font-size: calc(var(--viewportHeightRatio) * (36px / 21.6) * var(--currentPageHeight) / 100 );
    color: white;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
 
  #highlight {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 10;
    pointer-events: none;
  }
 
  #Electricity {
    width: 100%;
    height: 100%;
  }
  #Electricity[state=off] {
    display: none;
  }
  @font-face {
    font-family: "Roboto";
    src: url("/Fonts/RobotoMono-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Roboto-Light";
    src: url("/Fonts/RobotoMono-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Roboto-Bold";
    src: url("/Fonts/RobotoMono-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Roboto-Bold";
    src: url("/Fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Roboto-Light";
    src: url("/Fonts/Roboto-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: "Roboto-Regular";
    src: url("/Fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  darkstar-mfd-element #Mainframe {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    font-family: Roboto-Bold;
    background-color: #153114;
  }
 
  darkstar-mfd-element #Mainframe #Camera {
    transform: rotateX(0);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0%;
    background-color: #153114;
  }
  darkstar-mfd-element #Mainframe #Camera #CameraMap {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    left: 0%;
    display: block;
  }
  darkstar-mfd-element #Mainframe #Camera #CameraMap #SyntheticVision #MapOrientation, darkstar-mfd-element #Mainframe #Camera #CameraMap #SyntheticVision #MapRange {
    display: none;
  }

As you can see its the Darkstar and Pelican Camera/SynVis code to make a FLIR screen. Any help would be incredible.

 

[B21-soaring]

html 'visibility' is simply a case of flipping the style.display between "none" and ("block" or "flex"). You can flip that element property directly, or create two classnames with the alternative properties and update my_element.className rather than my_element.style.display.

apologies if I've misunderstood your question - one advantage of html/js gauges is you can re-use possibly decades of experience writing html/js/css so these things can be assumed obvious.

 

[B21-soaring]

Top tip - L: vars are useful for seeing in the Behaviours "LocalVars" window, and required for Sounds interaction, but they are shared between ALL aircraft in your local sim which can have bizarre side effects when you're flying in multiplayer. The simple answer is to use Z: vars instead. It's possible to use L: vars when you're developing/testing a component, but you can flip to Z: when you're happy with it.
You haven't mentioned any JS code updating/reading the L: vars (or Z: vars) so for completeness those calls are:

SimVar.SetSimVarValue("L:MY_L_VAR", "number", 77);

and

let my_l_variable = SimVar.GetSimVarValue("L:MY_L_VAR","number);

Another top tip - put "use strict" at the top of your .JS file and the compiler/console will protect you from dicey JS code like using a var before you've initialised it. Also use the newer "let" rather than "var" because that sensibly scopes the variable.