VueJS Flight Indicators
Flight indicator components for VueJS. Currently supported indicators are :
- Attitude
- Heading
- Vertical speed
- Air speed
- Altimeter
Usage
Directly in the browser
<div id="app">
<attitude />
<heading />
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-flight-indicators"></script>
<script>
new Vue({ el: '#app' })
</script>Vue-cli
Install the vue-flight-indicators with NPM:
npm install vue-flight-indicatorsimport indicator components:
import {Airspeed, Attitude} from 'vue-flight-indicators'
export default {
name: 'app',
components: {
Airspeed,
Attitude
}
}in template section:
<template>
<div id="app">
<Airspeed :size="350" :airspeed="150" />
<Attitude :size="100" :pitch="0" :roll="10" />
<Attitude />
</div>
</template>
Example App.vue
<template>
<div id="app">
<div class="indicators">
<Attitude class="indicator-bg" :size="200" :roll="roll" :pitch="pitch" />
<Heading class="indicator-bg" :size="200" :heading="heading"/>
<Variometer class="indicator-bg" :size="200" :vario="vario" />
<Airspeed class="indicator-bg" :size="200" :airspeed="airspeed" />
<Altimeter class="indicator-bg" :size="200" :altitude="altitude" :pressure="pressure"/>
</div>
</div>
</template>
<script>
import {Airspeed, Attitude, Altimeter, Heading, Variometer} from 'vue-flight-indicators'
export default {
name: 'app',
components: {
Attitude,
Heading,
Variometer,
Airspeed,
Altimeter
},
data: function () {
return {
counter: 0,
roll: 0,
pitch: 0,
heading: 0,
vario: 0,
airspeed: 0,
altitude: 0,
pressure: 0
}
},
mounted: function () {
setInterval(() => {
this.roll = 30*Math.sin(this.counter/10);
this.pitch = 50*Math.sin(this.counter/20);
this.heading = this.counter;
this.vario = 2*Math.sin(this.counter/10);
this.airspeed = 80+80*Math.sin(this.counter/10);
this.altitude = 10*this.counter;
this.pressure = 1000+3*Math.sin(this.counter/50);
this.counter++;
}, 35);
}
}
</script>
<style scoped>
#app {
text-align: center;
margin-top: 60px;
}
.indicator-bg {
background-color: grey;
}
</style>