Custom pwm output widgets

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

@@ -207,10 +207,16 @@ export default Vue.extend({
     },
     param_value() {
       this.updateSelectedFlags()
-      if (this.last_sent_value === undefined) {
-        this.internal_new_value = this.param_value
-        this.internal_new_value_as_string = String(this.internal_new_value)
+      if (
+        this.last_sent_value !== undefined
+         && this.internal_new_value !== this.last_sent_value
+         && this.param_value === this.last_sent_value
+         && this.param_value === this.last_sent_value
+      ) {
+        return
       }
+      this.internal_new_value = this.param_value
+      this.internal_new_value_as_string = String(this.internal_new_value)
     },
   },
   mounted() {

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

@@ -0,0 +1,71 @@
+<template>
+  <v-card class="mt-4 mb-4">
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="12">
+          <span class="text-h6">Leak {{ leak_number }}</span>
+        </v-col>
+      </v-row>
+
+      <v-row align="center">
+        <v-col v-if="type_parameter" cols="4">
+          <inline-parameter-editor
+            :param="type_parameter"
+            label="Sensor type"
+            auto-set
+          />
+        </v-col>
+        <v-col v-if="logic_parameter" cols="4">
+          <inline-parameter-editor
+            :param="logic_parameter"
+            label="Logic when dry"
+            auto-set
+          />
+        </v-col>
+        <v-col v-if="failsafe_parameter" cols="4">
+          <inline-parameter-editor
+            :param="failsafe_parameter"
+            label="Failsafe action"
+            auto-set
+          />
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+
+export default Vue.extend({
+  name: 'LeakSetup',
+  components: {
+    InlineParameterEditor,
+  },
+  props: {
+    leakParameter: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    leak_number(): number {
+      return parseInt(this.leakParameter.name.match(/LEAK(\d+)_TYPE/)?.[1] ?? '0', 10)
+    },
+    type_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`LEAK${this.leak_number}_TYPE`)
+    },
+    logic_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`LEAK${this.leak_number}_LOGIC`)
+    },
+    failsafe_parameter(): Parameter | undefined {
+      return autopilot_data.parameter('FS_LEAK_ENABLE')
+    },
+  },
+})
+</script>

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

@@ -0,0 +1,90 @@
+<template>
+  <v-card class="mt-4 mb-4">
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="6" class="pa0">
+          <parameter-switch
+            v-if="default_parameter"
+            :parameter="default_parameter"
+            :off-value="0"
+            :on-value="1"
+            label="Startup State"
+          />
+          <parameter-switch
+            v-if="inverted_parameter"
+            :parameter="inverted_parameter"
+            :off-value="0"
+            :on-value="1"
+            label="Invert Output"
+          />
+        </v-col>
+        <v-col cols="6">
+          <v-row>
+            <v-btn
+              v-tooltip="'Turn relay on'"
+              class="ma-4"
+              @click="setRelay(1)"
+            >
+              <v-icon small left>
+                mdi-power
+              </v-icon>
+              Relay On
+            </v-btn>
+          </v-row>
+          <v-row>
+            <v-btn
+              v-tooltip="'Turn relay off'"
+              class="ma-4"
+              @click="setRelay(0)"
+            >
+              <v-icon small left>
+                mdi-power-off
+              </v-icon>
+              Relay Off
+            </v-btn>
+          </v-row>
+        </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,83 @@
+<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="warning"
+          >
+            <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'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+import ServoFunctionRangeEditor from './ServoFunctionRangeEditor.vue'
+
+export default Vue.extend({
+  name: 'ServoFunctionActuatorEditor',
+  components: {
+    InlineParameterEditor,
+    ServoFunctionRangeEditor,
+  },
+  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
+      if (!this.actuator_number || !this.options) {
+        return []
+      }
+      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>