core: frontend: create compass configuration

core/frontend/package.json

@@ -30,6 +30,7 @@
     "date-fns": "^2.23.0",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.6.2",
+    "gsap": "^3.12.3",
     "http-status-codes": "^2.2.0",
     "image-js": "^0.35.3",
     "is-ip": "^5.0.0",

core/frontend/src/components/common/ParameterSwitch.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <v-switch :model="parameter?.value" @change="updateParam">
+    </v-switch>
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+import { PropType } from 'vue'
+
+export default {
+  name: 'ParameterSwitch',
+  props: {
+    parameter: {
+      type: Object as PropType<Parameter | undefined>,
+      required: true,
+    },
+    off_value: {
+      type: Number,
+      default: 0,
+    },
+    on_value: {
+      type: Number,
+      default: 1,
+    },
+  },
+  methods: {
+    updateParam(new_value: boolean) {
+      if (this.parameter === undefined) {
+        return
+      }
+      mavlink2rest.setParam(
+        this.parameter.name,
+        new_value ? this.on_value : this.off_value,
+        autopilot_data.system_id,
+        this.parameter.paramType.type
+      )
+    }
+  },
+}
+</script>

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

@@ -18,7 +18,11 @@
         v-for="page in pages"
         :key="page.value"
       >
-        <param-sets v-if="page.value === 'parameters'" />
+        <param-sets v-if="page.value === 'parameters' && page.value === 'parameters'" />
+        <template v-if="page.value === 'compass' && pages[page_selected ?? 0].value === 'compass'">
+          <ardupilot-mavlink-compass-setup v-if="params_loaded" />
+          <spinning-logo v-else size="30%" :subtitle="`${loaded_params}/${total_params} parameters loaded`" />
+        </template>
       </v-tab-item>
     </v-tabs-items>
   </v-container>
@@ -27,6 +31,10 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import autopilot_data from '@/store/autopilot'
+
+import SpinningLogo from '../common/SpinningLogo.vue'
+import ArdupilotMavlinkCompassSetup from './configuration/compass/ArdupilotMavlinkCompassSetup.vue'
 import ParamSets from './overview/ParamSets.vue'
 
 export interface Item {
@@ -39,10 +47,12 @@ export default Vue.extend({
   name: 'Configure',
   components: {
     ParamSets,
+    ArdupilotMavlinkCompassSetup,
+    SpinningLogo,
   },
   data() {
     return {
-      page_selected: null as string | null,
+      page_selected: null as number | null,
       pages: [
         { title: 'Parameters', value: 'parameters' },
         { title: 'Accelerometer', value: 'acc' },
@@ -55,5 +65,16 @@ export default Vue.extend({
       ] as Item[],
     }
   },
+  computed: {
+    params_loaded(): boolean {
+      return autopilot_data.finished_loading
+    },
+    loaded_params(): number {
+      return autopilot_data.parameters_loaded
+    },
+    total_params(): number {
+      return autopilot_data.parameters_total
+    },
+  },
 })
 </script>