From 5c7e9d23bd26d05ca720faa7ddbdea9309bc83b6 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Tue, 5 Mar 2024 01:32:15 -0800
Subject: [PATCH 1/8] Added Connection component, moved Battery and Connection
 to VehicleStatus folder

---
 .../{ => VehicleStatus}/Battery.vue           |  2 +-
 src/components/VehicleStatus/Connection.vue   | 75 +++++++++++++++++++
 src/testDisplayComponents.vue                 | 14 ++--
 3 files changed, 84 insertions(+), 7 deletions(-)
 rename src/components/{ => VehicleStatus}/Battery.vue (98%)
 create mode 100644 src/components/VehicleStatus/Connection.vue

diff --git a/src/components/Battery.vue b/src/components/VehicleStatus/Battery.vue
similarity index 98%
rename from src/components/Battery.vue
rename to src/components/VehicleStatus/Battery.vue
index e226761..ba88a71 100644
--- a/src/components/Battery.vue
+++ b/src/components/VehicleStatus/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>
diff --git a/src/components/VehicleStatus/Connection.vue b/src/components/VehicleStatus/Connection.vue
new file mode 100644
index 0000000..de07956
--- /dev/null
+++ b/src/components/VehicleStatus/Connection.vue
@@ -0,0 +1,75 @@
+<template>
+    <div class="outer_div">
+        <div class="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 <= 30" class="grayed_bar" style='height: 40%'></div>
+            <div v-else class="bar" style='height: 40%'></div>
+
+            <div v-if="latency <= 50" class="grayed_bar" style='height: 60%'></div>
+            <div v-else class="bar" style='height: 60%'></div>
+
+            <div v-if="latency <= 70" 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%;  
+    }
+    .container {
+        position: relative;
+        justify-content: center;
+        display: flex;
+        gap: 0.1em;
+        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: 120%;
+    }
+    
+</style> 
\ No newline at end of file
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index 943aa5d..9ef015a 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -1,18 +1,20 @@
-<script setup>
-import Battery from './components/Battery.vue';
+<!-- Using this to see how the Battery and Connection components look -->
 
+<script setup>
+import Battery from './components/VehicleStatus/Battery.vue';
+import Connection from './components/VehicleStatus/Connection.vue';
 </script>
 
 <template>
   <h2>Below is the Connection component</h2>
-  <!-- <div class="bruh">
-    <Connection :latency=20 />
-  </div> -->
+  <div class="border_div">
+    <Connection :latency=100 />                    <!-- pass in latency into latency prop !-->
+  </div>
 
 
   <h2>Below is the Battery component</h2>
   <div class="border_div">
-    <Battery :percentage=10 :charging="false"/>
+    <Battery :percentage=6 :charging="false"/>    <!-- pass in the current percentage into percentage prop. charging is a boolean !-->
   </div>
 
 </template>

From 3b8e866e74b7a0d6272772259329d987b62bd7d7 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Tue, 5 Mar 2024 12:53:41 -0800
Subject: [PATCH 2/8] fixed latency ranges for connection component

---
 src/components/VehicleStatus/Connection.vue | 6 +++---
 src/testDisplayComponents.vue               | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/VehicleStatus/Connection.vue b/src/components/VehicleStatus/Connection.vue
index de07956..22886a7 100644
--- a/src/components/VehicleStatus/Connection.vue
+++ b/src/components/VehicleStatus/Connection.vue
@@ -4,13 +4,13 @@
             <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 <= 30" class="grayed_bar" style='height: 40%'></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 <= 50" class="grayed_bar" style='height: 60%'></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 <= 70" class="grayed_bar" style='height: 80%'></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>
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index 9ef015a..6ed6af2 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -8,13 +8,13 @@ import Connection from './components/VehicleStatus/Connection.vue';
 <template>
   <h2>Below is the Connection component</h2>
   <div class="border_div">
-    <Connection :latency=100 />                    <!-- pass in latency into latency prop !-->
+    <Connection :latency=56 />                    <!-- pass in latency into latency prop !-->
   </div>
 
 
   <h2>Below is the Battery component</h2>
   <div class="border_div">
-    <Battery :percentage=6 :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>
 
 </template>

From 138119ed0a567997c032649f423a5ff782664bd2 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Wed, 6 Mar 2024 00:16:47 -0800
Subject: [PATCH 3/8] 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    |  6 +--
 src/components/VehicleStatus/Connection.vue | 11 +++--
 src/testDisplayComponents.vue               | 30 ++++++++++--
 src/views/fourCam.vue                       | 54 ++++++++++++++++++---
 4 files changed, 80 insertions(+), 21 deletions(-)

diff --git a/src/components/VehicleStatus/Battery.vue b/src/components/VehicleStatus/Battery.vue
index ba88a71..d85d569 100644
--- a/src/components/VehicleStatus/Battery.vue
+++ b/src/components/VehicleStatus/Battery.vue
@@ -50,10 +50,8 @@
     .outer_div {
         display: flex;
         position: relative;
-        /* height: 110px;
-        width: 225px;     */
-        height: 12%;
-        width: 12%;  
+        height: 18%;
+        width: 18%; 
     }
 
     .battery_widget {
diff --git a/src/components/VehicleStatus/Connection.vue b/src/components/VehicleStatus/Connection.vue
index 22886a7..741c822 100644
--- a/src/components/VehicleStatus/Connection.vue
+++ b/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> 
\ No newline at end of file
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index 6ed6af2..a2f96b9 100644
--- a/src/testDisplayComponents.vue
+++ b/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 !-->
-  </div>
+    <Connection :latency=100 />                    
+  </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>
diff --git a/src/views/fourCam.vue b/src/views/fourCam.vue
index bf9d7c6..f57855c 100644
--- a/src/views/fourCam.vue
+++ b/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>
-            <Camera :cameraNumber="1"/>
-        </div>
-        <div>
+        <div style="position: relative;">
             <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>
\ No newline at end of file
+</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>
\ No newline at end of file

From 31af224028092e2891406efe440641a1c4125dab Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Wed, 6 Mar 2024 21:59:18 -0800
Subject: [PATCH 4/8] fixed issue #10

---
 src/main.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 5eea099..c33641e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import "./styles.css";
 import App from "./App.vue";
+import router from "./router";
 
-createApp(App).mount("#app");
+createApp(App).use(router).mount("#app");

From cc9e8a1e966be5aa5982dc98673e0fce16501014 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Fri, 8 Mar 2024 01:02:53 -0800
Subject: [PATCH 5/8] put battery and connection component in same div as
 camera component

---
 src/views/fourCam.vue | 49 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/views/fourCam.vue b/src/views/fourCam.vue
index f57855c..dff8af1 100644
--- a/src/views/fourCam.vue
+++ b/src/views/fourCam.vue
@@ -7,36 +7,45 @@ import Camera from "../components/Camera.vue";
 
 <template>
     <div class="grid">
-        <div style="position: relative;">
+        <div style="position: relative; display: flex;">
             <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=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>
 
-        <div style="position: relative;">
+        <div style="position: relative; display: flex;">
             <Camera :cameraNumber="2"/>
-            <div class="status_div">
+            <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>
 
-        <div style="position: relative;">
+        <div style="position: relative; display: flex;">
             <Camera :cameraNumber="2"/>
-            <div class="status_div">
+            <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>
 
-        <div style="position: relative;">
+        <div style="position: relative; display: flex;">
             <Camera :cameraNumber="1"/>
-            <div class="status_div">
+            <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>
     </div>
 </template>
@@ -58,4 +67,20 @@ it directly in their file component's style*/
     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%;
+  }
 </style>
\ No newline at end of file

From 89f0b729c716d501e39a5045d6bb3e258cbddd8d Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Fri, 8 Mar 2024 12:41:45 -0800
Subject: [PATCH 6/8] Removed Icon

---
 src/components/Navbar.vue | 1 -
 src/views/fourCam.vue     | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index f198508..494a502 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -20,7 +20,6 @@ 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>
diff --git a/src/views/fourCam.vue b/src/views/fourCam.vue
index f57855c..01770ca 100644
--- a/src/views/fourCam.vue
+++ b/src/views/fourCam.vue
@@ -16,7 +16,7 @@ import Camera from "../components/Camera.vue";
         </div>
 
         <div style="position: relative;">
-            <Camera :cameraNumber="2"/>
+            <Camera :cameraNumber="1"/>
             <div class="status_div">
                 <Battery :percentage=12 :charging="false" class="adjust_Battery"/>
                 <Connection :latency=3 />   
@@ -24,7 +24,7 @@ import Camera from "../components/Camera.vue";
         </div>
 
         <div style="position: relative;">
-            <Camera :cameraNumber="2"/>
+            <Camera :cameraNumber="1"/>
             <div class="status_div">
                 <Battery :percentage=46 :charging="false" class="adjust_Battery"/>
                 <Connection :latency=82 />   
@@ -32,7 +32,7 @@ import Camera from "../components/Camera.vue";
         </div>
 
         <div style="position: relative;">
-            <Camera :cameraNumber="1"/>
+            <Camera :cameraNumber="2"/>
             <div class="status_div">
                 <Battery :percentage=0 :charging="false" class="adjust_Battery"/>
                 <Connection :latency=5 />   

From 97664a179001a954f34fc8d774708f48782ab2d6 Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Fri, 8 Mar 2024 13:19:02 -0800
Subject: [PATCH 7/8] localhost cam ip

---
 src/components/Camera.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Camera.vue b/src/components/Camera.vue
index 7fce0ee..9b28d62 100644
--- a/src/components/Camera.vue
+++ b/src/components/Camera.vue
@@ -3,7 +3,7 @@
     props: ['cameraNumber'],
     data() {
       return {
-        localIp: 'http://192.168.1.173', //maybe change accordingly
+        localIp: 'http://localhost', //maybe change accordingly .env?
         port: '5000', //maybe change accordingly
         cameraUrls: { 
           1: 'video_feed', //cam url here

From 6ce48a6923f995670ba75f104df3843ecde5adb8 Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Fri, 15 Mar 2024 12:46:14 -0700
Subject: [PATCH 8/8] Added test camServer.py

---
 camServer.py | 44 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 camServer.py

diff --git a/camServer.py b/camServer.py
new file mode 100644
index 0000000..5926adb
--- /dev/null
+++ b/camServer.py
@@ -0,0 +1,44 @@
+#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)
\ No newline at end of file