• 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.

MSFS Getting Started With FS2020 HTML Gauges

MoMadenU

MoMadenU

Messages
27
Country
unitedstates
Here is a sneak peek at my progress after many hours of sifting and rewiring the html_ui code tree. This is the AS1000 PFD "running" from an entirely isolated code base outside of the game. My end goal is to add the bezel and get it working as a true 2D gauge when running in its own window
 

Attachments

  • TestAS_1000_PFD.png
    TestAS_1000_PFD.png
    73.9 KB · Views: 815
ElSrJuez

ElSrJuez

Messages
9
Country
panama
Thanks for this!
I would like to be able to explore local L:SimVars in any plane with a debug-like 2D window, I have been fishing around but still came up emptyhanded - how do you hook gauges so that they appear in the sim without replacing an existing one?
 
MoMadenU

MoMadenU

Messages
27
Country
unitedstates
ElSrJuez said:
Thanks for this!
I would like to be able to explore local L:SimVars in any plane with a debug-like 2D window, I have been fishing around but still came up emptyhanded - how do you hook gauges so that they appear in the sim without replacing an existing one?
Click to expand...
The community folder IS the hook. If your replaced files follow the exact folder path starting from html_ui, it will run your code. You can even override the core .js files. What do you mean by L:SimVars? Have you done any XML gauges?
 
ElSrJuez

ElSrJuez

Messages
9
Country
panama
Apologies, I went ahead of myself.
I am looking at Gauges because I ultimately want to gain access to the Local SimVars and Events currently inaccessible via SimConnect (for example, from G1000 or A320Neo virtual cockpit).

For now, I am still struggling to get the sample gauge running as you were showing - because I am VS-impaired I could not create "a basic Web project for JS HTML with CSS" in Visual Studio. I can't find a template and, if I do basic .NET Web app, it configures the solution as C# csproj which doesnt help.
From here its all downhill: Debug doesn't work with error "please select a valid startup item", the "set at startup document" context item is not available when I right-click the html file.
 
MoMadenU

MoMadenU

Messages
27
Country
unitedstates
ElSrJuez said:
Apologies, I went ahead of myself.
I am looking at Gauges because I ultimately want to gain access to the Local SimVars and Events currently inaccessible via SimConnect (for example, from G1000 or A320Neo virtual cockpit).

For now, I am still struggling to get the sample gauge running as you were showing - because I am VS-impaired I could not create "a basic Web project for JS HTML with CSS" in Visual Studio. I can't find a template and, if I do basic .NET Web app, it configures the solution as C# csproj which doesnt help.
From here its all downhill: Debug doesn't work with error "please select a valid startup item", the "set at startup document" context item is not available when I right-click the html file.
Click to expand...
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
 
ElSrJuez

ElSrJuez

Messages
9
Country
panama
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...
Thanks for replying but that didnt quite work, i didnt get at all the context menu "set at statup document".
I rebuilt my PC recently, so I may try again in the next few days.
Thx again!
 
Amengol

Amengol

Messages
138
Country
ca-britishcolumbia
Thanks for sharing your findings and that seems a good way to develop gauges and have it instantly tested.
One thing though, I could not find that JS folder. Also, I don't have the fs-base-ui folder, but fs-base-ui-pages and fs-base-ui-vr.
My version is the one from the Windows Store, not the Steam one. Are they that different or was there an update that removed/renamed the fs-base-ui folder?
Would you mind sharing that JS folder if you still have it?
 
Amengol

Amengol

Messages
138
Country
ca-britishcolumbia
Never mind. Find it in C:\Program Files\WindowsApps\Microsoft.FlightSimulator_1.12.13.0_x64__8wekyb3d8bbwe. Was looking in the wrong folder.
 
ronh

ronh

Messages
1,243
Country
canada
But can you open those files? I keep getting file access denied. Can't open file xxxx.js etc. Trying to take ownership does not work for me.
 
Amengol

Amengol

Messages
138
Country
ca-britishcolumbia
ronh said:
But can you open those files? I keep getting file access denied. Can't open file xxxx.js etc. Trying to take ownership does not work for me.
Click to expand...

Yep, I had I hard time too and I advice against messing with the permissions for that folder or the WindowsApps one.

I've found a workaround though. As the simulator itself has access to that folder you can copy it through the simulator. Enable DevMod and get access to the file explorer by say, creating a new project and clicking "..." to open it. Then you can browse to that folder and copy whatever you want to wherever you want, but remember to copy and paste using the same window.
 
OzWookiee

OzWookiee

Messages
392
Country
australia
Amengol said:
Yep, I had I hard time too and I advice against messing with the permissions for that folder or the WindowsApps one.

I've found a workaround though. As the simulator itself has access to that folder you can copy it through the simulator. Enable DevMod and get access to the file explorer by say, creating a new project and clicking "..." to open it. Then you can browse to that folder and copy whatever you want to wherever you want, but remember to copy and paste using the same window.
Click to expand...
That sir is a handy tip ☺️
 
Amengol

Amengol

Messages
138
Country
ca-britishcolumbia
DragonflightDesign said:
That sounds like Admin access, as I suggested. Did you try it?
Click to expand...
WindowsApps folder and subfolders have special permissions. You have to take ownership of the folder and add yourself or the admin group with Full Control to have access, then overwrite subfolder permissions. Even after that you may have some inheritance issues on the subfolders.

Be advised that changing those permissions may adversely affect either your FS installation or any other windows app.

The workaround has no side effects though.
 
A

Anthony31

Messages
1,053
Country
australia
Amengol's tip saved me. Just load MSFS. Then create a dummy project and try to add a file. MSFS will open a standard file explorer and you can navigate to the html_ui folder, right click copy, navigate to your desired location and paste.

Fuck you Microsoft for making things so stupid.
 
A

Anthony31

Messages
1,053
Country
australia
MoMadenU said:
After searching high and low for information on how to write HTML gauges I stumbled upon a Test HTML file left in by the FS2020 developers. That got me started.
Click to expand...
Thank you for the video. Could you please upload the css file you used in your video. I'm completely new to html and css and js so it would be a big help in my learning. I've managed to get the test gauge running in a browser but without the css it is fixed in size.

Edit: I found the width and height controls in the html. Setting them to 100% and the margin-left and margin-top to 0 gets me a rescaleable HSI.
 
Last edited:
H

HellG

Messages
3
Country
germany
Trank you for the video, That was what I am was looking for. I had a hard time to access the js files, because I installed it via XBox Game Pass for PC which installed the files into an encrypted container, only accessible from the XBox app starter. But there is always a way... (see https://billyhulbert.github.io/2020/10/07/msixvc-xbox-pc/ ).
Could you maybe post the html file for the AS1000 PFD from your picture above? I would like to get the A320 PFD Running but I think I need a file with some kind of <body></body> that actually calls some functions to begin with. Would be great!
Cheers,
HellG
 
S

superman32870

Messages
14
Country
us-texas
MoMadenU,

Where did you get or how did you write the the TestHsiIndicator.css file in the first video?

Thx
SM32870
 
You must log in or register to reply here.
Top