✨ Adds heading chart

app/src/lib/components/Compass.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    interface Props {
+        heading?: number
+        size?: string
+    }
+
+    let { heading = 0, size = 'w-48 h-48' }: Props = $props()
+
+    const getCardinalDirection = (h: number) => {
+        if (h >= 337.5 || h < 22.5) return 'N'
+        if (h >= 22.5 && h < 67.5) return 'NE'
+        if (h >= 67.5 && h < 112.5) return 'E'
+        if (h >= 112.5 && h < 157.5) return 'SE'
+        if (h >= 157.5 && h < 202.5) return 'S'
+        if (h >= 202.5 && h < 247.5) return 'SW'
+        if (h >= 247.5 && h < 292.5) return 'W'
+        return 'NW'
+    }
+
+    const ticks = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
+</script>
+
+<div class="flex flex-col items-center">
+    <div class="relative {size}">
+        <svg viewBox="0 0 200 200" class="w-full h-full">
+            <circle
+                cx="100"
+                cy="100"
+                r="90"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                class="opacity-30"
+            />
+            <circle
+                cx="100"
+                cy="100"
+                r="70"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1"
+                class="opacity-20"
+            />
+            <circle
+                cx="100"
+                cy="100"
+                r="50"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1"
+                class="opacity-20"
+            />
+
+            <text x="100" y="20" text-anchor="middle" class="fill-current text-sm font-bold">N</text>
+            <text x="180" y="105" text-anchor="middle" class="fill-current text-sm font-bold">E</text>
+            <text x="100" y="190" text-anchor="middle" class="fill-current text-sm font-bold">S</text>
+            <text x="20" y="105" text-anchor="middle" class="fill-current text-sm font-bold">W</text>
+
+            {#each ticks as tick}
+                <line
+                    x1={100 + 85 * Math.sin((tick * Math.PI) / 180)}
+                    y1={100 - 85 * Math.cos((tick * Math.PI) / 180)}
+                    x2={100 + 78 * Math.sin((tick * Math.PI) / 180)}
+                    y2={100 - 78 * Math.cos((tick * Math.PI) / 180)}
+                    stroke="currentColor"
+                    stroke-width={tick % 90 === 0 ? 2 : 1}
+                    class="opacity-50"
+                />
+            {/each}
+
+            <g transform="rotate({heading}, 100, 100)">
+                <polygon points="100,25 93,100 100,90 107,100" class="fill-error" />
+                <polygon points="100,175 93,100 100,110 107,100" class="fill-base-300" />
+            </g>
+
+            <circle cx="100" cy="100" r="8" class="fill-base-content" />
+        </svg>
+    </div>
+    <div class="text-2xl font-mono font-bold mt-2">{heading.toFixed(1)}°</div>
+    <div class="text-sm opacity-70">{getCardinalDirection(heading)}</div>
+</div>

app/src/routes/peripherals/imu/imu.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import SettingsCard from '$lib/components/SettingsCard.svelte'
+    import Compass from '$lib/components/Compass.svelte'
     import { imu } from '$lib/stores/imu'
     import { Chart, registerables } from 'chart.js'
     import { cubicOut } from 'svelte/easing'
     import { slide } from 'svelte/transition'
     import { onDestroy, onMount } from 'svelte'
-    import { socket } from '$lib/stores'
+    import { socket, mpu } from '$lib/stores'
     import { useFeatureFlags } from '$lib/stores/featureFlags'
     import { Rotate3d } from '$lib/components/icons'
 
@@ -21,10 +22,12 @@
     let angleChartElement: HTMLCanvasElement = $state()!
     let tempChartElement: HTMLCanvasElement = $state()!
     let altitudeChartElement: HTMLCanvasElement = $state()!
+    let headingChartElement: HTMLCanvasElement = $state()!
 
     let angleChart: Chart
     let tempChart: Chart
     let altitudeChart: Chart
+    let headingChart: Chart
 
     const getChartColors = () => {
         const style = getComputedStyle(document.body)
@@ -180,6 +183,41 @@
                 }
             })
         }
+
+        if (headingChartElement) {
+            headingChart = new Chart(headingChartElement, {
+                type: 'line',
+                data: {
+                    datasets: [
+                        {
+                            label: 'Heading',
+                            borderColor: colors.accent,
+                            backgroundColor: colors.accent,
+                            borderWidth: 2,
+                            data: $imu.map(datapoint => datapoint.heading),
+                            yAxisID: 'y'
+                        }
+                    ]
+                },
+                options: {
+                    ...baseConfig,
+                    scales: {
+                        ...baseConfig.scales,
+                        y: {
+                            ...baseConfig.scales.y,
+                            min: 0,
+                            max: 360,
+                            title: {
+                                display: true,
+                                text: 'Heading [°]',
+                                color: colors.background,
+                                font: { size: 16, weight: 'bold' }
+                            }
+                        }
+                    }
+                }
+            })
+        }
     }
 
     const updateChartData = (chart: Chart, data: number[]) => {
@@ -217,6 +255,17 @@
                 $imu.map(datapoint => datapoint.altitude)
             )
         }
+
+        if ($features.mag && headingChart) {
+            const headingData = $imu.map(datapoint => datapoint.heading)
+            headingChart.data.labels = headingData
+            headingChart.data.datasets[0].data = headingData
+            headingChart.update('none')
+
+            if ($imu.length > 0) {
+                mpu.set({ heading: $imu[$imu.length - 1].heading })
+            }
+        }
     }
     onMount(() => {
         imu.listen()
@@ -284,7 +333,23 @@
         </div>
     {/if}
 
+    {#if $features.mag}
+        <div class="divider">Magnetometer</div>
+        <div class="flex flex-col lg:flex-row gap-4 items-center">
+            <Compass heading={$mpu.heading} />
+            <div class="flex-1 w-full overflow-x-auto">
+                <div
+                    class="flex w-full flex-col space-y-1 h-60"
+                    transition:slide|local={{ duration: 300, easing: cubicOut }}
+                >
+                    <canvas bind:this={headingChartElement}></canvas>
+                </div>
+            </div>
+        </div>
+    {/if}
+
     {#if $features.bmp}
+        <div class="divider">Barometer</div>
         <div class="w-full overflow-x-auto">
             <div
                 class="flex w-full flex-col space-y-1 h-60"