MSFS Explain js/css/html and xml and gltf/bin and wasm relationships - Unofficial SDK ver 0.13 info

[ronh]

Can someone explain the relationship between all the new file types and how they relate to each other and what they are used for/do in an aircraft project?

TLDR: What I am looking for is more information on how the js/css/html/coherent panel.xml and panel.cfg work together, and I've looked at the good work of others in other threads about this. (like https://www.fsdeveloper.com/forum/threads/getting-started-with-fs2020-html-gauges.449513/).

I've gathered this info, but a little knowledge is dangerous.

In ancient times there was Modeldef.xml and GMAX/Blender/3DSMAX and exporters that combined the modeldef.xml code and meshes/animations into an MDL file. (just to be simplistic here.) You could also create gauges in C++ for more complex actions and create gau (dll) files that your MDL could access/use via .cfg files.
Now MSFS can still utilize modeldef.xml in a similar fashion, but now it gets a little more complicated with js/css/html and xml and possibly WASM(C++).

I'd like to concentrate on blender (3DSMAX is out of my budget) and the Blender2MSFS utility.

You create a blender file that represents your model, an exterior model and and interior model. You add animations for the exterior like elevator/rudder/ailerons/flaps /gear etc.
You must now name your animations the same name as ASOBO has done in their template files (with the ID suffix taken into account if needed) , in order to use their template files for the "modelbehaviours" (you can use older modeldef.xml as I understand it, but I want to know about the newer tech).

This seems pretty straight forward. and the xml should match the nodes.

Now looking at the interior/cockpit files, a similar naming for the instruments and their animations. However instruments will be required to send events and interact with the user.

and the xml file for the interior.

After this the interaction of the user to the instruments is handled by what. I see panel.cfg, panel.xml.

Panel.cfg points to say NavSystems/AS1000/PFD/AS1000_PFD.html.

It looks like the graphics are drawn using css/js/html. I understand javascript (js) and css html. The new thing to me is the Coherent_GT framework. This is a framework that supports JavaScript to be used in "games" for UI etc.

Edit: (this statement is an error it supports OpenGL, DX9, DX11 and DX12) But when I look at the site this is 2016 tech and only supports DX11. The newer Coherent Gameface/Prysym supports DX12 and newer tech. ( so future upgrade needed when MSFS changes to DX12.)

Coherent GT: Main Page

coherent-labs.com

Coherent Labs - Advanced Game UI Solutions

Create stunning and high-performance game user interfaces with Coherent Labs. Explore our products Gameface and Prysm.

coherent-labs.com

What I am looking for is more information on how the js/css/html/coherent panel.xml and panel.cfg work together, and I've looked at the good work of others in other threads about this. (like https://www.fsdeveloper.com/forum/threads/getting-started-with-fs2020-html-gauges.449513/). It looks as though the only real thing js/css/html is for is graphic intensive type display. Then what is wasm GDI+ C++ for? I guess just even more complex things and interactions.

 

[ronh]

Here is a replacement for the HTML TODO from ASOBO for the SDK Documentation files information.

Let me know if there are any glaring errors, and would appreciate any extra information re: html gauges.

I hope to update the XML page also.

Well .... it's a start.

The zip file below contains updates to
01-Getting started - Virtual file Structure added, Coherent-GT added.
02-Asset_Creation\Lighting_Model - added with emphasis on PBR textures.
03-Content_Configuration\SimObjects\Models\ModelBehaviors - updated the AnimationEvent table as it was malformed and added XML Model Behavior Template info.
03-Content_Configuration\SimObjects\Instruments\HTML_Gauges - minor updates
03-Content_Configuration\SimObjects\Instruments\XML_Gauges - link to ESP XML gauges added

The UnOfficialSDKANIM_NAMES.xlsx spreadsheet has been moved to a Resource folder rather than the main Documentation folder - you can delete the one in the main folder. There is a link in the XML page.

The zip file has a main folder Documentation Unofficial Updates with a Documentation folder as a sub - folder. You can copy and overwrite your existing html pages or keep separate.

UPDATED: 2021-03-15 09:00PM EDT - Version 11 format change

Update - Getting too big for FSDeveloper.

Here is the link to OneDrive

 

[B21-soaring]

Ron this is much appreciated - thanks for putting the effort to get this written down.

I'm mid-way programming complex gauges (for a sailplane) and the JS/CSS/HTML is a piece of cake compared to hooking the code into the sim. IMHO we truly are at the stage where it's a triumph just to get your first white div to actually appear on a cockpit panel. And at that point you're not reading (or writing) SimVars or trying to get any user interaction. Each step is easy after you've sweated hours searching the internet for the tiniest of clues, and on that scale your intro document is a masterpiece.

If you can draft an XML page that would be really supportive - is the gauge side of things *identical* to FSX, i.e. the contents and structure of the panels folder? My experience with MSFS so far is "all FSX gauge XML fully supported" guarantees there is some undocumented requirement for different config files or folders but I'll be pleasantly surprised if not.

 

[lionheart]

This is where I am at, Ron. The Asobo version of Model Def.

From what I have learned, Asobo has renamed it 'Behaviors'. Animations are 'Behaviors.'
Behaviors are located in multiple locations in the MSFS 2020/........OneStore/fs-base-aircraft-common/Model Behavior/Asobo/..... folder network.
The HTML gauges (which have things like a JSON and CSS and Java files with them, are located elsewhere.
Your plane model will have a primary XML that tells the model how to animated. It will also link into some gauges, like autopilot buttons to the autopilot primary HTML, and its other 'primary version' of autopilot. Its quite complicated at times, as you also need to finish or create a customized version of the 'behavior' to fit your code.

Oddly, the Behaviors are in odd writing. You cannot always just copy out a section and place it into your planes personal animations XML. Also, I have seen multiple ways to write the same thing. I am totally baffled by the system. Very frustrating.

You can create your own XML via FSX ModelDef XML and add that into the upper part of the planes model XML(s). It runs them fine and its not complicated. But things like their 'system's will require you to use theirs. Lastly, is avionics. FS9GPS Map gauge doesnt work in MSFS. (no crying... ok.. cry... I am.. ) and with that, FS9 XML code gauges have no mouserects... So touching screens doesnt work. (XML 2D gauges that is. Parts work fine, but not gauges in FS9 code). So you will need to use their MSFS screens. And that is a nightmare. With the last update, for instance, some gauges on 3rd party planes quit working, though they are MSFS Asobo coded gauges.. (radio screens and a transponder screen for instance).

Also, Circuits for power are wired in various locations of code locations in planes. For instance I found several locations denoting 'Circuit number' for Autopilot, Transponder, and the GPS's. Either 3 or 4 locations maximum. From panel config, to Behavior, to I think the Panel XML and model XML. So if one of those is wrong, your system breaks, so you have to tripple check coding all through the routes.

Some parts animations are 2 key frames (2KF's). On/Off. The Behavior code has 'animation speed' programmed in. So this is awesome. Still works smoothly, and easy to animate.

For screens, you use the Asobo 'name' for the screen as your Material name, like $TRANSPONDER_Screen (which doesnt work, but thats what its called and should work. The GPS's do presently, and also via that name system. The names for gauge screens can be found in the planes in the panel configs. 'texture= $gauge screen name....'

And decals... The radios all have floating font on them. I found that in the misbehavior files (our little humorous nickname for behaviors) you will find the names buried in the code for Decals for things, like autopilot, GPS, MFD, PFD, gauges, etc... Then you link in a part that is the lights dial which is 'potentiometer' which will control dimming.

By the way, to get things to show up that are gauges or decals, you give them a white background in the 'Emissive' section of the Material. Then they show up, bright. Then figure out what name to find for that particular decal Material. You would then add the part (knob) that controls that light so you can tune it later, if you wanted.

What OzWookie does is use the Cessna 152 as a 'template' for the animations and panel, and then you customize it from there. Your base animations for the plane are in there, like props, landing gear, elevators, etc. Just copy/paste, and link them up. Name the part and the animation appropriately (same name). In Blender, you use 'push' and create a pushed Animation (Linear animation) for parts that have multiple use of the 'same' Animation, like some switches that have dummies powering them because the animations of the parts are messed up. Names are important on parts 'and' their animations names. You can have a renamed animated 'dummy' part with .001 which Blender auto-renames when you have 2 or more of the same named part. (Autopilotswitch, Autopilotswitch.001, Autopilotswitch.002). Just make sure the physical one (not the dummy or Empty in Blender talk) has the pure name, no .001 attached. The dummy's can have modified 'names' but not modified animation names. And parts that have mouserects (like Autopilotswitch) need a single Key Frame for animation to function as a clickable part. I think I got one working with 'action' added (AutopilotSwitch.action) to the animation name in Blender and it worked fine in MSFS. But a clickable part 'needs' an animation, or its not recognized, not clickable. By having one KF, thats it. 0KF has no movement, only a 'location' animation 'key frame'. No movement. This makes it clickable.

Enough for now to think on? That will be enough to start catastrophic eyebrow hair premature graying..... Add eyebrow de-graying ointments to your grocery list...

 

[lionheart]

All my FS9 based gauges are non-clickable.. Oh the humanity...

 

[lionheart]

I have been begging Asobo for the model XML and panel XML for the Cessna 172 Classic. It would help us with the GPS530 and GPS430, AP (of that type) and Transponder (which is broken right now). But its DRM. Perhaps a version that is a 'template' for the Developer kit in the SDK? It would help us. Then one could just copy/paste Behavior code to a plane project's Model XML and Voila! 'Instant animations'

Something needs to be done. Me and others have requested a system for bringing in Behavior code to our planes. It is, I think, radically complicated and complex. In FSX, we just chose the animation segments in Animation Manager in Max. Not sure how it worked in Blender2FSX. Here, you have to find the right code and experiment with how to fill it out, customize it, change it to work in your own Model XML.

 

[ronh]

Thanks Bill, a lot to chew on. Agree with looking at the C152 for simple things, then I want to look at the DA40. I plan on working on a G500 for the DA20 C1 Eclipse, because I am familiar with that aircraft.

I did make a mis statement on DX12 capabilities of coherent-GT. It's ok for OpenGL, dx9 , dx11 and dx12

 

[OzWookiee]

And parts that have mouserects (like Autopilotswitch) need a single Key Frame for animation to function as a clickable part. I think I got one working with 'action' added (AutopilotSwitch.action) to the animation name in Blender and it worked fine in MSFS. But a clickable part 'needs' an animation, or its not recognized, not clickable. By having one KF, thats it. 0KF has no movement, only a 'location' animation 'key frame'. No movement. This makes it clickable.

Hey @lionheart I'm still on my holiday so cannot confirm but 99% certain this is only true for FSX and is not the case with MSFS, especially when using ModelBehaviours.
The new system can be daunting to learn at first but like RPN, it will click and you'll just get it. It's so powerful and flexible and has really sped up my development.

 

[Geoff_D]

I have been begging Asobo for the model XML and panel XML for the Cessna 172 Classic. It would help us with the GPS530 and GPS430, AP (of that type) and Transponder (which is broken right now).

What do you see broken on the C172 Classic's Transponder and it's KAP140 AP ? (I may have the answer, if it's the same thing I just fixed)

 

[lionheart]

What do you see broken on the C172 Classic's Transponder and it's KAP140 AP ? (I may have the answer, if it's the same thing I just fixed)

I cannot get the Transponder to fire up. It shows the off screen. I feel like I have the right $texture but the transponder isnt on. I have the KT76C unit, like the C172 has, and have rechecked all my circuits over and over. If the screen Material is renamed a wrong name, it shows up white. With the present name, the screen shows the same brownish 'off' color of the same as the Autopilot, KAP unit, King Bendix. Are you running the same Transponder?

 

[OzWookiee]

I cannot get the Transponder to fire up. It shows the off screen. I feel like I have the right $texture but the transponder isnt on. I have the KT76C unit, like the C172 has, and have rechecked all my circuits over and over. If the screen Material is renamed a wrong name, it shows up white. With the present name, the screen shows the same brownish 'off' color of the same as the Autopilot, KAP unit, King Bendix. Are you running the same Transponder?

Same issues as @lionheart in our Goose.

 

[lionheart]

An Edit to the above. In Blender, to make a mini screen or screen 'section' to go to Maximize or full screen, its Control/Space Key, not Alt/Space Key.
Repeat to Minimize back into Blender.

 

[ronh]

I have updated and added some more unofficial SDK info to the MSFS SDK Documentation html pages. Above in post #2

MSFS - Explain js/css/html and xml and gltf/bin and wasm relationships - Unofficial SDK ver 0.13 info

Can someone explain the relationship between all the new file types and how they relate to each other and what they are used for/do in an aircraft project? TLDR: What I am looking for is more information on how the js/css/html/coherent panel.xml and panel.cfg work together, and I've looked at...

www.fsdeveloper.com

 

[ronh]

I cannot get the Transponder to fire up. It shows the off screen. I feel like I have the right $texture but the transponder isnt on. I have the KT76C unit, like the C172 has, and have rechecked all my circuits over and over. If the screen Material is renamed a wrong name, it shows up white. With the present name, the screen shows the same brownish 'off' color of the same as the Autopilot, KAP unit, King Bendix. Are you running the same Transponder?

Try looking at the pitts aircraft, they have the AS330 9 button transponder there. It may help with your 76C. You just have to take away 2 buttons and copy what ASOBO did.

 

[lionheart]

I got the buttons all working. Just need a functioning screen. I am tempted to just flip out the 76C and put in the 330. I should see if the 330 screen will work in it though before doing that.

 

[ronh]

Are you using the ASOBO 76C html/css/js or do you have your own? What is your panel.cfg line for the html? htmlgauge00=Generic/Transponders/KT76C/KT76C.html 0,0,x,y
Are your files (js/html/css) in html_ui/Pages/Vcockpit/Instruments/LHC_Transponder/LHC76C (to keep separate from ASOBO version) for htmlgauge00=LHC_Transponders/LHC76C/KT76C.html 0,0,x,y

And all those layout.json files agree.

edit: AS76C to KC76C

 

[lionheart]

This is mine from my Trinidad.


[VCockpit08]
size_mm = 512,114
pixel_size = 512,114
texture = $Transponder_Screen
htmlgauge00=Generic/Transponders/KT76C/KT76C.html, 0,0,512,114

This links into the Asobo unit.

 

[lionheart]

Oh... I see a descrepancy already... hmm... Off to check that.

 

[ronh]

might be my typo. KT76C is right.

 

[ronh]

Does your blender file look like this. An empty holding all the transponder stuff including the meaterial for the screen? Thuis is the pitts with the AS330