html 小插件 指示器,jQuery高质量飞行仪表指示器插件

Attitude example

This is a simple example showing an attitude indicator with pitch of 3 degrees and roll of 8 degrees. As you can see, the size can be chosen to be as big as you want since we only use vector graphics (svg). For this example size was set to 350 pixels.

var first_attitude = $.flightIndicator('#first_attitude', 'attitude', {size:350, roll:8, pitch:3, showBox : true});

Realtime indicators

This example shows a real time application for each type of indicator.

The code of this example is quite simple. The html :

And the javascript :

// Dynamic examples

var attitude = $.flightIndicator('#attitude', 'attitude', {roll:50, pitch:-20, size:200, showBox : true});

var heading = $.flightIndicator('#heading', 'heading', {heading:150, showBox:true});

var variometer = $.flightIndicator('#variometer', 'variometer', {vario:-5, showBox:true});

var airspeed = $.flightIndicator('#airspeed', 'airspeed', {showBox: false});

var altimeter = $.flightIndicator('#altimeter', 'altimeter');

var turn_coordinator = $.flightIndicator('#turn_coordinator', 'turn_coordinator', {turn:0});

// Update at 20Hz

var increment = 0;

setInterval(function() {

// Airspeed update

airspeed.setAirSpeed(80+80*Math.sin(increment/10));

// Attitude update

attitude.setRoll(30*Math.sin(increment/10));

attitude.setPitch(50*Math.sin(increment/20));

// Altimeter update

altimeter.setAltitude(10*increment);

altimeter.setPressure(1000+3*Math.sin(increment/50));

increment++;

// TC update

turn_coordinator.setTurn(30*Math.sin(increment/10));

// Heading update

heading.setHeading(increment);

// Vario update

variometer.setVario(2*Math.sin(increment/10));

}, 50);