react-typescript-flight-indicators
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    react-typescript-flight-indicators

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

    NPM JavaScript Style Guide

    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:

    yarn add react-typescript-flight-indicators

    Alternatively, with NPM:

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

    Usage

    import React, { Component } from 'react'
    
    import {
      Airspeed,
      Altimeter,
      AttitudeIndicator,
      HeadingIndicator,
      TurnCoordinator,
      Variometer
    } from 'react-typescript-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} />
    	  	</>
      	)
    }

    Build

    Using YARN:

    yarn build

    or:

    npm run build

    Note: to publish on NPM:

    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

    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:

    Buy Me A Coffee!

    If you can contribute or you want to, feel free to do it at Buy me a coffee! , I will be really thankfull for anything even if it is a coffee or just a kind comment towards my work.

    😊

    Be careful and donate just if it is within your possibilities, because there is no refund system. And remember that you don't need to donate, it is just a free choice for you. Thank you!

    Install

    npm i react-typescript-flight-indicators

    DownloadsWeekly Downloads

    11

    Version

    1.0.3

    License

    GPL-3.0

    Unpacked Size

    585 kB

    Total Files

    51

    Last publish

    Collaborators

    • avatar