MSFS Getting Started With FS2020 HTML Gauges

[MoMadenU]

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.

 

[Lagaffe]

Very interesting discussion
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

 

[Marwan Gharib]

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!

 

[bredok]

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?

[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

 

[Kronzky]

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.

 

[MoMadenU]

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?

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

 

[Marwan Gharib]

Do you think this method can be applied to MSFS gauges with code to read from MSFS engine?

Coherent GT for UE4 Artist quick start guide. version PDF Free Download

Coherent GT for UE4 Artist quick start guide version Introduction to Coherent GT Coherent GT is industry-leading UI middleware specially designed for games. Powered by HTML it gives you the ability

docplayer.net

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

 

[Kronzky]

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.

 

[MoMadenU]

Do you think this method can be applied to MSFS gauges with code to read from MSFS engine?

Coherent GT for UE4 Artist quick start guide. version PDF Free Download

Coherent GT for UE4 Artist quick start guide version Introduction to Coherent GT Coherent GT is industry-leading UI middleware specially designed for games. Powered by HTML it gives you the ability

docplayer.net

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.

 

[bredok]

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

 

[MoMadenU]

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.

 

[ZenIT_SWE]

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

 

[MoMadenU]

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.

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.

 

[ZenIT_SWE]

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

 

[Geoff_D]

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.

 

[MoMadenU]

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

 

[Geoff_D]

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 ??

 

[Geoff_D]

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);

 

[MoMadenU]

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.

 

[MoMadenU]

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.