🎮 Makes controller sub for imu updates

app/src/lib/stores/imu.ts

@@ -8,15 +8,15 @@ export const imu = (() => {
         x: [] as number[],
         y: [] as number[],
         z: [] as number[],
-		imu_temp: [] as number[],
+        heading: [] as number[],
         altitude: [] as number[],
         pressure: [] as number[],
         bmp_temp: [] as number[]
     });
 
     const addData = (content: IMU) => {
-		update((data) => {
-			(Object.keys(content) as (keyof IMU)[]).forEach((key) => {
+        update(data => {
+            (Object.keys(content) as (keyof IMU)[]).forEach(key => {
                 data[key] = [...data[key], content[key]].slice(-maxIMUData);
             });
             return data;

app/src/lib/types/models.ts

@@ -150,7 +150,7 @@ export type IMU = {
     x: number;
     y: number;
     z: number;
-    imu_temp: number;
+    heading: number;
     altitude: number;
     bmp_temp: number;
     pressure: number;

app/src/routes/controller/+page.svelte

@@ -2,8 +2,25 @@
     import Controls from './Controls.svelte';
     import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte';
     import { selectedView, views } from '$lib/stores/application';
+    import { onMount } from 'svelte';
+    import { mpu, socket } from '$lib/stores';
+    import { imu } from '$lib/stores/imu';
+    import type { IMU } from '$lib/types/models';
 
-    $: layout = $views.find(v => v.name === $selectedView)!
+    $: layout = $views.find(v => v.name === $selectedView)!;
+
+    onMount(() => {
+        socket.on('imu', (data: IMU) => {
+            imu.addData(data);
+            if (data.heading)
+                mpu.update(mpuData => {
+                    mpuData.heading = data.heading;
+                    console.log(data.heading);
+
+                    return mpuData;
+                });
+        });
+    });
 </script>
 
 <div class="absolute top-0 select-none w-screen h-screen">