Customizable Flight Instruments For The Web - jQuery Flight Indicators

Add sleek flight instrument displays to your web projects!

Flight Indicators is a jQuery plugin that helps create highly customizable attitude, heading, vertical speed, air speed, turn coordinator and altimeter indicators on the webpage.

Benefit from the plugin's SVG-based images which enable you to scale according to your application's needs without compromising quality.

How to use it:

1. Load jQuery and the Flight Indicators plugin's files in your web project.

<!-- Flight Indicators styles -->

<link rel="stylesheet" href="/path/to/css/flightindicators.css" />

<!-- Import jQuery library -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Import the FlightIndicators library -->
<script src="/path/to/js/jquery.flightindicators.js"></script>

2. Create a span element in which the plugin place the flight indicator.

<span id="example"></span>

3. Create Flight Indicators as follows.

// Additude
const example = $.flightIndicator('#example', 'attitude');

// Heading
const example = $.flightIndicator('#example', 'heading');

// Vertical speed
const example = $.flightIndicator('#example', 'variometer');

// Air speed
const example = $.flightIndicator('#example', 'airspeed');

// Turn coordinator
const example = $.flightIndicator('#example', 'turn_coordinator');

// Altimeter
const example = $.flightIndicator('#example', 'altimeter');

4. Available configs to customize the flight indicators.

const example = $.flightIndicator('#example', 'attitude', {
      size: 200,

      // roll angle in degrees for attitude indicators
      roll: 0,

      // pitch angle in degrees for attitude indicators
      pitch: 0,

      // turn angle in degrees for turn coordinators
      turn: 0,

      // heading angle in degrees for heading indicators
      heading: 0,

      // variometer in 1000 feets/min for variometer indicators
      vario: 0,

      // air speed in knots for air speed indicators
      airspeed: 0,

      // altitude in feets for altimeter indicators
      altitude: 0,

      // pressure in hPa for altimeter indicators
      pressure: 1000,

      // shows outter box or not
      showBox: true,

      // path to indicator images
      img_directory : 'img/'

});

5. Available API methods which can be used to create real-time flight indicators.

example.setRoll(roll); 
example.setPitch(pitch);
example.setHeading(heading);
example.setVario(vario);
example.setAirSpeed(speed); 
example.setAltitude(altitude);
example.setPressure(pressure);
example.resize(size);
example.showBox();
example.hideBox();  

---

This awesome jQuery plugin is developed by sebmatton. For more Advanced Usages, please check the demo page or visit the official website.