priyatham
/
gcs-user-interface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Generalize components for reusablilty: FocusCam, FourCam

This commit is contained in:
Steven C 2024-03-30 22:24:23 -07:00
parent 6ce48a6923
commit 3ba58ef165
5 changed files with 52 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/App.vue
View File

@ -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>

8
src/components/Camera.vue
View File

@ -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>

2
src/router/index.js
View File

@ -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 },
]

24
src/views/CamFocus.vue Normal file
View File

@ -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>

31
src/views/fourCam.vue
View File

@ -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>