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

added text for Connection section of vehicle status. changed viewpoint height of testMapScreen

This commit is contained in:
chillwafflez 2024-03-31 00:40:23 -07:00
parent 4298176dab
commit d8146584d6
2 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/VehicleStatusComponent.vue
View File

@ -36,7 +36,14 @@
<Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/> <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
<span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span> <span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span>
</div> </div>
<!-- <Connection :latency="latency" class="adjust-connection"/> -->
<div class="connection-status-container">
<Connection :latency="latency" class="adjust-connection"/> <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: </span>
</div>
</div>
</div> </div>
<!-- Right side of container (Open button, Coordinates, Emergency Stop)--> <!-- Right side of container (Open button, Coordinates, Emergency Stop)-->
@ -72,6 +79,22 @@
margin-top: auto; 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: 5%;
padding-top: 5%;
}
.left-container { .left-container {
position: relative; position: relative;
display: flex; display: flex;
@ -88,7 +111,9 @@
width: 63%; width: 63%;
} }
/* below is CSS adjustment for battery by itself */ /* --- These adjust the sizing and positions of the individual components --- */
/* below is CSS adjustment for Battery component if it was by itself */
/* .adjust-battery { /* .adjust-battery {
height: 17%; height: 17%;
width: 36%; width: 36%;
@ -102,12 +127,19 @@
margin-left: 8%; margin-left: 8%;
} }
.adjust-connection { /* below is CSS adjustment for the Connection component if it was by itself */
/* .adjust-connection {
height: 28%; height: 28%;
width: 26%; width: 26%;
margin-top: 2%; margin-top: 2%;
margin-bottom: 4%; margin-bottom: 4%;
margin-left: 10%; margin-left: 10%;
} */
.adjust-connection {
height: 90%;
width: 26%;
padding-left: 10%;
} }
.adjust-emergency-button { .adjust-emergency-button {

2
src/views/testMapScreen.vue
View File

@ -38,7 +38,7 @@ let testCoordinateObject2 = {
.screen_div { .screen_div {
display: flex; display: flex;
border: 0.003em solid black; border: 0.003em solid black;
height: 85vh; height: 88vh;
width: 99vw; width: 99vw;
} }