added flight components to CamFocus to temporary position

Merge branch 'flight-indicators' into emergency-stop-and-CSS-fixes
Merging to get flight-indicator components
2024-04-14 06:07:06 -07:00 · 2024-04-14 05:38:14 -07:00 · 2024-04-14 05:28:57 -07:00 · 2024-04-14 05:25:14 -07:00 · 2024-04-14 04:06:55 -07:00 · 2024-04-12 04:26:20 -07:00
14 changed files with 385 additions and 43 deletions
--- 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": {
--- 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": {
--- a/src/assets/ERU.png
+++ b/src/assets/ERU.png
--- a/src/assets/stop-symbol.png
+++ b/src/assets/stop-symbol.png
--- a/src/components/FlightComponents/Airspeed.vue
+++ b/src/components/FlightComponents/Airspeed.vue
@ -0,0 +1,32 @@
+<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="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%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+</style>
--- a/src/components/FlightComponents/Altimeter.vue
+++ b/src/components/FlightComponents/Altimeter.vue
@ -0,0 +1,32 @@
+<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="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%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+</style>
--- a/src/components/FlightComponents/Altitude.vue
+++ b/src/components/FlightComponents/Altitude.vue
@ -0,0 +1,33 @@
+<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="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%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+</style>
--- a/src/components/VehicleStatus/EmergencyStop.vue
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@ -1,15 +1,33 @@
 <template>
    <div class="emergency-stop-div">
-        <button class="emergency-button"> EMERGENCY STOP </button>
+        <button class="emergency-button" @click="showEmergencyModal"> EMERGENCY STOP </button>
+        <EmergencyStopModal :vehicle-name="vehicleName" v-show="showModal" @close="closeEmergencyModal"></EmergencyStopModal>
    </div>
    
 </template>
    
 <script lang="ts">
+    import EmergencyStopModal from './EmergencyStopModal.vue';

    export default {
+        components: {
+            EmergencyStopModal
+        },
        data() {
-            return {};    
+            return {
+                showModal: false
+            };    
+        },
+        props: {
+            vehicleName: { required: true, type: String},
+        },
+        methods: {
+            showEmergencyModal() {
+                this.showModal = true;
+            },
+            closeEmergencyModal() {
+                this.showModal = false;
+            }
        }
    };
 </script>
--- a/src/components/VehicleStatus/EmergencyStopModal.vue
+++ b/src/components/VehicleStatus/EmergencyStopModal.vue
@ -0,0 +1,171 @@
+<template>
+  <transition name="modal-fade">
+    <div class="modal-backdrop" @click="closeFromOutside">
+      <div class="modal">
+        <header class="modal-header">
+          <img src="../../assets/stop-symbol.png" class="stop-icon"></img> 
+          <slot name="header">
+            Emergency Stop
+          </slot>
+          <button type="button" class="btn-close" @click="close">x</button>
+        </header>
+        
+        <section class="modal-body">
+          <slot name="body">
+            Send Stop Command to {{ vehicleName }}?
+          </slot>
+         </section>
+  
+        <footer class="modal-footer">
+          <button type="button" class="modal-button no-button" @click="close"> No </button>
+          <button type="button" class="modal-button yes-button" @click="sendStopCommand"> Yes </button>
+        </footer>
+      </div>
+    </div>
+  </transition>
+</template>
+    
+<script lang="ts">
+    export default {
+        data() {
+            return {};    
+        },
+        props: {
+            vehicleName: { required: true, type: String},
+        },
+        methods: {
+            sendStopCommand() {
+              console.log("Pressed yes to send stop command for " + this.vehicleName);
+              this.close();
+            },
+            close() {
+                this.$emit('close');
+            },
+            closeFromOutside(event: MouseEvent) {
+                if (!this.$el.querySelector('.modal').contains(event.target)) {
+                    this.close();
+                }
+            }
+        }
+    };
+</script>
+    
+    
+<style scoped>
+  .modal-backdrop {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 999;
+  }
+
+  .modal {
+    background: #FFFFFF;
+    box-shadow: 2px 2px 20px 1px;
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+    height: 22%;
+    border-radius: 2%;
+  }
+
+  .modal-header {
+    position: relative;
+    display: flex;
+    /* justify-content: space-between; */
+    gap: 2%;
+    /* padding: 15px; */
+    padding: 15px;
+
+    font-size: 1.2em;
+    font-weight: 600;
+    border-bottom: 1px solid #d1cece;
+  }
+
+  .modal-body {
+    position: relative;
+    padding: 20px 10px;
+    font-size: 1.8em;
+    font-weight: bold;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20%;
+    padding-top: 5%;
+  }
+
+  .btn-close {
+    position: absolute;
+    top: 2%;
+    right: 2%;
+    border: none;
+    font-size: 20px;
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+    color: rgb(255, 57, 57);
+    background: transparent;
+    transition: color 0.20s;
+  }
+
+  .btn-close:hover {
+    color: rgb(163, 9, 9);
+  }
+
+  .modal-button {
+    display:flex;
+    justify-content: center;
+    color: white;
+    width: 15%;
+    border-radius: 10%;
+    transition: background-color 0.30s;
+    font-size: 1.2em;
+  }
+
+  .no-button {
+    background: rgb(255, 57, 57);
+    border: 1px solid rgb(177, 6, 6);
+  }
+  .no-button:hover {
+    background-color: rgb(192, 40, 40);
+  }
+
+  .yes-button {
+    background: #03b900;    
+    border: 1px solid #059402;
+  }
+  .yes-button:hover {
+    background-color: #027500;
+  }
+  
+/* fade in/out transitions for the modal + modal overlay (screen dimming)*/
+  .modal-fade-enter-from,
+  .modal-fade-leave-to {
+    opacity: 0;
+  }
+  .modal-fade-enter-active, 
+  .modal-fade-leave-active {
+    transition: opacity .3s ease;
+  }
+
+/* slide transitions for modal window */
+  .modal-fade-enter-from .modal,
+  .modal-fade-leave-to .modal {
+    transform: translateY(-40px);
+    transition: transform .3s ease;
+  }
+
+  .stop-icon {
+    width: 5%;
+  }
+</style>    
--- a/src/components/VehicleStatus/VehicleTitle.vue
+++ b/src/components/VehicleStatus/VehicleTitle.vue
@ -2,11 +2,11 @@
    <div class="vehicle-title-container">
        <div class="vehicle-name-div"> 
                {{ vehicleName }} 
-              <!--  <img src="../../assets/MEA.png" class="vehicle-icon"></img>--> 
+               <img :src="getIconPath" class="vehicle-icon"></img> 
        </div>
        <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
    </div>
-    
+   
    </template>
    
 <script lang="ts">
@ -16,6 +16,11 @@
            vehicleName: { required: true, type: String },
            vehicleStatus: { required: true, type: String },
            vehicleIcon: { type: Object }
+        },
+        computed: {
+            getIconPath() {
+                return new URL('../../assets/' + this.vehicleName + '.png', import.meta.url).href;
+            }
        }
    };
 </script>
@ -26,30 +31,27 @@
    .vehicle-title-container {
        position: relative;
        width: 100%;
-        padding-top: 8%;
+        padding-top: 6%;
        padding-left: 6%;
    }

-    /* .vehicle-name-div {
-        position: relative;
-        font-size: 2.3em;
-    } */
-
    .vehicle-name-div {
        position: relative;
        display: flex;
        font-size: 2.3em;
+        align-items: center;
+        gap: 2%;
    }

    .vehicle-status-div {
        position: relative;
        font-size: 1.4em;  
-        margin-top: 5%;
+        margin-top: 3%;
    }

    .vehicle-icon {
        position: relative;
-        width: 22%;
+        width: 16%;
    }

 </style> 
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@ -48,7 +48,7 @@
        <div class="right-container">
            <Open class="adjust-open-button"></Open>
            <Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
-            <EmergencyStop class="adjust-emergency-button"/>
+            <EmergencyStop :vehicleName="vehicleName" class="adjust-emergency-button"/>
        </div>
    </div>
 </template>
--- 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");
--- 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,
@ -15,10 +13,19 @@ let testObject = {
 </script>

 <template>
-  <!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->

-  <Coordinate :coordinates="testObject"></Coordinate>
+  <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>

@ -33,18 +40,14 @@ let testObject = {
  width: 200px;  */
 }

-.border_div_2 {
-  display: flex;
-  border: 0.4em solid black;
-  height: 180px;
-  width: 380px;
-  /* height: 100px;
-  width: 200px;  */
+.altitude-outer-div {
+  height: 50;
+  width: 10%;
 }

-.additional_battery_prop {
-  top: 4%;
-  margin-right: 2%;
+.altimeter-outer-div {
+  height: 50;
+  width: 10%;
 }

 </style>
--- a/src/views/CamFocus.vue
+++ b/src/views/CamFocus.vue
@ -1,5 +1,7 @@
 <script setup lang="ts">
-
+import Airspeed from "../components/FlightComponents/Airspeed.vue";
+import Altimeter from "../components/FlightComponents/Altimeter.vue";
+import Altitude from "../components/FlightComponents/Altitude.vue";
 import Camera from "../components/Camera.vue";
 import { useRoute } from 'vue-router';
 const route = useRoute();
@ -8,6 +10,7 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
 </script>

 <template>
+  <div class="cam-focus-screen-div">
    <div class="camera-container">
        <div class="camera-wrapper">
            <router-link to="/" class="back">Back</router-link>
@ -15,11 +18,33 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
            <!-- Back button -->
        </div>
    </div>
+
+  <div class="vehicle-info-container">
+    <div class="flight-indicator">
+        <Altitude :pitch=2 :roll=10></Altitude>
+    </div>
+
+    <div class="flight-indicator">
+        <Altimeter :altitude=200></Altimeter>
+    </div>
+
+    <div class="flight-indicator">
+        <Airspeed :airspeed=100></Airspeed>
+    </div>
+  </div>
+</div>
 </template>
  
 <style scoped>
+.cam-focus-screen-div {
+    display:flex;
+    height: 90vh; 
+    width: 100%;
+}
+
 .camera-container {
-    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    /* height: 90vh;  */
+    height: 100%; 
    width: 75%;
    display: flex; /* Use flexbox to align items vertically */
    justify-content: center; /* Center the child element horizontally */
@ -40,4 +65,19 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
    color: black;
    cursor: pointer;
  }
+  .vehicle-info-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1%;
+    height: 100%; 
+    width: 25%;
+    /* background-color: pink; */
+}
+.flight-indicator{
+    position: relative;
+    width: 45%;
+    border: 1px solid black;
+    padding-bottom: 2%;
+}
+
 </style>
Author	SHA1	Message	Date
chillwafflez	b9aef7ff1c	added flight components to CamFocus to temporary position	2024-04-14 06:07:06 -07:00
chillwafflez	215671271b	Merge branch 'flight-indicators' into emergency-stop-and-CSS-fixes Merging to get flight-indicator components	2024-04-14 05:38:14 -07:00
chillwafflez	03babd3db4	Merge branch 'main' of https://github.com/Northrop-Grumman-Collaboration-Project/gcs-user-interface into flight-indicators	2024-04-14 05:28:57 -07:00
chillwafflez	b199c227da	added method in Stop Modal when user clicks yes	2024-04-14 05:25:14 -07:00
chillwafflez	95e667a3cc	added way for VehicleTitle component to display vehicle icon based on vehicle name prop	2024-04-14 04:06:55 -07:00
chillwafflez	cc9c0db9bc	added preliminary emergency stop modal that pops up if user clicks on emergency stop button	2024-04-12 04:26:20 -07:00
chillwafflez	4bef4e69cd	added labels for each flight indicator component	2024-03-31 22:39:53 -07:00
chillwafflez	0b3d94c853	Merge branch 'routers' of https://github.com/Northrop-Grumman-Collaboration-Project/gcs-user-interface into routers	2024-03-23 01:26:14 -07:00
chillwafflez	0dfac9a2e6	added flight components from vue-flight-indicators library to test	2024-03-23 01:22:41 -07:00