https://github.com/starnutoditopo/react-typescript-flight-indicators
A React + Typescript porting of react-flight-indicators (https://github.com/skyhop/react-flight-indicators)
https://github.com/starnutoditopo/react-typescript-flight-indicators
Last synced: 18 days ago
JSON representation
A React + Typescript porting of react-flight-indicators (https://github.com/skyhop/react-flight-indicators)
- Host: GitHub
- URL: https://github.com/starnutoditopo/react-typescript-flight-indicators
- Owner: starnutoditopo
- License: gpl-3.0
- Created: 2021-06-03T07:02:53.000Z (almost 4 years ago)
- Default Branch: develop
- Last Pushed: 2023-07-12T17:08:22.000Z (almost 2 years ago)
- Last Synced: 2025-04-15T21:09:26.311Z (25 days ago)
- Language: TypeScript
- Size: 1.74 MB
- Stars: 6
- Watchers: 2
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- awesome-flying - React flight indicators - A React + Typescript porting of react-flight-indicators `React` (JavaScript Components / Other)
README
# react-typescript-flight-indicators
> A React + Typescript porting of react-flight-indicators (https://github.com/skyhop/react-flight-indicators)
[](https://www.npmjs.com/package/react-typescript-flight-indicators) [](https://standardjs.com)
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](https://github.com/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 (
<>
>
);
};
```
## 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](https://github.com/starnutoditopo)
## Example & Demo
The JQuery demo can be found here : [http://sebmatton.github.io/flightindicators/](http://sebmatton.github.io/flightindicators/)
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.
## Authors and License
Originally this project has been based on work by igneosaur, which could be found [on Bitbucket](https://bitbucket.org/igneosaur/attitude-indicator).
Further work is done by Sébastien Matton ([email protected]), who developed the jQuery plugin as part of his master's for showing realtime flight information from a quadcopter.
[Corstian Boerman](https://corstianboerman.com) 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
### Created typescript react project
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 )
### Code changes
- 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
### Publishing
- 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](https://codesandbox.io/s/8yq47)
- [Real-time update](https://codesandbox.io/s/7wwfs)