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> <template>
<div class="airspeed-div"> <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> </div>
</template> </template>
<style scoped> <style scoped>
.airspeed-div { .airspeed-div {
position: relative;
height: 100%; height: 100%;
width:100%; width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black; border: 1px solid black;
} }

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

@ -14,14 +14,19 @@ export default {
<template> <template>
<div class="altimeter-div"> <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> </div>
</template> </template>
<style scoped> <style scoped>
.altimeter-div { .altimeter-div {
position: relative;
height: 100%; height: 100%;
width:100%; width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black; border: 1px solid black;
} }

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

@ -15,15 +15,20 @@ export default {
<template> <template>
<div class="altitude-div"> <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> </div>
</template> </template>
<style scoped> <style scoped>
.altitude-div { .altitude-div {
position: relative;
height: 100%; height: 100%;
width:100%; width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black; border: 1px solid black;
} }
</style> </style>

29
src/testDisplayComponents.vue
View File

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