• Which the release of FS2020 we see an explosition of activity on the forun and of course we are very happy to see this. But having all questions about FS2020 in one forum becomes a bit messy. So therefore we would like to ask you all to use the following guidelines when posting your questions:

    • Tag FS2020 specific questions with the MSFS2020 tag.
    • Questions about making 3D assets can be posted in the 3D asset design forum. Either post them in the subforum of the modelling tool you use or in the general forum if they are general.
    • Questions about aircraft design can be posted in the Aircraft design forum
    • Questions about airport design can be posted in the FS2020 airport design forum. Once airport development tools have been updated for FS2020 you can post tool speciifc questions in the subforums of those tools as well of course.
    • Questions about terrain design can be posted in the FS2020 terrain design forum.
    • Questions about SimConnect can be posted in the SimConnect forum.

    Any other question that is not specific to an aspect of development or tool can be posted in the General chat forum.

    By following these guidelines we make sure that the forums remain easy to read for everybody and also that the right people can find your post to answer it.

MSFS20 Getting Started With FS2020 HTML Gauges

joeherwig said:
run the popout-gauges for instance within an iframe in an local website
Click to expand...
This possibility has been recognized by quite a few people. Given MSFS gauges are either HTML/JS or .wasm written to run on the browser engine the most valuable solution would be to NATIVELY run those gauges without changes in any browser instead of within MSFS. The missing link is a Windows webserver using SimConnect 'bridging' the gauge API requests from MSFS to the gauges, e.g. providing the SimVar.getSimVarValue() and SimVar.setSimVarValue() calls and correctly calling all the callbacks in Asobo's BaseInstrument class (e.g. connectedCallback(), Update())

However with each update of MSFS more and more Asobo gauge code is moving from the 'core' SimVar and KeyEvent support into proprietary code embedded within the MSFS 2020 XML templating programming language so the above approach would be suitable for ground-up new coded gauges but there is very little chance any of the Asobo gauges could be moved into the browser unless they add specific support for that.

The alternative is a parallel world of 'external' gauges using a new API (as with FSX) - that kind of throws away the opportunity from the MSFS gauges being html/js/wasm in the first place but it's so much easier to deliver I expect that's all we'll end up with.
 
MoMadenU said:
Start VS with no projects loaded. Go to File ->Open->Website ->Filesystem. From there just pick the root file folder that has your html, and js in it. You do not have to configure IIS. It should just come up showing you the folder contents. Right click an html file and select "set as start page" Click the green arrow on the toolbar which should launch the IIS Express web server. Debugger and breakpoints should now work
Click to expand...
Ok Just did that steps. and that works better but do I need to add in the coherent js files too it to get it too work and also mine isnt showing the debugger. do I have to be running 2017?
 
I have the FS2020 installed from the MS Store so there is no Steam folder. Also because of storage constraints on my C:\ drive I installed it on my 2TB veryfast D:\ drive.
The install created 2 folders:
d:\XBox.... where all the FS files were stored
d:\Wpsystem where all the other files including the community folder was installed

I did a search and found 3 test.html files deep under the Wpsystem folder.

1. D:\WpSystem\S-1-5-21-902807894-4070685277-127255966-1001\AppData\Local\Packages\Microsoft.FlightSimulator_8wekyb3d8bbwe\LocalCache\Packages\Official\OneStore\asobo-vcockpits-instruments\html_ui\Pages\VCockpit\Instruments\Shared\Gauges\Test 2. D:\WpSystem\S-1-5-21-902807894-4070685277-127255966-1001\AppData\Local\Packages\Microsoft.FlightSimulator_8wekyb3d8bbwe\LocalCache\Packages\Official\OneStore\asobo-vcockpits-instruments\html_ui\Pages\VCockpit\Instruments\Shared\Map\Test 3. D:\WpSystem\S-1-5-21-902807894-4070685277-127255966-1001\AppData\Local\Packages\Microsoft.FlightSimulator_8wekyb3d8bbwe\LocalCache\Packages\Official\OneStore\asobo-vcockpits-instruments-navsystems\html_ui\Pages\VCockpit\Instruments\NavSystems\Shared\Templates

I am not a HTML person so if anyone could post the .css file used would be great.
 
bernb said:
I have the FS2020 installed from the MS Store so there is no Steam folder. Also because of storage constraints on my C:\ drive I installed it on my 2TB veryfast D:\ drive.
The install created 2 folders:
d:\XBox.... where all the FS files were stored
d:\Wpsystem where all the other files including the community folder was installed

I did a search and found 3 test.html files deep under the Wpsystem folder.

1. D:\WpSystem\S-1-5-21-902807894-4070685277-127255966-1001\AppData\Local\Packages\Microsoft.FlightSimulator_8wekyb3d8bbwe\LocalCache\Packages\Official\OneStore\asobo-vcockpits-instruments\html_ui\Pages\VCockpit\Instruments\Shared\Gauges\Test 2. D:\WpSystem\S-1-5-21-902807894-4070685277-127255966-1001\AppData\Local\Packages\Microsoft.FlightSimulator_8wekyb3d8bbwe\LocalCache\Packages\Official\OneStore\asobo-vcockpits-instruments\html_ui\Pages\VCockpit\Instruments\Shared\Map\Test 3. D:\WpSystem\S-1-5-21-902807894-4070685277-127255966-1001\AppData\Local\Packages\Microsoft.FlightSimulator_8wekyb3d8bbwe\LocalCache\Packages\Official\OneStore\asobo-vcockpits-instruments-navsystems\html_ui\Pages\VCockpit\Instruments\NavSystems\Shared\Templates

I am not a HTML person so if anyone could post the .css file used would be great.
Click to expand...
I advise you NOT to touch the wpSystem folder - the community folder will be (should be) in your D:\XBOX folder
 
For Bernb,

Under D:\XBoxGames you will find MSFS launcher (1.8 Go) and all you need is under D:\XboxGames\Microsoft Flight Simulator\Content\Packages\fs-base-ui\html_ui.
So copy this html_ui directory on under your local directory and you can completed the tuto.

WpSystem is normally a hidden system file and should not be modified.
In your installation, the Packages\Official\OneStore directory is the MSFS installation. If it is, you should have also Packages\Community
 
ronh said:
I advise you NOT to touch the wpSystem folder - the community folder will be (should be) in your D:\XBOX folder
Click to expand...
Nope. Not touching anything there. It took me too long to download all the files and updates. Simply pointing out to non Steam users where the test.html could be located on their system.
 
Lagaffe said:
For Bernb,

Under D:\XBoxGames you will find MSFS launcher (1.8 Go) and all you need is under D:\XboxGames\Microsoft Flight Simulator\Content\Packages\fs-base-ui\html_ui.
So copy this html_ui directory on under your local directory and you can completed the tuto.

WpSystem is normally a hidden system file and should not be modified.
In your installation, the Packages\Official\OneStore directory is the MSFS installation. If it is, you should have also Packages\Community
Click to expand...
Thanks. I found the html_ui there but the test.html mentioned in the OP is located as I posted on my installation along with 2 others as posted. Gonna try it out now.
 
Test.html is under the directory structure where you have install the simulator, for me is under F:\MSFS on a Store version so:

F:\MSFS\Official\OneStore\asobo-vcockpits-instruments-navsystems\html_ui\Pages\VCockpit\Instruments\NavSystems\Shared\Templates\Test.html
 
For those following this thread, as I stated above I found 2 other "text.html" files in my FS2020 folders.
One for maps and another for a gauge.
Attached is the test.html gauge file. Copying it to my test dev folder I am able to run it using VS2022 as shown in the OP video. Here is what it looks like. It is animated like the other one. Once I get the map one to work I will post it here. HTH
TestGauge.jpg
 

Attachments

You must log in or register to reply here.
Back
Top