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

Merge branch 'main' of https://github.com/Northrop-Grumman-Collaboration-Project/gcs-user-interface into flight-indicators

This commit is contained in:
chillwafflez 2024-04-14 05:28:57 -07:00
parent 4bef4e69cd 9d47cf4a06
commit 03babd3db4
21 changed files with 240 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

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

7
src-tauri/tauri.conf.json
View File

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

BIN
src/assets/ERU.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/FRA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
src/assets/MEA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/MRA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

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>

14
src/components/Navbar.vue
View File

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

2
src/components/VehicleStatus/Connection.vue
View File

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

3
src/components/VehicleStatus/Coordinate.vue
View File

@ -22,8 +22,7 @@
position: relative;
display: flex;
flex-direction: column;
width: 75%;
/* border: 0.05em solid black; */
width: 92%;
}
.coordinate-div {

11
src/components/VehicleStatus/EmergencyStop.vue
View File

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

36
src/components/VehicleStatus/Open.vue
View File

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

18
src/components/VehicleStatus/VehicleTitle.vue
View File

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

68
src/components/VehicleStatusComponent.vue
View File

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

2
src/main.ts
View File

@ -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");

10
src/router/index.js
View File

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

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

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

31
src/views/fourCam.vue → src/views/HomeScreen.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>

62
src/views/StaticScreen.vue Normal file
View File

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

14
src/views/testMapScreen.vue
View File

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