priyatham
/
gcs-user-interface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added labels for each flight indicator component

This commit is contained in:
chillwafflez 2024-03-31 22:39:53 -07:00
parent 0b3d94c853
commit 4bef4e69cd
4 changed files with 45 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/FlightComponents/Airspeed.vue
View File

@ -14,14 +14,19 @@ export default {
<template>
<div class="airspeed-div">
<Airspeed :size="220" :airspeed="airspeed"/>
<Airspeed :size="200" :airspeed="airspeed"/>
<span style="font-size: 1.2em;"> Airspeed: {{ airspeed }} ft/s</span>
</div>
</template>
<style scoped>
.airspeed-div {
position: relative;
height: 100%;
width:100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black;
}

9
src/components/FlightComponents/Altimeter.vue
View File

@ -14,14 +14,19 @@ export default {
<template>
<div class="altimeter-div">
<Altimeter :size="220" :altitude="altitude"/>
<Altimeter :size="200" :altitude="altitude"/>
<span style="font-size: 1.2em;"> Altitude: {{ altitude }} ft/s</span>
</div>
</template>
<style scoped>
.altimeter-div {
position: relative;
height: 100%;
width:100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black;
}

11
src/components/FlightComponents/Altitude.vue
View File

@ -15,15 +15,20 @@ export default {
<template>
<div class="altitude-div">
<Attitude :size="220" :pitch="pitch" :roll="roll" />
<Attitude :size="200" :pitch="pitch" :roll="roll" />
<span style="font-size: 1.2em;"> Pitch: {{ pitch }} </span>
<span style="font-size: 1.2em;"> Roll: {{ roll }} </span>
</div>
</template>
<style scoped>
.altitude-div {
position: relative;
height: 100%;
width:100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black;
}
</style>

29
src/testDisplayComponents.vue
View File

@ -3,8 +3,8 @@
<script setup>
import Coordinate from './components/VehicleStatus/Coordinate.vue';
import Altitude from './components/FlightComponents/Altitude.vue';
import Altimeter from './components/FlightComponents/Altimeter.vue'
import Airspeed from './components/FlightComponents/Airspeed.vue'
import Altimeter from './components/FlightComponents/Altimeter.vue';
import Airspeed from './components/FlightComponents/Airspeed.vue';
let testObject = {
longitude: -177.9325790,
@ -13,11 +13,19 @@ let testObject = {
</script>
<template>
<!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
<Altitude :pitch=2 :roll=10></Altitude>
<Altimeter :altitude=200></Altimeter>
<Airspeed :airspeed=60></Airspeed>
<div class="altitude-outer-div">
<Altitude :pitch=2 :roll=10></Altitude>
</div>
<div class="altimeter-outer-div">
<Altimeter :altitude=200></Altimeter>
</div>
<div class="altitude-outer-div">
<Airspeed :airspeed=100></Airspeed>
</div>
</template>
@ -32,5 +40,14 @@ let testObject = {
width: 200px; */
}
.altitude-outer-div {
height: 50;
width: 10%;
}
.altimeter-outer-div {
height: 50;
width: 10%;
}
</style>