Compare commits
No commits in common. "main" and "routers" have entirely different histories.
|
|
@ -8914,6 +8914,7 @@ packages:
|
||||||
'@vue/devtools-api': 6.6.1
|
'@vue/devtools-api': 6.6.1
|
||||||
vue: 3.2.45
|
vue: 3.2.45
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
/vue-style-loader@4.1.3:
|
/vue-style-loader@4.1.3:
|
||||||
resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
|
resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|
|
||||||
|
|
@ -37,14 +37,9 @@
|
||||||
{
|
{
|
||||||
"fullscreen": false,
|
"fullscreen": false,
|
||||||
"resizable": true,
|
"resizable": true,
|
||||||
"title": "Camera Screen",
|
"title": "Interface",
|
||||||
"width": 800,
|
"width": 800,
|
||||||
"height": 600
|
"height": 600
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "StaticScreen",
|
|
||||||
"title": "Over View",
|
|
||||||
"url": "http://localhost:4000/#/1"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
36
src/App.vue
36
src/App.vue
|
|
@ -1,5 +1,9 @@
|
||||||
<script setup lang="ts">
|
<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 Navbar from "./components/Navbar.vue";
|
||||||
|
import Camera from "./components/Camera.vue";
|
||||||
import { RouterView } from "vue-router";
|
import { RouterView } from "vue-router";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -8,6 +12,38 @@ import { RouterView } from "vue-router";
|
||||||
<Navbar/>
|
<Navbar/>
|
||||||
</div>
|
</div>
|
||||||
<RouterView/>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: ['cameraID'],
|
props: ['cameraNumber'],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
localIp: 'http://localhost', //maybe change accordingly .env?
|
localIp: 'http://localhost', //maybe change accordingly .env?
|
||||||
|
|
@ -25,15 +25,15 @@
|
||||||
// console.error('Error accessing camera:', error);
|
// 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>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="box video-section">
|
<div class="box video-section">
|
||||||
<img :src="getCameraImageUrl(cameraID)" class="video-image">
|
<img :src="getCameraImageUrl(cameraNumber)" class="video-image">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
|
||||||
|
|
@ -12,15 +12,7 @@ export default {
|
||||||
toggleNavbar() {
|
toggleNavbar() {
|
||||||
this.isNavbarOpen = !this.isNavbarOpen;
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -79,8 +71,8 @@ export default {
|
||||||
<ul style="list-style-type: none; padding-left: 0;">
|
<ul style="list-style-type: none; padding-left: 0;">
|
||||||
<!-- Insert your menu items here -->
|
<!-- Insert your menu items here -->
|
||||||
<li><a href="#" style="text-decoration: none;">Home</a></li>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -106,7 +106,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#battery_progress {
|
#battery_progress {
|
||||||
background-color: rgb(83, 255, 83);
|
background-color: rgb(116, 194, 92);
|
||||||
border-radius: 12%;
|
border-radius: 12%;
|
||||||
height:100%;
|
height:100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
height:100%;
|
height:100%;
|
||||||
}
|
}
|
||||||
.normalPercent {
|
.normalPercent {
|
||||||
background-color: rgb(87, 255, 87);
|
background-color: rgb(116, 194, 92);
|
||||||
border-radius: 12%;
|
border-radius: 12%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<div v-if="latency >= 40 || latency == 0" 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 v-else class="bar" style='height: 80%'></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <span class="connection_number">{{ latency }} ms</span> -->
|
<span class="connection_number">{{ latency }} ms</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -1,16 +1,14 @@
|
||||||
import { createRouter, createWebHashHistory } from "vue-router"
|
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 Cam2Focus from "../views/Cam2Focus.vue";
|
||||||
import CamFocus from "../views/CamFocus.vue";
|
|
||||||
import test from "../views/test.vue";
|
import test from "../views/test.vue";
|
||||||
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/', component: HomeScreen },
|
{ path: '/', component: fourCam },
|
||||||
{ path: '/1', component: StaticScreen },
|
{ path: '/1', component: Cam1Focus },
|
||||||
{ path: '/2', component: Cam2Focus },
|
{ path: '/2', component: Cam2Focus },
|
||||||
{ path: '/CamFocus/:id', component: CamFocus },
|
|
||||||
{ path: '/test', component: test },
|
{ path: '/test', component: test },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,22 +3,25 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import Battery from './components/VehicleStatus/Battery.vue';
|
import Battery from './components/VehicleStatus/Battery.vue';
|
||||||
import Connection from './components/VehicleStatus/Connection.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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
|
<!-- <h2>Below is the Connection component</h2>
|
||||||
|
<div class="border_div">
|
||||||
|
<Connection :latency=100 />
|
||||||
|
</div> -->
|
||||||
|
|
||||||
<Coordinate :coordinates="testObject"></Coordinate>
|
|
||||||
|
|
||||||
|
<!-- <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 ! -->
|
||||||
|
<!-- </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>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -1,23 +1,14 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
|
||||||
import Battery from '../components/VehicleStatus/Battery.vue';
|
import Battery from '../components/VehicleStatus/Battery.vue';
|
||||||
import Connection from '../components/VehicleStatus/Connection.vue';
|
import Connection from '../components/VehicleStatus/Connection.vue';
|
||||||
|
|
||||||
import Camera from "../components/Camera.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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="hover" style="position: relative; display: flex;" @click="handleClick(2)">
|
<div style="position: relative; display: flex;">
|
||||||
<Camera :cameraID="2"/>
|
<Camera :cameraNumber="2"/>
|
||||||
<Battery :percentage=85 :charging="false" class="battery_test"/>
|
<Battery :percentage=85 :charging="false" class="battery_test"/>
|
||||||
<Connection :latency=65 class="connection_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-->
|
<!-- the Battery and Connection component's size is dependent on its parent element. So changing 'status_div' size will change their size-->
|
||||||
|
|
@ -27,8 +18,8 @@ const handleClick = (cameraID:number) => {
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
|
<div style="position: relative; display: flex;">
|
||||||
<Camera :cameraID="1"/>
|
<Camera :cameraNumber="2"/>
|
||||||
<Battery :percentage=12 :charging="false" class="battery_test"/>
|
<Battery :percentage=12 :charging="false" class="battery_test"/>
|
||||||
<Connection :latency=3 class="connection_test"/>
|
<Connection :latency=3 class="connection_test"/>
|
||||||
<!-- <div class="status_div">
|
<!-- <div class="status_div">
|
||||||
|
|
@ -37,8 +28,8 @@ const handleClick = (cameraID:number) => {
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
|
<div style="position: relative; display: flex;">
|
||||||
<Camera :cameraID="1"/>
|
<Camera :cameraNumber="2"/>
|
||||||
<Battery :percentage=46 :charging="false" class="battery_test"/>
|
<Battery :percentage=46 :charging="false" class="battery_test"/>
|
||||||
<Connection :latency=82 class="connection_test"/>
|
<Connection :latency=82 class="connection_test"/>
|
||||||
<!-- <div class="status_div">
|
<!-- <div class="status_div">
|
||||||
|
|
@ -47,8 +38,8 @@ const handleClick = (cameraID:number) => {
|
||||||
</div> -->
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hover" style="position: relative; display: flex;" @click="handleClick(1)">
|
<div style="position: relative; display: flex;">
|
||||||
<Camera :cameraID="1"/>
|
<Camera :cameraNumber="1"/>
|
||||||
<Battery :percentage=0 :charging="false" class="battery_test"/>
|
<Battery :percentage=0 :charging="false" class="battery_test"/>
|
||||||
<Connection :latency=5 class="connection_test"/>
|
<Connection :latency=5 class="connection_test"/>
|
||||||
<!-- <div class="status_div">
|
<!-- <div class="status_div">
|
||||||
|
|
@ -92,8 +83,4 @@ it directly in their file component's style*/
|
||||||
top: 1%;
|
top: 1%;
|
||||||
left: 9.5%;
|
left: 9.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover{
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -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>
|
|
||||||
Loading…
Reference in New Issue