frontend: add relay configuration to vehicle setup

Author: Williangalvani

core/frontend/src/components/parameter-editor/RelaySetup.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-card class="mt-4 mb-4">
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="6">
+          <span class="text-h6">Relay {{ relay_number }}</span>
+        </v-col>
+        <v-col cols="6" class="d-flex justify-end">
+            <v-btn
+              v-tooltip="'Turn relay off'"
+              small
+              @click="setRelay(0)"
+            >
+              <v-icon small left>mdi-power-off</v-icon>
+              Relay Off
+            </v-btn>
+            <v-btn
+              v-tooltip="'Turn relay on'"
+              small
+              @click="setRelay(1)"
+            >
+              <v-icon small left>mdi-power</v-icon>
+              Relay On
+            </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row align="center">
+
+        <v-col cols="6" class="pa0">
+          <parameter-switch
+            v-if="inverted_parameter"
+            :parameter="inverted_parameter"
+            :off-value="0"
+            :on-value="1"
+            label="Invert Output"
+          />
+        </v-col>
+        <v-col cols="6" class="pa0">
+          <parameter-switch
+            v-if="default_parameter"
+            :parameter="default_parameter"
+            :off-value="0"
+            :on-value="1"
+            label="Startup State"
+          />
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import { MavCmd } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
+import Parameter from '@/types/autopilot/parameter'
+import autopilot_data from '@/store/autopilot';
+
+export default Vue.extend({
+  name: 'RelaySetup',
+  props: {
+    relay_parameter: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    relay_number(): number {
+      return parseInt(this.relay_parameter.name.match(/RELAY(\d+)_FUNCTION/)?.[1] ?? '0', 10)
+    },
+    inverted_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`RELAY${this.relay_number}_INVERTED`)
+    },
+    default_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`RELAY${this.relay_number}_DEFAULT`)
+    },
+  },
+  methods: {
+    setRelay(setting: number): void {
+      // MAV_CMD_DO_SET_RELAY: param1 = relay instance (0-indexed), param2 = setting (0=off, 1=on, 2=toggle)
+      mavlink2rest.sendCommandLong(
+        MavCmd.MAV_CMD_DO_SET_RELAY,
+        this.relay_number - 1, // Convert to 0-indexed relay instance
+        setting,
+      )
+    },
+  },
+})
+</script>
+  

core/frontend/src/components/parameter-editor/ServoFunctionGpioEditor.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="align-center">
-    GPIOs can be used for Relays, Leak detection, and other functions not yet supported by this UI.
-    This servo ({{ servo_number }}) gpio is {{ this_servo_gpio }}.
-
-    In use by {{ function_type_using_this_gpio?.name }}
-
+    <p>
+        Some flight controller servo channels are capable of digital (GPIO) functionalities. Available options include relays, leak detection (input-capable pins only), and other functions not yet supported by this UI.
+    </p>
+    <p>
+      This servo's GPIO (<strong>{{ this_servo_gpio }}</strong>) is currently in use by
+      <strong>{{ function_type_using_this_gpio?.name ?? 'nothing' }}</strong>.
+    </p>
     <v-row align="end">
         <v-col cols="6">
-            <span style="font-size: 1.0rem;">Change function for this servo's GPIO</span>
+            <span style="font-size: 1.0rem;">GPIO Function:</span>
         </v-col>
         <v-col cols="6">
             <v-select
@@ -21,6 +23,10 @@
             />
         </v-col>
     </v-row>
+    <relay-setup
+      v-if="function_type_using_this_gpio?.name?.includes('RELAY')"
+      :relay_parameter="function_type_using_this_gpio"
+    />
 
   </div>
 </template>

core/frontend/src/components/vehiclesetup/PwmSetup.vue

@@ -136,7 +136,7 @@
                   <td v-tooltip="item.name">
                     {{ convert_servo_name(item.name) }}
                   </td>
-                  <td>{{ stringToUserFriendlyText(printParam(item)) }}</td>
+                  <td>{{ parameterToUserFriendlyText(item) }}</td>
                   <td>{{ servo_output[index] }}</td>
                 </tr>
               </tbody>
@@ -173,7 +173,7 @@ import { SERVO_FUNCTION } from '@/types/autopilot/parameter-sub-enums'
 import { Dictionary } from '@/types/common'
 import { armDisarm, doMotorTest } from '@/utils/ardupilot_mavlink'
 import mavlink_store_get from '@/utils/mavlink'
-
+import { fetchCurrentBoard } from '@/components/autopilot/AutopilotManagerUpdater'
 import ParameterSwitch from '../common/ParameterSwitch.vue'
 
 interface MotorTestTarget {
@@ -376,6 +376,30 @@ export default Vue.extend({
       return output
         .map((_, i) => data[`servo${i + 1}_raw`])
     },
+    board_name(): string | undefined {
+      return autopilot.current_board?.name
+    },
+    gpio_to_parameter(): Record<number, Parameter> {
+      return Object.fromEntries(
+        autopilot_data.parameterRegex('^.*_PIN$')
+          .map((param) => [param.value, param])
+      )
+    },
+    servo_to_gpio(): Record<number, number> {
+      const isNavigator = this.board_name?.includes('Navigator')
+      return Object.fromEntries(
+        Array.from({ length: 16 }, (_, i) => {
+          const servo = i + 1
+          if (isNavigator) {
+            return [servo, servo]
+          }
+          if (servo <= 8) {
+            return [servo, servo + 100]
+          }
+          return [servo, servo - 9 + 50]
+        })
+      )
+    },
   },
   watch: {
     is_armed() {
@@ -392,6 +416,8 @@ export default Vue.extend({
   mounted() {
     this.motor_zeroer_interval = setInterval(this.zero_motors, 300)
     this.motor_writer_interval = setInterval(this.write_motors, 100)
+    fetchCurrentBoard()
+
     mavlink.setMessageRefreshRate({ messageName: 'SERVO_OUTPUT_RAW', refreshRate: 10 })
     this.desired_armed_state = this.is_armed
     this.installListeners()
@@ -455,6 +481,19 @@ export default Vue.extend({
       this.selected_param = param
       this.edit_param_dialog = true
     },
+    parameterToUserFriendlyText(param: Parameter): string {
+      if (param.value === -1) { // GPIO
+        const servo_number = parseInt(/\d+/g.exec(param.name)?.[0] ?? '0', 10)
+        const gpio = this.servo_to_gpio[servo_number]
+        const param_using_this_gpio = this.gpio_to_parameter[gpio]
+        if (param_using_this_gpio) {
+            const pretty_name = param_using_this_gpio.name.split('_')[0].toLowerCase().toTitle()
+            return `GPIO [${pretty_name}]`
+        }
+        return `Unknown GPIO ${gpio}`
+      }
+      return this.stringToUserFriendlyText(printParam(param))
+    },
     stringToUserFriendlyText(text: string) {
       return param_value_map?.[this.vehicle_type ?? '']?.[text] ?? text
     },