Custom pwm output widgets

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

@@ -0,0 +1,94 @@
+<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 autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+export default Vue.extend({
+  name: 'RelaySetup',
+  props: {
+    relayParameter: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    relay_number(): number {
+      return parseInt(this.relayParameter.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/ServoFunctionActuatorEditor.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="d-flex align-center">
+    <v-row>
+      <v-col cols="6">
+        <span class="text-h6">Increment</span>
+      </v-col>
+      <v-col cols="6">
+        <inline-parameter-editor
+          :label="actuator_inc_param?.name"
+          :param="actuator_inc_param"
+        />
+      </v-col>
+      <v-row>
+        <v-col cols="12">
+          <v-alert
+            v-if="!has_joystick_function_configured"
+            type="error"
+          >
+            <span>Joystick functions not configured for this actuator.<br />
+              Please configure a joystick button for this actuator using your GCS of choice.</span>
+          </v-alert>
+        </v-col>
+      </v-row>
+      <servo-function-range-editor
+        :param="param"
+      />
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import autopilot from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+export default Vue.extend({
+  name: 'ServoFunctionActuatorEditor',
+  props: {
+    param: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    actuator_number(): number | undefined {
+      const option_name = this.param.options?.[this.param.value] as string
+      const actuator_number = option_name?.match(/\d+/)?.[0]
+      if (!actuator_number) return undefined
+      return parseInt(actuator_number, 10)
+    },
+    actuator_inc_param(): Parameter | undefined {
+      return autopilot.parameter(`ACTUATOR${this.actuator_number}_INC`)
+    },
+    btn_params(): Parameter[] {
+      // returns all JS button parameters
+      return autopilot.parameterRegex('BTN(\\d+)_(S?)FUNCTION') as Parameter[]
+    },
+    options(): Record<string, string> {
+      return this.btn_params[0]?.options as Record<string, string>
+    },
+    this_actuator_functions(): number[] {
+      // returns the joystick button functions for the current actuator
+      return Object.entries(this.options)
+        .filter(([_, value]) => value.startsWith(`actuator_${this.actuator_number}_`))
+        .map(([key]) => parseInt(key, 10))
+    },
+    has_joystick_function_configured(): boolean {
+      return this.btn_params.some((param) => this.this_actuator_functions.includes(param.value as number))
+    },
+  },
+})
+</script>