Merge branch 'main' of https://github.com/Northrop-Grumman-Collaboration-Project/gcs-user-interface into flight-indicators

package-lock.json

@@ -12,7 +12,6 @@
         "vue": "^3.2.45",
         "vue-flight-indicators": "^0.1.1",
         "vue-router": "^4.3.0"
-
       },
       "devDependencies": {
         "@tauri-apps/cli": "^1.4.0",

src-tauri/tauri.conf.json

@@ -37,9 +37,14 @@
       {
         "fullscreen": false,
         "resizable": true,
-        "title": "Interface",
+        "title": "Camera Screen",
         "width": 800,
         "height": 600
+      },
+      {
+        "label": "StaticScreen",
+        "title": "Over View",
+        "url": "http://localhost:4000/#/1"
       }
     ]
   }

src/App.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import Greet from "./components/Greet.vue";
 import Navbar from "./components/Navbar.vue";
-import Camera from "./components/Camera.vue";
 import { RouterView } from "vue-router";
 </script>
 
@@ -12,39 +8,6 @@ import { RouterView } from "vue-router";
     <Navbar/>
   </div>
   <RouterView/>
-  <!-- <div class="container">
-    <h1>Welcome to Tauri!</h1>
-    <div class="row">
-      <a href="https://vitejs.dev" target="_blank">
-        <img src="/vite.svg" class="logo vite" alt="Vite logo" />
-      </a>
-      <a href="https://tauri.app" target="_blank">
-        <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
-      </a>
-      <a href="https://vuejs.org/" target="_blank">
-        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-      </a>
-    </div>
-
-    <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
-
-    <p>
-      Recommended IDE setup:
-      <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-      +
-      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-      +
-      <a href="https://github.com/tauri-apps/tauri-vscode" target="_blank"
-        >Tauri</a
-      >
-      +
-      <a href="https://github.com/rust-lang/rust-analyzer" target="_blank"
-        >rust-analyzer</a
-      >
-    </p>
-
-
-  </div> -->
 </template>
 
 <style scoped>

src/components/Camera.vue

@@ -1,6 +1,6 @@
   <script>
   export default {
-    props: ['cameraNumber'],
+    props: ['cameraID'],
     data() {
       return {
         localIp: 'http://localhost', //maybe change accordingly .env?
@@ -25,15 +25,15 @@
       //     console.error('Error accessing camera:', error);
       //   }
       // },
-        getCameraImageUrl(cameraNumber) {
+        getCameraImageUrl(cameraID) {
-          return `${this.localIp}:${this.port}/${this.cameraUrls[cameraNumber]}`;
+          return `${this.localIp}:${this.port}/${this.cameraUrls[cameraID]}`;
       }
     }
   };
   </script>
   <template>
     <div class="box video-section">
-        <img :src="getCameraImageUrl(cameraNumber)" class="video-image">
+        <img :src="getCameraImageUrl(cameraID)" class="video-image">
     </div>
   </template>
   <style scoped>

src/components/Navbar.vue

@@ -12,6 +12,14 @@ export default {
     toggleNavbar() {
       this.isNavbarOpen = !this.isNavbarOpen;
     }
+  },
+  openNewWindow() {
+      // Open a new window with specified URL
+      if (window.tauri) {
+        window.tauri.open('/');
+      } else {
+        console.error('Tauri API is not available.');
+      }
     }
 };
 </script>
@@ -71,8 +79,8 @@ export default {
         <ul style="list-style-type: none; padding-left: 0;">
           <!-- Insert your menu items here -->
           <li><a href="#" style="text-decoration: none;">Home</a></li>
-          <li><a href="#" style="text-decoration: none;">Link</a></li>
+          <li><a href="#" style="text-decoration: none;" @click="openNewWindow">Link</a></li>
-          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
+          <li><router-link to="/1" style="text-decoration: none;">Disabled</router-link></li>
         </ul>
       </div>
     </nav>

src/components/VehicleStatus/Connection.vue

@@ -13,7 +13,7 @@
             <div v-if="latency >= 40 || latency == 0" class="grayed_bar" style='height: 80%'></div>
             <div v-else class="bar" style='height: 80%'></div>
         </div>
-        <span class="connection_number">{{ latency }} ms</span>
+        <!-- <span class="connection_number">{{ latency }} ms</span> -->
     </div>
     
     </template>

src/components/VehicleStatus/Coordinate.vue

@@ -22,8 +22,7 @@
         position: relative;
         display: flex;
         flex-direction: column;
-        width: 75%;
+        width: 92%;
-        /* border: 0.05em solid black; */
     }
 
     .coordinate-div {

src/components/VehicleStatus/EmergencyStop.vue

@@ -10,11 +10,7 @@
     export default {
         data() {
             return {};    
-        },
+        }
-        // props: {
-        // },
-        // computed: {
-        // }
     };
 </script>
     
@@ -24,7 +20,7 @@
         position: relative;
         display: flex;
         height: 20%;
-        width: 70%;  
+        width: 78%;  
         text-align: center;
     }
 
@@ -34,7 +30,8 @@
         width: 100%;
         height: 100%;
         background-color: rgb(255, 57, 57);
-        font-size: 1em;
+        font-size: 0.96em;
+        transition: background-color 0.20s;
     } 
 
     .emergency-button:hover {

src/components/VehicleStatus/Open.vue

@@ -1,8 +1,5 @@
 <template>
-    <!-- <div class="open-button-div">
     <button class="open-button">OPEN</button>
-    </div> -->
-    <button class="test-open-button">OPEN</button>
 </template>
     
 <script lang="ts">
@@ -10,41 +7,24 @@
     export default {
         data() {
             return {};    
-        },
+        }
-        // props: {
-        // },
-        // computed: {
-        // }
     };
 </script>
     
     
 <style scoped>
-    .open-button-div {
-        position: relative;
-        height: 25%;
-        width: 35%;  
-    }
-
     .open-button {
         position: relative;
-        display: inline-block;
+        display: flex;
-        width: 100%;
+        justify-content: center;
-        height: 100%;
-        background-color: #011949;
-        font-size: 1.3em;
-    } 
-
-    .test-open-button {
-        position: relative;
-        display: inline-block;
         width: 30%;
-        height: 20%;
+        height: 18%;
         background-color: #011949;
         font-size: 1em;
+        transition: background-color 0.20s;
     } 
 
-    .test-open-button:hover {
+    .open-button:hover {
-        background-color: #03369b;
+        background-color: #194398;
     }
 </style> 

src/components/VehicleStatus/VehicleTitle.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="vehicle-title-container">
-        <div class="vehicle-name-div"> {{ vehicleName }} </div>
+        <div class="vehicle-name-div"> 
-
+                {{ vehicleName }} 
+              <!--  <img src="../../assets/MEA.png" class="vehicle-icon"></img>--> 
+        </div>
         <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
     </div>
     
@@ -28,22 +30,26 @@
         padding-left: 6%;
     }
 
+    /* .vehicle-name-div {
+        position: relative;
+        font-size: 2.3em;
+    } */
+
     .vehicle-name-div {
         position: relative;
+        display: flex;
         font-size: 2.3em;
     }
 
     .vehicle-status-div {
         position: relative;
-        font-size: 1.6em;  
+        font-size: 1.4em;  
         margin-top: 5%;
     }
 
     .vehicle-icon {
         position: relative;
-        width: 12%;
+        width: 22%;
-        height: 12%;
-        /* vertical-align: middle; */
     }
 
 </style> 

src/components/VehicleStatusComponent.vue

@@ -31,10 +31,20 @@
         <!-- Left side of container (Name, Status, Battery, Connection)-->
         <div class="left-container">
             <VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
+            <div class="battery-status-container">
                 <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
+                <span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span>
+            </div>
+            <div class="connection-status-container">
                 <Connection :latency="latency" class="adjust-connection"/> 
+                <div class="connection-status-specifics">
+                    <span style="font-size: 0.9em;">Connection:</span>
+                    <span style="font-size: 0.9em;">Last Packet: {{ latency }} </span>
+                </div>
+            </div>
         </div>
 
+        <!-- Right side of container (Open button, Coordinates, Emergency Stop)-->
         <div class="right-container">
             <Open class="adjust-open-button"></Open>
             <Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
@@ -48,11 +58,9 @@
     .status_container {
         display: flex;
         position: relative;
-        height: 200px;
+        height: 100%;
-
         /* width: 25%;  */
         width: 100%; 
-
         border: 0.1em solid black;
         background-color: white;
         color: black;
@@ -63,7 +71,7 @@
         display: flex;
         flex-direction: column;
         height: 100%;
-        width: 40%;
+        width: 46%;
     }
 
     .right-container {
@@ -71,38 +79,60 @@
         display: flex;
         flex-direction: column;
         height: 100%;   
-        width: 60%; 
+        width: 54%; 
+    }
+
+    .battery-status-container {
+        display: flex;
+        position: relative;
+        width: 100%; 
+        height: 20%;
+        gap: 6%;
+        margin-top: auto;
+    }
+
+    .connection-status-container {
+        display: flex;
+        position: relative;
+        width: 100%; 
+        height: 30%;
+        margin-bottom: 2%;  
+      /*  margin-left: 10%;  */
+    }
+
+    .connection-status-specifics {
+        display: flex;
+        flex-direction: column;
+        padding-left: 3%;
+        padding-top: 6%;
     }
 
     .adjust-battery {
-        height: 17%;
+        height: 84%;
-        width: 34.5%;
+        width: 34%;
-        margin-top: auto;
         margin-left: 8%;
     }
 
     .adjust-connection {
-        height: 28%;
+        height: 92%;
         width: 26%; 
-        margin-top: 2%;
+        padding-left: 10%;
-        margin-bottom: 4%;  
-        margin-left: 10%; 
     }
 
     .adjust-emergency-button {
         margin-top: auto;
-        margin-bottom: 4%;  
+        margin-bottom: 5%;  
-        margin-left: 20%;
+        margin-left: 10%;
     }
 
     .adjust-open-button {
         margin-top: 4%;
-        margin-left: 60%;
+        margin-left: 58%;
     }
 
     .adjust-coordinates {
-        margin-top: 10%;
+        margin-top: 18%;
-        margin-left: 20%;   
+        margin-left: 8%;   
     }
  
 </style> 

src/main.ts

@@ -4,4 +4,4 @@ import App from "./App.vue";
 import router from "./router";
 import testDisplayComponents from "./testDisplayComponents.vue";
 
-createApp(testDisplayComponents).use(router).mount("#app");
+createApp(App).use(router).mount("#app");

src/router/index.js

@@ -1,14 +1,16 @@
 import { createRouter, createWebHashHistory } from "vue-router"
-import fourCam from "../views/fourCam.vue";
+import HomeScreen from "../views/HomeScreen.vue";
-import Cam1Focus from "../views/Cam1Focus.vue";
+import StaticScreen from "../views/StaticScreen.vue";
 import Cam2Focus from "../views/Cam2Focus.vue";
+import CamFocus from "../views/CamFocus.vue";
 import test from "../views/test.vue";
 
 
 const routes = [
-  { path: '/', component: fourCam },
+  { path: '/', component: HomeScreen },
-  { path: '/1', component: Cam1Focus },
+  { path: '/1', component: StaticScreen },
   { path: '/2', component: Cam2Focus },
+  { path: '/CamFocus/:id', component: CamFocus },
   { path: '/test', component: test },
 ]
 

src/views/CamFocus.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+import { useRoute } from 'vue-router';
+const route = useRoute();
+const cameraID = Number(route.params.id); // Assuming we're using camera Number 
+
+</script>
+
+<template>
+    <div class="camera-container">
+        <div class="camera-wrapper">
+            <router-link to="/" class="back">Back</router-link>
+            <Camera :cameraID="cameraID" />
+            <!-- Back button -->
+        </div>
+    </div>
+</template>
+  
+<style scoped>
+.camera-container {
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    width: 75%;
+    display: flex; /* Use flexbox to align items vertically */
+    justify-content: center; /* Center the child element horizontally */
+    align-items: center; /* Center the child element vertically */
+}
+.camera-wrapper {
+    position: relative; /* For positioning the button relative to the camera */
+    height: 100%; 
+    width: 100%;
+}
+.back {
+    position: absolute; /* Position the button relative to the container */
+    top: 10px;
+    left: 10px; 
+    padding: 5px 10px;
+    border: none;
+    background-color: lightgray;
+    color: black;
+    cursor: pointer;
+  }
+</style>

src/views/HomeScreen.vue

@@ -1,14 +1,23 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import Battery from '../components/VehicleStatus/Battery.vue';
 import Connection from '../components/VehicleStatus/Connection.vue';
-
 import Camera from "../components/Camera.vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const handleClick = (cameraID:number) => {
+  console.log("camera:" , cameraID);
+  router.push(`/CamFocus/${cameraID}`);}
 </script>
 
+
+
 <template>
     <div class="grid">
-        <div style="position: relative; display: flex;">
+        <div class="hover" style="position: relative; display: flex;" @click="handleClick(2)">
-            <Camera :cameraNumber="2"/>
+            <Camera :cameraID="2"/>
             <Battery :percentage=85 :charging="false" class="battery_test"/>
             <Connection :latency=65 class="connection_test"/>   
             <!-- the Battery and Connection component's size is dependent on its parent element. So changing 'status_div' size will change their size-->
@@ -18,8 +27,8 @@ import Camera from "../components/Camera.vue";
             </div> -->
         </div>
 
-        <div style="position: relative; display: flex;">
+        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
-            <Camera :cameraNumber="2"/>
+            <Camera :cameraID="1"/>
             <Battery :percentage=12 :charging="false" class="battery_test"/>
             <Connection :latency=3 class="connection_test"/>  
             <!-- <div class="status_div">
@@ -28,8 +37,8 @@ import Camera from "../components/Camera.vue";
             </div> -->
         </div>
 
-        <div style="position: relative; display: flex;">
+        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
-            <Camera :cameraNumber="2"/>
+            <Camera :cameraID="1"/>
             <Battery :percentage=46 :charging="false" class="battery_test"/>
             <Connection :latency=82 class="connection_test"/>   
             <!-- <div class="status_div">
@@ -38,8 +47,8 @@ import Camera from "../components/Camera.vue";
             </div> -->
         </div>
 
-        <div style="position: relative; display: flex;">
+        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
-            <Camera :cameraNumber="1"/>
+            <Camera :cameraID="1"/>
             <Battery :percentage=0 :charging="false" class="battery_test"/>
             <Connection :latency=5 class="connection_test"/>   
             <!-- <div class="status_div">
@@ -83,4 +92,8 @@ it directly in their file component's style*/
     top: 1%;
     left: 9.5%;
   }
+
+  .hover{
+    cursor: pointer;
+  }
 </style>

src/views/StaticScreen.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import Camera from "../components/Camera.vue";
+import Status from '../components/VehicleStatusComponent.vue';
+import NavBar from '../components/Navbar.vue';
+
+let testCoordinateObject = {
+        longitude: -177.9325790,
+        latitude: 33.9325790
+    }
+let testCoordinateObject2 = {
+    longitude: 40.748440,
+    latitude: -73.984559
+}
+</script>
+
+<template>
+  <div class="screen_div">
+    <!-- Map component will be placed below -->
+    <div class="map_div"></div>
+
+    <div class="four-status-rightside">
+        <!-- For final product, pass in a Vehicle Object instead that contains all of the information for the VehicleStatusComponent to display-->
+        <Status :batteryPct=100 :latency=50 :coordinates="testCoordinateObject2" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
+        <Status :batteryPct=48 :latency=30 :coordinates="testCoordinateObject" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
+        <Status :batteryPct=0 :latency=100 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
+        <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
+    </div>
+  </div>
+
+    <!-- <div class="camera-container">
+       this is static screen
+    </div> -->
+</template>
+  
+<style scoped>
+.camera-container {
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
+    width: 75%;
+    display: flex; /* Use flexbox to align items vertically */
+    justify-content: center; /* Center the child element horizontally */
+    align-items: center; /* Center the child element vertically */
+}
+
+.screen_div {
+    display: flex;
+    border: 0.003em solid black;
+    height: 89vh;
+    width: 99vw;
+}
+
+.four-status-rightside {
+    display: flex;
+    flex-direction: column;
+    border: 0.003em solid black;
+    height: 100%;
+    width: 23%;
+    margin-left: auto
+}
+
+.map_div {
+}
+</style>

src/views/testMapScreen.vue

@@ -7,16 +7,22 @@ let testCoordinateObject = {
         longitude: -177.9325790,
         latitude: 33.9325790
     }
+let testCoordinateObject2 = {
+    longitude: 40.748440,
+    latitude: -73.984559
+}
 
 </script>
 <template>
   <NavBar></NavBar>
   <div class="screen_div">
+    <!-- Map component will be placed below -->
     <div class="map_div"></div>
+
     <div class="status_rightside">
-        <Status :batteryPct=100 :latency=54 :coordinates="testCoordinateObject" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
+        <Status :batteryPct=100 :latency=50 :coordinates="testCoordinateObject2" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
         <Status :batteryPct=48 :latency=30 :coordinates="testCoordinateObject" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
-        <Status :batteryPct=0 :latency=97 :coordinates="testCoordinateObject" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
+        <Status :batteryPct=0 :latency=97 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
         <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
 
     </div>
@@ -32,7 +38,7 @@ let testCoordinateObject = {
 .screen_div {
     display: flex;
     border: 0.003em solid black;
-    height: 85vh;
+    height: 88vh;
     width: 99vw;
 }
 
@@ -41,7 +47,7 @@ let testCoordinateObject = {
     flex-direction: column;
     border: 0.003em solid black;
     height: 100%;
-    width: 25%;
+    width: 23%;
     margin-left: auto
 }