P3D Javascript Interface & HTML5

[Homer]

Hi, does anyone know where I can find more info on building panels and addons for P3D v5.1 using HTML5 and Javascript Interface? The SDK documentation is very scarce, maybe because it's a new feature. And google doesn't give any meaningful results.
Using the info provided in the SDK docs, i can't get to work even the simpliest example, like "var alt = VarGet("Indicated Altitude", "feet");" doesn't return any results. I would be thankful for any info or suggestions for where to look for one.

[gaab]

I second this question !

Any clue will be welcome !

Gérard

[gaab]

Using the info provided in the SDK docs, i can't get to work even the simpliest example, like "var alt = VarGet("Indicated Altitude", "feet");" doesn't return any results. I would be thankful for any info or suggestions for where to look for one.

I found the hard way that the example is wrong. You need to specify the variable type !

var alt = VarGet("A:Indicated Altitude", "feet");
var myloc = VarGet("L:mylocVar", "bool");

Still wondering how to set local vars.

Even if (L:mylocVar,bool) is non 0 in XML gauge, VarSet("L:mylocVar", 3); will give back 0 when VarGet("L:mylocVar", "bool");


Gérard

[Homer]

You need to specify the variable type

Seems like they are using TypeScript behind the scenes. Thanks for the clues!

[Beau Hollis]

The type conversion might be more restrictive for JavaScript. Under the hood, L-vars are all stored a doubles. I'd suggest trying a numeric type.

[gaab]

The type conversion might be more restrictive for JavaScript. Under the hood, L-vars are all stored a doubles. I'd suggest trying a numeric type.

I tested a very simple script

Code: Select all

	var visual = VarGet("L:YokePilot" ,"number");
	if (visual != 0) { 
		document.getElementById('yoke').innerHTML = 'Hidden';
	}
	else {
		document.getElementById('yoke').innerHTML = 'Visible';		
	}		

The YokePilot is changed in an XML gauge, and I get the result expected.

Next step is to setup that variable

Code: Select all

	function changeVisible(newColor) 
	{		
	        if (newColor == 'red') { 
	        	VarSet("L:YokePilot", "0"); 
 			document.getElementById('yoke').style.color = newColor; 
 		}
	         if (newColor == 'blue') { 
	         	VarSet("L:YokePilot", "1");
 			document.getElementById('yoke').style.color = newColor; 
	          }
			  
	}	

In order to insure that the code is working, the display is set inside the color test...
Which is shown as expected.

As soon as we VarSet("L:YokePilot", any value), L:YokePilot is reset to zero (XML and Varget).

Nota : I tried a lot of VarSet variations
- VarSet("L:YokePilot", "1")
- VarSet("L:YokePilot", '1')
- VarSet("L:YokePilot", 1)
- VarSet("L:YokePilot", "number", "1")
I can say that something happens, as L:YokePilot is reset to zero...

Any other suggestion ?

Gérard

[federico.sucari]

I also want to understand how VarSet works. If it works?

VarSet needs to be functional and appreciate any insights on this.

If not, is there any way to communicate HTML code and C code other than a L:VAR and the VarGet/VarSet functions?

Thanks!

Federico

[Beau Hollis]

JavaScript VarSet should work correctly in the next release. Unfortunately there were some issues with the JS VarSet implementation which we didn't catch in beta. Sorry about the confusion this caused. The next release will ship with an SDK sample that uses VarSet.

[gaab]

Thanks for your feedback.

It would be great to have an example used in a panel (with explanations on the sizing of the windows)

Would you also consider making these "windows" usable with the aircraft.cfg kb_checklists and kb_reference.

HTML5 would be welcome to write checklist

Gérard

[gaab]

JavaScript VarSet should work correctly in the next release. Unfortunately there were some issues with the JS VarSet implementation which we didn't catch in beta. Sorry about the confusion this caused. The next release will ship with an SDK sample that uses VarSet.

I am very desapointed, as I on't see any new SDK HTML5 sample ?

Please HELP

Gérard

[Beau Hollis]

Take a look at the HTML for the weather radar sample.

PDK General Samples\WeatherRadar\Content\Gauges.

Code: Select all

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body
{
	font-family: 'Segoe UI', Arial, sans-serif; 
	text-align: center;
	background-color: rgba(65, 64, 66, 0);
	color: white;
	margin:0; 
	padding:0
}
p
{
    border-style: solid;
    background-color: rgba(65, 64, 66,0.5);
    border-color: rgba(200, 200, 200, 0.3);
}
table
{
    text-align: center;
    width: 100%;
    background-color: rgba(65, 64, 66,0.5);
}

.slidecontainer {
  width: 100%;
  background-color: rgba(65, 64, 66,0.5);
  padding: 0px;
  box-sizing: border-box;
}

.slider {
  -webkit-appearance: none;
  width: 128px;
  height: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 10px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
}
</style>
</head>
<body>
<div class="slidecontainer">
<table  class="center">
<tr><td>
  Range(NM): <span id="rangeValue"></span> <br>
  <input type="range" min="5" max="100" value="50" step="1" class="slider" id="rangeSlider">
  </td><td>
  Tilt&deg;: <span id="tiltValue"></span> <br>
  <input type="range" min="-3.0" max="3.0" value="0.0" step="0.1" class="slider" id="tiltSlider">
  </td><td>
  Beam Width&deg;: <span id="beamValue"></span> <br>
  <input type="range" min="2.0" max="10.0" value="5.0" step="0.1" class="slider" id="beamSlider">
  </td><td>
  <p id="FreezeButton" onclick="toggleFreeze()">Freeze <br> OFF</p>
  </td>
</tr>
</table>
</div>

<script>
var rangeSlider = document.getElementById("rangeSlider");
var rangeSliderOutput = document.getElementById("rangeValue");
rangeSliderOutput.innerHTML = rangeSlider.value;
rangeSlider.oninput = function() {
  rangeSliderOutput.innerHTML = this.value;
  VarSet("L:WeatherRadarSample_RangeNM","Number",this.value);
}

var tiltSlider = document.getElementById("tiltSlider");
var tiltSliderOutput = document.getElementById("tiltValue");
tiltSliderOutput.innerHTML = tiltSlider.value;
tiltSlider.oninput = function() {
  tiltSliderOutput.innerHTML = this.value;
  VarSet("L:WeatherRadarSample_TiltDegrees","Number",parseFloat(this.value));
}

var beamSlider = document.getElementById("beamSlider");
var beamSliderOutput = document.getElementById("beamValue");
beamSliderOutput.innerHTML = beamSlider.value;
beamSlider.oninput = function() {
  beamSliderOutput.innerHTML = this.value;
  VarSet("L:WeatherRadarSample_BeamWidthDegrees", "Number", Number(this.value));
}

var bFreeze = false;
var freezeButton = document.getElementById("FreezeButton");
freezeButton.onclick = function() {
	if(bFreeze == true){
		bFreeze = false;
		this.innerHTML = "Freeze <br> OFF";
	}
	else {
		bFreeze = true;
		this.innerHTML = "Freeze <br> ON";
	}
	VarSet("L:WeatherRadarSample_PauseRendering", "Number",bFreeze);
}



</script>

</body>
</html>

[gaab]

Thanks - I have seen it, but I am missing a panel.cfg sample, which shows the exact window entry (and how to size and position the view...), to display a basic panel...

Beginner here :)

Gérard

[Beau Hollis]

The weather radar example I linked to above includes a missionpanels.cfg entry which adds a global panel available to all aircraft. For aircraft panels, you should be able to follow the tutorials and documentation in the panels and gauges section of the SDK. The XML gauge tutorial includes a basic how-to for adding a new panel window to an aircraft panel.cfg.
http://www.prepar3d.com/SDKv5/sdk/panel ... orial.html

[gaab]

The weather radar example I linked to above includes a missionpanels.cfg entry which adds a global panel available to all aircraft.

Thanks, will take a look.

Concerning panel.cfg, I am familiar with the gauge and windows management, except I never succeed to master the numerous and sometime contradictory sizing/positioning parameters :(

Still dreaming for a step by step tutorial of the various way to do it...

Gérard