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
Installation
1. Install runtime libraries stated in prerequisites section
2. Unzip MSFS-Webpanels.zip into any location you wanted
Usage
1. Run the executable “MSFS-Webpanels.exe”.
2. Click "Allow access" button to allow connection behind the firewall when "Windows Security Alert" is popped up.
3. Connect MSFS by clicking the “Connect” button.
4. 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.
5. 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.
6. In case the panel does not work properly, tap the “refresh” icon beside the “i” icon to reload the page.
7. 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.
Note: Please clear the browsing data of your tablet when using new version panel, press "Refresh" icon near the bottom right corner to update your panel. Old version panel can be downloaded in my github repository https://github.com/kk-lai/MSFS-Webpanels/releases
3rd party libraries
1. jquery (https://jquery.com/)
2. jquery-ui (https://jqueryui.com/)
3. requirejs (https://requirejs.org/)
4. Zen Barcode https://www.nuget.org/packages/Zen.Barcode.Rendering.Framework
Image Credits
Gauges (by Flightgear)
Information Icon (by Anggara)
Power switch (by aranjuezmedina)
Toggle switch (by macrovector)
Toggle switch nuts (by freepik)
Flaps Lever (by starline)
Magneto (by macrovector)
QR code scan (by freepik)
Monitor (by rawpixel.com)
4 months ago
Mackshot
5 months ago
5 months ago
kevinking
hubazsw
I use it not only on my Piper Warrior but also my favourite FI Spitfire!
I would like if the panel also included a toggle switch for undercarriage wheel gear.
(Yes, I know it's not necessary for your original target Cessna 172, but your panel is so useful for other aircraft.)
5 months ago
5 months ago
kevinking
Merlin66
6 months ago
6 months ago
kevinking
VanEyndhoven1312
7 months ago
kevinking
7 months ago
justinkowski
7 months ago
7 months ago
kevinking
Viking31
great work!
Just a question:
it's for Android or iOS?
Thx,
Attilio
7 months ago
7 months ago
kevinking
PVI135
7 months ago
7 months ago
kevinking
chiwi