Add NetworkBandwidth to top of GUIs

src/teleoperation/backend/consumers.py

@@ -35,6 +35,7 @@
     Spectral,
     ScienceThermistors,
     HeaterData,
+    NetworkBandwidth,
 )
 from mrover.srv import EnableAuton, AdjustMotor, ChangeCameras, CapturePanorama
 from sensor_msgs.msg import NavSatFix, Temperature, RelativeHumidity, JointState
@@ -124,6 +125,9 @@ def connect(self):
             )
             self.science_spectral = rospy.Subscriber("/science_spectral", Spectral, self.science_spectral_callback)
             self.cmd_vel = rospy.Subscriber("/cmd_vel", Twist, self.cmd_vel_callback)
+            self.network_bandwidth = rospy.Subscriber(
+                "/network_bandwidth", NetworkBandwidth, self.network_bandwidth_callback
+            )
 
             # Services
             self.laser_service = rospy.ServiceProxy("enable_arm_laser", SetBool)
@@ -604,6 +608,9 @@ def drive_status_callback(self, msg):
     def cmd_vel_callback(self, msg):
         self.send(text_data=json.dumps({"type": "cmd_vel", "linear_x": msg.linear.x, "angular_z": msg.angular.z}))
 
+    def network_bandwidth_callback(self, msg):
+        self.send(text_data=json.dumps({"type": "network_bandwidth", "tx": msg.tx, "rx": msg.rx}))
+
     def gps_fix_callback(self, msg):
         self.send(
             text_data=json.dumps(

src/teleoperation/frontend/src/components/AutonTask.vue

@@ -3,8 +3,8 @@
     <div class="shadow p-3 mb-5 header">
       <img class="logo" src="/mrover.png" alt="MRover" title="MRover" width="200" />
       <h1>Auton Dashboard</h1>
-      <!-- <MCUReset class="mcu_reset"></MCUReset>
-        <CommReadout class="comms"></CommReadout> -->
+      <!-- <MCUReset class="mcu_reset"></MCUReset> -->
+      <NetworkBandwidth class="comms"></NetworkBandwidth>
       <div class="help">
         <img src="/help.png" alt="Help" title="Help" width="48" height="48" />
       </div>
@@ -68,6 +68,7 @@ import OdometryReading from './OdometryReading.vue'
 import JoystickValues from './JoystickValues.vue'
 import DriveControls from './DriveControls.vue'
 import MastGimbalControls from './MastGimbalControls.vue'
+import NetworkBandwidth from './NetworkBandwidth.vue'
 import { quaternionToMapAngle } from '../utils.js'
 import { defineComponent } from 'vue'
 
@@ -84,7 +85,8 @@ export default defineComponent({
     OdometryReading,
     JoystickValues,
     DriveControls,
-    MastGimbalControls
+    MastGimbalControls,
+    NetworkBandwidth
   },
 
   data() {
@@ -241,7 +243,8 @@ h2 {
 }
 
 .comms {
-  margin-right: 5px;
+  position: absolute;
+  right: 25%;
 }
 
 .helpscreen {

src/teleoperation/frontend/src/components/DMESTask.vue

@@ -4,6 +4,7 @@
       <h1 v-if="type === 'ES'">ES GUI Dashboard</h1>
       <h1 v-else>DM GUI Dashboard</h1>
       <img class="logo" src="/mrover.png" alt="MRover" title="MRover" width="200" />
+      <NetworkBandwidth class="comms"></NetworkBandwidth>
       <div class="help">
         <img src="/help.png" alt="Help" title="Help" width="48" height="48" />
       </div>
@@ -69,6 +70,7 @@ import MotorsStatusTable from './MotorsStatusTable.vue'
 import OdometryReading from './OdometryReading.vue'
 import DriveControls from './DriveControls.vue'
 import MastGimbalControls from './MastGimbalControls.vue'
+import NetworkBandwidth from './NetworkBandwidth.vue'
 import { quaternionToMapAngle } from '../utils.js'
 
 let interval: number
@@ -86,6 +88,7 @@ export default defineComponent({
     OdometryReading,
     DriveControls,
     MastGimbalControls,
+    NetworkBandwidth,
   },
 
   props: {
@@ -267,6 +270,11 @@ export default defineComponent({
   transform: translateX(-50%);
 }
 
+.comms {
+  position: absolute;
+  right: 25%;
+}
+
 .map {
   grid-area: map;
 }

src/teleoperation/frontend/src/components/ISHTask.vue

@@ -2,8 +2,8 @@
   <div class="wrapper">
     <div class="shadow p-3 mb-5 header">
       <h1>ISH Dashboard</h1>
-      <!-- <MCUReset class="mcu_reset"></MCUReset>
-        <CommReadout class="comms"></CommReadout> -->
+      <!-- <MCUReset class="mcu_reset"></MCUReset> -->
+      <NetworkBandwidth class="comms"></NetworkBandwidth>
       <img class="logo" src="/mrover.png" alt="MRover" title="MRover" width="200" />
       <div class="help">
         <img src="/help.png" alt="Help" title="Help" width="48" height="48" />
@@ -44,13 +44,11 @@
 
 <script lang="ts">
 import SelectSite from './SelectSite.vue'
-//   import Raman from "./Raman.vue";
 import Cache from './CacheControls.vue'
 import Chlorophyll from './Chlorophyll.vue'
 import AminoBenedict from './AminoBenedict.vue'
 import Cameras from './Cameras.vue'
-//   import CommReadout from "./CommReadout.vue";
-//   import MCUReset from "./MCUReset.vue"
+import NetworkBandwidth from './NetworkBandwidth.vue'
 import { disableAutonLED } from '../utils.js'
 
 export default {
@@ -59,9 +57,8 @@ export default {
     Cache,
     Chlorophyll,
     AminoBenedict,
-    Cameras
-    //   CommReadout,
-    //   MCUReset,
+    Cameras,
+    NetworkBandwidth
   },
   data() {
     return {
@@ -95,7 +92,8 @@ export default {
 }
 
 .comms {
-  margin-right: 5px;
+  position: absolute;
+  right: 25%;
 }
 
 .helpscreen {

src/teleoperation/frontend/src/components/NetworkBandwidth.vue

@@ -0,0 +1,37 @@
+<template>
+    <!-- <div class="wrap"> -->
+    <span
+      >TX: {{ tx.toFixed(2) }} Mbps RX:
+      {{ rx.toFixed(2) }} Mbps</span
+    >
+  <!-- </div> -->
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mapState } from 'vuex'
+
+export default defineComponent({
+    data() {
+        return {
+            tx: 0,
+            rx: 0,
+        }
+    },
+
+    computed: {
+        ...mapState('websocket', ['message'])
+    },
+
+    watch: {
+        message(msg) {
+        if (msg.type == 'network_bandwidth') {
+            this.tx = parseFloat(msg.tx);
+            this.rx = parseFloat(msg.rx);
+        }
+        }
+    }
+})
+</script>
+<style scoped>
+</style>

src/teleoperation/frontend/src/components/SATask.vue

@@ -2,8 +2,8 @@
   <div class="wrapper">
     <div class="shadow p-3 mb-5 header">
       <h1>SA Dashboard</h1>
-      <!-- <MCUReset class="mcu_reset"></MCUReset>
-        <CommReadout class="comms"></CommReadout> -->
+      <!-- <MCUReset class="mcu_reset"></MCUReset> -->
+        <NetworkBandwidth class="comms"></NetworkBandwidth>
       <img class="logo" src="/mrover.png" alt="MRover" title="MRover" width="200" />
       <div class="help">
         <img src="/help.png" alt="Help" title="Help" width="48" height="48" />
@@ -100,11 +100,9 @@ import DriveMoteusStateTable from './DriveMoteusStateTable.vue'
 import MotorsStatusTable from './MotorsStatusTable.vue'
 import LimitSwitch from './LimitSwitch.vue'
 import CalibrationCheckbox from './CalibrationCheckbox.vue'
-//   import CommReadout from "./CommReadout.vue";
-//   import MCUReset from "./MCUReset.vue";
-import MotorAdjust from './MotorAdjust.vue'
 import OdometryReading from './OdometryReading.vue'
 import SAArmControls from './SAArmControls.vue'
+import NetworkBandwidth from './NetworkBandwidth.vue'
 import { disableAutonLED, quaternionToMapAngle } from '../utils.js'
 import { mapState, mapActions } from 'vuex'
 
@@ -123,11 +121,9 @@ export default {
     SAArmControls,
     LimitSwitch,
     CalibrationCheckbox,
-    //   CommReadout,
-    //   MCUReset,
-    MotorAdjust,
     OdometryReading,
-    MotorsStatusTable
+    MotorsStatusTable,
+    NetworkBandwidth
   },
   data() {
     return {
@@ -227,7 +223,8 @@ export default {
 }
 
 .comms {
-  margin-right: 5px;
+  position: absolute;
+  right: 25%;
 }
 
 .helpscreen {