High-Quality jQuery Flight Instrument Indicator Plugin Flight Indicats

Add-ons

2026-07-26 04:11 4 次浏览 • 0 次下载 36.3KB

High-Quality jQuery Flight Instrument Indicator Plugin Flight Indicats

Plugin Description: Flight Indicats Plugin is a jQuery plugin for creating high-quality flight instrument indicators. It uses HTML, CSS3, jQuery, and SVG images to create various flight instrument indicators. The plugin methods are easy to customize and implement. All images are vector-based, so they can be enlarged without distortion.

Flight Indicats Plugin

The flight instrument types currently supported by this plugin include:

Artificial Horizon
Heading
Vertical Speed
Airspeed
Altimeter

Usage

To use this flight instrument indicator plugin, first include the required JS and CSS files.

<link rel="stylesheet" type="text/css" href="css/flightindicators.css" />      
<!-- Importing jQuery library -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!-- Importing the FlightIndicators library -->
<script src="js/jquery.flightindicators.js"></script>

HTML Structure

You can use a <escape><span> element to contain an indicator.

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

Call the plugin

After the page has finished loading, you can initialize the flight instrument indicator plugin using the following method.

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

The first parameter is a jQuery selector, the type parameter specifies the indicator type, and the options parameter can override the default settings.

The simplest initialization method is as follows:

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

The indicator type can be:attitude、heading、variometer、airspeedoraltimeter. If the type parameter is not specified, the default indicator type will be used.

Configuration Parameters

The following are the default settings for this flight instrument indicator:

var options = {
    size：200，// Set the pixel size of the indicator (square)
    roll：0，// Roll angle of the attitude indicator (degrees)
    pitch：0，// Pitch angle of the attitude indicator (degrees)
    heading：0，// Heading angle of the heading indicator (degrees)
    vario：0，// Vertical speed of the variometer indicator in thousands of feet per minute
    airspeed: 0，// Airspeed of the airspeed indicator
    altitude：0，// Altitude of the altimeter indicator
    pressure：1000，// Pressure of the pressure gauge indicator in hPa
    showBox：true，// Set whether the external square frame is visible (true or false)
    img_directory：'img /'// Directory for saving images
}

All parameter options are optional.

Update Indicator Information

The plugin provides several methods for updating indicator information. Here is a simple example:

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

The following are all available methods.

indicator.setRoll(roll); // Set the roll of the attitude indicator
indicator.setPitch(pitch); // Set the pitch of the attitude indicator
indicator.setHeading(heading); // Set the heading of the heading indicator
indicator.setVario(vario); // Set the climb rate of the variometer indicator
indicator.setAirSpeed(speed); // Set the speed of the airspeed indicator
indicator.setAltitude(altitude); // Set the altitude of the altimeter indicator
indicator.setPressure(pressure); // Set the pressure of the altimeter indicator
indicator.resize(size); // Set the size of any indicator
indicator.showBox(); // Make the external square frame of any instrument visible
indicator.hideBox(); // Make the external square frame of any instrument invisible