Adding emergency stop button component

camServer.py

@@ -1,44 +0,0 @@
-#111!/usr/bin/env python
-# -*- coding: utf-8 -*
-
-#sudo apt-get install python3-flask
-#pip3 install opencv-python
-
-from flask import Flask, render_template, Response
-import cv2
-
-app = Flask(__name__)
-#app.config["CACHE_TYPE"] = "null"
-
-@app.route('/')
-def index():
-    """Video streaming home page."""
-    return render_template('index.html')
-
-vs = cv2.VideoCapture(0)  # Camera 1
-vs2 = cv2.VideoCapture(1)  # Camera 2
-def gen(vs):
-    """Video streaming generator function."""
-    
-    while True:
-        ret,frame=vs.read()
-        ret, jpeg = cv2.imencode('.jpg', frame)
-        frame=jpeg.tobytes()
-        yield (b'--frame\r\n'
-        b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
-        
-    vs.release()
-    cv2.destroyAllWindows() 
-
-@app.route('/video_feed')
-def video_feed():
-    """Video streaming route. Put this in the src attribute of an img tag."""
-    return Response(gen(vs),mimetype='multipart/x-mixed-replace; boundary=frame')
-
-@app.route('/video_feed2')
-def video_feed2():
-    """Video streaming route for camera 2."""
-    return Response(gen(vs2), mimetype='multipart/x-mixed-replace; boundary=frame')
-
-if __name__ == '__main__': 
-    app.run(host='0.0.0.0', port =5000, debug=True, threaded=True)

src-tauri/tauri.conf.json

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

src/App.vue

@@ -1,13 +1,53 @@
 <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 Battery from "./components/Battery.vue";
 import { RouterView } from "vue-router";
+import EmergencyStop from "./components/EmergencyStop.vue";
 </script>
 
 <template>
   <div>
     <Navbar/>
+    <EmergencyStop/>
   </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/Battery.vue

@@ -5,7 +5,7 @@
             <div :class="percentageCSS" :style="[percentage > 15 ? { width: percentage + '%' } : { width: '15%'}]"></div>
         </div>
         <div class="battery_widget"></div> 
-        <img class="lightingSymbol" :class="batteryStatus" src="..\..\assets\lightning-icon-png-5.png" >
+        <img class="lightingSymbol" :class="batteryStatus" src="..\assets\lightning-icon-png-5.png" >
     </div>
     
 </template>
@@ -50,8 +50,10 @@
     .outer_div {
         display: flex;
         position: relative;
-        height: 18%;
+        /* height: 110px;
-        width: 18%; 
+        width: 225px;     */
+        height: 12%;
+        width: 12%;  
     }
 
     .battery_widget {
@@ -106,7 +108,7 @@
     }
 
     #battery_progress {
-        background-color: rgb(83, 255, 83); 
+        background-color: rgb(116, 194, 92); 
         border-radius: 12%;
         height:100%;
         width: 100%; 
@@ -132,7 +134,7 @@
         height:100%;
     }
     .normalPercent {
-        background-color: rgb(87, 255, 87); 
+        background-color: rgb(116, 194, 92); 
         border-radius: 12%;
     }
 

src/components/Camera.vue

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

src/components/EmergencyStop.vue

@@ -0,0 +1,44 @@
+<template>
+    <button class="emergency-stop-button" @click="onStopClicked">
+      <img :src="buttonImage" alt="Emergency Stop All" />
+    </button>
+  </template>
+  
+  <script>
+  import buttonImage from '../assets/Emergency_Stop_All_Red.png';
+  
+  export default {
+    name: 'EmergencyStopButton',
+    props: {
+      buttonImage: {
+        type: String,
+        default: buttonImage
+      }
+    },
+    methods: {
+      onStopClicked() {
+        this.$emit('stop');
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .emergency-stop-button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+  
+  .emergency-stop-button img {
+    display: block; 
+    width: 100%;
+    height: 50px; 
+  }
+  </style>
+  
+  
+  
+  
+  

src/components/Navbar.vue

@@ -12,14 +12,6 @@ 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>
@@ -28,6 +20,7 @@ export default {
     <nav style="background-color: #011949; padding: 10px;">
       <div style="display: flex; align-items: center;">
         <router-link to="/" style="text-decoration: none;">
+          <img src="../assets/NGCP.svg" alt="" width="40" height="24">
           <span style="font-weight: bold; font-size: 1.2rem; margin-left: 10px;">NG</span>
           <span style="font-weight: bold; font-size: 1.2rem; color: white">CP</span>
         </router-link>
@@ -79,8 +72,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;" @click="openNewWindow">Link</a></li>
+          <li><a href="#" style="text-decoration: none;">Link</a></li>
-          <li><router-link to="/1" style="text-decoration: none;">Disabled</router-link></li>
+          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
         </ul>
       </div>
     </nav>

src/components/VehicleStatus/Connection.vue

@@ -1,76 +0,0 @@
-<template>
-    <div class="outer_div">
-        <div class="connection-container">
-            <div v-if="latency == 0" class="grayed_bar" style='height: 20%'></div>
-            <div v-else class="bar" style='height: 20%'></div>
-
-            <div v-if="latency >= 70 || latency == 0" class="grayed_bar" style='height: 40%'></div>
-            <div v-else class="bar" style='height: 40%'></div>
-
-            <div v-if="latency >= 60 || latency == 0" class="grayed_bar" style='height: 60%'></div>
-            <div v-else class="bar" style='height: 60%'></div>
-
-            <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> -->
-    </div>
-    
-    </template>
-    
-<script lang="ts">
-
-    export default {
-        data() {
-            return {};    
-        },
-        props: {
-            latency: { required: true, type: Number},
-        },
-        computed: {
-        }
-    };
-</script>
-    
-    
-<style scoped>
-    .outer_div {
-        display: flex;
-        position: relative;
-        height: 25%;
-        width: 10%;  
-    }
-    .connection-container {
-        position: relative;
-        justify-content: center;
-        display: flex;
-        gap: 0.05em;
-        height: 100%;
-        width: 100%;
-        border-radius: 12%;
-        /* background-color: white; */
-    }
-    .bar {
-        width:100%;
-        background-color: white;
-        border: 0.1em solid black;
-        margin-top: auto;
-        border-radius: 20%;
-    }
-    .grayed_bar {
-        width:100%;
-        background-color: rgb(136, 135, 135);
-        border: 0.1em solid black;
-        margin-top: auto;
-        opacity: 0.2;
-        border-radius: 20%;
-    }
-    .connection_number {
-        position: absolute;
-        left: 110%;
-        bottom: 0%;
-        width: 180%;
-        font-size:0.8em;
-    }
-    
-</style> 

src/components/VehicleStatus/Coordinate.vue

@@ -1,37 +0,0 @@
-<template>
-    <div class="coordinate-container">
-        <div class="coordinate-div">Longitude: {{ coordinates.longitude }}</div>
-        <div class="coordinate-div">Latitude: {{ coordinates.latitude }}</div>
-    </div>
-</template>
-    
-<script lang="ts">
-    export default {
-        props: {
-            coordinates: { required: true, type: Object }
-        },
-        computed: {
-
-        }
-    };
-</script>
-    
-    
-<style scoped>
-    .coordinate-container {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        width: 92%;
-    }
-
-    .coordinate-div {
-        position: relative;
-        padding: 1%;
-        font-size: 1.2em;
-        color: black;
-        width: 100%;
-    }
-
-
-</style> 

src/components/VehicleStatus/EmergencyStop.vue

@@ -1,40 +0,0 @@
-<template>
-    <div class="emergency-stop-div">
-        <button class="emergency-button"> EMERGENCY STOP </button>
-    </div>
-    
-</template>
-    
-<script lang="ts">
-
-    export default {
-        data() {
-            return {};    
-        }
-    };
-</script>
-    
-    
-<style scoped>
-    .emergency-stop-div {
-        position: relative;
-        display: flex;
-        height: 20%;
-        width: 78%;  
-        text-align: center;
-    }
-
-    .emergency-button {
-        position: relative;
-        display: inline-block;
-        width: 100%;
-        height: 100%;
-        background-color: rgb(255, 57, 57);
-        font-size: 0.96em;
-        transition: background-color 0.20s;
-    } 
-
-    .emergency-button:hover {
-        background-color: rgb(192, 40, 40);
-    }
-</style> 

src/components/VehicleStatus/Open.vue

@@ -1,30 +0,0 @@
-<template>
-    <button class="open-button">OPEN</button>
-</template>
-    
-<script lang="ts">
-
-    export default {
-        data() {
-            return {};    
-        }
-    };
-</script>
-    
-    
-<style scoped>
-    .open-button {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        width: 30%;
-        height: 18%;
-        background-color: #011949;
-        font-size: 1em;
-        transition: background-color 0.20s;
-    } 
-
-    .open-button:hover {
-        background-color: #194398;
-    }
-</style> 

src/components/VehicleStatus/VehicleTitle.vue

@@ -1,55 +0,0 @@
-<template>
-    <div class="vehicle-title-container">
-        <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>
-    
-    </template>
-    
-<script lang="ts">
-
-    export default {
-        props: {
-            vehicleName: { required: true, type: String },
-            vehicleStatus: { required: true, type: String },
-            vehicleIcon: { type: Object }
-        }
-    };
-</script>
-    
-    
-<style scoped>
-
-    .vehicle-title-container {
-        position: relative;
-        width: 100%;
-        padding-top: 8%;
-        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.4em;  
-        margin-top: 5%;
-    }
-
-    .vehicle-icon {
-        position: relative;
-        width: 22%;
-    }
-
-</style> 

src/components/VehicleStatusComponent.vue

@@ -1,138 +0,0 @@
-<script lang="ts">
-    import Battery from './VehicleStatus/Battery.vue';
-    import Connection from './VehicleStatus/Connection.vue';
-    import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
-    import EmergencyStop from './VehicleStatus/EmergencyStop.vue';
-    import Open from './VehicleStatus/Open.vue';
-    import Coordinate from './VehicleStatus/Coordinate.vue';
-
-    export default {
-        props: {
-            vehicleName: { required: true, type: String},
-            vehicleStatus: { required: true, type: String},
-            batteryPct: {required: true, type: Number},
-            latency: { required: true, type: Number },
-            coordinates: { required: true, type: Object }
-        },
-        components: {
-            VehicleTitle,
-            Battery,
-            Connection,
-            EmergencyStop,
-            Open,
-            Coordinate
-        },
-    };
-</script>
-
-<template>
-    <div class="status_container">
-
-        <!-- 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>
-            <EmergencyStop class="adjust-emergency-button"/>
-        </div>
-    </div>
-</template>
-    
-    
-<style scoped>
-    .status_container {
-        display: flex;
-        position: relative;
-        height: 100%;
-        /* width: 25%;  */
-        width: 100%; 
-        border: 0.1em solid black;
-        background-color: white;
-        color: black;
-    }
-
-    .left-container {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: 46%;
-    }
-
-    .right-container {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        height: 100%;   
-        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: 84%;
-        width: 34%;
-        margin-left: 8%;
-    }
-
-    .adjust-connection {
-        height: 92%;
-        width: 26%; 
-        padding-left: 10%;
-    }
-
-    .adjust-emergency-button {
-        margin-top: auto;
-        margin-bottom: 5%;  
-        margin-left: 10%;
-    }
-
-    .adjust-open-button {
-        margin-top: 4%;
-        margin-left: 58%;
-    }
-
-    .adjust-coordinates {
-        margin-top: 18%;
-        margin-left: 8%;   
-    }
- 
-</style> 

src/main.ts

@@ -1,6 +1,5 @@
 import { createApp } from "vue";
 import "./styles.css";
 import App from "./App.vue";
-import router from "./router";
 
-createApp(App).use(router).mount("#app");
+createApp(App).mount("#app");

src/router/index.js

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

src/testDisplayComponents.vue

@@ -1,24 +1,19 @@
-<!-- Using this to see how the Battery and Connection components look -->
-
 <script setup>
-import Battery from './components/VehicleStatus/Battery.vue';
+import Battery from './components/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'
 
-
-let testObject = {
-        longitude: -177.9325790,
-        latitude: 33.9325790
-    }
 </script>
 
 <template>
-  <!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
+  <h2>Below is the Connection component</h2>
+  <!-- <div class="bruh">
+    <Connection :latency=20 />
+  </div> -->
 
-  <Coordinate :coordinates="testObject"></Coordinate>
 
+  <h2>Below is the Battery component</h2>
+  <div class="border_div">
+    <Battery :percentage=10 :charging="false"/>
+  </div>
 
 </template>
 
@@ -33,18 +28,4 @@ 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>

src/views/CamFocus.vue

@@ -1,43 +0,0 @@
-<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,99 +0,0 @@
-<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 class="hover" style="position: relative; display: flex;" @click="handleClick(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-->
-            <!-- <div class="status_div">        
-                <Battery :percentage=89 :charging="false" class="adjust_Battery"/>
-                <Connection :latency=65 />   
-            </div> -->
-        </div>
-
-        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
-            <Camera :cameraID="1"/>
-            <Battery :percentage=12 :charging="false" class="battery_test"/>
-            <Connection :latency=3 class="connection_test"/>  
-            <!-- <div class="status_div">
-                <Battery :percentage=12 :charging="false" class="adjust_Battery"/>
-                <Connection :latency=3 />   
-            </div> -->
-        </div>
-
-        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
-            <Camera :cameraID="1"/>
-            <Battery :percentage=46 :charging="false" class="battery_test"/>
-            <Connection :latency=82 class="connection_test"/>   
-            <!-- <div class="status_div">
-                <Battery :percentage=46 :charging="false" class="adjust_Battery"/>
-                <Connection :latency=82 />   
-            </div> -->
-        </div>
-
-        <div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
-            <Camera :cameraID="1"/>
-            <Battery :percentage=0 :charging="false" class="battery_test"/>
-            <Connection :latency=5 class="connection_test"/>   
-            <!-- <div class="status_div">
-                <Battery :percentage=0 :charging="false" class="adjust_Battery"/>
-                <Connection :latency=5 />   
-            </div> -->
-        </div>
-    </div>
-</template>
-
-<style scoped>
-/* currently Battery and Connection's sizes are dependent on the parent element (status_div). If we want their own fixed size, can change 
-it directly in their file component's style*/
-  .status_div {
-    display: flex;
-    position: absolute;
-    top: 1%;
-    left:4%;
-    /* border: 0.4em solid black; */
-    height: 130px;
-    width: 260px;
-  }
-
-  .adjust_Battery {
-    top: 5%;
-    margin-right: 3%; 
-  }
-
-  .battery_test {
-    position:absolute; 
-    height: 7%;
-    width: 6.3%;
-    top: 4%; 
-    left: 2%;
-  }
-
-  .connection_test {
-    position:absolute; 
-    height: 11%;
-    width: 4%; 
-    top: 1%;
-    left: 9.5%;
-  }
-
-  .hover{
-    cursor: pointer;
-  }
-</style>

src/views/StaticScreen.vue

@@ -1,62 +0,0 @@
-<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/fourCam.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+    <div class="grid">
+        <div>
+            <Camera :cameraNumber="1"/>
+        </div>
+        <div>
+            <Camera :cameraNumber="2"/>
+        </div>
+        <div>
+            <Camera :cameraNumber="2"/>
+        </div>
+        <div>
+            <Camera :cameraNumber="1"/>
+        </div>
+    </div>
+</template>

src/views/testMapScreen.vue

@@ -1,58 +0,0 @@
-<!-- <script setup> -->
-<script setup>
-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>
-  <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=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="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
-        <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
-
-    </div>
-  
-  </div>
-
-
-
-</template>
-
-<style scoped>
-
-.screen_div {
-    display: flex;
-    border: 0.003em solid black;
-    height: 88vh;
-    width: 99vw;
-}
-
-.status_rightside {
-    display: flex;
-    flex-direction: column;
-    border: 0.003em solid black;
-    height: 100%;
-    width: 23%;
-    margin-left: auto
-}
-
-.map_div {
-    background-color: pink;
-}
-
-</style>