🏍️ Adds motionservice with data sync

app/src/lib/components/Visualization.svelte

@@ -3,7 +3,7 @@
 	import { BufferGeometry, Line, LineBasicMaterial, Vector3, type NormalBufferAttributes } from 'three';
 	import uzip from 'uzip';
 	import { model, servoAnglesOut } from '$lib/stores';
-	import { footColor, isEmbeddedApp, toeWorldPositions } from '$lib/utilities';
+	import { footColor, isEmbeddedApp, throttler, toeWorldPositions } from '$lib/utilities';
 	import { fileService } from '$lib/services';
 	import { servoAngles, mpu, jointNames } from '$lib/stores';
 	import SceneBuilder from '$lib/sceneBuilder';
@@ -22,6 +22,7 @@
 	let currentModelAngles: number[] = new Array(12).fill(0);
 	let modelTargetAngles: number[] = new Array(12).fill(0)
     let gui_panel: GUI
+    let Throttler = new throttler()
 
     let feet_trace = new Array(4).fill([]);
     let trace_lines: BufferGeometry<NormalBufferAttributes>[] = []
@@ -72,7 +73,7 @@
 
 	const updateAngles = (name: string, angle: number) => {
 		modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI);
-        servoAnglesOut.set(modelTargetAngles)
+        Throttler.throttle(() => servoAnglesOut.set(modelTargetAngles), 100)
 	};
 
 	const createScene = async () => {

app/src/lib/stores/model-store.ts

@@ -21,7 +21,7 @@ export enum ModesEnum {
 
 export const mode: Writable<ModesEnum> = writable(ModesEnum.Idle);
 
-export const outControllerData = writable(new Int8Array([0, 0, 0, 0, 0, 70, 0]));
+export const outControllerData = writable(new Array([0, 0, 0, 0, 0, 70, 0]));
 
 export const input: Writable<ControllerInput> = writable({
 	left: { x: 0, y: 0 },

app/src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 	import Menu from './menu.svelte';
 	import Statusbar from './statusbar.svelte';
 	import Login from './login.svelte';
-	import { mode, outControllerData, servoAnglesOut, socket } from '$lib/stores';
+	import { ModesEnum, mode, outControllerData, servoAngles, servoAnglesOut, socket } from '$lib/stores';
 	import type { Analytics, Battery, DownloadOTA } from '$lib/types/models';
 
 	onMount(async () => {
@@ -25,9 +25,9 @@
 
 		addEventListeners();
 
-        outControllerData.subscribe((data) => socket.sendEvent("input", data));
-        mode.subscribe((data) => socket.sendEvent("mode", data));
-        servoAnglesOut.subscribe((data) => socket.sendEvent("angles", data));
+        outControllerData.subscribe((data) => socket.sendEvent("input", {data}));
+        mode.subscribe((data) => socket.sendEvent("mode", {data}));
+        servoAnglesOut.subscribe((data) => socket.sendEvent("angles", {data}));
 	});
 
     onDestroy(() => {
@@ -43,6 +43,8 @@
 		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);
 		if ($page.data.features.battery) socket.on('battery', handleBattery);
 		if ($page.data.features.download_firmware) socket.on('otastatus', handleOAT);

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

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import Controls from './Controls.svelte';
 	import { socket } from '$lib/stores';
+	import Spinner from '$lib/components/Spinner.svelte';
 </script>
 <div>
-    {#if $socket}
-        <Controls />
-        <slot/>
-    {:else}
-        <div class="flex justify-center items-center">
+    {#if !$socket}
+    <div class="flex flex-col h-full justify-center items-center">
+        <Spinner/>
             <h2>Waiting for connection</h2>
         </div>
+    {:else}
+        <Controls />
+        <slot/>
     {/if}
 </div>

app/src/routes/controller/Controls.svelte

@@ -10,7 +10,7 @@
 	let right: nipplejs.JoystickManager;
 
 	let throttle_timing = 40;
-	let data = new Int8Array(7);
+	let data = new Array(7);
 
 	onMount(() => {
 		left = nipplejs.create({