MSFS20 Custom Avionics

[Liquidcooled]

Has anyone figured out how to make custom avionics UI? I know that the code for the default ones in-game is hidden, but I'm just curious to know if anyone has any ideas.

 

[lionheart]

Actually its not hidden, and they welcome us using theirs. I am using their avionics stack.

UI for Asobo software (gauges) is all in the Behaviors files. Learning that however and incorporating it into your plane is the hard part. A new way, a new language. Much to learn.

As for FS9 XML, the 'mouse rects' are broken. Also, FS9 GPS (the map engine gauge) does not work in MSFS.

But... FS9 and FSX XML do work in MSFS, but as you said, UI (clickables) do not, on 2D gauges. Object clickability via ModelDef coding in models 'does' work. FSX ModelDef coding.

Hope that helps.

My Trinidad is using the Asobo Avionics systems. Getting the KT76C working didnt happen, but RonH found a way to show the GTX330 window to show in it, (Transponder).


Now to figure out how to turn off the lights on the gauges when the switches are off... :S

 

[lionheart]

By the way, you might request that Asobo might find a way to get FS9 XML to work with clickability in a future update in MSFS. I did. Hoping it might happen.

 

[terence jordan]

Actually its not hidden, and they welcome us using theirs. I am using their avionics stack.

UI for Asobo software (gauges) is all in the Behaviors files. Learning that however and incorporating it into your plane is the hard part. A new way, a new language. Much to learn.

As for FS9 XML, the 'mouse rects' are broken. Also, FS9 GPS (the map engine gauge) does not work in MSFS.

But... FS9 and FSX XML do work in MSFS, but as you said, UI (clickables) do not, on 2D gauges. Object clickability via ModelDef coding in models 'does' work. FSX ModelDef coding.

Hope that helps.

My Trinidad is using the Asobo Avionics systems. Getting the KT76C working didnt happen, but RonH found a way to show the GTX330 window to show in it, (Transponder).


Now to figure out how to turn off the lights on the gauges when the switches are off... :SView attachment 67908

Hi Bill, as an interim workaround, you might try black polygons that appear in front of the gauges when the battery is switched off. I am using a similar technique with some success in other areas. Just a thought. Regards, TJ

 

[Liquidcooled]

Actually its not hidden, and they welcome us using theirs. I am using their avionics stack.

UI for Asobo software (gauges) is all in the Behaviors files. Learning that however and incorporating it into your plane is the hard part. A new way, a new language. Much to learn.

As for FS9 XML, the 'mouse rects' are broken. Also, FS9 GPS (the map engine gauge) does not work in MSFS.

But... FS9 and FSX XML do work in MSFS, but as you said, UI (clickables) do not, on 2D gauges. Object clickability via ModelDef coding in models 'does' work. FSX ModelDef coding.

Hope that helps.

My Trinidad is using the Asobo Avionics systems. Getting the KT76C working didnt happen, but RonH found a way to show the GTX330 window to show in it, (Transponder).


Now to figure out how to turn off the lights on the gauges when the switches are off... :SView attachment 67908

I guess I maybe wasnt clear enough with my question, I've been messing around with getting gauges to work and all, but I want to know how you could program your own avionics if you need something that looks or performs differently than the base game ones. For example the displays in a fighter jet.

 

[lionheart]

Of course. You can figure out the HTML/Java that Asobo use, you can use FSX XML, and you can use FS9 XML, like this one has. Also there are I think 2 or 3 more langauges (computer code) that Asobo also uses.

So many ways.... Dean and Dino are both using their codes in their jets for their own instrumentation.

 

[B21-soaring]

the RPN XML language for *programming* was a bit of a joke in FSX, let alone MSFS in 2021. I can see people extending ModelBehaviors from animating a lever or needle with a single SimVar to building the arcane RPN XML structures we ended up with in FSX. Surely this is wrong and pretty much anything other than the 'single SimVar' code would be better in HTML/JS.

 

[Liquidcooled]

Of course. You can figure out the HTML/Java that Asobo use, you can use FSX XML, and you can use FS9 XML, like this one has. Also there are I think 2 or 3 more langauges (computer code) that Asobo also uses.

So many ways.... Dean and Dino are both using their codes in their jets for their own instrumentation.

I found the html instrument code but I don't really understand it, Im trying to make a hud currently and there is one in the 787.

updateProjection(_deltaTime) {
        if (!this.mainFrame)
            return;
        if (!isFinite(this.mainFrameHeight)) {
            let clientRect = this.mainFrame.getBoundingClientRect();
            if (clientRect.width > 0) {
                this.mainFrameHeight = clientRect.height;
            }
        }
        else {
            let horizonOffset = 0;
            {
                let planeAltitude = Simplane.getAltitude() / 3281;
                let horizonDistance = Math.sqrt(planeAltitude * (12742 + planeAltitude));
                let correction = planeAltitude / horizonDistance;
                horizonOffset += (7.0 * correction);
            }
            {
                let cameraHeight = SimVar.GetGameVarValue("CAMERA HEIGHT IN PLANE", "feet");
                let deltaFeet = cameraHeight - 5.21;
                horizonOffset += (-1.85 * deltaFeet);
            }
            {
                let xyz = Simplane.getOrientationAxis();
                horizonOffset += (-1.55 * xyz.pitch);
            }
            horizonOffset *= this.mainFrameHeight;
            this.projectionOffset = Utils.SmoothSin(this.projectionOffset, horizonOffset, 0.0075, _deltaTime);
            for (let i = 0; i < this.slidingSystems.length; i++) {
                this.slidingSystems[i].slide(this.projectionOffset);
            }
        }
    }

This seems to be the code to get the "holographic" effect, but I don't really get how it works or how to implement it, or how to go about making anything like this in general. Im not super good at programming but I'm pretty resourceful so If someone could point me in the right direction to figure this out that would be great. I poked around in the Coherent gt documentation so maybe I can find the answer there.

 

[B21-soaring]

I member looking at this post at the time and trying to think of a sensible answer. Rather than leaving it hopelessly unanswered I'll leave the comment that having a 'holographic' head-up display as your first MSFS html/js gauge programming project is setting the bar unrealistically high given the documentation is *really* sketchy at the moment and those of us working on html/js gauges have been grinding away for maybe 6 months + gleaning information from MSFS stock aircraft and finding out what all the critical tiny details are (there's a LOT!). The dev tools for html/js gauge programming are very limited also.

I'm sure the OP will be able to write the holographic HUD (and html/JS is absolutely the right framework to use) but starting with a 'simple' gauge will be the way to get there. I'd suggest the html/js gauge programming hierarchy (from simplest to most complex) is:

(0) If you have a suitable defined $texture on your panel, you can display a html/js gauge from any stock Asobo aircraft simply by putting a suitable entry for it in panel/panel.cfg. If you want a 3D bezel around with knobs you have to model that also. At this point you haven't done any html/css/js programming but you've seen how you get the gauge working in your panel. 'Flat panel' gauges (e..g GPS) are great for html/js because (a) that's great for display/interacting UI-style info (b) those gauges are typically a shed-load of html/js and very little modelling.

(1) have a html/css/js gauge update any $texture area on the panel. This means learning the basic 'template' structure of html/css/js gauge files, and overcoming the early experience we all have of "my gauge is not working AT ALL, what do I do?". Already knowing how to program html/css/js (i.e. as on web pages() is a massive advantage as much of those skills are directly transferable. On the upside, displaying a simple number (like radio frequency) takes only a few seconds when your familiar with how to get a gauge working. Write the Update() method which will get called by the sim for each update of your gauge.

(2) update an "L:" variable in html/js and use that to control an animation via model/<aircraft>.xml

(3) Get familiar with SimVar.GetSimVarValue() and SimVar.SetSimVarValue() so you gauge can display something useful. Look at the 'Simplane' methods in Asobo gauge code in case that is actually preferred.

(4) Discover the SetStoredData(), GetStoredData() calls that allow you to save information between sim launches (this is a killer feature).

(5) Get familiar with CSS style 'transform' which is how you rotate and slide things on your displayed info. Also learn 'SVG' programming (html vector graphics) if you want to do anything fancy involving line graphics (Asobo use SVG grapics for a lot of things, even the arcs on some instrument dials).

(6) You can find out how clickable model objects defined in model/<aircraft>.xml can send 'custom events' to your html/js code (this is the js onInteractionEvent() callback)

(7) For a 'touch' panel you can define clickable areas 'within' your $texture (using standard html/js 'onclick' callbacks) and those'll work.

(8) If you want a moving map within a truly custom gauge, you will need to spend a long time working backwards through the Asobo sources to find our how a Bing map can be embedded, and how to overlay that with SVG vector graphics that you'll zoom/rotate to stay in sync with the map - we are doing this in the AS33 glider (in development) but in the main the moving maps in freeware aircraft are mostly embedded/modified Asobo Garmin instruments. The clues here are to look in the Official/asobo-vcockpits-instruments and Official/asobo-vcockpits-instruments-navsystems packages. At some point you'll need to study the fs-base-ui package which is where the Asobo lowest level NetBingMap.js resides.

Good luck all - please read this as a positive post to say "html/js gauge programming involves these things" to help the unaware get started - it's certainly not intended as a negative whine about how hard it is with the lack of documentation.