plane icon Welcome to Microsoft Flight Simulator’s SDK Q&A Platform!

You have questions regarding the SDK? DevMode Tools? SimConnect? You would like to submit an idea for future improvements, seek help or exchange knowledge? You’re in the right place.


Please take a moment to read the platform’s guidelines before you get started!


question

Simbol avatar image
Simbol asked mattnischan commented

How to build your own HTML Gauges documentation

Hello,

Are we going to get any documentation or tutorials about how to build custom HTML panel gauges? currently the only way forward is to try to reverse engineer Asobo default panels.. which is incredibly super time consuming...

In addition, how are we supposed to debug any custom HTML panel while on development? I tried doing a simple gauge and:

  1. Had to reload the aircraft every-time I changed the code (HTML or JS) to see if it worked.

  2. The build package console doesn't show any usefull information if you have a issue inside the JS code.

  3. I had no way to debug correctly (variables, errors or anything) besides putting a string on the gauge $texture to see to which line I was running.

The issues above slows down development times massively.. and also increases development costs obviusly.. So it makes me wonder how is it Asobo managed to build such complicated gauges as the G1000 with the current tools available via the SDK..


Thanks in advance,
Simbol


defaultdocumentationhtmlsamples
10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

8 Answers

·
FlyingRaccoon avatar image
FlyingRaccoon answered mattnischan commented

Hello Simbol,

The documentation about HTML gauges is our top priority. I can't tell when it's fully available but you will definitely have something to start with in the next few months.

Regards,
Sylvain

6 comments
10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Simbol avatar image Simbol commented ·
Hi Sylvian,


Many thanks for coming back on this. Can I please suggest you guys document how Asobo developers are managing to achieve such complex gauges? Although I appreciate Matt (Working title) input as he knows a lot about this area, I find it very difficult to believe Asobo is not taking much more advantage of coherent UI in order to minimise cost and developing time.

So ideally I would like to see a workflow sample used by Asobo, if I have to buy a license of coherent UI, then so be it., as you must appreciate workflow and dev speed is extremely important for DLC content providers.

Simbol

0 Likes 0 ·
mattnischan avatar image mattnischan Simbol commented ·
Hi Simbol,


As I mentioned before, neither Asobo nor we have any alternative workflow to provide. Both the Asobo and Working Title HTML/JS projects are built using a standard gulp workflow to do Typescript and SCSS compilation and then copy to the destination. There is no connection between the IDE and the sim or Coherent, nor is there any GUI based editor in use with either team.

Indeed all that you see in the sim was hand-coded. We can certainly provide some sample gulp scripts, but those will only be of use if you have compile steps, which not all projects will.

-Matt | Working Title

0 Likes 0 ·
Simbol avatar image Simbol mattnischan commented ·

Hi Matt,


Well at least there is a workflow.. this is the first time you mention gulp.. this is the entire problem.. we have no idea how to do anything. hence my suggestion to Sylvian to push the documentation with an example of a workflow used by Asobo to built complex gauges.

Maybe a new workflow can be implemented? Microsoft gets better benefits if 3rd party DLC content providers can built really complex gauges in a shorter period of time. Failing to do so, result is what we see lately, 777 using 747 panels, E175 using Garmin gauges, etc.

We need help, better tools / ways to work.

2 Likes 2 ·
Show more comments
virtuali avatar image
virtuali answered

Hi Simbol,

I hope you already voted the Idea I posted here:

https://devsupport.flightsimulator.com/idea/584/add-jshtml-documentation-to-the-sdk.html

Voting is surely the best way for the issue to get traction.


About debugging, have a look at the CoherentGT Debugger found in the Tools folder or the SDK. It's easy enough to use and, for more documentation, you can check the Safari debugger documentation on Apple site, since the debugger is based on Webkit, which powers Safari too:

https://support.apple.com/guide/safari-developer/debugging-overview-devd24689f72/mac

Yes, you can trigger a reload of an Html/JS gauge while the airplane is running, place breakpoints, inspect variables, inspect the DOM, etc.

But while this is a big help for debugging your code, I think it's not a replacement for a proper HTML/JS/Coherent documentation, which I think right now is the biggest missing feature in the SDK.

10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Simbol avatar image
Simbol answered

Hi Umberto,

Thanks for the tips about debugging.. I will have a look to see if this helps.. and I voted your proposal for documentation.. I think this is really need it.. specially when you want to develop custom panels to replicate real world behaviours, etc.

Regards,
Raul

10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

N6722C avatar image
N6722C answered N6722C rolled back

Its the standard Coherent Debugger, so is fully documented by Coherent - and it looks likek most of that documentation is freely available from the Coherent website.

https://coherent-labs.com/Documentation/cpp-gt/dd/d68/debugging.html

Currently, it looks like the UI is a little "messed up" with some text overwriting other text and the click spots being a little out in places, but it is quite usable.



10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Simbol avatar image
Simbol answered

Thank you both.. so the only question that remains is about the internal MSFS HTML panel gauge documentation so we get a better understanding about how it works.

Regards,
R.

10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Simbol avatar image
Simbol answered mattnischan edited

Ok I used the Coherent Debugger, it helps to see what is going on to a certain extend but several issues remain.

For example, I updated JavaScript modules and these would not reload unless an "aircraft resync" was issued from inside MSFS.. so the process / workflow to develop custom HMTL gauges is still extremely slow.

Clearly Asobo is using Coherent to develop their panels, which by the looks on the Coherent website looks great and really easy to use..

But the question is how 3rd party devs can achieve the same results? currently we are unable to use Coherent GUI interfaces do custom panels.. all we have is a debugger, we end up having to use just standard HMTL + JavaScript editors, force to resync airplane everytime we change a JS so the debugger really loads the change to the library / code and inspecting Asobo current instruments to reverse engineer wherever we can.. this is far from optimal.

Surely I must be doing something wrong right? it can't be this hard..

Regards,
S.


5 comments
10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

mattnischan avatar image mattnischan commented ·
Asobo actually doesn't use a GUI to develop the panels, they also use a standard IDE (in this case Visual Studio). We here at Working Title use VS Code for all our development. The Coherent GUI is not really a WYSIWYG thing so much, and in any case developing a panel that way would be unlikely to deliver adequate performance.


You should be able to refresh your panel after updating your code from the Coherent debugger. Just click on the reload button in the upper left area underneath the address bar. You can also force it to ignore the JS cache by refreshing with Ctrl + Shift + R.

0 Likes 0 ·
Simbol avatar image Simbol mattnischan commented ·

Hi Matt,

Thanks,I clicked the refresh of course, the html part got reloaded but the JS never does.. unless I force an aircraft reload. I will try the Ctrl + Shit + R and see..

Would it be posible to have a sample project or documentation regarding how set for VS to work / created custom HTML panels with instructions of how to link this to MSFS the way you and Asobo do it then?

As you must appreciate we are really working in the dark here.. causing s lot of mistakes and bad workflows that will inevitable not only increase developing time and cost but also reduce the quality of products delivered.

0 Likes 0 ·
mattnischan avatar image mattnischan Simbol commented ·

There isn't a link to MSFS in the way I think you're thinking of it. VS and VS Code don't directly talk to the sim at all. With JS and HTML, there isn't anything to build, so the projects are just bare folders. The process is really just to copy the JS and HTML to the output, and then reload in the debugger.

Was there something else you meant when you were referring to a VS and/or VS Code project?

0 Likes 0 ·
Show more comments
SimHorizon avatar image
SimHorizon answered Simbol commented

Coherent only works with Safari version 11 or higher?

This thread is confusing, it seems Raul is having a conversation with someone who's elected to not be public in a public forum? Not very useful helpful to anyone else that might be interested in this aspect of development for MSFS.

Cheers, Rob.

1 comment
10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Simbol avatar image Simbol commented ·
Hi Rob,


Yes Mat from working title has been responding to me, I was not aware they were not public.. odd!

Some of my post are going to moderation for some weird configuration as well. That could be also the cause for some comments not being linear, etc.

R.

0 Likes 0 ·
mattnischan avatar image
mattnischan answered

@SimHorizon,

Are you not able to see my comments to @Simbol below?

-Matt | Working Title

10 |10000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 5 attachments (including images) can be used with a maximum of 19.1 MiB each and 23.8 MiB total.