Hi. I am trying to load a custom HTML Instrument on the JMB Aircraft VL3’s MFD. I copied the simple instrument listed in another topic: HTML gauges within aircraft package? - #3 by devsnek and tried to load it using the panel.cfg.
I rebuilt the layout.json and tried loading in the aircraft. At the moment, the MFD always loads in as a blank white screen as can be seen in the below screenshot.
This aircraft is a copy of the Asobo VL3 which I put in my Community folder, to avoid changing the files of the original aircraft.
Here is the panel.cfg:
// Panel Configuration File
// VL3
[VCockpit01]
size_mm=1280,800
pixel_size=1280,800
texture=$AS3X_Screen_1
htmlgauge00=NavSystems/AS3X_Touch/AS3X_Touch.html?Index=1, 0,0,1280,800
[VCockpit02]
size_mm=1280,800
pixel_size=1280,800
htmlgauge00=Custom/Custom.html, 0,0,1280,800
[VCockpit03]
size_mm=420,168
pixel_size=420,168
texture=$COM_Screen_1
htmlgauge00=Generic/Radios/AS92/AS92.html, 0,0,420,168
[VCockpit04]
size_mm=420,168
pixel_size=420,168
texture=$Transponder_Screen
htmlgauge00=Generic/Transponders/AS21/AS21.html, 0,0,420,168
[VCockpit05]
size_mm=600,525
pixel_size=600,525
texture=$Prop_Screen
htmlgauge00=Generic/Monitoring/ASPropeller/ASPropeller.html, 0,0,600,525
[Vcockpit06]
size_mm = 230,45
pixel_size = 230,45
texture = $Hourmeter
emissive = 0
htmlgauge00=Generic/Misc/HourMeter/HourMeter.html, 0,0,230,45
[VPainting01]
size_mm = 1024,256
texture = RegistrationNumber
location = exterior
painting00=Registration/Registration.html?font_color=black, 0, 0, 1024, 256
(I did not make any changes to the panel.xml)
As for the actual html, I have a folder named “html_ui” at the same level as the SimObjects folder. Inside it there are folders named “Fonts”, “JS” and “Pages”. The “Fonts” and “JS” folders were copied from the sim’s install files (MicrosoftFlightSimulator/Packages/fs-base-ui/html_ui). As for the “Pages” folder, inside it I have a folder named “VCockpit” with two folders inside that named “Core” and “Instruments”. The “Core” folder was copied from the Official package named “Asobo-vcockpits-core”. In the “Instruments” folder I have a folder named “Generic” from the Official package named “Asobo-vcockpits-instruments-generic”, a folder named “NavSystems” with the files for the “AS3X_Touch” and “Shared” from the Official package named “Asobo-vcockpits-instruments-navsystems” and a folder named “Custom” with my custom instrument inside it.
Here are the files I have inside the “Custom” folder.
Custom.html
<script type="text/html" id="Custom">
<!-- all your html goes inside here -->
<h1>This is a custom instrument.</h1>
</script>
<link rel="stylesheet" href="Custom.css">
<script type="text/html" import-script="Custom.js"></script>
Custom.js
'use strict';
class Custom extends BaseInstrument {
get templateID() { return 'Custom'; }
get isInteractive() { return false; }
get isGlassCockpit() { return true; }
connectedCallback() {
// code here runs when html is mounted
}
// runs every frame
Update() {
super.Update();
if (this.CanUpdate()) {
// code here runs based on the "update frequency" setting in graphics
}
}
// receive H events here
onInteractionEvent(event) {
const eventName = String(event);
// ...
}
}
registerInstrument('custom-element', Custom);
and Custom.css
h1 {
color: rgb(255, 0, 0);
}
Sorry for writing such a long post, but I wanted to write as much detail as possible. If anyone could help me out as to why my MFD panel loads in as a white screen, that would be greatly appreciated.