Has anyone gone through the HTML/JS/CSS instrument tutorials and find them poorly structured? I’m interested in creating new instruments on a per-aircraft basis so I’m following the Creating an instrument path.
As I go through it though I’m noticing inconsistent screenshots and instructions that seem to imply I’ve already created project files and instrument names from following the ‘Replacing an instrument’ tutorial, which I never went rhough.
Has anyone followed the Create an instrument tutorial from start to finish and ended up with something that actually works? The first problem I see is that when changing the OutputDir to the html_ui folder path variant and building the package, I should see the html, js and css source files I’ve created in the package folder but that folder has no html_ui directory created at all.
Poorly structured tutorials are no help to anyone and it’s little wonder the few guides I see online covering html instrument creation, they all seem to be setting things up by hand and creating folder structures manually.
I am struggling with the same thing. There are a few github examples, but they don’t include proper project structure and/or have compile command files that produce errors.
Agreed. I just wish the quality of the MSFS SDK tutorials on HTML instruments matched the quality of tutorials I see in the Avionics Framework docs, which I would guess was written by someone on the Working Title team. Sadly, the Avionics Framework docs simply refer you to SDK documentation for wiring things up to aircraft config files. There just needs to be a concerted effort to create a crystal clear, “Hello World” type tutorial for creating and replacing HTML instruments that are standalone and read from start to finish in a linear manner, unlike the current tutorials which have links interleaved in each tutorial that point to different instructions depending on whether you are following the create a new instrument path or replacing an instrument one. That way you avoid having inconsistent screenshots that do not match what you see in your editor as you follow the steps.
IF it helps - I am hobbling along using this. It is not a SDK project, but a compiled SPB package. I am using it as a starting point to see how things are put together, and I’ll probably dissect it and morph it into something I need.
Again, it is not a SDK project, however - HTML and JS files can be modified without SPB compilation and results tested on a mounted package (which I placed in the “Community” folder). HTML files can be modified in real time, while the sim is running, and if you modify JS, you will need to restart the sim (unless there is a way to avoid sim restart… anyone?). Clunky, but until someone figures out a sure fire way of a project structure with all the proper html_ui and InGamePanels pathways, this will have to do.
Also, here is what I thought was promising, a complete SDK project, and as the description says “All the files needed to create an MSFS Custom In Game Panel”… however, all the source files (HTML/JS/CSS) are missing and I have no idea where to put them.
I while ago I asked why was the old SimConnect menu functionality deprecated, and Asobo answered that there is now a much more elegant way of doing the in-sim user interface. Yeah… “elegant way” without any documentation, tutorials or help what-so-ever. It is coming up to 4 years, people. Please FIX this.
Hey, that’s pretty good, thanks for this! My main intent and hope is to have a SPB project that can be loaded and edited live in the in-game project editor, just like any other project (scenery, SimConnect, etc.)
So, with that in mind, I loaded it in the project editor, and it looks like everything is set up properly. The “Build Package” option was disabled, but that was fixed by specifying project “content-type” as MISC. Building this project results in a package that, when placed into “Community” folder, shows up properly (although the toolbar icon is empty/blank).
However - and that’s the main wrinkle - unlike other project types, this type apparently can’t be dynamically loaded with changes visible real time… and that’s unfortunate. Any change you make will require a sim restart for it to take effect. I am not sure if I am missing a step anywhere, but I really hoped this would be possible, it would make development SO much easier…
Step 1 is to get content loaded into the VFS. A dev project with a “copy” type is all that is needed to get your content from PackageSources into Packages. You don’t need to do the Community route there.
The SPB part I understand less, but I believe that really doesn’t need much modification once you get set up as it is kind of like configuration.
For the panel itself, you are likely able to reload by using the Coherent debugger. That would clear the cache and pick up your changed html/css/js files again from Packages. I say likely because this works for instruments but there’s a chance there is a second issue for InGamePanels.
So it should be like this:
Reloading html/js/css files - able to be done without a sim restart or package rebuild (this would be your main iterative dev workflow on the panel content and logic). Use the Coherent debugger for this step.
Picking up new/different html/js/css files - able to be done with an SDK rebuild
Changes to SPB - maybe this does require a sim restart
If you use a packing tool, you’d rebuild your bundle, copy it into PackageSources and Packages, and then reload in the Coherent debugger. If you aren’t using a packaging tool, just be careful not to lose your source code when copying directly to Packages, as that’ll be overwritten by PackageSources content on the next SDK rebuild.
The problem I have is, the notepad panel is not showing up in the “custom toolbar” area when I load the project in the project editor. I can build it, but it is not showing up available to be open. If I place the contents of “Packages” (basically, what was built through the project editor, “diagonalization-panel-notepad”) it into “Community” folder and restart the sim, it shows up no problem and is working fine.
So, when the project is loaded in Project Editor, notepad is not available:
But when I restart with the notepad package in the “Community” folder, it becomes visible and it works normally:
The project IS mounted in VFS, at least, under “mount points”. I can also see it mounted under “Packages” with “Edition | Overridable” flags.
So then - how do I have this custom in game panel show up while the sim is running and I have it open in the project editor? Or is that possible at all?
But it doesn’t load in MSFS unless you change the PackageDefinnitions file to <ContentType>MISC</ContentType>. The Build button is grayed out, I assume because over the past few years the type checking became more strict.
After that (make sure the project isn’t loaded while you edit the file, because the project editor will save it multiple times including when you Close a project without changes) I was able to Build within the sim, and then start a flight, and the notepad is on the toolbar. I do see notepad on the overflow (and with a blank icon on the main toolbar).
It sounds like you did the same, so, I’m not really sure why it doesn’t show up?
Ok - getting a bit further ahead. I did have MISC as the content type (it wouldn’t let me rebuild without it) and I also have “Copy” type for html-ui and “SPB” for diagonalization-panel-notepad.
I didn’t try reloading the flight before - now the panel is showing up. I can also edit the HTML content and see the changes, but for JS, I still have to restart the sim. I tried everything, restarting the flight, re-selecting the flight, selecting some other flight… the JS changes just weren’t reflected, until I restarted the sim.
Open the project (and build your package if needed)
Load a flight
Open Notepad by clicking on the toolbar. the panel is visible now.
Now open Coherent debugger. Select “Notepad”, probably at the bottom of the list.
Now edit \Packages\diagonalization-panel-notepad\html_ui\InGamePanels\CustomPanel\CustomPanel.js. Add console.log("hello world"); to the top of the file. Save the file.
Press Ctrl+Shift+R to reload page. (There is a reload arrow in the upper left, but it doesn’t ignore the cache, it also shows the two hotkeys)
Now the context reloads and you’ll see hello world printed in the debug log.
I tried all your steps, but the thing is so fidgety, I just can’t get it to work. The Notepad is on the toolbar, I see it, but Coherent is just not picking it up. I saw it once at the bottom of the list, picked it up, but the changes didn’t show. I have another custom dialog there - it is built and in “community” folder (so loaded all the time) and working, but Coherent isn’t seeing it either. Very frustrating.
I am on 1.36.2.0 (official build), I guess you must be on a Beta or Dev build…
You need to open the Notepad once, and then Coherent debugger will list it in the list. When the notepad is just an icon on the toolbar, it isn’t open and there won’t be a context available in the debugger. Note also that, the toolbar panel destroys itself when it closes, so that will remove it from the list. Also the coherent debugger “GO” button is what refreshes the list, and it isn’t automatic… so if you opened Notepad in the sim but forgot to hit GO (or re-open the debugger) then it wouldn’t show the context in the list.
I’m on SU15 beta but I suspect the behaviors are identical. Hopefully my comments above help.
Aha - ok! I think I have it! It works first time around, but for iterative process, I have to close the panel, rebuild it, and reload in Coherent… or at least that’s what it seems like. Ok, great, I can work with that! Thanks so much!
Now, another quick q: Would you know where I could find all the UI classes, unmodified and plain (whatever MS uses), that are used for in-game UI? Stuff like
But I looked and they are not. I want to know what UI components I have at my disposal to build a custom in-game interface (not a gauge or an instrument) with which I will be sending data using LVars.
You can see all CSS stuff if you open the debugger and target the UI element. You can do that with that target/pointer icon on the top bar of the debugger. Click that so its highlighted, then target an UI element. YOu should see its getting outlined.
Then click it and the element is selected.
Now you can open the CSS section righthand side and find all styles.
The debugger is in the SDK folder somehwere.
MSFS SDK\Tools\CoherentGT Debugger
It works comparable to Chrome or Firefox Devtools. You can also see the whole html code etc.
