react-typescript-flight-indicators

> A React + Typescript porting of react-flight-indicators (https://github.com/skyhop/react-flight-indicators)

 

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

react-typescript-flight-indicators is a porting from skyhop/react-flight-indicators, and refactored for use with React and TypeScript.

Install

Using YARN:

``bash
yarn add react-typescript-flight-indicators
`

Alternatively, with NPM:

`bash
npm install --save react-typescript-flight-indicators
`

Usage

`tsx
import React, { Component } from "react";

import {
Airspeed,
Altimeter,
AttitudeIndicator,
HeadingIndicator,
TurnCoordinator,
Variometer,
} from "react-typescript-flight-indicators";

const Example = () => {
return (
<>



---

---

---

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

---

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

---

);
};
`

Build

Using YARN:

`bash
yarn install
yarn build
`

or:

`bash
npm install
npm run build
`

Note: to publish on NPM:

`bash
npm publish
``

TODOs

Here's a list of missing features:

- General: set custom scales (min/max values, ticks, limits of yellow/green arcs, ...)
- TurnCoordinator: currently, the slip-skid indicator ball is fixed; a property should be added to edit its position.
- ...

License

GPL-3.0 © Starnuto di topo

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 (seb_matton@hotmail.com), who 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

Development log

$3

Initial project created with the following command:

docker run -it --rm -v ${PWD}:/app -p 3000:3000 --entrypoint /bin/sh node:16.0.0-alpine3.13 -c "cd /app && npx create-react-library"

(references: https://www.npmjs.com/package/create-react-library )

$3

- Code ported to Typescript
- Modified some SVG files to exclude Inkscape-related attributes
- Using SVGR to include SVG as components (see: https://react-svgr.com/ )
- Added memoization

$3

- updated package.json
- published to NPM

(according to https://levelup.gitconnected.com/publish-react-components-as-an-npm-package-7a671a2fb7f )

Code sanboxes

Here are some sandboxes you can inspect:

- Basic usage
- Real-time update