diff --git a/package-lock.json b/package-lock.json
index 14973de..0d9f539 100644
--- a/package-lock.json
+++ b/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",
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/App.vue b/src/App.vue
index 577e9ed..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,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>
diff --git a/src/assets/ERU.png b/src/assets/ERU.png
new file mode 100644
index 0000000..454167d
Binary files /dev/null and b/src/assets/ERU.png differ
diff --git a/src/assets/FRA.png b/src/assets/FRA.png
new file mode 100644
index 0000000..62775bb
Binary files /dev/null and b/src/assets/FRA.png differ
diff --git a/src/assets/MEA.png b/src/assets/MEA.png
new file mode 100644
index 0000000..a2a5f53
Binary files /dev/null and b/src/assets/MEA.png differ
diff --git a/src/assets/MRA.png b/src/assets/MRA.png
new file mode 100644
index 0000000..b98d6e2
Binary files /dev/null and b/src/assets/MRA.png differ
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/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/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/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 639905e..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;
}
@@ -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 {
diff --git a/src/components/VehicleStatus/Open.vue b/src/components/VehicleStatus/Open.vue
index c04c32b..5695b2f 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">
@@ -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;
- 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%;
+ height: 18%;
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..4c2174c 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/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"/>
- <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
- <Connection :latency="latency" class="adjust-connection"/>
+ <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%;
- width: 34.5%;
- margin-top: auto;
+ height: 84%;
+ width: 34%;
margin-left: 8%;
}
.adjust-connection {
- height: 28%;
+ height: 92%;
width: 26%;
- margin-top: 2%;
- margin-bottom: 4%;
- margin-left: 10%;
+ 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/main.ts b/src/main.ts
index 909a064..5db3436 100644
--- a/src/main.ts
+++ b/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");
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 5b56169..229d6be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,14 +1,16 @@
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
new file mode 100644
index 0000000..f313f30
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/fourCam.vue b/src/views/HomeScreen.vue
similarity index 75%
rename from src/views/fourCam.vue
rename to src/views/HomeScreen.vue
index dff8af1..7e80247 100644
--- a/src/views/fourCam.vue
+++ b/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;">
- <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
diff --git a/src/views/StaticScreen.vue b/src/views/StaticScreen.vue
new file mode 100644
index 0000000..c55bdc1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/testMapScreen.vue b/src/views/testMapScreen.vue
index 9f888cd..444b9cb 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>
@@ -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
}