[teleop] Add sensor spacing (#1137)

umrover · Jun 2, 2022 · 25067e0 · 25067e0
1 parent a253253
commit 25067e0
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 38 deletions.
diff --git a/base_station/gui/src/components/AutonTask.vue b/base_station/gui/src/components/AutonTask.vue
@@ -21,19 +21,16 @@
     </div>
 
     <div class="box1 data" v-bind:style="{backgroundColor: nav_state_color}">
-     <h1>Nav State: {{this.nav_status.nav_state_name}}</h1>
-     <div class="raw-data raw-sensors">
+      <h2>Nav State: {{this.nav_status.nav_state_name}}</h2>
+      <div class="raw-data raw-sensors">
         <RawSensorData v-bind:GPS="GPS" v-bind:IMU="IMU"/>
-        <br>
-        <br>
         <Obstacle v-bind:Obstacle="Obstacle"/>
-        <br>
         <TargetList v-bind:TargetList="TargetList"/>
         <DriveControls/>
         <DriveVelDataH/>
         <SaveAutonData v-bind:odom="odom" v-bind:IMU="IMU" v-bind:GPS="GPS" v-bind:TargetBearing="TargetBearing" v-bind:nav_status="nav_status" v-bind:AutonDriveControl="AutonDriveControl" v-bind:TargetList="TargetList"/>
         <PlaybackAutonData/>
-     </div>
+      </div>
     </div>
     <div class="box odom light-bg">
       <OdometryReading v-bind:odom="odom"/>
@@ -356,6 +353,11 @@ export default {
     margin-left: 5px;
   }
 
+  h2 {
+    padding: 2px;
+    margin: 0px;
+  }
+
   .spacer {
     flex-grow: 0.8;
   }

diff --git a/base_station/gui/src/components/DriveControls.vue b/base_station/gui/src/components/DriveControls.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrap">
-    <h3> Drive </h3>
+    <h4> Drive </h4>
     <div class="controls">
       <span>Speed Limiter: {{ dampenDisplay }}%</span>
       <Checkbox class="reverse" ref="reverse" v-bind:name="'Reverse'" v-on:toggle="updateReverse($event)"/>
@@ -127,6 +127,13 @@ export default {
   align-items: center;
 }
 
+h4 {
+  padding-top: 5px;
+  margin-top: 5px;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+}
+
 .reverse {
   margin-left: 20px;
 }

diff --git a/base_station/gui/src/components/Obstacle.vue b/base_station/gui/src/components/Obstacle.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="wrap">
     <div>
-    <p>Obstacle Data: Detected: {{this.Obstacle.detected}} &nbsp;Bearing: {{this.Obstacle.bearing}} &nbsp;Distance: {{this.Obstacle.distance}}</p>
+    <p><b>Obstacle Data: </b>&nbsp;
+      Detected: {{this.Obstacle.detected}}&nbsp;
+      Bearing: {{this.Obstacle.bearing}}&nbsp;
+      Distance: {{this.Obstacle.distance}}</p>
     </div>
   </div>
 </template>
@@ -27,16 +30,24 @@ export default {
 <style scoped>
    
   .wrap {
-      padding: 0px;
-      padding-left: 5px;
-      padding-right: 5px;
-      border: none;
-      margin: -45px 0px 0px 0px;
-      grid-template-rows: auto;
+    padding: 2px;
+    border: none;
+    grid-template-rows: auto;
   }
 
   .wrap p {
     display: inline;
   }
 
-</style>
+  h5 {
+    padding: 0;
+    padding-top: 2px;
+    margin: 0;
+  }
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+</style>
diff --git a/base_station/gui/src/components/RawSensorData.vue b/base_station/gui/src/components/RawSensorData.vue
@@ -1,13 +1,26 @@
 <template>
 <div class = "main-content">
- <h3>Raw Data Reading</h3>
   <div class="wrap">
     <div>
-      <p>IMU: accel_x_g: {{ IMU.accel_x_g }} accel_y_g: {{ IMU.accel_y_g  }} accel_z_g: {{ IMU.accel_z_g }} &nbsp;gyro_x_dps: {{ IMU.gyro_x_dps }} gyro_y_dps: {{ IMU.gyro_y_dps }} gyro_z_dps: {{ IMU.gyro_z_dps }}
-      &nbsp;mag_x_uT: {{ IMU.mag_x_uT }} mag_y_uT: {{ IMU.mag_y_uT  }} mag_z_uT: {{ IMU.mag_z_uT }} roll_rad: {{ IMU.roll_rad }} pitch_rad: {{ IMU.pitch_rad}} yaw_rad: {{ IMU.yaw_rad }} bearing_deg: {{ IMU.bearing_deg.toFixed(2) }}</p>
+      <p><b>IMU: </b> accel_x_g: {{ IMU.accel_x_g.toFixed(2) }}&nbsp;
+        accel_y_g: {{ IMU.accel_y_g.toFixed(2) }}&nbsp;
+        accel_z_g: {{ IMU.accel_z_g.toFixed(2) }}&nbsp;
+        gyro_x_dps: {{ IMU.gyro_x_dps.toFixed(2) }}&nbsp;
+        gyro_y_dps: {{ IMU.gyro_y_dps.toFixed(2) }}&nbsp;
+        gyro_z_dps: {{ IMU.gyro_z_dps.toFixed(2) }}&nbsp;
+        mag_x_uT: {{ IMU.mag_x_uT.toFixed(2) }}&nbsp;
+        mag_y_uT: {{ IMU.mag_y_uT.toFixed(2)  }}&nbsp;
+        mag_z_uT: {{ IMU.mag_z_uT.toFixed(2) }}&nbsp;
+        roll_rad: {{ IMU.roll_rad.toFixed(2) }}&nbsp;
+        pitch_rad: {{ IMU.pitch_rad.toFixed(2) }}&nbsp;
+        yaw_rad: {{ IMU.yaw_rad.toFixed(2) }}&nbsp;
+        bearing_deg:{{ IMU.bearing_deg.toFixed(2) }}</p>
     </div>
     <div>
-      <p>Calibration: sys: {{ IMU.calibration_sys}} gyro: {{ IMU.calibration_gyro }} accel: {{ IMU.calibration_accel}} mag: {{ IMU.calibration_mag }}</p>
+      <p><b>Calibration: </b> sys: {{ IMU.calibration_sys.toFixed(2) }}&nbsp;
+        gyro: {{ IMU.calibration_gyro.toFixed(2) }}&nbsp;
+        accel: {{ IMU.calibration_accel.toFixed(2) }}&nbsp;
+        mag: {{ IMU.calibration_mag.toFixed(2) }}</p>
     </div>
   </div>
 </div>
@@ -38,9 +51,7 @@ export default {
   }
 
   .wrap {
-      padding: 0px;
-      padding-left: 5px;
-      padding-right: 5px;
+      padding: 2px;
       border: none;
       grid-template-rows: auto;
   }
@@ -49,14 +60,9 @@ export default {
     display: inline;
   }
 
-  .p {
+  p {
     margin: 0;
     padding: 0;
   }
 
-  .h3{
-    padding: 0px;
-    margin: 0px;
-  }
-
 </style>
diff --git a/base_station/gui/src/components/TargetList.vue b/base_station/gui/src/components/TargetList.vue
@@ -1,10 +1,14 @@
 <template>
   <div class="wrap">
     <div>
-    <p>Target 1:
-        Bearing: {{this.TargetList[0].bearing}} &nbsp;Distance: {{this.TargetList[0].distance}}&nbsp; id: {{this.TargetList[0].id}}<br/>
-        Target 2:
-        Bearing: {{this.TargetList[1].bearing}}&nbsp; Distance: {{this.TargetList[1].distance}}&nbsp; id: {{this.TargetList[1].id}}</p>
+      <p><b>Target 1: </b>&nbsp;
+        Bearing: {{ this.TargetList[0].bearing.toFixed(2) }}&nbsp;
+        Distance: {{ this.TargetList[0].distance.toFixed(2) }}&nbsp;
+        id: {{ this.TargetList[0].id.toFixed(0) }}&nbsp;
+        <b>Target 2: </b>&nbsp;
+        Bearing: {{ this.TargetList[1].bearing.toFixed(2) }}&nbsp;
+        Distance: {{ this.TargetList[1].distance.toFixed(2) }}&nbsp;
+        id: {{ this.TargetList[1].id.toFixed(0) }}</p>
     </div>
   </div>
 </template>
@@ -24,16 +28,23 @@ export default {
 <style scoped>
    
   .wrap {
-      padding: 0px;
-      padding-left: 5px;
-      padding-right: 5px;
-      border: none;
-      margin: 0px 0px 0px 0px;
-      grid-template-rows: auto;
+    padding: 2px;
+    grid-template-rows: auto;
   }
 
   .wrap p {
     display: inline;
   }
 
+  h5 {
+    padding: 0;
+    padding-top: 2px;
+    margin: 0;
+  }
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
 </style>