📏 Formats app code

2024-02-23 09:16:20 +01:00
parent 2e1d99b1df
commit 22b54261f0
34 changed files with 1525 additions and 1400 deletions
@@ -1,9 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
-		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+		<meta
 			name="viewport"
 			content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
 		/>
 	</head>
 	<body>
 		<div id="app"></div>
@@ -38,6 +38,7 @@
 	},
 	"dependencies": {
 		"nipplejs": "^0.10.1",
 		"prettier-plugin-svelte": "^3.2.1",
 		"svelte-routing": "^2.11.0",
 		"three": "^0.160.1",
 		"urdf-loader": "^0.12.1",
@@ -8,6 +8,9 @@ dependencies:
  nipplejs:
    specifier: ^0.10.1
    version: 0.10.1
  prettier-plugin-svelte:
    specifier: ^3.2.1
    version: 3.2.1(prettier@3.2.4)(svelte@4.2.9)
  svelte-routing:
    specifier: ^2.11.0
    version: 2.11.0
@@ -107,7 +110,6 @@ packages:
    dependencies:
      '@jridgewell/gen-mapping': 0.3.3
      '@jridgewell/trace-mapping': 0.3.18
    dev: true
  /@esbuild/aix-ppc64@0.19.12:
    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
@@ -387,32 +389,26 @@ packages:
      '@jridgewell/set-array': 1.1.2
      '@jridgewell/sourcemap-codec': 1.4.15
      '@jridgewell/trace-mapping': 0.3.18
    dev: true
  /@jridgewell/resolve-uri@3.1.0:
    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
    engines: {node: '>=6.0.0'}
    dev: true
  /@jridgewell/set-array@1.1.2:
    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
    engines: {node: '>=6.0.0'}
    dev: true
  /@jridgewell/sourcemap-codec@1.4.14:
    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
    dev: true
  /@jridgewell/sourcemap-codec@1.4.15:
    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
    dev: true
  /@jridgewell/trace-mapping@0.3.18:
    resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
    dependencies:
      '@jridgewell/resolve-uri': 3.1.0
      '@jridgewell/sourcemap-codec': 1.4.14
    dev: true
  /@nodelib/fs.scandir@2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -589,7 +585,6 @@ packages:
  /@types/estree@1.0.5:
    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
    dev: true
  /@types/json-schema@7.0.12:
    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
@@ -812,7 +807,6 @@ packages:
    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
    engines: {node: '>=0.4.0'}
    hasBin: true
    dev: true
  /ajv@6.12.6:
    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -879,7 +873,6 @@ packages:
    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
    dependencies:
      dequal: 2.0.3
    dev: true
  /array-union@2.1.0:
    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@@ -910,7 +903,6 @@ packages:
    resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
    dependencies:
      dequal: 2.0.3
    dev: true
  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -1054,7 +1046,6 @@ packages:
      acorn: 8.11.3
      estree-walker: 3.0.3
      periscopic: 3.1.0
    dev: true
  /color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -1106,7 +1097,6 @@ packages:
    dependencies:
      mdn-data: 2.0.30
      source-map-js: 1.0.2
    dev: true
  /cssesc@3.0.0:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -1145,7 +1135,6 @@ packages:
  /dequal@2.0.3:
    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
    engines: {node: '>=6'}
    dev: true
  /detect-indent@6.1.0:
    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
@@ -1327,7 +1316,6 @@ packages:
    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
    dependencies:
      '@types/estree': 1.0.5
    dev: true
  /esutils@2.0.3:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -1644,7 +1632,6 @@ packages:
    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
    dependencies:
      '@types/estree': 1.0.5
    dev: true
  /is-stream@3.0.0:
    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
@@ -1769,7 +1756,6 @@ packages:
  /locate-character@3.0.0:
    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
    dev: true
  /locate-path@6.0.0:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@@ -1811,11 +1797,9 @@ packages:
    engines: {node: '>=12'}
    dependencies:
      '@jridgewell/sourcemap-codec': 1.4.15
    dev: true
  /mdn-data@2.0.30:
    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
    dev: true
  /merge-stream@2.0.0:
    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -2051,7 +2035,6 @@ packages:
      '@types/estree': 1.0.5
      estree-walker: 3.0.3
      is-reference: 3.0.2
    dev: true
  /picocolors@1.0.0:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -2161,11 +2144,20 @@ packages:
    engines: {node: '>= 0.8.0'}
    dev: true
  /prettier-plugin-svelte@3.2.1(prettier@3.2.4)(svelte@4.2.9):
    resolution: {integrity: sha512-ENAPbIxASf2R79IZwgkG5sBdeNA9kLRlXVvKKmTXh79zWTy0KKoT86XO2pHrTitUPINd+iXWy12MRmgzKGVckA==}
    peerDependencies:
      prettier: ^3.0.0
      svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
    dependencies:
      prettier: 3.2.4
      svelte: 4.2.9
    dev: false
  /prettier@3.2.4:
    resolution: {integrity: sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==}
    engines: {node: '>=14'}
    hasBin: true
    dev: true
  /pretty-format@29.7.0:
    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
@@ -2364,7 +2356,6 @@ packages:
  /source-map-js@1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
    dev: true
  /stackback@0.0.2:
    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
@@ -2572,7 +2563,6 @@ packages:
      locate-character: 3.0.0
      magic-string: 0.30.5
      periscopic: 3.1.0
    dev: true
  /tailwindcss@3.4.1:
    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
@@ -4,25 +4,25 @@
 	import TopBar from './components/TopBar.svelte';
 	import socketService from '$lib/services/socket-service';
 	import Controller from './routes/Controller.svelte';
-    import fileService from '$lib/services/file-service';
+	import { fileService } from '$lib/services';
 	import Settings from './routes/Settings.svelte';
 	import { jointNames, model } from '$lib/store';
 	import { loadModelAsync } from '$lib/utilities';
 	import { socketLocation } from '$lib/utilities';
 	import type { Result } from '$lib/utilities/result';
-	export let url = window.location.pathname 
+	export let url = window.location.pathname;
 	onMount(async () => {
 		socketService.connect(socketLocation);
-        registerFetchIntercept()
+		registerFetchIntercept();
-        const modelRes = await loadModelAsync('/spot_micro.urdf.xacro') 
+		const modelRes = await loadModelAsync('/spot_micro.urdf.xacro');
 		if (modelRes.isOk()) {
-            const [urdf, JOINT_NAME] = modelRes.inner
+			const [urdf, JOINT_NAME] = modelRes.inner;
-            jointNames.set(JOINT_NAME)
+			jointNames.set(JOINT_NAME);
-            model.set(urdf)
+			model.set(urdf);
 		} else {
-            console.error(modelRes.inner, {"exception": modelRes.exception})
+			console.error(modelRes.inner, { exception: modelRes.exception });
 		}
 	});
@@ -32,11 +32,9 @@
 			const [resource, config] = args;
 			let file: Result<Uint8Array | undefined, string>;
 			file = await fileService.getFile(resource.toString());
-            return file.isOk() 
+			return file.isOk() ? new Response(file.inner) : originalFetch(resource, config);
-            ? new Response(file.inner)
+		};
            : originalFetch(resource, config) 
 	};
    }
 </script>
 <Router {url}>
@@ -25,12 +25,18 @@
 		});
 		left.on('move', (evt, data) => {
-            input.update(o => {o.left = data.vector; return o;})
+			input.update((o) => {
 				o.left = data.vector;
 				return o;
 			});
 			throttle.throttle(updateData, throttle_timing);
 		});
 		left.on('end', (evt, data) => {
-            input.update(o => {o.left = { x: 0, y: 0 }; return o;})
+			input.update((o) => {
 				o.left = { x: 0, y: 0 };
 				return o;
 			});
 			throttle.throttle(updateData, throttle_timing);
 		});
@@ -43,12 +49,18 @@
 		});
 		right.on('move', (evt, data) => {
-            input.update(o => {o.right = data.vector; return o;})
+			input.update((o) => {
 				o.right = data.vector;
 				return o;
 			});
 			throttle.throttle(updateData, throttle_timing);
 		});
 		right.on('end', (evt, data) => {
-            input.update(o => {o.right = { x: 0, y: 0 }; return o;})
+			input.update((o) => {
 				o.right = { x: 0, y: 0 };
 				return o;
 			});
 			throttle.throttle(updateData, throttle_timing);
 		});
 	});
@@ -62,11 +74,10 @@
 		data[5] = $input.height;
 		data[6] = $input.speed;
-        outControllerData.set(data)
+		outControllerData.set(data);
 		if (!$emulateModel) socketService.send(data);
 	};
 </script>
 <div class="absolute top-0 left-0 w-screen h-screen">
@@ -2,29 +2,28 @@
 	import socketService from '$lib/services/socket-service';
 	import { Icon, Bars3, XMark, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
 	import { emulateModel } from '$lib/store';
-    import { Link, useLocation } from 'svelte-routing'
+	import { Link, useLocation } from 'svelte-routing';
-    const views = ["Virtual environment", "Robot camera"]
+	const views = ['Virtual environment', 'Robot camera'];
-    const modes = ["Drive", "Choreography"]
+	const modes = ['Drive', 'Choreography'];
-    const location = useLocation()
+	const location = useLocation();
 	let selected_view = views[0];
 	let selected_modes = modes[0];
-    let settingOpen = window.location.pathname.includes('/settings')
+	let settingOpen = window.location.pathname.includes('/settings');
-    let isConnected = socketService.isConnected
+	let isConnected = socketService.isConnected;
-    $: emulateModel.set(selected_view === views[0])
+	$: emulateModel.set(selected_view === views[0]);
-    $: settingOpen = $location.pathname.includes('/settings')
+	$: settingOpen = $location.pathname.includes('/settings');
 	const stop = () => {
 		if ($isConnected) {
-            socketService.send(JSON.stringify({type:"system/stop"}))
+			socketService.send(JSON.stringify({ type: 'system/stop' }));
        }
 		}
 	};
 </script>
 <div class="topbar absolute left-0 top-0 w-full z-10 flex justify-between bg-zinc-800">
 	<div class="flex gap-2 p-2">
 		{#if settingOpen}
@@ -36,13 +35,19 @@
 				<Icon src={Bars3} size="32" />
 			</Link>
 		{/if}
-        <select bind:value={selected_modes} class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800">
+		<select
 			bind:value={selected_modes}
 			class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800"
 		>
 			{#each modes as mode}
 				<option>{mode}</option>
 			{/each}
 		</select>
-        <select bind:value={selected_view} class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800">
+		<select
 			bind:value={selected_view}
 			class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800"
 		>
 			{#each views as view}
 				<option>{view}</option>
 			{/each}
@@ -54,7 +59,9 @@
 			<Icon src={Power} size="24" />
 		</button>
 		<button class="action_button"><Icon src={Battery100} size="24" /></button>
-        <button class="action_button"><Icon src={$isConnected ? Signal : SignalSlash} size="24" /></button>
+		<button class="action_button"
 			><Icon src={$isConnected ? Signal : SignalSlash} size="24" /></button
 		>
 	</div>
 	<div>
 		<button class="h-full w-20 bg-red-600 text-white" on:click={stop}>STOP</button>
@@ -7,32 +7,41 @@ import uzip from 'uzip';
 	import { model, outControllerData } from '$lib/store';
 	import { ForwardKinematics } from '$lib/kinematic';
 	import { location } from '$lib/utilities';
-import FileService from '$lib/services/file-service';
+	import { fileService } from '$lib/services';
 	import SceneBuilder from '$lib/sceneBuilder';
-const angles = socketService.angles
+	const angles = socketService.angles;
-const mpu = socketService.mpu
+	const mpu = socketService.mpu;
-let sceneManager:SceneBuilder
+	let sceneManager: SceneBuilder;
-let canvas: HTMLCanvasElement, streamCanvas: HTMLCanvasElement, stream: HTMLImageElement
+	let canvas: HTMLCanvasElement, streamCanvas: HTMLCanvasElement, stream: HTMLImageElement;
-let context: CanvasRenderingContext2D, texture: CanvasTexture
+	let context: CanvasRenderingContext2D, texture: CanvasTexture;
-let modelAngles:number[] | Int16Array = new Array(12).fill(0)
+	let modelAngles: number[] | Int16Array = new Array(12).fill(0);
-let modelTargetAngles:number[] | Int16Array = new Array(12).fill(0)
+	let modelTargetAngles: number[] | Int16Array = new Array(12).fill(0);
-let modelBodyAngles:EulerAngle = { omega: 0, phi: 0, psi: 0 }
+	let modelBodyAngles: EulerAngle = { omega: 0, phi: 0, psi: 0 };
-let modelTargeBodyAngles:EulerAngle = { omega: 0, phi: 0, psi: 0 }
+	let modelTargeBodyAngles: EulerAngle = { omega: 0, phi: 0, psi: 0 };
 	const videoStream = `//${location}/api/stream`;
-let showModel = true, showStream = false
+	let showModel = true,
 		showStream = false;
 	const servoNames = [
-    "front_left_shoulder", "front_left_leg", "front_left_foot", 
+		'front_left_shoulder',
-    "front_right_shoulder", "front_right_leg", "front_right_foot", 
+		'front_left_leg',
-    "rear_left_shoulder", "rear_left_leg", "rear_left_foot", 
+		'front_left_foot',
-    "rear_right_shoulder", "rear_right_leg", "rear_right_foot"
+		'front_right_shoulder',
-]
+		'front_right_leg',
 		'front_right_foot',
 		'rear_left_shoulder',
 		'rear_left_leg',
 		'rear_left_foot',
 		'rear_right_shoulder',
 		'rear_right_leg',
 		'rear_right_foot'
 	];
 	interface EulerAngle {
 		omega: number;
@@ -40,39 +49,48 @@ interface EulerAngle {
 		psi: number;
 	}
-const degToRad = (val:number) => val * (Math.PI / 180)
+	const degToRad = (val: number) => val * (Math.PI / 180);
 	onMount(async () => {
-    await cacheModelFiles()
+		await cacheModelFiles();
-    await createScene()
+		await createScene();
-    outControllerData.subscribe(data => {        
+		outControllerData.subscribe((data) => {
-        socketService.send(JSON.stringify({
+			socketService.send(
-            type: "kinematic/bodystate", 
+				JSON.stringify({
 					type: 'kinematic/bodystate',
 					angles: [0, (data[1] - 128) / 3, (data[2] - 128) / 4],
-            position:[(data[4]-128)/2, data[5], (data[3]-128)/2]}))
+					position: [(data[4] - 128) / 2, data[5], (data[3] - 128) / 2]
 				})
 			);
 		});
 	});
 	onDestroy(() => {
-    canvas.remove()
+		canvas.remove();
-})
+	});
 	const cacheModelFiles = async () => {
-    let data = await fetch("/stl.zip").then(data => data.arrayBuffer())
+		let data = await fetch('/stl.zip').then((data) => data.arrayBuffer());
 		var files = uzip.parse(data);
 		for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
-        const url = new URL(path, window.location.href)
+			const url = new URL(path, window.location.href);
-        FileService.saveFile(url.toString(), data)
+			fileService.saveFile(url.toString(), data);
    }
 		}
 	};
 	const updateAngles = (name: string, angle: number) => {
-    modelTargetAngles[servoNames.indexOf(name)] = angle * (180/Math.PI)
+		modelTargetAngles[servoNames.indexOf(name)] = angle * (180 / Math.PI);
-    socketService.send(JSON.stringify({type:"kinematic/angle", angle:angle * (180/Math.PI), id:servoNames.indexOf(name)}))
+		socketService.send(
-}
+			JSON.stringify({
 				type: 'kinematic/angle',
 				angle: angle * (180 / Math.PI),
 				id: servoNames.indexOf(name)
 			})
 		);
 	};
 	const createScene = async () => {
 		sceneManager = new SceneBuilder()
@@ -90,51 +108,68 @@ const createScene = async () => {
 			.addDragControl(updateAngles)
 			.handleResize()
 			.addRenderCb(render)
-        .startRenderLoop()
+			.startRenderLoop();
-    addVideoStream()
+		addVideoStream();
-}
+	};
 	const addVideoStream = () => {
-    context = streamCanvas.getContext("2d");
+		context = streamCanvas.getContext('2d');
 		texture = new CanvasTexture(stream);
-    const liveStream = new Mesh( new CircleGeometry(35, 32), new MeshBasicMaterial({ map: texture }))
+		const liveStream = new Mesh(
-    liveStream.position.z = -50
+			new CircleGeometry(35, 32),
-    liveStream.visible = showStream
+			new MeshBasicMaterial({ map: texture })
-    sceneManager.scene.add(liveStream)
+		);
-}
+		liveStream.position.z = -50;
 		liveStream.visible = showStream;
 		sceneManager.scene.add(liveStream);
 	};
 	const handleVideoStream = () => {
-    if(!showStream) return
+		if (!showStream) return;
-    context.drawImage(stream, 0, 0)
+		context.drawImage(stream, 0, 0);
 		texture.needsUpdate = true;
-}
+	};
 	const render = () => {
-    const robot = sceneManager.model
+		const robot = sceneManager.model;
-    if(!robot) return
+		if (!robot) return;
-    const forwardKinematics = new ForwardKinematics()
+		const forwardKinematics = new ForwardKinematics();
-    const points = forwardKinematics.calculateFootpoints(modelAngles.map(ang => degToRad(ang)) as number[])
+		const points = forwardKinematics.calculateFootpoints(
-    robot.position.y = Math.max(...points.map(coord => coord[0] / 100)) - 2.7
+			modelAngles.map((ang) => degToRad(ang)) as number[]
-    robot.rotation.z = lerp(robot.rotation.z, degToRad($mpu.heading + 90), 0.1)
+		);
-    modelTargetAngles = $angles
+		robot.position.y = Math.max(...points.map((coord) => coord[0] / 100)) - 2.7;
 		robot.rotation.z = lerp(robot.rotation.z, degToRad($mpu.heading + 90), 0.1);
 		modelTargetAngles = $angles;
-    handleVideoStream()
+		handleVideoStream();
 		for (let i = 0; i < servoNames.length; i++) {
-        modelAngles[i] = lerp(robot.joints[servoNames[i]].angle * (180/Math.PI), modelTargetAngles[i], 0.1)
+			modelAngles[i] = lerp(
 				robot.joints[servoNames[i]].angle * (180 / Math.PI),
 				modelTargetAngles[i],
 				0.1
 			);
 			robot.joints[servoNames[i]].setJointValue(degToRad(modelAngles[i]));
 		}
-    modelBodyAngles.omega = lerp(robot.rotation.x * (180/Math.PI), modelTargeBodyAngles.omega - 90, 0.1)
+		modelBodyAngles.omega = lerp(
-    modelBodyAngles.phi = lerp(robot.rotation.y * (180/Math.PI), modelTargeBodyAngles.phi, 0.1)
+			robot.rotation.x * (180 / Math.PI),
-    modelBodyAngles.psi = lerp(robot.rotation.z * (180/Math.PI), modelTargeBodyAngles.psi + 90, 0.1)  
+			modelTargeBodyAngles.omega - 90,
-}
+			0.1
 		);
 		modelBodyAngles.phi = lerp(robot.rotation.y * (180 / Math.PI), modelTargeBodyAngles.phi, 0.1);
 		modelBodyAngles.psi = lerp(
 			robot.rotation.z * (180 / Math.PI),
 			modelTargeBodyAngles.psi + 90,
 			0.1
 		);
 	};
 </script>
-<svelte:window on:resize={sceneManager.handleResize}></svelte:window>
+<svelte:window on:resize={sceneManager.handleResize} />
 {#if showStream}
 	<img
@@ -13,7 +13,7 @@
 	let servos: any[] = [];
 	onMount(() => {
-        jointNames.subscribe(data => {
+		jointNames.subscribe((data) => {
 			servos = data.map((name: string, i: number) => {
 				return {
 					id: i,
@@ -23,9 +23,8 @@
 					pwmFor180: 0
 				};
 			});
-        })
+		});
-    })
+	});
 	let selectedServo: number | null = null;
@@ -34,11 +33,12 @@
 	}
 	const formatServo = (servo: Servo) => {
-        const string = servo.name
+		const string = servo.name;
 		const name = string.charAt(0).toUpperCase() + string.split('_').join(' ').slice(1);
-        return `${servo.id} ${name}`
+		return `${servo.id} ${name}`;
-    }
+	};
 </script>
 <div>
 	<div class="servo-selector">
 		<label for="servo-select">Select Servo:</label>
@@ -53,19 +53,32 @@
 		<div class="mt-5">
 			<h2>Servo {formatServo(servos[selectedServo])} Calibration</h2>
 			<label for="minPWM">Min PWM:</label>
-    <input type="number" id="minPWM" class="bg-zinc-800"
+			<input
 				type="number"
 				id="minPWM"
 				class="bg-zinc-800"
 				value={servos[selectedServo].minPWM}
-           on:blur={(event) => updateServoValue(selectedServo, 'minPWM', Number(event.target.value))} />
+				on:blur={(event) => updateServoValue(selectedServo, 'minPWM', Number(event.target.value))}
 			/>
 			<label for="maxPWM">Max PWM:</label>
-    <input type="number" id="maxPWM" class="bg-zinc-800"
+			<input
 				type="number"
 				id="maxPWM"
 				class="bg-zinc-800"
 				value={servos[selectedServo].maxPWM}
-           on:blur={(event) => updateServoValue(selectedServo, 'maxPWM', Number(event.target.value))} />
+				on:blur={(event) => updateServoValue(selectedServo, 'maxPWM', Number(event.target.value))}
 			/>
 			<label for="pwmFor180">PWM for 180°:</label>
-    <input type="number" id="pwmFor180" class="bg-zinc-800"
+			<input
 				type="number"
 				id="pwmFor180"
 				class="bg-zinc-800"
 				value={servos[selectedServo].pwmFor180}
-           on:blur={(event) => updateServoValue(selectedServo, 'pwmFor180', Number(event.target.value))} />
+				on:blur={(event) =>
 					updateServoValue(selectedServo, 'pwmFor180', Number(event.target.value))}
 			/>
 		</div>
 	{/if}
 </div>
@@ -1,17 +1,16 @@
 <script lang="ts">
-    import socketService from "$lib/services/socket-service";
+	import socketService from '$lib/services/socket-service';
-    import { onMount } from 'svelte'
+	import { onMount } from 'svelte';
-    let isConnected = socketService.isConnected
+	let isConnected = socketService.isConnected;
-    let settings = socketService.settings
+	let settings = socketService.settings;
 	onMount(() => {
 		if ($isConnected) {
-            const message = JSON.stringify({type: 'system/settings'})
+			const message = JSON.stringify({ type: 'system/settings' });
-            socketService.send(message)
+			socketService.send(message);
 		}
-    })
+	});
 </script>
 <div class="w-full h-full">
@@ -1,26 +1,26 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
+	import { onMount } from 'svelte';
-	import { humanFileSize } from "$lib/utilities";
+	import { humanFileSize } from '$lib/utilities';
 	import socketService from '$lib/services/socket-service';
-    let isConnected = socketService.isConnected
+	let isConnected = socketService.isConnected;
-    let settings = socketService.settings
+	let settings = socketService.settings;
-    let systemInfo = socketService.systemInfo
+	let systemInfo = socketService.systemInfo;
 	onMount(() => {
 		if ($isConnected) {
-            const message = JSON.stringify({type: 'system/info'})
+			const message = JSON.stringify({ type: 'system/info' });
-            socketService.send(message)
+			socketService.send(message);
 		}
-    })
+	});
 </script>
 <div class="w-full h-full">
 	<div class="w-1/3">
 		{#each Object.entries($systemInfo ?? {}) as entry}
 			<div class="flex gap-8">
 				<div class="w-32">{entry[0]}:</div>
-            {#if entry[0].includes("Size") || entry[0].includes("Free") || entry[0].includes("Min")}
+				{#if entry[0].includes('Size') || entry[0].includes('Free') || entry[0].includes('Min')}
 					<div>{humanFileSize(entry[1])}</div>
 				{:else}
 					<div>{entry[1]}</div>
@@ -1,17 +1,16 @@
 <script lang="ts">
-	import socketService from "$lib/services/socket-service";
+	import socketService from '$lib/services/socket-service';
-    import { onMount } from 'svelte'
+	import { onMount } from 'svelte';
-    let isConnected = socketService.isConnected
+	let isConnected = socketService.isConnected;
-    let log = socketService.log
+	let log = socketService.log;
 	onMount(() => {
 		if ($isConnected) {
-            const message = JSON.stringify({type: 'system/logs'})
+			const message = JSON.stringify({ type: 'system/logs' });
-            socketService.send(message)
+			socketService.send(message);
 		}
-    })
+	});
 </script>
 <div class="w-full h-full">
@@ -17,26 +17,33 @@ export default class Kinematic {
 		this.W = 75;
 	}
-    bodyIK(omega: number, phi: number, psi: number, xm: number, ym: number, zm: number): number[][][] {
+	bodyIK(
 		omega: number,
 		phi: number,
 		psi: number,
 		xm: number,
 		ym: number,
 		zm: number
 	): number[][][] {
 		const { cos, sin } = Math;
 		const Rx: number[][] = [
 			[1, 0, 0, 0],
 			[0, cos(omega), -sin(omega), 0],
 			[0, sin(omega), cos(omega), 0],
-        [0, 0, 0, 1],
+			[0, 0, 0, 1]
 		];
 		const Ry: number[][] = [
 			[cos(phi), 0, sin(phi), 0],
 			[0, 1, 0, 0],
 			[-sin(phi), 0, cos(phi), 0],
-        [0, 0, 0, 1],
+			[0, 0, 0, 1]
 		];
 		const Rz: number[][] = [
 			[cos(psi), -sin(psi), 0, 0],
 			[sin(psi), cos(psi), 0, 0],
 			[0, 0, 1, 0],
-        [0, 0, 0, 1],
+			[0, 0, 0, 1]
 		];
 		const Rxyz: number[][] = this.matrixMultiply(this.matrixMultiply(Rx, Ry), Rz);
@@ -44,7 +51,7 @@ export default class Kinematic {
 			[0, 0, 0, xm],
 			[0, 0, 0, ym],
 			[0, 0, 0, zm],
-        [0, 0, 0, 0],
+			[0, 0, 0, 0]
 		];
 		const Tm: number[][] = this.matrixAdd(T, Rxyz);
@@ -58,26 +65,26 @@ export default class Kinematic {
 				[cHp, 0, sHp, L / 2],
 				[0, 1, 0, 0],
 				[-sHp, 0, cHp, W / 2],
-          [0, 0, 0, 1],
+				[0, 0, 0, 1]
 			]),
 			this.matrixMultiply(Tm, [
 				[cHp, 0, sHp, L / 2],
 				[0, 1, 0, 0],
 				[-sHp, 0, cHp, -W / 2],
-          [0, 0, 0, 1],
+				[0, 0, 0, 1]
 			]),
 			this.matrixMultiply(Tm, [
 				[cHp, 0, sHp, -L / 2],
 				[0, 1, 0, 0],
 				[-sHp, 0, cHp, W / 2],
-          [0, 0, 0, 1],
+				[0, 0, 0, 1]
 			]),
 			this.matrixMultiply(Tm, [
 				[cHp, 0, sHp, -L / 2],
 				[0, 1, 0, 0],
 				[-sHp, 0, cHp, -W / 2],
-          [0, 0, 0, 1],
+				[0, 0, 0, 1]
-        ]),
+			])
 		];
 	}
@@ -90,22 +97,22 @@ export default class Kinematic {
 		try {
 			F = sqrt(x ** 2 + y ** 2 - l1 ** 2);
-            if(isNaN(F)) throw new Error("F is NaN")
+			if (isNaN(F)) throw new Error('F is NaN');
 		} catch (error) {
 			//console.log(error)
-            F = l1
+			F = l1;
 		}
 		const G = F - l2;
 		const H = sqrt(G ** 2 + z ** 2);
 		const theta1 = -atan2(y, x) - atan2(F, -l1);
 		const D = (H ** 2 - l3 ** 2 - l4 ** 2) / (2 * l3 * l4);
-        let theta3: number
+		let theta3: number;
 		try {
 			theta3 = acos(D);
-            if(isNaN(theta3)) throw new Error("theta3 is NaN")
+			if (isNaN(theta3)) throw new Error('theta3 is NaN');
 		} catch (error) {
-            theta3 = 0
+			theta3 = 0;
 		}
 		const theta2 = atan2(z, G) - atan2(l4 * sin(theta3), l3 + l4 * cos(theta3));
@@ -140,7 +147,7 @@ export default class Kinematic {
 		const vectorLength = vector.length;
 		if (cols !== vectorLength) {
-          throw new Error("Matrix and vector dimensions do not match for multiplication.");
+			throw new Error('Matrix and vector dimensions do not match for multiplication.');
 		}
 		const result = [];
@@ -179,32 +186,30 @@ export default class Kinematic {
 		const theta23 = theta2 + theta3;
 		const T0: number[] = [0, 0, 0, 1];
-      const T1: number[] = this.vectorAdd(
+		const T1: number[] = this.vectorAdd(T0, [
-        T0,
+			-this.l1 * Math.cos(theta1),
-        [-this.l1 * Math.cos(theta1), this.l1 * Math.sin(theta1), 0, 0]
+			this.l1 * Math.sin(theta1),
-      );
+			0,
-      const T2: number[] = this.vectorAdd(
+			0
-        T1,
+		]);
-        [-this.l2 * Math.sin(theta1), -this.l2 * Math.cos(theta1), 0, 0]
+		const T2: number[] = this.vectorAdd(T1, [
-      );
+			-this.l2 * Math.sin(theta1),
-      const T3: number[] = this.vectorAdd(
+			-this.l2 * Math.cos(theta1),
-        T2,
+			0,
-        [
+			0
 		]);
 		const T3: number[] = this.vectorAdd(T2, [
 			-this.l3 * Math.sin(theta1) * Math.cos(theta2),
 			-this.l3 * Math.cos(theta1) * Math.cos(theta2),
 			this.l3 * Math.sin(theta2),
-          0,
+			0
-        ]
+		]);
-      );
+		const T4: number[] = this.vectorAdd(T3, [
      const T4: number[] = this.vectorAdd(
        T3,
        [
 			-this.l4 * Math.sin(theta1) * Math.cos(theta23),
 			-this.l4 * Math.cos(theta1) * Math.cos(theta23),
 			this.l4 * Math.sin(theta23),
-          0,
+			0
-        ]
+		]);
      );
 		return [T0, T1, T2, T3, T4];
 	}
@@ -219,14 +224,14 @@ export default class Kinematic {
 			[-1, 0, 0, 0],
 			[0, 1, 0, 0],
 			[0, 0, 1, 0],
-        [0, 0, 0, 1],
+			[0, 0, 0, 1]
 		];
 		return [
 			this.legIK(this.multiplyVector(this.matrixInverse(Tlf), Lp[0])),
 			this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trf), Lp[1]))),
 			this.legIK(this.multiplyVector(this.matrixInverse(Tlb), Lp[2])),
-        this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trb), Lp[3]))),
+			this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trb), Lp[3])))
 		];
 	}
@@ -255,7 +260,7 @@ export default class Kinematic {
 	private determinant(matrix: number[][]): number {
 		if (matrix.length !== matrix[0].length) {
-        throw new Error("The matrix is not square.");
+			throw new Error('The matrix is not square.');
 		}
 		if (matrix.length === 2) {
@@ -288,7 +293,7 @@ export default class Kinematic {
 	private adjugate(matrix: number[][]): number[][] {
 		if (matrix.length !== matrix[0].length) {
-        throw new Error("The matrix is not square.");
+			throw new Error('The matrix is not square.');
 		}
 		const adjugate: number[][] = [];
@@ -341,7 +346,6 @@ export default class Kinematic {
 	}
 }
 export class ForwardKinematics {
 	private l1: number;
 	private l2: number;
@@ -358,8 +362,16 @@ export class ForwardKinematics {
 	public calculateFootpoint(theta1: number, theta2: number, theta3: number): number[] {
 		const { cos, sin } = Math;
-      const x = this.l1 * cos(theta1) + this.l2 * cos(theta1) + this.l3 * cos(theta1 + theta2) + this.l4 * cos(theta1 + theta2 + theta3);
+		const x =
-      const y = this.l1 * sin(theta1) + this.l2 * sin(theta1) + this.l3 * sin(theta1 + theta2) + this.l4 * sin(theta1 + theta2 + theta3);
+			this.l1 * cos(theta1) +
 			this.l2 * cos(theta1) +
 			this.l3 * cos(theta1 + theta2) +
 			this.l4 * cos(theta1 + theta2 + theta3);
 		const y =
 			this.l1 * sin(theta1) +
 			this.l2 * sin(theta1) +
 			this.l3 * sin(theta1 + theta2) +
 			this.l4 * sin(theta1 + theta2 + theta3);
 		const z = 0;
 		return [x, y, z];
@@ -1,4 +1,5 @@
-import { Mesh, 
+import {
 	Mesh,
 	PerspectiveCamera,
 	PlaneGeometry,
 	Scene,
@@ -19,81 +20,81 @@ import { Mesh,
 	MeshPhongMaterial,
 	EquirectangularReflectionMapping,
 	ACESFilmicToneMapping,
-    MathUtils,
+	MathUtils
-} from "three";
+} from 'three';
 import { Sky } from 'three/addons/objects/Sky.js';
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import { type URDFMimicJoint } from "urdf-loader";
+import { type URDFMimicJoint } from 'urdf-loader';
-import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls'
+import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls';
-export const addScene = () => new Scene()
+export const addScene = () => new Scene();
 interface position {
-    x?: number,
+	x?: number;
-    y?: number,
+	y?: number;
-    z?: number
+	z?: number;
 }
 interface light {
-    color?: ColorRepresentation,
+	color?: ColorRepresentation;
-    intensity?: number
+	intensity?: number;
 }
 interface gridOptions {
-    divisions?: number,
+	divisions?: number;
-    size?: number,
+	size?: number;
 }
 interface arrowOptions {
-    origin:position,
+	origin: position;
-    direction:position,
+	direction: position;
-    length?:number,
+	length?: number;
-    color?:ColorRepresentation
+	color?: ColorRepresentation;
 }
-type directionalLight = position & light
+type directionalLight = position & light;
-type gridHelperOptions = gridOptions & position
+type gridHelperOptions = gridOptions & position;
 function calculateCurrentSunElevation() {
 	let now = new Date();
 	let decimalTime = now.getHours() + now.getMinutes() / 60;
-    let normalizedTime = ((decimalTime - 6) % 12) / 6 - 1;
+	let normalizedTime = (decimalTime % 12) / 6 - 1;
 	return 10 * Math.sin(normalizedTime * Math.PI);
 }
 export default class SceneBuilder {
-    public scene: Scene
+	public scene: Scene;
-    public camera: PerspectiveCamera
+	public camera: PerspectiveCamera;
-    public ground: Mesh
+	public ground: Mesh;
-    public renderer:WebGLRenderer
+	public renderer: WebGLRenderer;
-    public controls:OrbitControls
+	public controls: OrbitControls;
-    public callback:Function
+	public callback: Function;
 	public gridHelper: GridHelper;
-    public model: Object3D<Event>
+	public model: Object3D<Event>;
-    public liveStreamTexture: CanvasTexture
+	public liveStreamTexture: CanvasTexture;
-    private fog:FogExp2
+	private fog: FogExp2;
-    private isLoaded:boolean = false
+	private isLoaded: boolean = false;
 	highlightMaterial: any;
 	constructor() {
-        this.scene = new Scene()
+		this.scene = new Scene();
 		if (this.scene.environment?.mapping) {
 			this.scene.environment.mapping = EquirectangularReflectionMapping;
 		}
-        return this
+		return this;
 	}
 	public addRenderer = (parameters?: WebGLRendererParameters) => {
 		this.renderer = new WebGLRenderer(parameters);
-        this.renderer.outputColorSpace = "srgb";
+		this.renderer.outputColorSpace = 'srgb';
 		this.renderer.shadowMap.enabled = true;
 		this.renderer.shadowMap.type = PCFSoftShadowMap;
 		this.renderer.toneMapping = ACESFilmicToneMapping;
 		this.renderer.toneMappingExposure = 0.85;
 		document.body.appendChild(this.renderer.domElement);
-        return this
+		return this;
-    }
+	};
 	public addSky = () => {
 		const sky = new Sky();
@@ -120,15 +121,15 @@ export default class SceneBuilder {
 		sun.setFromSphericalCoords(1, phi, theta);
 		uniforms['sunPosition'].value.copy(sun);
-        return this
+		return this;
-    }
+	};
 	public addPerspectiveCamera = (options: position) => {
 		this.camera = new PerspectiveCamera();
 		this.camera.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
 		this.scene.add(this.camera);
-        return this
+		return this;
-    }
+	};
 	public addGroundPlane = (options: position) => {
 		this.ground = new Mesh(new PlaneGeometry(), new ShadowMaterial({ side: 2 }));
@@ -137,22 +138,22 @@ export default class SceneBuilder {
 		this.ground.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
 		this.ground.receiveShadow = true;
 		this.scene.add(this.ground);
-        return this
+		return this;
-    }
+	};
 	public addOrbitControls = (minDistance: number, maxDistance: number) => {
 		this.controls = new OrbitControls(this.camera, this.renderer.domElement);
 		this.controls.minDistance = minDistance;
 		this.controls.maxDistance = maxDistance;
 		this.controls.update();
-        return this
+		return this;
-    }
+	};
 	public addAmbientLight = (options: light) => {
 		const ambientLight = new AmbientLight(options.color, options.intensity);
 		this.scene.add(ambientLight);
-        return this
+		return this;
-    }
+	};
 	public addDirectionalLight = (options: directionalLight) => {
 		const directionalLight = new DirectionalLight(options.color, options.intensity);
@@ -161,10 +162,10 @@ export default class SceneBuilder {
 		directionalLight.shadow.mapSize.width = 1024;
 		directionalLight.shadow.mapSize.height = 1024;
 		directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-        directionalLight.shadow.radius = 5
+		directionalLight.shadow.radius = 5;
 		this.scene.add(directionalLight);
-        return this
+		return this;
-    }
+	};
 	public addGridHelper = (options: gridHelperOptions) => {
 		this.gridHelper = new GridHelper(options.size, options.divisions);
@@ -173,55 +174,68 @@ export default class SceneBuilder {
 		this.gridHelper.material.depthWrite = false;
 		this.gridHelper.material.transparent = true;
 		this.scene.add(this.gridHelper);
-        return this
+		return this;
-    }
+	};
 	public addFogExp2 = (color: ColorRepresentation, density?: number) => {
 		this.scene.fog = new FogExp2(color, density);
-        return this
+		return this;
-    }
+	};
 	public handleResize = () => {
 		this.renderer.setSize(window.innerWidth, window.innerHeight);
 		this.renderer.setPixelRatio(window.devicePixelRatio);
 		this.camera.aspect = window.innerWidth / window.innerHeight;
 		this.camera.updateProjectionMatrix();
-        return this
+		return this;
-    }
+	};
 	public addRenderCb = (callback: Function) => {
-        this.callback = callback
+		this.callback = callback;
-        return this
+		return this;
-    }
+	};
 	public startRenderLoop = () => {
 		this.renderer.setAnimationLoop(() => {
 			this.renderer.render(this.scene, this.camera);
-            this.handleRobotShadow()
+			this.handleRobotShadow();
-            if(this.callback) this.callback()
+			if (this.callback) this.callback();
-            if(!this.liveStreamTexture) return
+			if (!this.liveStreamTexture) return;
 		});
-        return this
+		return this;
-    }
+	};
 	public addArrowHelper = (options?: arrowOptions) => {
-        const dir = new Vector3(options?.direction.x ?? 0, options?.direction.y ?? 0, options?.direction.z ?? 0);
+		const dir = new Vector3(
-        const origin = new Vector3(options?.origin.x ?? 0, options?.origin.y ?? 0, options?.origin.z ?? 0);
+			options?.direction.x ?? 0,
-        const arrowHelper = new ArrowHelper( dir, origin, options?.length ?? 1.5, options?.color ?? 0xff0000 );
+			options?.direction.y ?? 0,
 			options?.direction.z ?? 0
 		);
 		const origin = new Vector3(
 			options?.origin.x ?? 0,
 			options?.origin.y ?? 0,
 			options?.origin.z ?? 0
 		);
 		const arrowHelper = new ArrowHelper(
 			dir,
 			origin,
 			options?.length ?? 1.5,
 			options?.color ?? 0xff0000
 		);
 		this.scene.add(arrowHelper);
-        return this
+		return this;
-    }
+	};
 	private setJointValue(jointName: string, angle: number) {
 		if (!this.model) return;
 		if (!this.model.joints[jointName]) return;
-        this.model.joints[jointName].setJointValue(angle)
+		this.model.joints[jointName].setJointValue(angle);
 	}
-    isJoint = j => j.isURDFJoint && j.jointType !== 'fixed';
+	isJoint = (j) => j.isURDFJoint && j.jointType !== 'fixed';
 	highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
-        const traverse = c => {
+		const traverse = (c) => {
 			if (c.type === 'Mesh') {
 				if (revert) {
 					c.material = c.__origMaterial;
@@ -245,49 +259,60 @@ export default class SceneBuilder {
 	};
 	public addModel = (model: any) => {
-        this.model = model
+		this.model = model;
-        this.scene.add(model)
+		this.scene.add(model);
-        return this 
+		return this;
-    }
+	};
 	public addDragControl = (updateAngle: any) => {
-        const highlightColor = '#FFFFFF'
+		const highlightColor = '#FFFFFF';
-        const highlightMaterial =
+		const highlightMaterial = new MeshPhongMaterial({
            new MeshPhongMaterial({
 			shininess: 10,
 			color: highlightColor,
 			emissive: highlightColor,
-                emissiveIntensity: 0.25,
+			emissiveIntensity: 0.25
 		});
-        const dragControls = new PointerURDFDragControls(this.scene, this.camera, this.renderer.domElement);
+		const dragControls = new PointerURDFDragControls(
 			this.scene,
 			this.camera,
 			this.renderer.domElement
 		);
 		dragControls.updateJoint = (joint: URDFMimicJoint, angle: number) => {
 			this.setJointValue(joint.name, angle);
-            updateAngle(joint.name, angle)
+			updateAngle(joint.name, angle);
 		};
-        dragControls.onDragStart = () => this.controls.enabled = false;
+		dragControls.onDragStart = () => (this.controls.enabled = false);
-        dragControls.onDragEnd = () => this.controls.enabled = true;
+		dragControls.onDragEnd = () => (this.controls.enabled = true);
-        dragControls.onHover = (joint:URDFMimicJoint) => this.highlightLinkGeometry(joint, false, highlightMaterial);
+		dragControls.onHover = (joint: URDFMimicJoint) =>
-        dragControls.onUnhover = (joint:URDFMimicJoint) => this.highlightLinkGeometry(joint, true, highlightMaterial);
+			this.highlightLinkGeometry(joint, false, highlightMaterial);
 		dragControls.onUnhover = (joint: URDFMimicJoint) =>
 			this.highlightLinkGeometry(joint, true, highlightMaterial);
-        this.renderer.domElement.addEventListener('touchstart', (data) => dragControls._mouseDown(data.touches[0]));
+		this.renderer.domElement.addEventListener('touchstart', (data) =>
-        this.renderer.domElement.addEventListener('touchmove', (data) => dragControls._mouseMove(data.touches[0]))
+			dragControls._mouseDown(data.touches[0])
-        this.renderer.domElement.addEventListener('touchup', (data) => dragControls._mouseUp(data.touches[0]));
+		);
-        return this
+		this.renderer.domElement.addEventListener('touchmove', (data) =>
-    }
+			dragControls._mouseMove(data.touches[0])
 		);
 		this.renderer.domElement.addEventListener('touchup', (data) =>
 			dragControls._mouseUp(data.touches[0])
 		);
 		return this;
 	};
 	public toggleFog = () => {
 		this.scene.fog = this.scene.fog ? null : this.fog;
-    }
+	};
 	private handleRobotShadow = () => {
-        if(this.isLoaded) return
+		if (this.isLoaded) return;
 		const intervalId = setInterval(() => {
-            this.model?.traverse(c => c.castShadow = true);
+			this.model?.traverse((c) => (c.castShadow = true));
 		}, 10);
 		setTimeout(() => {
-            clearInterval(intervalId)
+			clearInterval(intervalId);
 		}, 1000);
 		this.isLoaded = true;
-    }
+	};
 }
@@ -14,7 +14,7 @@ class FileService {
 		return new Promise((resolve) => {
 			const request = indexedDB.open(this.dbName, this.dbVersion);
-            request.onerror = () => resolve(Result.err("Error opening database"));
+			request.onerror = () => resolve(Result.err('Error opening database'));
 			request.onsuccess = () => resolve(Result.ok(request.result));
@@ -30,7 +30,7 @@ class FileService {
 	private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
 		const dbResult = await this.dbPromise;
 		if (dbResult.isErr()) {
-            return Result.err("Database not initialized properly");
+			return Result.err('Database not initialized properly');
 		}
 		const db = dbResult.inner;
 		const transaction = db.transaction(this.storeName, mode);
@@ -38,23 +38,23 @@ class FileService {
 	}
 	public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
-        const storeResult = await this.getStore("readwrite");
+		const storeResult = await this.getStore('readwrite');
 		if (storeResult.isErr()) {
-            return Result.err("Failed to access object store for writing");
+			return Result.err('Failed to access object store for writing');
 		}
 		const store = storeResult.inner;
 		return new Promise((resolve) => {
 			const request = store.put(file, key);
 			request.onsuccess = () => resolve(Result.ok(request.result));
-            request.onerror = () => resolve(Result.err("Failed to save file"));
+			request.onerror = () => resolve(Result.err('Failed to save file'));
 		});
 	}
 	public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
-        const storeResult = await this.getStore("readonly");
+		const storeResult = await this.getStore('readonly');
 		if (storeResult.isErr()) {
-            return Result.err("Failed to access object store for reading");
+			return Result.err('Failed to access object store for reading');
 		}
 		const store = storeResult.inner;
@@ -62,9 +62,8 @@ class FileService {
 			const request = store.get(key);
 			request.onsuccess = () =>
-                resolve(request.result ? Result.ok(request.result) : Result.err("File content not found")) 
+				resolve(request.result ? Result.ok(request.result) : Result.err('File content not found'));
-            request.onerror = () => 
+			request.onerror = () => resolve(Result.err('Failed to retrieve file'));
                resolve(Result.err("Failed to retrieve file"));
 		});
 	}
 }
@@ -1,2 +1,2 @@
-export * from './file-service'
+export { default as fileService } from './file-service';
-export * from './socket-service'
+export { default as socketService } from './socket-service';
@@ -1,10 +1,18 @@
 import { Result, Ok } from '$lib/utilities';
 import { writable, type Writable } from 'svelte/store';
-type WebsocketData = string | ArrayBufferLike | Blob | ArrayBufferView
+type WebsocketData = string | ArrayBufferLike | Blob | ArrayBufferView;
 // TODO
 /**
 * MOVE THE store to a store.ts file
 *
 * Make an object on the class that encapsulate all the stores
 *
 * Make the handle message function look up the type and set the value, to simplify the code
 */
 class SocketService {
 	public isConnected = writable(false);
 	public angles = writable(new Int16Array(12).fill(0));
 	public log = writable([] as string[]);
@@ -22,7 +30,7 @@ class SocketService {
 	public connect(url: string): void {
 		this.socket = new WebSocket(url);
-        this.socket.binaryType = "arraybuffer";
+		this.socket.binaryType = 'arraybuffer';
 		this.socket.onopen = () => this.handleConnected();
 		this.socket.onclose = () => this.handleDisconnected();
 		this.socket.onmessage = (event: unknown) => this.handleMessage(event);
@@ -30,10 +38,10 @@ class SocketService {
 	public send(data: WebsocketData): Result<void, string> {
 		if (this.socket.readyState === WebSocket.OPEN) {
-            this.socket.send(data)
+			this.socket.send(data);
-            return Ok.void()
+			return Ok.void();
 		}
-        return Result.err("The connection is not open")
+		return Result.err('The connection is not open');
 	}
 	private handleConnected(): void {
@@ -58,27 +66,30 @@ class SocketService {
 				console.warn(error);
 			}
 			switch (data.type) {
-                case "angles":
+				case 'angles':
 					this.angles.set(data.angles);
 					break;
-                case "logs":
+				case 'logs':
 					this.log.set(data.logs);
 					break;
-                case "log":
+				case 'log':
-                    this.log.update(entries => { entries.push(data.log); return entries; });
+					this.log.update((entries) => {
 						entries.push(data.log);
 						return entries;
 					});
 					break;
-                case "settings":
+				case 'settings':
 					this.settings.set(data.settings);
-                case "info":
+				case 'info':
 					this.systemInfo.set(data.info);
 					break;
-                case "mpu":
+				case 'mpu':
 					this.mpu.set(data.mpu);
 					break;
-                case "distances":
+				case 'distances':
 					this.distances.set(data.distances);
 					break;
-                case "battery":
+				case 'battery':
 					this.battery.set(data.battery);
 					break;
 			}
@@ -3,10 +3,15 @@ import { persistentStore } from '$lib/utilities';
 export const emulateModel = writable(true);
-export const input = writable({left:{x:0, y:0}, right:{x:0, y:0}, height:70, speed:0});
+export const input = writable({
 	left: { x: 0, y: 0 },
 	right: { x: 0, y: 0 },
 	height: 70,
 	speed: 0
 });
 export const outControllerData = writable(new Uint8Array([0, 128, 128, 128, 128, 70, 0]));
-export const jointNames = persistentStore("joint_names", [])
+export const jointNames = persistentStore('joint_names', []);
-export const model = writable()
+export const model = writable();
@@ -13,4 +13,3 @@ export class throttler {
 		}, time);
 	};
 }
@@ -1,7 +1,7 @@
-export * from './result'
+export * from './result';
-export * from './string-utilities'
+export * from './string-utilities';
-export * from './svelte-utilities'
+export * from './svelte-utilities';
-export * from './math-utilities'
+export * from './math-utilities';
-export * from './buffer-utilities'
+export * from './buffer-utilities';
-export * from './model-utilities'
+export * from './model-utilities';
-export * from './location-utilities'
+export * from './location-utilities';
@@ -1,6 +1,8 @@
-const forWeb = import.meta.env.MODE === "WEB"
+const forWeb = import.meta.env.MODE === 'WEB';
-const mock = import.meta.env.MODE === "MOCK"
+const mock = import.meta.env.MODE === 'MOCK';
-export const location = mock ? `${window.location.hostname}:2096` : "leika.local"
+export const location = mock ? `${window.location.hostname}:2096` : 'leika.local';
-export const socketLocation = forWeb ? `wss://${window.location.hostname}:2096` : `ws://${location}` 
+export const socketLocation = forWeb
 	? `wss://${window.location.hostname}:2096`
 	: `ws://${location}`;
@@ -1,13 +1,17 @@
-import { LoaderUtils } from "three";
+import { LoaderUtils } from 'three';
-import URDFLoader, { type URDFRobot } from "urdf-loader"
+import URDFLoader, { type URDFRobot } from 'urdf-loader';
-import { XacroLoader } from "xacro-parser"
+import { XacroLoader } from 'xacro-parser';
-import { Result } from "$lib/utilities";
+import { Result } from '$lib/utilities';
-export const loadModelAsync = async (url:string):Promise<Result<[URDFRobot, string[]], string>> => {
+export const loadModelAsync = async (
 	url: string
 ): Promise<Result<[URDFRobot, string[]], string>> => {
 	return new Promise((resolve, reject) => {
 		const xacroLoader = new XacroLoader();
-    xacroLoader.load(url, async (xml) => {
+		xacroLoader.load(
 			url,
 			async (xml) => {
 				const urdfLoader = new URDFLoader();
 				urdfLoader.workingPath = LoaderUtils.extractUrlBase(url);
@@ -16,17 +20,19 @@ export const loadModelAsync = async (url:string):Promise<Result<[URDFRobot, stri
 					const model = urdfLoader.parse(xml);
 					model.rotation.x = -Math.PI / 2;
 					model.rotation.z = Math.PI / 2;
-        model.traverse(c => c.castShadow = true);
+					model.traverse((c) => (c.castShadow = true));
 					model.updateMatrixWorld(true);
 					model.scale.setScalar(10);
 					const joints = Object.entries(model.joints)
-            .filter(joint => joint[1].jointType !== 'fixed')
+						.filter((joint) => joint[1].jointType !== 'fixed')
-            .map(joint => joint[0])
+						.map((joint) => joint[0]);
 					resolve(Result.ok([model, joints]));
 				} catch (error) {
-            resolve(Result.err("Failed to load model", error)); 
+					resolve(Result.err('Failed to load model', error));
 				}
-    }, (error) => reject(error)); 
+			},
 			(error) => reject(error)
 		);
 	});
-}
+};
@@ -1,14 +1,14 @@
 export class Err<T, U> {
-  #inner: T
+	#inner: T;
-  #exception?: U
+	#exception?: U;
 	constructor(inner: T, exception?: U) {
-    this.#inner = inner
+		this.#inner = inner;
-    this.#exception = exception
+		this.#exception = exception;
 	}
 	get inner(): T {
-    return this.#inner
+		return this.#inner;
 	}
 	get exception(): U | undefined {
@@ -20,7 +20,7 @@ export class Err<T, U> {
 	 * @returns `true` if `Ok`; `false` if `Err`
 	 */
 	isOk(): false {
-    return false
+		return false;
 	}
 	/**
@@ -28,7 +28,7 @@ export class Err<T, U> {
 	 * @returns `true` if `Err`; `false` if `Ok`
 	 */
 	isErr(): this is Err<T, U> {
-    return true
+		return true;
 	}
 	/**
@@ -37,6 +37,6 @@ export class Err<T, U> {
 	 * @returns `Err(inner)`
 	 */
 	static new<E, F>(inner: E, exception: F): Err<E, F> {
-    return new Err<E, F>(inner, exception)
+		return new Err<E, F>(inner, exception);
 	}
 }
@@ -1,3 +1,3 @@
-export * from './err'
+export * from './err';
-export * from './ok'
+export * from './ok';
-export * from './result'
+export * from './result';
@@ -1,12 +1,12 @@
 export class Ok<T> {
-  #inner: T
+	#inner: T;
 	constructor(inner: T) {
-    this.#inner = inner
+		this.#inner = inner;
 	}
 	get inner(): T {
-    return this.#inner
+		return this.#inner;
 	}
 	/**
@@ -14,7 +14,7 @@ export class Ok<T> {
 	 * @returns `true` if `Ok`; `false` if `Err`
 	 */
 	isOk(): this is Ok<T> {
-    return true
+		return true;
 	}
 	/**
@@ -22,7 +22,7 @@ export class Ok<T> {
 	 * @returns `true` if `Err`; `false` if `Ok`
 	 */
 	isErr(): false {
-    return false
+		return false;
 	}
 	/**
@@ -31,7 +31,7 @@ export class Ok<T> {
 	 * @returns `Ok(inner)`
 	 */
 	static new<T>(inner: T): Ok<T> {
-    return new Ok<T>(inner)
+		return new Ok<T>(inner);
 	}
 	/**
@@ -39,6 +39,6 @@ export class Ok<T> {
 	 * @returns `Ok(void)`
 	 */
 	static void(): Ok<void> {
-    return new Ok(undefined)
+		return new Ok(undefined);
 	}
 }
@@ -1,20 +1,20 @@
-import { Err } from './err'
+import { Err } from './err';
-import { Ok } from './ok'
+import { Ok } from './ok';
-export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>
+export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>;
 export namespace Result {
 	/**
 	 * @returns `Ok<T>`
 	 */
 	export function ok<T = unknown>(value: T) {
-    return Ok.new(value)
+		return Ok.new(value);
 	}
 	/**
 	 * @returns `Err<E, F>`
 	 */
 	export function err<E = unknown, F = unknown>(error: E, exception?: F) {
-    return Err.new(error, exception)
+		return Err.new(error, exception);
 	}
 }
@@ -1,5 +1,5 @@
 export const humanFileSize = (size: number): string => {
-    const units = ['B', 'kB', 'MB', 'GB', 'TB']
+	const units = ['B', 'kB', 'MB', 'GB', 'TB'];
 	var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
 	return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i];
-}
+};
@@ -1,13 +1,13 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 export const persistentStore = (key: string, initialValue: any) => {
 	const savedValue = JSON.parse(localStorage.getItem(key) as string);
 	const data = savedValue !== null ? savedValue : initialValue;
 	const store = writable(data);
-    store.subscribe(value => {
+	store.subscribe((value) => {
 		localStorage.setItem(key, JSON.stringify(value));
 	});
 	return store;
-}
+};
@@ -3,10 +3,19 @@
 	import Info from '../components/settings/Info.svelte';
 	import Log from '../components/settings/Log.svelte';
 	import Configuration from '../components/settings/Configuration.svelte';
-	import { Icon, Wifi, CommandLine, InformationCircle, BookOpen, AdjustmentsVertical, Cog6Tooth, Newspaper } from 'svelte-hero-icons';
+	import {
 		Icon,
 		Wifi,
 		CommandLine,
 		InformationCircle,
 		BookOpen,
 		AdjustmentsVertical,
 		Cog6Tooth,
 		Newspaper
 	} from 'svelte-hero-icons';
 	import Calibration from '../components/settings/Calibration.svelte';
-    export const page = ""
+	export const page = '';
 	const menu = [
 		{
@@ -32,7 +41,7 @@
 			path: '/settings',
 			icon: Cog6Tooth,
 			component: Configuration
-        },
+		}
 	];
 </script>
@@ -4,20 +4,20 @@ export default {
 	theme: {
 		extend: {
 			colors: {
-            'primary': '#6200EE',
+				primary: '#6200EE',
 				'primary-variant': '#3700B3',
-            'secondary': '#3700B3',
+				secondary: '#3700B3',
 				'secondary-variant': '#3700B3',
-            'background': '#1e1e1e',
+				background: '#1e1e1e',
-            'surface': '#2c2c2c',
+				surface: '#2c2c2c',
-            'error': '#B00020',
+				error: '#B00020',
 				'on-primary': '#FFFFFF',
 				'on-secondary': '#FFFFFF',
 				'on-background': '#FFFFFF',
 				'on-surface': '#FFFFFF',
-            'on-error': '#FFFFFF',
+				'on-error': '#FFFFFF'
 			}
 		}
        },
 	},
 	plugins: []
 };
@@ -3,7 +3,7 @@ import { Result } from '../src/lib/utilities';
 describe('Result', () => {
 	it('should create a success result correctly', () => {
-    const successValue = "Success value";
+		const successValue = 'Success value';
 		const result = Result.ok(successValue);
 		expect(result.isOk()).toBe(true);
@@ -12,7 +12,7 @@ describe('Result', () => {
 	});
 	it('should create an error result correctly', () => {
-    const errorMessage = "Error message";
+		const errorMessage = 'Error message';
 		const result = Result.err(errorMessage);
 		expect(result.isOk()).toBe(false);
@@ -22,7 +22,7 @@ describe('Result', () => {
 	it('should type guard success and error results correctly', () => {
 		const successResult = Result.ok(123);
-    const errorResult = Result.err("Error");
+		const errorResult = Result.err('Error');
 		if (successResult.isOk()) {
 			expect(typeof successResult.inner).toBe('number');
@@ -21,7 +21,6 @@
 			"$components/*": ["./src/components/*"],
 			"$stores/*": ["./src/stores/*"]
 		}
 	},
 	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
 	"references": [{ "path": "./tsconfig.node.json" }]
@@ -2,24 +2,26 @@ import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 import viteCompression from 'vite-plugin-compression';
-import path from 'path'
+import path from 'path';
-const forEmbedded = process.env.FOR_EMBEDDED == 'true'
+const forEmbedded = process.env.FOR_EMBEDDED == 'true';
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [svelte(), 
+	plugins: [
-        ...(forEmbedded ? [ viteSingleFile(), viteCompression({deleteOriginFile: true})]: [])],
+		svelte(),
 		...(forEmbedded ? [viteSingleFile(), viteCompression({ deleteOriginFile: true })] : [])
 	],
 	build: {
 		outDir: forEmbedded ? '../data' : './build',
 		emptyOutDir: true
 	},
 	resolve: {
 		alias: {
-            '$lib': path.resolve('./src/lib/'),
+			$lib: path.resolve('./src/lib/'),
-            '$components': path.resolve('./src/components'),
+			$components: path.resolve('./src/components'),
-            '$utils': path.resolve('./src/utils'),
+			$utils: path.resolve('./src/utils'),
-            '$stores': path.resolve('./src/stores'),
+			$stores: path.resolve('./src/stores')
-        },
+		}
-    },
+	}
 });
`@@ -1,2 +1,2 @@`
	`export * from './file-service'`	`export { default as fileService } from './file-service';`
	`export * from './socket-service'`	`export { default as socketService } from './socket-service';`