Create lights setup component

Author: Williangalvani

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

@@ -28,6 +28,7 @@
 import Vue from 'vue'
 
 import ParamSets from './overview/ParamSets.vue'
+import LightsConfigration from './configuration/lights.vue'
 
 export interface Item {
   title: string,
@@ -39,6 +40,7 @@ export default Vue.extend({
   name: 'Configure',
   components: {
     ParamSets,
+    LightsConfigration
   },
   data() {
     return {
@@ -49,7 +51,7 @@ export default Vue.extend({
         { title: 'Compass', component: undefined },
         { title: 'Baro', component: undefined },
         { title: 'Gripper', component: undefined },
-        { title: 'Lights', component: undefined },
+        { title: 'Lights', component: LightsConfigration },
         { title: 'Camera Mount', component: undefined },
       ] as Item[],
     }

core/frontend/src/components/vehiclesetup/configuration/lights.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <p> Lights Setup goes here </p>
+    <v-card>
+      <v-card-title> Lights 1 </v-card-title>
+      <v-card-text>
+        Here you can configure what pin outputs the signal for the first set of lights. {{ lights1_new_param }}
+        <v-select
+          :items="recommended_params"
+          :item-text="friendlyName"
+          :item-value="'name'"
+          v-model="lights1_new_param"
+          label="Lights 1"
+        ></v-select>
+      </v-card-text>
+    </v-card>
+    <v-card>
+      <p> Lights 2 </p>
+      <span v-for="param in servo_params" :key="param.name">
+        <p>{{ param.name }} {{ printParam(param) }}</p>
+      </span>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import Parameter, { printParam } from '@/types/autopilot/parameter'
+
+enum Lights {
+  Lights1 = 59,  // RCIN9
+  Lights2 = 60,  // RCIN10
+  DISABLED = 0,
+}
+
+export default {
+  name: 'LightsConfigration',
+  data() {
+    return {
+      lights1_new_param: undefined as (string | undefined), // item-value must be a primitive
+      lights2_new_param: undefined as (string | undefined),
+    }
+  },
+  methods: {
+    friendlyName(param: Parameter): string {
+      return `${param.name.replace('SERVO', 'Servo ').replace('_FUNCTION', '')} (${printParam(param)})`
+    },
+    printParam,
+  },
+  watch: {
+    lights1_param(new_value: Parameter | undefined) {
+      this.lights1_new_param = new_value?.name
+    },
+    lights2_param(new_value: Parameter | undefined) {
+      this.lights2_new_param = new_value?.name
+    },
+    // todo: refactor these two methods into one
+    lights1_new_param(new_param_name: string | undefined) {
+      if (new_param_name) {
+        //reset any other parameter using lights1 to undefined
+        for (let old_param of this.servo_params) {
+          if (old_param.name === new_param_name) {
+            continue
+          }
+          if (old_param.value === Lights.Lights1) {
+            // set the old parameter to DISABLED
+            mavlink2rest.setParam(old_param.name, Lights.DISABLED, autopilot_data.system_id)
+          }
+        }
+        mavlink2rest.setParam(new_param_name, Lights.Lights1 , autopilot_data.system_id)
+      }
+    },
+  },
+  computed: {
+    recommended_params(): Parameter[] {
+      // return parameters in servo_params that are on channel 9 and higher
+      return this.servo_params.filter((param) => {
+        const servoNumber = parseInt(param.name.replace('SERVO', '').split('_')[0]);
+        return servoNumber >= 9;
+      });
+
+    },
+    servo_params(): Parameter[] {
+      return autopilot_data.parameterRegex('SERVO[0-9]+_FUNCTION')
+    },
+    lights1_param(): Parameter | undefined {
+      return this.servo_params.filter((param) => param.value === Lights.Lights1)[0]
+    },
+    lights2_param(): Parameter | undefined {
+      return this.servo_params.filter((param) => param.value === Lights.Lights2)[0]
+    },
+  },
+}
+</script>