{"id":13798170,"url":"https://github.com/teocci/js-module-flight-indicators","last_synced_at":"2025-05-06T05:31:47.051Z","repository":{"id":57238478,"uuid":"435858061","full_name":"teocci/js-module-flight-indicators","owner":"teocci","description":"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.","archived":false,"fork":false,"pushed_at":"2022-09-21T20:51:51.000Z","size":241,"stargazers_count":27,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-21T11:59:05.302Z","etag":null,"topics":["flight-instruments","javascript","js-module","svg","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://github.com/teocci/js-module-flight-indicators","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/teocci.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-12-07T11:43:35.000Z","updated_at":"2025-04-17T01:22:10.000Z","dependencies_parsed_at":"2022-08-26T15:11:56.306Z","dependency_job_id":null,"html_url":"https://github.com/teocci/js-module-flight-indicators","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teocci%2Fjs-module-flight-indicators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teocci%2Fjs-module-flight-indicators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teocci%2Fjs-module-flight-indicators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teocci%2Fjs-module-flight-indicators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teocci","download_url":"https://codeload.github.com/teocci/js-module-flight-indicators/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252629094,"owners_count":21779141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flight-instruments","javascript","js-module","svg","vanilla-javascript"],"created_at":"2024-08-04T00:00:39.852Z","updated_at":"2025-05-06T05:31:46.544Z","avatar_url":"https://github.com/teocci.png","language":"JavaScript","funding_links":[],"categories":["JavaScript Components"],"sub_categories":["Other"],"readme":"## Flight Indicators JS (FIJS)\r\n\r\nThe 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\r\n\r\n[![NPM Status](https://img.shields.io/npm/v/flight-indicators-js.svg?style=flat)][1]\r\n\r\n### Disclaimer\r\n\r\nThis 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.\r\n\r\n### Usage\r\n\r\nCurrently supported indicators are :\r\n\r\n-   Air speed\r\n-   Altimeter\r\n-   Attitude (Artificial Horizon)\r\n-   Heading\r\n-   Turn Coordinator\r\n-   Vertical speed\r\n\r\n#### Initialization\r\n\r\nTo use FIJS just import the `css` and `js` files in your html file:\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"css/flight-indicators.css\" /\u003e\r\n\u003cscript src=\"js/flight-indicator.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nTo import into a module use:\r\n```js\r\nimport FlightIndicators from './module-flight-indicators.js'\r\n```\r\n\r\n### Instantiation\r\n\r\nCreate a `\u003cdiv\u003e` element to place the indicator:\r\n\r\n```html\r\n\u003cdiv id=\"attitude\"\u003e\u003c/div\u003e\r\n```\r\n\r\nThen, when the `div` is loaded and ready in the DOM, create an instance object of `FlightIndicators`:\r\n\r\n```js\r\n// declares the placeholder\r\nconst attitudeElement = document.querySelector(\"#attitude\")\r\n\r\n// creates an FlightIndicators' object\r\nconst attitude = new FlightIndicators(\r\n    attitudeElement,\r\n    FlightIndicators.TYPE_ATTITUDE\r\n)\r\n```\r\n\r\nThe type may be `airspeed`, `altimeter`, `attitude`, `heading`, `vertical` or `coordinator`:\r\n\r\n```js\r\nTYPE_HEADING = 'heading'\r\nTYPE_AIRSPEED = 'airspeed'\r\nYPE_ALTIMETER = 'altimeter'\r\nTYPE_VERTICAL_SPEED = 'vertical'\r\nTYPE_ATTITUDE = 'attitude'\r\nTYPE_TURN_COORDINATOR = 'coordinator'\r\n```\r\n\r\nInitial settings can be modified using the `options` parameter. Here are the valid options and the default settings :\r\n\r\n```js\r\nconst options = {\r\n    size: 200, // Sets the size in pixels of the indicator\r\n    roll: 0, // Roll angle in degrees for an attitude indicator\r\n    pitch: 0, // Pitch angle in degrees for an attitude indicator\r\n    turn: 0, // Sets rotation of the TC\r\n    heading: 0, // Heading angle in degrees for an heading indicator\r\n    verticalSpeed: 0, // Vertical speed in km/min for the vertical speed indicator\r\n    airspeed: 0, // Air speed in meters/hour for an air speed indicator\r\n    altitude: 0, // Altitude in meters for an altimeter indicator\r\n    pressure: 1000, // Pressure in hPa for an altimeter indicator\r\n    hideBox: true, // Sets if the outer squared box is visible or not (true or false)\r\n    imagesDirectory: \"img/\", // The directory where the images are saved to\r\n};\r\n```\r\n\r\n### Updating the indicator information\r\n\r\nSome methods are used to update the indicators, giving the opportunity to create realtime GUI !\r\n\r\nThe way to use it is really simple.\r\n\r\n```js\r\nattitude.updateRoll(30); // Sets the roll to 30 degrees\r\n```\r\n\r\nHere are the valid methods :\r\n\r\n```js\r\nindicator.updateRoll(roll); // Sets the roll of an attitude indicator\r\nindicator.updatePitch(pitch); // Sets the pitch of an attitude indicator\r\nindicator.updateCoordinator(turn); // Sets the turn of an coordinator indicator\r\nindicator.updateHeading(heading); // Sets the heading of an heading indicator\r\nindicator.updateVerticalSpeed(vSpeed); // Sets the climb speed of an variometer indicator\r\nindicator.updateAirSpeed(speed); // Sets the speed of an airspeed indicator\r\nindicator.updateAltitude(altitude); // Sets the altitude of an altimeter indicator\r\nindicator.updatePressure(pressure); // Sets the pressure of an altimeter indicator\r\nindicator.resize(size); // Sets the size of any indicators\r\nindicator.showBox(); // Make the outer squared box of any instrument visible\r\nindicator.hideBox(); // Make the outer squared box of any instrument invisible\r\n```\r\n\r\n![Indicators][2]\r\n\r\n### Samples\r\n- [Flight Indicators JS Sample][3] using [Webpack][4]\r\n- [Flight Indicators JS Parcel Sample][5] using [Parcel][6]\r\n\r\n### Author\r\n\r\nTeocci (teocci@yandex.com)\r\n\r\n### License\r\n\r\nThe code supplied here is covered under the MIT Open Source License.\r\n\r\n### Credits\r\n\r\nFlight Indicators JS svg images was developed based on [Flight Indicators jQuery plugin][7].\r\n\r\n[1]: https://www.npmjs.com/package/flight-indicators-js\r\n[2]: https://github.com/teocci/js-module-flight-indicators/blob/main/assets/fijs-sample.png?raw=true\r\n[3]: https://github.com/teocci/js-fijs-sample\r\n[4]: https://webpack.js.org/\r\n[5]: https://github.com/teocci/js-fijs-parcel-sample\r\n[6]: https://parceljs.org/\r\n[7]: http://sebmatton.github.io/\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteocci%2Fjs-module-flight-indicators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteocci%2Fjs-module-flight-indicators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteocci%2Fjs-module-flight-indicators/lists"}