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

Merge pull request #14 from Northrop-Grumman-Collaboration-Project/vehicle-status 

Vehicle status component for map/static screen
This commit is contained in:
Justin Nguyen 2024-04-04 01:05:10 -07:00 committed by GitHub
parent 164f1cb5ad 4bb10cecc4
commit 9d47cf4a06
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 418 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -11,7 +11,6 @@
"@tauri-apps/api": "^1.4.0",
"vue": "^3.2.45",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@tauri-apps/cli": "^1.4.0",

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

4
src/components/VehicleStatus/Battery.vue
View File

@ -106,7 +106,7 @@
}
#battery_progress {
background-color: rgb(116, 194, 92);
background-color: rgb(83, 255, 83);
border-radius: 12%;
height:100%;
width: 100%;
@ -132,7 +132,7 @@
height:100%;
}
.normalPercent {
background-color: rgb(116, 194, 92);
background-color: rgb(87, 255, 87);
border-radius: 12%;
}

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>

37
src/components/VehicleStatus/Coordinate.vue Normal file
View File

@ -0,0 +1,37 @@
<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>

40
src/components/VehicleStatus/EmergencyStop.vue Normal file
View File

@ -0,0 +1,40 @@
<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>

30
src/components/VehicleStatus/Open.vue Normal file
View File

@ -0,0 +1,30 @@
<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>

55
src/components/VehicleStatus/VehicleTitle.vue Normal file
View File

@ -0,0 +1,55 @@
<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>

138
src/components/VehicleStatusComponent.vue Normal file
View File

@ -0,0 +1,138 @@
<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>

2
src/main.ts
View File

@ -3,4 +3,4 @@ import "./styles.css";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
createApp(App).use(router).mount("#app");

25
src/testDisplayComponents.vue
View File

@ -3,25 +3,22 @@
<script setup>
import Battery from './components/VehicleStatus/Battery.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>
<template>
<!-- <h2>Below is the Connection component</h2>
<div class="border_div">
<Connection :latency=100 />
</div> -->
<!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
<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>

48
src/views/StaticScreen.vue
View File

@ -1,12 +1,35 @@
<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="camera-container">
this is static screen
<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>
@ -17,4 +40,23 @@ import Camera from "../components/Camera.vue";
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>

58
src/views/testMapScreen.vue Normal file
View File

@ -0,0 +1,58 @@
<!-- <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>