MSFS-Webpanels

Introduction

This is a touch panel web application that allows users to control and view the gauges and switches of an aircraft’s panel with the browser of a tablet.

When I play MSFS, I face a problem where I need to move the view of the game to see some of the gauges. One of the most common solutions is to extend the screen with an extra monitor. However, my desk cannot fit one more monitor. There are solutions to extend PC screen with an iPad, but I think they are not good enough. If the second screen can accept input, it will be good. So, I developed this application. I looked for similar solutions on the internet, but some of them are not free. For free solutions, they do not fit me. Therefore, I decided to do it myself. My design goal is to find a balance between realism and usability. Thanks to project flightgear (https://www.flightgear.org/), I got readily made good quality images of gauges. These images make the panel look like a “real” panel. Instead of using knobs to change the input, my design is to drag the gauges directly because using knobs for input is difficult. After implementing all gauges and switches, I found that the auto-pilot and radio should be added too. My first thought was to implement the radio panel and show it when the user taps a button. However, changing the frequency or altitude with knobs is difficult, so I implemented a number pad interface to input these numbers. For now, only Cessna 172 panel is implemented. In the future, I plan to develop more panels for other aircraft.

Prerequisites

ASP.NET Core 7.0 Runtime https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-aspnetcore-7.0.13-windows-x64-installer

.NET 7.0 Desktop Runtime (v7.0.13) https://dotnet.microsoft.com/en-us/download/dotnet/thank-you/runtime-desktop-7.0.13-windows-x64-installer

Installation

Install runtime libraries stated in prerequisites section
Unzip MSFS-Webpanels.zip into any location you wanted

Configuration

The web server port is configured to 8888, you may change the port number by modifying the line below in the file "appsettings.json" as below:

"Url": "http://*:xxxx"

Where "xxxx" is your target port number

Usage

Run the executable “MSFS-Webpanels.exe”.
Click "Allow access" button to allow connection behind the firewall when "Windows Security Alert" is popped up.
Connect MSFS by clicking the “Connect” button.
On your tablet, open the panel page with a browser by entering the link stated in the application or scanning the QRCode with your tablet’s camera.
Tap the “i” icon at the bottom right corner to see the locations of the controls, where arrows are drag controls and dots are tap controls.
In case the panel does not work properly, tap the “refresh” icon beside the “i” icon to reload the page.
If you want to use the panel in full screen, you may add the page to your home screen by selecting “Share” > “Add to Home Screen” on your iPad.

Please remove existing icon from "Home Screen" and clear browsing data of the browser when using new version panel.

Future Plans

Fix problem when "Magneto from R to off" the engine doesn't stop
Rewrite front-end to be more modularized
Separate one panel to left, main, radio, bottom panels
Write panels for other aircrafts

Source Code

Source code can be downloadable at https://github.com/kk-lai/MSFS-Webpanels

It can be compiled with Microsoft Visual Studio 2022.

Release Notes

1.0.2 - Initial release 1.1.0 - DME distance bug fix, add gear up/down switch, engine hours recorder, logging 1.1.1 - Add version code in js and html files for better support