diff --git a/core/frontend/package.json b/core/frontend/package.json
index 3b32cf4d57..169381b531 100644
--- a/core/frontend/package.json
+++ b/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",
diff --git a/core/frontend/src/components/vehiclesetup/Configure.vue b/core/frontend/src/components/vehiclesetup/Configure.vue
index a1e2ee0e15..539ec8164f 100644
--- a/core/frontend/src/components/vehiclesetup/Configure.vue
+++ b/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,6 +41,8 @@ export default Vue.extend({
   name: 'Configure',
   components: {
     ParamSets,
+    ArdupilotMavlinkCompassSetup,
+    SpinningLogo,
   },
   data() {
     return {
@@ -46,7 +50,7 @@ export default Vue.extend({
       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 },
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/ArdupilotMavlinkCompassSetup.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/ArdupilotMavlinkCompassSetup.vue
new file mode 100644
index 0000000000..266c386ca9
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/ArdupilotMavlinkCompassSetup.vue
@@ -0,0 +1,439 @@
+<template>
+  <v-card v-if="params_finished_loaded">
+    <div class="d-flex flex-col">
+      <v-card outline class="pa-2 mt-4 mr-2 mb-2 flex-shrink-1">
+        <compass-display :compasses="compasses_sorted_by_priority" />
+        <v-card class="pa-2 ma-2" width="300px">
+          <v-card-title>
+            Declination
+          </v-card-title>
+          <v-card-text class="flex-shrink-1">
+            <parameter-switch label="Auto Declination" :parameter="compass_autodec" />
+            <p>
+              If you enable this option, the autopilot will automatically set the declination based on your current
+              location. A GPS or other absolute positioning system is required.
+            </p>
+            <v-text-field
+              label="Current Declination"
+              :disabled="compass_autodec?.value !== 0"
+              :value="printParam(compass_dec)"
+              @click="openParameterEditor(compass_dec)"
+            />
+          </v-card-text>
+        </v-card>
+      </v-card>
+      <v-card outline class="pa-2 mt-4 mr-2 mb-2">
+        <v-card-title>
+          <h3>Compass Calibration</h3>
+        </v-card-title>
+        <v-card-text>
+          <div class="d-flex flex-column">
+            <v-expansion-panels>
+              <v-expansion-panel>
+                <v-expansion-panel-header>
+                  Quick Compass Calibration
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                  <p>
+                    This does a "quick" calibration of your compass.
+                    You need to point your vehicle North,and then click the button.
+                    This results in a much less accurate calibration, but is also much faster.
+                    It can be a good starting point for calibration, followed by <b>CompassLearn</b>.
+                  </p>
+                  <large-vehicle-compass-calibrator :compasses="compasses" />
+                </v-expansion-panel-content>
+              </v-expansion-panel>
+
+              <v-expansion-panel>
+                <v-expansion-panel-header>
+                  Compass Learn
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                  <p>
+                    This allows automatic "calibration" of compass offsets. You need to have a valid world position.
+                    In order to use this option, click the following button and then driver the vehicle around until you
+                    see the message <b>"CompassLearn: finished"</b>
+                  </p>
+                  <compass-learn :compasses="compasses" />
+                </v-expansion-panel-content>
+              </v-expansion-panel>
+              <v-expansion-panel>
+                <v-expansion-panel-header>
+                  Onboard Calibration (Coming soon)
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                  <p>
+                    This does a full calibration of the compasses.
+                    It requires you to spin the vehicle around manually multiple times.
+                    You need move the vehicle around in all 3 axis.
+                  </p>
+                </v-expansion-panel-content>
+              </v-expansion-panel>
+              <v-expansion-panel>
+                <v-expansion-panel-header>
+                  Log-based Calibration (Coming soon)
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                  <p>
+                    This used logs from previous flights to calibrate the compasses.
+                    This usually gives the best results.
+                    While it is not currently implemented here. It can be done either in
+                    <a href="https://firmware.ardupilot.org/Tools/WebTools/">Ardupilot WebTools</a> and
+                    <a href="https://plotbeta.ardupilot.org/">LogViewer</a>.
+                  </p>
+                </v-expansion-panel-content>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </div>
+        </v-card-text>
+      </v-card>
+    </div>
+    <div class="d-flex flex-row">
+      <v-tabs v-model="tab" vertical color="primary">
+        <draggable v-model="reordered_compasses" handle=".drag-handle">
+          <v-tab
+            v-for="compass in reordered_compasses"
+            :key="compass.deviceIdNumber"
+            class="pl-0 pr-0 compass-tab pt-7 pb-7 mt-4 mb-4"
+            outline
+          >
+            <v-icon lg start class="mr-2 mt-3 mb-3 drag-handle">
+              mdi-drag-vertical
+            </v-icon>
+            <v-icon start class="mr-2" :style="`color:${compassColors[compass.deviceIdNumber - 1]}`">
+              mdi-compass
+            </v-icon>
+            <div class="d-flex flex-column pa-3">
+              {{ compass.deviceName }} <br />
+              {{ compass_description[compass.param] }}
+              <v-chip
+                v-if="compass_is_calibrated[compass.param]"
+                color="green"
+                text-color="white"
+                x-small
+                class="calibration-chip"
+              >
+                Calibrated
+              </v-chip>
+              <v-chip v-else color="red" text-color="white" x-small>
+                Needs Calibration
+              </v-chip>
+            </div>
+            <v-icon end>
+              mdi-cog
+            </v-icon>
+          </v-tab>
+        </draggable>
+        <v-card outlined class="ml-auto mr-auto rounded-lg pa-3" style="max-width: 200px;">
+          To change the order of the compasses, drag them up and down in this list using the drag handler.
+          This Operation requires an autopilot restart.
+        </v-card>
+        <v-tab-item
+          v-for="(compass, index) in compasses"
+          v-show="tab === index"
+          :key="index"
+          transition="v-scroll-y-transition"
+        >
+          <v-card outlined class="pa-2 mt-4 compass-settings">
+            <v-card-title>
+              <h3>{{ compass.deviceName }}</h3>
+            </v-card-title>
+            <v-row>
+              <v-col cols="6">
+                <v-card class="pa-5 mt-3">
+                  <h4>Settings</h4>
+                  <div v-if="compass_use_param[index]">
+                    <parameter-switch
+                      label="Use Compass"
+                      :parameter="compass_use_param[index]"
+                    />
+                  </div>
+                  <div v-else>
+                    This Compass is not in use, move it higher in the list in order to be able to use it
+                  </div>
+                  <b>External/Internal:</b>
+                  <v-btn class="ml-8 mb-4 mt-2" fab x-small @click="openParameterEditor(compass_extern_param[index])">
+                    <v-icon>
+                      mdi-cog
+                    </v-icon>
+                  </v-btn>
+                  {{ printParam(compass_extern_param[index]) }}
+                  <br />
+
+                  <template v-if="compass_extern_param[index]?.value ?? 0 === 0">
+                    <b>Mounting Rotation:</b>
+                    <v-btn class="ml-4" fab x-small @click="openParameterEditor(compass_orient_param[index])">
+                      <v-icon>
+                        mdi-cog
+                      </v-icon>
+                    </v-btn>
+                    {{ printParam(compass_orient_param[index]) }}
+                  </template>
+                  <template v-else>
+                    Same as the Autopilot's
+                  </template>
+                </v-card>
+                <v-card class="pa-5">
+                  <h4>Details</h4>
+                  <p>Bus: 0x{{ compass.address }} @ {{ compass.busType }}{{ compass.bus }} </p>
+                </v-card>
+              </v-col>
+              <v-col cols="6">
+                <compass-params :index="index + 1" />
+              </v-col>
+            </v-row>
+          </v-card>
+        </v-tab-item>
+      </v-tabs>
+    </div>
+    <parameter-editor-dialog
+      v-model="edit_param_dialog"
+      :param="edited_param"
+    />
+  </v-card>
+  <spinning-logo v-else size="50%" :subtitle="`${loaded_params}/${total_params} parameters loaded`" />
+</template>
+<script lang="ts">
+import Vue from 'vue'
+import draggable from 'vuedraggable'
+import {
+  VCardText, VExpansionPanel, VTextField,
+} from 'vuetify/lib'
+
+import ParameterSwitch from '@/components/common/ParameterSwitch.vue'
+import SpinningLogo from '@/components/common/SpinningLogo.vue'
+import CompassDisplay from '@/components/vehiclesetup/configuration/compass/CompassDisplay.vue'
+import CompassParams from '@/components/vehiclesetup/configuration/compass/CompassParams.vue'
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import Parameter, { printParam } from '@/types/autopilot/parameter'
+import { Dictionary } from '@/types/common'
+import decode, { deviceId } from '@/utils/deviceid_decoder'
+
+import CompassLearn from './CompassLearn.vue'
+import LargeVehicleCompassCalibrator from './LargeVehicleCompassCalibrator.vue'
+
+export default Vue.extend({
+  name: 'MavlinkCompassSetup',
+  components: {
+    CompassDisplay,
+    CompassLearn,
+    CompassParams,
+    draggable,
+    VTextField,
+    LargeVehicleCompassCalibrator,
+    ParameterSwitch,
+    SpinningLogo,
+    VCardText,
+    VExpansionPanel,
+  },
+  data() {
+    return {
+      tab: 0,
+      compassColors: ['green', 'blue', 'purple'],
+      reordered_compasses: [] as deviceId[],
+      edited_param: undefined as (undefined | Parameter),
+      edit_param_dialog: false,
+    }
+  },
+  computed: {
+    params_finished_loaded(): boolean {
+      return autopilot_data.finished_loading
+    },
+    loaded_params(): number {
+      return autopilot_data.parameters_loaded
+    },
+    total_params(): number {
+      return autopilot_data.parameters_total
+    },
+    compass_autodec(): Parameter | undefined {
+      return autopilot_data.parameter('COMPASS_AUTODEC')
+    },
+    compass_dec(): Parameter | undefined {
+      return autopilot_data.parameter('COMPASS_DEC')
+    },
+    compasses(): deviceId[] {
+      return autopilot_data.parameterRegex('^COMPASS_DEV_ID.*')
+        .filter((param) => param.value !== 0)
+        .map((parameter) => decode(parameter.name, parameter.value))
+    },
+    compass_priority(): Dictionary<number> {
+      const results = {} as Dictionary<number>
+      for (const compass of this.compasses) {
+        // First we check the priority for this device
+        for (const param of autopilot_data.parameterRegex('^COMPASS_PRIO.*_ID')) {
+          if (param.value === compass.paramValue) {
+            const number_in_parameter_as_string = param.name.match(/\d+/g)?.[0] ?? '1'
+            results[compass.param] = parseInt(number_in_parameter_as_string, 10)
+          }
+        }
+      }
+      return results
+    },
+    compasses_sorted_by_priority(): deviceId[] {
+      const sortedCompasses = [...this.compasses]
+      sortedCompasses.sort((a, b) => this.compass_priority[a.param] - this.compass_priority[b.param])
+      return sortedCompasses
+    },
+    compass_description(): Dictionary<string> {
+      const results = {} as Dictionary<string>
+      for (const compass of this.compasses) {
+        // First we check the priority for this device
+        let priority = 'Unused'
+        let number_in_parameter = 0
+        for (const param of autopilot_data.parameterRegex('^COMPASS_PRIO.*_ID')) {
+          if (param.value === compass.paramValue) {
+            const number_in_parameter_as_string = param.name.match(/\d+/g)?.[0] ?? '1'
+            number_in_parameter = parseInt(number_in_parameter_as_string, 10)
+            switch (number_in_parameter) {
+              case 1:
+                priority = '1st'
+                break
+              case 2:
+                priority = '2nd'
+                break
+              case 3:
+                priority = '3rd'
+                break
+              default:
+                priority = 'Unused'
+            }
+          }
+        }
+        // Then we check if it is internal or external
+        const extern_param_name = number_in_parameter === 1
+          ? 'COMPASS_EXTERNAL' : `COMPASS_EXTERN${number_in_parameter}`
+        const external = autopilot_data.parameter(extern_param_name)?.value === 1 ?? false
+        const external_string = external ? 'external' : 'internal'
+        results[compass.param] = `${priority} (${external_string})`
+      }
+      return results
+    },
+    compass_is_calibrated(): Dictionary<boolean> {
+      const results = {} as Dictionary<boolean>
+      for (const compass of this.compasses) {
+        const compass_number = compass.param.split('COMPASS_DEV_ID')[1]
+        const offset_params_names = [
+          `COMPASS_OFS${compass_number}_X`,
+          `COMPASS_OFS${compass_number}_Y`,
+          `COMPASS_OFS${compass_number}_Z`,
+        ]
+        const diagonal_params_names = [
+          `COMPASS_ODI${compass_number}_X`,
+          `COMPASS_ODI${compass_number}_Y`,
+          `COMPASS_ODI${compass_number}_Z`,
+        ]
+
+        const offset_params = offset_params_names.map(
+          (name) => autopilot_data.parameter(name),
+        )
+        const diagonal_params = diagonal_params_names.map(
+          (name) => autopilot_data.parameter(name),
+        )
+        if (offset_params.includes(undefined) || diagonal_params.includes(undefined)) {
+          results[compass.param] = false
+          continue
+        }
+        const scale_param_name = `COMPASS_SCALE${compass_number}`
+        const scale_param = autopilot_data.parameter(scale_param_name)
+        const is_at_default_offsets = offset_params.every((param) => param?.value === 0.0)
+        const is_at_default_diagonals = diagonal_params.every((param) => param?.value === 0.0)
+        results[compass.param] = offset_params.isEmpty() || diagonal_params.isEmpty()
+          || !is_at_default_offsets || !is_at_default_diagonals || scale_param?.value !== 0.0
+      }
+      return results
+    },
+    compass_orient_param(): Parameter[] {
+      const results = [] as Parameter[]
+      for (let i = 1; i <= 3; i += 1) {
+        const param_name = i === 1 ? 'COMPASS_ORIENT' : `COMPASS_ORIENT${i}`
+        const param = autopilot_data.parameter(param_name)
+        if (param) {
+          results.push(param)
+        }
+      }
+      return results
+    },
+    compass_use_param(): Parameter[] {
+      const results = [] as Parameter[]
+      for (let i = 1; i <= 3; i += 1) {
+        const param_name = i === 1 ? 'COMPASS_USE' : `COMPASS_USE${i}`
+        const param = autopilot_data.parameter(param_name)
+        if (param) {
+          results.push(param)
+        }
+      }
+      return results
+    },
+    compass_extern_param(): Parameter[] {
+      const results = [] as Parameter[]
+      for (let i = 1; i <= 3; i += 1) {
+        const param_name = i === 1 ? 'COMPASS_EXTERNAL' : `COMPASS_EXTERN${i}`
+        const param = autopilot_data.parameter(param_name)
+        if (param) {
+          results.push(param)
+        }
+      }
+      return results
+    },
+  },
+  watch: {
+    compasses_sorted_by_priority() {
+      if (this.reordered_compasses.isEmpty()) {
+        this.reordered_compasses = this.compasses_sorted_by_priority
+      }
+    },
+    reordered_compasses() {
+      const compasses = this.reordered_compasses
+      for (const [index, compass] of compasses.entries()) {
+        const param_name = `COMPASS_PRIO${index + 1}_ID`
+        const param = autopilot_data.parameter(param_name)
+        if (param?.value !== compass.paramValue) {
+          mavlink2rest.setParam(param_name, compass.paramValue, autopilot_data.system_id)
+          autopilot_data.setRebootRequired(true)
+        }
+      }
+    },
+  },
+  mounted() {
+    this.reordered_compasses = this.compasses_sorted_by_priority
+  },
+  methods: {
+    printParam,
+    openParameterEditor(parameter: Parameter | undefined) {
+      if (parameter) {
+        this.edited_param = parameter
+        this.edit_param_dialog = true
+      }
+    },
+  },
+})
+</script>
+<style scoped>
+.chip-container {
+  display: flex;
+  flex-direction: column; /* Change the flex-direction to column */
+  align-items: flex-start; /* Align items to the start */
+}
+.compass-tab.v-tab--active {
+  border-bottom:  1px solid var(--v-primary-base);
+  border-top: 1px solid var(--v-primary-base);
+  border-left:  1px solid var(--v-primary-base);
+  border-radius: 5px 0 0 5px;
+  transform: translateX(5px);
+}
+.compass-tab {
+  border-bottom:  1px solid var(--v-primary-base);
+  border-top: 1px solid var(--v-primary-base);
+  border-left:  1px solid var(--v-primary-base);
+  border-radius: 5px 0 0 5px;
+}
+
+.calibration-chip {
+  margin: auto;
+}
+
+.compass-settings {
+  border-color: var(--v-primary-base);
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/CompassDisplay.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassDisplay.vue
new file mode 100644
index 0000000000..207fddda85
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassDisplay.vue
@@ -0,0 +1,298 @@
+<template>
+  <div ref="compassRoot" class="compass">
+    <reboot-required-overlay />
+    <canvas
+      ref="canvasRef"
+      class="rounded-[15%] bg-slate-950/70"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+// based on https://github.com/bluerobotics/cockpit/blob/master/src/components/widgets/Compass.vue
+
+import gsap from 'gsap'
+import Vue, { PropType } from 'vue'
+
+import RebootRequiredOverlay from '@/components/common/rebootRequiredOverlay.vue'
+import autopilot_data from '@/store/autopilot'
+import mavlink from '@/store/mavlink'
+import { Dictionary } from '@/types/common'
+import { deviceId } from '@/utils/deviceid_decoder'
+import { degrees, Vector3 } from '@/utils/math'
+import mavlink_store_get from '@/utils/mavlink'
+import { mag_heading } from '@/utils/mavlink_math'
+
+function radians(degs: number): number {
+  return degs * (Math.PI / 180)
+}
+
+function sequentialArray(length: number): number[] {
+  return Array.from({ length }, (_, i) => i)
+}
+
+const mainAngles = {
+  0: 'N',
+  45: 'NE',
+  90: 'E',
+  135: 'SE',
+  180: 'S',
+  225: 'SW',
+  270: 'W',
+  315: 'NW',
+}
+
+export default Vue.extend({
+  name: 'CompassDisplay',
+  components: {
+    RebootRequiredOverlay,
+  },
+  props: {
+    compasses: {
+      type: Array as PropType<deviceId[]>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      compassColors: ['green', 'blue', 'purple'],
+      canvasSize: 300,
+      renderVariables: {
+        yawAngleDegrees: [0, 0, 0, 0],
+      },
+    }
+  },
+  computed: {
+    canvas(): HTMLCanvasElement {
+      return this.$refs.canvasRef as HTMLCanvasElement
+    },
+    attitude(): Vector3 | null {
+      const msg = mavlink_store_get(mavlink, 'ATTITUDE.messageData.message') as Dictionary<number>
+      if (!msg) return new Vector3(0, 0, 0)
+      return new Vector3(msg.roll, msg.pitch, msg.yaw)
+    },
+    imu1(): Vector3 | null {
+      const msg = mavlink_store_get(mavlink, 'RAW_IMU.messageData.message') as Dictionary<number>
+      if (!msg) return null
+      return new Vector3(msg.xmag, msg.ymag, msg.zmag)
+    },
+    imu2(): Vector3 | null {
+      const msg = mavlink_store_get(mavlink, 'SCALED_IMU2.messageData.message') as Dictionary<number>
+      if (!msg) return null
+      return new Vector3(msg.xmag, msg.ymag, msg.zmag)
+    },
+    imu3(): Vector3 | null {
+      const msg = mavlink_store_get(mavlink, 'SCALED_IMU3.messageData.message') as Dictionary<number>
+      if (!msg) return null
+      return new Vector3(msg.xmag, msg.ymag, msg.zmag)
+    },
+    yaw(): number {
+      if (this.attitude === null) {
+        return 0
+      }
+      return degrees(this.attitude.z)
+    },
+    mag_headings(): (number | null)[] {
+      if (!this.attitude) {
+        return []
+      }
+      const ret = []
+      for (const imu of [this.imu1, this.imu2, this.imu3]) {
+        if (imu === null) {
+          ret.push(null)
+          continue
+        }
+        const heading = mag_heading(imu, this.attitude, this.declinationDegs)
+        ret.push(heading)
+      }
+      return ret
+    },
+    headings(): (number | null)[] {
+      return [...this.mag_headings, this.yaw]
+    },
+    primaryBaseColor(): string {
+      return getComputedStyle(document.documentElement).getPropertyValue('--v-primary-base').trim()
+    },
+    declinationDegs(): number {
+      return degrees(autopilot_data.parameter('COMPASS_DEC')?.value ?? 0)
+    },
+  },
+  mounted() {
+    console.log('Mounted')
+    this.$nextTick(() => {
+      if (!this.$refs.canvasRef) return
+      this.canvas.width = this.canvasSize
+      this.canvas.height = this.canvasSize
+    })
+    this.initializeCanvas()
+    for (const msg of ['ATTITUDE', 'RAW_IMU', 'SCALED_IMU2', 'SCALED_IMU3']) {
+      mavlink.setMessageRefreshRate({ messageName: msg, refreshRate: 10 })
+    }
+  },
+  methods: {
+    resetCanvas(ctx: CanvasRenderingContext2D) {
+      ctx.setTransform(1, 0, 0, 1, 0, 0)
+      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+      ctx.globalCompositeOperation = 'source-over'
+    },
+    renderCanvas() {
+      const canvasRef = this.$refs.canvasRef as HTMLCanvasElement
+      if (canvasRef === undefined) {
+        return
+      }
+      const ctx = canvasRef.getContext('2d')
+      if (ctx === null) {
+        return
+      }
+      this.resetCanvas(ctx)
+
+      const halfCanvasSize = 0.5 * this.canvasSize
+
+      // Set canvas general properties
+      const fontSize = 0.13 * this.canvasSize
+      const baseLineWidth = 0.03 * halfCanvasSize
+      ctx.textAlign = 'center'
+      ctx.strokeStyle = this.primaryBaseColor
+      ctx.font = `bold ${fontSize}px Arial`
+      ctx.fillStyle = this.primaryBaseColor
+      ctx.lineWidth = baseLineWidth
+      ctx.textBaseline = 'middle'
+
+      const outerCircleRadius = 0.7 * halfCanvasSize
+      const innerIndicatorRadius = 0.4 * halfCanvasSize
+      const outerIndicatorRadius = 0.55 * halfCanvasSize
+
+      // Start drawing from the center
+      ctx.translate(halfCanvasSize, halfCanvasSize)
+
+      ctx.save()
+      ctx.font = 'bold 16px Arial'
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+
+      const verticalOffset = 0.5 * this.renderVariables.yawAngleDegrees.length * 10
+      // Iterate over the devices and draw the legend
+      for (const [index, device] of this.compasses.slice(0, 3).entries()) {
+        const color = this.compassColors[device.deviceIdNumber - 1]
+        ctx.fillStyle = color
+
+        const text = device.deviceName ?? 'Unknown'
+        ctx.fillText(text, 0, +verticalOffset + index * 20 - this.renderVariables.yawAngleDegrees.length * 10)
+      }
+      // add a new line that says "EKF yaw using the primary color
+      ctx.fillStyle = this.primaryBaseColor
+      ctx.fillText(
+        'EKF',
+        0,
+        verticalOffset + this.compasses.slice(0, 3).length * 20 - this.renderVariables.yawAngleDegrees.length * 10,
+      )
+      ctx.restore()
+
+      ctx.rotate(radians(-90))
+
+      for (const [angleDegrees, angleName] of Object.entries(mainAngles)) {
+        ctx.save()
+
+        ctx.rotate(radians(Number(angleDegrees)))
+        ctx.beginPath()
+        ctx.moveTo(outerIndicatorRadius, 0)
+        ctx.lineTo(outerCircleRadius, 0)
+
+        // Draw angle text
+        ctx.textBaseline = 'bottom'
+        ctx.font = `bold ${0.7 * fontSize}px Arial`
+        ctx.translate(outerCircleRadius * 1.025, 0)
+        ctx.rotate(radians(90))
+        ctx.fillText(angleName, 0, 0)
+
+        ctx.stroke()
+        ctx.restore()
+      }
+
+      // Draw line for each smaller angle, with 9 degree steps
+      for (const angleDegrees of sequentialArray(360)) {
+        if (angleDegrees % 9 !== 0) continue
+        ctx.save()
+        ctx.lineWidth = 0.25 * baseLineWidth
+        ctx.rotate(radians(Number(angleDegrees)))
+        ctx.beginPath()
+        ctx.moveTo(1.1 * outerIndicatorRadius, 0)
+        ctx.lineTo(outerCircleRadius, 0)
+        ctx.stroke()
+        ctx.restore()
+      }
+
+      // Draw outer circle
+      ctx.beginPath()
+      ctx.arc(0, 0, outerCircleRadius, 0, radians(360))
+      ctx.stroke()
+
+      // Draw central indicator
+      for (const [index, angleDegrees] of this.headings.entries()) {
+        if (angleDegrees === null) continue
+        ctx.save()
+        this.renderVariables.yawAngleDegrees[index] = angleDegrees
+        ctx.rotate(radians(angleDegrees))
+        ctx.beginPath()
+        ctx.lineWidth = 1
+        ctx.strokeStyle = this.compassColors[index]
+        ctx.fillStyle = this.compassColors[index]
+        const triangleBaseSize = 0.05 * halfCanvasSize
+        ctx.moveTo(innerIndicatorRadius, triangleBaseSize)
+        ctx.lineTo(outerIndicatorRadius - 0.5 * triangleBaseSize, 0)
+        ctx.lineTo(innerIndicatorRadius, -triangleBaseSize)
+        ctx.lineTo(innerIndicatorRadius, triangleBaseSize)
+        ctx.closePath()
+        ctx.fill()
+        ctx.stroke()
+        ctx.restore()
+      }
+    },
+    initializeCanvas() {
+      setInterval(() => {
+        for (const [index, _value] of this.renderVariables.yawAngleDegrees.entries()) {
+          const angle = this.headings[index]
+          const angleDegrees = this.headings[index]
+          if (!angle || !angleDegrees) {
+            continue
+          }
+          const fullRangeAngleDegrees = angleDegrees < 0 ? angleDegrees + 360 : angleDegrees
+
+          const fromWestToEast = angle > 270 && fullRangeAngleDegrees < 90
+          const fromEastToWest = angle < 90 && fullRangeAngleDegrees > 270
+          // If cruising 0 degrees, use a chained animation, so the pointer does not turn 360
+          // degrees to the other side (visual artifact)
+          if (fromWestToEast) {
+            gsap.to(this.renderVariables.yawAngleDegrees, 0.05, { [index]: 0 })
+            gsap.fromTo(this.renderVariables.yawAngleDegrees, 0.05, { [index]: 0 }, { [index]: fullRangeAngleDegrees })
+          } else if (fromEastToWest) {
+            gsap.to(this.renderVariables.yawAngleDegrees, 0.05, { [index]: 360 })
+            gsap.fromTo(this.renderVariables.yawAngleDegrees, 0.05, { [index]: 360 }, {
+              [index]: fullRangeAngleDegrees,
+            })
+          } else {
+            gsap.to(this.renderVariables.yawAngleDegrees, 0.1, { [index]: fullRangeAngleDegrees })
+          }
+        }
+        this.renderCanvas()
+      }, 1000 / 10)
+    },
+  },
+})
+</script>
+
+<style scoped>
+.compass {
+  display: block;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 30px;
+  position: relative;
+}
+
+.compass canvas {
+  border-radius: 15%;
+  border: 1px solid var(--v-primary-base);
+}
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/CompassLearn.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassLearn.vue
new file mode 100644
index 0000000000..f5dfc6506f
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassLearn.vue
@@ -0,0 +1,251 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="500"
+  >
+    <template #activator="{ on, attrs }">
+      <v-btn
+        color="primary"
+        :disabled="!learn_param || !is_supported.result"
+        v-bind="attrs"
+        v-on="on"
+      >
+        Start Compass Learn
+      </v-btn>
+      <span v-if="!is_supported.result" class="ml-2" style="color: red;">
+        {{ is_supported.reason }}
+      </span>
+    </template>
+
+    <v-card>
+      <v-card-title class="text-h5 grey lighten-2">
+        Large Vehicle Compass Calibration
+      </v-card-title>
+
+      <v-card-text class="mt-3">
+        A Valid position is required for Compass Learn to estimate the local world magnetic field.
+        <br>
+        <br>
+        <v-tooltip bottom>
+          <template #activator="{ on }">
+            <v-icon dense :color="mavlink_lat ? 'green' : 'orange'" v-on="on">
+              {{ mavlink_lat ? "mdi-check-circle" : "mdi-alert-circle" }}
+            </v-icon>
+          </template>
+          <span>{{ mavlink_lat ? "Valid GPS position" : "No valid GPS position" }}</span>
+        </v-tooltip>
+        <b>GPS coordinates:</b> {{ mavlink_lat?.toFixed(5) ?? "N/A" }} {{ mavlink_lon?.toFixed(5) ?? "N/A" }}
+        <br>
+        <v-icon dense :color="geoip_lat ? 'green' : 'red'">
+          {{ geoip_lat ? "mdi-check-circle" : "mdi-alert-circle" }}
+        </v-icon>
+        <v-tooltip bottom>
+          <template #activator="{ on }">
+            <v-icon dense class="ml-1" v-on="on">
+              mdi-information
+            </v-icon>
+          </template>
+          <span>GeoIP coordinates are estimated based on your IP address.</span>
+        </v-tooltip>
+        <b>GeoIP coordinates:</b> {{ geoip_lat ?? "N/A" }} {{ geoip_lon ?? "N/A" }}
+        <br>
+        <b>GeoIP coordinates:</b> {{ geoip_lat ?? "N/A" }} {{ geoip_lon ?? "N/A" }}
+        <br>
+        <v-card v-if="!mavlink_lat" class="pa-4">
+          <v-card-text>
+            No valid GPS position!
+          </v-card-text>
+          <v-card-actions>
+            <v-btn small color="primary" @click="setOrigin(mavlink_lat ?? 0, mavlink_lon ?? 0)">
+              Use GeoIP coordinates
+            </v-btn>
+            <v-btn v-if="!mavlink_lat && !manual_coordinates" small color="primary" @click="manual_coordinates = true">
+              Enter custom coordinate
+            </v-btn>
+            <div v-if="manual_coordinates">
+              <v-text-field
+                v-model="manual_lat"
+                label="Latitude"
+                type="number"
+                required
+              />
+              <v-text-field
+                v-model="manual_lon"
+                label="Longitude"
+                type="number"
+                required
+              />
+              <v-btn small color="primary" @click="setOrigin(manual_lat ?? 0, manual_lon ?? 0)">
+                Use these coordinates
+              </v-btn>
+            </div>
+          </v-card-actions>
+        </v-card>
+        <br>
+        <br>
+        Make sure you have a valid position, then click start and drive the vehicle around in
+        manual mode until you see the message "CompassLearn: finished"
+      </v-card-text>
+      <v-divider />
+      <v-alert
+        v-if="status_text"
+        :type="status_type"
+      >
+        {{ status_text }}
+      </v-alert>
+      <v-card-text>
+        <status-text-watcher :filter="/CompassLearn:.*/" @message="onStatusMessage" />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn v-if="!is_learning" color="primary" :disabled="calibrating || !mavlink_lat" @click="start()">
+          Start
+        </v-btn>
+        <v-btn v-else-if="is_learning" color="error" @click="stop()">
+          Abort
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+
+import StatusTextWatcher from '@/components/common/StatusTextWatcher.vue'
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import autopilot_data from '@/store/autopilot'
+import autopilot from '@/store/autopilot_manager'
+import Parameter from '@/types/autopilot/parameter'
+
+export default {
+  name: 'CompassLearn',
+  components: {
+    StatusTextWatcher,
+  },
+  data() {
+    return {
+      dialog: false,
+      mavlink_lat: undefined as number | undefined,
+      mavlink_lon: undefined as number | undefined,
+      geoip_lat: undefined as number | undefined,
+      geoip_lon: undefined as number | undefined,
+      manual_coordinates: false,
+      manual_lat: undefined as number | undefined,
+      manual_lon: undefined as number | undefined,
+      calibrating: false,
+      status_type: '' as string | undefined,
+      status_text: '' as string | undefined,
+    }
+  },
+  computed: {
+    learn_param(): Parameter | undefined {
+      return autopilot_data.parameter('COMPASS_LEARN')
+    },
+    is_learning(): boolean {
+      return this.learn_param?.value === 3
+    },
+    is_supported(): { result: boolean | string, reason?: string } {
+      // Sub is the only vehicle supporting it with no GPS attached
+      // and only between versions 4.1.2 to 4.5.0, for now.
+      if (!autopilot.vehicle_type || !autopilot.firmware_info) {
+        return { result: false, reason: 'Firmware not detected' }
+      }
+      if (autopilot.vehicle_type === 'Submarine'
+        && !this.mavlink_lat && !this.mavlink_lon
+        && (autopilot.firmware_info.version.compare('4.1.2') >= 0
+        || autopilot.firmware_info.version.compare('4.5.0') < 0)) {
+        return {
+          result: false,
+          reason: `Unsupported firmware (${autopilot.firmware_info.version.raw}).`
+           + 'Sub versions under 4.1.2 and over 4.5.0 require a GPS/DVL for Compass learning',
+        }
+      }
+      return { result: true }
+    },
+  },
+  mounted() {
+    mavlink2rest.startListening('GLOBAL_POSITION_INT').setCallback((receivedMessage) => {
+      this.mavlink_lat = receivedMessage.message.lat !== 0 ? receivedMessage.message.lat * 1e-7 : undefined
+      this.mavlink_lon = receivedMessage.message.lon !== 0 ? receivedMessage.message.lon * 1e-7 : undefined
+    }).setFrequency(0)
+    mavlink2rest.requestMessageRate('GLOBAL_POSITION_INT', 1, autopilot_data.system_id)
+    this.getGeoIp()
+  },
+  methods: {
+    onStatusMessage(message: string) {
+      if (message.includes('CompassLearn: finished')) {
+        this.calibrationFinished()
+      } else if (message.includes('CompassLearn: failed')) {
+        this.calibrationFailed()
+      }
+    },
+    calibrationFinished() {
+      this.status_type = 'success'
+      this.status_text = 'Calibration finished'
+      this.calibrating = false
+    },
+    calibrationFailed() {
+      this.status_text = 'Calibration failed'
+      this.status_type = 'error'
+      this.calibrating = false
+    },
+    setOrigin(lat: number, lon:number) {
+      mavlink2rest.sendMessage(
+        {
+          header: {
+            system_id: 255,
+            component_id: 0,
+            sequence: 0,
+          },
+          message: {
+            type: 'SET_GPS_GLOBAL_ORIGIN',
+            latitude: lat * 1e7,
+            longitude: lon * 1e7,
+            altitude: 0,
+            target_system: autopilot_data.system_id,
+            time_usec: 0,
+          },
+        },
+      )
+    },
+    start() {
+      if (this.learn_param === undefined) {
+        console.error('learn_param is undefined')
+        return
+      }
+      const COMPASS_LEARN_START = 3
+      mavlink2rest.setParam(
+        this.learn_param.name,
+        COMPASS_LEARN_START,
+        autopilot_data.system_id,
+        this.learn_param.paramType.type,
+      )
+    },
+    stop() {
+      if (this.learn_param === undefined) {
+        return
+      }
+      const COMPASS_LEARN_STOP = 0
+      mavlink2rest.setParam(
+        this.learn_param.name,
+        COMPASS_LEARN_STOP,
+        autopilot_data.system_id,
+        this.learn_param.paramType.type,
+      )
+    },
+    getGeoIp() {
+      fetch('http://ip-api.com/json/')
+        .then((response) => response.json())
+        .then((data) => {
+          this.geoip_lat = data.lat
+          this.geoip_lon = data.lon
+        })
+        .catch((err) => console.error(err))
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/CompassMaskPicker.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassMaskPicker.vue
new file mode 100644
index 0000000000..7ffa90dc8a
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassMaskPicker.vue
@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <v-card class="ml-10 mr-10 mt-4">
+      <v-card-title>
+        <h4>Select compasses to calibrate </h4>
+      </v-card-title>
+      <v-card-text>
+        <v-row>
+          <v-col cols="12">
+            <div v-for="(device, index) in devices.slice(0, 3)" :key="device.id">
+              <v-checkbox
+                v-model="selected_devices[index]"
+                dense
+                :label="device.deviceName"
+                :value="device.id"
+                :background-color="getCompassColor(device.deviceIdNumber - 1)"
+              />
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CompassMaskPicker',
+  model: {
+    prop: 'bitmask',
+    event: 'input',
+  },
+  props: {
+    devices: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      selected_devices: [],
+      new_bitmask: 0,
+      compass_colors: ['#00ff0055', '#0000ff55', '#80008055'],
+    }
+  },
+  watch: {
+    selected_devices() {
+      this.new_bitmask = this.selected_devices.reduce((acc, val, index) => {
+        if (val) {
+          acc |= 1 << index
+        }
+        return acc
+      }, 0)
+      this.$emit('input', this.new_bitmask)
+    },
+  },
+  mounted() {
+    this.selected_devices = this.devices.map((_device) => true)
+  },
+  methods: {
+    getCompassColor(index) {
+      return this.compass_colors[index % this.compass_colors.length]
+    },
+  },
+}
+</script>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/CompassParams.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassParams.vue
new file mode 100644
index 0000000000..212f480323
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/CompassParams.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <v-simple-table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(parameter, index2) in compass_params " :key="index2" @click="openParameterEditor(parameter)">
+          <td>{{ parameter.name }}</td>
+          <td>{{ parameter.value }}</td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+    <parameter-editor-dialog
+      v-model="edit_param_dialog"
+      :param="edited_param"
+    />
+    <reboot-required-overlay />
+  </div>
+</template>
+
+<script lang="ts">
+import RebootRequiredOverlay from '@/components/common/rebootRequiredOverlay.vue'
+import autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+export default {
+  name: 'CompassParams',
+  components: {
+    RebootRequiredOverlay,
+  },
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      edit_param_dialog: false,
+      edited_param: undefined as Parameter | undefined,
+    }
+  },
+  computed: {
+    str_index() {
+      return this.index === 1 ? '' : this.index
+    },
+    compass_params(): Parameter[] {
+      // Espcial case for EXTERN, which changes from EXTERNAL to EXTERN1, EXTERN2, etc.
+      let extern = []
+      if (this.str_index === '') {
+        extern = autopilot_data.parameterRegex('^COMPASS_EXTERNAL')
+      } else {
+        extern = autopilot_data.parameterRegex(`^COMPASS_EXTERN${this.str_index}`)
+      }
+
+      const params = [
+        ...autopilot_data.parameterRegex(`^COMPASS_DIA${this.str_index}_.*`),
+        ...autopilot_data.parameterRegex(`^COMPASS_OFS${this.str_index}_.*`),
+        ...autopilot_data.parameterRegex(`^COMPASS_ODI${this.str_index}_.*`),
+        ...autopilot_data.parameterRegex(`^COMPASS_ORIENT${this.str_index}_.*`),
+        ...autopilot_data.parameterRegex(`^COMPASS_USE${this.str_index}_.*`),
+        ...autopilot_data.parameterRegex(`^COMPASS_MOT${this.str_index}_.*`),
+        ...autopilot_data.parameterRegex(`^COMPASS_SCALE${this.str_index}$`),
+        ...extern,
+      ]
+      return params
+    },
+  },
+  methods: {
+    openParameterEditor(parameter: Parameter | undefined) {
+      if (parameter) {
+        this.edited_param = parameter
+        this.edit_param_dialog = true
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+th, td {
+  cursor: pointer;
+}
+
+</style>
diff --git a/core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue b/core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue
new file mode 100644
index 0000000000..84483df400
--- /dev/null
+++ b/core/frontend/src/components/vehiclesetup/configuration/compass/LargeVehicleCompassCalibrator.vue
@@ -0,0 +1,166 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="500"
+  >
+    <template #activator="{ on, attrs }">
+      <v-btn
+        color="primary"
+        v-bind="attrs"
+        v-on="on"
+      >
+        Run Large Vehicle Calibration
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title class="text-h5 grey lighten-2">
+        Large Vehicle Compass Calibration
+      </v-card-title>
+
+      <v-card-text class="ma-3">
+        A Broad position is required for large vehicle compass calibration.
+        <br>
+        <br>
+        <v-icon dense :color="mavlink_lat ? 'green' : 'orange'">
+          {{ mavlink_lat ? "mdi-check-circle" : "mdi-alert-circle" }}
+        </v-icon>
+        <b>GPS coordinates:</b> {{ mavlink_lat?.toFixed(5) ?? "N/A" }} {{ mavlink_lon?.toFixed(5) ?? "N/A" }}
+        <br>
+        <v-icon dense :color="geoip_lat ? 'green' : 'red'">
+          {{ geoip_lat ? "mdi-check-circle" : "mdi-alert-circle" }}
+        </v-icon>
+        <b>GeoIP coordinates:</b> {{ geoip_lat ?? "N/A" }} {{ geoip_lon ?? "N/A" }}
+        <br>
+        <br>
+        <b>Using:</b> {{ mavlink_lat?.toFixed(2) ?? geoip_lat ?? 0 }} {{ mavlink_lon?.toFixed(2) ?? geoip_lon ?? 0 }}
+        <br>
+        <br>
+        Point your vehicle to <b>True North</b> and click <b>calibrate</b>.
+        <compass-mask-picker v-model="compass_mask" :devices="compasses" />
+      </v-card-text>
+      <v-divider />
+      <v-alert
+        v-if="status_text"
+        :type="status_type"
+      >
+        {{ status_text }}
+      </v-alert>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn color="primary" :disabled="calibrating || !compass_mask" @click="calibrate()">
+          Calibrate
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue'
+
+import mavlink2rest from '@/libs/MAVLink2Rest'
+import { MavCmd } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
+import autopilot_data from '@/store/autopilot'
+import { deviceId } from '@/utils/deviceid_decoder'
+
+export default {
+  name: 'LargeVehicleCompassCalibrator',
+  props: {
+    compasses: {
+      type: Array as PropType<deviceId[]>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+      mavlink_lat: undefined as number | undefined,
+      mavlink_lon: undefined as number | undefined,
+      geoip_lat: undefined as number | undefined,
+      geoip_lon: undefined as number | undefined,
+      compass_mask: 0,
+      calibrating: false,
+      status_type: '' as string | undefined,
+      status_text: '' as string | undefined,
+    }
+  },
+
+  mounted() {
+    mavlink2rest.startListening('GLOBAL_POSITION_INT').setCallback((receivedMessage) => {
+      this.mavlink_lat = receivedMessage.message.lat !== 0 ? receivedMessage.message.lat * 1e-7 : undefined
+      this.mavlink_lon = receivedMessage.message.lon !== 0 ? receivedMessage.message.lon * 1e-7 : undefined
+    }).setFrequency(0)
+    mavlink2rest.requestMessageRate('GLOBAL_POSITION_INT', 1, autopilot_data.system_id)
+    this.getGeoIp()
+  },
+  methods: {
+    calibrationFinished() {
+      this.status_type = 'success'
+      this.status_text = 'Calibration finished'
+      this.calibrating = false
+    },
+    calirationFailed() {
+      this.status_text = 'Calibration failed'
+      this.status_type = 'error'
+      this.calibrating = false
+    },
+    calibrate() {
+      this.status_text = undefined
+      this.calibrating = true
+      this.largeVehicleCalibration(
+        this.compass_mask,
+        this.mavlink_lat ?? this.geoip_lat ?? 0,
+        this.mavlink_lon ?? this.geoip_lon ?? 0,
+      )
+      // wait for a MAV_CMD_ACK message with result 0 (MAV_RESULT_ACCEPTED)
+      const listener = mavlink2rest.startListening('COMMAND_ACK').setCallback((receivedMessage) => {
+        if (receivedMessage.message.result.type === 'MAV_RESULT_ACCEPTED') {
+          this.calibrationFinished()
+        } else {
+          this.calirationFailed()
+        }
+        listener.discard()
+      })
+    },
+    getGeoIp() {
+      fetch('http://ip-api.com/json/')
+        .then((response) => response.json())
+        .then((data) => {
+          this.geoip_lat = data.lat
+          this.geoip_lon = data.lon
+        })
+        .catch((err) => console.error(err))
+    },
+    largeVehicleCalibration(compass_mask: number, lat: number, lon: number) {
+      mavlink2rest.sendMessage({
+        header: {
+          system_id: 255,
+          component_id: 1,
+          sequence: 1,
+        },
+        message: {
+          type: 'COMMAND_LONG',
+          param1: 0, // North
+          param2: compass_mask,
+          param3: parseInt(`${lat}`, 10),
+          param4: parseInt(`${lon}`, 10),
+          param5: 0,
+          param6: 0,
+          param7: 0,
+          command: {
+            type: MavCmd.MAV_CMD_FIXED_MAG_CAL_YAW,
+          },
+          target_system: autopilot_data.system_id,
+          target_component: 1,
+          confirmation: 0,
+        },
+      })
+    },
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/core/frontend/src/utils/math.ts b/core/frontend/src/utils/math.ts
new file mode 100644
index 0000000000..fe983ba6f6
--- /dev/null
+++ b/core/frontend/src/utils/math.ts
@@ -0,0 +1,186 @@
+export function degrees (radians: number): number {
+  return radians * 180 / Math.PI
+}
+
+export class Vector3 {
+  x: number;
+  y: number;
+  z: number;
+
+  constructor (x: number, y: number, z: number) {
+    this.x = x;
+    this.y = y;
+    this.z = z;
+  }
+
+  subtract (v: Vector3): Vector3 {
+    this.x = this.x - v.x;
+    this.y = this.y - v.y;
+    this.z = this.z - v.z;
+    return this;
+  }
+
+  add (v: Vector3): Vector3 {
+    this.x = this.x + v.x;
+    this.y = this.y + v.y;
+    this.z = this.z + v.z;
+    return this;
+  }
+
+  multiply (s: number): Vector3 {
+    this.x = this.x * s;
+    this.y = this.y * s;
+    this.z = this.z * s;
+    return this;
+  }
+
+  length (): number {
+    return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
+  }
+
+  equals (v: Vector3): boolean {
+    return this.x === v.x && this.y === v.y && this.z === v.z;
+  }
+}
+
+export class Matrix3 {
+    private _elements: number[];
+
+    constructor (
+      i11: number | Vector3 = 0, 
+      i12: number | Vector3 = 0, 
+      i13: number | Vector3 = 0, 
+      i21: number = 0, 
+      i22: number = 0, 
+      i23: number = 0, 
+      i31: number = 0, 
+      i32: number = 0, 
+      i33: number = 0
+    ) {
+      // check if we're receiving 3 vector3, if so, use its elements:
+      if (i11 instanceof Vector3 &&
+          i12 instanceof Vector3 &&
+          i13 instanceof Vector3) {
+          this._elements = [
+              i11.x, i11.y, i11.z,
+              i12.x, i12.y, i12.z,
+              i13.x, i13.y, i13.z
+          ]
+          return
+      }
+      this._elements = [i11 as number, i12 as number, i13 as number, i21, i22, i23, i31, i32, i33]
+    }
+
+    get a (): Vector3 {
+      return new Vector3(
+          this._elements[0],
+          this._elements[1],
+          this._elements[2]
+      )
+    }
+
+    get b (): Vector3 {
+      return new Vector3(
+          this._elements[3],
+          this._elements[4],
+          this._elements[5]
+      )
+    }
+
+
+    get c () {
+        return new Vector3(
+            this._elements[6],
+            this._elements[7],
+            this._elements[8]
+        )
+    }
+
+    fromEuler (roll: number, pitch: number, yaw: number) {
+        this._elements = []
+        const cp = Math.cos(pitch)
+        const sp = Math.sin(pitch)
+        const sr = Math.sin(roll)
+        const cr = Math.cos(roll)
+        const sy = Math.sin(yaw)
+        const cy = Math.cos(yaw)
+        this._elements.push(cp * cy)
+        this._elements.push((sr * sp * cy) - (cr * sy))
+        this._elements.push((cr * sp * cy) + (sr * sy))
+        this._elements.push(cp * sy)
+        this._elements.push((sr * sp * sy) + (cr * cy))
+        this._elements.push((cr * sp * sy) - (sr * cy))
+        this._elements.push(-sp)
+        this._elements.push(sr * cp)
+        this._elements.push(cr * cp)
+        return this
+    }
+
+    e (i) {
+        // validate?
+        return this._elements[i]
+    }
+
+    times (vector: Vector3): Vector3 {
+        return new Vector3(
+            this._elements[0] * vector.x + this._elements[1] * vector.y + this._elements[2] * vector.z,
+            this._elements[3] * vector.x + this._elements[4] * vector.y + this._elements[5] * vector.z,
+            this._elements[6] * vector.x + this._elements[7] * vector.y + this._elements[8] * vector.z
+        )
+    }
+
+    multiply (matrix: Matrix3): Matrix3 {
+        const m = this._elements
+        const n = matrix._elements
+        return new Matrix3(
+            m[0] * n[0] + m[1] * n[3] + m[2] * n[6],
+            m[0] * n[1] + m[1] * n[4] + m[2] * n[7],
+            m[0] * n[2] + m[1] * n[5] + m[2] * n[8],
+            m[3] * n[0] + m[4] * n[3] + m[5] * n[6],
+            m[3] * n[1] + m[4] * n[4] + m[5] * n[7],
+            m[3] * n[2] + m[4] * n[5] + m[5] * n[8],
+            m[6] * n[0] + m[7] * n[3] + m[8] * n[6],
+            m[6] * n[1] + m[7] * n[4] + m[8] * n[7],
+            m[6] * n[2] + m[7] * n[5] + m[8] * n[8]
+        )
+    }
+
+    transposed (): Matrix3 {
+        return new Matrix3(
+            this._elements[0], this._elements[3], this._elements[6],
+            this._elements[1], this._elements[4], this._elements[7],
+            this._elements[2], this._elements[5], this._elements[8]
+        )
+    }
+
+    determinant (): number {
+        const m = this._elements
+        return m[0] * m[4] * m[8] -
+            m[0] * m[5] * m[7] -
+            m[1] * m[3] * m[8] +
+            m[1] * m[5] * m[6] +
+            m[2] * m[3] * m[7] -
+            m[2] * m[4] * m[6]
+    }
+
+    invert (): Matrix3 | null {
+        const d = this.determinant()
+        if (d === 0) {
+            return null
+        }
+        const invD = 1 / d
+        const m = this._elements
+        return new Matrix3(
+            invD * (m[8] * m[4] - m[7] * m[5]),
+            invD * -(m[8] * m[1] - m[7] * m[2]),
+            invD * (m[5] * m[1] - m[4] * m[2]),
+            invD * -(m[8] * m[3] - m[6] * m[5]),
+            invD * (m[8] * m[0] - m[6] * m[2]),
+            invD * -(m[5] * m[0] - m[3] * m[2]),
+            invD * (m[7] * m[3] - m[6] * m[4]),
+            invD * -(m[7] * m[0] - m[6] * m[1]),
+            invD * (m[4] * m[0] - m[3] * m[1])
+        )
+    }
+}
+
diff --git a/core/frontend/src/utils/mavlink_math.ts b/core/frontend/src/utils/mavlink_math.ts
new file mode 100644
index 0000000000..cd6309d305
--- /dev/null
+++ b/core/frontend/src/utils/mavlink_math.ts
@@ -0,0 +1,24 @@
+// ported from https://github.com/ArduPilot/pymavlink/blob/master/mavextra.py#L60
+
+import { Matrix3, Vector3, degrees } from "./math"
+
+export function mag_heading(RawImu: Vector3, attitude: Vector3, declination: number) {
+  // calculate heading from raw magnetometer
+  if (declination === undefined) {
+      throw new Error('declination is undefined')
+  }
+  let magX = RawImu.x
+  let magY = RawImu.y
+  let magZ = RawImu.z
+
+  // go via a DCM matrix to match the APM calculation
+  const dcmMatrix = (new Matrix3()).fromEuler(attitude.x, attitude.y, attitude.z)
+  const cosPitchSqr = 1.0 - (dcmMatrix.e(6) * dcmMatrix.e(6))
+  const headY = magY * dcmMatrix.e(8) - magZ * dcmMatrix.e(7)
+  const headX = magX * cosPitchSqr - dcmMatrix.e(6) * (magY * dcmMatrix.e(7) + magZ * dcmMatrix.e(8))
+  let heading = degrees(Math.atan2(-headY, headX)) + declination
+  if (heading < -180) {
+      heading += 360
+  }
+  return heading
+}