From 0dfac9a2e686495d6a028dd72f29a96b4425996a Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sat, 23 Mar 2024 01:22:41 -0700
Subject: [PATCH 1/2] added flight components from vue-flight-indicators
library to test
---
package-lock.json | 27 +++++++++++------
package.json | 1 +
src/components/FlightComponents/Airspeed.vue | 28 +++++++++++++++++
src/components/FlightComponents/Altimeter.vue | 28 +++++++++++++++++
src/components/FlightComponents/Altitude.vue | 29 ++++++++++++++++++
src/main.ts | 3 +-
src/testDisplayComponents.vue | 30 +++++--------------
7 files changed, 114 insertions(+), 32 deletions(-)
create mode 100644 src/components/FlightComponents/Airspeed.vue
create mode 100644 src/components/FlightComponents/Altimeter.vue
create mode 100644 src/components/FlightComponents/Altitude.vue
diff --git a/package-lock.json b/package-lock.json
index 62f5b61..0d9f539 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"dependencies": {
"@tauri-apps/api": "^1.4.0",
"vue": "^3.2.45",
+ "vue-flight-indicators": "^0.1.1",
"vue-router": "^4.3.0"
},
"devDependencies": {
@@ -5932,9 +5933,9 @@
}
},
"node_modules/follow-redirects": {
- "version": "1.15.5",
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
- "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+ "version": "1.15.6",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+ "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"dev": true,
"funding": [
{
@@ -7178,9 +7179,9 @@
}
},
"node_modules/ip": {
- "version": "1.1.8",
- "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
- "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+ "version": "1.1.9",
+ "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+ "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
"dev": true
},
"node_modules/ip-regex": {
@@ -14173,6 +14174,14 @@
"node": ">=16.14"
}
},
+ "node_modules/vue-flight-indicators": {
+ "version": "0.1.1",
+ "resolved": "https://registry.npmjs.org/vue-flight-indicators/-/vue-flight-indicators-0.1.1.tgz",
+ "integrity": "sha512-Qwu7IMl2/IRiB7mtyi5C/rt+ty4jJNkvsjCU8GiuFNp2NcYGaQlUhzQmIeQBbjgTBA/Tnh0sy+rQXjIp7rymeA==",
+ "peerDependencies": {
+ "vue": ">=2.0.0"
+ }
+ },
"node_modules/vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -16518,9 +16527,9 @@
"peer": true
},
"node_modules/webpack-dev-middleware": {
- "version": "5.3.3",
- "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
- "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+ "version": "5.3.4",
+ "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+ "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
"dev": true,
"peer": true,
"dependencies": {
diff --git a/package.json b/package.json
index f9988c8..2904ad3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"dependencies": {
"@tauri-apps/api": "^1.4.0",
"vue": "^3.2.45",
+ "vue-flight-indicators": "^0.1.1",
"vue-router": "^4.3.0"
},
"devDependencies": {
diff --git a/src/components/FlightComponents/Airspeed.vue b/src/components/FlightComponents/Airspeed.vue
new file mode 100644
index 0000000..4d5f951
--- /dev/null
+++ b/src/components/FlightComponents/Airspeed.vue
@@ -0,0 +1,28 @@
+<script>
+import {Airspeed} from 'vue-flight-indicators'
+
+export default {
+ name: 'airspeed',
+ props: {
+ airspeed: { required: true, type: Number},
+ },
+ components: {
+ Airspeed
+ }
+}
+</script>
+
+<template>
+ <div class="airspeed-div">
+ <Airspeed :size="220" :airspeed="airspeed"/>
+ </div>
+</template>
+
+<style scoped>
+ .airspeed-div {
+ height: 100%;
+ width:100%;
+ border: 1px solid black;
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/components/FlightComponents/Altimeter.vue b/src/components/FlightComponents/Altimeter.vue
new file mode 100644
index 0000000..36f8dc8
--- /dev/null
+++ b/src/components/FlightComponents/Altimeter.vue
@@ -0,0 +1,28 @@
+<script>
+import {Altimeter} from 'vue-flight-indicators'
+
+export default {
+ name: 'altimeter',
+ props: {
+ altitude: { required: true, type: Number},
+ },
+ components: {
+ Altimeter
+ }
+}
+</script>
+
+<template>
+ <div class="altimeter-div">
+ <Altimeter :size="220" :altitude="altitude"/>
+ </div>
+</template>
+
+<style scoped>
+ .altimeter-div {
+ height: 100%;
+ width:100%;
+ border: 1px solid black;
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/components/FlightComponents/Altitude.vue b/src/components/FlightComponents/Altitude.vue
new file mode 100644
index 0000000..2ac7db2
--- /dev/null
+++ b/src/components/FlightComponents/Altitude.vue
@@ -0,0 +1,29 @@
+<script>
+import {Attitude} from 'vue-flight-indicators'
+
+export default {
+ name: 'altitude',
+ props: {
+ pitch: { required: true, type: Number},
+ roll: {required: true, type: Number},
+ },
+ components: {
+ Attitude
+ }
+}
+</script>
+
+<template>
+ <div class="altitude-div">
+ <Attitude :size="220" :pitch="pitch" :roll="roll" />
+ </div>
+</template>
+
+<style scoped>
+ .altitude-div {
+ height: 100%;
+ width:100%;
+ border: 1px solid black;
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index c33641e..909a064 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,6 @@ import { createApp } from "vue";
import "./styles.css";
import App from "./App.vue";
import router from "./router";
+import testDisplayComponents from "./testDisplayComponents.vue";
-createApp(App).use(router).mount("#app");
+createApp(testDisplayComponents).use(router).mount("#app");
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index 75c4f9e..f629d6f 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -1,12 +1,10 @@
-<!-- Using this to see how the Battery and Connection components look -->
+<!-- Using this to see how the our components look -->
<script setup>
-import Battery from './components/VehicleStatus/Battery.vue';
-import Connection from './components/VehicleStatus/Connection.vue';
-import Status from "./components/VehicleStatusComponent.vue";
-import yuh from "./components/VehicleStatus/VehicleTitle.vue"
-import Coordinate from './components/VehicleStatus/Coordinate.vue'
-
+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'
let testObject = {
longitude: -177.9325790,
@@ -17,8 +15,9 @@ let testObject = {
<template>
<!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
- <Coordinate :coordinates="testObject"></Coordinate>
-
+ <Altitude :pitch=2 :roll=10></Altitude>
+ <Altimeter :altitude=200></Altimeter>
+ <Airspeed :airspeed=60></Airspeed>
</template>
@@ -33,18 +32,5 @@ let testObject = {
width: 200px; */
}
-.border_div_2 {
- display: flex;
- border: 0.4em solid black;
- height: 180px;
- width: 380px;
- /* height: 100px;
- width: 200px; */
-}
-
-.additional_battery_prop {
- top: 4%;
- margin-right: 2%;
-}
</style>
From 4bef4e69cd9f4e162e314274f76648dc3ad76d6c Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sun, 31 Mar 2024 22:39:53 -0700
Subject: [PATCH 2/2] added labels for each flight indicator component
---
src/components/FlightComponents/Airspeed.vue | 9 ++++--
src/components/FlightComponents/Altimeter.vue | 9 ++++--
src/components/FlightComponents/Altitude.vue | 11 +++++--
src/testDisplayComponents.vue | 29 +++++++++++++++----
4 files changed, 45 insertions(+), 13 deletions(-)
diff --git a/src/components/FlightComponents/Airspeed.vue b/src/components/FlightComponents/Airspeed.vue
index 4d5f951..cc222ed 100644
--- a/src/components/FlightComponents/Airspeed.vue
+++ b/src/components/FlightComponents/Airspeed.vue
@@ -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;
}
diff --git a/src/components/FlightComponents/Altimeter.vue b/src/components/FlightComponents/Altimeter.vue
index 36f8dc8..5a2e448 100644
--- a/src/components/FlightComponents/Altimeter.vue
+++ b/src/components/FlightComponents/Altimeter.vue
@@ -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;
}
diff --git a/src/components/FlightComponents/Altitude.vue b/src/components/FlightComponents/Altitude.vue
index 2ac7db2..b32c11f 100644
--- a/src/components/FlightComponents/Altitude.vue
+++ b/src/components/FlightComponents/Altitude.vue
@@ -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>
\ No newline at end of file
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index f629d6f..a61255e 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -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>