💫 Initial plans for device configuration service

app/src/routes/+layout.svelte

@@ -40,10 +40,6 @@
 		socket.on('close', handleClose);
 		socket.on('error', handleError);
 		socket.on('rssi', handleNetworkStatus);
-		socket.on('infoToast', handleInfoToast);
-		socket.on('successToast', handleSuccessToast);
-		socket.on('warningToast', handleWarningToast);
-		socket.on('errorToast', handleErrorToast);
 		socket.on('mode', (data:ModesEnum) => mode.set(data));
 		socket.on('angles', (angles:number[]) => { if (angles.length) servoAngles.set(angles)});
 		if ($page.data.features.analytics) socket.on('analytics', handleAnalytics);
@@ -56,10 +52,6 @@
 		socket.off('open', handleOpen);
 		socket.off('close', handleClose);
 		socket.off('rssi', handleNetworkStatus);
-		socket.off('infoToast', handleInfoToast);
-		socket.off('successToast', handleSuccessToast);
-		socket.off('warningToast', handleWarningToast);
-		socket.off('errorToast', handleErrorToast);
 		socket.off('battery', handleBattery);
 		socket.off('otastatus', handleOAT);
 	};
@@ -83,12 +75,7 @@
 
 	const handleError = (data: any) => console.error(data);
 
-	const handleInfoToast = (data: string) => notifications.info(data, 5000);
-	const handleWarningToast = (data: string) => notifications.warning(data, 5000);
-	const handleErrorToast = (data: string) => notifications.error(data, 5000);
-	const handleSuccessToast = (data: string) => notifications.success(data, 5000);
-
-	const handleAnalytics = (data: Analytics) => analytics.addData(data);
+	const handleAnalytics = (data: Analytics) => analytics.addData(data); 
 
 	const handleNetworkStatus = (data: number) => telemetry.setRSSI(data);
 

app/src/routes/menu.svelte

@@ -6,6 +6,7 @@
     import MdiController from '~icons/mdi/controller';
     import Devices from '~icons/mdi/devices'
     import Camera from '~icons/mdi/camera-outline';
+    import Rotate3d from '~icons/mdi/rotate-3d';
 	import Health from '~icons/mdi/stethoscope';
 	import Folder from '~icons/mdi/folder-outline';
 	import Update from '~icons/mdi/reload';
@@ -63,6 +64,12 @@
 					icon: Camera,
 					href: '/peripherals/camera',
 					feature: $page.data.features.camera,
+				},
+                {
+					title: 'IMU',
+					icon: Rotate3d,
+					href: '/peripherals/imu',
+					feature: $page.data.features.imu,
 				}
 			]
 		},

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import IMU from './imu.svelte';
+</script>
+
+<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
+	<IMU />
+</div>

app/src/routes/peripherals/imu/+page.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+	return {
+		title: 'IMU'
+	};
+}) satisfies PageLoad;

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

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import SettingsCard from "$lib/components/SettingsCard.svelte";
+    import Rotate3d from '~icons/mdi/rotate-3d';
+	import IMUSetting from './imuSetting.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 { daisyColor } from "$lib/DaisyUiHelper";
+	import { socket } from "$lib/stores";
+	import type { IMU } from "$lib/types/models";
+
+    Chart.register(...registerables);
+
+    let heapChartElement: HTMLCanvasElement;
+	let heapChart: Chart;
+
+    
+    const handleImu = (data: IMU) => imu.addData(data);   
+
+    onMount(() => {
+        socket.on('imu', handleImu);
+        heapChart = new Chart(heapChartElement, {
+			type: 'line',
+			data: {
+				// labels: $imu.x,
+				datasets: [
+					{
+						label: 'x',
+						borderColor: daisyColor('--p'),
+						backgroundColor: daisyColor('--p', 50),
+						borderWidth: 2,
+						data: $imu.x,
+						yAxisID: 'x'
+					},
+					{
+						label: 'y',
+						borderColor: daisyColor('--s'),
+						backgroundColor: daisyColor('--s', 50),
+						borderWidth: 2,
+						data: $imu.y,
+						yAxisID: 'y'
+					},
+                    {
+						label: 'z',
+						borderColor: daisyColor('--a'),
+						backgroundColor: daisyColor('--a', 50),
+						borderWidth: 2,
+						data: $imu.z,
+						yAxisID: 'z'
+					}
+				]
+			},
+			options: {
+				maintainAspectRatio: false,
+				responsive: true,
+				plugins: {
+					legend: {
+						display: true
+					},
+					tooltip: {
+						mode: 'index',
+						intersect: false
+					}
+				},
+				elements: {
+					point: {
+						radius: 1
+					}
+				},
+				scales: {
+					x: {
+						grid: {
+							color: daisyColor('--bc', 10)
+						},
+						ticks: {
+							color: daisyColor('--bc')
+						},
+						display: false
+					},
+					y: {
+						type: 'linear',
+						title: {
+							display: true,
+							text: 'Angle [°]',
+							color: daisyColor('--bc'),
+							font: {
+								size: 16,
+								weight: 'bold'
+							}
+						},
+						position: 'left',
+						min:  0,
+						max: 10,
+						grid: { color: daisyColor('--bc', 10) },
+						ticks: { color: daisyColor('--bc') },
+						border: { color: daisyColor('--bc', 10) }
+					}
+				}
+			}
+		});
+        setInterval(() => {
+			updateData(), 200;
+		});
+    })
+
+    onDestroy(() => {
+        socket.off('imu', handleImu);
+    })
+
+    const updateData = () => {
+        // heapChart.data.labels = $imu.x;
+        heapChart.options.scales!.y!.min = Math.min(Math.min(...$imu.x), Math.min(...$imu.y), Math.min(...$imu.z));
+        heapChart.options.scales!.y!.max = Math.max(Math.max(...$imu.x), Math.max(...$imu.y), Math.max(...$imu.z));
+		heapChart.data.datasets[0].data = $imu.x;
+		heapChart.data.datasets[1].data = $imu.y;
+		heapChart.data.datasets[2].data = $imu.z;
+		heapChart.update('none');
+    }
+
+</script>
+
+<SettingsCard collapsible={false}>
+    <Rotate3d slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    <span slot="title">IMU</span>
+    <!-- <div class="flex flex-col">
+        {#if $imu.x.length > 0}
+            {#each Object.entries($imu) as [key, value]}
+                <div>{key}: {value[value.length-1]}</div>
+            {/each}
+        {/if}
+    </div> -->
+    <div class="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={heapChartElement} />
+		</div>
+	</div>
+    <!-- <IMUSetting /> -->
+</SettingsCard>