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

polish camera views

This commit is contained in:
Steven C 2024-03-03 00:43:12 -08:00
parent fb19c5b218
commit 3034820bce
5 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Camera.vue
View File

@ -33,16 +33,16 @@
</script>
<template>
<div class="box video-section">
<img :src="getCameraImageUrl(cameraNumber)">
<img :src="getCameraImageUrl(cameraNumber)" class="video-image">
</div>
</template>
<style scoped>
.app {
/* .app {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
} */
.video-section {
width: 100%;
@ -51,9 +51,10 @@
border: 2px solid #ccc;
}
.video-section video {
.video-image {
width: 100%;
height: 100%;
/* object-fit: contain; */
}
.box{
border: 2px solid #030303;

4
src/components/Navbar.vue
View File

@ -28,7 +28,9 @@ export default {
<div>
<span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 1</span>
<button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
<router-link to="/1" class="router-link">
<span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
</router-link>
</button>
</div>
<div>
@ -39,7 +41,9 @@ export default {
<div>
<span style="font-weight: bold; font-size: 1.2rem; color: rgb(0, 0, 0);">Mission 2</span>
<button style="border: 2px solid rgb(0, 0, 0); margin-left: 1.2rem; color: rgb(0, 0, 0); padding: 3px 6px; font-size: 0.8rem;" type="button" @click="">
<router-link to="/2" class="router-link">
<span style="font-weight: bold; font-size: 0.8rem;">OPEN</span>
</router-link>
</button>
</div>
<div>

4
src/router/index.js
View File

@ -1,10 +1,14 @@
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 test from "../views/test.vue";
const routes = [
{ path: '/', component: fourCam },
{ path: '/1', component: Cam1Focus },
{ path: '/2', component: Cam2Focus },
{ path: '/test', component: test },
]

18
src/views/Cam1Focus.vue
View File

@ -4,9 +4,17 @@ import Camera from "../components/Camera.vue";
</script>
<template>
<div class="grid">
<div>
<Camera :cameraNumber="1"/>
</div>
<div class="camera-container">
<Camera :cameraNumber="1" />
</div>
</template>
</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>

20
src/views/Cam2Focus.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup lang="ts">
import Camera from "../components/Camera.vue";
</script>
<template>
<div class="camera-container">
<Camera :cameraNumber="2" />
</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>