Toolbar Panels Development Workflow?

[MSFS 2020] Questions & Community Discussions
1

I am trying to create a custom in-game toolbar panel, and the lack of
documentation makes it difficult to get started. I am new to MSFS development,
so any help would be greatly appreciated. Here’s what I’ve been able to do so
far: I’ve downloaded maximus’ template, available
here, and I
can get the template to load in the sim by adding it to the community folder.
I was also able to add an

tag in the HTML file as a test without rebuilding or opening the project in

the project editor. What I need help with: How do I set up my
development environment, and what is the typical workflow for creating a
toolbar panel? I can open the template in the project editor, but I do not
understand the workflow from there. The SDK documentation mentions that
building the project “will also temporarily add the package to the
simulation.” However, opening the project and building it (without editing
anything) doesn’t seem to do anything, whether I build from the main menu or
in-game. From other posts I’ve read, it seems that others can edit, build, and
test the project without having to restart the sim. How can I do that? Thank
you

2

I have the coherent debugger open while developing - it’s helpful in finding
code bugs, but it also has a module reload option.

3

I was able to get a workflow going using the following template by
diagonalization-lab instead: <https://github.com/diagonalization-lab/msfs-
panel-notepad> For anyone else who needs help with this:

  • Load the above template in the project editor while in the main menu.
    • Choose the “package.xml” in the root folder of the project when opening.
  • Open the project inspector.
    • Click on the package name in the project editor to have the correct inspector window.
  • Under “Item Settings” in the inspector, assign a Content-Type.
  • Build All.
    • The custom toolbar panel should now appear in the sim when loading a flight.
  • You can now make changes to the appropriate files in the PackageSources directory.
    • HTML, CSS, and JS files are found in “PackageSources\html_ui\InGamePanels\CustomPanel”
  • For any changes to take effect, the project has to be built again from the main menu.
4

Little tip on this… You can replace files in the compiled package and
Ctrl+Shift+R in the Coherent Debugger to reload the page (and flush cache).
Makes it a lot more efficient.

5

Hello, is anybody having the problem the Coherent Debugger sometimes showing
just a blank page ?

6

I had the same problem today, I’m not sure how to fix it.

7

Did anybody manage to get your own icon visible in the menu bar? Everything
else I manage, but that is the missing piece :slight_smile: For now, I have put the icon
svg in the PackageSources\html_ui\icons folder, but it is not loading the svg
after building the package. EDIT: OK, fixed it. Found the reference in the xml
in the InGamePanel PackageSource folder…

8

I’m also new to MSFS development. I’ve got the msfs-panel-notepad project from github downloaded, ran the build.bat and got the project uploaded to the Community folder. It works fine, although the SVG icon is not shown. The toolbar icon is blank.

I haven’t found instructions on how to open a dev environment on this or what the different files in the project directory are for and how thay are created. Some of them are clearly not human made, so I guess i have to “build” this somewhere.

I would guess that the dev environment in MSFS is one part of this and the “Coherent debugger” mentioned here is another. But how it all connects I haven’t figured out…

9

Here’s something that could be useful for you!

parallel42/msfs-toolbar-interop (github.com)

1 Like
10

Thanks. Interesting stuff and might be useful in a project of mine. Although it doesn’t answer how the dev environment works or is setup.

11
  1. Load the project in the sim (.xml file)
  2. Build it
  3. Load/Reload the flight to refresh the toolbar with the new icon
  4. Open your in-game panel from the toolbar
  5. Open the Coherent Debugger from the SDK (“C:\MSFS SDK\Tools\CoherentGT Debugger\Debugger.exe”)
  6. Select your panel from the list
  7. Start Debugging.

A tip to speed up the dev process:
You can hot-swap files in the Packages folder and reload them in-sim via Coherent (Ctrl+Shift+R) without having to rebuild the project. Be careful, building the project will override the content of your Packages folder so your source files should always really be in PackageSources. It can be useful to have a script on your computer copying files over from PackageSources to Packages with a single click (maybe a .bat file in a simple case).

In the example I provided, you can search for TODO and see pointers to the places you should customize for your project.

2 Likes
12

hi, did anyone figure out a documentation on how to add just a simple button which will then perform some action? Just simple code, i have tried everything and MSFS is refusing to execute it no matter what i try