Skip to content

The Flight Indicators Plugin allows you to display high quality flight indicators using html, css3, React and SVG vector images

License

Notifications You must be signed in to change notification settings

skyhop/react-flight-indicators

 
 

Repository files navigation

react-flight-indicators NPM JavaScript Style Guide

The react-flight-indicators package allows you to display high quality flight indicators using html, css3, React 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

react-flight-indicators is a fork from sebmatton/jQuery-Flight-Indicators, and refactored for use with ReactJS, essentially removing the JQuery dependency.

Install

Using NPM;

npm install --save react-flight-indicators

Alternatively with YARN;

yarn add react-flight-indicators

Usage

import React, { Component } from 'react'

import {
  Airspeed,
  Altimeter,
  AttitudeIndicator,
  HeadingIndicator,
  TurnCoordinator,
  Variometer
} from 'react-flight-indicators'

const Example = () => {
  	return (
	  	<>
			<HeadingIndicator heading={Math.random() * 360} showBox={false} />

			<hr />

			<Airspeed speed={Math.random() * 160} showBox={false} />

			<hr />

			<Altimeter altitude={Math.random() * 28000} showBox={false} />

			<hr />

			<AttitudeIndicator roll={(Math.random() - 0.5) * 120} pitch={(Math.random() - 0.5) * 40} showBox={false} />

			<hr />

			<TurnCoordinator turn={(Math.random() - 0.5) * 120} showBox={false} />

			<hr />

			<Variometer vario={(Math.random() - 0.5) * 4000} showBox={false} />
	  	</>
  	)
}

Example & Demo

The JQuery demo can be found here : http://sebmatton.github.io/flightindicators/

Here are a few examples of currently implemented indicators :

demo_example

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

demo_highres

Authors and License

Originally this project has been based on work by igneosaur, which could be found on Bitbucket.

Further work is done by Sébastien Matton ([email protected]), whom developed the jQuery plugin as part of his master's for showing realtime flight information from a quadcopter.

Corstian Boerman has adapted the project by Sébastien for use with React.

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

About

The Flight Indicators Plugin allows you to display high quality flight indicators using html, css3, React and SVG vector images

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 59.5%
  • HTML 29.6%
  • CSS 10.9%