Image source is here from Matton SĂ©bastien
Code created by Aleksey Komov using TypeScript and SCSS.
- Import CSS styles into
<head>
tag
<link href="flight-indicators.css" rel="stylesheet" />
- Import JS file before
</body>
tag
<script type="text/javascript" src="flight-indicators.js"></script>
- Use next tags to insert indicators
<span id="attitude"></span>
<span id="altimeter"></span>
<span id="compass"></span>
<span id="airspeed"></span>
<span id="vspeed"></span>
<span id="turner"></span>
- Create widgets via JavaScript
let oAttitude = new AttitudeIndicator("#attitude", {
size: 300,
showBox: false,
});
let oAltimeter = new AltimeterIndicator("#altimeter", {
size: 300,
showBox: true,
});
let oCompass = new CompassIndicator("#compass", {
size: 300,
showBox: false,
});
let oAirspeed = new AirSpeedIndicator("#airspeed", {
size: 300,
showBox: false,
});
let oVspeed = new VerticalSpeedIndicator("#vspeed", {
size: 300,
showBox: false,
});
let oTurner = new TurnIndicator("#turner", {
size: 300,
showBox: false,
});
Parameter |
Type |
Description |
size |
Number |
Widget size |
showBox |
Boolean |
Show box around widget |
imgDirectory |
String |
Path to widget images |
Method |
Parameter types |
Description |
setRoll |
Number |
Set Roll angle |
setPitch |
Number |
Set Pitch angle |
Method |
Parameter types |
Description |
setPressure |
Number |
Set Pressure |
setAltitude |
Number |
Set Altitude |
Method |
Parameter types |
Description |
setAirSpeed |
Number |
Set Air speed |
Method |
Parameter types |
Description |
setDirection |
Number |
Set Direction |
Method |
Parameter types |
Description |
setTurn |
Number |
Set Turn position |
Method |
Parameter types |
Description |
setSpeed |
Number |
Set Vertical speed |
// Update at 20Hz
var nIncrement = 0;
setInterval(() => {
// Attitude update
oAttitude.setRoll(30 * Math.sin(nIncrement / 10));
oAttitude.setPitch(50 * Math.sin(nIncrement / 20));
// Altimeter update
oAltimeter.setAltitude(10 * nIncrement);
oAltimeter.setPressure(1000 + 3 * Math.sin(nIncrement / 50));
// Compass update
oCompass.setDirection(nIncrement);
// Air speed update
oAirspeed.setAirSpeed(80 + 80 * Math.sin(nIncrement / 10));
// Vertical speed update
oVspeed.setSpeed(2 * Math.sin(nIncrement / 10));
// Turner update
oTurner.setTurn(30 * Math.sin(nIncrement / 10));
nIncrement++;
}, 50);