In Game panel to WASM/Simconnect | LVars

[MSFS 2020] Questions & Community Discussions HTML/JS
1

Hello
I’m trying to control a WASM module that I built for MSFS with a UI within the sim using in-game panels.

Is there any way to communicate like for example UI button clicked event to a WASM module ?

I don’t see any documentation regarding simconnect integration with in-game panels.

I tried to use SetSimVar to communicate using Lvars but I get an error: ( cannot find variable: Simvar)

here is my code:

JavaScript:
        document.getElementById("bbutton").addEventListener("click", () => {
            
            var delayInMilliseconds = 2000; //2 second

setTimeout(function() {
  SimVar.SetSimVarValue("L:MyVar", "number", 1);
}, delayInMilliseconds);
 
          
     });

Anybody got a clue how to build this communication?

Thank you all in advance!

-Redouane

2

For larger data:
Comm between JS and WASM: Communication API

For smaller data L:Vars do work.
To get access to SimVar, you can to include /JS/simvar.js in your panel html, and maybe be aware of when it is loaded and usable.

3

My main issue is the error I’m getting
Cannot find variable: Simvar

here is my full code
JS

class IngamePanelCustomPanel extends TemplateElement {
    constructor() {
        super(...arguments);

        this.panelActive = false;
        this.started = false;
        this.ingameUi = null;
        this.busy = false;
        this.debugEnabled = false;

        if (this.debugEnabled) {
            var self = this;
            setTimeout(() => {
                self.isDebugEnabled();
            }, 1000);
        } else {
            this.initialize();
        }
    }

    
    connectedCallback() {	
        super();
document.getElementById("bbutton").addEventListener("click", () => {
            
            var delayInMilliseconds = 2000; //2 second

setTimeout(function() {
  SimVar.SetSimVarValue("L:MyVar", "number", 1);
}, delayInMilliseconds);
 
          
     });
        
    }

    initialize() {
        if (this.started) {
			
            return;
        }
        this.started = true;
    }
    disconnectedCallback() {
        super.disconnectedCallback();
    }
	 
	
}

}
window.customElements.define("ingamepanel-custom", IngamePanelCustomPanel);
checkAutoload();

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/SCSS/common.css" />
    <link rel="stylesheet" href="CustomPanel.css" />

    <script type="text/javascript" src="/JS/coherent.js"></script>
    <script type="text/javascript" src="/JS/common.js"></script>
    <script type="text/javascript" src="/JS/dataStorage.js"></script>
    <script type="text/javascript" src="/JS/buttons.js"></script>
    <script type="text/javascript" src="/JS/Services/ToolBarPanels.js"></script>
    <script type="text/javascript" src="/Pages/VCockpit/Instruments/Shared/BaseInstrument.js"></script>

    <link rel="import" href="/templates/NewPushButton/NewPushButton.html" />
    <link rel="import" href="/templates/ToggleButton/toggleButton.html" />
    <link rel="import" href="/templates/tabMenu/tabMenu.html" />
    <link rel="import" href="/templates/ingameUi/ingameUi.html" />
    <link rel="import" href="/templates/ingameUiHeader/ingameUiHeader.html" />
    <link rel="import" href="/templates/NewListButton/NewListButton.html" />

    <script type="text/javascript" src="/JS/debug.js"></script>
    <script type="text/javascript" src="CustomPanel.js"></script>
</head>

<body class="border-box">
    <ingamepanel-custom>
        <ingame-ui id="CustomPanel" panel-id="PANEL_CUSTOM_PANEL" title="" class="ingameUiFrame panelInvisible" content-fit="true" min-width="160" min-height="90">
            <div id="CustomPanelWrap">
                <H1 id="hi">
				Hello world
				</H1>
				<button id="bbutton" type="button">Start</button>


            </div>
            <section id="MainDisplay">
                header
            </section>
            <section id="Footer">
            </section>
        </ingame-ui>
    </ingamepanel-custom>
</body>
</html>
5

As davux3 said, I think you need to include SimVar.js in your HTML file, ie:

	<script type="text/javascript" src="/JS/SimVar.js"></script>
1 Like
6

Have you gotten it to work? I am not sure about calling events, but what you can do is pass LVAR values to SimConnect module (compiled into WASM) and build an user interface that can drive SimConnect/WASM functions.

I am wrestling with a similar problem: I want to set LVars defined in SimConnect client (compiled into WASM) through an InGamePanel. Here is a lively FSDeveloper discussion we have going on this topic.