Nimble Polyglot Microcosm


    1.0.0 • Public • Published

    Flight Indicators jQuery plugin GitHub version

    The Flight Indicators Plugin allows you to display high quality flight indicators using html, css3, jQuery and SVG images. The methods make customization and real time implementation really easy. Further, since all the images are vector svg you can resize the indicators to your application without any quality loss !

    Currently supported indicators are :

    • Attitude (artificial horizon)
    • Heading
    • Vertical speed
    • Air speed
    • Altimeter

    Example & Demo

    Demo can be found here :

    Here are a few examples of currently implemented indicators :


    The image below shows a part of an 800px indicator. Vector images allows you to keep high quality render with large indicators.




    To use this plugin you need to import the css file in the head of your html file :

    <link rel="stylesheet" type="text/css" href="css/flightindicators.css" />

    Before the </body> tag, include jQuery and this plugin :

    <script src="js/jquery.js"></script>
    <script src="js/jquery.flightindicator.js"></script>

    Using the plugin

    Create a <span> section to put an indicator in :

    <span id="attitude"></span>

    Then, when the span is ready in the DOM (maybe you need to wait for document ready), you can run the indicator function :

    var indicator = $.flightIndicator('#attitude', type, options);

    Where the first argument is the selector, the type value specify the indicator type and the options overwrite the default settings.

    To display the most simple indicator, as for example the attitude indicator, we use :

    var indicator = $.flightIndicator('#attitude', 'attitude');

    The type may be attitude, heading, variometer, airspeed or altimeter. If the type is not correct, the default type will be attitude.

    Initial settings can be modified using the options parameter. Here are the valid options and the default settings :

    var options = {
        size : 200, // Sets the size in pixels of the indicator (square)
        roll : 0, // Roll angle in degrees for an attitude indicator
        pitch : 0, // Pitch angle in degrees for an attitude indicator
        heading: 0, // Heading angle in degrees for an heading indicator
        vario: 0, // Variometer in 1000 feets/min for the variometer indicator
        airspeed: 0, // Air speed in knots for an air speed indicator
        altitude: 0, // Altitude in feets for an altimeter indicator
        pressure: 1000, // Pressure in hPa for an altimeter indicator
        showBox : true, // Sets if the outer squared box is visible or not (true or false)
        img_directory : 'img/' // The directory where the images are saved to

    The options parameters are optionnals.

    Updating the indicator informations

    Some methods are used to update the indicators, giving the opportunity to create realtime GUI !

    The way to use it is really simple.

    var attitude = $.flightIndicator('#attitude', 'attitude');
    attitude.setRoll(30); // Sets the roll to 30 degrees

    Here are the valid methods :

    indicator.setRoll(roll); // Sets the roll of an attitude indicator
    indicator.setPitch(pitch); // Sets the pitch of an attitude indicator
    indicator.setHeading(heading); // Sets the heading of an heading indicator
    indicator.setVario(vario); // Sets the climb speed of an variometer indicator
    indicator.setAirSpeed(speed); // Sets the speed of an airspeed indicator
    indicator.setAltitude(altitude); // Sets the altitude of an altimeter indicator
    indicator.setPressure(pressure); // Sets the pressure of an altimeter indicator
    indicator.resize(size); // Sets the size of any indicators
    indicator.showBox(); // Make the outer squared box of any instrument visible
    indicator.hideBox(); // Make the outer squared box of any instrument invisible

    Author and License

    Author : Sébastien Matton (

    jQuery Flight Indicators plugin was developped as part of my Master's Thesis since I needed a realtime interface showing the flight datas about for a quadcopter.

    The project is published under GPLv3 License. See LICENSE file for more informations

    Feel free to take part in this project or/and contact me for any reason :-)


    Thanks to igneosaur for work on which this project was initialy based (Project on Bitbucket)




    npm i jquery-flight-indicators

    DownloadsWeekly Downloads






    Last publish


    • dlxxko