MSFS Question about getting a html gauge into an aircraft.

[Anthony31]

Slowly trying to wrap my head around this system. I figure that if you want to add you own custom html gauges to your own aircraft that you'd set it up like this in the Community folder:

your-aircraft-folder
-Contentinfo
-Marketplacedata
-SimObjects (this has your model and textures and everything else)
-html_ui (this is where your gauge would go buried deep in the folder structure (see asobo-vcockpits-instruments)
-layout.json
-manifest.json

Is my understanding of this arrangement correct? I don't think you put html gauges in the panel folder in SimObjects although that is where you put wasm gauges (see SDK samples/Aircraft/GaugeAircraft). Or would setting things up like asobo-vcockpits-instruments for the individual aircraft be the right way to go? I don't like that method as it would involve dumping two folders into the community folder which isn't going to help with clutter.

I guess you'd have to be very careful with your naming conventions to prevent accidentally overwriting (over-riding?) anyone elses gauges.

 

[Anthony31]

Just going to answer my own question.

I downloaded Kronzky's landing gauge to see what it was made of. http://www.kronzky.info/fs/

Now, this landing gauge over rides the hourmeter as found in the C152. Installing the gauge into the Community folder will replace any instance where hourmeter is called by any aircraft.

The next trick was to figure out how to package up this gauge. I made a new project and copied across the files in the SDK/Samples/aircraft/gaugeAircraft. Then I deleted data and simobjects from the PackageSources folder and copied hmtl_ui from Kronzky's landing gauge into PackageSources. Final step was to edit aircraft-wasm-gauge-sample.xml in the PackageDefinitions as shown:

<AssetPackage Name="mycompany-aircraft-wasm-gauge" Version="0.1.0">
    <ItemSettings>
        <ContentType>CORE</ContentType>
        <Title>Gauge Aircraft</Title>
        <Manufacturer>My Manufacturer</Manufacturer>
        <Creator>My Company</Creator>
        <Description/>
    </ItemSettings>
    <Flags>
        <VisibleInStore>false</VisibleInStore>
        <CanBeReferenced>true</CanBeReferenced>
    </Flags>
    <AssetGroups>
        <AssetGroup Name="MyCompany_Gauge_Aircraft_Data">
            <Type>Copy</Type>
            <AssetDir>PackageSources\html_ui\</AssetDir>
            <OutputDir>html_ui\</OutputDir>
        </AssetGroup>
    </AssetGroups>
</AssetPackage>

The important parts where to change the contenttype to CORE for core files I presume. Then edit the assetgroups deleting the old references (no longer needed) and adding a "Copy" type (I presume this type just straight copies files) and setting the assetdir and outputdir to html_ui so it will be merged correctly in the virtual file system.

Then just drag and drop the GaugeAircraftProject.xml onto the fspackagetool.exe to build the package, put that into Community folder and oingo boingo, it works.

Now, I don't see any reason why I couldn't just add this html_ui assetgroup to my own aircraft project and keeping that htlm_ui file structure in place it should work. Once I've done that all I need to do is create my own gauge with unique names. How hard can that be?

 

[Anthony31]

Nope.

Not working. I cannot create a new HTML gauge at all. Copied the contents of hourmeter into a new folder, gave it a new name and it just won't load.

Folder structure is \html_ui\Pages\VCockpit\Instruments\Generic\Misc\AntsRadio

renamed hourmeter css html and js files to AntsRadio

AntsRadio.css file is simply a copy of hourmeter.css

Made changes to the html as follows:

<link rel="stylesheet" href="AntsRadio.css" />

<script type="text/html" id="HourMeter">
    <div id="Mainframe">
        <div id="d1">0</div>
        <div id="d1Bot" class="bot">1</div>
        <div id="d2">0</div>
        <div id="d2Bot" class="bot">1</div>
        <div id="d3">0</div>
        <div id="d3Bot" class="bot">1</div>
        <div id="d4">0</div>
        <div id="d4Bot" class="bot">1</div>
        <div id="d5">0</div>
        <div id="d5Bot" class="bot">1</div>
        <div id="d6">0</div>
        <div id="d6Bot" class="bot">1</div>
    </div>
</script>

<script type="text/html" import-script="/Pages/VCockpit/Instruments/Generic/Misc/AntsRadio/AntsRadio.js"></script>

Only change made to js file was last line to registerInstrument:

class HourMeter extends BaseInstrument {
    constructor() {
        super();
    }
    get templateID() { return "HourMeter"; }
    connectedCallback() {
        super.connectedCallback();
        this.digits = [];
        this.digitsBot = [];
        for (let i = 1; i <= 6; i++) {
            this.digits.push(this.getChildById("d" + i));
            this.digitsBot.push(this.getChildById("d" + i + "Bot"));
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
    }
    Update() {
        super.Update();
        let hour = SimVar.GetSimVarValue("GENERAL ENG ELAPSED TIME:1", "hour");
        for (let i = this.digits.length - 1; i >= 0; i--) {
            if (hour < 0) {
                hour = 0;
            }
            let power = this.digits.length - i - 2;
            let digit = Math.floor((hour % Math.pow(10, power + 1)) / Math.pow(10, power));
            if (this.digits[i].textContent != digit.toString()) {
                this.digits[i].textContent = digit.toString();
                this.digitsBot[i].textContent = ((digit + 1) % 10).toString();
            }
            if (Math.pow(10, power) * (digit + 1) < (hour % Math.pow(10, power + 1)) + 0.001) {
                this.digits[i].style.transform = "translate(0vh,-" + ((100000 * hour) % 100).toString() + "vh)";
                this.digitsBot[i].style.transform = "translate(0vh,-" + ((100000 * hour) % 100).toString() + "vh)";
            }
            else {
                this.digits[i].style.transform = "";
                this.digitsBot[i].style.transform = "";
            }
            hour -= 0.0001;
        }
    }
}
registerInstrument("hour-meter-element", AntsRadio);
//# sourceMappingURL=HourMeter.js.map

Only one entry in panel.cfg

[Vcockpit01]
size_mm                = 230,45
pixel_size            = 230,45
texture                = $Hourmeter
emissive            = 0
htmlgauge00=Generic/Misc/AntsRadio/AntsRadio.html,                    0,0,230,45

I don't know what more to do. If you can't create a simple gauge in MSFS then what's the point?

 

[Anthony31]

OK, a little bit of success. Just straight up copied hourmeter files into \html_ui\Pages\VCockpit\Instruments\Generic\Misc\AntsRadio. No edits (so the html is still calling hourmeter/hourmeter.js and not the copy in AntsRadio), no name changes. the panel.cfg now looks like this:

[Vcockpit01]
size_mm                = 230,45
pixel_size            = 230,45
texture                = $Hourmeter
emissive            = 0
htmlgauge00=Generic/Misc/AntsRadio/HourMeter.html,                    0,0,230,45

This works. Next step is to change the html to call AntsRadio/hourmeter.js. Then I guess it's one step at a time.

EDIT: Success at changing the html to calling AntsRadio/hourmeter.js. Next step is trying to change some file names I guess.

 

[Anthony31]

OK, I think I've got it working. Whenever I refer to antsradio you may change this to whatever you want to call your own gauge.

Copied html_ui\Pages\VCockpit\Instruments\Generic\Misc\HourMeter into my Package sources maintaining the file structure.

Added this to the xml in package definitions:

        <AssetGroup Name="your-name-goes-here-i-dont-think-it-really-matters">
            <Type>Copy</Type>
            <AssetDir>PackageSources\html_ui\</AssetDir>
            <OutputDir>html_ui\</OutputDir>
        </AssetGroup>

Renamed the HourMeter.html, css and js files to AntsRadio.

For the css you search and replace hour-meter-element with ants-radio-element. I also took the liberty of changing the text colours to make sure I was changing my own gauge and not still working on the default hourmeter somehow.

For the html:
change the stylesheet name to reference AntsRadio.css.
Change script type="text/html" id="HourMeter" to script type="text/html" id="AntsRadio"
Change the js import to <script type="text/html" import-script="/Pages/VCockpit/Instruments/Generic/Misc/AntsRadio/AntsRadio.js"></script>. Remember, this is using the virtual file system so keep your folder format the same unless you really know what you are doing. You will want to make your gauge name very unique otherwise there might be a possibility of your gauge over riding or being over ridden by someone else's gauge.

For the js:
Change the class to: class AntsRadio extends BaseInstrument
Change the templateID to: get templateID() { return "AntsRadio"; }
Change the registerInstrument: registerInstrument("ants-radio-element", AntsRadio); (I assume the class element and this registerInstrument need to be the same name, at the moment I think this is the name of the instrument in the panel.xml, still to be confirmed).
Finally I changed the commented line to sourceMappingURL=AntsRadio.js.map simply because I could (don't think this makes any difference).

TLDR; change any reference to HourMeter to your own gauge name and change any reference to hour-meter-element in the css to your own name as well.

So now I have a copy of the hourmeter gauge in my own aircraft. The next step is to make it do what I want.

 

[ronh]

Can I use some of your examples in my SDK unofficial updates?