Custom HTML instruments aren't refreshing

User Support Hub SDK
1

Hello everyone, I’ve created some custom avionics in HTML/CSS/JS using official tutorial. I can display values of SimVars, but they don’t refresh when value of SimVars change. Only way I can refresh the instruments, is to force-reload them using Coherent Debugger, but it refreshes everything just once. Is there any function or something like that I should place in my instrument’s .js file to refresh the values reguralry (every simulator’s frame or something like that)?

Here are my files:

image
image3918×1330 930 KB

image
image3824×1888 978 KB

image
image3998×1848 1.08 MB

image
image4019×2204 962 KB

2

You can use the Update method to get the simvar value and set your element text. It would be useful for you to look at the BaseInstrument class definition to see all the available methods that are inherited in your instrument class. asobo-vcockpits-instruments\html_ui\Pages\VCockpit\Instruments\Shared\BaseInstrument.js

Here’s an outline for a more organized way to set up your instrument elements. Define a var to be the reference to the element. In connectedCallback, create the element and assign to your var. In Update, use diffAndSetText which is a utility method that will only update the element when the simvar value is different than the last value.

Just try to look at some of the Asobo instruments to get an idea of how all the pieces work.

constructor() {
    super();
    this.windDirection;
}

connectedCallback() {
        super.connectedCallback();
        const elem = document.createElement('div');
        elem.id = 'elem';
        this.windDirection = elem;
        divElement.appendChild(elem);
}

Update() {
    super.Update();
    diffAndSetText(this.windDirection, SimVar.GetSimVarValue('AMBIENT WIND DIRECTION', 'degrees'));
}
2 Likes
3

Thank you very much for your response, it’s awesome. I have some more questions about creating instruments:

  1. How should I add a table using js
  2. How can I make the elements on screen clickable (simple html buttons didn’t work to me, maybe I’m doing something wrong)
  3. How can I make my instrument react to some 3d model physical buttons (like that twelve buttons below Garmin G1000 PFD)
  4. How can I make clock-like indicators similar to this showing RPM on G1000

Thanks in advance for your answers

4
  1. Make your table in the template file (the HTML file). If you assign ids there, you can get the references inside the JS connectedCallback.
  2. I forget how to make the screen elements clickable. If I can find this, I’ll let you know.
  3. For physical buttons, use the onInteractionEvent method in the JS file. The model behavior code will send an ‘H’ variable event where the var name is the first arg.
onInteractionEvent(_args) {
    if (this.isElectricityAvailable()) {
        if (_args[0] == "My_MFD_Button_01") {
            // do something here
        }
    }
}

			<Component ID="MFD_Button_01" Node="MFD_Button_01">
	 			<UseTemplate Name="ASOBO_GT_Push_Button">
	 				<TOOLTIPID>Mode</TOOLTIPID>
					<LEFT_SINGLE_CODE>1 (&gt;H:My_MFD_Button_01)</LEFT_SINGLE_CODE>
					<ANIM_NAME>MFD_Button_01</ANIM_NAME>
				</UseTemplate>
			</Component>
  1. The AS1000 uses many custom components including the circular gauges. You see how that instrument imports several other scripts that contain these elements.

You can basically make nearly anything that can be made with normal HTML and Javascript. Asobo uses more advanced components that are intended to be shared across many instruments. You can either try to follow their patterns or come up with your own way.

2 Likes
5

One more question about 1. Where should I place this HTML file, how should I link it and how should it look like (some example would be really helpfull :slight_smile: )

6

You have a helloworld.html in your screenshot. The Mainframe is the root element of your instrument. Anything inside the Electricity div is what should appear on screen. You can add any HTML inside there.

This is not a normal HTML file that can be opened in a browser. It’s a template that gets processed by the VCockpit system.

For examples, look at the simpler instruments Asobo has in the official packages.

2 Likes
7

Some interesting related reference :

1 Like
8

And what about different pages in instruments, how should they be created? Do I need to make separate html files for each page and link them somewhere or there is another way to do that?

9

You wouldn’t do multiple pages as separate HTML templates. Just create some div containers for each page and show/hide as needed. Think of it more like a single page web application.

1 Like
10

Ok, I didn’t think that solution can be so easy :wink: