Any other question that is not specific to an aspect of development or tool can be posted in the General chat forum.
By following these guidelines we make sure that the forums remain easy to read for everybody and also that the right people can find your post to answer it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test SVG</title>
<script src="/JS/coherent.js"></script>
<script src="/JS/common.js"></script>
<style>
body {
background-color: red;
color:black;
font-size:80px
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mauris odio, semper sed lectus eu, consequat tincidunt ante. Suspendisse ornare dictum luctus. Nunc sodales purus sed ipsum varius, quis feugiat libero sollicitudin. Phasellus tincidunt malesuada condimentum. Donec gravida volutpat velit ac congue. Sed dignissim dui diam, cursus pretium lorem efficitur at. Aliquam at vulputate dolor. Morbi finibus elit ut dolor hendrerit, a finibus massa dignissim. Vivamus dignissim quis ipsum vel tincidunt. Phasellus sapien libero, faucibus congue faucibus quis, condimentum sed sapien. Nunc tellus tellus, dictum sit amet venenatis sit amet, ultricies at est. Suspendisse elementum vel nulla ac viverra. Cras scelerisque nunc nec tincidunt rutrum.
</body>
</html>
font-size:80px;
<script type="text/html" id="AS3X_Touch">body stuff... </script>
$flap_display texture, in an "AS-33" aircraft.html_ui/Pages/VCockpit/Instruments/AS-33/flap_indicator/model/AS-33_interior.xml to animate needles etc..js and .css files in the .html any time you change either of those, and in the 'Dev' Aircraft Selector window click load. I.e. see flap_indicator.html below, the relevant lines (with redundant '?br' and '?dp' added to the url's) are:<link rel="stylesheet" href="flap_indicator.css?br" /><script type="text/html" import-script="/Pages/VCockpit/Instruments/AS-33/flap_indicator/flap_indicator.js?dp"></script>document.getElementById("mydiv").innerHTML = "HELLO"; - this is how the example writes e.g. the FLAP INDEX as a text number into the div.document.getElementById("mydiv").style.display='none' (or 'block') - that's the way this example flips the background images..html file that will embed your html inside that element is called flap_indicator_script so you can see where these things link to each other in the example - that's impossible to see when all those things are just called flap_indicator, so having different id's is better for an example (but ultimately not necessary).document.getElementById('mydiv').onclick = (your function) but also you must have a class method "get isInteractive() { return true; } for clicking to be permitted.VCockpit08]
size_mm=256,256
pixel_size=256,256
texture=$flap_display
emissive = 0
htmlgauge00=AS-33/flap_indicator/flap_indicator.html,0,0,256,256<link rel="stylesheet" href="flap_indicator.css?br" />
<script type="text/html" id="flap_indicator_script">
<div id="background_ok"></div>
<div id="background_nok"></div>
<div id="display"></div>
<div id="debug"></div>
</script>
<script type="text/html" import-script="/Pages/VCockpit/Instruments/AS-33/flap_indicator/flap_indicator.js?dp"></script>:root {
--bodyHeightScale: 1; }
@keyframes TemporaryShow {
0%, 100% {
visibility: visible; } }
@keyframes TemporaryHide {
0%, 100% {
visibility: hidden; } }
html {
height: 100%;
width: 100%;
overflow: hidden; }
html body {
-webkit-user-select: none;
font-family: Roboto-Regular;
font-size: calc(var(--viewportHeightRatio) * (36px / 21.6) * var(--currentPageHeight) / 100);
color: white;
height: 100%;
width: 100%;
margin: 0;
padding: 0; }
flap_indicator-element {
background-color: #121212;
height: 100vh;
width: 100vw;
display: inline-block;
overflow: hidden; }
/* Normal LCD background */
#background_ok {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("/Pages/VCockpit/Instruments/AS-33/flap_indicator/background_ok.png");
background-repeat: no-repeat;
/* background-size: cover; */
}
/* Warning LCD background */
#background_nok {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* display: none; */
background-image: url("/Pages/VCockpit/Instruments/AS-33/flap_indicator/background_nok.png");
background-repeat: no-repeat;
/* background-size: cover; */
}
#display {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
font-size: 200px;
text-align: center;
/* vertical-align: middle; */
color: black;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
flap_indicator-element #debug {
position: absolute;
top: 5%;
left: 30%;
width: 30%;
height: 10%;
font-size: 45px;
color: black;
}/*
flap_indicator
*/
class flap_indicator_class extends BaseInstrument {
constructor() {
super();
this._isConnected = false;
}
get templateID() { return "flap_indicator_script"; } // ID of <script> tag in flap_indicator.html
// ********************************************************************
// ********** CONNECTED CALLBACK ******************************
// ********************************************************************
connectedCallback() {
super.connectedCallback();
this._isConnected = true;
}
// ********************************************************************
// ********** DISCONNECTED CALLBACK ***************************
// ********************************************************************
disconnectedCallback() {
super.disconnectedCallback();
}
// ********************************************************************
// ********** GAUGE UPDATE CALLED ON SIM UPDATE CYCLE ************
// ********************************************************************
Update() {
// We read the sim variables into local vars for efficiency if multiple use.
this.ALTITUDE_M = SimVar.GetSimVarValue("A:INDICATED ALTITUDE", "meters");
this.flap_index = SimVar.GetSimVarValue("A:FLAPS HANDLE INDEX","number");
this.spoilers_out = SimVar.GetSimVarValue("A:SPOILERS HANDLE POSITION","percent") > 0;
this.gear_down = SimVar.GetSimVarValue("A:GEAR HANDLE POSITION", "bool") ? true : false;
//DEBUG BALLAST NOT IMPLEMENTED
this.carrying_ballast = false; //get(DATAREF_BALLAST_KG) > 20;
this.time_now_s = SimVar.GetSimVarValue("E:ABSOLUTE TIME","seconds");
this.alt_agl_ft = SimVar.GetSimVarValue("PLANE ALT ABOVE GROUND", "feet");
this.update_flap_indicator();
}
// ********************************************************************
// ********** GAUGE UPDATE CALLED ON SIM UPDATE CYCLE ************
// ********************************************************************
// Runs once on startup
flap_indicator_init() {
if (this.flap_indicator_init_complete == null) {
this.WHEEL_DOWN_ALT_LIMIT_FT = 2000; // warning if gear down above 2000 feet AGL
this.MAX_WARNING_DURATION_S = 5; // only leave warning on indicator for max time
this.warning_time_s = 0.0; // record time of issuing warning
this.warning_gear_up = false;
this.warning_gear_down = false;
this.warning_ballast = false;
this.background_nok_el = this.getChildById("background_nok");
this.display_el = this.getChildById("display");
this.display_el.innerHTML = "AB";
this.flap_indicator_init_complete = true; // prevent further runs
}
}
update_flap_indicator() {
this.flap_indicator_init();
// SPOILERS / GEAR UP WARNING
if (this.spoilers_out && ! this.gear_down) {
if (! this.warning_gear_up) {
this.background_nok_el.style.display = 'block';
this.display_el.style.fontSize = '50px';
this.display_el.innerHTML = 'SPOILERS<br/>GEAR UP';
this.warning_time_s = this.time_now_s;
}
this.this.warning_gear_up = true;
} else {
this.warning_gear_up = false;
}
// AT HEIGHT / GEAR DOWN WARNING
if (this.gear_down && (this.alt_agl_ft > this.WHEEL_DOWN_ALT_LIMIT_FT)) {
if (! this.warning_gear_down) {
this.background_nok_el.style.display = 'block';
this.display_el.style.fontSize = '70px';
this.display_el.innerHTML = 'GEAR<br/>DOWN';
this.warning_time_s = this.time_now_s;
}
this.warning_gear_down = true;
} else {
this.warning_gear_down = false;
}
let on_ground = this.alt_agl_ft < 10;
// SPOILERS / BALLAST WARNING
if (! on_ground && (this.spoilers_out || this.gear_down) && this.carrying_ballast) {
if (! this.warning_ballast) {
this.background_nok_el.style.display = 'block';
this.display_el['font-size'] = '40px';
this.display_el.innerHTML = 'SPOILERS<br/>BALLAST';
this.warning_time_s = this.time_now_s;
}
this.warning_ballast = true;
} else {
this.warning_ballast = false;
}
let warning_expired = this.time_now_s > (this.warning_time_s + this.MAX_WARNING_DURATION_S);
let no_warning = ! this.warning_gear_down && ! this.warning_gear_up && ! this.warning_ballast;
if (no_warning || warning_expired) {
// All seems fine, so set flap_indicator to flaprqst
let display_text = '-';
let font_size = '200px';
switch (this.flap_index) {
case 0:
case 1:
case 2:
display_text = ''+(this.flap_index+1);
break;
case 3:
display_text = '4A';
font_size = '180px';
break;
case 4:
display_text = 'T1';
font_size = '180px';
break;
case 5:
display_text = 'T2';
font_size = '180px';
break;
case 6:
display_text = 'Land';
font_size = '100px';
break;
default:
break;
}
this.background_nok_el.style.display = 'none';
this.display_el.style.fontSize = font_size;
this.display_el.innerHTML = display_text;
}
}
}
registerInstrument("flap_indicator-element", flap_indicator_class);
// ********************************************************************
// ********** GAUGE UPDATE CALLED ON SIM UPDATE CYCLE ************
// ********************************************************************
Update() {
this.lx_adi_init();
// We read the sim variables into local vars for efficiency if multiple use.
this.TIME_S = SimVar.GetSimVarValue("E:ABSOLUTE TIME", "seconds");
this.AIRSPEED_MS = SimVar.GetSimVarValue("A:AIRSPEED INDICATED", "meters per second");
this.ALTITUDE_M = SimVar.GetSimVarValue("A:INDICATED ALTITUDE", "meters");
this.SPOILERS_HANDLE_POSITION = SimVar.GetSimVarValue("A:SPOILERS HANDLE POSITION", "percent");
let x=0;
try {
x=1;this.update_needle();
x=2;this.update_top_number();
x=3;this.update_altitude();
x=4;this.update_spoilers();
} catch (e) {
document.getElementById("lx_adi_debug").innerHTML = "Ex."+x;
}
}lx_adi_debug div defined last in the .html file, it is normally empty but will be displayed above all the others:<link rel="stylesheet" href="lx_adi.css?cj" />
<script type="text/html" id="lx_adi_script">
<div id="lx_adi">
<div id="lx_adi_numbers">
<div id="lx_adi_10000s"></div>
<div id="lx_adi_1000s"></div>
<div id="lx_adi_100s"></div>
<div id="lx_adi_10s"></div>
</div>
<div id="lx_adi_front_plate"></div>
<div id="lx_adi_alt_feet"></div>
<div id="lx_adi_airspeed_knots"></div>
<div id="lx_adi_top_number"></div>
<div id="lx_adi_pressure">1013</div>
<div id="lx_adi_spoilers_green"></div>
<div id="lx_adi_spoilers_red"></div>
<div id="lx_adi_debug"></div>
</div>
</script>
<script type="text/html" import-script="/Pages/VCockpit/Instruments/AS-33/lx_adi/lx_adi.js?ct"></script>lx_adi_debug CSS is defined:/* ***************************************** */
/* lx_adi_debug */
/* ***************************************** */
#lx_adi_debug {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
color: red;
font-size: 32px;
background: transparent;
}
Hi Dolbex,
yeah I totally agree - HTML/JS is inherently close to supporting that dev approach but there's a fundamental API disconnect - there are two main ways a HTML/JS gauge interacts with the aircraft: SimVar.GetSimVarValue and SimVar.SetSimVarValue (Asobo missed the memo calling it "get" and "set") and the ability to call a JS callback on custom events - it would need a general purpose 'bridging' gauge planted in the aircraft that could redirect events and SimVar requests to/from a 'shim' "SimVar" module used in the browser version. It's inherently doable so I'm optimistic some worthy person will get around to doing it - at the moment many of us are flat out developing gauges and the pause required to improve the workflow in that way hasn't been available.Yeah, one of the things I could not figure out was how to develop HTML/JS gauges OUTSIDE of the simulator (and maybe you can't). For me the best workflow would be to develop 90% of it outside the sim and then fire it up when you're doing final testing and such but I never got that far - not for a lack of trying
That's a great idea - however, I'd hate to develop something with their updates right around the corner (seems like the next couple months have a lot of SDK work coming out).
Done - I didn't notice that before - thanks for the heads up!
console.log() statements write to the embedded console.?<random> after the URL) in the gauges HTML to get an 'Aircraft Select' to reload fresh code.model/model.xml and that's what get's shipped with the finished product).layout.json) so I can drag-and-drop layout.json onto it any time I want to update the VFS. This works like a charm. However, an aircraft 'reload' or 'resync' (see below) are not enough to re-sync the virtual file system in-game, so more reliably I will quit the game and reload if I've created new files - for the bulk of my gauge development this isn't happening very often, i.e. my soaring gauges tend to take a long time to program but the graphics / animations tend to stabilize relatively early on in the development & after that I might improve the graphics but as often as not that doesn't involve additional files.pretty-json a LOT to look at the model/*.gltf file to confirm the animations etc that I'm programming are in there as expected - this is particularly important when you initially create the 'stub' gauge (i.e. before you've done much of the programming) as a variety of mistakes at that stage can mean the gauge simply doesn't load or work AT ALL and you need to check whether the glitch is in the panel.cfg, the HTML/JS, the model.xml or the model.gltf.model.xml, then I hard reload the whole aircraft with MSFS / Developer Toolbar / Tools / Project Editor / Create New (always the same project name "foo") / Cancel the next 'type of project' window / Close the Project Editor. At this point the MSFS / Developer Toolbar / Tools menu is fully active to include "Aircraft Editor"
So THAT's where it is! See, I've come to the insight that MSFS use CoherentGT and that there's a debugger but I couldn't find it. Was looking in every direction except within the MSFS SDK itself, lol!
Starting to realize that's how people do. It bothers me though, being a dev myself I tend to wanna organize workflows to be effective. Or, preferably, get the workflow ready made.
That's my thoughts too. It's tempting to go all in with some framework or tooling just to take shortcuts. This is, in my opinion, the wrong reason to do so. It's better to choose to use one if you feel that there's a need for it. Ie it provides functionality you lack with current setup. Then you can argue for opting in on a particular framework or tool. If it solves the problem you want to solve that is. Better to go from ground up - if you can. Less things can go wrong and you learn the basics on the way.
TemplateElementBaseInstrument