MSFS 2020 WebUI DevKit

This devkit is a mod and guidance for easier development of WebUI (Panels, MFD..) in Microsoft Flightsimulator 2020.

The goal is to make the process of developing UIs in MSFS as painless as possible with more stuff to come.

⚠️ The init code changed with version 0.9.0, check the Usage section

Features

Hotreload HTML/CSS/JS changes without restarting the sim or flight
View console.log output in game
Console input field to directly run JS commands
Action buttons
Basic HTML inspector
Panel FPS counter
[TODO] Devtool like debugging UI / see devtools-backend-refurb
[TODO] Load content from local webserver
...

Hotkeys

ALT + T = Show/Hide Panel
ALT + R = Reload page
ALT + X = Run JS command

Installation

Download the latest zip release here.
Extract the "msfs-webui-devkit" folder to the community folder in your MSFS installation
or
Clone the repo into your community folder

Usage

Part 1: The code

⚠️ This changed with version 0.9.0. Get rid of the former initialization code and follow the instructions below

To show the debugging UI in the panel/mfd of your choice you should put this code into the corresponding HTML file of the instrument or page.

⚠️ It must come after the script-tag for common.js

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

Tip: To show the UI on all screens on all planes, put the script tag into VCockpit.html

Part 2: The ingame UI

In game, on any panel where you activated the code, it should show an opaque UI Element in the top right corner.

Press on the "R" button to refresh the HTML Content of the panel.
Press on the "C" button to clear the console log. Press "X" to show the console output.

Important: To be able to click on it on cockpit panels you have to bind the "New UI Window Mode" key in MsFs. Then press that key and click on a glass panel. It will pop out in a window.

Part 3: Console Logging

In the JS corresponding to the activated panel, any console.log() output should show up in the console panel in game.

Part 4: Console Input

At the bottom of the debug panel is an input field. You can run JS commands here like console.log("test") and run them by clicking the "->" button or pressing ALT+X

Part 5: Action Buttons

g_modDebugMgr.AddDebugButton("InsertTitleHere", function() {dosomething}); This will show a button in the open debug UI which executes the function when clicked.

Known Limitations

Sometimes seems to fail refresh of sources no matter what you do.
HTML/CSS usually always refreshes. When it fails for JS for you, a workaround would be to add a querystring to the import in the HTML file of the panel to bust the cache. Ofc I will work on ways to make this obsolete.

Contributing

Pull requests and further information on the insides are welcome. For major changes, please open an issue first to discuss what you would like to change.