Pingdriver

core/frontend/src/components/common/DevicePathHelper.vue

@@ -0,0 +1,181 @@
+<template>
+  <v-tooltip>
+    <template #activator="{ on, attrs }">
+      <v-icon
+        v-if="board_connector !== null"
+        class="ml-4"
+        v-bind="attrs"
+        v-on="on"
+      >
+        mdi-information
+      </v-icon>
+    </template>
+    <img
+      :src="board_image"
+      style="max-height:500px;"
+    >
+    <div :class="circle_class" />
+  </v-tooltip>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import navigator_image from '@/assets/img/devicePathHelper/navigator.jpg'
+import raspberry_pi3_image from '@/assets/img/devicePathHelper/rpi3b.jpg'
+import raspberry_pi4_image from '@/assets/img/devicePathHelper/rpi4b.png'
+import system_information from '@/store/system-information'
+import { Dictionary } from '@/types/common'
+
+enum BoardType {
+  Rpi4B = 'Rpi4B',
+  Rpi3B = 'Rpi3B',
+  Navigator = 'Navigator',
+  Unknown = 'Unknown'
+}
+
+const connector_map: Dictionary<string> = {
+  '/dev/ttyS0': 'serial1',
+  '/dev/ttyAMA1': 'serial3',
+  '/dev/ttyAMA2': 'serial4',
+  '/dev/ttyAMA3': 'serial5',
+  '/dev/serial/by-path/platform-fd500000.pcie-pci-0000:01:00.0-usb-0:1.3:1.0-port0': 'usb-top-left-pi4',
+  '/dev/serial/by-path/platform-fd500000.pcie-pci-0000:01:00.0-usb-0:1.4:1.0-port0': 'usb-bottom-left-pi4',
+  '/dev/serial/by-path/platform-fd500000.pcie-pci-0000:01:00.0-usb-0:1.1:1.0-port0': 'usb-top-right-pi4',
+  '/dev/serial/by-path/platform-fd500000.pcie-pci-0000:01:00.0-usb-0:1.2:1.0-port0': 'usb-bottom-right-pi4',
+  '/dev/serial/by-path/platform-3f980000.usb-usb-0:1.5:1.0-port0': 'usb-bottom-right-pi3',
+  '/dev/serial/by-path/platform-3f980000.usb-usb-0:1.4:1.0-port0': 'usb-top-right-pi3',
+  '/dev/serial/by-path/platform-3f980000.usb-usb-0:1.3:1.0-port0': 'usb-bottom-left-pi3',
+  '/dev/serial/by-path/platform-3f980000.usb-usb-0:1.2:1.0-port0': 'usb-top-left-pi3',
+}
+
+export default Vue.extend({
+  name: 'DevicePathHelper',
+  props: {
+    device: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    serial_port_path(): string {
+      /* returns the by-path path for the serial port if available */
+      return system_information.serial?.ports?.find((a) => a.name === this.device)?.by_path ?? this.device as string
+    },
+    board_type() : BoardType {
+      /* Detects board type between navigator and Rpi4 */
+      switch (true) {
+        case this.serial_port_path.includes('ttyAMA'):
+        case this.serial_port_path.includes('ttyS0'):
+          return BoardType.Navigator
+        case this.serial_port_path.includes('platform-3f980000'):
+          return BoardType.Rpi3B
+        case this.serial_port_path.includes('platform-fd500000'):
+          return BoardType.Rpi4B
+        default:
+          return BoardType.Unknown
+      }
+    },
+    board_image() : string {
+      switch (this.board_type) {
+        case BoardType.Navigator:
+          return navigator_image
+        case BoardType.Rpi4B:
+          return raspberry_pi4_image
+        case BoardType.Rpi3B:
+          return raspberry_pi3_image
+        default:
+          return ''
+      }
+    },
+    board_connector() : string | null {
+      const serial_port_path = this.serial_port_path as string
+      try {
+        return connector_map[serial_port_path]
+      } catch (error) {
+        console.error(error)
+      }
+      return null
+    },
+    circle_class() : string {
+      return this.board_connector ? `circle ${this.board_connector}` : ''
+    },
+  },
+})
+</script>
+
+<style scoped>
+
+.circle {
+  position: absolute;
+  top:0%;
+  width: 160px; height: 80px;
+  border-radius: 40px;
+  border: 5px solid red;
+  left: 160px;
+}
+
+.serial4 {
+    left: 50%;
+    top: 52%;
+}
+
+.serial1 {
+    left: 50%;
+    top: 23%;
+}
+
+.serial3 {
+    left: 50%;
+    top: 38%;
+}
+
+.usb-bottom-left-pi4 {
+    left: 11%;
+    top: 44%;
+    width: 190px; height: 105px;
+}
+
+.usb-bottom-right-pi4 {
+    left: 37%;
+    top: 44%;
+    width: 190px; height: 105px;
+}
+
+.usb-top-right-pi4 {
+    left: 37%;
+    top: 20%;
+    width: 190px; height: 105px;
+}
+
+.usb-top-left-pi4 {
+    left: 11%;
+    top: 20%;
+    width: 190px; height: 105px;
+}
+
+.usb-top-right-pi3 {
+    left: 67%;
+    top: 0%;
+    width: 150px; height: 70px;
+}
+
+.usb-top-left-pi3 {
+    left: 37%;
+    top: 0%;
+    width: 150px; height: 70px;
+}
+
+.usb-bottom-left-pi3 {
+    left: 37%;
+    top: 43%;
+    width: 150px; height: 70px;
+}
+
+.usb-bottom-right-pi3 {
+    left: 67%;
+    top: 43%;
+    width: 150px; height: 70px;
+}
+
+</style>

core/frontend/src/components/ping/ping1d.vue

@@ -0,0 +1,115 @@
+<template>
+  <v-card style="min-width: 280px;">
+    <v-card-title class="justify-center pb-1">
+      <v-icon
+        x-large
+        class="ping1d"
+        color="br_blue"
+      >
+        mdi-wifi
+      </v-icon>
+      {{ device.ping_type }}
+    </v-card-title>
+    <v-simple-table dense>
+      <tbody>
+        <tr><td>Bridge</td><td> UDP {{ device.driver_status.udp_port }} </td></tr>
+        <tr
+          v-tooltip="'Send MAVLink DISTANCE_SENSOR messages to the vehicle. This allows ground \
+        stations such as QGroundControl to display the information on the telemetry overlay.'"
+        >
+          <td>MAVLink Distances</td><td>
+            <v-switch
+              v-model="user_desired_mavlink_driver_state"
+              :loading="switch_loading()? 'warning' : false"
+              @change="update_mavlink_driver()"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+    <v-expand-transition>
+      <div v-show="expand">
+        <v-divider />
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <td>FW</td><td>
+                {{ device.firmware_version_major }}.
+                {{ device.firmware_version_minor }}.
+                {{ device.firmware_version_patch }}
+              </td>
+            </tr>
+            <tr><td>ID</td><td>{{ device.device_id }}</td></tr>
+            <tr><td>Model</td><td>{{ device.device_model }}</td></tr>
+            <tr><td>Revision</td><td>{{ device.device_revision }}</td></tr>
+            <tr><td>Device</td><td>{{ device.port }} <device-path-helper :device="device.port" /></td></tr>
+          </tbody>
+        </v-simple-table>
+      </div>
+    </v-expand-transition>
+
+    <v-row class="justify-end">
+      <v-btn
+        icon
+        class="pa-6"
+        @click="expand = !expand"
+      >
+        <v-icon>{{ expand ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+      </v-btn>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+import DevicePathHelper from '@/components/common/DevicePathHelper.vue'
+import { PingDevice } from '@/types/ping'
+import back_axios from '@/utils/api'
+
+export default Vue.extend({
+  name: 'PingCard',
+  components: {
+    DevicePathHelper,
+  },
+  props: {
+    device: {
+      type: Object as PropType<PingDevice>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      expand: false,
+      user_desired_mavlink_driver_state: true,
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    this.user_desired_mavlink_driver_state = Boolean(this.device.driver_status.mavlink_driver_enabled)
+  },
+  methods: {
+    switch_loading() {
+      return this.user_desired_mavlink_driver_state !== Boolean(this.device.driver_status.mavlink_driver_enabled)
+    },
+    async update_mavlink_driver() {
+      await back_axios({
+        method: 'post',
+        url: '/ping/v1.0/sensors',
+        data: {
+          port: this.device.port,
+          mavlink_driver: this.user_desired_mavlink_driver_state,
+        },
+      })
+    },
+  },
+
+})
+</script>
+<style scoped>
+  i.ping1d {
+    transform: rotate(180deg);
+    margin: 15px;
+  }
+</style>

core/frontend/src/components/ping/ping360.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-card style="min-width: 280px; min-height: 150px;">
+    <v-card-title class="justify-center pb-1">
+      <v-icon
+        x-large
+        class="ping360"
+        color="br_blue"
+      >
+        mdi-radar
+      </v-icon>
+      {{ device.ping_type }}
+    </v-card-title>
+    <v-simple-table dense>
+      <tbody>
+        <tr><td>{{ is_ethernet() ? "IP" : "Bridge" }}</td><td> {{ ip_data() }} </td></tr>
+      </tbody>
+    </v-simple-table>
+    <v-expand-transition
+      v-if="!is_ethernet()"
+    >
+      <div v-show="expand">
+        <v-divider />
+        <v-simple-table dense>
+          <tbody>
+            <tr>
+              <td>FW</td><td>
+                {{ device.firmware_version_major }}.
+                {{ device.firmware_version_minor }}.
+                {{ device.firmware_version_patch }}
+              </td>
+            </tr>
+            <tr><td>ID</td><td>{{ device.device_id }}</td></tr>
+            <tr><td>Model</td><td>{{ device.device_model }}</td></tr>
+            <tr><td>Revision</td><td>{{ device.device_revision }}</td></tr>
+            <tr><td>Device</td><td>{{ device.port }} <device-path-helper :device="device.port" /></td></tr>
+          </tbody>
+        </v-simple-table>
+      </div>
+    </v-expand-transition>
+
+    <v-row class="justify-end">
+      <v-btn
+        v-if="!is_ethernet()"
+        icon
+        class="pa-6"
+        @click="expand = !expand"
+      >
+        <v-icon>{{ expand ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+      </v-btn>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+import DevicePathHelper from '@/components/common/DevicePathHelper.vue'
+import { PingDevice } from '@/types/ping'
+
+export default Vue.extend({
+  name: 'Ping360Card',
+  components: {
+    DevicePathHelper,
+  },
+  props: {
+    device: {
+      type: Object as PropType<PingDevice>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      expand: false,
+    }
+  },
+  computed: {
+  },
+  methods: {
+    is_ethernet() {
+      return this.device.ethernet_discovery_info !== null
+    },
+    ip_data() {
+      if (this.is_ethernet()) {
+        return this.device.ethernet_discovery_info
+      }
+      return `UDP ${this.device.driver_status.udp_port}`
+    },
+  },
+})
+</script>
+
+<style scoped>
+  i.ping360 {
+    transform: rotate(180deg);
+    margin: 15px;
+  }
+</style>