• 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 html gauge tutorial and samples

Messages
622
Country
australia
Yahallo

I've spent the last 2 months in the shed hammering away at html gauges. I've managed to make a couple of gauges, a radio and a fuel level for my aircraft. After much cursing and swearing I think I have a slight understanding of how to make a gauge. I have made this simple tutorial to help share the knowledge.

Let me just start by saying html is hard. There is a lot of code you need to write just to get something to work in MSFS. I also recommend developing in a web browser instead of MSFS at least for the layout stage of your gauge. MSFS is a real pain in the butt to work within. The tutorial includes examples of gauges that will run in a browser as well as detailing the changes you need to make to convert that gauge to run in MSFS.

Disclaimer: I am not an expert in html, js or css. These examples may not be the most efficient or perfect way to create gauges for MSFS. But they work. They are what I was able to figure out from the last 2 months of repeated head banging against the wall.

Final disclaimer: Please do not ask me to figure out why your gauge is not running. All I can say is carefully check your syntax (including capitalisation) and any changes you make. Like I said, making html gauge is not easy.

This picture shows the sample gauges in operation. As you can see they are very simple, I didn't want anything too complex so you could just focus on the core layout of the gauges. The one on the left is made using SVG elements and you can rotate and translate the yellow rectangle with the elevator and aileron controls. The one on the right is easier to code and uses DIV elements. SVG elements are more complex but necessary if you want to create graphics and glass cockpits. DIV elements are easier and are great for simple text displays (such as radio displays).

At the bottom of the picture on the left you can see the radio gauge I wrote and on the right is the default Aera which is being substituted by the sample SVG gauge. Using the Aera substition allows people using the tutorial to quickly see the gauge in operation without needing to build your own aircraft and create dummy panels.

htmlgaugetutorial.jpg
 

Attachments

  • AntsTutorialGauge.zip
    109.9 KB · Views: 288
Messages
3
Country
unitedstates
Thanks for doing this Anthony. I don't know if MSFS has changed since you posted this but I'm struggling to follow along with the 'LET'S START' section. You suggest copying the generic 'hmtl_ui' folder from the base MSFS install but I can't find this folder in the location you describe? Maybe I'm missing something simple but I'd appreciate any help you could offer to help me understand this.

Thanks.
 
Messages
622
Country
australia
Thanks for doing this Anthony. I don't know if MSFS has changed since you posted this but I'm struggling to follow along with the 'LET'S START' section. You suggest copying the generic 'hmtl_ui' folder from the base MSFS install but I can't find this folder in the location you describe? Maybe I'm missing something simple but I'd appreciate any help you could offer to help me understand this.

Thanks.
The install location of MSFS is only something you know. I can only tell you where it is if you install MSFS through the MS Store without changing the default location. If you need more information you should provide some more information. I cannot provide detailed answers to vague questions.
 
Messages
3
Country
unitedstates
Yeah, I guess that question was a bit vague. My installation is from the Microsoft store and in the default location but it's OK now. I haven't found exactly what you describe but I think I've found what I need.

Thanks for your reply.
 
Top