core: frontend: add configuration for lights

Author: Williangalvani

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

@@ -27,8 +27,8 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import ParamSets from './overview/ParamSets.vue'
 import LightsConfigration from './configuration/lights.vue'
+import ParamSets from './overview/ParamSets.vue'
 
 export interface Item {
   title: string,
@@ -40,7 +40,7 @@ export default Vue.extend({
   name: 'Configure',
   components: {
     ParamSets,
-    LightsConfigration
+    LightsConfigration,
   },
   data() {
     return {

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

@@ -1,24 +1,43 @@
 <template>
-  <div>
-    <p> Lights Setup goes here </p>
+  <div class="d-flex">
     <v-card>
-      <v-card-title> Lights 1 </v-card-title>
+      <v-card-title> Lights 1 (RCIN9) </v-card-title>
       <v-card-text>
-        Here you can configure what pin outputs the signal for the first set of lights. {{ lights1_new_param }}
+        Here you can configure what pin outputs the signal for the first set of lights.
         <v-select
+          v-model="lights1_new_param"
           :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>
+      <v-card-title> Lights 2 (RCIN10) </v-card-title>
+      <v-card-text>
+        What pin outputs the signal for the second set of lights.
+        <v-select
+          v-model="lights2_new_param"
+          :items="recommended_params"
+          :item-text="friendlyName"
+          :item-value="'name'"
+          label="Lights 2"
+        />
       </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-title> Joystick steps </v-card-title>
+      <v-card-text>
+        How many button presses it takes to go from 0% to 100% brightness.
+        <v-text-field
+          ref="steps_input"
+          v-model="steps_new_value"
+          label="Joystick steps"
+          type="number"
+          @input="setSteps"
+        />
+      </v-card-text>
     </v-card>
   </div>
 </template>
@@ -29,8 +48,8 @@ import autopilot_data from '@/store/autopilot'
 import Parameter, { printParam } from '@/types/autopilot/parameter'
 
 enum Lights {
-  Lights1 = 59,  // RCIN9
-  Lights2 = 60,  // RCIN10
+  Lights1 = 59, // RCIN9
+  Lights2 = 60, // RCIN10
   DISABLED = 0,
 }
 
@@ -40,15 +59,43 @@ export default {
     return {
       lights1_new_param: undefined as (string | undefined), // item-value must be a primitive
       lights2_new_param: undefined as (string | undefined),
+      steps_new_value: 0,
     }
   },
-  methods: {
-    friendlyName(param: Parameter): string {
-      return `${param.name.replace('SERVO', 'Servo ').replace('_FUNCTION', '')} (${printParam(param)})`
+  computed: {
+    light_steps(): Parameter | undefined {
+      return autopilot_data.parameter('JS_LIGHTS_STEPS')
+    },
+    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], 10)
+        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]
     },
-    printParam,
   },
   watch: {
+    steps_param(new_value: Parameter | undefined) {
+      this.steps_new_value = new_value?.value ?? 0
+    },
+    steps_new_value(new_value: number | undefined) {
+      if (new_value) {
+        if (this.light_steps?.value === new_value) {
+          return
+        }
+        mavlink2rest.setParam('JS_LIGHTS_STEPS', new_value, autopilot_data.system_id)
+      }
+    },
+
     lights1_param(new_value: Parameter | undefined) {
       this.lights1_new_param = new_value?.name
     },
@@ -58,8 +105,8 @@ export default {
     // 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) {
+        // reset any other parameter using lights1 to undefined
+        for (const old_param of this.servo_params) {
           if (old_param.name === new_param_name) {
             continue
           }
@@ -68,27 +115,41 @@ export default {
             mavlink2rest.setParam(old_param.name, Lights.DISABLED, autopilot_data.system_id)
           }
         }
-        mavlink2rest.setParam(new_param_name, Lights.Lights1 , 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')
+    lights2_new_param(new_param_name: string | undefined) {
+      if (new_param_name) {
+        // reset any other parameter using lights2 to undefined
+        for (const old_param of this.servo_params) {
+          if (old_param.name === new_param_name) {
+            continue
+          }
+          if (old_param.value === Lights.Lights2) {
+            // set the old parameter to DISABLED
+            mavlink2rest.setParam(old_param.name, Lights.DISABLED, autopilot_data.system_id)
+          }
+        }
+        mavlink2rest.setParam(new_param_name, Lights.Lights2, autopilot_data.system_id)
+      }
     },
-    lights1_param(): Parameter | undefined {
-      return this.servo_params.filter((param) => param.value === Lights.Lights1)[0]
+  },
+  mounted() {
+    this.lights1_new_param = this.lights1_param?.name
+    this.lights2_new_param = this.lights2_param?.name
+    this.steps_new_value = this.light_steps?.value ?? 0
+  },
+  methods: {
+    friendlyName(param: Parameter): string {
+      return `${param.name.replace('SERVO', 'Servo ').replace('_FUNCTION', '')} (${printParam(param)})`
     },
-    lights2_param(): Parameter | undefined {
-      return this.servo_params.filter((param) => param.value === Lights.Lights2)[0]
+    setSteps() {
+      const new_value = Math.min(Math.max(this.steps_new_value, 1), 10)
+      this.$nextTick(() => {
+        this.steps_new_value = new_value
+      })
+      console.log('setting steps to', new_value)
+      mavlink2rest.setParam('JS_LIGHTS_STEPS', new_value, autopilot_data.system_id)
     },
   },
 }