🎮 Makes controller sub for imu updates

app/src/lib/stores/imu.ts

@@ -4,24 +4,24 @@ import type { IMU } from '$lib/types/models';
 const maxIMUData = 100;
 
 export const imu = (() => {
-	const { subscribe, update } = writable({
+    const { subscribe, update } = writable({
-		x: [] as number[],
+        x: [] as number[],
-		y: [] as number[],
+        y: [] as number[],
-		z: [] as number[],
+        z: [] as number[],
-		imu_temp: [] as number[],
+        heading: [] as number[],
-		altitude: [] as number[],
+        altitude: [] as number[],
-		pressure: [] as number[],
+        pressure: [] as number[],
-		bmp_temp: [] as number[]
+        bmp_temp: [] as number[]
-	});
+    });
 
-	const addData = (content: IMU) => {
+    const addData = (content: IMU) => {
-		update((data) => {
+        update(data => {
-			(Object.keys(content) as (keyof IMU)[]).forEach((key) => {
+            (Object.keys(content) as (keyof IMU)[]).forEach(key => {
-				data[key] = [...data[key], content[key]].slice(-maxIMUData);
+                data[key] = [...data[key], content[key]].slice(-maxIMUData);
-			});
+            });
-			return data;
+            return data;
-		});
+        });
-	};
+    };
 
-	return { subscribe, addData };
+    return { subscribe, addData };
 })();

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

@@ -1,14 +1,31 @@
 <script lang="ts">
-	import Controls from './Controls.svelte';
+    import Controls from './Controls.svelte';
-	import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte';
+    import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte';
-	import { selectedView, views } from '$lib/stores/application';
+    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">
-	<Controls />
+    <Controls />
-	<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
+    <div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
-		<WidgetContainer container={layout.content} />
+        <WidgetContainer container={layout.content} />
-	</div>
+    </div>
 </div>