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,52 @@
+<template>
+  <div>
+    <v-switch v-model="switchValue" :label="label" />
+  </div>
+</template>
+<script lang="ts">
+import { PropType } from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+export default {
+  name: 'ParameterSwitch',
+  props: {
+    parameter: {
+      type: Object as PropType<Parameter | undefined>,
+      required: true,
+    },
+    offValue: {
+      type: Number,
+      default: 0,
+    },
+    onValue: {
+      type: Number,
+      default: 1,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    switchValue: {
+      get(): boolean {
+        return this.parameter?.value === this.onValue
+      },
+      set(newValue: boolean) {
+        if (this.parameter === undefined) {
+          return
+        }
+        mavlink2rest.setParam(
+          this.parameter.name,
+          newValue ? this.onValue : this.offValue,
+          autopilot_data.system_id,
+          this.parameter.paramType.type,
+        )
+      },
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,53 @@
+<template>
+  <v-textarea auto-grow :value="all_messages" readonly />
+</template>
+
+<script lang="ts">
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import Listener from '@/libs/MAVLink2Rest/Listener'
+
+export default {
+  name: 'StatusTextWatcher',
+  props: {
+    filter: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      messages: [] as string[],
+      listener: undefined as undefined | Listener,
+      filterRegex: /.*/,
+    }
+  },
+  computed: {
+    all_messages(): string {
+      return this.messages.join('\n')
+    },
+  },
+  watch: {
+    filter(newFilter) {
+      this.filterRegex = new RegExp(newFilter)
+    },
+  },
+  mounted() {
+    this.listener = mavlink2rest.startListening('STATUSTEXT').setCallback((receivedMessage) => {
+      const text = receivedMessage.message.text.join('')
+      if (this.messages && this.messages[this.messages.length - 1] === text) {
+        return
+      }
+      if (new RegExp(this.filter).test(text)) {
+        this.$emit('message', text)
+      }
+      this.messages.push(text)
+    })
+  },
+  beforeDestroy() {
+    if (this.listener) {
+      this.listener.discard()
+    }
+  },
+}
+
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <v-overlay
+    v-if="reboot_required"
+    :absolute="true"
+    :opacity="0.7"
+  >
+    <div class="d-flex flex-column justify-center align-center">
+      <p class="text-center">
+        Parameters are out of sync. An autopilot Reboot is required.
+      </p>
+      <v-btn
+        class="ml-auto mr-auto"
+        color="primary"
+        @click="rebootVehicle()"
+      >
+        Reboot Autopilot
+      </v-btn>
+    </div>
+  </v-overlay>
+</template>
+
+<script lang="ts">
+import * as AutopilotManager from '@/components/autopilot/AutopilotManagerUpdater'
+import autopilot_data from '@/store/autopilot'
+
+export default {
+  name: 'RebootRequiredOverlay',
+  computed: {
+    reboot_required(): boolean {
+      return autopilot_data.reboot_required
+    },
+  },
+  methods: {
+    rebootVehicle() {
+      AutopilotManager.restart()
+    },
+  },
+}
+</script>

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

@@ -27,6 +27,8 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import SpinningLogo from '../common/SpinningLogo.vue'
+import ArdupilotMavlinkCompassSetup from './configuration/compass/ArdupilotMavlinkCompassSetup.vue'
 import ParamSets from './overview/ParamSets.vue'
 
 export interface Item {
@@ -39,14 +41,16 @@ 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', component: ParamSets },
         { title: 'Accelerometer', component: undefined },
-        { title: 'Compass', component: undefined },
+        { title: 'Compass', component: ArdupilotMavlinkCompassSetup },
         { title: 'Baro', component: undefined },
         { title: 'Gripper', component: undefined },
         { title: 'Lights', component: undefined },