put Battery and Connection components onto 4Cam screen. May need to adjust Battery and Connection sizing if interfering with elements in Camera div

src/components/VehicleStatus/Battery.vue

@@ -50,10 +50,8 @@
     .outer_div {
         display: flex;
         position: relative;
-        /* height: 110px;
+        height: 18%;
-        width: 225px;     */
+        width: 18%; 
-        height: 12%;
-        width: 12%;  
     }
 
     .battery_widget {

src/components/VehicleStatus/Connection.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="outer_div">
-        <div class="container">
+        <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>
 
@@ -40,15 +40,15 @@
         height: 25%;
         width: 10%;  
     }
-    .container {
+    .connection-container {
         position: relative;
         justify-content: center;
         display: flex;
-        gap: 0.1em;
+        gap: 0.05em;
         height: 100%;
         width: 100%;
         border-radius: 12%;
-        background-color: white;
+        /* background-color: white; */
     }
     .bar {
         width:100%;
@@ -69,7 +69,8 @@
         position: absolute;
         left: 110%;
         bottom: 0%;
-        width: 120%;
+        width: 180%;
+        font-size:0.8em;
     }
     
 </style> 

src/testDisplayComponents.vue

@@ -6,15 +6,21 @@ import Connection from './components/VehicleStatus/Connection.vue';
 </script>
 
 <template>
-  <h2>Below is the Connection component</h2>
+  <!-- <h2>Below is the Connection component</h2>
   <div class="border_div">
-    <Connection :latency=56 />                    <!-- pass in latency into latency prop !-->
+    <Connection :latency=100 />                    
-  </div>
+  </div> -->
 
 
-  <h2>Below is the Battery component</h2>
+  <!-- <h2>Below is the Battery component</h2>
   <div class="border_div">
-    <Battery :percentage=12 :charging="false"/>    <!-- pass in the current percentage into percentage prop. charging is a boolean !-->
+    <Battery :percentage=12 :charging="false"/>    pass in the current percentage into percentage prop. charging is a boolean ! -->
+  <!-- </div> -->
+
+  <h2>Below is both in one div</h2>
+  <div class="border_div_2">
+    <Battery :percentage=12 :charging="false" class="additional_battery_prop"/>    
+    <Connection :latency=56 />                    
   </div>
 
 </template>
@@ -30,4 +36,18 @@ import Connection from './components/VehicleStatus/Connection.vue';
   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/fourCam.vue

@@ -1,21 +1,61 @@
 <script setup lang="ts">
+import Battery from '../components/VehicleStatus/Battery.vue';
+import Connection from '../components/VehicleStatus/Connection.vue';
 
 import Camera from "../components/Camera.vue";
 </script>
 
 <template>
     <div class="grid">
-        <div>
+        <div style="position: relative;">
-            <Camera :cameraNumber="1"/>
-        </div>
-        <div>
             <Camera :cameraNumber="2"/>
+            <div class="status_div">        <!-- the Battery and Connection component's size is dependent on its parent element. So changing 'status_div' size will change their size-->
+                <Battery :percentage=89 :charging="false" class="adjust_Battery"/>
+                <Connection :latency=65 />   
+            </div>
         </div>
-        <div>
+
+        <div style="position: relative;">
             <Camera :cameraNumber="2"/>
+            <div class="status_div">
+                <Battery :percentage=12 :charging="false" class="adjust_Battery"/>
+                <Connection :latency=3 />   
+            </div>
         </div>
-        <div>
+
+        <div style="position: relative;">
+            <Camera :cameraNumber="2"/>
+            <div class="status_div">
+                <Battery :percentage=46 :charging="false" class="adjust_Battery"/>
+                <Connection :latency=82 />   
+            </div>
+        </div>
+
+        <div style="position: relative;">
             <Camera :cameraNumber="1"/>
+            <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%; 
+  }
+</style>