• 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

Messages
27
Country
unitedstates
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. I was able to get the basic G1000 Hsi gauge to run on its own outside of the sim.
Here is the video that walks you through the steps.


PLEASE be sure to have a backup of all your game files so that you can easily restore them should something get moved or removed by accident. I say in the video to drag the folder when I really mean make a COPY of the folder.
Game files are not altered by any means. You are just taking various pieces to assemble a dev environment that lets you build and test gauges without having to run the sim.
 
Very interesting discussion :wizard:
It interest me in order to modify my TiBush C-150 to be compliant with MSFS. All gauges in TiBush are 3D gauges only radio stack is 2D so it will be helpfull to know how HTML gauge can works and how to make them work in a new cockpit.
BRAVO :santahat:
 
Thank you!
This is a game changer for some one like me who is looking to start the learning journey for HTML gauges,
Much appreciated!
 
Hello All,
I have the original DA62 code for gauges
But I'm able to see only the first 2 items,
if i change for example the first "NavSystems/AS1000/MFD/AS1000_MFD.html" with NavSystems/AS1000/PFD/AS1000_PFD.html: All is work
but if i want to load an other HTML gauge example NavSystems/AS1000_BackupDisplay/Attitude/AS1000_AttitudeBackup.html it do not work.
It must be registered anywhere? why its not work?

Code:
[VCockpit01]
size_mm=1024,768
pixel_size=1024,768
texture=$AS1000_PFD_1
background_color=42,42,40

htmlgauge00=NavSystems/AS1000/MFD/AS1000_MFD.html, 0,0,400,512

[VCockpit02]
size_mm=1024,768
pixel_size=1024,768
texture=$AS1000_PFD_2
background_color=42,42,40

htmlgauge00=NavSystems/AS1000/PFD/AS1000_PFD.html, 0,0,1024,768

[VCockpit03]
size_mm=400,512
pixel_size=400,512
texture=$AttitudeDisplay
background_color=42,42,40

htmlgauge00=NavSystems/AS1000_BackupDisplay/Attitude/AS1000_AttitudeBackup.html, 0,0,400,512

[VCockpit04]
size_mm=400,512
pixel_size=400,512
texture=$SpeedDisplay
background_color=42,42,40

htmlgauge00=NavSystems/AS1000_BackupDisplay/Speed/AS1000_SpeedBackup.html, 0,0,400,512

[VIEWS]
VIEW_FORWARD_DIR=2.000, 0.000, 0.000

[Color]
Day=255,255,255
Night=255,255,255
Luminous=201,64,64

[VPainting01]
size_mm                = 2048,512
texture                = $RegistrationNumber
location             = exterior

painting00=Registration/Registration.html?font_color=black,    0, 0, 2048, 512

[VPainting02]
size_mm                = 512,128
texture                = $RegistrationNumber
location             = interior

painting00=Registration/Registration.html?font_color=white,    0, 0, 512, 128
 
AFAIK replacing one gauge with another doesn't really work that way, since the virtual cockpit is still trying to refer to the original gauge (whose name seems to be hardcoded in the model).
What you can try is keep the file and folder naming of the original gauge, and replace the code inside with that of the new one.
Of course, you will still be stuck with the size & dimension of the old gauge, but that seems to be out only option at the moment.
 
Hello All,
I have the original DA62 code for gauges
But I'm able to see only the first 2 items,
if i change for example the first "NavSystems/AS1000/MFD/AS1000_MFD.html" with NavSystems/AS1000/PFD/AS1000_PFD.html: All is work
but if i want to load an other HTML gauge example NavSystems/AS1000_BackupDisplay/Attitude/AS1000_AttitudeBackup.html it do not work.
It must be registered anywhere? why its not work?

Code:
[VCockpit01]
size_mm=1024,768
pixel_size=1024,768
texture=$AS1000_PFD_1
background_color=42,42,40

htmlgauge00=NavSystems/AS1000/MFD/AS1000_MFD.html, 0,0,400,512

[VCockpit02]
size_mm=1024,768
pixel_size=1024,768
texture=$AS1000_PFD_2
background_color=42,42,40

htmlgauge00=NavSystems/AS1000/PFD/AS1000_PFD.html, 0,0,1024,768

[VCockpit03]
size_mm=400,512
pixel_size=400,512
texture=$AttitudeDisplay
background_color=42,42,40

htmlgauge00=NavSystems/AS1000_BackupDisplay/Attitude/AS1000_AttitudeBackup.html, 0,0,400,512

[VCockpit04]
size_mm=400,512
pixel_size=400,512
texture=$SpeedDisplay
background_color=42,42,40

htmlgauge00=NavSystems/AS1000_BackupDisplay/Speed/AS1000_SpeedBackup.html, 0,0,400,512

[VIEWS]
VIEW_FORWARD_DIR=2.000, 0.000, 0.000

[Color]
Day=255,255,255
Night=255,255,255
Luminous=201,64,64

[VPainting01]
size_mm                = 2048,512
texture                = $RegistrationNumber
location             = exterior

painting00=Registration/Registration.html?font_color=black,    0, 0, 2048, 512

[VPainting02]
size_mm                = 512,128
texture                = $RegistrationNumber
location             = interior

painting00=Registration/Registration.html?font_color=white,    0, 0, 512, 128
It's a longshot, but did you try moving everything under [VCockpit03] to [VCockpit01] ? The panel is not a flat sheet you can attach to. Every aircraft has the gauge layout baked into it. The reason PFD and MFD switching works is because they are both the same size and layout.
 
Do you think this method can be applied to MSFS gauges with code to read from MSFS engine?


What I am thinking is for a WYSIWYG approach, perhaps use Adobe edge animate for design of HMTL gauge without messing with HTML and CSS.

and JS to drive these animations linking to MSFS engine..
for feedback of our gurus..
 
Do you think this method can be applied to MSFS gauges with code to read from MSFS engine?
Seems like overkill.
After all, most gauges either consist of some numeric display, or it's an element that's moving a bit in one dimension.
 
Do you think this method can be applied to MSFS gauges with code to read from MSFS engine?


What I am thinking is for a WYSIWYG approach, perhaps use Adobe edge animate for design of HMTL gauge without messing with HTML and CSS.

and JS to drive these animations linking to MSFS engine..
for feedback of our gurus..
I am working on the ability to develop gauges in the browser but attached to the sim. Say you are building a new aircraft and there is more than one person on the team. The model person and the gauge person. Wouldn't it be nice if the gauge person could develop the gauges in the browser while attached to the sim flying an existing airplane. That way 2 people could work independently.
 
It's a longshot, but did you try moving everything under [VCockpit03] to [VCockpit01] ? The panel is not a flat sheet you can attach to. Every aircraft has the gauge layout baked into it. The reason PFD and MFD switching works is because they are both the same size and layout.
I have done it and work trought blender! now I'm charging different original gauges!
but... there are a way to use its in my own folder? example copy the 747PFD in one my folder and call it
 
I have done it and work trought blender! now I'm charging different original gauges!
but... there are a way to use its in my own folder? example copy the 747PFD in one my folder and call ii

I'm working on the ability to work on live gauges without building a package, but right now here is a tool that allows you to refresh your community package without restarting the game.
 
Does someone know how the undocking of cockpit displays work internally? I've been trying to figure out if it's possible to modify the undocked window, for instance by increasing the size and have a 2D clickable background image of the MCDU/FMS
 
Does someone know how the undocking of cockpit displays work internally? I've been trying to figure out if it's possible to modify the undocked window, for instance by increasing the size and have a 2D clickable background image of the MCDU/FMS
I dusted off the 'ole Spy++ to see what a an undocked window was and the answer is not much. Either docked or undocked they appear to be just a BitBlt of the Coherent engine DOM running the gauge.

MSFS2020_Win_handles.PNG


You could hook them using SetWindowsHookEx through the Flight Sim proc ID. That would get you mouse events and coordinates if that is what you are after.
 
I dusted off the 'ole Spy++ to see what a an undocked window was and the answer is not much. Either docked or undocked they appear to be just a BitBlt of the Coherent engine DOM running the gauge.

View attachment 64614

You could hook them using SetWindowsHookEx through the Flight Sim proc ID. That would get you mouse events and coordinates if that is what you are after.
Interesting! I will certainly try that out
 
I'm working on the ability to work on live gauges without building a package, but right now here is a tool that allows you to refresh your community package without restarting the game.
I am also working on a gauge, (in the community folder), and if after editing the js, I just re-load the plane, it refreshes the gauge with the edited js.
Enormous saving in time over having to re-start the game.
 
I am also working on a gauge, (in the community folder), and if after editing the js, I just re-load the plane, it refreshes the gauge with the edited js.
Enormous saving in time over having to re-start the game.
dga711 made it even easier. HERE is the code to embed a debug window in your gauge
 
Thanks -- I has seen that, but not tried it yet.

Currently, I edit the js in the Community folder with Notepad++ (in JS mode), and then just reload the plane from the Dev Panel, that 9/10 times will reload the changed js
I'm assume assuming one cannot (yet) DEBUG using VS ? ( I don't know, is that a stupid question ??? )

Anyone made a good video on writing and debugging Gauges ??
 
OMG .. Just download the latest SDK.

Click on Variable List .. SAYS TO DO !!! Really ..
Then I realize, that's just the TOP Level description that is TO DO,
Click on the +, and it opens up "the Goodies" !!!

What is coherent.call ?? I see it in Asobo's js, but no mention of it in the SDK, or if I Google Search it ...
Search of the SDK for "coherent" -- Nothing

but I see it often in the OFFICIAL's js files

ie

Coherent.call("AP_ALT_VAR_SET_ENGLISH", 2, SimVar.GetSimVarValue("AUTOPILOT ALTITUDE LOCK VAR", "feet") + 20, false);
 
Last edited:
OMG .. Just download the latest SDK.

Click on Variable List .. SAYS TO DO !!! Really ..
Then I realize, that's just the TOP Level description that is TO DO,
Click on the +, and it opens up "the Goodies" !!!

What is coherent.call ?? I see it in Asobo's js, but no mention of it in the SDK, or if I Google Search it ...
Search of the SDK for "coherent" -- Nothing

but I see it often in the OFFICIAL's js files

ie

Coherent.call("AP_ALT_VAR_SET_ENGLISH", 2, SimVar.GetSimVarValue("AUTOPILOT ALTITUDE LOCK VAR", "feet") + 20, false);
Information about the Coherent GT JS Engine is HERE Essentially it's the glue code between the JS in the gauges and the C++ in the game. The code you are showing there is communicating with Sim Connect. The Simvars.exe sample app in the SDK will explain what all the commands are. The thing is most of the new ones that Prepar3d added are not supported. MSFT was probably too embarrassed to buy back the code base from Lockheed Martin so they started with FSX code base which puts it many years behind.
 
Thanks -- I has seen that, but not tried it yet.

Currently, I edit the js in the Community folder with Notepad++ (in JS mode), and then just reload the plane from the Dev Panel, that 9/10 times will reload the changed js
I'm assume assuming one cannot (yet) DEBUG using VS ? ( I don't know, is that a stupid question ??? )

Anyone made a good video on writing and debugging Gauges ??
Not a stupid question at all. Actually try attaching to the MSFS .exe from VS and see what happens.
 
Back
Top