Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teocci/js-module-flight-indicators
js-module-flight-indicators allows you to display high quality flight indicators using html, css3 and SVG images. You can easily customize and implementation these indicators for real time updates. The indicators' images are vectors (svg) so they do not lose quality if they are resized.
https://github.com/teocci/js-module-flight-indicators
flight-instruments javascript js-module svg vanilla-javascript
Last synced: 7 days ago
JSON representation
js-module-flight-indicators allows you to display high quality flight indicators using html, css3 and SVG images. You can easily customize and implementation these indicators for real time updates. The indicators' images are vectors (svg) so they do not lose quality if they are resized.
- Host: GitHub
- URL: https://github.com/teocci/js-module-flight-indicators
- Owner: teocci
- License: mit
- Created: 2021-12-07T11:43:35.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-21T20:51:51.000Z (about 2 years ago)
- Last Synced: 2024-05-02T02:19:05.188Z (7 months ago)
- Topics: flight-instruments, javascript, js-module, svg, vanilla-javascript
- Language: JavaScript
- Homepage: https://github.com/teocci/js-module-flight-indicators
- Size: 235 KB
- Stars: 17
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flying - JS flight-indicators
README
## Flight Indicators JS (FIJS)
The Flight Indicators JS allows you to display high quality flight indicators using html, css3 and SVG images. You can easily customize and implementation these indicators for real time updates. The indicators' images are vectors (svg) so they do not lose quality if they are resized
[][1]
### Disclaimer
This repository contains a basic implementation of flight indicators. The current version is not intended to be used as-is in applications as a library dependency, and will not be maintained as such. Bug fix contributions are welcome, but issues and feature requests will not be addressed constantly.
### Usage
Currently supported indicators are :
- Air speed
- Altimeter
- Attitude (Artificial Horizon)
- Heading
- Turn Coordinator
- Vertical speed
#### Initialization
To use FIJS just import the `css` and `js` files in your html file:
```html
```
To import into a module use:
```js
import FlightIndicators from './module-flight-indicators.js'
```
### Instantiation
Create a `
` element to place the indicator:
```html
```
Then, when the `div` is loaded and ready in the DOM, create an instance object of `FlightIndicators`:
```js
// declares the placeholder
const attitudeElement = document.querySelector("#attitude")
// creates an FlightIndicators' object
const attitude = new FlightIndicators(
attitudeElement,
FlightIndicators.TYPE_ATTITUDE
)
```
The type may be `airspeed`, `altimeter`, `attitude`, `heading`, `vertical` or `coordinator`:
```js
TYPE_HEADING = 'heading'
TYPE_AIRSPEED = 'airspeed'
YPE_ALTIMETER = 'altimeter'
TYPE_VERTICAL_SPEED = 'vertical'
TYPE_ATTITUDE = 'attitude'
TYPE_TURN_COORDINATOR = 'coordinator'
```
Initial settings can be modified using the `options` parameter. Here are the valid options and the default settings :
```js
const options = {
size: 200, // Sets the size in pixels of the indicator
roll: 0, // Roll angle in degrees for an attitude indicator
pitch: 0, // Pitch angle in degrees for an attitude indicator
turn: 0, // Sets rotation of the TC
heading: 0, // Heading angle in degrees for an heading indicator
verticalSpeed: 0, // Vertical speed in km/min for the vertical speed indicator
airspeed: 0, // Air speed in meters/hour for an air speed indicator
altitude: 0, // Altitude in meters for an altimeter indicator
pressure: 1000, // Pressure in hPa for an altimeter indicator
hideBox: true, // Sets if the outer squared box is visible or not (true or false)
imagesDirectory: "img/", // The directory where the images are saved to
};
```
### Updating the indicator information
Some methods are used to update the indicators, giving the opportunity to create realtime GUI !
The way to use it is really simple.
```js
attitude.updateRoll(30); // Sets the roll to 30 degrees
```
Here are the valid methods :
```js
indicator.updateRoll(roll); // Sets the roll of an attitude indicator
indicator.updatePitch(pitch); // Sets the pitch of an attitude indicator
indicator.updateCoordinator(turn); // Sets the turn of an coordinator indicator
indicator.updateHeading(heading); // Sets the heading of an heading indicator
indicator.updateVerticalSpeed(vSpeed); // Sets the climb speed of an variometer indicator
indicator.updateAirSpeed(speed); // Sets the speed of an airspeed indicator
indicator.updateAltitude(altitude); // Sets the altitude of an altimeter indicator
indicator.updatePressure(pressure); // Sets the pressure of an altimeter indicator
indicator.resize(size); // Sets the size of any indicators
indicator.showBox(); // Make the outer squared box of any instrument visible
indicator.hideBox(); // Make the outer squared box of any instrument invisible
```
![Indicators][2]
### Samples
- [Flight Indicators JS Sample][3] using [Webpack][4]
- [Flight Indicators JS Parcel Sample][5] using [Parcel][6]
### Author
Teocci ([email protected])
### License
The code supplied here is covered under the MIT Open Source License.
### Credits
Flight Indicators JS svg images was developed based on [Flight Indicators jQuery plugin][7].
[1]: https://www.npmjs.com/package/flight-indicators-js
[2]: https://github.com/teocci/js-module-flight-indicators/blob/main/assets/fijs-sample.png?raw=true
[3]: https://github.com/teocci/js-fijs-sample
[4]: https://webpack.js.org/
[5]: https://github.com/teocci/js-fijs-parcel-sample
[6]: https://parceljs.org/
[7]: http://sebmatton.github.io/