White screen when swapping HTML instruments

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.

Don’t be sorry, there’s no way anyone could help if you didn’t explain all the details like that.

I didn’t read everything in detail, but, from what I did read, did you rename directories? If you have the same paths to files as is in the core files and so on, you’ll likely end up with VFS conflicts, similar to the mycompany\modellib.bgl error so many developers make.

If you just copied the core files to your community directory, you’ve very likely created conflicts.

Perhaps start with studying packages and linking through the VFS to various packages to avoid this, similar to how liveries work and reference back to the rest of the textures that haven’t been modified through the texture.cfg file, or use an include directive to other xml files, things like that.