From 3ba58ef165331140e4d668bf78394bf4d0e41a75 Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Sat, 30 Mar 2024 22:24:23 -0700
Subject: [PATCH 1/6] Generalize components for reusablilty: FocusCam, FourCam
---
src/App.vue | 36 ------------------------------------
src/components/Camera.vue | 8 ++++----
src/router/index.js | 2 ++
src/views/CamFocus.vue | 24 ++++++++++++++++++++++++
src/views/fourCam.vue | 31 ++++++++++++++++++++++---------
5 files changed, 52 insertions(+), 49 deletions(-)
create mode 100644 src/views/CamFocus.vue
diff --git a/src/App.vue b/src/App.vue
index 9eb8283..e094329 100644
--- a/src/App.vue
+++ b/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,38 +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>
diff --git a/src/components/Camera.vue b/src/components/Camera.vue
index 9b28d62..d537daa 100644
--- a/src/components/Camera.vue
+++ b/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) {
- return `${this.localIp}:${this.port}/${this.cameraUrls[cameraNumber]}`;
+ getCameraImageUrl(cameraID) {
+ 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>
diff --git a/src/router/index.js b/src/router/index.js
index 5b56169..89aafba 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from "vue-router"
import fourCam from "../views/fourCam.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";
@@ -9,6 +10,7 @@ const routes = [
{ path: '/', component: fourCam },
{ path: '/1', component: Cam1Focus },
{ path: '/2', component: Cam2Focus },
+ { path: '/CamFocus/:id', component: CamFocus },
{ path: '/test', component: test },
]
diff --git a/src/views/CamFocus.vue b/src/views/CamFocus.vue
new file mode 100644
index 0000000..98344d9
--- /dev/null
+++ b/src/views/CamFocus.vue
@@ -0,0 +1,24 @@
+<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">
+ <Camera :cameraID=cameraID />
+ </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 */
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fourCam.vue b/src/views/fourCam.vue
index dff8af1..7e80247 100644
--- a/src/views/fourCam.vue
+++ b/src/views/fourCam.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;">
- <Camera :cameraNumber="2"/>
+ <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-->
@@ -18,8 +27,8 @@ import Camera from "../components/Camera.vue";
</div> -->
</div>
- <div style="position: relative; display: flex;">
- <Camera :cameraNumber="2"/>
+ <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">
@@ -28,8 +37,8 @@ import Camera from "../components/Camera.vue";
</div> -->
</div>
- <div style="position: relative; display: flex;">
- <Camera :cameraNumber="2"/>
+ <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">
@@ -38,8 +47,8 @@ import Camera from "../components/Camera.vue";
</div> -->
</div>
- <div style="position: relative; display: flex;">
- <Camera :cameraNumber="1"/>
+ <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">
@@ -83,4 +92,8 @@ it directly in their file component's style*/
top: 1%;
left: 9.5%;
}
+
+ .hover{
+ cursor: pointer;
+ }
</style>
\ No newline at end of file
From 4298176dabc49cf9d72579b74134c705ac3e6dc7 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sat, 30 Mar 2024 22:36:31 -0700
Subject: [PATCH 2/6] readjust sizes of components in vehicle status component
---
src/assets/ERU.png | Bin 0 -> 3244 bytes
src/assets/FRA.png | Bin 0 -> 3293 bytes
src/assets/MEA.png | Bin 0 -> 4010 bytes
src/assets/MRA.png | Bin 0 -> 3371 bytes
src/components/VehicleStatus/Connection.vue | 2 +-
.../VehicleStatus/EmergencyStop.vue | 3 +-
src/components/VehicleStatus/Open.vue | 27 ++++----------
src/components/VehicleStatus/VehicleTitle.vue | 18 ++++++----
src/components/VehicleStatusComponent.vue | 33 ++++++++++++++----
src/main.ts | 3 +-
src/views/testMapScreen.vue | 12 +++++--
11 files changed, 59 insertions(+), 39 deletions(-)
create mode 100644 src/assets/ERU.png
create mode 100644 src/assets/FRA.png
create mode 100644 src/assets/MEA.png
create mode 100644 src/assets/MRA.png
diff --git a/src/assets/ERU.png b/src/assets/ERU.png
new file mode 100644
index 0000000000000000000000000000000000000000..454167dc4cdc630bd1e6fb21aca5b84e28d619fc
GIT binary patch
literal 3244
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
F_z$CWY<>U$
literal 0
HcmV?d00001
diff --git a/src/assets/FRA.png b/src/assets/FRA.png
new file mode 100644
index 0000000000000000000000000000000000000000..62775bbb7e769e8f05201cacdc0193cd2f8366f4
GIT binary patch
literal 3293
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
bVu1V~D}rI&5$*<P00000NkvXXu0mjfI`A{0
literal 0
HcmV?d00001
diff --git a/src/assets/MEA.png b/src/assets/MEA.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2a5f537b9da20ae5f8788f222ee645a69776aaa
GIT binary patch
literal 4010
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
Z3h3P5iek%<XSe^J&G44Ea;#_6zX8G?>p=hj
literal 0
HcmV?d00001
diff --git a/src/assets/MRA.png b/src/assets/MRA.png
new file mode 100644
index 0000000000000000000000000000000000000000..b98d6e22961c0a2b9aea4689db0e8a7dd25a7a2f
GIT binary patch
literal 3371
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
Q+2ZeuBh`gcO7f5X7i`PE#sB~S
literal 0
HcmV?d00001
diff --git a/src/components/VehicleStatus/Connection.vue b/src/components/VehicleStatus/Connection.vue
index 741c822..d8c2b45 100644
--- a/src/components/VehicleStatus/Connection.vue
+++ b/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>
diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
index 639905e..1ebcae1 100644
--- a/src/components/VehicleStatus/EmergencyStop.vue
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@@ -34,7 +34,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 {
diff --git a/src/components/VehicleStatus/Open.vue b/src/components/VehicleStatus/Open.vue
index c04c32b..07d7310 100644
--- a/src/components/VehicleStatus/Open.vue
+++ b/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>
+ <button class="open-button">OPEN</button>
</template>
<script lang="ts">
@@ -20,31 +17,19 @@
<style scoped>
- .open-button-div {
- position: relative;
- height: 25%;
- width: 35%;
- }
.open-button {
position: relative;
- display: inline-block;
- width: 100%;
- height: 100%;
- background-color: #011949;
- font-size: 1.3em;
- }
-
- .test-open-button {
- position: relative;
- display: inline-block;
+ display: flex;
+ justify-content: center;
width: 30%;
height: 20%;
background-color: #011949;
font-size: 1em;
+ transition: background-color 0.20s;
}
- .test-open-button:hover {
- background-color: #03369b;
+ .open-button:hover {
+ background-color: #194398;
}
</style>
\ No newline at end of file
diff --git a/src/components/VehicleStatus/VehicleTitle.vue b/src/components/VehicleStatus/VehicleTitle.vue
index ec9c7ab..3b67670 100644
--- a/src/components/VehicleStatus/VehicleTitle.vue
+++ b/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%;
- height: 12%;
- /* vertical-align: middle; */
+ width: 22%;
}
</style>
\ No newline at end of file
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index 2446fc2..0888c9f 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -31,10 +31,15 @@
<!-- Left side of container (Name, Status, Battery, Connection)-->
<div class="left-container">
<VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
- <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
+ <!-- <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/> -->
+ <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>
<Connection :latency="latency" class="adjust-connection"/>
</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,7 +53,7 @@
.status_container {
display: flex;
position: relative;
- height: 200px;
+ height: 100%;
/* width: 25%; */
width: 100%;
@@ -58,12 +63,21 @@
color: black;
}
+ .battery-status-container {
+ display: flex;
+ position: relative;
+ width: 100%;
+ height: 20%;
+ gap: 6%;
+ margin-top: auto;
+ }
+
.left-container {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
- width: 40%;
+ width: 37%;
}
.right-container {
@@ -71,14 +85,21 @@
display: flex;
flex-direction: column;
height: 100%;
- width: 60%;
+ width: 63%;
}
- .adjust-battery {
+/* below is CSS adjustment for battery by itself */
+ /* .adjust-battery {
height: 17%;
- width: 34.5%;
+ width: 36%;
margin-top: auto;
margin-left: 8%;
+ } */
+
+ .adjust-battery {
+ height: 84%;
+ width: 38%;
+ margin-left: 8%;
}
.adjust-connection {
diff --git a/src/main.ts b/src/main.ts
index c33641e..f332915 100644
--- 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 yuh from "./views/testMapScreen.vue"
-createApp(App).use(router).mount("#app");
+createApp(yuh).use(router).mount("#app");
diff --git a/src/views/testMapScreen.vue b/src/views/testMapScreen.vue
index 9f888cd..ad8487c 100644
--- a/src/views/testMapScreen.vue
+++ b/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>
@@ -41,7 +47,7 @@ let testCoordinateObject = {
flex-direction: column;
border: 0.003em solid black;
height: 100%;
- width: 25%;
+ width: 23%;
margin-left: auto
}
From bbdf19bcb01f73e530edd88fb66ded307f75d15a Mon Sep 17 00:00:00 2001
From: Steven C <huanshengc@cpp.edu>
Date: Sat, 30 Mar 2024 23:13:00 -0700
Subject: [PATCH 3/6] static screen setup
---
src-tauri/tauri.conf.json | 7 ++++++-
src/components/Navbar.vue | 14 +++++++++++---
src/router/index.js | 8 ++++----
src/views/CamFocus.vue | 21 ++++++++++++++++++++-
src/views/{fourCam.vue => HomeScreen.vue} | 0
src/views/StaticScreen.vue | 20 ++++++++++++++++++++
6 files changed, 61 insertions(+), 9 deletions(-)
rename src/views/{fourCam.vue => HomeScreen.vue} (100%)
create mode 100644 src/views/StaticScreen.vue
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 1bf9893..ce2965e 100644
--- a/src-tauri/tauri.conf.json
+++ b/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"
}
]
}
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 494a502..a05f8d1 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -12,7 +12,15 @@ 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><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
+ <li><a href="#" style="text-decoration: none;" @click="openNewWindow">Link</a></li>
+ <li><router-link to="/1" style="text-decoration: none;">Disabled</router-link></li>
</ul>
</div>
</nav>
diff --git a/src/router/index.js b/src/router/index.js
index 89aafba..229d6be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,14 +1,14 @@
import { createRouter, createWebHashHistory } from "vue-router"
-import fourCam from "../views/fourCam.vue";
-import Cam1Focus from "../views/Cam1Focus.vue";
+import HomeScreen from "../views/HomeScreen.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: '/1', component: Cam1Focus },
+ { path: '/', component: HomeScreen },
+ { path: '/1', component: StaticScreen },
{ path: '/2', component: Cam2Focus },
{ path: '/CamFocus/:id', component: CamFocus },
{ path: '/test', component: test },
diff --git a/src/views/CamFocus.vue b/src/views/CamFocus.vue
index 98344d9..f313f30 100644
--- a/src/views/CamFocus.vue
+++ b/src/views/CamFocus.vue
@@ -9,7 +9,11 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
<template>
<div class="camera-container">
- <Camera :cameraID=cameraID />
+ <div class="camera-wrapper">
+ <router-link to="/" class="back">Back</router-link>
+ <Camera :cameraID="cameraID" />
+ <!-- Back button -->
+ </div>
</div>
</template>
@@ -21,4 +25,19 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
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>
\ No newline at end of file
diff --git a/src/views/fourCam.vue b/src/views/HomeScreen.vue
similarity index 100%
rename from src/views/fourCam.vue
rename to src/views/HomeScreen.vue
diff --git a/src/views/StaticScreen.vue b/src/views/StaticScreen.vue
new file mode 100644
index 0000000..67a7436
--- /dev/null
+++ b/src/views/StaticScreen.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+import Camera from "../components/Camera.vue";
+</script>
+
+<template>
+ <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 */
+}
+</style>
\ No newline at end of file
From d8146584d6a41d3b782f8d8b30d38b8405bcb35d Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sun, 31 Mar 2024 00:40:23 -0700
Subject: [PATCH 4/6] added text for Connection section of vehicle status.
changed viewpoint height of testMapScreen
---
src/components/VehicleStatusComponent.vue | 38 +++++++++++++++++++++--
src/views/testMapScreen.vue | 2 +-
2 files changed, 36 insertions(+), 4 deletions(-)
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index 0888c9f..da9f95d 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -36,7 +36,14 @@
<Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
<span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span>
</div>
- <Connection :latency="latency" class="adjust-connection"/>
+ <!-- <Connection :latency="latency" class="adjust-connection"/> -->
+ <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: </span>
+ </div>
+ </div>
</div>
<!-- Right side of container (Open button, Coordinates, Emergency Stop)-->
@@ -72,6 +79,22 @@
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: 5%;
+ padding-top: 5%;
+ }
+
.left-container {
position: relative;
display: flex;
@@ -88,7 +111,9 @@
width: 63%;
}
-/* below is CSS adjustment for battery by itself */
+/* --- These adjust the sizing and positions of the individual components --- */
+
+/* below is CSS adjustment for Battery component if it was by itself */
/* .adjust-battery {
height: 17%;
width: 36%;
@@ -102,12 +127,19 @@
margin-left: 8%;
}
- .adjust-connection {
+/* below is CSS adjustment for the Connection component if it was by itself */
+ /* .adjust-connection {
height: 28%;
width: 26%;
margin-top: 2%;
margin-bottom: 4%;
margin-left: 10%;
+ } */
+
+ .adjust-connection {
+ height: 90%;
+ width: 26%;
+ padding-left: 10%;
}
.adjust-emergency-button {
diff --git a/src/views/testMapScreen.vue b/src/views/testMapScreen.vue
index ad8487c..444b9cb 100644
--- a/src/views/testMapScreen.vue
+++ b/src/views/testMapScreen.vue
@@ -38,7 +38,7 @@ let testCoordinateObject2 = {
.screen_div {
display: flex;
border: 0.003em solid black;
- height: 85vh;
+ height: 88vh;
width: 99vw;
}
From ddf806ec353900eda06fddadc6de494490a0b033 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sun, 31 Mar 2024 00:46:29 -0700
Subject: [PATCH 5/6] changed main.ts back to normal
---
src/main.ts | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/main.ts b/src/main.ts
index f332915..bb86d75 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,5 @@ import { createApp } from "vue";
import "./styles.css";
import App from "./App.vue";
import router from "./router";
-import yuh from "./views/testMapScreen.vue"
-createApp(yuh).use(router).mount("#app");
+createApp(App).use(router).mount("#app");
\ No newline at end of file
From 4bb10cecc4da776c12ce3ffdbcc8458902d0d566 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Tue, 2 Apr 2024 23:08:42 -0700
Subject: [PATCH 6/6] put VehicleStatus component onto Static/Map screen.
Readjusted CSS of components within the VehicleStatusComponent
---
package-lock.json | 1 -
src/components/VehicleStatus/Coordinate.vue | 3 +-
.../VehicleStatus/EmergencyStop.vue | 8 +-
src/components/VehicleStatus/Open.vue | 9 +--
src/components/VehicleStatusComponent.vue | 81 +++++++------------
src/views/StaticScreen.vue | 48 ++++++++++-
6 files changed, 79 insertions(+), 71 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index e0367c0..62f5b61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
"@tauri-apps/api": "^1.4.0",
"vue": "^3.2.45",
"vue-router": "^4.3.0"
-
},
"devDependencies": {
"@tauri-apps/cli": "^1.4.0",
diff --git a/src/components/VehicleStatus/Coordinate.vue b/src/components/VehicleStatus/Coordinate.vue
index 3a2efa2..c161413 100644
--- a/src/components/VehicleStatus/Coordinate.vue
+++ b/src/components/VehicleStatus/Coordinate.vue
@@ -22,8 +22,7 @@
position: relative;
display: flex;
flex-direction: column;
- width: 75%;
- /* border: 0.05em solid black; */
+ width: 92%;
}
.coordinate-div {
diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
index 1ebcae1..977f3c8 100644
--- a/src/components/VehicleStatus/EmergencyStop.vue
+++ b/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;
}
diff --git a/src/components/VehicleStatus/Open.vue b/src/components/VehicleStatus/Open.vue
index 07d7310..5695b2f 100644
--- a/src/components/VehicleStatus/Open.vue
+++ b/src/components/VehicleStatus/Open.vue
@@ -7,23 +7,18 @@
export default {
data() {
return {};
- },
- // props: {
- // },
- // computed: {
- // }
+ }
};
</script>
<style scoped>
-
.open-button {
position: relative;
display: flex;
justify-content: center;
width: 30%;
- height: 20%;
+ height: 18%;
background-color: #011949;
font-size: 1em;
transition: background-color 0.20s;
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index da9f95d..4c2174c 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -31,17 +31,15 @@
<!-- Left side of container (Name, Status, Battery, Connection)-->
<div class="left-container">
<VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
- <!-- <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/> -->
<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>
- <!-- <Connection :latency="latency" class="adjust-connection"/> -->
<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: </span>
+ <span style="font-size: 0.9em;">Connection:</span>
+ <span style="font-size: 0.9em;">Last Packet: {{ latency }} </span>
</div>
</div>
</div>
@@ -61,15 +59,29 @@
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;
@@ -84,78 +96,43 @@
position: relative;
width: 100%;
height: 30%;
- /* margin-bottom: 2%;
- margin-left: 10%; */
+ margin-bottom: 2%;
+ /* margin-left: 10%; */
}
.connection-status-specifics {
display: flex;
flex-direction: column;
- padding-left: 5%;
- padding-top: 5%;
+ padding-left: 3%;
+ padding-top: 6%;
}
- .left-container {
- position: relative;
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 37%;
- }
-
- .right-container {
- position: relative;
- display: flex;
- flex-direction: column;
- height: 100%;
- width: 63%;
- }
-
-/* --- These adjust the sizing and positions of the individual components --- */
-
-/* below is CSS adjustment for Battery component if it was by itself */
- /* .adjust-battery {
- height: 17%;
- width: 36%;
- margin-top: auto;
- margin-left: 8%;
- } */
-
.adjust-battery {
height: 84%;
- width: 38%;
+ width: 34%;
margin-left: 8%;
}
-/* below is CSS adjustment for the Connection component if it was by itself */
- /* .adjust-connection {
- height: 28%;
- width: 26%;
- margin-top: 2%;
- margin-bottom: 4%;
- margin-left: 10%;
- } */
-
.adjust-connection {
- height: 90%;
+ height: 92%;
width: 26%;
padding-left: 10%;
}
.adjust-emergency-button {
margin-top: auto;
- margin-bottom: 4%;
- margin-left: 20%;
+ margin-bottom: 5%;
+ margin-left: 10%;
}
.adjust-open-button {
margin-top: 4%;
- margin-left: 60%;
+ margin-left: 58%;
}
.adjust-coordinates {
- margin-top: 10%;
- margin-left: 20%;
+ margin-top: 18%;
+ margin-left: 8%;
}
</style>
\ No newline at end of file
diff --git a/src/views/StaticScreen.vue b/src/views/StaticScreen.vue
index 67a7436..c55bdc1 100644
--- a/src/views/StaticScreen.vue
+++ b/src/views/StaticScreen.vue
@@ -1,12 +1,35 @@
<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="camera-container">
- this is static screen
+ <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>
@@ -17,4 +40,23 @@ import Camera from "../components/Camera.vue";
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>
\ No newline at end of file