Merge pull request #13 from Northrop-Grumman-Collaboration-Project/FocusCam
Focus cam
This commit is contained in:
Steven C
GitHub
commit
164f1cb5ad
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
37
src/App.vue
37
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue