🎨 Simplifies spin skill

app/.eslintrc.cjs

@@ -1,31 +1,31 @@
 /** @type { import("eslint").Linter.Config } */
 module.exports = {
-    root: true,
-    extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:svelte/recommended',
-        'prettier'
-    ],
-    parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
-    parserOptions: {
-        sourceType: 'module',
-        ecmaVersion: 2020,
-        extraFileExtensions: ['.svelte']
-    },
-    env: {
-        browser: true,
-        es2017: true,
-        node: true
-    },
-    overrides: [
-        {
-            files: ['*.svelte'],
-            parser: 'svelte-eslint-parser',
-            parserOptions: {
-                parser: '@typescript-eslint/parser'
-            }
-        }
-    ]
-}
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

app/.prettierrc

@@ -1,12 +1,13 @@
 {
     "useTabs": false,
     "singleQuote": true,
-    "tabWidth": 4,
+    "tabWidth": 2,
     "trailingComma": "none",
     "arrowParens": "avoid",
     "experimentalTernaries": true,
     "printWidth": 100,
     "semi": false,
+    "svelteBracketNewLine": false,
     "plugins": ["prettier-plugin-svelte"],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

app/.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-    "recommendations": [
-        "svelte.svelte-vscode",
-        "bradlc.vscode-tailwindcss",
-        "esbenp.prettier-vscode"
-    ]
+	"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"]
 }

app/env.d.ts

@@ -1,8 +1,8 @@
-declare module 'app-env' {
-    interface ENV {
-        VITE_USE_HOST_NAME: boolean
-    }
+declare module "app-env" {
+  interface ENV {
+    VITE_USE_HOST_NAME: boolean;
+  }
 
-    const appEnv: ENV
-    export default appEnv
+  const appEnv: ENV;
+  export default appEnv;
 }

app/package.json

@@ -1,65 +1,65 @@
 {
-    "name": "spot_micro_controller",
-    "version": "0.0.1",
-    "private": true,
-    "scripts": {
-        "dev": "vite dev --host",
-        "build": "vite build",
-        "build:embedded": "cross-env VITE_USE_HOST_NAME=true vite build",
-        "preview": "vite preview",
-        "test": "pnpm run test:integration && pnpm run test:unit",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write .",
-        "test:integration": "playwright test",
-        "test:unit": "vitest"
-    },
-    "devDependencies": {
-        "@iconify-json/mdi": "^1.2.3",
-        "@iconify-json/tabler": "^1.2.23",
-        "@playwright/test": "^1.56.0",
-        "@sveltejs/adapter-static": "^3.0.10",
-        "@sveltejs/kit": "^2.46.4",
-        "@sveltejs/vite-plugin-svelte": "^6.2.1",
-        "@types/eslint": "^9.6.1",
-        "@types/three": "^0.180.0",
-        "@typescript-eslint/eslint-plugin": "^8.46.0",
-        "@typescript-eslint/parser": "^8.46.0",
-        "autoprefixer": "^10.4.21",
-        "eslint": "^9.37.0",
-        "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-svelte": "^3.12.4",
-        "jsdom": "^27.0.0",
-        "prettier": "^3.6.2",
-        "prettier-plugin-svelte": "^3.4.0",
-        "svelte": "^5.39.11",
-        "svelte-check": "^4.3.3",
-        "svelte-focus-trap": "^1.2.0",
-        "tailwindcss": "^4.1.14",
-        "tslib": "^2.8.1",
-        "typescript": "^5.9.3",
-        "unplugin-icons": "^22.4.2",
-        "vite": "^7.1.9",
-        "vitest": "^3.2.4"
-    },
-    "type": "module",
-    "dependencies": {
-        "@msgpack/msgpack": "^3.1.2",
-        "@niku/vite-env-caster": "^1.1.2",
-        "@sveltejs/adapter-auto": "^6.1.1",
-        "@tailwindcss/vite": "^4.1.14",
-        "chart.js": "^4.5.0",
-        "compare-versions": "^6.1.1",
-        "cross-env": "^10.1.0",
-        "daisyui": "^5.2.0",
-        "nipplejs": "^0.10.2",
-        "svelte-dnd-list": "^0.1.8",
-        "svelte-modals": "^2.0.1",
-        "three": "^0.180.0",
-        "urdf-loader": "^0.12.6",
-        "uzip": "^0.20201231.0",
-        "xacro-parser": "^0.3.10"
-    },
-    "packageManager": "pnpm@9.3.0"
+  "name": "spot_micro_controller",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev --host",
+    "build": "vite build",
+    "build:embedded": "cross-env VITE_USE_HOST_NAME=true vite build",
+    "preview": "vite preview",
+    "test": "pnpm run test:integration && pnpm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  },
+  "devDependencies": {
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/tabler": "^1.1.109",
+    "@playwright/test": "^1.49.1",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@types/eslint": "^8.56.0",
+    "@types/three": "^0.162.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.45.1",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.2.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-focus-trap": "^1.2.0",
+    "tailwindcss": "^4.0.12",
+    "tslib": "^2.6.1",
+    "typescript": "^5.5.0",
+    "unplugin-icons": "^0.18.5",
+    "vite": "^6.2.1",
+    "vitest": "^1.2.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@msgpack/msgpack": "^3.1.2",
+    "@niku/vite-env-caster": "^1.0.2",
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.12",
+    "chart.js": "^4.4.2",
+    "compare-versions": "^6.1.0",
+    "cross-env": "^7.0.3",
+    "daisyui": "^5.0.0",
+    "nipplejs": "^0.10.1",
+    "svelte-dnd-list": "^0.1.8",
+    "svelte-modals": "^2.0.0",
+    "three": "^0.162.0",
+    "urdf-loader": "^0.12.1",
+    "uzip": "^0.20201231.0",
+    "xacro-parser": "^0.3.9"
+  },
+  "packageManager": "pnpm@9.3.0"
 }

app/playwright.config.ts

@@ -1,12 +1,12 @@
-import type { PlaywrightTestConfig } from '@playwright/test'
+import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
-    webServer: {
-        command: 'pnpm run build && pnpm run preview',
-        port: 4173
-    },
-    testDir: 'tests/integration',
-    testMatch: /(.+\.)?(test|spec)\.[jt]s/
-}
+	webServer: {
+		command: 'pnpm run build && pnpm run preview',
+		port: 4173
+	},
+	testDir: 'tests/integration',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
 
-export default config
+export default config;

app/src/app.css

@@ -23,14 +23,6 @@
     --base-content: oklch(0.3 0.012 256);
 }
 
-button {
-    cursor: pointer;
-}
-
-button:disabled {
-    cursor: not-allowed;
-}
-
 #nipple_0_0,
 #nipple_1_1 {
     z-index: 10 !important;

app/src/app.d.ts

@@ -1,13 +1,13 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
-    namespace App {
-        // interface Error {}
-        // interface Locals {}
-        // interface PageData {}
-        // interface PageState {}
-        // interface Platform {}
-    }
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
 }
 
-export {}
+export {};

app/src/app.html

@@ -1,17 +1,14 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="icon" href="%sveltekit.assets%/logo512.png" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
-        />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="mobile-web-app-capable" content="yes" />
-        %sveltekit.head%
-    </head>
-    <body data-sveltekit-preload-data="hover">
-        <div style="display: contents">%sveltekit.body%</div>
-    </body>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/logo512.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="mobile-web-app-capable" content="yes" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
 </html>

app/src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});

app/src/lib/api.ts

@@ -1,22 +1,22 @@
-import { get } from 'svelte/store'
-import { Err, Ok, type Result } from './utilities'
-import { apiLocation } from './stores'
+import { get } from 'svelte/store';
+import { Err, Ok, type Result } from './utilities';
+import { location } from './stores';
 
-export const api = {
-    get<TResponse>(endpoint: string, params?: RequestInit) {
-        return sendRequest<TResponse>(endpoint, 'GET', null, params)
-    },
+export namespace api {
+    export function get<TResponse>(endpoint: string, params?: RequestInit) {
+        return sendRequest<TResponse>(endpoint, 'GET', null, params);
+    }
 
-    post<TResponse>(endpoint: string, data?: unknown) {
-        return sendRequest<TResponse>(endpoint, 'POST', data)
-    },
+    export function post<TResponse>(endpoint: string, data?: unknown) {
+        return sendRequest<TResponse>(endpoint, 'POST', data);
+    }
 
-    put<TResponse>(endpoint: string, data?: unknown) {
-        return sendRequest<TResponse>(endpoint, 'PUT', data)
-    },
+    export function put<TResponse>(endpoint: string, data?: unknown) {
+        return sendRequest<TResponse>(endpoint, 'PUT', data);
+    }
 
-    remove<TResponse>(endpoint: string) {
-        return sendRequest<TResponse>(endpoint, 'DELETE')
+    export function remove<TResponse>(endpoint: string) {
+        return sendRequest<TResponse>(endpoint, 'DELETE');
     }
 }
 
@@ -26,8 +26,8 @@ async function sendRequest<TResponse>(
     data?: unknown,
     params?: RequestInit
 ): Promise<Result<TResponse, Error>> {
-    endpoint = resolveUrl(endpoint)
-    const body = data !== null && typeof data !== 'undefined' ? JSON.stringify(data) : undefined
+    endpoint = resolveUrl(endpoint);
+    const body = data !== null && typeof data !== 'undefined' ? JSON.stringify(data) : undefined;
 
     const request = {
         ...params,
@@ -38,42 +38,43 @@ async function sendRequest<TResponse>(
             Authorization: 'Basic',
             'Content-Type': 'application/json'
         }
-    }
+    };
 
-    let response
+    let response;
 
     try {
-        response = await fetch(endpoint, request)
-    } catch {
-        return Err.new(new Error(), 'An error has occurred')
+        response = await fetch(endpoint, request);
+    } catch (error) {
+        return Err.new(new Error(), 'An error has occurred');
     }
 
-    const isResponseOk = response.status >= 200 && response.status < 400
+    const isResponseOk = response.status >= 200 && response.status < 400;
     if (!isResponseOk) {
         if (response.status === 401) {
-            return Err.new(new ApiError(response), 'User was not authorized')
+            return Err.new(new ApiError(response), 'User was not authorized');
         }
-        return Err.new(new ApiError(response), 'An error has occurred')
+        return Err.new(new ApiError(response), 'An error has occurred');
     }
 
-    const contentType = response.headers.get('Content-Type') ?? response.headers.get('Content-Type')
+    const contentType =
+        response.headers.get('Content-Type') ?? response.headers.get('Content-Type');
     if (contentType && contentType.includes('application/json')) {
-        const data = await response.json()
-        return Ok.new(data as TResponse)
+        const data = await response.json();
+        return Ok.new(data as TResponse);
     } else {
         // Handle empty object as response
-        return Ok.new(null as TResponse)
+        return Ok.new(null as TResponse);
     }
 }
 
 function resolveUrl(url: string): string {
-    if (url.startsWith('http') || !get(apiLocation)) return url
-    const protocol = window.location.protocol
-    return `${protocol}//${get(apiLocation)}${url.startsWith('/') ? '' : '/'}${url}`
+    if (url.startsWith('http') || !get(location)) return url;
+    const protocol = window.location.protocol;
+    return `${protocol}//${get(location)}${url.startsWith('/') ? '' : '/'}${url}`;
 }
 
 export class ApiError extends Error {
     constructor(public readonly response: Response) {
-        super(`${response.status}`)
+        super(`${response.status}`);
     }
 }

app/src/lib/components/Collapsible.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-    import { slide } from 'svelte/transition'
-    import { cubicOut } from 'svelte/easing'
-    import { Down } from './icons'
+    import { slide } from 'svelte/transition';
+    import { cubicOut } from 'svelte/easing';
+    import { Down } from './icons';
 
     function openCollapsible() {
-        open = !open
+        open = !open;
         if (open) {
-            opened()
+            opened();
         } else {
-            closed()
+            closed();
         }
     }
 
-    let { icon, title, children, open, opened, closed, class: klass } = $props()
+    let { icon, title, children, open, opened, closed, class: klass } = $props();
 </script>
 
 <div class="{klass} relative grid w-full max-w-2xl self-center overflow-hidden">

app/src/lib/components/ConfirmDialog.svelte

@@ -1,48 +1,43 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap'
-    import { fly } from 'svelte/transition'
-    import { Cancel, Check } from '$lib/components/icons'
-    import { modals, exitBeforeEnter, type ModalProps } from 'svelte-modals'
+  import { focusTrap } from 'svelte-focus-trap'
+  import { fly } from 'svelte/transition'
+  import { Cancel, Check } from '$lib/components/icons'
+  import { modals, exitBeforeEnter, type ModalProps } from 'svelte-modals'
 
-    let {
-        isOpen,
-        title,
-        message,
-        onConfirm,
-        labels = {
-            cancel: { label: 'Cancel', icon: Cancel },
-            confirm: { label: 'OK', icon: Check }
-        }
-    }: ModalProps = $props()
+  let {
+    isOpen,
+    title,
+    message,
+    onConfirm,
+    labels = {
+      cancel: { label: 'Cancel', icon: Cancel },
+      confirm: { label: 'OK', icon: Check }
+    }
+  }: ModalProps = $props()
 </script>
 
 {#if isOpen}
-    {@const SvelteComponent = labels?.confirm.icon}
+  {@const SvelteComponent = labels?.confirm.icon}
+  <div
+    role="dialog"
+    class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+    transition:fly={{ y: 50 }}
+    use:exitBeforeEnter
+    use:focusTrap>
     <div
-        role="dialog"
-        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-        transition:fly={{ y: 50 }}
-        use:exitBeforeEnter
-        use:focusTrap
-    >
-        <div
-            class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
-        >
-            <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-            <div class="divider my-2"></div>
-            <p class="text-base-content mb-1 text-start">{message}</p>
-            <div class="divider my-2"></div>
-            <div class="flex justify-end gap-2">
-                <button
-                    class="btn btn-error inline-flex items-center"
-                    onclick={() => modals.close()}
-                >
-                    <labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
-                </button>
-                <button class="btn btn-primary inline-flex items-center" onclick={onConfirm}>
-                    <SvelteComponent class="mr-2 h-5 w-5" /><span>{labels?.confirm.label}</span>
-                </button>
-            </div>
-        </div>
+      class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
+      <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
+      <div class="divider my-2"></div>
+      <p class="text-base-content mb-1 text-start">{message}</p>
+      <div class="divider my-2"></div>
+      <div class="flex justify-end gap-2">
+        <button class="btn btn-error inline-flex items-center" onclick={() => modals.close()}>
+          <labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
+        </button>
+        <button class="btn btn-primary inline-flex items-center" onclick={onConfirm}>
+          <SvelteComponent class="mr-2 h-5 w-5" /><span>{labels?.confirm.label}</span>
+        </button>
+      </div>
     </div>
+  </div>
 {/if}

app/src/lib/components/GithubUpdateDialog.svelte

@@ -1,61 +1,61 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap'
-    import { fly } from 'svelte/transition'
-    import { telemetry } from '$lib/stores/telemetry'
-    import { Cancel } from './icons'
-    import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals'
+    import { focusTrap } from 'svelte-focus-trap';
+    import { fly } from 'svelte/transition';
+    import { telemetry } from '$lib/stores/telemetry';
+    import { Cancel } from './icons';
+    import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals';
 
     // provided by <Modals />
     interface Props {
-        isOpen: boolean
+        isOpen: boolean;
     }
 
-    let { isOpen }: Props = $props()
+    let { isOpen }: Props = $props();
 
-    let updating = $state(true)
+    let updating = $state(true);
 
-    let progress = $state(0)
+    let progress = $state(0);
     $effect(() => {
         if ($telemetry.download_ota.status == 'progress') {
-            progress = $telemetry.download_ota.progress
+            progress = $telemetry.download_ota.progress;
         }
-    })
+    });
 
     $effect(() => {
         if ($telemetry.download_ota.status == 'error') {
-            updating = false
+            updating = false;
         }
-    })
+    });
 
-    let message = $state('Preparing ...')
+    let message = $state('Preparing ...');
 
     $effect(() => {
         if ($telemetry.download_ota.status == 'progress') {
-            message = 'Downloading ...'
+            message = 'Downloading ...';
         } else if ($telemetry.download_ota.status == 'error') {
-            message = $telemetry.download_ota.error
+            message = $telemetry.download_ota.error;
         } else if ($telemetry.download_ota.status == 'finished') {
-            message = 'Restarting ...'
-            progress = 0
+            message = 'Restarting ...';
+            progress = 0;
             // Reload page after 5 sec
             setTimeout(() => {
-                modals.closeAll()
-                location.reload()
-            }, 5000)
+                modals.closeAll();
+                location.reload();
+            }, 5000);
         }
-    })
+    });
 
     onBeforeClose(() => {
         if (updating) {
             // prevents modal from closing
-            return false
+            return false;
         } else {
-            $telemetry.download_ota.status = 'idle'
-            $telemetry.download_ota.error = ''
-            $telemetry.download_ota.progress = 0
-            return true
+            $telemetry.download_ota.status = 'idle';
+            $telemetry.download_ota.error = '';
+            $telemetry.download_ota.progress = 0;
+            return true;
         }
-    })
+    });
 </script>
 
 {#if isOpen}
@@ -89,8 +89,8 @@
                     class="btn btn-warning text-warning-content inline-flex flex-none items-center"
                     disabled={updating}
                     onclick={() => {
-                        modals.closeAll()
-                        location.reload()
+                        modals.closeAll();
+                        location.reload();
                     }}
                 >
                     <Cancel class="mr-2 h-5 w-5" /><span>Close</span></button

app/src/lib/components/InfoDialog.svelte

@@ -1,43 +1,40 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap'
-    import { fly } from 'svelte/transition'
-    import { Check } from './icons'
-    import { exitBeforeEnter, type ModalProps } from 'svelte-modals'
+  import { focusTrap } from 'svelte-focus-trap';
+  import { fly } from 'svelte/transition';
+  import { Check } from './icons';
+  import { exitBeforeEnter, type ModalProps } from 'svelte-modals';
 
-    let {
-        isOpen,
-        title,
-        message,
-        onDismiss,
-        labels = {
-            dismiss: { label: 'Dismiss', icon: Check }
-        }
-    }: ModalProps = $props()
+  let {
+    isOpen,
+    title,
+    message,
+    onDismiss,
+    labels = {
+      dismiss: { label: 'Dismiss', icon: Check },
+    },
+  }: ModalProps = $props();
 </script>
 
 {#if isOpen}
+  <div
+    role="dialog"
+    class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+    transition:fly={{ y: 50 }}
+    use:exitBeforeEnter
+    use:focusTrap>
     <div
-        role="dialog"
-        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-        transition:fly={{ y: 50 }}
-        use:exitBeforeEnter
-        use:focusTrap
-    >
-        <div
-            class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
-        >
-            <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-            <div class="divider my-2"></div>
-            <p class="text-base-content mb-1 text-start">{message}</p>
-            <div class="divider my-2"></div>
-            <div class="flex justify-end gap-2">
-                <button
-                    class="btn btn-warning text-warning-content inline-flex items-center"
-                    onclick={onDismiss}
-                >
-                    <labels.dismiss.icon class="mr-2 h-5 w-5" /><span>{labels.dismiss.label}</span>
-                </button>
-            </div>
-        </div>
+      class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
+      <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
+      <div class="divider my-2"></div>
+      <p class="text-base-content mb-1 text-start">{message}</p>
+      <div class="divider my-2"></div>
+      <div class="flex justify-end gap-2">
+        <button
+          class="btn btn-warning text-warning-content inline-flex items-center"
+          onclick={onDismiss}>
+          <labels.dismiss.icon class="mr-2 h-5 w-5" /><span>{labels.dismiss.label}</span>
+        </button>
+      </div>
     </div>
+  </div>
 {/if}

app/src/lib/components/OrientationIndicator.svelte

@@ -1,78 +1,78 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte'
-    import * as THREE from 'three'
-    import { imu } from '$lib/stores/imu'
-    import SceneBuilder from '$lib/sceneBuilder'
+  import { onMount, onDestroy } from 'svelte';
+  import * as THREE from 'three';
+  import { imu } from '$lib/stores/imu';
+  import SceneBuilder from '$lib/sceneBuilder';
 
-    let canvas: HTMLCanvasElement
-    let sceneBuilder: SceneBuilder
-    let cube: THREE.Mesh
-    let targetRotation = new THREE.Euler()
-    let lastUpdateTime = 0
-    const LERP_SPEED = 5 // rotations per second
+  let canvas: HTMLCanvasElement;
+  let sceneBuilder: SceneBuilder;
+  let cube: THREE.Mesh;
+  let targetRotation = new THREE.Euler();
+  let lastUpdateTime = 0;
+  const LERP_SPEED = 5; // rotations per second
 
-    const initThreeJS = () => {
-        sceneBuilder = new SceneBuilder()
-            .addRenderer({ canvas: canvas, antialias: true, alpha: true })
-            .addPerspectiveCamera({ x: 2, y: 0, z: 2 })
-            .addOrbitControls(1, 10, false)
-            .addAmbientLight({ color: 0x404040, intensity: 0.5 })
-            .addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
-            .fillParent()
+  const initThreeJS = () => {
+    sceneBuilder = new SceneBuilder()
+      .addRenderer({ canvas: canvas, antialias: true, alpha: true })
+      .addPerspectiveCamera({ x: 2, y: 0, z: 2 })
+      .addOrbitControls(1, 10, false)
+      .addAmbientLight({ color: 0x404040, intensity: 0.5 })
+      .addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
+      .fillParent();
 
-        const geometry = new THREE.BoxGeometry(1, 1, 1)
-        const material = new THREE.MeshPhongMaterial({
-            color: 0x00ff00,
-            transparent: true,
-            opacity: 0.8
-        })
-        cube = new THREE.Mesh(geometry, material)
-        sceneBuilder.scene.add(cube)
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshPhongMaterial({
+      color: 0x00ff00,
+      transparent: true,
+      opacity: 0.8,
+    });
+    cube = new THREE.Mesh(geometry, material);
+    sceneBuilder.scene.add(cube);
 
-        sceneBuilder.addRenderCb(() => {
-            if (!cube) return
-            const currentTime = performance.now()
-            const deltaTime = (currentTime - lastUpdateTime) / 1000 // convert to seconds
-            lastUpdateTime = currentTime
+    sceneBuilder.addRenderCb(() => {
+      if (!cube) return;
+      const currentTime = performance.now();
+      const deltaTime = (currentTime - lastUpdateTime) / 1000; // convert to seconds
+      lastUpdateTime = currentTime;
 
-            const lerpFactor = Math.min(1, LERP_SPEED * deltaTime)
-            cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor)
-            cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor)
-            cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor)
-        })
+      const lerpFactor = Math.min(1, LERP_SPEED * deltaTime);
+      cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor);
+      cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor);
+      cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor);
+    });
 
-        sceneBuilder.startRenderLoop()
+    sceneBuilder.startRenderLoop();
+  };
+
+  const updateOrientation = () => {
+    if (!cube) return;
+
+    const y = -$imu.x[$imu.x.length - 1] || 0;
+    const x = $imu.y[$imu.y.length - 1] || 0;
+    const z = -$imu.z[$imu.z.length - 1] || 0;
+
+    targetRotation.set(
+      THREE.MathUtils.degToRad(x),
+      THREE.MathUtils.degToRad(y),
+      THREE.MathUtils.degToRad(z)
+    );
+  };
+
+  onMount(() => {
+    initThreeJS();
+  });
+
+  onDestroy(() => {
+    sceneBuilder?.renderer?.dispose();
+  });
+
+  $effect(() => {
+    if ($imu) {
+      updateOrientation();
     }
-
-    const updateOrientation = () => {
-        if (!cube) return
-
-        const y = -$imu.x[$imu.x.length - 1] || 0
-        const x = $imu.y[$imu.y.length - 1] || 0
-        const z = -$imu.z[$imu.z.length - 1] || 0
-
-        targetRotation.set(
-            THREE.MathUtils.degToRad(x),
-            THREE.MathUtils.degToRad(y),
-            THREE.MathUtils.degToRad(z)
-        )
-    }
-
-    onMount(() => {
-        initThreeJS()
-    })
-
-    onDestroy(() => {
-        sceneBuilder?.renderer?.dispose()
-    })
-
-    $effect(() => {
-        if ($imu) {
-            updateOrientation()
-        }
-    })
+  });
 </script>
 
 <div class="h-60 w-60 border-2 border-base-300 rounded-md">
-    <canvas class="w-full h-full" bind:this={canvas}></canvas>
+  <canvas class="w-full h-full" bind:this={canvas}></canvas>
 </div>

app/src/lib/components/SettingsCard.svelte

@@ -1,76 +1,60 @@
 <script lang="ts">
-    import { slide } from 'svelte/transition'
-    import { cubicOut } from 'svelte/easing'
-    import { Down } from './icons'
-    interface Props {
-        open?: boolean
-        collapsible?: boolean
-        icon?: import('svelte').Snippet
-        title?: import('svelte').Snippet
-        children?: import('svelte').Snippet
-        right?: import('svelte').Snippet
-    }
+  import { slide } from 'svelte/transition'
+  import { cubicOut } from 'svelte/easing'
+  import { Down } from './icons'
+  interface Props {
+    open?: boolean
+    collapsible?: boolean
+    icon?: import('svelte').Snippet
+    title?: import('svelte').Snippet
+    children?: import('svelte').Snippet
+    right?: import('svelte').Snippet
+  }
 
-    let {
-        open = $bindable(true),
-        collapsible = true,
-        icon,
-        title,
-        children,
-        right
-    }: Props = $props()
+  let { open = $bindable(true), collapsible = true, icon, title, children, right }: Props = $props()
 </script>
 
 {#if collapsible}
+  <div
+    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
     <div
-        class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
-    >
-        <div
-            class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
-        >
-            <span class="inline-flex items-baseline">
-                {@render icon?.()}
-                {@render title?.()}
-            </span>
-            <button
-                class="btn btn-circle btn-ghost btn-sm"
-                onclick={() => {
-                    open = !open
-                }}
-            >
-                <Down
-                    class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
-                        open
-                    ) ?
-                        'rotate-180'
-                    :   ''}"
-                />
-            </button>
-        </div>
-        {#if open}
-            <div
-                class="flex flex-col gap-2 p-4 pt-0"
-                transition:slide|local={{ duration: 300, easing: cubicOut }}
-            >
-                {@render children?.()}
-            </div>
-        {/if}
+      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
+      <span class="inline-flex items-baseline">
+        {@render icon?.()}
+        {@render title?.()}
+      </span>
+      <button
+        class="btn btn-circle btn-ghost btn-sm"
+        onclick={() => {
+          open = !open
+        }}>
+        <Down
+          class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open ?
+            'rotate-180'
+          : ''}" />
+      </button>
     </div>
+    {#if open}
+      <div
+        class="flex flex-col gap-2 p-4 pt-0"
+        transition:slide|local={{ duration: 300, easing: cubicOut }}>
+        {@render children?.()}
+      </div>
+    {/if}
+  </div>
 {:else}
+  <div
+    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
     <div
-        class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
-    >
-        <div
-            class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
-        >
-            <span class="inline-flex items-baseline">
-                {@render icon?.()}
-                {@render title?.()}
-            </span>
-            {@render right?.()}
-        </div>
-        <div class="flex flex-col gap-2 p-4 pt-0">
-            {@render children?.()}
-        </div>
+      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
+      <span class="inline-flex items-baseline">
+        {@render icon?.()}
+        {@render title?.()}
+      </span>
+      {@render right?.()}
     </div>
+    <div class="flex flex-col gap-2 p-4 pt-0">
+      {@render children?.()}
+    </div>
+  </div>
 {/if}

app/src/lib/components/Spinner.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { Loader } from './icons'
+	import { Loader } from "./icons";
+
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center p-6">
-    <Loader class="text-primary h-14 w-auto animate-spin stroke-2" />
-    <p class="text-xl">Loading...</p>
+	<Loader class="text-primary h-14 w-auto animate-spin stroke-2" />
+	<p class="text-xl">Loading...</p>
 </div>

app/src/lib/components/StatusItem.svelte

@@ -1,47 +1,45 @@
 <script lang="ts">
-    import type { ComponentType } from 'svelte'
+  type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
 
-    type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
+  const {
+    icon,
+    title,
+    description = '',
+    variant = 'primary',
+    class: klass = '',
+    children = null
+  } = $props<{
+    icon?: any
+    title: string
+    description?: string | number
+    variant?: Variant
+    class?: string
+    children?: () => any
+  }>()
 
-    const {
-        icon,
-        title,
-        description = '',
-        variant = 'primary',
-        class: klass = '',
-        children = null
-    } = $props<{
-        icon?: ComponentType
-        title: string
-        description?: string | number
-        variant?: Variant
-        class?: string
-        children?: () => ComponentType
-    }>()
+  const Icon = $derived(icon)
 
-    const Icon = $derived(icon)
+  const variants: Record<Variant, [string, string]> = {
+    success: ['bg-success', 'text-success-content'],
+    error: ['bg-error', 'text-error-content'],
+    primary: ['bg-primary', 'text-primary-content'],
+    info: ['bg-info', 'text-info-content'],
+    warning: ['bg-warning', 'text-warning-content']
+  }
 
-    const variants: Record<Variant, [string, string]> = {
-        success: ['bg-success', 'text-success-content'],
-        error: ['bg-error', 'text-error-content'],
-        primary: ['bg-primary', 'text-primary-content'],
-        info: ['bg-info', 'text-info-content'],
-        warning: ['bg-warning', 'text-warning-content']
-    }
-
-    const variantKey: Variant = (variant as Variant) in variants ? (variant as Variant) : 'primary'
-    const [bgColor, textColor] = variants[variantKey]
+  const variantKey: Variant = (variant as Variant) in variants ? (variant as Variant) : 'primary'
+  const [bgColor, textColor] = variants[variantKey]
 </script>
 
 <div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2 {klass}">
-    {#if icon}
-        <div class="mask mask-hexagon {bgColor} h-auto w-10 flex-none">
-            <Icon class="{textColor} h-auto w-full scale-75" />
-        </div>
-    {/if}
-    <div class="grow">
-        <div class="font-bold">{title}</div>
-        <div class="text-sm opacity-75 grow">{description}</div>
+  {#if icon}
+    <div class="mask mask-hexagon {bgColor} h-auto w-10 flex-none">
+      <Icon class="{textColor} h-auto w-full scale-75" />
     </div>
-    {@render children?.()}
+  {/if}
+  <div class="grow">
+    <div class="font-bold">{title}</div>
+    <div class="text-sm opacity-75 grow">{description}</div>
+  </div>
+  {@render children?.()}
 </div>

app/src/lib/components/Stream.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte'
-    import { apiLocation } from '$lib/stores'
+    import { onDestroy } from 'svelte';
+    import { location } from '$lib/stores';
 
-    let source = $state(`${$apiLocation}/api/camera/stream`)
+    let source = $state(`${$location}/api/camera/stream`);
 
-    onDestroy(() => (source = '#'))
+    onDestroy(() => (source = '#'));
 </script>
 
 <div class="w-full h-full">

app/src/lib/components/Toast.svelte

@@ -1,37 +1,35 @@
 <script>
-    import { flip } from 'svelte/animate'
-    import { fly } from 'svelte/transition'
-    import { notifications } from '$lib/components/toasts/notifications'
-    import { error, info, success, warning } from './icons'
+	import { flip } from 'svelte/animate';
+	import { fly } from 'svelte/transition';
+	import { notifications } from '$lib/components/toasts/notifications';
+	import { error, info, success, warning } from './icons';
 
-    /** @type {{theme?: any, icon?: any}} */
-    let {
-        theme = {
-            error: 'alert-error',
-            success: 'alert-success',
-            warning: 'alert-warning',
-            info: 'alert-info'
-        },
-        icon = {
-            error: error,
-            success: success,
-            warning: warning,
-            info: info
-        }
-    } = $props()
+
+	/** @type {{theme?: any, icon?: any}} */
+	let { theme = {
+		error: 'alert-error',
+		success: 'alert-success',
+		warning: 'alert-warning',
+		info: 'alert-info'
+	}, icon = {
+		error: error,
+		success: success,
+		warning: warning,
+		info: info
+	} } = $props();
 </script>
 
 <div class="toast toast-end mr-4">
-    {#each $notifications as notification (notification.id)}
-        {@const SvelteComponent = icon[notification.type]}
-        <div
-            animate:flip={{ duration: 400 }}
-            class="alert animate-none {theme[notification.type]}"
-            in:fly={{ y: 100, duration: 400 }}
-            out:fly={{ x: 100, duration: 400 }}
-        >
-            <SvelteComponent class="h-6 w-6 shrink-0" />
-            <span>{notification.message}</span>
-        </div>
-    {/each}
+	{#each $notifications as notification (notification.id)}
+		{@const SvelteComponent = icon[notification.type]}
+		<div
+			animate:flip={{ duration: 400 }}
+			class="alert animate-none {theme[notification.type]}"
+			in:fly={{ y: 100, duration: 400 }}
+			out:fly={{ x: 100, duration: 400 }}
+		>
+			<SvelteComponent class="h-6 w-6 shrink-0" />
+			<span>{notification.message}</span>
+		</div>
+	{/each}
 </div>

app/src/lib/components/Visualization.svelte

@@ -1,338 +1,332 @@
 <script lang="ts">
-    import { onDestroy, onMount } from 'svelte'
-    import {
-        Mesh,
-        MeshBasicMaterial,
-        type Object3D,
-        SphereGeometry,
-        Vector3,
-        type Object3DEventMap,
-        Color
-    } from 'three'
-    import {
-        ModesEnum,
-        kinematicData,
-        mode,
-        model,
-        outControllerData,
-        servoAnglesOut,
-        servoAngles,
-        mpu,
-        jointNames,
-        currentKinematic,
-        walkGait,
-        walkGaitToMode
-    } from '$lib/stores'
-    import { populateModelCache, throttler, getToeWorldPositions } from '$lib/utilities'
-    import SceneBuilder from '$lib/sceneBuilder'
-    import { lerp, degToRad } from 'three/src/math/MathUtils'
-    import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
-    import { type body_state_t } from '$lib/kinematic'
-    import { BezierState, CalibrationState, IdleState, RestState, StandState } from '$lib/gait'
-    import { radToDeg } from 'three/src/math/MathUtils.js'
-    import type { URDFRobot } from 'urdf-loader'
-    import { get } from 'svelte/store'
+  import { onDestroy, onMount } from 'svelte'
+  import {
+    BufferGeometry,
+    Line,
+    LineBasicMaterial,
+    Mesh,
+    MeshBasicMaterial,
+    type Object3D,
+    SphereGeometry,
+    Vector3,
+    type NormalBufferAttributes,
+    type Object3DEventMap
+  } from 'three'
+  import {
+    ModesEnum,
+    kinematicData,
+    mode,
+    model,
+    outControllerData,
+    servoAnglesOut,
+    servoAngles,
+    mpu,
+    jointNames,
+    currentKinematic,
+    walkGait,
+    walkGaits,
+    walkGaitToMode
+  } from '$lib/stores'
+  import {
+    extractFootColor,
+    populateModelCache,
+    throttler,
+    getToeWorldPositions
+  } from '$lib/utilities'
+  import SceneBuilder from '$lib/sceneBuilder'
+  import { lerp, degToRad } from 'three/src/math/MathUtils'
+  import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
+  import { type body_state_t } from '$lib/kinematic'
+  import { BezierState, CalibrationState, IdleState, RestState, StandState } from '$lib/gait'
+  import { radToDeg } from 'three/src/math/MathUtils.js'
+  import type { URDFRobot } from 'urdf-loader'
+  import { get } from 'svelte/store'
 
-    interface Props {
-        defaultColor?: string | null
-        orbit?: boolean
-        panel?: boolean
-        debug?: boolean
-        ground?: boolean
+  interface Props {
+    sky?: boolean
+    orbit?: boolean
+    panel?: boolean
+    debug?: boolean
+    ground?: boolean
+  }
+
+  let { sky = true, orbit = false, panel = true, debug = false, ground = true }: Props = $props()
+
+  let sceneManager = $state(new SceneBuilder())
+  let canvas: HTMLCanvasElement
+
+  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>[] = []
+  let target: Object3D<Object3DEventMap>
+
+  let target_position = { x: 0, z: 0, yaw: 0 }
+
+  let kinematic = get(currentKinematic)
+
+  let planners = {
+    [ModesEnum.Deactivated]: new IdleState(),
+    [ModesEnum.Idle]: new IdleState(),
+    [ModesEnum.Calibration]: new CalibrationState(),
+    [ModesEnum.Rest]: new RestState(),
+    [ModesEnum.Stand]: new StandState(),
+    [ModesEnum.Walk]: new BezierState()
+  }
+  let lastTick = performance.now()
+
+  const dir = [1, -1, -1, -1, -1, -1, 1, -1, -1, -1, -1, -1]
+
+  let body_state = {
+    omega: 0,
+    phi: 0,
+    psi: 0,
+    xm: 0,
+    ym: 0.5,
+    zm: 0,
+    feet: kinematic.getDefaultFeetPos()
+  }
+
+  let settings = {
+    'Internal kinematic': true,
+    'Robot transform controls': false,
+    'Auto orient robot': true,
+    'Trace feet': debug,
+    'Target position': false,
+    'Trace points': 30,
+    'Fix camera on robot': true,
+    'Smooth motion': true,
+    omega: 0,
+    phi: 0,
+    psi: 0,
+    xm: 0,
+    ym: 0.7,
+    zm: 0,
+    Background: 'black'
+  }
+
+  onMount(async () => {
+    await populateModelCache()
+    await createScene()
+    servoAngles.subscribe(updateAnglesFromStore)
+    walkGait.subscribe(gait => planners[ModesEnum.Walk].set_mode(walkGaitToMode(gait)))
+    if (panel) createPanel()
+  })
+
+  onDestroy(() => {
+    canvas.remove()
+    gui_panel?.destroy()
+  })
+
+  const updateAnglesFromStore = (angles: number[]) => {
+    if (sceneManager.isDragging) return
+    if (settings['Internal kinematic']) return
+    modelTargetAngles = angles
+  }
+
+  const createPanel = () => {
+    gui_panel = new GUI({ width: 310 })
+    gui_panel.close()
+    gui_panel.domElement.id = 'three-gui-panel'
+
+    const general = gui_panel.addFolder('General')
+    general.add(settings, 'Internal kinematic')
+    general.add(settings, 'Robot transform controls')
+    general.add(settings, 'Auto orient robot')
+
+    const kinematic = gui_panel.addFolder('Kinematics')
+    kinematic.add(settings, 'omega', -20, 20).onChange(updateKinematicPosition).listen()
+    kinematic.add(settings, 'phi', -30, 30).onChange(updateKinematicPosition).listen()
+    kinematic.add(settings, 'psi', -20, 15).onChange(updateKinematicPosition).listen()
+    kinematic.add(settings, 'xm', -1, 1).onChange(updateKinematicPosition).listen()
+    kinematic.add(settings, 'ym', 0, 1).onChange(updateKinematicPosition).listen()
+    kinematic.add(settings, 'zm', -1.3, 1.3).onChange(updateKinematicPosition).listen()
+
+    const visibility = gui_panel.addFolder('Visualization')
+    visibility.add(settings, 'Trace feet')
+    visibility.add(settings, 'Trace points', 1, 1000, 1)
+    visibility.add(settings, 'Target position')
+    visibility.add(settings, 'Smooth motion')
+    visibility.addColor(settings, 'Background')
+  }
+
+  const updateKinematicPosition = () => {
+    kinematicData.set([
+      settings.omega,
+      settings.phi,
+      settings.psi,
+      settings.xm,
+      settings.ym,
+      settings.zm
+    ])
+  }
+
+  const updateAngles = (name: string, angle: number) => {
+    modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
+    Throttler.throttle(() => servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num))), 100)
+  }
+
+  const createScene = async () => {
+    sceneManager
+      .addRenderer({ antialias: true, canvas, alpha: true })
+      .addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
+      .addOrbitControls(2, 20, orbit)
+      .addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 3 })
+      .addAmbientLight({ color: 0xffffff, intensity: 0.5 })
+      .addFogExp2(0xcccccc, 0.015)
+      .addModel($model)
+      .addTransformControls(sceneManager.model)
+      .fillParent()
+      .addRenderCb(render)
+      .startRenderLoop()
+
+    if (ground) sceneManager.addGroundPlane()
+
+    const geometry = new SphereGeometry(0.1, 32, 16)
+    const material = new MeshBasicMaterial({ color: 0xffff00 })
+    target = new Mesh(geometry, material)
+    sceneManager.scene.add(target)
+
+    if (debug) {
+      sceneManager.addDragControl(updateAngles)
+    }
+    if (sky) sceneManager.addSky()
+
+    for (let i = 0; i < 4; i++) {
+      const geometry = new BufferGeometry()
+      const material = new LineBasicMaterial({ color: extractFootColor() })
+      const line = new Line(geometry, material)
+      trace_lines.push(geometry)
+      sceneManager.scene.add(line)
+    }
+  }
+
+  const renderTraceLines = (foot_positions: Vector3[]) => {
+    if (!settings['Trace feet']) {
+      if (!feet_trace.length) return
+      trace_lines.forEach((line, i) => line.setFromPoints(feet_trace[i].slice(-1)))
+      feet_trace = new Array(4).fill([])
+      return
     }
 
-    let {
-        defaultColor = '#0091ff',
-        orbit = false,
-        panel = true,
-        debug = false,
-        ground = true
-    }: Props = $props()
-
-    let sceneManager = $state(new SceneBuilder())
-    let canvas: HTMLCanvasElement
-
-    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 target: Object3D<Object3DEventMap>
-
-    let target_position = { x: 0, z: 0, yaw: 0 }
-
-    let kinematic = get(currentKinematic)
-
-    let planners = {
-        [ModesEnum.Deactivated]: new IdleState(),
-        [ModesEnum.Idle]: new IdleState(),
-        [ModesEnum.Calibration]: new CalibrationState(),
-        [ModesEnum.Rest]: new RestState(),
-        [ModesEnum.Stand]: new StandState(),
-        [ModesEnum.Walk]: new BezierState()
-    }
-    let lastTick = performance.now()
-
-    const dir = [1, -1, -1, -1, -1, -1, 1, -1, -1, -1, -1, -1]
-
-    let body_state = {
-        omega: 0,
-        phi: 0,
-        psi: 0,
-        xm: 0,
-        ym: 0.5,
-        zm: 0,
-        feet: kinematic.getDefaultFeetPos(),
-        cumulative_x: 0,
-        cumulative_y: 0,
-        cumulative_z: 0,
-        cumulative_roll: 0,
-        cumulative_pitch: 0,
-        cumulative_yaw: 0
-    }
-
-    let settings = {
-        'Internal kinematic': true,
-        'Robot transform controls': false,
-        'Auto orient robot': true,
-        'Trace feet': debug,
-        'Target position': false,
-        'Trace points': 30,
-        'Fix camera on robot': true,
-        'Smooth motion': true,
-        omega: 0,
-        phi: 0,
-        psi: 0,
-        xm: 0,
-        ym: 0.7,
-        zm: 0,
-        Background: defaultColor
-    }
-
-    onMount(async () => {
-        await populateModelCache()
-        await createScene()
-        servoAngles.subscribe(updateAnglesFromStore)
-        walkGait.subscribe(gait => planners[ModesEnum.Walk].set_mode(walkGaitToMode(gait)))
-        if (panel) createPanel()
+    trace_lines.forEach((line, i) => {
+      feet_trace[i].push(foot_positions[i])
+      feet_trace[i] = feet_trace[i].slice(-settings['Trace points'])
+      line.setFromPoints(feet_trace[i])
     })
+  }
 
-    onDestroy(() => {
-        canvas.remove()
-        gui_panel?.destroy()
-    })
-
-    const updateAnglesFromStore = (angles: number[]) => {
-        if (sceneManager.isDragging) return
-        if (settings['Internal kinematic']) return
-        modelTargetAngles = angles
+  const calculate_kinematics = () => {
+    if (sceneManager.isDragging || !settings['Internal kinematic']) return
+    const position: body_state_t = {
+      omega: settings.omega,
+      phi: settings.phi,
+      psi: settings.psi,
+      xm: settings.xm,
+      ym: settings.ym,
+      zm: settings.zm,
+      feet: body_state.feet
     }
 
-    const createPanel = () => {
-        gui_panel = new GUI({ width: 310 })
-        gui_panel.close()
-        gui_panel.domElement.id = 'three-gui-panel'
+    let new_angles = kinematic.calcIK(position).map((x, i) => radToDeg(x * dir[i]))
+    modelTargetAngles = new_angles
+  }
 
-        const general = gui_panel.addFolder('General')
-        general.add(settings, 'Internal kinematic')
-        general.add(settings, 'Robot transform controls')
-        general.add(settings, 'Auto orient robot')
+  const orient_robot = (robot: URDFRobot, toes: Vector3[]) => {
+    if (settings['Robot transform controls'] || !settings['Auto orient robot']) return
+    robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y))
 
-        const kinematic = gui_panel.addFolder('Kinematics')
-        kinematic.add(settings, 'omega', -20, 20).onChange(updateKinematicPosition).listen()
-        kinematic.add(settings, 'phi', -30, 30).onChange(updateKinematicPosition).listen()
-        kinematic.add(settings, 'psi', -20, 15).onChange(updateKinematicPosition).listen()
-        kinematic.add(settings, 'xm', -1, 1).onChange(updateKinematicPosition).listen()
-        kinematic.add(settings, 'ym', 0, 1).onChange(updateKinematicPosition).listen()
-        kinematic.add(settings, 'zm', -1.3, 1.3).onChange(updateKinematicPosition).listen()
+    robot.position.z = smooth(robot.position.z, -settings.xm, 0.1)
+    robot.position.x = smooth(robot.position.x, -settings.zm, 0.1)
 
-        const visibility = gui_panel.addFolder('Visualization')
-        visibility.add(settings, 'Trace feet')
-        visibility.add(settings, 'Trace points', 1, 1000, 1)
-        visibility.add(settings, 'Target position')
-        visibility.add(settings, 'Smooth motion')
-        visibility.addColor(settings, 'Background').onChange(setSceneBackground).listen()
+    robot.rotation.z = smooth(robot.rotation.z, degToRad(-settings.phi + $mpu.heading + 90), 0.1)
+    robot.rotation.y = smooth(robot.rotation.y, degToRad(settings.omega), 0.1)
+    robot.rotation.x = smooth(robot.rotation.x, degToRad(settings.psi - 90), 0.1)
+  }
+
+  const update_camera = (robot: URDFRobot) => {
+    if (!settings['Fix camera on robot']) return
+    sceneManager.orbit.target = robot.position.clone()
+  }
+
+  const smooth = (start: number, end: number, amount: number) => {
+    return settings['Smooth motion'] ? lerp(start, end, amount) : end
+  }
+
+  const update_gait = () => {
+    if (sceneManager.isDragging || !settings['Internal kinematic']) return
+    const controlData = get(outControllerData)
+    const data = {
+      lx: controlData[0],
+      ly: controlData[1],
+      rx: controlData[2],
+      ry: controlData[3],
+      h: controlData[4],
+      s: controlData[5],
+      s1: controlData[6]
+    }
+    body_state.ym = data.h
+
+    let planner = planners[get(mode)]
+    const delta = performance.now() - lastTick
+    lastTick = performance.now()
+
+    body_state = planner.step(body_state, data, delta)
+
+    settings.omega = body_state.omega
+    settings.phi = body_state.phi
+    settings.psi = body_state.psi
+    settings.xm = body_state.xm
+    settings.ym = body_state.ym
+    settings.zm = body_state.zm
+  }
+
+  const update_robot_position = (robot: URDFRobot) => {
+    if (!settings['Robot transform controls']) return
+    settings.omega = radToDeg(robot.rotation.y)
+    settings.phi = radToDeg(robot.rotation.z) + $mpu.heading - 90
+    settings.psi = radToDeg(robot.rotation.x) + 90
+    settings.xm = robot.position.z * 100
+    settings.zm = -robot.position.x * 100
+  }
+
+  const updateTargetPosition = () => {
+    target.visible = settings['Target position']
+    target.position.x = smooth(target.position.x, target_position.x, 0.5)
+    target.position.z = smooth(target.position.z, target_position.z, 0.5)
+  }
+
+  const render = () => {
+    const robot = sceneManager.model
+    if (!robot) return
+
+    const toes = getToeWorldPositions(robot)
+
+    renderTraceLines(toes)
+    update_camera(robot)
+    update_gait()
+    calculate_kinematics()
+    update_robot_position(robot)
+
+    sceneManager.transformControl.showX = settings['Robot transform controls']
+    sceneManager.transformControl.showY = settings['Robot transform controls']
+    sceneManager.transformControl.showZ = settings['Robot transform controls']
+
+    for (let i = 0; i < $jointNames.length; i++) {
+      currentModelAngles[i] = smooth(
+        (robot.joints[$jointNames[i]].angle as number) * (180 / Math.PI),
+        modelTargetAngles[i],
+        0.1
+      )
+      robot.joints[$jointNames[i]].setJointValue(degToRad(currentModelAngles[i]))
     }
 
-    const updateKinematicPosition = () => {
-        kinematicData.set([
-            settings.omega,
-            settings.phi,
-            settings.psi,
-            settings.xm,
-            settings.ym,
-            settings.zm
-        ])
-    }
-
-    const setSceneBackground = (c: string | null) => (sceneManager.scene.background = new Color(c!))
-
-    const updateAngles = (name: string, angle: number) => {
-        modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
-        Throttler.throttle(
-            () => servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num))),
-            100
-        )
-    }
-
-    const createScene = async () => {
-        sceneManager
-            .addRenderer({ antialias: true, canvas, alpha: true })
-            .addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
-            .addOrbitControls(2, 20, orbit)
-            .addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 3 })
-            .addAmbientLight({ color: 0xffffff, intensity: 0.5 })
-            .addFogExp2(0xcccccc, 0.015)
-            .addModel($model as URDFRobot)
-            .addTransformControls(sceneManager.model)
-            .fillParent()
-            .addRenderCb(render)
-            .startRenderLoop()
-
-        if (ground) sceneManager.addGroundPlane()
-
-        const geometry = new SphereGeometry(0.1, 32, 16)
-        const material = new MeshBasicMaterial({ color: 0xffff00 })
-        target = new Mesh(geometry, material)
-        sceneManager.scene.add(target)
-
-        if (debug) {
-            sceneManager.addDragControl(angles => {
-                Object.entries(angles).forEach(([name, angle]) => {
-                    updateAngles(name, angle)
-                })
-            })
-        }
-        if (defaultColor) setSceneBackground(settings['Background'] || defaultColor)
-    }
-
-    const calculate_kinematics = () => {
-        if (sceneManager.isDragging || !settings['Internal kinematic']) return
-        const position: body_state_t = {
-            omega: settings.omega,
-            phi: settings.phi,
-            psi: settings.psi,
-            xm: settings.xm,
-            ym: settings.ym,
-            zm: settings.zm,
-            feet: body_state.feet,
-            cumulative_x: body_state.cumulative_x,
-            cumulative_y: body_state.cumulative_y,
-            cumulative_z: body_state.cumulative_z,
-            cumulative_roll: body_state.cumulative_roll,
-            cumulative_pitch: body_state.cumulative_pitch,
-            cumulative_yaw: body_state.cumulative_yaw
-        }
-
-        let new_angles = kinematic.calcIK(position).map((x, i) => radToDeg(x * dir[i]))
-        modelTargetAngles = new_angles
-    }
-
-    const orient_robot = (robot: URDFRobot, toes: Vector3[]) => {
-        if (settings['Robot transform controls'] || !settings['Auto orient robot']) return
-        robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y))
-
-        const cumulativeYaw = body_state.cumulative_yaw
-
-        const cosYaw = Math.cos(cumulativeYaw)
-        const sinYaw = Math.sin(cumulativeYaw)
-        const rotatedXm = settings.xm * cosYaw - settings.zm * sinYaw
-        const rotatedZm = settings.xm * sinYaw + settings.zm * cosYaw
-
-        robot.position.x = smooth(robot.position.x, -rotatedZm - body_state.cumulative_z * 1.2, 0.1)
-        robot.position.z = smooth(robot.position.z, -rotatedXm - body_state.cumulative_x * 1.2, 0.1)
-
-        const pitch = degToRad(settings.psi - 90) + body_state.cumulative_pitch
-        const roll = degToRad(settings.omega) + body_state.cumulative_roll
-
-        robot.rotation.z = smooth(
-            robot.rotation.z,
-            degToRad(-settings.phi + $mpu.heading + 90) + cumulativeYaw,
-            0.1
-        )
-        robot.rotation.y = smooth(robot.rotation.y, roll, 0.1)
-        robot.rotation.x = smooth(robot.rotation.x, pitch, 0.1)
-    }
-
-    const update_camera = (robot: URDFRobot) => {
-        if (!settings['Fix camera on robot']) return
-        sceneManager.orbit.target = robot.position.clone()
-    }
-
-    const smooth = (start: number, end: number, amount: number) => {
-        return settings['Smooth motion'] ? lerp(start, end, amount) : end
-    }
-
-    const update_gait = () => {
-        if (sceneManager.isDragging || !settings['Internal kinematic']) return
-        const controlData = get(outControllerData)
-        const data = {
-            lx: controlData[0],
-            ly: controlData[1],
-            rx: controlData[2],
-            ry: controlData[3],
-            h: controlData[4],
-            s: controlData[5],
-            s1: controlData[6]
-        }
-        body_state.ym = data.h
-
-        let planner = planners[get(mode)]
-        const delta = performance.now() - lastTick
-        lastTick = performance.now()
-
-        body_state = planner.step(body_state, data, delta)
-
-        settings.omega = body_state.omega
-        settings.phi = body_state.phi
-        settings.psi = body_state.psi
-        settings.xm = body_state.xm
-        settings.ym = body_state.ym
-        settings.zm = body_state.zm
-    }
-
-    const update_robot_position = (robot: URDFRobot) => {
-        if (!settings['Robot transform controls']) return
-        settings.omega = radToDeg(robot.rotation.y)
-        settings.phi = radToDeg(robot.rotation.z) + $mpu.heading - 90
-        settings.psi = radToDeg(robot.rotation.x) + 90
-        settings.xm = robot.position.z * 100
-        settings.zm = -robot.position.x * 100
-    }
-
-    const updateTargetPosition = () => {
-        target.visible = settings['Target position']
-        target.position.x = smooth(target.position.x, target_position.x, 0.5)
-        target.position.z = smooth(target.position.z, target_position.z, 0.5)
-    }
-
-    const render = () => {
-        const robot = sceneManager.model
-        if (!robot) return
-
-        const toes = getToeWorldPositions(robot)
-
-        update_camera(robot)
-        update_gait()
-        calculate_kinematics()
-        update_robot_position(robot)
-
-        sceneManager.transformControl.showX = settings['Robot transform controls']
-        sceneManager.transformControl.showY = settings['Robot transform controls']
-        sceneManager.transformControl.showZ = settings['Robot transform controls']
-
-        for (let i = 0; i < $jointNames.length; i++) {
-            currentModelAngles[i] = smooth(
-                (robot.joints[$jointNames[i]].angle as number) * (180 / Math.PI),
-                modelTargetAngles[i],
-                0.1
-            )
-            robot.joints[$jointNames[i]].setJointValue(degToRad(currentModelAngles[i]))
-        }
-
-        orient_robot(robot, toes)
-        updateTargetPosition()
-    }
+    orient_robot(robot, toes)
+    updateTargetPosition()
+  }
 </script>
 
 <svelte:window onresize={sceneManager.fillParent} />

app/src/lib/components/input/InputPassword.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-    import { MdiEyeOffOutline, MdiEyeOutline } from '../icons'
+	import { MdiEyeOffOutline, MdiEyeOutline } from "../icons";
 
     interface Props {
-        show?: boolean
-        value?: string
-        id?: string
+        show?: boolean;
+        value?: string;
+        id?: string;
     }
 
-    let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props()
+    let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props();
+    
+	let type = $derived(show ? 'text' : 'password');
 
-    let type = $derived(show ? 'text' : 'password')
+	const handleInput = (e: any) => value = e.target.value
 
-    const handleInput = (e: Event) => (value = (e.target as HTMLInputElement).value)
-
-    const togglePassword = () => (show = !show)
+    const togglePassword = () => show = !show
 </script>
 
 <label class="input input-bordered flex items-center gap-2">
@@ -23,4 +23,4 @@
         <MdiEyeOffOutline class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}" />
         <MdiEyeOutline class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}" />
     </div>
-</label>
+</label>

app/src/lib/components/input/VerticalSlider.svelte

@@ -1,35 +1,34 @@
 <script lang="ts">
-    interface Props {
-        min?: number
-        max?: number
-        step?: number
-        value?: number
-        oninput?: (value: number) => void
-    }
+  interface Props {
+    min?: number
+    max?: number
+    step?: number
+    value?: any
+    oninput?: any
+  }
 
-    let {
-        min = 0,
-        max = 100,
-        step = 1,
-        value = $bindable((max - min) / 2),
-        ...rest
-    }: Props = $props()
+  let {
+    min = 0,
+    max = 100,
+    step = 1,
+    value = $bindable((max - min) / 2),
+    ...rest
+  }: Props = $props()
 </script>
 
 <input
-    type="range"
-    style="writing-mode: vertical-lr; direction: rtl"
-    class="cursor-pointer"
-    {min}
-    {max}
-    {step}
-    bind:value
-    {...rest}
-/>
+  type="range"
+  style="writing-mode: vertical-lr; direction: rtl"
+  class="cursor-pointer"
+  {min}
+  {max}
+  {step}
+  bind:value
+  {...rest} />
 
 <style>
-    input[type='range']::-webkit-slider-runnable-track {
-        background: oklch(var(--p) / 1);
-        border-radius: var(--rounded-box, 1rem);
-    }
+  input[type='range']::-webkit-slider-runnable-track {
+    background: oklch(var(--p) / 1);
+    border-radius: var(--rounded-box, 1rem);
+  }
 </style>

app/src/lib/components/input/index.ts

@@ -1,2 +1,2 @@
-export { default as PasswordInput } from './InputPassword.svelte'
-export { default as VerticalSlider } from './VerticalSlider.svelte'
+export { default as PasswordInput } from './InputPassword.svelte';
+export { default as VerticalSlider } from './VerticalSlider.svelte';

app/src/lib/components/layout/Widget.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     interface Props {
-        children?: import('svelte').Snippet
+        children?: import('svelte').Snippet;
     }
 
-    let { children }: Props = $props()
+    let { children }: Props = $props();
 </script>
 
 <div class="box-border overflow-hidden flex-1">

app/src/lib/components/layout/WidgetContainer.svelte

@@ -1,41 +1,40 @@
 <script lang="ts">
-    import WidgetContainer from './WidgetContainer.svelte'
-    import {
-        WidgetComponents,
-        type WidgetContainerConfig,
-        isWidgetConfig
-    } from '$lib/stores/application'
-    import Widget from './Widget.svelte'
+  import WidgetContainer from './WidgetContainer.svelte';
+  import {
+    WidgetComponents,
+    type WidgetContainerConfig,
+    isWidgetConfig,
+  } from '$lib/stores/application';
+  import Widget from './Widget.svelte';
 
-    interface Props {
-        container: WidgetContainerConfig
-    }
+  interface Props {
+    container: WidgetContainerConfig;
+  }
 
-    let { container }: Props = $props()
+  let { container }: Props = $props();
 </script>
 
 <div class="w-full h-full flex flex-col overflow-hidden">
-    <div
-        class="flex w-full h-full"
-        class:flex-row={container.layout === 'column'}
-        class:flex-col={container.layout === 'row'}
-        class:flex-wrap={container.layout === 'wrap'}
-    >
-        {#each container.widgets as widget, index (widget.id + '-' + index)}
-            <Widget>
-                {#if isWidgetConfig(widget)}
-                    {@const SvelteComponent = WidgetComponents[widget.component]}
-                    <SvelteComponent {...widget.props} />
-                {:else if widget.widgets}
-                    <WidgetContainer container={widget} />
-                {/if}
-            </Widget>
-            {#if index !== container.widgets.length - 1}
-                <div
-                    class="divider bg-base-300 m-0"
-                    class:divider-horizontal={container.layout === 'column'}
-                ></div>
-            {/if}
-        {/each}
-    </div>
+  <div
+    class="flex w-full h-full"
+    class:flex-row={container.layout === 'column'}
+    class:flex-col={container.layout === 'row'}
+    class:flex-wrap={container.layout === 'wrap'}>
+    {#each container.widgets as widget, index (widget.id + '-' + index)}
+      <Widget>
+        {#if isWidgetConfig(widget)}
+          {@const SvelteComponent = WidgetComponents[widget.component]}
+          <SvelteComponent {...widget.props} />
+        {:else if widget.widgets}
+          <WidgetContainer container={widget} />
+        {/if}
+      </Widget>
+      {#if index !== container.widgets.length - 1}
+        <div
+          class="divider bg-base-300 m-0"
+          class:divider-horizontal={container.layout === 'column'}>
+        </div>
+      {/if}
+    {/each}
+  </div>
 </div>

app/src/lib/components/menu/GithubButton.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-    import { Github } from '../icons'
+	import { Github } from "../icons";
 
-    interface Props {
-        github: { url: string; version: string; active?: boolean; href?: string }
-    }
+	interface Props {
+		github: any;
+	}
 
-    let { github }: Props = $props()
+	let { github }: Props = $props();
 </script>
 
 {#if github.active}
-    <a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer">
+	<a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer">
         <Github class="h-5 w-5" />
     </a>
 {/if}

app/src/lib/components/menu/LogoButton.svelte

@@ -1,15 +1,14 @@
 <script>
-    import logo from '$lib/assets/logo512.png'
-    import { resolve } from '$app/paths'
+	import logo from '$lib/assets/logo512.png';
 
-    /** @type {{appName: any}} */
-    let { appName } = $props()
+	/** @type {{appName: any}} */
+	let { appName } = $props();
 </script>
 
 <a
-    href={resolve('/')}
-    class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
+	href="/"
+	class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
 >
-    <img src={logo} alt="Logo" class="h-12 w-12" />
-    <h1 class="px-4 text-2xl font-bold">{appName}</h1>
+	<img src={logo} alt="Logo" class="h-12 w-12" />
+	<h1 class="px-4 text-2xl font-bold">{appName}</h1>
 </a>

app/src/lib/components/menu/Menu.svelte

@@ -1,200 +1,194 @@
 <script lang="ts">
-    import { page } from '$app/state'
-    import { base } from '$app/paths'
-    import { useFeatureFlags } from '$lib/stores/featureFlags'
-    import GithubButton from '../menu/GithubButton.svelte'
-    import LogoButton from '../menu/LogoButton.svelte'
-    import MenuList from '../menu/MenuList.svelte'
-    import {
-        Connection,
-        Settings,
-        MdiController,
-        Devices,
-        Camera,
-        Rotate3d,
-        MotorOutline,
-        Health,
-        Folder,
-        Update,
-        WiFi,
-        Router,
-        AP,
-        Copyright,
-        Metrics,
-        DNS
-    } from '$lib/components/icons'
-    import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
+  import { page } from '$app/state'
+  import { base } from '$app/paths'
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
+  import GithubButton from '../menu/GithubButton.svelte'
+  import LogoButton from '../menu/LogoButton.svelte'
+  import MenuList from '../menu/MenuList.svelte'
+  import {
+    Connection,
+    Settings,
+    MdiController,
+    Devices,
+    Camera,
+    Rotate3d,
+    MotorOutline,
+    Health,
+    Folder,
+    Update,
+    WiFi,
+    Router,
+    AP,
+    Copyright,
+    Metrics,
+    DNS
+  } from '$lib/components/icons'
+  import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
 
-    const features = useFeatureFlags()
+  const features = useFeatureFlags()
 
-    const appName = page.data.app_name
+  const appName = page.data.app_name
 
-    const copyright = page.data.copyright
+  const copyright = page.data.copyright
 
-    const github = { href: 'https://github.com/' + page.data.github, active: true }
+  const github = { href: 'https://github.com/' + page.data.github, active: true }
 
-    import type { ComponentType } from 'svelte'
+  type menuItem = {
+    title: string
+    icon: ConstructorOfATypedSvelteComponent
+    href?: string
+    feature: boolean
+    active?: boolean
+    submenu?: menuItem[]
+  }
 
-    type menuItem = {
-        title: string
-        icon: ComponentType
-        href?: string
-        feature: boolean
-        active?: boolean
-        submenu?: menuItem[]
-    }
+  function withBase(path: string) {
+    return `${base}${path.startsWith('/') ? path : '/' + path}`
+  }
 
-    function withBase(path: string) {
-        return `${base}${path.startsWith('/') ? path : '/' + path}`
-    }
+  let menuItems = $state<menuItem[]>([])
 
-    let menuItems = $state<menuItem[]>([])
+  $effect(() => {
+    menuItems = [
+      {
+        title: 'Connection',
+        icon: WiFi,
+        href: withBase('/connection'),
+        feature: !PUBLIC_VITE_USE_HOST_NAME
+      },
+      {
+        title: 'Controller',
+        icon: MdiController,
+        href: withBase('/controller'),
+        feature: true
+      },
+      {
+        title: 'Peripherals',
+        icon: Devices,
+        feature: true,
+        submenu: [
+          {
+            title: 'I2C',
+            icon: Connection,
+            href: withBase('/peripherals/i2c'),
+            feature: true
+          },
+          {
+            title: 'Camera',
+            icon: Camera,
+            href: withBase('/peripherals/camera'),
+            feature: $features.camera
+          },
+          {
+            title: 'Servo',
+            icon: MotorOutline,
+            href: withBase('/peripherals/servo'),
+            feature: true
+          },
+          {
+            title: 'IMU',
+            icon: Rotate3d,
+            href: withBase('/peripherals/imu'),
+            feature: $features.imu || $features.mag || $features.bmp
+          }
+        ]
+      },
+      {
+        title: 'WiFi',
+        icon: WiFi,
+        feature: true,
+        submenu: [
+          {
+            title: 'WiFi Station',
+            icon: Router,
+            href: withBase('/wifi/sta'),
+            feature: true
+          },
+          {
+            title: 'Access Point',
+            icon: AP,
+            href: withBase('/wifi/ap'),
+            feature: true
+          },
+          {
+            title: 'mDNS',
+            icon: DNS,
+            href: withBase('/wifi/mdns'),
+            feature: true
+          }
+        ]
+      },
+      {
+        title: 'System',
+        icon: Settings,
+        feature: true,
+        submenu: [
+          {
+            title: 'System Status',
+            icon: Health,
+            href: withBase('/system/status'),
+            feature: true
+          },
+          {
+            title: 'File System',
+            icon: Folder,
+            href: withBase('/system/filesystem'),
+            feature: true
+          },
+          {
+            title: 'System Metrics',
+            icon: Metrics,
+            href: withBase('/system/metrics'),
+            feature: true
+          },
+          {
+            title: 'Firmware Update',
+            icon: Update,
+            href: withBase('/system/update'),
+            feature: $features.ota || $features.upload_firmware || $features.download_firmware
+          }
+        ]
+      }
+    ] as menuItem[]
+  })
 
-    $effect(() => {
-        menuItems = [
-            {
-                title: 'Connection',
-                icon: WiFi,
-                href: withBase('/connection'),
-                feature: !PUBLIC_VITE_USE_HOST_NAME
-            },
-            {
-                title: 'Controller',
-                icon: MdiController,
-                href: withBase('/controller'),
-                feature: true
-            },
-            {
-                title: 'Peripherals',
-                icon: Devices,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'I2C',
-                        icon: Connection,
-                        href: withBase('/peripherals/i2c'),
-                        feature: true
-                    },
-                    {
-                        title: 'Camera',
-                        icon: Camera,
-                        href: withBase('/peripherals/camera'),
-                        feature: $features.camera
-                    },
-                    {
-                        title: 'Servo',
-                        icon: MotorOutline,
-                        href: withBase('/peripherals/servo'),
-                        feature: true
-                    },
-                    {
-                        title: 'IMU',
-                        icon: Rotate3d,
-                        href: withBase('/peripherals/imu'),
-                        feature: $features.imu || $features.mag || $features.bmp
-                    }
-                ]
-            },
-            {
-                title: 'WiFi',
-                icon: WiFi,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'WiFi Station',
-                        icon: Router,
-                        href: withBase('/wifi/sta'),
-                        feature: true
-                    },
-                    {
-                        title: 'Access Point',
-                        icon: AP,
-                        href: withBase('/wifi/ap'),
-                        feature: true
-                    },
-                    {
-                        title: 'mDNS',
-                        icon: DNS,
-                        href: withBase('/wifi/mdns'),
-                        feature: true
-                    }
-                ]
-            },
-            {
-                title: 'System',
-                icon: Settings,
-                feature: true,
-                submenu: [
-                    {
-                        title: 'System Status',
-                        icon: Health,
-                        href: withBase('/system/status'),
-                        feature: true
-                    },
-                    {
-                        title: 'File System',
-                        icon: Folder,
-                        href: withBase('/system/filesystem'),
-                        feature: true
-                    },
-                    {
-                        title: 'System Metrics',
-                        icon: Metrics,
-                        href: withBase('/system/metrics'),
-                        feature: true
-                    },
-                    {
-                        title: 'Firmware Update',
-                        icon: Update,
-                        href: withBase('/system/update'),
-                        feature:
-                            $features.ota ||
-                            $features.upload_firmware ||
-                            $features.download_firmware
-                    }
-                ]
-            }
-        ] as menuItem[]
+  const { menuClicked } = $props()
+
+  function setActiveMenuItem(targetTitle: string) {
+    menuItems.forEach(item => {
+      item.active = item.title === targetTitle
+      item.submenu?.forEach(subItem => {
+        subItem.active = subItem.title === targetTitle
+      })
     })
+    menuItems = menuItems
+    menuClicked()
+  }
 
-    const { menuClicked } = $props()
+  $effect(() => {
+    setActiveMenuItem(page.data.title)
+  })
 
-    function setActiveMenuItem(targetTitle: string) {
-        menuItems.forEach(item => {
-            item.active = item.title === targetTitle
-            item.submenu?.forEach(subItem => {
-                subItem.active = subItem.title === targetTitle
-            })
-        })
-        menuItems = menuItems
-        menuClicked()
-    }
-
-    $effect(() => {
-        setActiveMenuItem(page.data.title)
-    })
-
-    const updateMenu = (event: CustomEvent) => {
-        setActiveMenuItem(event.details)
-    }
+  const updateMenu = (event: any) => {
+    setActiveMenuItem(event.details)
+  }
 </script>
 
 <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
-    <LogoButton {appName} />
+  <LogoButton {appName} />
 
-    <MenuList
-        {menuItems}
-        select={updateMenu}
-        class="grow flex-nowrap overflow-y-auto overflow-x-hidden"
-        level="0"
-    />
+  <MenuList
+    {menuItems}
+    select={updateMenu}
+    class="grow flex-nowrap overflow-y-auto overflow-x-hidden"
+    level="0" />
 
-    <div class="divider my-0"></div>
+  <div class="divider my-0"></div>
 
-    <div class="flex items-center justify-between">
-        <GithubButton {github} />
-        <div class="flex items-center justify-end text-sm gap-2">
-            <Copyright class="h-4 w-4" />{copyright}
-        </div>
+  <div class="flex items-center justify-between">
+    <GithubButton {github} />
+    <div class="flex items-center justify-end text-sm gap-2">
+      <Copyright class="h-4 w-4" />{copyright}
     </div>
+  </div>
 </div>

app/src/lib/components/menu/MenuList.svelte

@@ -1,56 +1,48 @@
 <script lang="ts">
-    import MenuList from './MenuList.svelte'
-    import type { ComponentType } from 'svelte'
+  import MenuList from './MenuList.svelte'
+  type MenuItem = {
+    title: string
+    icon: ConstructorOfATypedSvelteComponent
+    href?: string
+    feature: boolean
+    active?: boolean
+    submenu?: MenuItem[]
+  }
 
-    type MenuItem = {
-        title: string
-        icon: ComponentType
-        href?: string
-        feature: boolean
-        active?: boolean
-        submenu?: MenuItem[]
-    }
+  let { level, menuItems, select, class: klass } = $props()
 
-    let { level, menuItems, select, class: klass } = $props()
-
-    const selectMenuItem = (title: string) => {
-        select(title)
-    }
+  const selectMenuItem = (title: string) => {
+    select(title)
+  }
 </script>
 
 <ul class={klass + ' menu w-full'}>
-    {#each menuItems as MenuItem[] as menuItem (menuItem.title)}
-        {#if menuItem.feature}
-            <li>
-                {#if menuItem.submenu}
-                    <details open={menuItem.submenu.some(subItem => subItem.active)}>
-                        <summary class="font-bold">
-                            <menuItem.icon class="h-6 w-6" />
-                            {menuItem.title}
-                        </summary>
-                        <div class="pl-4">
-                            <MenuList
-                                menuItems={menuItem.submenu}
-                                level={level + 1}
-                                {select}
-                                class={klass}
-                            />
-                        </div>
-                    </details>
-                {:else}
-                    <a
-                        href={menuItem.href}
-                        class="font-bold"
-                        class:bg-base-100={menuItem.active}
-                        class:text-lg={level === 0}
-                        class:text-md={level === 1}
-                        onclick={() => selectMenuItem(menuItem.title)}
-                    >
-                        <menuItem.icon class="h-6 w-6" />
-                        {menuItem.title}
-                    </a>
-                {/if}
-            </li>
+  {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
+    {#if menuItem.feature}
+      <li>
+        {#if menuItem.submenu}
+          <details open={menuItem.submenu.some(subItem => subItem.active)}>
+            <summary class="font-bold">
+              <menuItem.icon class="h-6 w-6" />
+              {menuItem.title}
+            </summary>
+            <div class="pl-4">
+              <MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
+            </div>
+          </details>
+        {:else}
+          <a
+            href={menuItem.href}
+            class="font-bold"
+            class:bg-base-100={menuItem.active}
+            class:text-lg={level === 0}
+            class:text-md={level === 1}
+            onclick={() => selectMenuItem(menuItem.title)}>
+            <menuItem.icon class="h-6 w-6" />
+            {menuItem.title}
+          </a>
         {/if}
-    {/each}
+      </li>
+    {/if}
+  {/each}
 </ul>

app/src/lib/components/statusbar/FullscreenButton.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { isFullscreen, toggleFullscreen } from '$lib/stores'
-    import { MdiFullscreenExit, MdiFullscreen } from '../icons'
+    import { isFullscreen, toggleFullscreen } from '$lib/stores';
+	import { MdiFullscreenExit, MdiFullscreen } from '../icons';
 
-    const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen)
+    const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen);
 </script>
 
 <button onclick={toggleFullscreen}>
     <SvelteComponent class="h-7 w-7" />
-</button>
+</button>

app/src/lib/components/statusbar/RSSIIndicator.svelte

@@ -1,33 +1,33 @@
 <script lang="ts">
-    import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from '../icons'
+	import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from "../icons";
 
-    interface Props {
-        showDBm?: boolean
-        rssi?: number
-    }
+	interface Props {
+		showDBm?: boolean;
+		rssi?: number;
+	}
 
-    let { showDBm = false, rssi = 0 }: Props = $props()
+	let { showDBm = false, rssi = 0 }: Props = $props();
 
-    const getWiFiIcon = () => {
-        if (rssi === 0) return WifiOff
-        if (rssi >= -55) return WiFi
-        if (rssi >= -75) return WiFi2
-        if (rssi >= -85) return WiFi1
-        return WiFi0
-    }
+	const getWiFiIcon = () => {
+		if (rssi === 0) return WifiOff;
+		if (rssi >= -55) return WiFi;
+		if (rssi >= -75) return WiFi2;
+		if (rssi >= -85) return WiFi1;
+		return WiFi0;
+	};
 
-    const SvelteComponent = $derived(getWiFiIcon())
+	const SvelteComponent = $derived(getWiFiIcon());
 </script>
 
 <div class="indicator">
-    <div class="tooltip tooltip-left" data-tip={rssi + ' dBm'}>
-        {#if showDBm}
-            <span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
-                {rssi} dBm
-            </span>
-        {/if}
-        <div class="h-7 w-7">
-            <SvelteComponent class="absolute inset-0 h-full w-full" />
-        </div>
-    </div>
-</div>
+	<div class="tooltip tooltip-left" data-tip={rssi + " dBm"}>
+		{#if showDBm}
+			<span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
+				{rssi} dBm
+			</span>
+		{/if}
+		<div class="h-7 w-7">
+			<SvelteComponent class="absolute inset-0 h-full w-full" />
+		</div>
+	</div>
+</div>

app/src/lib/components/statusbar/SleepButton.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { useFeatureFlags } from '$lib/stores'
-    import { modals } from 'svelte-modals'
-    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
-    import { api } from '$lib/api'
-    import { Cancel, Power } from '../icons'
+    import { useFeatureFlags } from '$lib/stores';
+    import { modals } from 'svelte-modals';
+    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+    import { api } from '$lib/api';
+    import { Cancel, Power } from '../icons';
 
-    const features = useFeatureFlags()
+    const features = useFeatureFlags();
 
-    const postSleep = async () => await api.post('/api/system/sleep')
+    const postSleep = async () => await api.post('/api/system/sleep');
 
     const confirmSleep = () => {
         modals.open(ConfirmDialog, {
@@ -18,11 +18,11 @@
                 confirm: { label: 'Switch Off', icon: Power }
             },
             onConfirm: () => {
-                modals.close()
-                postSleep()
+                modals.close();
+                postSleep();
             }
-        })
-    }
+        });
+    };
 </script>
 
 {#if $features.sleep}

app/src/lib/components/statusbar/StopButton.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-    import { mode, modes } from '$lib/stores'
+	import { mode, modes } from "$lib/stores";
 
     const deactivate = async () => {
-        mode.set(modes.indexOf('deactivated'))
-    }
+		mode.set(modes.indexOf('deactivated'));
+	};
 </script>
 
-<button onclick={deactivate} class="bg-error text-white btn rounded-none">STOP</button>
+
+<button onclick={deactivate} class="bg-error text-white btn rounded-none">STOP</button>

app/src/lib/components/statusbar/ThemeButton.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { MdiWeatherSunny, MdiMoonAndStars } from '../icons'
+	import { MdiWeatherSunny, MdiMoonAndStars } from "../icons";
 </script>
 
 <label class="swap swap-rotate">
     <input type="checkbox" value="light" class="theme-controller" />
     <MdiWeatherSunny class="swap-off h-7 w-7" />
     <MdiMoonAndStars class="swap-on h-7 w-7" />
-</label>
+</label>

app/src/lib/components/statusbar/TopBar.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-    import { Hamburger } from '../icons'
-    import { resolve } from '$app/paths'
+    import {Hamburger} from '../icons'
 </script>
 
 <div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
-    <div class="flex gap-2 p-2">
-        <a href={resolve('/')}>
-            <Hamburger class="h-8 w-8" />
+	<div class="flex gap-2 p-2">
+        <a href="/">
+            <Hamburger class="h-8 w-8"/>
         </a>
     </div>
 </div>
 
 <style>
-    .topbar {
-        height: 50px;
-    }
+	.topbar {
+		height: 50px;
+	}
 </style>

app/src/lib/components/statusbar/UpdateIndicator.svelte

@@ -1,111 +1,109 @@
 <script lang="ts">
-    import { page } from '$app/state'
-    import { modals } from 'svelte-modals'
-    import { notifications } from '$lib/components/toasts/notifications'
-    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
-    import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte'
-    import { compareVersions } from 'compare-versions'
-    import { onMount } from 'svelte'
-    import { api } from '$lib/api'
-    import type { GithubRelease } from '$lib/types/models'
-    import { useFeatureFlags } from '$lib/stores/featureFlags'
-    import { Cancel, CloudDown, Firmware } from '../icons'
+  import { page } from '$app/state'
+  import { modals } from 'svelte-modals'
+  import { notifications } from '$lib/components/toasts/notifications'
+  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
+  import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte'
+  import { compareVersions } from 'compare-versions'
+  import { onMount } from 'svelte'
+  import { api } from '$lib/api'
+  import type { GithubRelease } from '$lib/types/models'
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
+  import { Cancel, CloudDown, Firmware } from '../icons'
 
-    const features = useFeatureFlags()
+  const features = useFeatureFlags()
 
-    interface Props {
-        update?: boolean
+  interface Props {
+    update?: boolean
+  }
+
+  let { update = $bindable(false) }: Props = $props()
+
+  let firmwareVersion: string = $state('')
+  let firmwareDownloadLink: string = $state('')
+
+  async function getGithubAPI() {
+    const headers = {
+      accept: 'application/vnd.github+json',
+      'X-GitHub-Api-Version': '2022-11-28'
+    }
+    const result = await api.get<GithubRelease>(
+      `https://api.github.com/repos/${page.data.github}/releases/latest`,
+      { headers }
+    )
+    if (result.inner.message === '404' || result.inner.message == 'Not Found') {
+      console.warn('Error: Could not find releases in the repository')
+      return
+    }
+    if (result.isErr()) {
+      console.error('Error:', result.inner)
+      return
     }
 
-    let { update = $bindable(false) }: Props = $props()
+    const results = result.inner
+    update = false
+    firmwareVersion = ''
 
-    let firmwareVersion: string = $state('')
-    let firmwareDownloadLink: string = $state('')
-
-    async function getGithubAPI() {
-        const headers = {
-            accept: 'application/vnd.github+json',
-            'X-GitHub-Api-Version': '2022-11-28'
-        }
-        const result = await api.get<GithubRelease>(
-            `https://api.github.com/repos/${page.data.github}/releases/latest`,
-            { headers }
-        )
-        if (result.inner.message === '404' || result.inner.message == 'Not Found') {
-            console.warn('Error: Could not find releases in the repository')
-            return
-        }
-        if (result.isErr()) {
-            console.error('Error:', result.inner)
-            return
-        }
-
-        const results = result.inner
-        update = false
-        firmwareVersion = ''
-
-        if (compareVersions(results.tag_name, $features.firmware_version as string) === 1) {
-            // iterate over assets and find the correct one
-            for (let i = 0; i < results.assets.length; i++) {
-                // check if the asset is of type *.bin
-                if (
-                    results.assets[i].name.includes('.bin') &&
-                    results.assets[i].name.includes($features.firmware_built_target as string)
-                ) {
-                    update = true
-                    firmwareVersion = results.tag_name
-                    firmwareDownloadLink = results.assets[i].browser_download_url
-                    notifications.info('Firmware update available.', 5000)
-                }
-            }
+    if (compareVersions(results.tag_name, $features.firmware_version as string) === 1) {
+      // iterate over assets and find the correct one
+      for (let i = 0; i < results.assets.length; i++) {
+        // check if the asset is of type *.bin
+        if (
+          results.assets[i].name.includes('.bin') &&
+          results.assets[i].name.includes($features.firmware_built_target as string)
+        ) {
+          update = true
+          firmwareVersion = results.tag_name
+          firmwareDownloadLink = results.assets[i].browser_download_url
+          notifications.info('Firmware update available.', 5000)
         }
+      }
     }
+  }
 
-    async function postGithubDownload(url: string) {
-        const result = await api.post('/api/downloadUpdate', { download_url: url })
-        if (result.isErr()) {
-            console.error('Error:', result.inner)
-            return
-        }
+  async function postGithubDownload(url: string) {
+    const result = await api.post('/api/downloadUpdate', { download_url: url })
+    if (result.isErr()) {
+      console.error('Error:', result.inner)
+      return
     }
+  }
 
-    onMount(async () => {
-        if ($features.download_firmware) {
-            await getGithubAPI()
-            setInterval(async () => await getGithubAPI(), 60 * 60 * 1000) // once per hour
-        }
-    })
+  onMount(async () => {
+    if ($features.download_firmware) {
+      await getGithubAPI()
+      setInterval(async () => await getGithubAPI(), 60 * 60 * 1000) // once per hour
+    }
+  })
 
-    function confirmGithubUpdate(url: string) {
-        modals.open(ConfirmDialog, {
-            title: 'Confirm flashing new firmware to the device',
-            message: 'Are you sure you want to overwrite the existing firmware with a new one?',
-            labels: {
-                cancel: { label: 'Abort', icon: Cancel },
-                confirm: { label: 'Update', icon: CloudDown }
-            },
-            onConfirm: () => {
-                postGithubDownload(url)
-                modals.open(GithubUpdateDialog, {
-                    onConfirm: () => modals.closeAll()
-                })
-            }
+  function confirmGithubUpdate(url: string) {
+    modals.open(ConfirmDialog, {
+      title: 'Confirm flashing new firmware to the device',
+      message: 'Are you sure you want to overwrite the existing firmware with a new one?',
+      labels: {
+        cancel: { label: 'Abort', icon: Cancel },
+        confirm: { label: 'Update', icon: CloudDown }
+      },
+      onConfirm: () => {
+        postGithubDownload(url)
+        modals.open(GithubUpdateDialog, {
+          onConfirm: () => modals.closeAll()
         })
-    }
+      }
+    })
+  }
 </script>
 
 {#if update}
-    <div class="indicator flex-none">
-        <button
-            class="btn btn-square btn-ghost h-9 w-9"
-            onclick={() => confirmGithubUpdate(firmwareDownloadLink)}
-        >
-            <span
-                class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
-            >
-                {firmwareVersion}
-            </span>
-            <Firmware class="h-7 w-7" />
-        </button>
-    </div>
+  <div class="indicator flex-none">
+    <button
+      class="btn btn-square btn-ghost h-9 w-9"
+      onclick={() => confirmGithubUpdate(firmwareDownloadLink)}>
+      <span
+        class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1">
+        {firmwareVersion}
+      </span>
+      <Firmware class="h-7 w-7" />
+    </button>
+  </div>
 {/if}

app/src/lib/components/statusbar/ViewSelector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { selectedView, views } from '$lib/stores/application'
-    import Selector from '../widget/Selector.svelte'
+	import { selectedView, views } from "$lib/stores/application";
+	import Selector from "../widget/Selector.svelte";
 </script>
 
-<Selector bind:selectedOption={$selectedView} options={$views.map(v => v.name)} />
+<Selector bind:selectedOption={$selectedView} options={$views.map((v) => v.name)} />

app/src/lib/components/statusbar/statusbar.svelte

@@ -1,38 +1,38 @@
 <script lang="ts">
-    import { page } from '$app/state'
-    import { telemetry } from '$lib/stores/telemetry'
+  import { page } from '$app/state'
+  import { telemetry } from '$lib/stores/telemetry'
 
-    import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'
-    import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'
-    import SleepButton from './SleepButton.svelte'
-    import ThemeButton from './ThemeButton.svelte'
-    import FullscreenButton from './FullscreenButton.svelte'
-    import StopButton from './StopButton.svelte'
-    import ViewSelector from './ViewSelector.svelte'
-    import { Hamburger } from '../icons'
+  import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'
+  import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'
+  import SleepButton from './SleepButton.svelte'
+  import ThemeButton from './ThemeButton.svelte'
+  import FullscreenButton from './FullscreenButton.svelte'
+  import StopButton from './StopButton.svelte'
+  import ViewSelector from './ViewSelector.svelte'
+  import { Hamburger } from '../icons'
 </script>
 
 <div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
-    <div class="flex flex-1 gap-2">
-        <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
-            <Hamburger class="h-6 w-auto" />
-        </label>
-        {#if page.data.title === 'Controller'}
-            <ViewSelector />
-        {:else}
-            <h1 class="px-2 text-xl font-bold lg:text-2xl">{page.data.title}</h1>
-        {/if}
-    </div>
+  <div class="flex flex-1 gap-2">
+    <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
+      <Hamburger class="h-6 w-auto" />
+    </label>
+    {#if page.data.title === 'Controller'}
+      <ViewSelector />
+    {:else}
+      <h1 class="px-2 text-xl font-bold lg:text-2xl">{page.data.title}</h1>
+    {/if}
+  </div>
 
-    <UpdateIndicator />
+  <UpdateIndicator />
 
-    <FullscreenButton />
+  <FullscreenButton />
 
-    <ThemeButton />
+  <ThemeButton />
 
-    <RssiIndicator rssi={$telemetry.rssi.rssi} />
+  <RssiIndicator rssi={$telemetry.rssi.rssi} />
 
-    <SleepButton />
+  <SleepButton />
 
-    <StopButton />
+  <StopButton />
 </div>

app/src/lib/components/toasts/Toast.svelte

@@ -1,37 +1,35 @@
 <script>
-    import { flip } from 'svelte/animate'
-    import { fly } from 'svelte/transition'
-    import { notifications } from '$lib/components/toasts/notifications'
-    import { error, info, success, warning } from '../icons'
+	import { flip } from 'svelte/animate';
+	import { fly } from 'svelte/transition';
+	import { notifications } from '$lib/components/toasts/notifications';
+	import { error, info, success, warning } from '../icons';
 
-    /** @type {{theme?: any, icon?: any}} */
-    let {
-        theme = {
-            error: 'alert-error',
-            success: 'alert-success',
-            warning: 'alert-warning',
-            info: 'alert-info'
-        },
-        icon = {
-            error: error,
-            success: success,
-            warning: warning,
-            info: info
-        }
-    } = $props()
+
+	/** @type {{theme?: any, icon?: any}} */
+	let { theme = {
+		error: 'alert-error',
+		success: 'alert-success',
+		warning: 'alert-warning',
+		info: 'alert-info'
+	}, icon = {
+		error: error,
+		success: success,
+		warning: warning,
+		info: info
+	} } = $props();
 </script>
 
 <div class="toast toast-end mr-4 z-20">
-    {#each $notifications as notification (notification.id)}
-        {@const SvelteComponent = icon[notification.type]}
-        <div
-            animate:flip={{ duration: 400 }}
-            class="alert animate-none {theme[notification.type]}"
-            in:fly={{ y: 100, duration: 400 }}
-            out:fly={{ x: 100, duration: 400 }}
-        >
-            <SvelteComponent class="h-6 w-6 shrink-0" />
-            <span>{notification.message}</span>
-        </div>
-    {/each}
+	{#each $notifications as notification (notification.id)}
+		{@const SvelteComponent = icon[notification.type]}
+		<div
+			animate:flip={{ duration: 400 }}
+			class="alert animate-none {theme[notification.type]}"
+			in:fly={{ y: 100, duration: 400 }}
+			out:fly={{ x: 100, duration: 400 }}
+		>
+			<SvelteComponent class="h-6 w-6 shrink-0" />
+			<span>{notification.message}</span>
+		</div>
+	{/each}
 </div>

app/src/lib/components/toasts/notifications.ts

@@ -1,42 +1,42 @@
-import { writable } from 'svelte/store'
+import { writable, derived, type Writable } from 'svelte/store'
 
 type StateType = 'info' | 'success' | 'warning' | 'error'
 
 type State = {
-    id: string
-    type: StateType
-    message: string
+  id: string
+  type: StateType
+  message: string
 }
 
 function createNotificationStore() {
-    const state: State[] = []
-    const notifications = writable(state)
-    const { subscribe } = notifications
+  const state: State[] = []
+  const notifications = writable(state)
+  const { subscribe } = notifications
 
-    function send(message: string, type: StateType = 'info', timeout: number) {
-        const id = generateId()
-        setTimeout(() => {
-            notifications.update(state => {
-                return state.filter(n => n.id !== id)
-            })
-        }, timeout)
-        notifications.update(state => {
-            return [...state, { id, type, message }]
-        })
-    }
+  function send(message: string, type: StateType = 'info', timeout: number) {
+    const id = generateId()
+    setTimeout(() => {
+      notifications.update(state => {
+        return state.filter(n => n.id !== id)
+      })
+    }, timeout)
+    notifications.update(state => {
+      return [...state, { id, type, message }]
+    })
+  }
 
-    return {
-        subscribe,
-        send,
-        error: (msg: string, timeout: number = 4000) => send(msg, 'error', timeout),
-        warning: (msg: string, timeout: number = 4000) => send(msg, 'warning', timeout),
-        info: (msg: string, timeout: number = 4000) => send(msg, 'info', timeout),
-        success: (msg: string, timeout: number = 4000) => send(msg, 'success', timeout)
-    }
+  return {
+    subscribe,
+    send,
+    error: (msg: string, timeout: number = 4000) => send(msg, 'error', timeout),
+    warning: (msg: string, timeout: number = 4000) => send(msg, 'warning', timeout),
+    info: (msg: string, timeout: number = 4000) => send(msg, 'info', timeout),
+    success: (msg: string, timeout: number = 4000) => send(msg, 'success', timeout)
+  }
 }
 
 function generateId() {
-    return '_' + Math.random().toString(36).substr(2, 9)
+  return '_' + Math.random().toString(36).substr(2, 9)
 }
 
 export const notifications = createNotificationStore()

app/src/lib/components/widget/ChartWidget.svelte

@@ -1,102 +1,101 @@
 <script lang="ts">
-    import { daisyColor } from '$lib/utilities'
-    import { Chart, registerables } from 'chart.js'
-    import { onMount } from 'svelte'
-    import { cubicOut } from 'svelte/easing'
-    import { slide } from 'svelte/transition'
+  import { daisyColor } from '$lib/utilities';
+  import { Chart, registerables } from 'chart.js';
+  import { onMount } from 'svelte';
+  import { cubicOut } from 'svelte/easing';
+  import { slide } from 'svelte/transition';
 
-    let chartElement: HTMLCanvasElement
-    let chart: Chart<'line', number[], number>
+  let chartElement: HTMLCanvasElement;
+  let chart: Chart;
 
-    interface Props {
-        label: string
-        data: number[]
-        title: string
-    }
+  interface Props {
+    label: any;
+    data: number[];
+    title: any;
+  }
 
-    let { label, data, title }: Props = $props()
+  let { label, data, title }: Props = $props();
 
-    Chart.register(...registerables)
+  Chart.register(...registerables);
 
-    onMount(() => {
-        chart = new Chart(chartElement, {
-            type: 'line',
-            data: {
-                labels: data,
-                datasets: [
-                    {
-                        label,
-                        borderColor: daisyColor('--p'),
-                        backgroundColor: daisyColor('--p', 50),
-                        borderWidth: 2,
-                        data,
-                        yAxisID: 'y'
-                    }
-                ]
+  onMount(() => {
+    chart = new Chart(chartElement, {
+      type: 'line',
+      data: {
+        labels: data,
+        datasets: [
+          {
+            label,
+            borderColor: daisyColor('--p'),
+            backgroundColor: daisyColor('--p', 50),
+            borderWidth: 2,
+            data,
+            yAxisID: 'y',
+          },
+        ],
+      },
+      options: {
+        maintainAspectRatio: false,
+        responsive: true,
+        plugins: {
+          legend: {
+            display: true,
+          },
+          tooltip: {
+            mode: 'index',
+            intersect: false,
+          },
+        },
+        elements: {
+          point: {
+            radius: 0,
+          },
+        },
+        scales: {
+          x: {
+            grid: {
+              color: daisyColor('--bc', 10),
             },
-            options: {
-                maintainAspectRatio: false,
-                responsive: true,
-                plugins: {
-                    legend: {
-                        display: true
-                    },
-                    tooltip: {
-                        mode: 'index',
-                        intersect: false
-                    }
-                },
-                elements: {
-                    point: {
-                        radius: 0
-                    }
-                },
-                scales: {
-                    x: {
-                        grid: {
-                            color: daisyColor('--bc', 10)
-                        },
-                        ticks: {
-                            color: daisyColor('--bc')
-                        },
-                        display: false
-                    },
-                    y: {
-                        type: 'linear',
-                        title: {
-                            display: true,
-                            text: title,
-                            color: daisyColor('--bc'),
-                            font: {
-                                size: 16,
-                                weight: 'bold'
-                            }
-                        },
-                        position: 'left',
-                        min: 0,
-                        max: 100,
-                        grid: { color: daisyColor('--bc', 10) },
-                        ticks: {
-                            color: daisyColor('--bc')
-                        },
-                        border: { color: daisyColor('--bc', 10) }
-                    }
-                }
-            }
-        })
+            ticks: {
+              color: daisyColor('--bc'),
+            },
+            display: false,
+          },
+          y: {
+            type: 'linear',
+            title: {
+              display: true,
+              text: title,
+              color: daisyColor('--bc'),
+              font: {
+                size: 16,
+                weight: 'bold',
+              },
+            },
+            position: 'left',
+            min: 0,
+            max: 100,
+            grid: { color: daisyColor('--bc', 10) },
+            ticks: {
+              color: daisyColor('--bc'),
+            },
+            border: { color: daisyColor('--bc', 10) },
+          },
+        },
+      },
+    });
 
-        setInterval(() => {
-            chart.data.labels = data
-            chart.data.datasets[0].data = data
-        }, 500)
-    })
+    setInterval(() => {
+      chart.data.labels = data;
+      chart.data.datasets[0].data = data;
+    }, 500);
+  });
 </script>
 
 <div class="w-full h-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={chartElement}></canvas>
-    </div>
+  <div
+    class="flex w-full flex-col space-y-1 h-60"
+    transition:slide|local={{ duration: 300, easing: cubicOut }}>
+    <canvas bind:this={chartElement}></canvas>
+  </div>
 </div>

app/src/lib/components/widget/Selector.svelte

@@ -1,20 +1,19 @@
 <script lang="ts">
-    interface Props {
-        options?: string[]
-        selectedOption?: string
-        change?: () => void
-        [key: string]: unknown
-    }
+  interface Props {
+    options?: string[];
+    selectedOption?: string;
+    change?: () => void;
+    [key: string]: any;
+  }
 
-    let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props()
+  let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
 </script>
 
 <select
-    bind:value={selectedOption}
-    {...rest}
-    class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
->
-    {#each options as option}
-        <option value={option}>{option}</option>
-    {/each}
+  bind:value={selectedOption}
+  {...rest}
+  class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}">
+  {#each options as option}
+    <option value={option}>{option}</option>
+  {/each}
 </select>

app/src/lib/gait.ts

@@ -3,491 +3,423 @@ import type { body_state_t } from './kinematic'
 import { currentKinematic } from './stores/featureFlags'
 
 export interface gait_state_t {
-    step_height: number
-    step_x: number
-    step_z: number
-    step_angle: number
-    step_velocity: number
-    step_depth: number
+  step_height: number
+  step_x: number
+  step_z: number
+  step_angle: number
+  step_velocity: number
+  step_depth: number
 }
 
 export interface ControllerCommand {
-    lx: number
-    ly: number
-    rx: number
-    ry: number
-    h: number
-    s: number
-    s1: number
+  lx: number
+  ly: number
+  rx: number
+  ry: number
+  h: number
+  s: number
+  s1: number
 }
 
 export abstract class GaitState {
-    protected abstract name: string
+  protected abstract name: string
 
-    protected dt = 0.02
-    protected body_state!: body_state_t
-    protected gait_state: gait_state_t = {
-        step_height: 0.4,
-        step_x: 0,
-        step_z: 0,
-        step_angle: 0,
-        step_velocity: 1,
-        step_depth: 0.002
+  protected dt = 0.02
+  protected body_state!: body_state_t
+  protected gait_state: gait_state_t = {
+    step_height: 0.4,
+    step_x: 0,
+    step_z: 0,
+    step_angle: 0,
+    step_velocity: 1,
+    step_depth: 0.002
+  }
+
+  public get default_feet_pos() {
+    return get(currentKinematic).getDefaultFeetPos()
+  }
+
+  protected get default_height() {
+    return 0.5
+  }
+
+  begin() {
+    console.log('Starting', this.name)
+  }
+  end() {
+    console.log('Ending', this.name)
+  }
+  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+    this.map_command(command)
+    this.body_state = body_state
+    this.dt = dt / 1000
+    return body_state
+  }
+
+  map_command(command: ControllerCommand) {
+    const newCommand = {
+      step_height: 0.4 + (command.s1 + 1) / 2,
+      step_x: command.ly,
+      step_z: -command.lx,
+      step_velocity: command.s,
+      step_angle: command.rx,
+      step_depth: 0.002
     }
 
-    public get default_feet_pos() {
-        return get(currentKinematic).getDefaultFeetPos()
-    }
-
-    protected get default_height() {
-        return 0.5
-    }
-
-    begin() {
-        console.log('Starting', this.name)
-    }
-    end() {
-        console.log('Ending', this.name)
-    }
-    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-        this.map_command(command)
-        this.body_state = body_state
-        this.dt = dt / 1000
-
-        if (body_state.cumulative_x === undefined) {
-            body_state.cumulative_x = 0
-            body_state.cumulative_y = 0
-            body_state.cumulative_z = 0
-            body_state.cumulative_roll = 0
-            body_state.cumulative_pitch = 0
-            body_state.cumulative_yaw = 0
-        }
-
-        return body_state
-    }
-
-    map_command(command: ControllerCommand) {
-        const newCommand = {
-            step_height: 0.4 + (command.s1 + 1) / 2,
-            step_x: command.ly,
-            step_z: -command.lx,
-            step_velocity: command.s,
-            step_angle: command.rx,
-            step_depth: 0.002
-        }
-
-        this.gait_state = newCommand
-    }
+    this.gait_state = newCommand
+  }
 }
 
 export class IdleState extends GaitState {
-    protected name = 'Idle'
-
-    step(body_state: body_state_t, command: ControllerCommand) {
-        super.step(body_state, command)
-        return body_state
-    }
+  protected name = 'Idle'
 }
 
 export class CalibrationState extends GaitState {
-    protected name = 'Calibration'
+  protected name = 'Calibration'
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    step(body_state: body_state_t, _command: ControllerCommand) {
-        super.step(body_state, _command)
-        body_state.omega = 0
-        body_state.phi = 0
-        body_state.psi = 0
-        body_state.xm = 0
-        body_state.ym = this.default_height * 10
-        body_state.zm = 0
-        body_state.feet = this.default_feet_pos
-        return body_state
-    }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  step(body_state: body_state_t, _command: ControllerCommand) {
+    body_state.omega = 0
+    body_state.phi = 0
+    body_state.psi = 0
+    body_state.xm = 0
+    body_state.ym = this.default_height * 10
+    body_state.zm = 0
+    body_state.feet = this.default_feet_pos
+    return body_state
+  }
 }
 
 export class RestState extends GaitState {
-    protected name = 'Rest'
+  protected name = 'Rest'
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    step(body_state: body_state_t, _command: ControllerCommand) {
-        super.step(body_state, _command)
-        body_state.omega = 0
-        body_state.phi = 0
-        body_state.psi = 0
-        body_state.xm = 0
-        body_state.ym = this.default_height / 2
-        body_state.zm = 0
-        body_state.feet = this.default_feet_pos
-        return body_state
-    }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  step(body_state: body_state_t, _command: ControllerCommand) {
+    body_state.omega = 0
+    body_state.phi = 0
+    body_state.psi = 0
+    body_state.xm = 0
+    body_state.ym = this.default_height / 2
+    body_state.zm = 0
+    body_state.feet = this.default_feet_pos
+    return body_state
+  }
 }
 
 export class StandState extends GaitState {
-    protected name = 'Stand'
+  protected name = 'Stand'
 
-    step(body_state: body_state_t, command: ControllerCommand) {
-        super.step(body_state, command)
-        body_state.omega = 0
-        body_state.phi = command.rx * 10 * (Math.PI / 2)
-        body_state.psi = command.ry * 10 * (Math.PI / 2)
-        body_state.xm = command.ly / 4
-        body_state.zm = command.lx / 4
-        body_state.feet = this.default_feet_pos
-        return body_state
-    }
+  step(body_state: body_state_t, command: ControllerCommand) {
+    body_state.omega = 0
+    body_state.phi = command.rx * 10 * (Math.PI / 2)
+    body_state.psi = command.ry * 10 * (Math.PI / 2)
+    body_state.xm = command.ly / 4
+    body_state.zm = command.lx / 4
+    body_state.feet = this.default_feet_pos
+    return body_state
+  }
 }
 
 export class BezierState extends GaitState {
-    protected name = 'Bezier'
-    protected phase = 0
-    protected phase_num = 0
-    protected step_length = 0
-    protected stand_offset = 0.75
-    protected mode: 'crawl' | 'trot' = 'trot'
-    protected speed_factor = 1
-    offset = [0, 0.5, 0.75, 0.25]
+  protected name = 'Bezier'
+  protected phase = 0
+  protected phase_num = 0
+  protected step_length = 0
+  protected stand_offset = 0.85
+  protected mode: 'crawl' | 'trot' = 'trot'
+  protected speed_factor = 1
+  offset = [0, 0.5, 0.75, 0.25]
 
-    protected shift_start_pos = { x: 0, z: 0 }
-    protected shift_target_pos = { x: 0, z: 0 }
-    protected shift_start_time = 0
-    protected current_shift_leg = -1
+  protected shift_start_pos = { x: 0, z: 0 }
+  protected shift_target_pos = { x: 0, z: 0 }
+  protected shift_start_time = 0
+  protected current_shift_leg = -1
 
-    protected last_body_state: body_state_t | null = null
-    protected cumulative_position = { x: 0, y: 0, z: 0 }
-    protected cumulative_orientation = { roll: 0, pitch: 0, yaw: 0 }
+  constructor() {
+    super()
+    this.set_mode(this.mode)
+  }
 
-    constructor() {
-        super()
-        this.set_mode(this.mode)
+  begin() {
+    super.begin()
+  }
+
+  set_mode(mode: 'crawl' | 'trot', duty?: number, order?: [number, number, number, number]) {
+    console.log('BezierState set_mode', mode)
+
+    this.mode = mode
+    if (mode === 'crawl') {
+      this.speed_factor = 0.5
+      this.stand_offset = duty ?? 0.85
+      const o = order ?? [3, 0, 2, 1]
+      const base = [0, 0.25, 0.5, 0.75]
+      const offsets = new Array(4).fill(0)
+      for (let i = 0; i < 4; i++) offsets[o[i]] = base[i]
+      this.offset = offsets
+    } else {
+      this.speed_factor = 2
+      this.stand_offset = duty ?? 0.6
+      this.offset = order ? (order.map(v => v % 1) as number[]) : [0, 0.5, 0.5, 0]
     }
+  }
 
-    begin() {
-        super.begin()
+  end() {
+    super.end()
+  }
+
+  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+    super.step(body_state, command, dt)
+    this.step_length = Math.sqrt(this.gait_state.step_x ** 2 + this.gait_state.step_z ** 2)
+    if (this.gait_state.step_x < 0) this.step_length = -this.step_length
+    this.update_phase()
+    this.update_body_position()
+    this.update_feet_positions()
+    return this.body_state
+  }
+
+  update_phase() {
+    const m = this.gait_state
+    if (m.step_x === 0 && m.step_z === 0 && m.step_angle === 0) {
+      this.phase = 0
+      return
     }
+    this.phase += this.dt * m.step_velocity * this.speed_factor
+    if (this.phase >= 1) {
+      this.phase_num = (this.phase_num + 1) % 2
+      this.phase = 0
+    }
+  }
 
-    set_mode(mode: 'crawl' | 'trot', duty?: number, order?: [number, number, number, number]) {
-        console.log('BezierState set_mode', mode)
+  update_body_position() {
+    const m = this.gait_state
+    const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0
+    if (!moving) return
 
-        this.mode = mode
-        if (mode === 'crawl') {
-            this.speed_factor = 0.5
-            this.stand_offset = duty ?? 0.85
-            const o = order ?? [3, 0, 2, 1]
-            const base = [0, 0.25, 0.5, 0.75]
-            const offsets = new Array(4).fill(0)
-            for (let i = 0; i < 4; i++) offsets[o[i]] = base[i]
-            this.offset = offsets
-        } else {
-            this.speed_factor = 2
-            this.stand_offset = duty ?? 0.6
-            this.offset = order ? (order.map(v => v % 1) as number[]) : [0, 0.5, 0.5, 0]
+    if (this.mode !== 'crawl') return
+
+    const { stance, swing, next_swing, time_to_lift } = this.get_leg_states()
+
+    if (stance.length >= 3 && swing.length === 0 && next_swing !== -1) {
+      if (this.current_shift_leg !== next_swing) {
+        this.current_shift_leg = next_swing
+        this.shift_start_pos.x = this.body_state.xm
+        this.shift_start_pos.z = this.body_state.zm
+
+        const remaining_legs = stance.filter(leg => leg !== next_swing)
+        const target = this.stance_centroid(remaining_legs)
+        this.shift_target_pos.x = target[0]
+        this.shift_target_pos.z = target[2]
+
+        this.shift_start_time = time_to_lift
+      }
+
+      const total_time = this.shift_start_time
+      const progress = total_time > 0 ? 1 - time_to_lift / total_time : 1
+      const smooth_progress = this.smoothstep01(Math.max(0, Math.min(1, progress)))
+
+      this.body_state.xm = this.lerp(
+        this.shift_start_pos.x,
+        this.shift_target_pos.x,
+        smooth_progress
+      )
+      this.body_state.zm = this.lerp(
+        this.shift_start_pos.z,
+        this.shift_target_pos.z,
+        smooth_progress
+      )
+    }
+  }
+
+  protected lerp(a: number, b: number, t: number): number {
+    return a + (b - a) * t
+  }
+
+  protected stance_centroid(legs: number[]): number[] {
+    if (legs.length === 0) return [this.body_state.xm, 0, this.body_state.zm]
+
+    let sx = 0,
+      sz = 0
+    for (const i of legs) {
+      sx += this.body_state.feet[i][0]
+      sz += this.body_state.feet[i][2]
+    }
+    return [sx / legs.length, 0, sz / legs.length]
+  }
+
+  protected get_leg_states(): {
+    stance: number[]
+    swing: number[]
+    next_swing: number
+    time_to_lift: number
+  } {
+    const stance: number[] = []
+    const swing: number[] = []
+    let next_swing = -1
+    let min_time_to_swing = Infinity
+
+    for (let i = 0; i < 4; i++) {
+      let phase = this.phase + this.offset[i]
+      if (phase >= 1) phase -= 1
+
+      if (phase <= this.stand_offset) {
+        stance.push(i)
+        const time_to_swing = this.stand_offset - phase
+        if (time_to_swing < min_time_to_swing) {
+          min_time_to_swing = time_to_swing
+          next_swing = i
         }
+      } else {
+        swing.push(i)
+      }
     }
 
-    end() {
-        super.end()
-    }
+    return { stance, swing, next_swing, time_to_lift: min_time_to_swing }
+  }
 
-    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-        super.step(body_state, command, dt)
-        this.step_length = Math.sqrt(this.gait_state.step_x ** 2 + this.gait_state.step_z ** 2)
-        if (this.gait_state.step_x < 0) this.step_length = -this.step_length
-        this.update_phase()
-        this.update_body_position()
-        this.update_feet_positions()
-        this.update_cumulative_position()
-        return this.body_state
-    }
+  protected smoothstep01(t: number): number {
+    const x = Math.max(0, Math.min(1, t))
+    return x * x * (3 - 2 * x)
+  }
 
-    update_phase() {
-        const m = this.gait_state
-        if (m.step_x === 0 && m.step_z === 0 && m.step_angle === 0) {
-            this.phase = 0
-            return
-        }
-        this.phase += this.dt * m.step_velocity * this.speed_factor
-        if (this.phase >= 1) {
-            this.phase_num = (this.phase_num + 1) % 2
-            this.phase = 0
-        }
-    }
+  update_feet_positions() {
+    for (let i = 0; i < 4; i++) this.body_state.feet[i] = this.update_foot_position(i)
+  }
 
-    update_body_position() {
-        const m = this.gait_state
-        const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0
-        if (!moving) return
+  update_foot_position(index: number): number[] {
+    let phase = this.phase + this.offset[index]
+    if (phase >= 1) phase -= 1
+    this.body_state.feet[index][0] = this.default_feet_pos[index][0]
+    this.body_state.feet[index][1] = this.default_feet_pos[index][1]
+    this.body_state.feet[index][2] = this.default_feet_pos[index][2]
+    return phase <= this.stand_offset ?
+        this.stand_controller(index, phase / this.stand_offset)
+      : this.swing_controller(index, (phase - this.stand_offset) / (1 - this.stand_offset))
+  }
 
-        if (this.mode !== 'crawl') return
+  stand_controller(index: number, phase: number) {
+    const depth = this.gait_state.step_depth
+    return this.controller(index, phase, stance_curve, depth)
+  }
 
-        const { stance, swing, next_swing, time_to_lift } = this.get_leg_states()
+  swing_controller(index: number, phase: number) {
+    const height = this.gait_state.step_height
+    return this.controller(index, phase, bezier_curve, height)
+  }
 
-        if (stance.length >= 3 && swing.length === 0 && next_swing !== -1) {
-            if (this.current_shift_leg !== next_swing) {
-                this.current_shift_leg = next_swing
-                this.shift_start_pos.x = this.body_state.xm
-                this.shift_start_pos.z = this.body_state.zm
+  controller(
+    index: number,
+    phase: number,
+    controller: (length: number, angle: number, ...args: number[]) => number[],
+    ...args: number[]
+  ) {
+    let length = this.step_length / 2
+    let angle = Math.atan2(this.gait_state.step_z, this.step_length) * 2
+    const delta_pos = controller(length, angle, ...args, phase)
 
-                const remaining_legs = stance.filter(leg => leg !== next_swing)
-                const target = this.stance_centroid(remaining_legs)
-                this.shift_target_pos.x = target[0]
-                this.shift_target_pos.z = target[2]
+    length = this.gait_state.step_angle * 2
+    angle = yawArc(this.default_feet_pos[index], this.body_state.feet[index])
 
-                this.shift_start_time = time_to_lift
-            }
+    const delta_rot = controller(length, angle, ...args, phase)
 
-            const total_time = this.shift_start_time
-            const progress = total_time > 0 ? 1 - time_to_lift / total_time : 1
-            const smooth_progress = this.smoothstep01(Math.max(0, Math.min(1, progress)))
+    this.body_state.feet[index][0] += delta_pos[0] + delta_rot[0] * 0.2
+    this.body_state.feet[index][2] += delta_pos[2] + delta_rot[2] * 0.2
+    if (this.gait_state.step_x || this.gait_state.step_z || this.gait_state.step_angle)
+      this.body_state.feet[index][1] += delta_pos[1] + delta_rot[1] * 0.2
 
-            this.body_state.xm = this.lerp(
-                this.shift_start_pos.x,
-                this.shift_target_pos.x,
-                smooth_progress
-            )
-            this.body_state.zm = this.lerp(
-                this.shift_start_pos.z,
-                this.shift_target_pos.z,
-                smooth_progress
-            )
-        }
-    }
-
-    protected lerp(a: number, b: number, t: number): number {
-        return a + (b - a) * t
-    }
-
-    protected stance_centroid(legs: number[]): number[] {
-        if (legs.length === 0) return [this.body_state.xm, 0, this.body_state.zm]
-
-        let sx = 0,
-            sz = 0
-        for (const i of legs) {
-            sx += this.body_state.feet[i][0]
-            sz += this.body_state.feet[i][2]
-        }
-        return [sx / legs.length, 0, sz / legs.length]
-    }
-
-    protected get_leg_states(): {
-        stance: number[]
-        swing: number[]
-        next_swing: number
-        time_to_lift: number
-    } {
-        const stance: number[] = []
-        const swing: number[] = []
-        let next_swing = -1
-        let min_time_to_swing = Infinity
-
-        for (let i = 0; i < 4; i++) {
-            let phase = this.phase + this.offset[i]
-            if (phase >= 1) phase -= 1
-
-            if (phase <= this.stand_offset) {
-                stance.push(i)
-                const time_to_swing = this.stand_offset - phase
-                if (time_to_swing < min_time_to_swing) {
-                    min_time_to_swing = time_to_swing
-                    next_swing = i
-                }
-            } else {
-                swing.push(i)
-            }
-        }
-
-        return { stance, swing, next_swing, time_to_lift: min_time_to_swing }
-    }
-
-    protected smoothstep01(t: number): number {
-        const x = Math.max(0, Math.min(1, t))
-        return x * x * (3 - 2 * x)
-    }
-
-    update_feet_positions() {
-        for (let i = 0; i < 4; i++) this.body_state.feet[i] = this.update_foot_position(i)
-    }
-
-    update_foot_position(index: number): number[] {
-        let phase = this.phase + this.offset[index]
-        if (phase >= 1) phase -= 1
-        this.body_state.feet[index][0] = this.default_feet_pos[index][0]
-        this.body_state.feet[index][1] = this.default_feet_pos[index][1]
-        this.body_state.feet[index][2] = this.default_feet_pos[index][2]
-        return phase <= this.stand_offset ?
-                this.stand_controller(index, phase / this.stand_offset)
-            :   this.swing_controller(index, (phase - this.stand_offset) / (1 - this.stand_offset))
-    }
-
-    stand_controller(index: number, phase: number) {
-        const depth = this.gait_state.step_depth
-        return this.controller(index, phase, stance_curve, depth)
-    }
-
-    swing_controller(index: number, phase: number) {
-        const height = this.gait_state.step_height
-        return this.controller(index, phase, bezier_curve, height)
-    }
-
-    controller(
-        index: number,
-        phase: number,
-        controller: (length: number, angle: number, ...args: number[]) => number[],
-        ...args: number[]
-    ) {
-        let length = this.step_length / 2
-        let angle = Math.atan2(this.gait_state.step_z, this.step_length) * 2
-        const delta_pos = controller(length, angle, ...args, phase)
-
-        length = this.gait_state.step_angle * 2
-        angle = yawArc(this.default_feet_pos[index], this.body_state.feet[index])
-
-        const delta_rot = controller(length, angle, ...args, phase)
-
-        this.body_state.feet[index][0] += delta_pos[0] + delta_rot[0] * 0.2
-        this.body_state.feet[index][2] += delta_pos[2] + delta_rot[2] * 0.2
-        if (this.gait_state.step_x || this.gait_state.step_z || this.gait_state.step_angle)
-            this.body_state.feet[index][1] += delta_pos[1] + delta_rot[1] * 0.2
-
-        return this.body_state.feet[index]
-    }
-
-    update_cumulative_position() {
-        if (this.last_body_state === null) {
-            this.last_body_state = { ...this.body_state }
-            this.body_state.cumulative_x = 0
-            this.body_state.cumulative_y = 0
-            this.body_state.cumulative_z = 0
-            this.body_state.cumulative_roll = 0
-            this.body_state.cumulative_pitch = 0
-            this.body_state.cumulative_yaw = 0
-            return
-        }
-
-        const m = this.gait_state
-        const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0
-
-        if (moving) {
-            const step_displacement_x_local =
-                m.step_x * m.step_velocity * this.dt * this.speed_factor
-            const step_displacement_z_local =
-                m.step_z * m.step_velocity * this.dt * this.speed_factor
-            const step_displacement_yaw =
-                m.step_angle * m.step_velocity * this.dt * this.speed_factor
-
-            const cos_yaw = Math.cos(this.cumulative_orientation.yaw)
-            const sin_yaw = Math.sin(this.cumulative_orientation.yaw)
-            const step_displacement_x =
-                step_displacement_x_local * cos_yaw - step_displacement_z_local * sin_yaw
-            const step_displacement_z =
-                step_displacement_x_local * sin_yaw + step_displacement_z_local * cos_yaw
-
-            this.cumulative_position.x += step_displacement_x
-            this.cumulative_position.z += step_displacement_z
-            this.cumulative_orientation.yaw += step_displacement_yaw
-        }
-
-        this.body_state.cumulative_x = this.cumulative_position.x
-        this.body_state.cumulative_y = this.cumulative_position.y
-        this.body_state.cumulative_z = this.cumulative_position.z
-        this.body_state.cumulative_roll = this.cumulative_orientation.roll
-        this.body_state.cumulative_pitch = this.cumulative_orientation.pitch
-        this.body_state.cumulative_yaw = this.cumulative_orientation.yaw
-
-        this.last_body_state = { ...this.body_state }
-    }
+    return this.body_state.feet[index]
+  }
 }
 
 const stance_curve = (length: number, angle: number, depth: number, phase: number): number[] => {
-    const X_POLAR = Math.cos(angle)
-    const Y_POLAR = Math.sin(angle)
+  const X_POLAR = Math.cos(angle)
+  const Y_POLAR = Math.sin(angle)
 
-    const step = length * (1 - 2 * phase)
-    const X = step * X_POLAR
-    const Z = step * Y_POLAR
-    let Y = 0
-    if (length !== 0) Y = -depth * Math.cos((Math.PI * (X + Y)) / (2 * length))
-    return [X, Y, Z]
+  const step = length * (1 - 2 * phase)
+  const X = step * X_POLAR
+  const Z = step * Y_POLAR
+  let Y = 0
+  if (length !== 0) Y = -depth * Math.cos((Math.PI * (X + Y)) / (2 * length))
+  return [X, Y, Z]
 }
 
 const yawArc = (default_foot_pos: number[], current_foot_pos: number[]): number => {
-    const foot_mag = Math.sqrt(default_foot_pos[0] ** 2 + default_foot_pos[2] ** 2)
-    const foot_dir = Math.atan2(default_foot_pos[2], default_foot_pos[0])
-    const offsets = [
-        current_foot_pos[0] - default_foot_pos[0],
-        current_foot_pos[2] - default_foot_pos[2],
-        current_foot_pos[1] - default_foot_pos[1]
-    ]
-    const offset_mag = Math.sqrt(offsets[0] ** 2 + offsets[2] ** 2)
-    const offset_mod = Math.atan2(offset_mag, foot_mag)
+  const foot_mag = Math.sqrt(default_foot_pos[0] ** 2 + default_foot_pos[2] ** 2)
+  const foot_dir = Math.atan2(default_foot_pos[2], default_foot_pos[0])
+  const offsets = [
+    current_foot_pos[0] - default_foot_pos[0],
+    current_foot_pos[2] - default_foot_pos[2],
+    current_foot_pos[1] - default_foot_pos[1]
+  ]
+  const offset_mag = Math.sqrt(offsets[0] ** 2 + offsets[2] ** 2)
+  const offset_mod = Math.atan2(offset_mag, foot_mag)
 
-    return Math.PI / 2.0 + foot_dir + offset_mod
+  return Math.PI / 2.0 + foot_dir + offset_mod
 }
 
 const bezier_curve = (length: number, angle: number, height: number, phase: number): number[] => {
-    const control_points = get_control_points(length, angle, height)
-    const n = control_points.length - 1
+  const control_points = get_control_points(length, angle, height)
+  const n = control_points.length - 1
 
-    const point = [0, 0, 0]
-    for (let i = 0; i <= n; i++) {
-        const bernstein_poly = comb(n, i) * Math.pow(phase, i) * Math.pow(1 - phase, n - i)
-        point[0] += bernstein_poly * control_points[i][0]
-        point[1] += bernstein_poly * control_points[i][1]
-        point[2] += bernstein_poly * control_points[i][2]
-    }
-    return point
+  const point = [0, 0, 0]
+  for (let i = 0; i <= n; i++) {
+    const bernstein_poly = comb(n, i) * Math.pow(phase, i) * Math.pow(1 - phase, n - i)
+    point[0] += bernstein_poly * control_points[i][0]
+    point[1] += bernstein_poly * control_points[i][1]
+    point[2] += bernstein_poly * control_points[i][2]
+  }
+  return point
 }
 
 const get_control_points = (length: number, angle: number, height: number): number[][] => {
-    const X_POLAR = Math.cos(angle)
-    const Z_POLAR = Math.sin(angle)
+  const X_POLAR = Math.cos(angle)
+  const Z_POLAR = Math.sin(angle)
 
-    const STEP = [
-        -length,
-        -length * 1.4,
-        -length * 1.5,
-        -length * 1.5,
-        -length * 1.5,
-        0.0,
-        0.0,
-        0.0,
-        length * 1.5,
-        length * 1.5,
-        length * 1.4,
-        length
-    ]
+  const STEP = [
+    -length,
+    -length * 1.4,
+    -length * 1.5,
+    -length * 1.5,
+    -length * 1.5,
+    0.0,
+    0.0,
+    0.0,
+    length * 1.5,
+    length * 1.5,
+    length * 1.4,
+    length
+  ]
 
-    const Y = [
-        0.0,
-        0.0,
-        height * 0.9,
-        height * 0.9,
-        height * 0.9,
-        height * 0.9,
-        height * 0.9,
-        height * 1.1,
-        height * 1.1,
-        height * 1.1,
-        0.0,
-        0.0
-    ]
+  const Y = [
+    0.0,
+    0.0,
+    height * 0.9,
+    height * 0.9,
+    height * 0.9,
+    height * 0.9,
+    height * 0.9,
+    height * 1.1,
+    height * 1.1,
+    height * 1.1,
+    0.0,
+    0.0
+  ]
 
-    const control_points: number[][] = []
+  const control_points: number[][] = []
 
-    for (let i = 0; i < STEP.length; i++) {
-        const X = STEP[i] * X_POLAR
-        const Z = STEP[i] * Z_POLAR
-        control_points.push([X, Y[i], Z])
-    }
+  for (let i = 0; i < STEP.length; i++) {
+    const X = STEP[i] * X_POLAR
+    const Z = STEP[i] * Z_POLAR
+    control_points.push([X, Y[i], Z])
+  }
 
-    return control_points
+  return control_points
 }
 
 const comb = (n: number, k: number): number => {
-    if (k < 0 || k > n) return 0
-    if (k === 0 || k === n) return 1
-    k = Math.min(k, n - k)
-    let c = 1
-    for (let i = 0; i < k; i++) c = (c * (n - i)) / (i + 1)
-    return c
+  if (k < 0 || k > n) return 0
+  if (k === 0 || k === n) return 1
+  k = Math.min(k, n - k)
+  let c = 1
+  for (let i = 0; i < k; i++) c = (c * (n - i)) / (i + 1)
+  return c
 }

app/src/lib/kinematic.ts

@@ -1,38 +1,32 @@
 export interface body_state_t {
-    omega: number
-    phi: number
-    psi: number
-    xm: number
-    ym: number
-    zm: number
-    feet: number[][]
-    cumulative_x: number
-    cumulative_y: number
-    cumulative_z: number
-    cumulative_roll: number
-    cumulative_pitch: number
-    cumulative_yaw: number
+  omega: number
+  phi: number
+  psi: number
+  xm: number
+  ym: number
+  zm: number
+  feet: number[][]
 }
 
 export interface position {
-    x: number
-    y: number
-    z: number
+  x: number
+  y: number
+  z: number
 }
 
 export interface target_position {
-    x: number
-    z: number
-    yaw: number
+  x: number
+  z: number
+  yaw: number
 }
 
 export interface KinematicParams {
-    coxa: number
-    coxa_offset: number
-    femur: number
-    tibia: number
-    L: number
-    W: number
+  coxa: number
+  coxa_offset: number
+  femur: number
+  tibia: number
+  L: number
+  W: number
 }
 
 const { cos, sin, atan2, acos, sqrt, max, min } = Math
@@ -40,114 +34,107 @@ const { cos, sin, atan2, acos, sqrt, max, min } = Math
 const DEG2RAD = 0.017453292519943
 
 export default class Kinematic {
-    coxa: number
-    coxa_offset: number
-    femur: number
-    tibia: number
+  coxa: number
+  coxa_offset: number
+  femur: number
+  tibia: number
 
-    L: number
-    W: number
+  L: number
+  W: number
 
-    DEG2RAD = DEG2RAD
+  DEG2RAD = DEG2RAD
 
-    mountOffsets: number[][]
+  mountOffsets: number[][]
 
-    invMountRot = [
-        [0, 0, -1],
-        [0, 1, 0],
-        [1, 0, 0]
+  invMountRot = [
+    [0, 0, -1],
+    [0, 1, 0],
+    [1, 0, 0]
+  ]
+
+  constructor(params: KinematicParams) {
+    this.coxa = params.coxa
+    this.coxa_offset = params.coxa_offset
+    this.femur = params.femur
+    this.tibia = params.tibia
+    this.L = params.L
+    this.W = params.W
+
+    this.mountOffsets = [
+      [this.L / 2, 0, this.W / 2],
+      [this.L / 2, 0, -this.W / 2],
+      [-this.L / 2, 0, this.W / 2],
+      [-this.L / 2, 0, -this.W / 2]
     ]
+  }
 
-    constructor(params: KinematicParams) {
-        this.coxa = params.coxa
-        this.coxa_offset = params.coxa_offset
-        this.femur = params.femur
-        this.tibia = params.tibia
-        this.L = params.L
-        this.W = params.W
+  getDefaultFeetPos(): number[][] {
+    return this.mountOffsets.map((offset, i) => {
+      return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.coxa : this.coxa)]
+    })
+  }
 
-        this.mountOffsets = [
-            [this.L / 2, 0, this.W / 2],
-            [this.L / 2, 0, -this.W / 2],
-            [-this.L / 2, 0, this.W / 2],
-            [-this.L / 2, 0, -this.W / 2]
-        ]
-    }
+  calcIK(p: body_state_t): number[] {
+    const roll = p.omega * this.DEG2RAD
+    const pitch = p.phi * this.DEG2RAD
+    const yaw = p.psi * this.DEG2RAD
+    const rot = this.euler2R(roll, pitch, yaw)
+    const inv_rot = [
+      [rot[0][0], rot[1][0], rot[2][0]],
+      [rot[0][1], rot[1][1], rot[2][1]],
+      [rot[0][2], rot[1][2], rot[2][2]]
+    ]
+    const inv_trans = [
+      -inv_rot[0][0] * p.xm - inv_rot[0][1] * p.ym - inv_rot[0][2] * p.zm,
+      -inv_rot[1][0] * p.xm - inv_rot[1][1] * p.ym - inv_rot[1][2] * p.zm,
+      -inv_rot[2][0] * p.xm - inv_rot[2][1] * p.ym - inv_rot[2][2] * p.zm
+    ]
+    return p.feet.flatMap((foot, i) => {
+      const [wx, wy, wz] = foot
+      const bx = inv_rot[0][0] * wx + inv_rot[0][1] * wy + inv_rot[0][2] * wz + inv_trans[0]
+      const by = inv_rot[1][0] * wx + inv_rot[1][1] * wy + inv_rot[1][2] * wz + inv_trans[1]
+      const bz = inv_rot[2][0] * wx + inv_rot[2][1] * wy + inv_rot[2][2] * wz + inv_trans[2]
 
-    getDefaultFeetPos(): number[][] {
-        return this.mountOffsets.map((offset, i) => {
-            return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.coxa : this.coxa)]
-        })
-    }
+      const [mx, my, mz] = this.mountOffsets[i]
+      const px = bx - mx,
+        py = by - my,
+        pz = bz - mz
 
-    calcIK(p: body_state_t): number[] {
-        const roll = p.omega * this.DEG2RAD
-        const pitch = p.phi * this.DEG2RAD
-        const yaw = p.psi * this.DEG2RAD
-        const rot = this.euler2R(roll, pitch, yaw)
-        const inv_rot = [
-            [rot[0][0], rot[1][0], rot[2][0]],
-            [rot[0][1], rot[1][1], rot[2][1]],
-            [rot[0][2], rot[1][2], rot[2][2]]
-        ]
-        const inv_trans = [
-            -inv_rot[0][0] * p.xm - inv_rot[0][1] * p.ym - inv_rot[0][2] * p.zm,
-            -inv_rot[1][0] * p.xm - inv_rot[1][1] * p.ym - inv_rot[1][2] * p.zm,
-            -inv_rot[2][0] * p.xm - inv_rot[2][1] * p.ym - inv_rot[2][2] * p.zm
-        ]
-        return p.feet.flatMap((foot, i) => {
-            const [wx, wy, wz] = foot
-            const bx = inv_rot[0][0] * wx + inv_rot[0][1] * wy + inv_rot[0][2] * wz + inv_trans[0]
-            const by = inv_rot[1][0] * wx + inv_rot[1][1] * wy + inv_rot[1][2] * wz + inv_trans[1]
-            const bz = inv_rot[2][0] * wx + inv_rot[2][1] * wy + inv_rot[2][2] * wz + inv_trans[2]
+      const lx =
+        this.invMountRot[0][0] * px + this.invMountRot[0][1] * py + this.invMountRot[0][2] * pz
+      const ly =
+        this.invMountRot[1][0] * px + this.invMountRot[1][1] * py + this.invMountRot[1][2] * pz
+      const lz =
+        this.invMountRot[2][0] * px + this.invMountRot[2][1] * py + this.invMountRot[2][2] * pz
 
-            const [mx, my, mz] = this.mountOffsets[i]
-            const px = bx - mx,
-                py = by - my,
-                pz = bz - mz
+      const xLocal = i % 2 === 1 ? -lx : lx
+      return this.legIK(xLocal, ly, lz)
+    })
+  }
 
-            const lx =
-                this.invMountRot[0][0] * px +
-                this.invMountRot[0][1] * py +
-                this.invMountRot[0][2] * pz
-            const ly =
-                this.invMountRot[1][0] * px +
-                this.invMountRot[1][1] * py +
-                this.invMountRot[1][2] * pz
-            const lz =
-                this.invMountRot[2][0] * px +
-                this.invMountRot[2][1] * py +
-                this.invMountRot[2][2] * pz
+  private legIK(x: number, y: number, z: number): [number, number, number] {
+    const F = sqrt(max(0, x * x + y * y - this.coxa * this.coxa))
+    const G = F - this.coxa_offset
+    const H = sqrt(G * G + z * z)
+    const t1 = -atan2(y, x) - atan2(F, -this.coxa)
+    const D =
+      (H * H - this.femur * this.femur - this.tibia * this.tibia) / (2 * this.femur * this.tibia)
+    const t3 = acos(max(-1, min(1, D)))
+    const t2 = atan2(z, G) - atan2(this.tibia * sin(t3), this.femur + this.tibia * cos(t3))
+    return [t1, t2, t3]
+  }
 
-            const xLocal = i % 2 === 1 ? -lx : lx
-            return this.legIK(xLocal, ly, lz)
-        })
-    }
-
-    private legIK(x: number, y: number, z: number): [number, number, number] {
-        const F = sqrt(max(0, x * x + y * y - this.coxa * this.coxa))
-        const G = F - this.coxa_offset
-        const H = sqrt(G * G + z * z)
-        const t1 = -atan2(y, x) - atan2(F, -this.coxa)
-        const D =
-            (H * H - this.femur * this.femur - this.tibia * this.tibia) /
-            (2 * this.femur * this.tibia)
-        const t3 = acos(max(-1, min(1, D)))
-        const t2 = atan2(z, G) - atan2(this.tibia * sin(t3), this.femur + this.tibia * cos(t3))
-        return [t1, t2, t3]
-    }
-
-    private euler2R(roll: number, pitch: number, yaw: number): number[][] {
-        const cr = cos(roll),
-            sr = sin(roll)
-        const cp = cos(pitch),
-            sp = sin(pitch)
-        const cy = cos(yaw),
-            sy = sin(yaw)
-        return [
-            [cp * cy, -cp * sy, sp],
-            [sr * sp * cy + sy * cr, -sr * sp * sy + cr * cy, -sr * cp],
-            [sr * sy - sp * cr * cy, sr * cy + sp * sy * cr, cr * cp]
-        ]
-    }
+  private euler2R(roll: number, pitch: number, yaw: number): number[][] {
+    const cr = cos(roll),
+      sr = sin(roll)
+    const cp = cos(pitch),
+      sp = sin(pitch)
+    const cy = cos(yaw),
+      sy = sin(yaw)
+    return [
+      [cp * cy, -cp * sy, sp],
+      [sr * sp * cy + sy * cr, -sr * sp * sy + cr * cy, -sr * cp],
+      [sr * sy - sp * cr * cy, sr * cy + sp * sy * cr, cr * cp]
+    ]
+  }
 }

app/src/lib/sceneBuilder.ts

@@ -1,348 +1,380 @@
 import {
-    Mesh,
-    PerspectiveCamera,
-    PlaneGeometry,
-    Scene,
-    WebGLRenderer,
-    AmbientLight,
-    DirectionalLight,
-    PCFSoftShadowMap,
-    type GridHelper,
-    ArrowHelper,
-    Vector3,
-    FogExp2,
-    CanvasTexture,
-    type ColorRepresentation,
-    type WebGLRendererParameters,
-    MeshPhongMaterial,
-    EquirectangularReflectionMapping,
-    ACESFilmicToneMapping,
-    Group,
-    MeshBasicMaterial,
-    RepeatWrapping,
-    Object3D
+  Mesh,
+  PerspectiveCamera,
+  PlaneGeometry,
+  Scene,
+  WebGLRenderer,
+  AmbientLight,
+  DirectionalLight,
+  PCFSoftShadowMap,
+  type GridHelper,
+  ArrowHelper,
+  Vector3,
+  FogExp2,
+  CanvasTexture,
+  type ColorRepresentation,
+  type WebGLRendererParameters,
+  MeshPhongMaterial,
+  EquirectangularReflectionMapping,
+  ACESFilmicToneMapping,
+  MathUtils,
+  Group,
+  MeshBasicMaterial,
+  RepeatWrapping
 } from 'three'
+import { Sky } from 'three/addons/objects/Sky.js'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
 import { Reflector } from 'three/examples/jsm/objects/Reflector.js'
 import { type URDFJoint, type URDFMimicJoint, type URDFRobot } from 'urdf-loader'
 import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls'
+import { sunCalculator } from './utilities/position-utilities'
 
 export const addScene = () => new Scene()
 
 interface position {
-    x?: number
-    y?: number
-    z?: number
+  x?: number
+  y?: number
+  z?: number
 }
 
 interface light {
-    color?: ColorRepresentation
-    intensity?: number
+  color?: ColorRepresentation
+  intensity?: number
 }
 
 interface arrowOptions {
-    origin: position
-    direction: position
-    length?: number
-    color?: ColorRepresentation
+  origin: position
+  direction: position
+  length?: number
+  color?: ColorRepresentation
 }
 
 type directionalLight = position & light
 
 export default class SceneBuilder {
-    public scene: Scene
-    public camera!: PerspectiveCamera
-    public ground!: Mesh
-    public renderer!: WebGLRenderer
-    public orbit: OrbitControls
-    public callback: (() => void) | undefined
-    public gridHelper!: GridHelper
-    public model!: URDFRobot
-    public liveStreamTexture!: CanvasTexture
-    private fog!: FogExp2
-    private isLoaded: boolean = false
-    public isDragging: boolean = false
-    transformControl: TransformControls
-    public modelGroup!: Group
+  public scene: Scene
+  public camera!: PerspectiveCamera
+  public ground!: Mesh
+  public renderer!: WebGLRenderer
+  public orbit: OrbitControls
+  public callback: Function | undefined
+  public gridHelper!: GridHelper
+  public model!: URDFRobot
+  public liveStreamTexture!: CanvasTexture
+  private fog!: FogExp2
+  private isLoaded: boolean = false
+  public isDragging: boolean = false
+  highlightMaterial: any
+  sky!: Sky
+  transformControl: TransformControls
+  public modelGroup!: Group
 
-    constructor() {
-        this.scene = new Scene()
-        if (this.scene.environment?.mapping) {
-            this.scene.environment.mapping = EquirectangularReflectionMapping
+  constructor() {
+    this.scene = new Scene()
+    if (this.scene.environment?.mapping) {
+      this.scene.environment.mapping = EquirectangularReflectionMapping
+    }
+    return this
+  }
+
+  public addRenderer = (parameters?: WebGLRendererParameters) => {
+    this.renderer = new WebGLRenderer(parameters)
+    this.renderer.outputColorSpace = 'srgb'
+    this.renderer.shadowMap.enabled = true
+    this.renderer.shadowMap.type = PCFSoftShadowMap
+    this.renderer.toneMapping = ACESFilmicToneMapping
+    this.renderer.toneMappingExposure = 0.85
+    if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement)
+    return this
+  }
+
+  public addSky = () => {
+    this.sky = new Sky()
+    this.sky.scale.setScalar(450000)
+    this.scene.add(this.sky)
+    const effectController = {
+      turbidity: 10,
+      rayleigh: 3,
+      mieCoefficient: 0.005,
+      mieDirectionalG: 0.7,
+      elevation: sunCalculator.calculateSunElevation(),
+      azimuth: 200,
+      exposure: this.renderer.toneMappingExposure
+    }
+    const uniforms = this.sky.material.uniforms
+    uniforms['turbidity'].value = effectController.turbidity
+    uniforms['rayleigh'].value = effectController.rayleigh
+    uniforms['mieCoefficient'].value = effectController.mieCoefficient
+    uniforms['mieDirectionalG'].value = effectController.mieDirectionalG
+    this.renderer.toneMappingExposure = 0.5
+    const phi = MathUtils.degToRad(90 - effectController.elevation)
+    const theta = MathUtils.degToRad(effectController.azimuth)
+    const sun = new Vector3()
+
+    sun.setFromSphericalCoords(1, phi, theta)
+    uniforms['sunPosition'].value.copy(sun)
+    return this
+  }
+
+  public addPerspectiveCamera = (options: position) => {
+    this.camera = new PerspectiveCamera()
+    this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0)
+    this.scene.add(this.camera)
+    return this
+  }
+
+  public addGroundPlane = (options?: position) => {
+    const checkerboardTexture = this.createCheckerboardTexture(1024, 2)
+    checkerboardTexture.wrapS = RepeatWrapping
+    checkerboardTexture.wrapT = RepeatWrapping
+    checkerboardTexture.repeat.set(100, 100)
+    const checkerboardMat = new MeshBasicMaterial({
+      map: checkerboardTexture,
+      opacity: 0.1,
+      transparent: true
+    })
+
+    const plane = new PlaneGeometry(400, 400)
+
+    this.ground = new Mesh(plane, checkerboardMat)
+    this.ground.rotation.x = -Math.PI / 2
+    this.ground.position.set(options?.x ?? 0, options?.y ?? 0.01, options?.z ?? 0)
+    this.ground.receiveShadow = true
+    this.scene.add(this.ground)
+
+    const mirror = new Reflector(plane, {
+      clipBias: 0.003,
+      textureWidth: window.innerWidth * window.devicePixelRatio,
+      textureHeight: window.innerHeight * window.devicePixelRatio,
+      color: 0x00bfff
+    })
+    mirror.rotateX(-Math.PI / 2)
+    this.scene.add(mirror)
+
+    return this
+  }
+
+  public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
+    this.orbit = new OrbitControls(this.camera, this.renderer.domElement)
+    this.orbit.minDistance = minDistance + (maxDistance - minDistance) / 2
+    this.orbit.maxDistance = maxDistance
+    this.orbit.autoRotate = autoRotate
+    this.orbit.update()
+    this.orbit.minDistance = minDistance
+    return this
+  }
+
+  public addAmbientLight = (options: light) => {
+    const ambientLight = new AmbientLight(options.color, options.intensity)
+    this.scene.add(ambientLight)
+    return this
+  }
+
+  public addDirectionalLight = (options: directionalLight) => {
+    const directionalLight = new DirectionalLight(options.color, options.intensity)
+    directionalLight.castShadow = true
+    directionalLight.shadow.camera.top = 10
+    directionalLight.shadow.camera.bottom = -10
+    directionalLight.shadow.camera.right = 10
+    directionalLight.shadow.camera.left = -10
+    directionalLight.shadow.mapSize.set(4096, 4096)
+
+    directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0)
+    this.scene.add(directionalLight)
+    return this
+  }
+
+  private createCheckerboardTexture = (size: number, squares: number) => {
+    const canvas = document.createElement('canvas')
+    canvas.width = size
+    canvas.height = size
+    const context = canvas.getContext('2d')
+
+    const squareSize = size / squares
+
+    for (let y = 0; y < squares; y++) {
+      for (let x = 0; x < squares; x++) {
+        context!.fillStyle = (x + y) % 2 === 0 ? '#ffffff' : '#000000'
+        context!.fillRect(x * squareSize, y * squareSize, squareSize, squareSize)
+      }
+    }
+
+    const texture = new CanvasTexture(canvas)
+    texture.wrapS = texture.wrapT = RepeatWrapping
+    texture.anisotropy = 16
+    return texture
+  }
+
+  public addFogExp2 = (color: ColorRepresentation, density?: number) => {
+    this.scene.fog = new FogExp2(color, density)
+    return this
+  }
+
+  public fillParent = () => {
+    const parentElement = this.renderer.domElement.parentElement
+    if (parentElement) {
+      const width = parentElement.clientWidth
+      const height = parentElement.clientHeight
+      this.handleResize(width, height)
+    }
+    return this
+  }
+
+  public handleResize = (width = window.innerWidth, height = window.innerHeight) => {
+    this.renderer.setSize(width, height)
+    this.renderer.setPixelRatio(window.devicePixelRatio)
+    this.camera.aspect = width / height
+    this.camera.updateProjectionMatrix()
+    return this
+  }
+
+  public addRenderCb = (callback: Function) => {
+    this.callback = callback
+    return this
+  }
+
+  public startRenderLoop = () => {
+    this.renderer.setAnimationLoop(() => {
+      this.renderer.render(this.scene, this.camera)
+      this.orbit.update()
+      this.handleRobotShadow()
+      if (this.callback) this.callback()
+      if (!this.liveStreamTexture) return
+    })
+    return this
+  }
+
+  public addArrowHelper = (options?: arrowOptions) => {
+    const dir = new Vector3(
+      options?.direction.x ?? 0,
+      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
+  }
+
+  private setJointValue(jointName: string, angle: number) {
+    if (!this.model) return
+    if (!this.model.joints[jointName]) return
+    this.model.joints[jointName].setJointValue(angle)
+  }
+
+  isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed'
+
+  highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
+    const traverse = (c: any) => {
+      if (c.type === 'Mesh') {
+        if (revert) {
+          c.material = c.__origMaterial
+          delete c.__origMaterial
+        } else {
+          c.__origMaterial = c.material
+          c.material = material
         }
-        return this
-    }
+      }
 
-    public addRenderer = (parameters?: WebGLRendererParameters) => {
-        this.renderer = new WebGLRenderer(parameters)
-        this.renderer.outputColorSpace = 'srgb'
-        this.renderer.shadowMap.enabled = true
-        this.renderer.shadowMap.type = PCFSoftShadowMap
-        this.renderer.toneMapping = ACESFilmicToneMapping
-        this.renderer.toneMappingExposure = 0.85
-        if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement)
-        return this
-    }
-
-    public addPerspectiveCamera = (options: position) => {
-        this.camera = new PerspectiveCamera()
-        this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0)
-        this.scene.add(this.camera)
-        return this
-    }
-
-    public addGroundPlane = (options?: position) => {
-        const checkerboardTexture = this.createCheckerboardTexture(1024, 2)
-        checkerboardTexture.wrapS = RepeatWrapping
-        checkerboardTexture.wrapT = RepeatWrapping
-        checkerboardTexture.repeat.set(100, 100)
-        const checkerboardMat = new MeshBasicMaterial({
-            map: checkerboardTexture,
-            opacity: 0.1,
-            transparent: true
-        })
-
-        const plane = new PlaneGeometry(400, 400)
-
-        this.ground = new Mesh(plane, checkerboardMat)
-        this.ground.rotation.x = -Math.PI / 2
-        this.ground.position.set(options?.x ?? 0, options?.y ?? 0.01, options?.z ?? 0)
-        this.ground.receiveShadow = true
-        this.scene.add(this.ground)
-
-        const mirror = new Reflector(plane, {
-            clipBias: 0.003,
-            textureWidth: window.innerWidth * window.devicePixelRatio,
-            textureHeight: window.innerHeight * window.devicePixelRatio,
-            color: 0x00bfff
-        })
-        mirror.rotateX(-Math.PI / 2)
-        this.scene.add(mirror)
-
-        return this
-    }
-
-    public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
-        this.orbit = new OrbitControls(this.camera, this.renderer.domElement)
-        this.orbit.minDistance = minDistance + (maxDistance - minDistance) / 2
-        this.orbit.maxDistance = maxDistance
-        this.orbit.autoRotate = autoRotate
-        this.orbit.update()
-        this.orbit.minDistance = minDistance
-        return this
-    }
-
-    public addAmbientLight = (options: light) => {
-        const ambientLight = new AmbientLight(options.color, options.intensity)
-        this.scene.add(ambientLight)
-        return this
-    }
-
-    public addDirectionalLight = (options: directionalLight) => {
-        const directionalLight = new DirectionalLight(options.color, options.intensity)
-        directionalLight.castShadow = true
-        directionalLight.shadow.camera.top = 10
-        directionalLight.shadow.camera.bottom = -10
-        directionalLight.shadow.camera.right = 10
-        directionalLight.shadow.camera.left = -10
-        directionalLight.shadow.mapSize.set(4096, 4096)
-
-        directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0)
-        this.scene.add(directionalLight)
-        return this
-    }
-
-    private createCheckerboardTexture = (size: number, squares: number) => {
-        const canvas = document.createElement('canvas')
-        canvas.width = size
-        canvas.height = size
-        const context = canvas.getContext('2d')
-
-        const squareSize = size / squares
-
-        for (let y = 0; y < squares; y++) {
-            for (let x = 0; x < squares; x++) {
-                context!.fillStyle = (x + y) % 2 === 0 ? '#ffffff' : '#000000'
-                context!.fillRect(x * squareSize, y * squareSize, squareSize, squareSize)
-            }
+      if (c === m || !this.isJoint(c)) {
+        for (let i = 0; i < c.children.length; i++) {
+          const child = c.children[i]
+          if (!child.isURDFCollider) {
+            traverse(c.children[i])
+          }
         }
-
-        const texture = new CanvasTexture(canvas)
-        texture.wrapS = texture.wrapT = RepeatWrapping
-        texture.anisotropy = 16
-        return texture
+      }
     }
+    traverse(m)
+  }
 
-    public addFogExp2 = (color: ColorRepresentation, density?: number) => {
-        this.scene.fog = new FogExp2(color, density)
-        return this
+  public addTransformControls = (model: any) => {
+    this.transformControl = new TransformControls(this.camera, this.renderer.domElement)
+    this.transformControl.addEventListener('dragging-changed', (event: any) => {
+      this.orbit.enabled = !event.value
+      this.isDragging = !event.value
+    })
+    this.transformControl.attach(model)
+    this.scene.add(this.transformControl)
+    this.transformControl.setMode('rotate')
+    return this
+  }
+
+  public addModel = (model: any) => {
+    this.modelGroup = new Group()
+    this.modelGroup.add(model)
+    this.model = model
+    this.scene.add(this.modelGroup)
+    return this
+  }
+
+  public addDragControl = (updateAngle: any) => {
+    const highlightColor = '#FFFFFF'
+    const highlightMaterial = new MeshPhongMaterial({
+      shininess: 10,
+      color: highlightColor,
+      emissive: highlightColor,
+      emissiveIntensity: 0.9
+    })
+
+    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)
     }
-
-    public fillParent = () => {
-        const parentElement = this.renderer.domElement.parentElement
-        if (parentElement) {
-            const width = parentElement.clientWidth
-            const height = parentElement.clientHeight
-            this.handleResize(width, height)
-        }
-        return this
+    dragControls.onDragStart = () => {
+      this.orbit.enabled = false
+      this.isDragging = true
     }
-
-    public handleResize = (width = window.innerWidth, height = window.innerHeight) => {
-        this.renderer.setSize(width, height)
-        this.renderer.setPixelRatio(window.devicePixelRatio)
-        this.camera.aspect = width / height
-        this.camera.updateProjectionMatrix()
-        return this
+    dragControls.onDragEnd = () => {
+      this.orbit.enabled = true
+      this.isDragging = false
     }
+    dragControls.onHover = (joint: URDFMimicJoint) =>
+      this.highlightLinkGeometry(joint, false, highlightMaterial)
+    dragControls.onUnhover = (joint: URDFMimicJoint) =>
+      this.highlightLinkGeometry(joint, true, highlightMaterial)
 
-    public addRenderCb = (callback: () => void) => {
-        this.callback = callback
-        return this
-    }
+    this.renderer.domElement.addEventListener(
+      'touchstart',
+      data => dragControls._mouseDown(data.touches[0]),
+      { passive: true }
+    )
+    this.renderer.domElement.addEventListener(
+      'touchmove',
+      data => dragControls._mouseMove(data.touches[0]),
+      { passive: true }
+    )
+    this.renderer.domElement.addEventListener(
+      'touchend',
+      data => dragControls._mouseUp(data.touches[0]),
+      { passive: true }
+    )
+    return this
+  }
 
-    public startRenderLoop = () => {
-        this.renderer.setAnimationLoop(() => {
-            this.renderer.render(this.scene, this.camera)
-            this.orbit.update()
-            this.handleRobotShadow()
-            if (this.callback) this.callback()
-            if (!this.liveStreamTexture) return
-        })
-        return this
-    }
+  public toggleFog = () => {
+    this.scene.fog = this.scene.fog ? null : this.fog
+  }
 
-    public addArrowHelper = (options?: arrowOptions) => {
-        const dir = new Vector3(
-            options?.direction.x ?? 0,
-            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
-    }
-
-    private setJointValue(jointName: string, angle: number) {
-        if (!this.model) return
-        if (!this.model.joints[jointName]) return
-        this.model.joints[jointName].setJointValue(angle)
-    }
-
-    isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed'
-
-    highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
-        const traverse = (c: Object3D) => {
-            if (c.type === 'Mesh') {
-                if (revert) {
-                    c.material = c.__origMaterial
-                    delete c.__origMaterial
-                } else {
-                    c.__origMaterial = c.material
-                    c.material = material
-                }
-            }
-
-            if (c === m || !this.isJoint(c)) {
-                for (let i = 0; i < c.children.length; i++) {
-                    const child = c.children[i]
-                    if (!child.isURDFCollider) {
-                        traverse(c.children[i])
-                    }
-                }
-            }
-        }
-        traverse(m)
-    }
-
-    public addTransformControls = (model: Object3D) => {
-        this.transformControl = new TransformControls(this.camera, this.renderer.domElement)
-        this.transformControl.addEventListener('dragging-changed', (event: { value: boolean }) => {
-            this.orbit.enabled = !event.value
-            this.isDragging = !event.value
-        })
-        this.transformControl.attach(model)
-        this.scene.add(this.transformControl)
-        this.transformControl.setMode('rotate')
-        return this
-    }
-
-    public addModel = (model: URDFRobot) => {
-        this.modelGroup = new Group()
-        this.modelGroup.add(model)
-        this.model = model
-        this.scene.add(this.modelGroup)
-        return this
-    }
-
-    public addDragControl = (updateAngle: (angles: Record<string, number>) => void) => {
-        const highlightColor = '#FFFFFF'
-        const highlightMaterial = new MeshPhongMaterial({
-            shininess: 10,
-            color: highlightColor,
-            emissive: highlightColor,
-            emissiveIntensity: 0.9
-        })
-
-        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 })
-        }
-        dragControls.onDragStart = () => {
-            this.orbit.enabled = false
-            this.isDragging = true
-        }
-        dragControls.onDragEnd = () => {
-            this.orbit.enabled = true
-            this.isDragging = false
-        }
-        dragControls.onHover = (joint: URDFMimicJoint) =>
-            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]),
-            { passive: true }
-        )
-        this.renderer.domElement.addEventListener(
-            'touchmove',
-            data => dragControls._mouseMove(data.touches[0]),
-            { passive: true }
-        )
-        this.renderer.domElement.addEventListener(
-            'touchend',
-            data => dragControls._mouseUp(data.touches[0]),
-            { passive: true }
-        )
-        return this
-    }
-
-    public toggleFog = () => {
-        this.scene.fog = this.scene.fog ? null : this.fog
-    }
-
-    private handleRobotShadow = () => {
-        if (this.isLoaded) return
-        const intervalId = setInterval(() => this.model?.traverse(c => (c.castShadow = true)), 10)
-        setTimeout(() => clearInterval(intervalId), 1000)
-        this.isLoaded = true
-    }
+  private handleRobotShadow = () => {
+    if (this.isLoaded) return
+    const intervalId = setInterval(() => this.model?.traverse(c => (c.castShadow = true)), 10)
+    setTimeout(() => clearInterval(intervalId), 1000)
+    this.isLoaded = true
+  }
 }

app/src/lib/services/file-service.ts

@@ -1,53 +1,54 @@
-import { Result } from '$lib/utilities/result'
-import { browser } from '$app/environment'
+import { Result } from '$lib/utilities/result';
+import { browser } from '$app/environment';
 
 class FileService {
-    private dbPromise: Promise<Result<IDBDatabase, string>> | null =
-        browser ? this.openDatabase() : null
+	private dbPromise: Promise<Result<IDBDatabase, string>> | null = browser
+		? this.openDatabase()
+		: null;
 
-    private async openDatabase(): Promise<Result<IDBDatabase, string>> {
-        return new Promise(resolve => {
-            const request = indexedDB.open('fileStorageDB', 1)
+	private async openDatabase(): Promise<Result<IDBDatabase, string>> {
+		return new Promise((resolve) => {
+			const request = indexedDB.open('fileStorageDB', 1);
 
-            request.onupgradeneeded = () => {
-                request.result.createObjectStore('files')
-            }
-            request.onsuccess = () => resolve(Result.ok(request.result))
-            request.onerror = () => resolve(Result.err('Error opening database'))
-        })
-    }
+			request.onupgradeneeded = () => {
+				request.result.createObjectStore('files');
+			};
+			request.onsuccess = () => resolve(Result.ok(request.result));
+			request.onerror = () => resolve(Result.err('Error opening database'));
+		});
+	}
 
-    private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
-        if (!browser || !this.dbPromise)
-            return Result.err('Not running in browser or DB not initialized')
-        const dbResult = await this.dbPromise
-        if (dbResult.isErr()) return Result.err('Database not initialized')
-        const store = dbResult.inner.transaction('files', mode).objectStore('files')
-        return Result.ok(store)
-    }
+	private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
+		if (!browser || !this.dbPromise)
+			return Result.err('Not running in browser or DB not initialized');
+		const dbResult = await this.dbPromise;
+		if (dbResult.isErr()) return Result.err('Database not initialized');
+		const store = dbResult.inner.transaction('files', mode).objectStore('files');
+		return Result.ok(store);
+	}
 
-    public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
-        const storeResult = await this.getStore('readwrite')
-        if (storeResult.isErr()) return Result.err('Failed to access store')
+	public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
+		const storeResult = await this.getStore('readwrite');
+		if (storeResult.isErr()) return Result.err('Failed to access store');
 
-        return new Promise(resolve => {
-            const request = storeResult.inner.put(file, key)
-            request.onsuccess = () => resolve(Result.ok(request.result))
-            request.onerror = () => resolve(Result.err('Failed to save file'))
-        })
-    }
+		return new Promise((resolve) => {
+			const request = storeResult.inner.put(file, key);
+			request.onsuccess = () => resolve(Result.ok(request.result));
+			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')
-        if (storeResult.isErr()) return Result.err('Failed to access store')
+	public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
+		const storeResult = await this.getStore('readonly');
+		if (storeResult.isErr()) return Result.err('Failed to access store');
 
-        return new Promise(resolve => {
-            const request = storeResult.inner.get(key)
-            request.onsuccess = () =>
-                resolve(request.result ? Result.ok(request.result) : Result.err('File not found'))
-            request.onerror = () => resolve(Result.err('Failed to retrieve file'))
-        })
-    }
+		return new Promise((resolve) => {
+			const request = storeResult.inner.get(key);
+			request.onsuccess = () =>
+				resolve(request.result ? Result.ok(request.result) : Result.err('File not found'));
+			request.onerror = () => resolve(Result.err('Failed to retrieve file'));
+		});
+	}
 }
 
-export default browser ? new FileService() : null
+export default browser ? new FileService() : null;

app/src/lib/services/index.ts

@@ -1,2 +1,2 @@
-export { default as fileService } from './file-service'
-export { default as resultService } from './result-service'
+export { default as fileService } from './file-service';
+export { default as resultService } from './result-service';

app/src/lib/services/result-service.ts

@@ -1,19 +1,19 @@
-import { errorLogs, latestErrorLog } from '$lib/stores'
-import type { Result } from '$lib/utilities'
+import { errorLogs, latestErrorLog } from '$lib/stores';
+import type { Result } from '$lib/utilities';
 
 class ResultService {
-    public handleResult(result: Result<unknown, string>, tag?: string) {
-        if (result.isErr()) {
-            const errorLogEntry = { tag, message: result.inner, exception: result.exception }
-            latestErrorLog.set(errorLogEntry)
-            errorLogs.update(entries => {
-                entries.push(errorLogEntry)
-                return entries
-            })
-        }
+	public handleResult(result: Result<unknown, string>, tag?: string) {
+		if (result.isErr()) {
+			const errorLogEntry = { tag, message: result.inner, exception: result.exception };
+			latestErrorLog.set(errorLogEntry);
+			errorLogs.update((entries) => {
+				entries.push(errorLogEntry);
+				return entries;
+			});
+		}
 
-        return result
-    }
+		return result;
+	}
 }
 
-export default new ResultService()
+export default new ResultService();

app/src/lib/stores/analytics.ts

@@ -1,69 +1,55 @@
-import { type Analytics } from '$lib/types/models'
-import { writable } from 'svelte/store'
+import { type Analytics } from '$lib/types/models';
+import { writable } from 'svelte/store';
 
-const analytics_data = {
-    uptime: <number[]>[],
-    free_heap: <number[]>[],
-    total_heap: <number[]>[],
-    used_heap: <number[]>[],
-    min_free_heap: <number[]>[],
-    max_alloc_heap: <number[]>[],
-    fs_used: <number[]>[],
-    fs_total: <number[]>[],
-    core_temp: <number[]>[],
-    cpu0_usage: <number[]>[],
-    cpu1_usage: <number[]>[],
-    cpu_usage: <number[]>[]
-}
+let analytics_data = {
+	uptime: <number[]>[],
+	free_heap: <number[]>[],
+	total_heap: <number[]>[],
+	used_heap: <number[]>[],
+	min_free_heap: <number[]>[],
+	max_alloc_heap: <number[]>[],
+	fs_used: <number[]>[],
+	fs_total: <number[]>[],
+	core_temp: <number[]>[],
+	cpu0_usage: <number[]>[],
+	cpu1_usage: <number[]>[],
+	cpu_usage: <number[]>[]
+};
 
-const maxAnalyticsData = 100
+const maxAnalyticsData = 100;
 
 function createAnalytics() {
-    const { subscribe, update } = writable(analytics_data)
+	const { subscribe, update } = writable(analytics_data);
 
-    return {
-        subscribe,
-        addData: (content: Analytics) => {
-            update(analytics_data => ({
-                ...analytics_data,
-                uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
-                free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(
-                    -maxAnalyticsData
-                ),
-                total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
-                    -maxAnalyticsData
-                ),
-                used_heap: [
-                    ...analytics_data.used_heap,
-                    (content.total_heap - content.free_heap) / 1000
-                ].slice(-maxAnalyticsData),
-                min_free_heap: [
-                    ...analytics_data.min_free_heap,
-                    content.min_free_heap / 1000
-                ].slice(-maxAnalyticsData),
-                max_alloc_heap: [
-                    ...analytics_data.max_alloc_heap,
-                    content.max_alloc_heap / 1000
-                ].slice(-maxAnalyticsData),
-                fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(
-                    -maxAnalyticsData
-                ),
-                fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(
-                    -maxAnalyticsData
-                ),
-                core_temp: [...analytics_data.core_temp, content.core_temp].slice(
-                    -maxAnalyticsData
-                ),
-                cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(
-                    -maxAnalyticsData
-                ),
-                cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(
-                    -maxAnalyticsData
-                ),
-                cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
-            }))
-        }
-    }
+	return {
+		subscribe,
+		addData: (content: Analytics) => {
+			update((analytics_data) => ({
+				...analytics_data,
+				uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
+				free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(-maxAnalyticsData),
+				total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
+					-maxAnalyticsData
+				),
+				used_heap: [
+					...analytics_data.used_heap,
+					(content.total_heap - content.free_heap) / 1000
+				].slice(-maxAnalyticsData),
+				min_free_heap: [...analytics_data.min_free_heap, content.min_free_heap / 1000].slice(
+					-maxAnalyticsData
+				),
+				max_alloc_heap: [...analytics_data.max_alloc_heap, content.max_alloc_heap / 1000].slice(
+					-maxAnalyticsData
+				),
+				fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(-maxAnalyticsData),
+				fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(-maxAnalyticsData),
+				core_temp: [...analytics_data.core_temp, content.core_temp].slice(-maxAnalyticsData),
+				cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(-maxAnalyticsData),
+				cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(-maxAnalyticsData),
+				cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
+			}));
+		}
+	};
 }
 
-export const analytics = createAnalytics()
+export const analytics = createAnalytics();

app/src/lib/stores/application.ts

@@ -1,67 +1,67 @@
-import { persistentStore } from '$lib/utilities'
-import { get, type Writable } from 'svelte/store'
+import { persistentStore } from '$lib/utilities';
+import { get, type Writable } from 'svelte/store';
 
-import Visualization from '$lib/components/Visualization.svelte'
-import Stream from '$lib/components/Stream.svelte'
-import ChartWidget from '$lib/components/widget/ChartWidget.svelte'
+import Visualization from '$lib/components/Visualization.svelte';
+import Stream from '$lib/components/Stream.svelte';
+import ChartWidget from '$lib/components/widget/ChartWidget.svelte';
 
 export interface WidgetConfig {
-    id: string | number
-    component: keyof typeof WidgetComponents
-    props?: Record<string, unknown>
+	id: string | number;
+	component: keyof typeof WidgetComponents;
+	props?: Record<string, any>;
 }
 
 export interface WidgetContainerConfig {
-    id: string | number
-    layout?: 'row' | 'column' | 'wrap'
-    header?: string
-    widgets: Array<WidgetConfig | WidgetContainerConfig>
+	id: string | number;
+	layout?: 'row' | 'column' | 'wrap';
+	header?: string;
+	widgets: Array<WidgetConfig | WidgetContainerConfig>;
 }
 
 export const isWidgetConfig = (
-    widget: WidgetConfig | WidgetContainerConfig
-): widget is WidgetConfig => 'component' in widget
+	widget: WidgetConfig | WidgetContainerConfig
+): widget is WidgetConfig => 'component' in widget;
 
 export const WidgetComponents = {
-    Visualization,
-    Stream,
-    ChartWidget
-}
+	Visualization,
+	Stream,
+	ChartWidget
+};
 
 interface View {
-    name: string
-    content: WidgetContainerConfig
+	name: string;
+	content: WidgetContainerConfig;
 }
 
 const defaultViews: View[] = [
-    {
-        name: '3D representation',
-        content: {
-            id: 'root',
-            layout: 'column',
-            widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
-        }
-    },
-    {
-        name: 'Stream',
-        content: {
-            id: 'root',
-            layout: 'column',
-            widgets: [{ id: 2, component: 'Stream' }]
-        }
-    },
-    {
-        name: 'Split screen',
-        content: {
-            id: 'root',
-            widgets: [
-                { id: 2, component: 'Stream' },
-                { id: 2, component: 'Visualization', props: { debug: true } }
-            ]
-        }
-    }
-]
+	{
+		name: 'Stream',
+		content: {
+			id: 'root',
+			layout: 'column',
+			widgets: [{ id: 2, component: 'Stream' }]
+		}
+	},
+	{
+		name: '3D representation',
+		content: {
+			id: 'root',
+			layout: 'column',
+			widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
+		}
+	},
+	{
+		name: 'Split screen',
+		content: {
+			id: 'root',
+			widgets: [
+				{ id: 2, component: 'Stream' },
+				{ id: 2, component: 'Visualization', props: { debug: true } }
+			]
+		}
+	}
+];
 
-export const views: Writable<View[]> = persistentStore('views', defaultViews)
+export const views: Writable<View[]> = persistentStore('views', defaultViews);
 
-export const selectedView = persistentStore('selected_view', get(views)[0].name)
+export const selectedView = persistentStore('selected_view', get(views)[0].name);

app/src/lib/stores/featureFlags.ts

@@ -3,62 +3,60 @@ import { notifications } from '$lib/components/toasts/notifications'
 import Kinematic from '$lib/kinematic'
 import { persistentStore } from '$lib/utilities'
 import { derived, type Writable } from 'svelte/store'
-import { resolve } from '$app/paths'
+import { base } from '$app/paths'
 
 let featureFlagsStore: Writable<Record<string, boolean | string>>
 
 export function useFeatureFlags() {
-    if (!featureFlagsStore) {
-        featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {})
+  if (!featureFlagsStore) {
+    featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {})
 
-        api.get<Record<string, boolean>>('/api/features').then(result => {
-            if (result.isOk()) featureFlagsStore.set(result.inner)
-            else {
-                notifications.error('Feature flag could not be fetched', 2500)
-            }
-        })
-    }
+    api.get<Record<string, boolean>>('/api/features').then(result => {
+      if (result.isOk()) featureFlagsStore.set(result.inner)
+      else {
+        notifications.error('Feature flag could not be fetched', 2500)
+      }
+    })
+  }
 
-    return featureFlagsStore
+  return featureFlagsStore
 }
 
-const base = resolve('/')
-
 export const variants = {
-    SPOTMICRO_ESP32: {
-        model: `${base}spot_micro.urdf.xacro`,
-        stl: `${base}stl.zip`,
-        kinematics: {
-            coxa: 60.5 / 100,
-            coxa_offset: 10 / 100,
-            femur: 111.7 / 100,
-            tibia: 118.5 / 100,
-            L: 207.5 / 100,
-            W: 78 / 100
-        }
-    },
-    SPOTMICRO_YERTLE: {
-        model: `${base}yertle.URDF`,
-        stl: `${base}URDF.zip`,
-        kinematics: {
-            coxa: 35 / 100,
-            coxa_offset: 0 / 100,
-            femur: 130 / 100,
-            tibia: 130 / 100,
-            L: 240 / 100,
-            W: 78 / 100
-        }
+  SPOTMICRO_ESP32: {
+    model: `${base}/spot_micro.urdf.xacro`,
+    stl: `${base}/stl.zip`,
+    kinematics: {
+      coxa: 60.5 / 100,
+      coxa_offset: 10 / 100,
+      femur: 111.7 / 100,
+      tibia: 118.5 / 100,
+      L: 207.5 / 100,
+      W: 78 / 100
     }
+  },
+  SPOTMICRO_YERTLE: {
+    model: `${base}/yertle.URDF`,
+    stl: `${base}/URDF.zip`,
+    kinematics: {
+      coxa: 35 / 100,
+      coxa_offset: 0 / 100,
+      femur: 130 / 100,
+      tibia: 130 / 100,
+      L: 240 / 100,
+      W: 78 / 100
+    }
+  }
 }
 
 export const currentVariant = derived(useFeatureFlags(), $flagStore => {
-    const variantFlag = $flagStore['variant'] as string
-    return variantFlag && variants[variantFlag as keyof typeof variants] ?
-            variants[variantFlag as keyof typeof variants]
-        :   variants.SPOTMICRO_ESP32
+  const variantFlag = $flagStore['variant'] as string
+  return variantFlag && variants[variantFlag as keyof typeof variants] ?
+      variants[variantFlag as keyof typeof variants]
+    : variants.SPOTMICRO_ESP32
 })
 
 export const currentKinematic = derived(
-    currentVariant,
-    $variant => new Kinematic($variant.kinematics)
+  currentVariant,
+  $variant => new Kinematic($variant.kinematics)
 )

app/src/lib/stores/fullscreen.ts

@@ -1,24 +1,24 @@
-import { writable } from 'svelte/store'
+import { writable } from 'svelte/store';
 
-export const isFullscreen = writable(false)
+export const isFullscreen = writable(false);
 
 export function toggleFullscreen() {
-    isFullscreen.update(state => {
-        !state ? document.documentElement.requestFullscreen() : document.exitFullscreen()
-        return !state
-    })
+	isFullscreen.update((state) => {
+		!state ? document.documentElement.requestFullscreen() : document.exitFullscreen();
+		return !state;
+	});
 }
 
 export function enterFullscreen() {
-    if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen()
-        isFullscreen.set(true)
-    }
+	if (!document.fullscreenElement) {
+		document.documentElement.requestFullscreen();
+		isFullscreen.set(true);
+	}
 }
 
 export function exitFullscreen() {
-    if (document.fullscreenElement) {
-        document.exitFullscreen()
-        isFullscreen.set(false)
-    }
+	if (document.fullscreenElement) {
+		document.exitFullscreen();
+		isFullscreen.set(false);
+	}
 }

app/src/lib/stores/gamepad.ts

@@ -1,87 +1,47 @@
 import { readable, derived } from 'svelte/store'
 
 export type GamepadState = {
-    available: boolean
-    gamepads: Gamepad[]
+  available: boolean
+  gamepads: Gamepad[]
 }
 
-const DEADZONE = 0.15
-const dz = (x: number) => {
-    const a = Math.abs(x)
-    if (a < DEADZONE) return 0
-    return ((a - DEADZONE) / (1 - DEADZONE)) * Math.sign(x)
-}
-
-let raf = 0
-let running = false
-
 export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
-    const update = () => {
-        const pads = navigator.getGamepads?.() ?? []
-        const list = Array.from(pads)
-            .map(p => p || null)
-            .filter(Boolean) as Gamepad[]
-        set({ available: 'getGamepads' in navigator, gamepads: list })
-        raf = requestAnimationFrame(update)
+  const update = () => {
+    const hasGamepadAPI = 'getGamepads' in navigator
+    if (!hasGamepadAPI) {
+      set({ available: false, gamepads: [] })
+      return
     }
 
-    const onConnect = () => update()
-    const onDisconnect = () => update()
-    const onVis = () => {
-        if (document.hidden) {
-            running = false
-            cancelAnimationFrame(raf)
-        } else if (!running) {
-            running = true
-            raf = requestAnimationFrame(update)
-        }
-    }
-
-    window.addEventListener('gamepadconnected', onConnect)
-    window.addEventListener('gamepaddisconnected', onDisconnect)
-    document.addEventListener('visibilitychange', onVis)
-
-    running = true
+    const gps = navigator.getGamepads?.() ?? []
+    const validGamepads = gps.filter(Boolean) as Gamepad[]
+    set({
+      available: true,
+      gamepads: validGamepads
+    })
     raf = requestAnimationFrame(update)
+  }
 
-    return () => {
-        running = false
-        cancelAnimationFrame(raf)
-        window.removeEventListener('gamepadconnected', onConnect)
-        window.removeEventListener('gamepaddisconnected', onDisconnect)
-        document.removeEventListener('visibilitychange', onVis)
-    }
+  window.addEventListener('gamepadconnected', update)
+  window.addEventListener('gamepaddisconnected', update)
+  let raf = requestAnimationFrame(update)
+
+  return () => {
+    cancelAnimationFrame(raf)
+    window.removeEventListener('gamepadconnected', update)
+    window.removeEventListener('gamepaddisconnected', update)
+  }
 })
 
-export const gamepad = derived(gamepads, s =>
-    s.available && s.gamepads.length ? s.gamepads[0] : null
+export const gamepad = derived(gamepads, $gamepads =>
+  $gamepads.available && $gamepads.gamepads.length > 0 ? $gamepads.gamepads[0] : null
 )
 
-export const hasGamepad = derived(gamepads, s => s.available && s.gamepads.length > 0)
+export const gamepadAxes = derived(gamepad, $gamepad => $gamepad?.axes ?? [0, 0, 0, 0])
 
-export const gamepadAxes = derived(gamepad, g => (g ? g.axes.map(dz) : [0, 0, 0, 0]))
+export const gamepadButtons = derived(gamepad, $gamepad => $gamepad?.buttons ?? [])
 
-type ButtonEdge = { pressed: boolean; value: number; justPressed: boolean; justReleased: boolean }
-const prev = new Map<number, { pressed: boolean; value: number }[]>()
-
-export const gamepadButtons = derived(gamepad, g => g?.buttons ?? [])
-
-export const gamepadButtonsEdges = derived(gamepad, g => {
-    if (!g) return [] as ButtonEdge[]
-    const p = prev.get(g.index) || []
-    const out = g.buttons.map((b, i): ButtonEdge => {
-        const pr = p[i] || { pressed: false, value: 0 }
-        const pressed = !!b.pressed || b.value > 0.5
-        return {
-            pressed,
-            value: b.value,
-            justPressed: pressed && !pr.pressed,
-            justReleased: !pressed && pr.pressed
-        }
-    })
-    prev.set(
-        g.index,
-        out.map(x => ({ pressed: x.pressed, value: x.value }))
-    )
-    return out
-})
+export const hasGamepad = derived(
+  gamepads,
+  $gamepads => $gamepads.available && $gamepads.gamepads.length > 0
+)

app/src/lib/stores/imu.ts

@@ -1,7 +1,7 @@
-import { writable } from 'svelte/store'
-import type { IMUMsg } from '$lib/types/models'
+import { writable } from 'svelte/store';
+import type { IMU } from '$lib/types/models';
 
-const maxIMUData = 100
+const maxIMUData = 100;
 
 export const imu = (() => {
     const { subscribe, update } = writable({
@@ -12,29 +12,16 @@ export const imu = (() => {
         altitude: [] as number[],
         pressure: [] as number[],
         bmp_temp: [] as number[]
-    })
+    });
 
-    const addData = (content: IMUMsg) => {
+    const addData = (content: IMU) => {
         update(data => {
-            if (content.imu && content.imu[4]) {
-                data.x = [...data.x, content.imu[0]].slice(-maxIMUData)
-                data.y = [...data.y, content.imu[1]].slice(-maxIMUData)
-                data.z = [...data.z, content.imu[2]].slice(-maxIMUData)
-            }
+            (Object.keys(content) as (keyof IMU)[]).forEach(key => {
+                data[key] = [...data[key], content[key]].slice(-maxIMUData);
+            });
+            return data;
+        });
+    };
 
-            if (content.mag && content.mag[4]) {
-                data.heading = [...data.heading, content.mag[3]].slice(-maxIMUData)
-            }
-
-            if (content.bmp && content.bmp[3]) {
-                data.pressure = [...data.pressure, content.bmp[0]].slice(-maxIMUData)
-                data.altitude = [...data.altitude, content.bmp[1]].slice(-maxIMUData)
-                data.bmp_temp = [...data.bmp_temp, content.bmp[2]].slice(-maxIMUData)
-            }
-
-            return data
-        })
-    }
-
-    return { subscribe, addData }
-})()
+    return { subscribe, addData };
+})();

app/src/lib/stores/index.ts

@@ -1,9 +1,9 @@
-export * from './socket-store'
-export * from './logging-store'
-export * from './model-store'
-export * from './socket'
-export * from './fullscreen'
-export * from './telemetry'
-export * from './analytics'
-export * from './featureFlags'
-export * from './location-store'
+export * from './socket-store';
+export * from './logging-store';
+export * from './model-store';
+export * from './socket';
+export * from './fullscreen';
+export * from './telemetry';
+export * from './analytics';
+export * from './featureFlags';
+export * from './location-store';

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

@@ -1,6 +1,5 @@
-import { persistentStore } from '$lib/utilities'
-import { writable } from 'svelte/store'
-import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
+import { persistentStore } from '$lib/utilities';
+import { writable } from 'svelte/store';
+import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public';
 
-export const apiLocation =
-    PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '')
+export const location = PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '');

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

@@ -1,11 +1,11 @@
-import { writable, type Writable } from 'svelte/store'
+import { writable, type Writable } from 'svelte/store';
 
 export interface errorLog {
-    message: unknown
-    tag?: string
-    exception?: unknown
+	message: unknown;
+	tag?: string;
+	exception?: unknown;
 }
 
-export const latestErrorLog: Writable<errorLog> = writable()
+export const latestErrorLog: Writable<errorLog> = writable();
 
-export const errorLogs: Writable<errorLog[]> = writable([])
+export const errorLogs: Writable<errorLog[]> = writable([]);

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

@@ -13,28 +13,28 @@ export const modes = ['deactivated', 'idle', 'calibration', 'rest', 'stand', 'wa
 export type Modes = (typeof modes)[number]
 
 export enum ModesEnum {
-    Deactivated = 0,
-    Idle = 1,
-    Calibration = 2,
-    Rest = 3,
-    Stand = 4,
-    Walk = 5
+  Deactivated = 0,
+  Idle = 1,
+  Calibration = 2,
+  Rest = 3,
+  Stand = 4,
+  Walk = 5
 }
 
 export enum WalkGaits {
-    Trot = 0,
-    Crawl = 1
+  Trot = 0,
+  Crawl = 1
 }
 
 export const walkGaits = ['trot', 'crawl'] as const
 
 export const walkGaitLabels: Record<WalkGaits, string> = {
-    [WalkGaits.Trot]: 'Trot',
-    [WalkGaits.Crawl]: 'Crawl'
+  [WalkGaits.Trot]: 'Trot',
+  [WalkGaits.Crawl]: 'Crawl'
 }
 
 export const walkGaitToMode = (gait: WalkGaits): 'trot' | 'crawl' => {
-    return gait === WalkGaits.Trot ? 'trot' : 'crawl'
+  return gait === WalkGaits.Trot ? 'trot' : 'crawl'
 }
 
 export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated)
@@ -46,9 +46,9 @@ export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0])
 export const kinematicData = writable([0, 0, 0, 0, 1, 0])
 
 export const input: Writable<ControllerInput> = writable({
-    left: { x: 0, y: 0 },
-    right: { x: 0, y: 0 },
-    height: 0.5,
-    speed: 0.5,
-    s1: 0.05
+  left: { x: 0, y: 0 },
+  right: { x: 0, y: 0 },
+  height: 0.5,
+  speed: 0.5,
+  s1: 0.05
 })

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

@@ -1,27 +1,27 @@
-import { writable, type Writable } from 'svelte/store'
-import { type angles } from '$lib/types/models'
+import { writable, type Writable } from 'svelte/store';
+import { type angles } from '$lib/types/models';
 
 export const servoAnglesOut: Writable<number[]> = writable([
-    0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-])
+	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
+]);
 export const servoAngles: Writable<number[]> = writable([
-    0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-])
-export const logs = writable([] as string[])
-export const mpu = writable({ heading: 0 })
-export const sonar = writable([0, 0])
-export const distances = writable({})
+	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
+]);
+export const logs = writable([] as string[]);
+export const mpu = writable({ heading: 0 });
+export const sonar = writable([0, 0]);
+export const distances = writable({});
 
 export interface socketDataCollection {
-    angles: Writable<angles>
-    logs: Writable<string[]>
-    mpu: Writable<unknown>
-    distances: Writable<unknown>
+	angles: Writable<angles>;
+	logs: Writable<string[]>;
+	mpu: Writable<unknown>;
+	distances: Writable<unknown>;
 }
 
 export const socketData = {
-    angles: servoAngles,
-    logs,
-    mpu,
-    distances
-}
+	angles: servoAngles,
+	logs,
+	mpu,
+	distances
+};

app/src/lib/stores/socket.ts

@@ -1,160 +1,160 @@
-import { writable } from 'svelte/store'
-import { encode, decode } from '@msgpack/msgpack'
+import { writable } from 'svelte/store';
+import { encode, decode } from '@msgpack/msgpack';
 
-const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const
-type SocketEvent = (typeof socketEvents)[number]
+const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const;
+type SocketEvent = (typeof socketEvents)[number];
 
-type SocketMessage = [number, string?, unknown?]
+type SocketMessage = [number, string?, unknown?];
 
-let useBinary = false
+let useBinary = false;
 
 const decodeMessage = (data: string | ArrayBuffer): SocketMessage | null => {
-    useBinary = data instanceof ArrayBuffer
+  useBinary = data instanceof ArrayBuffer;
 
-    try {
-        if (useBinary) {
-            return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage
-        }
-        return JSON.parse(data as string)
-    } catch (error) {
-        console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`)
+  try {
+    if (useBinary) {
+      return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage;
     }
-    return null
-}
+    return JSON.parse(data as string);
+  } catch (error) {
+    console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`);
+  }
+  return null;
+};
 
 const encodeMessage = (data: unknown) => {
-    try {
-        return useBinary ? encode(data) : JSON.stringify(data)
-    } catch (error) {
-        console.error(`Could not encode data: ${data} - ${error}`)
-    }
-}
+  try {
+    return useBinary ? encode(data) : JSON.stringify(data);
+  } catch (error) {
+    console.error(`Could not encode data: ${data} - ${error}`);
+  }
+};
 
 function createWebSocket() {
-    const listeners = new Map<string, Set<(data?: unknown) => void>>()
-    const { subscribe, set } = writable(false)
-    const reconnectTimeoutTime = 5000
-    let unresponsiveTimeoutId: ReturnType<typeof setTimeout>
-    let reconnectTimeoutId: ReturnType<typeof setTimeout>
-    let ws: WebSocket
-    let socketUrl: string | URL
+  const listeners = new Map<string, Set<(data?: unknown) => void>>();
+  const { subscribe, set } = writable(false);
+  const reconnectTimeoutTime = 5000;
+  let unresponsiveTimeoutId: ReturnType<typeof setTimeout>;
+  let reconnectTimeoutId: ReturnType<typeof setTimeout>;
+  let ws: WebSocket;
+  let socketUrl: string | URL;
 
-    function init(url: string | URL) {
-        socketUrl = url
-        connect()
+  function init(url: string | URL) {
+    socketUrl = url;
+    connect();
+  }
+
+  function disconnect(reason: SocketEvent, event?: Event) {
+    ws.close();
+    set(false);
+    clearTimeout(unresponsiveTimeoutId);
+    clearTimeout(reconnectTimeoutId);
+    listeners.get(reason)?.forEach(listener => listener(event));
+    reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime);
+  }
+
+  function connect() {
+    ws = new WebSocket(socketUrl);
+    ws.binaryType = 'arraybuffer';
+    ws.onopen = ev => {
+      ping();
+      useBinary = true;
+      ping();
+      set(true);
+      clearTimeout(reconnectTimeoutId);
+      listeners.get('open')?.forEach(listener => listener(ev));
+      for (const event of listeners.keys()) {
+        if (socketEvents.includes(event as SocketEvent)) continue;
+        subscribeToEvent(event);
+      }
+    };
+    ws.onmessage = frame => {
+      resetUnresponsiveCheck();
+      const message = decodeMessage(frame.data);
+      if (!message) return;
+      const [, event, payload = undefined] = message;
+      if (event) listeners.get(event)?.forEach(listener => listener(payload));
+    };
+    ws.onerror = ev => disconnect('error', ev);
+    ws.onclose = ev => disconnect('close', ev);
+  }
+
+  function unsubscribe(event: string, listener?: (data: unknown) => void) {
+    const eventListeners = listeners.get(event);
+    if (!eventListeners) return;
+
+    if (!eventListeners.size) {
+      unsubscribeToEvent(event);
     }
-
-    function disconnect(reason: SocketEvent, event?: Event) {
-        ws.close()
-        set(false)
-        clearTimeout(unresponsiveTimeoutId)
-        clearTimeout(reconnectTimeoutId)
-        listeners.get(reason)?.forEach(listener => listener(event))
-        reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime)
+    if (listener) {
+      eventListeners?.delete(listener);
+    } else {
+      listeners.delete(event);
     }
+  }
 
-    function connect() {
-        ws = new WebSocket(socketUrl)
-        ws.binaryType = 'arraybuffer'
-        ws.onopen = ev => {
-            ping()
-            useBinary = true
-            ping()
-            set(true)
-            clearTimeout(reconnectTimeoutId)
-            listeners.get('open')?.forEach(listener => listener(ev))
-            for (const event of listeners.keys()) {
-                if (socketEvents.includes(event as SocketEvent)) continue
-                subscribeToEvent(event)
-            }
+  function resetUnresponsiveCheck() {
+    clearTimeout(unresponsiveTimeoutId);
+    unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime);
+  }
+
+  function sendEvent(event: string, data: unknown) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    send([2, event, data]);
+  }
+
+  function unsubscribeToEvent(event: string) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    send([1, event]);
+  }
+
+  function subscribeToEvent(event: string) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    send([0, event]);
+  }
+
+  function send(data: unknown) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    const serialized = encodeMessage(data);
+    if (!serialized) {
+      console.error('Could not serialize data:', data);
+      return;
+    }
+    ws.send(serialized);
+  }
+
+  function ping() {
+    const serialized = encodeMessage([4]);
+    if (!serialized) {
+      console.error('Could not serialize message');
+      return;
+    }
+    ws.send(serialized);
+  }
+
+  return {
+    subscribe,
+    sendEvent,
+    init,
+    on: <T>(event: string, listener: (data: T) => void): (() => void) => {
+      let eventListeners = listeners.get(event);
+      if (!eventListeners) {
+        if (!socketEvents.includes(event as SocketEvent)) {
+          subscribeToEvent(event);
         }
-        ws.onmessage = frame => {
-            resetUnresponsiveCheck()
-            const message = decodeMessage(frame.data)
-            if (!message) return
-            const [, event, payload = undefined] = message
-            if (event) listeners.get(event)?.forEach(listener => listener(payload))
-        }
-        ws.onerror = ev => disconnect('error', ev)
-        ws.onclose = ev => disconnect('close', ev)
-    }
+        eventListeners = new Set();
+        listeners.set(event, eventListeners);
+      }
+      eventListeners.add(listener as (data: unknown) => void);
 
-    function unsubscribe(event: string, listener?: (data: unknown) => void) {
-        const eventListeners = listeners.get(event)
-        if (!eventListeners) return
-
-        if (!eventListeners.size) {
-            unsubscribeToEvent(event)
-        }
-        if (listener) {
-            eventListeners?.delete(listener)
-        } else {
-            listeners.delete(event)
-        }
-    }
-
-    function resetUnresponsiveCheck() {
-        clearTimeout(unresponsiveTimeoutId)
-        unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime)
-    }
-
-    function sendEvent(event: string, data: unknown) {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
-        send([2, event, data])
-    }
-
-    function unsubscribeToEvent(event: string) {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
-        send([1, event])
-    }
-
-    function subscribeToEvent(event: string) {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
-        send([0, event])
-    }
-
-    function send(data: unknown) {
-        if (!ws || ws.readyState !== WebSocket.OPEN) return
-        const serialized = encodeMessage(data)
-        if (!serialized) {
-            console.error('Could not serialize data:', data)
-            return
-        }
-        ws.send(serialized)
-    }
-
-    function ping() {
-        const serialized = encodeMessage([4])
-        if (!serialized) {
-            console.error('Could not serialize message')
-            return
-        }
-        ws.send(serialized)
-    }
-
-    return {
-        subscribe,
-        sendEvent,
-        init,
-        on: <T>(event: string, listener: (data: T) => void): (() => void) => {
-            let eventListeners = listeners.get(event)
-            if (!eventListeners) {
-                if (!socketEvents.includes(event as SocketEvent)) {
-                    subscribeToEvent(event)
-                }
-                eventListeners = new Set()
-                listeners.set(event, eventListeners)
-            }
-            eventListeners.add(listener as (data: unknown) => void)
-
-            return () => {
-                unsubscribe(event, listener as (data: unknown) => void)
-            }
-        },
-        off: <T>(event: string, listener?: (data: T) => void) => {
-            unsubscribe(event, listener as (data: unknown) => void)
-        }
-    }
+      return () => {
+        unsubscribe(event, listener as (data: unknown) => void);
+      };
+    },
+    off: <T>(event: string, listener?: (data: T) => void) => {
+      unsubscribe(event, listener as (data: unknown) => void);
+    },
+  };
 }
 
-export const socket = createWebSocket()
+export const socket = createWebSocket();

app/src/lib/stores/telemetry.ts

@@ -1,7 +1,7 @@
-import type { DownloadOTA } from '$lib/types/models'
-import { writable } from 'svelte/store'
+import type { DownloadOTA } from '$lib/types/models';
+import { writable } from 'svelte/store';
 
-const telemetry_data = {
+let telemetry_data = {
     rssi: {
         rssi: 0
     },
@@ -10,10 +10,10 @@ const telemetry_data = {
         progress: 0,
         error: ''
     }
-}
+};
 
 function createTelemetry() {
-    const { subscribe, update } = writable(telemetry_data)
+    const { subscribe, set, update } = writable(telemetry_data);
 
     return {
         subscribe,
@@ -21,15 +21,15 @@ function createTelemetry() {
             update(telemetry_data => ({
                 ...telemetry_data,
                 rssi: { rssi: data }
-            }))
+            }));
         },
         setDownloadOTA: (data: DownloadOTA) => {
             update(telemetry_data => ({
                 ...telemetry_data,
                 download_ota: { status: data.status, progress: data.progress, error: data.error }
-            }))
+            }));
         }
-    }
+    };
 }
 
-export const telemetry = createTelemetry()
+export const telemetry = createTelemetry();

app/src/lib/types/mathutils.d.ts

@@ -1,17 +1,17 @@
 declare module 'three/src/math/MathUtils' {
-    export function generateUUID(): string
-    export function clamp(value: number, min: number, max: number): number
-    export function euclideanModulo(n: number, m: number): number
-    export function mapLinear(x: number, a1: number, a2: number, b1: number, b2: number): number
-    export function lerp(x: number, y: number, t: number): number
-    export function smoothstep(x: number, min: number, max: number): number
-    export function smootherstep(x: number, min: number, max: number): number
-    export function randInt(low: number, high: number): number
-    export function randFloat(low: number, high: number): number
-    export function randFloatSpread(range: number): number
-    export function degToRad(degrees: number): number
-    export function radToDeg(radians: number): number
-    export function isPowerOfTwo(value: number): boolean
-    export function ceilPowerOfTwo(value: number): number
-    export function floorPowerOfTwo(value: number): number
+	export function generateUUID(): string;
+	export function clamp(value: number, min: number, max: number): number;
+	export function euclideanModulo(n: number, m: number): number;
+	export function mapLinear(x: number, a1: number, a2: number, b1: number, b2: number): number;
+	export function lerp(x: number, y: number, t: number): number;
+	export function smoothstep(x: number, min: number, max: number): number;
+	export function smootherstep(x: number, min: number, max: number): number;
+	export function randInt(low: number, high: number): number;
+	export function randFloat(low: number, high: number): number;
+	export function randFloatSpread(range: number): number;
+	export function degToRad(degrees: number): number;
+	export function radToDeg(radians: number): number;
+	export function isPowerOfTwo(value: number): boolean;
+	export function ceilPowerOfTwo(value: number): number;
+	export function floorPowerOfTwo(value: number): number;
 }

app/src/lib/types/models.ts

@@ -1,245 +1,239 @@
 export enum MessageTopic {
-    imu = 'imu',
-    mode = 'mode',
-    input = 'input',
-    analytics = 'analytics',
-    position = 'position',
-    angles = 'angles',
-    i2cScan = 'i2cScan',
-    peripheralSettings = 'peripheralSettings',
-    otastatus = 'otastatus',
-    gait = 'walk_gait',
-    servoState = 'servoState',
-    servoPWM = 'servoPWM',
-    WiFiSettings = 'WiFiSettings',
-    sonar = 'sonar',
-    rssi = 'rssi'
+  imu = 'imu',
+  mode = 'mode',
+  input = 'input',
+  analytics = 'analytics',
+  position = 'position',
+  angles = 'angles',
+  i2cScan = 'i2cScan',
+  peripheralSettings = 'peripheralSettings',
+  otastatus = 'otastatus',
+  gait = 'walk_gait',
+  servoState = 'servoState',
+  servoPWM = 'servoPWM',
+  WiFiSettings = 'WiFiSettings',
+  sonar = 'sonar',
+  rssi = 'rssi'
 }
 
 export type vector = { x: number; y: number }
 
 export interface ControllerInput {
-    left: vector
-    right: vector
-    height: number
-    speed: number
-    s1: number
+  left: vector
+  right: vector
+  height: number
+  speed: number
+  s1: number
 }
 
 export type GithubRelease = {
-    message: string
-    tag_name: string
-    assets: Array<{
-        name: string
-        browser_download_url: string
-    }>
+  message: string
+  tag_name: string
+  assets: Array<{
+    name: string
+    browser_download_url: string
+  }>
 }
 
 export type angles = number[] | Int16Array
 
 export type WifiStatus = {
-    status: number
-    local_ip: string
-    mac_address: string
-    rssi: number
-    ssid: string
-    bssid: string
-    channel: number
-    subnet_mask: string
-    gateway_ip: string
-    dns_ip_1: string
-    dns_ip_2?: string
+  status: number
+  local_ip: string
+  mac_address: string
+  rssi: number
+  ssid: string
+  bssid: string
+  channel: number
+  subnet_mask: string
+  gateway_ip: string
+  dns_ip_1: string
+  dns_ip_2?: string
 }
 
 export type WifiSettings = {
-    hostname: string
-    priority_RSSI: boolean
-    wifi_networks: KnownNetworkItem[]
+  hostname: string
+  priority_RSSI: boolean
+  wifi_networks: KnownNetworkItem[]
 }
 
 export type NetworkList = {
-    networks: NetworkItem[]
+  networks: NetworkItem[]
 }
 
 export type KnownNetworkItem = {
-    ssid: string
-    password: string
-    static_ip_config: boolean
-    local_ip?: string
-    subnet_mask?: string
-    gateway_ip?: string
-    dns_ip_1?: string
-    dns_ip_2?: string
+  ssid: string
+  password: string
+  static_ip_config: boolean
+  local_ip?: string
+  subnet_mask?: string
+  gateway_ip?: string
+  dns_ip_1?: string
+  dns_ip_2?: string
 }
 
 export type NetworkItem = {
-    rssi: number
-    ssid: string
-    bssid: string
-    channel: number
-    encryption_type: number
+  rssi: number
+  ssid: string
+  bssid: string
+  channel: number
+  encryption_type: number
 }
 
 export type ApStatus = {
-    status: number
-    ip_address: string
-    mac_address: string
-    station_num: number
+  status: number
+  ip_address: string
+  mac_address: string
+  station_num: number
 }
 
 export type ApSettings = {
-    provision_mode: number
-    ssid: string
-    password: string
-    channel: number
-    ssid_hidden: boolean
-    max_clients: number
-    local_ip: string
-    gateway_ip: string
-    subnet_mask: string
+  provision_mode: number
+  ssid: string
+  password: string
+  channel: number
+  ssid_hidden: boolean
+  max_clients: number
+  local_ip: string
+  gateway_ip: string
+  subnet_mask: string
 }
 
 export type DownloadOTA = {
-    status: string
-    progress: number
-    error: string
+  status: string
+  progress: number
+  error: string
 }
 
 export type Analytics = {
-    max_alloc_heap: number
-    psram_size: number
-    free_psram: number
-    free_heap: number
-    total_heap: number
-    min_free_heap: number
-    core_temp: number
-    fs_total: number
-    fs_used: number
-    uptime: number
-    cpu0_usage: number
-    cpu1_usage: number
-    cpu_usage: number
+  max_alloc_heap: number
+  psram_size: number
+  free_psram: number
+  free_heap: number
+  total_heap: number
+  min_free_heap: number
+  core_temp: number
+  fs_total: number
+  fs_used: number
+  uptime: number
+  cpu0_usage: number
+  cpu1_usage: number
+  cpu_usage: number
 }
 
 export type Rssi = {
-    rssi: number
-    ssid: string
+  rssi: number
+  ssid: string
 }
 
 export type StaticSystemInformation = {
-    esp_platform: string
-    firmware_version: string
-    cpu_freq_mhz: number
-    cpu_type: string
-    cpu_rev: number
-    cpu_cores: number
-    sketch_size: number
-    free_sketch_space: number
-    sdk_version: string
-    arduino_version: string
-    flash_chip_size: number
-    flash_chip_speed: number
-    cpu_reset_reason: string
+  esp_platform: string
+  firmware_version: string
+  cpu_freq_mhz: number
+  cpu_type: string
+  cpu_rev: number
+  cpu_cores: number
+  sketch_size: number
+  free_sketch_space: number
+  sdk_version: string
+  arduino_version: string
+  flash_chip_size: number
+  flash_chip_speed: number
+  cpu_reset_reason: string
 }
 
 export type SystemInformation = Analytics & StaticSystemInformation
 
 export type IMU = {
-    x: number
-    y: number
-    z: number
-    heading: number
-    altitude: number
-    bmp_temp: number
-    pressure: number
-}
-
-export type IMUMsg = {
-    imu: [number, number, number, number, boolean]
-    mag: [number, number, number, number, boolean]
-    bmp: [number, number, number, boolean]
+  x: number
+  y: number
+  z: number
+  heading: number
+  altitude: number
+  bmp_temp: number
+  pressure: number
 }
 
 export interface I2CDevice {
-    address: number
-    part_number: string
-    name: string
+  address: number
+  part_number: string
+  name: string
 }
 
 export type PinConfig = {
-    pin: number
-    mode: string
-    type: string
-    role: string
+  pin: number
+  mode: string
+  type: string
+  role: string
 }
 
 export type PeripheralsConfiguration = {
-    sda: number
-    scl: number
-    frequency: number
-    pins: PinConfig[]
+  sda: number
+  scl: number
+  frequency: number
+  pins: PinConfig[]
 }
 
 export type CameraSettings = {
-    framesize: number
-    quality: number
-    brightness: number
-    contrast: number
-    saturation: number
-    sharpness: number
-    denoise: number
-    special_effect: number
-    wb_mode: number
-    vflip: boolean
-    hmirror: boolean
+  framesize: number
+  quality: number
+  brightness: number
+  contrast: number
+  saturation: number
+  sharpness: number
+  denoise: number
+  special_effect: number
+  wb_mode: number
+  vflip: boolean
+  hmirror: boolean
 }
 
 export type File = number
 
 export interface Directory {
-    [key: string]: File | Directory
+  [key: string]: File | Directory
 }
 
 export type Servo = {
-    name: string
-    channel: number
-    inverted: boolean
-    angle: number
-    center_angle: number
+  name: string
+  channel: number
+  inverted: boolean
+  angle: number
+  center_angle: number
 }
 
 export type ServoConfiguration = {
-    is_active: boolean
-    servo_pwm_frequency: number
-    servo_oscillator_frequency: number
-    servos: Servo[]
+  is_active: boolean
+  servo_pwm_frequency: number
+  servo_oscillator_frequency: number
+  servos: Servo[]
 }
 
 export interface MDNSServiceQuery {
-    services: MDNSServiceItem[]
+  services: MDNSServiceItem[]
 }
 
 export interface MDNSServiceItem {
-    ip: string
-    port: number
-    name: string
+  ip: string
+  port: number
+  name: string
 }
 
 export interface MDNSService {
-    service: string
-    protocol: string
-    port: number
+  service: string
+  protocol: string
+  port: number
 }
 
 export interface MDNSTxtRecord {
-    key: string
-    value: string
+  key: string
+  value: string
 }
 
 export interface MDNSStatus {
-    started: boolean
-    hostname: string
-    instance: string
-    services: MDNSService[]
-    global_txt_records: MDNSTxtRecord[]
+  started: boolean
+  hostname: string
+  instance: string
+  services: MDNSService[]
+  global_txt_records: MDNSTxtRecord[]
 }

app/src/lib/types/uzip.d.ts

@@ -1,14 +1,14 @@
 declare module 'uzip' {
-    interface UZIP {
-        parse(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
-        compress(data: Record<string, Uint8Array>): Uint8Array | ArrayBuffer
-        compressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
-        decompress(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
-        decompressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
-        encode(data: Record<string, Uint8Array>): Uint8Array | ArrayBuffer
-        decode(data: Uint8Array | ArrayBuffer): Record<string, Uint8Array>
-    }
+	interface UZIP {
+		parse(data: Uint8Array | ArrayBuffer): any;
+		compress(data: any): Uint8Array | ArrayBuffer;
+		compressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer;
+		decompress(data: Uint8Array | ArrayBuffer): any;
+		decompressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer;
+		encode(data: any): Uint8Array | ArrayBuffer;
+		decode(data: Uint8Array | ArrayBuffer): any;
+	}
 
-    const uzip: UZIP
-    export default uzip
+	const uzip: UZIP;
+	export default uzip;
 }

app/src/lib/utilities/buffer-utilities.ts

@@ -1,15 +1,15 @@
 export class throttler {
-    private _throttlePause: boolean
-    constructor() {
-        this._throttlePause = false
-    }
-    throttle = (callback: () => void, time: number) => {
-        if (this._throttlePause) return
+	private _throttlePause: boolean;
+	constructor() {
+		this._throttlePause = false;
+	}
+	throttle = (callback: Function, time: number) => {
+		if (this._throttlePause) return;
 
-        this._throttlePause = true
-        setTimeout(() => {
-            callback()
-            this._throttlePause = false
-        }, time)
-    }
+		this._throttlePause = true;
+		setTimeout(() => {
+			callback();
+			this._throttlePause = false;
+		}, time);
+	};
 }

app/src/lib/utilities/color-utilities.ts

@@ -1,6 +1,6 @@
 export const daisyColor = (name: string, opacity: number = 100) => {
-    const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
-    if (opacity >= 100) return color
-    const alpha = Math.min(Math.max(opacity, 0), 100) / 100
-    return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`
-}
+  const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  if (opacity >= 100) return color;
+  const alpha = Math.min(Math.max(opacity, 0), 100) / 100;
+  return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`;
+};

app/src/lib/utilities/index.ts

@@ -1,8 +1,9 @@
-export * from './result'
-export * from './string-utilities'
-export * from './svelte-utilities'
-export * from './math-utilities'
-export * from './buffer-utilities'
-export * from './model-utilities'
-export * from './string-utilities'
-export * from './color-utilities'
+export * from './result';
+export * from './string-utilities';
+export * from './svelte-utilities';
+export * from './math-utilities';
+export * from './buffer-utilities';
+export * from './model-utilities';
+export * from './position-utilities';
+export * from './string-utilities';
+export * from './color-utilities';

app/src/lib/utilities/math-utilities.ts

@@ -1,18 +1,18 @@
 export const toUint8 = (number: number, min: number, max: number) => {
-    number = Math.max(min, Math.min(max, number))
-    const scaled = ((number - min) / (max - min)) * 255
-    return Math.round(scaled) & 0xff
-}
+	number = Math.max(min, Math.min(max, number));
+	let scaled = ((number - min) / (max - min)) * 255;
+	return Math.round(scaled) & 0xff;
+};
 
 export const toInt8 = (number: number, min: number, max: number) => {
-    number = Math.max(min, Math.min(max, number))
-    const scaled = ((number - min) / (max - min)) * 255 - 128
-    return Math.max(-128, Math.min(127, Math.round(scaled))) | 0
-}
+	number = Math.max(min, Math.min(max, number));
+	let scaled = ((number - min) / (max - min)) * 255 - 128;
+	return Math.max(-128, Math.min(127, Math.round(scaled))) | 0;
+};
 
 export const fromInt8 = (int8: number, min: number, max: number) => {
-    int8 = Math.max(-128, Math.min(127, int8))
-    const scaled = (int8 + 128) / 255
-    const number = scaled * (max - min) + min
-    return number
-}
+	int8 = Math.max(-128, Math.min(127, int8));
+	const scaled = (int8 + 128) / 255;
+	const number = scaled * (max - min) + min;
+	return number;
+};

app/src/lib/utilities/model-utilities.ts

@@ -6,91 +6,88 @@ import { currentVariant, jointNames, model } from '$lib/stores'
 import uzip from 'uzip'
 import { fileService } from '$lib/services'
 import { get } from 'svelte/store'
-import { resolve } from '$app/paths'
 
 let model_xml: XMLDocument
 
 export const populateModelCache = async () => {
-    await cacheModelFiles()
-    const modelRes = await loadModel(get(currentVariant).model)
-    if (modelRes.isOk()) {
-        const [urdf, JOINT_NAME] = modelRes.inner
-        jointNames.set(JOINT_NAME)
-        model.set(urdf)
-    } else {
-        console.error(modelRes.inner, { exception: modelRes.exception })
-    }
+  await cacheModelFiles()
+  const modelRes = await loadModel(get(currentVariant).model)
+  if (modelRes.isOk()) {
+    const [urdf, JOINT_NAME] = modelRes.inner
+    jointNames.set(JOINT_NAME)
+    model.set(urdf)
+  } else {
+    console.error(modelRes.inner, { exception: modelRes.exception })
+  }
 }
 
 export const cacheModelFiles = async () => {
-    const data = await fetch(get(currentVariant).stl)
+  const data = await fetch(get(currentVariant).stl)
 
-    const files = uzip.parse(await data.arrayBuffer())
+  const files = uzip.parse(await data.arrayBuffer())
 
-    for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
-        const normalizedPath = path.startsWith('/') ? path : '/' + path
-        const resolvedUrl = resolve(normalizedPath as any)
-        fileService?.saveFile(resolvedUrl, data)
-        fileService?.saveFile(normalizedPath, data)
-    }
+  for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
+    const url = new URL(path, window.location.href)
+    fileService?.saveFile(url.toString(), data)
+  }
 }
 
 export const loadModel = async (url: string): Promise<Result<[URDFRobot, string[]], string>> => {
-    const urdfLoader = new URDFLoader()
+  const urdfLoader = new URDFLoader()
+  urdfLoader.workingPath = LoaderUtils.extractUrlBase(url)
 
-    let xml =
-        url.endsWith('.xacro') ? await loadXacro(url) : await fetch(url).then(res => res.text())
+  let xml = url.endsWith('.xacro') ? await loadXacro(url) : await fetch(url).then(res => res.text())
 
-    if (typeof xml === 'string') {
-        xml = new window.DOMParser().parseFromString(xml, 'text/xml')
+  if (typeof xml === 'string') {
+    xml = new window.DOMParser().parseFromString(xml, 'text/xml')
+  }
+
+  return new Promise(resolve => {
+    model_xml = xml
+    try {
+      const model = urdfLoader.parse(xml)
+      setupRobot(model)
+      const joints = Object.entries(model.joints)
+        .filter(joint => joint[1].jointType !== 'fixed')
+        .map(joint => joint[0])
+
+      resolve(Result.ok([model, joints]))
+    } catch (error) {
+      resolve(Result.err('Failed to load model', error))
     }
-
-    return new Promise(resolve => {
-        model_xml = xml
-        try {
-            const model = urdfLoader.parse(xml)
-            setupRobot(model)
-            const joints = Object.entries(model.joints)
-                .filter(joint => joint[1].jointType !== 'fixed')
-                .map(joint => joint[0])
-
-            resolve(Result.ok([model, joints]))
-        } catch (error) {
-            resolve(Result.err('Failed to load model', error))
-        }
-    })
+  })
 }
 
 const loadXacro = async (url: string): Promise<XMLDocument> =>
-    new Promise((resolve, reject) => {
-        new XacroLoader().load(url, resolve, reject)
-    })
+  new Promise((resolve, reject) => {
+    new XacroLoader().load(url, resolve, reject)
+  })
 
 function setupRobot(robot: URDFRobot) {
-    robot.rotation.x = -Math.PI / 2
-    robot.rotation.z = Math.PI / 2
-    robot.scale.setScalar(10)
-    robot.traverse(c => (c.castShadow = true))
-    robot.updateMatrixWorld(true)
+  robot.rotation.x = -Math.PI / 2
+  robot.rotation.z = Math.PI / 2
+  robot.scale.setScalar(10)
+  robot.traverse(c => (c.castShadow = true))
+  robot.updateMatrixWorld(true)
 }
 
 export function getToeWorldPositions(robot: URDFRobot): Vector3[] {
-    const toes: Vector3[] = []
-    robot.traverse(c => {
-        if (c.name.includes('toe') && !c.name.includes('_link'))
-            toes.push(c.getWorldPosition(new Vector3()))
-    })
-    return toes
+  const toes: Vector3[] = []
+  robot.traverse(c => {
+    if (c.name.includes('toe') && !c.name.includes('_link'))
+      toes.push(c.getWorldPosition(new Vector3()))
+  })
+  return toes
 }
 
 export const extractFootColor = () => {
-    const colorElem = model_xml.querySelector('material[name=foot_color] > color') as Element
-    const colorAttrStr = colorElem.getAttribute('rgba') as string
-    const colorStr = colorAttrStr
-        .split(' ')
-        .slice(0, 3)
-        .map(val => Math.floor(+val * 255))
-        .join(', ')
+  const colorElem = model_xml.querySelector('material[name=foot_color] > color') as Element
+  const colorAttrStr = colorElem.getAttribute('rgba') as string
+  const colorStr = colorAttrStr
+    .split(' ')
+    .slice(0, 3)
+    .map(val => Math.floor(+val * 255))
+    .join(', ')
 
-    return new Color(`rgb(${colorStr})`)
+  return new Color(`rgb(${colorStr})`)
 }

app/src/lib/utilities/position-utilities.ts

@@ -0,0 +1,84 @@
+class SunCalculator {
+	calculateSunElevation(lat: number = 55, lon: number = 12) {
+		const now = new Date();
+		const JD = this.getJulianDate(now);
+		const solarDec = this.getSolarDeclination(JD);
+		const solarTime = this.getSolarTime(now, lon);
+
+		const hourAngle = (solarTime - 12) * 15;
+		const elevation = Math.asin(
+			Math.sin(this.degToRad(lat)) * Math.sin(solarDec) +
+				Math.cos(this.degToRad(lat)) * Math.cos(solarDec) * Math.cos(this.degToRad(hourAngle))
+		);
+
+		return this.radToDeg(elevation);
+	}
+
+	getJulianDate(date: Date) {
+		const Y = date.getUTCFullYear();
+		const M = date.getUTCMonth() + 1;
+		const D =
+			date.getUTCDate() +
+			date.getUTCHours() / 24 +
+			date.getUTCMinutes() / 1440 +
+			date.getUTCSeconds() / 86400;
+		const A = Math.floor((14 - M) / 12);
+		const Y1 = Y + 4800 - A;
+		const M1 = M + 12 * A - 3;
+		return (
+			D +
+			Math.floor((153 * M1 + 2) / 5) +
+			365 * Y1 +
+			Math.floor(Y1 / 4) -
+			Math.floor(Y1 / 100) +
+			Math.floor(Y1 / 400) -
+			32045
+		);
+	}
+
+	getSolarDeclination(JulianDate: number) {
+		const n = JulianDate - 2451545;
+		const L = (280.46 + 0.9856474 * n) % 360;
+		const g = this.degToRad((357.528 + 0.9856003 * n) % 360);
+		const lambda = this.degToRad(L + 1.915 * Math.sin(g) + 0.02 * Math.sin(2 * g));
+		return Math.asin(Math.sin(lambda) * Math.sin(this.degToRad(23.44)));
+	}
+
+	getSolarTime(date: Date, lon: number) {
+		const EoT = this.getEquationOfTime(date);
+		const offset = date.getTimezoneOffset() / 60;
+		const standardMeridian = Math.round(lon / 15) * 15;
+		const solarTime =
+			date.getUTCHours() +
+			(date.getUTCMinutes() + (4 * (standardMeridian - lon) + EoT)) / 60 -
+			offset;
+		return (solarTime + 24) % 24;
+	}
+
+	getEquationOfTime(date: Date) {
+		const JD = this.getJulianDate(date);
+		const n = JD - 2451545;
+		const g = this.degToRad((357.528 + 0.9856003 * n) % 360);
+		const q = this.degToRad((280.46 + 0.9856474 * n) % 360);
+		return (
+			4 *
+			this.radToDeg(
+				0.000075 +
+					0.001868 * Math.cos(q) -
+					0.032077 * Math.sin(g) -
+					0.014615 * Math.cos(2 * q) -
+					0.040849 * Math.sin(2 * g)
+			)
+		);
+	}
+
+	degToRad(deg: number) {
+		return deg * (Math.PI / 180);
+	}
+
+	radToDeg(rad: number) {
+		return rad * (180 / Math.PI);
+	}
+}
+
+export const sunCalculator = new SunCalculator();

app/src/lib/utilities/result/err.ts

@@ -1,42 +1,42 @@
 export class Err<T, U> {
-    #inner: T
-    #exception?: U
+	#inner: T;
+	#exception?: U;
 
-    constructor(inner: T, exception?: U) {
-        this.#inner = inner
-        this.#exception = exception
-    }
+	constructor(inner: T, exception?: U) {
+		this.#inner = inner;
+		this.#exception = exception;
+	}
 
-    get inner(): T {
-        return this.#inner
-    }
+	get inner(): T {
+		return this.#inner;
+	}
 
-    get exception(): U | undefined {
-        return this.#exception
-    }
+	get exception(): U | undefined {
+		return this.#exception;
+	}
 
-    /**
-     * Type guard for `Ok`
-     * @returns `true` if `Ok`; `false` if `Err`
-     */
-    isOk(): false {
-        return false
-    }
+	/**
+	 * Type guard for `Ok`
+	 * @returns `true` if `Ok`; `false` if `Err`
+	 */
+	isOk(): false {
+		return false;
+	}
 
-    /**
-     * Type guard for `Err`
-     * @returns `true` if `Err`; `false` if `Ok`
-     */
-    isErr(): this is Err<T, U> {
-        return true
-    }
+	/**
+	 * Type guard for `Err`
+	 * @returns `true` if `Err`; `false` if `Ok`
+	 */
+	isErr(): this is Err<T, U> {
+		return true;
+	}
 
-    /**
-     * Create an `Err`
-     * @param inner
-     * @returns `Err(inner)`
-     */
-    static new<E, F>(inner: E, exception: F): Err<E, F> {
-        return new Err<E, F>(inner, exception)
-    }
+	/**
+	 * Create an `Err`
+	 * @param inner
+	 * @returns `Err(inner)`
+	 */
+	static new<E, F>(inner: E, exception: F): Err<E, F> {
+		return new Err<E, F>(inner, exception);
+	}
 }

app/src/lib/utilities/result/index.ts

@@ -1,3 +1,3 @@
-export * from './err'
-export * from './ok'
-export * from './result'
+export * from './err';
+export * from './ok';
+export * from './result';

app/src/lib/utilities/result/ok.ts

@@ -1,44 +1,44 @@
 export class Ok<T> {
-    #inner: T
+	#inner: T;
 
-    constructor(inner: T) {
-        this.#inner = inner
-    }
+	constructor(inner: T) {
+		this.#inner = inner;
+	}
 
-    get inner(): T {
-        return this.#inner
-    }
+	get inner(): T {
+		return this.#inner;
+	}
 
-    /**
-     * Type guard for `Ok`
-     * @returns `true` if `Ok`; `false` if `Err`
-     */
-    isOk(): this is Ok<T> {
-        return true
-    }
+	/**
+	 * Type guard for `Ok`
+	 * @returns `true` if `Ok`; `false` if `Err`
+	 */
+	isOk(): this is Ok<T> {
+		return true;
+	}
 
-    /**
-     * Type guard for `Err`
-     * @returns `true` if `Err`; `false` if `Ok`
-     */
-    isErr(): false {
-        return false
-    }
+	/**
+	 * Type guard for `Err`
+	 * @returns `true` if `Err`; `false` if `Ok`
+	 */
+	isErr(): false {
+		return false;
+	}
 
-    /**
-     * Create an `Ok`
-     * @param inner
-     * @returns `Ok(inner)`
-     */
-    static new<T>(inner: T): Ok<T> {
-        return new Ok<T>(inner)
-    }
+	/**
+	 * Create an `Ok`
+	 * @param inner
+	 * @returns `Ok(inner)`
+	 */
+	static new<T>(inner: T): Ok<T> {
+		return new Ok<T>(inner);
+	}
 
-    /**
-     * Create an empty `Ok`
-     * @returns `Ok(void)`
-     */
-    static void(): Ok<void> {
-        return new Ok(undefined)
-    }
+	/**
+	 * Create an empty `Ok`
+	 * @returns `Ok(void)`
+	 */
+	static void(): Ok<void> {
+		return new Ok(undefined);
+	}
 }

app/src/lib/utilities/result/result.ts

@@ -1,20 +1,20 @@
-import { Err } from './err'
-import { Ok } from './ok'
+import { Err } from './err';
+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 const Result = {
-    /**
-     * @returns `Ok<T>`
-     */
-    ok<T = unknown>(value: T) {
-        return Ok.new(value)
-    },
+export namespace Result {
+	/**
+	 * @returns `Ok<T>`
+	 */
+	export function ok<T = unknown>(value: T) {
+		return Ok.new(value);
+	}
 
-    /**
-     * @returns `Err<E, F>`
-     */
-    err<E = unknown, F = unknown>(error: E, exception?: F) {
-        return Err.new(error, exception)
-    }
+	/**
+	 * @returns `Err<E, F>`
+	 */
+	export function err<E = unknown, F = unknown>(error: E, exception?: F) {
+		return Err.new(error, exception);
+	}
 }

app/src/lib/utilities/string-utilities.ts

@@ -1,47 +1,47 @@
 export const humanFileSize = (size: number): string => {
-    const units = ['B', 'kB', 'MB', 'GB', 'TB']
-    const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))
-    return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i]
+  const units = ['B', 'kB', 'MB', 'GB', 'TB']
+  const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))
+  return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i]
 }
 
 export const capitalize = (str: string): string => {
-    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
 }
 
 export const convertSeconds = (seconds: number) => {
-    // Calculate the number of seconds, minutes, hours, and days
-    let minutes = Math.floor(seconds / 60)
-    let hours = Math.floor(minutes / 60)
-    const days = Math.floor(hours / 24)
+  // Calculate the number of seconds, minutes, hours, and days
+  let minutes = Math.floor(seconds / 60)
+  let hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
 
-    // Calculate the remaining hours, minutes, and seconds
-    hours = hours % 24
-    minutes = minutes % 60
-    seconds = seconds % 60
+  // Calculate the remaining hours, minutes, and seconds
+  hours = hours % 24
+  minutes = minutes % 60
+  seconds = seconds % 60
 
-    // Create the formatted string
-    let result = ''
-    if (days > 0) {
-        result += days + ' day' + (days > 1 ? 's' : '') + ' '
-    }
-    if (hours > 0) {
-        result += hours + ' hour' + (hours > 1 ? 's' : '') + ' '
-    }
-    if (minutes > 0) {
-        result += minutes + ' minute' + (minutes > 1 ? 's' : '') + ' '
-    }
-    result += seconds + ' second' + (seconds > 1 ? 's' : '')
+  // Create the formatted string
+  let result = ''
+  if (days > 0) {
+    result += days + ' day' + (days > 1 ? 's' : '') + ' '
+  }
+  if (hours > 0) {
+    result += hours + ' hour' + (hours > 1 ? 's' : '') + ' '
+  }
+  if (minutes > 0) {
+    result += minutes + ' minute' + (minutes > 1 ? 's' : '') + ' '
+  }
+  result += seconds + ' second' + (seconds > 1 ? 's' : '')
 
-    return result
+  return result
 }
 
 export const compareIp = (ip1: string, ip2: string) => {
-    const ip1Parts = ip1.split('.').map(Number)
-    const ip2Parts = ip2.split('.').map(Number)
-    for (let i = 0; i < 4; i++) {
-        if (ip1Parts[i] !== ip2Parts[i]) {
-            return ip1Parts[i] > ip2Parts[i] ? 1 : -1
-        }
+  const ip1Parts = ip1.split('.').map(Number)
+  const ip2Parts = ip2.split('.').map(Number)
+  for (let i = 0; i < 4; i++) {
+    if (ip1Parts[i] !== ip2Parts[i]) {
+      return ip1Parts[i] > ip2Parts[i] ? 1 : -1
     }
-    return 0
+  }
+  return 0
 }

app/src/lib/utilities/svelte-utilities.ts

@@ -1,16 +1,16 @@
-import { writable } from 'svelte/store'
-import { browser } from '$app/environment'
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
 
 export const persistentStore = <T>(key: string, initialValue: T) => {
-    const savedValue = browser ? localStorage.getItem(key) : null
-    const data: T = savedValue !== null ? JSON.parse(savedValue) : initialValue
-    const store = writable<T>()
+	const savedValue = browser ? localStorage.getItem(key) : null;
+	const data: T = savedValue !== null ? JSON.parse(savedValue) : initialValue;
+	const store = writable<T>();
 
-    store.subscribe(value => {
-        if (browser) localStorage.setItem(key, JSON.stringify(value))
-    })
+	store.subscribe(value => {
+		if (browser) localStorage.setItem(key, JSON.stringify(value));
+	});
 
-    store.set(data)
+	store.set(data);
 
-    return store
-}
+	return store;
+};

app/src/routes/+error.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { page } from '$app/state'
-    import { resolve } from '$app/paths'
+  import { page } from '$app/state'
 </script>
 
 <div class="flex justify-center items-center w-full h-full">
-    <h1>{page.status} {page.error?.message}</h1>
-    <span>Go to <a class="btn btn-primary" href={resolve('/')}>Home page</a></span>
+  <h1>{page.status} {page.error?.message}</h1>
+  <span>Go to <a class="btn btn-primary" href="/">Home page</a></span>
 </div>

app/src/routes/+layout.svelte

@@ -1,130 +1,129 @@
 <script lang="ts">
-    import { onDestroy, onMount } from 'svelte'
-    import { page } from '$app/state'
-    import { Modals, modals } from 'svelte-modals'
-    import Toast from '$lib/components/toasts/Toast.svelte'
-    import { notifications } from '$lib/components/toasts/notifications'
-    import { fade } from 'svelte/transition'
-    import '../app.css'
-    import Menu from '../lib/components/menu/Menu.svelte'
-    import Statusbar from '../lib/components/statusbar/statusbar.svelte'
-    import {
-        telemetry,
-        analytics,
-        ModesEnum,
-        kinematicData,
-        mode,
-        outControllerData,
-        servoAngles,
-        servoAnglesOut,
-        socket,
-        apiLocation,
-        useFeatureFlags,
-        walkGait
-    } from '$lib/stores'
-    import { type Analytics, type DownloadOTA } from '$lib/types/models'
-    import { MessageTopic } from '$lib/types/models'
+  import { onDestroy, onMount } from 'svelte'
+  import { page } from '$app/state'
+  import { Modals, modals } from 'svelte-modals'
+  import Toast from '$lib/components/toasts/Toast.svelte'
+  import { notifications } from '$lib/components/toasts/notifications'
+  import { fade } from 'svelte/transition'
+  import '../app.css'
+  import Menu from '../lib/components/menu/Menu.svelte'
+  import Statusbar from '../lib/components/statusbar/statusbar.svelte'
+  import {
+    telemetry,
+    analytics,
+    ModesEnum,
+    kinematicData,
+    mode,
+    outControllerData,
+    servoAngles,
+    servoAnglesOut,
+    socket,
+    location,
+    useFeatureFlags,
+    walkGait
+  } from '$lib/stores'
+  import { type Analytics, type DownloadOTA } from '$lib/types/models'
+  import { MessageTopic } from '$lib/types/models'
 
-    interface Props {
-        children?: import('svelte').Snippet
-    }
+  interface Props {
+    children?: import('svelte').Snippet
+  }
 
-    let { children }: Props = $props()
+  let { children }: Props = $props()
 
-    const features = useFeatureFlags()
+  const features = useFeatureFlags()
 
-    onMount(async () => {
-        const ws = $apiLocation ? $apiLocation : window.location.host
-        socket.init(`ws://${ws}/api/ws`)
+  onMount(async () => {
+    const ws = $location ? $location : window.location.host
+    socket.init(`ws://${ws}/api/ws/events`)
 
-        addEventListeners()
+    addEventListeners()
 
-        outControllerData.subscribe(data => socket.sendEvent(MessageTopic.input, data))
-        mode.subscribe(data => socket.sendEvent(MessageTopic.mode, data))
-        walkGait.subscribe(data => socket.sendEvent(MessageTopic.gait, data))
-        servoAnglesOut.subscribe(data => socket.sendEvent(MessageTopic.angles, data))
-        kinematicData.subscribe(data => socket.sendEvent(MessageTopic.position, data))
+    outControllerData.subscribe(data => socket.sendEvent(MessageTopic.input, data))
+    mode.subscribe(data => socket.sendEvent(MessageTopic.mode, data))
+    walkGait.subscribe(data => socket.sendEvent(MessageTopic.gait, data))
+    servoAnglesOut.subscribe(data => socket.sendEvent(MessageTopic.angles, data))
+    kinematicData.subscribe(data => socket.sendEvent(MessageTopic.position, data))
+  })
+
+  onDestroy(() => {
+    removeEventListeners()
+  })
+
+  const addEventListeners = () => {
+    socket.on('open', handleOpen)
+    socket.on('close', handleClose)
+    socket.on('error', handleError)
+    socket.on(MessageTopic.rssi, handleNetworkStatus)
+    socket.on(MessageTopic.mode, (data: ModesEnum) => mode.set(data))
+    socket.on(MessageTopic.analytics, handleAnalytics)
+    socket.on(MessageTopic.angles, (angles: number[]) => {
+      if (angles.length) servoAngles.set(angles)
     })
-
-    onDestroy(() => {
-        removeEventListeners()
+    features.subscribe(data => {
+      if (data?.download_firmware) socket.on(MessageTopic.otastatus, handleOAT)
+      if (data?.sonar) socket.on(MessageTopic.sonar, data => console.log(data))
     })
+  }
 
-    const addEventListeners = () => {
-        socket.on('open', handleOpen)
-        socket.on('close', handleClose)
-        socket.on('error', handleError)
-        socket.on(MessageTopic.rssi, handleNetworkStatus)
-        socket.on(MessageTopic.mode, (data: ModesEnum) => mode.set(data))
-        socket.on(MessageTopic.analytics, handleAnalytics)
-        socket.on(MessageTopic.angles, (angles: number[]) => {
-            if (angles.length) servoAngles.set(angles)
-        })
-        features.subscribe(data => {
-            if (data?.download_firmware) socket.on(MessageTopic.otastatus, handleOAT)
-            if (data?.sonar) socket.on(MessageTopic.sonar, data => console.log(data))
-        })
-    }
+  const removeEventListeners = () => {
+    socket.off(MessageTopic.analytics, handleAnalytics)
+    socket.off('open', handleOpen)
+    socket.off('close', handleClose)
+    socket.off(MessageTopic.rssi, handleNetworkStatus)
+    socket.off(MessageTopic.otastatus, handleOAT)
+  }
 
-    const removeEventListeners = () => {
-        socket.off(MessageTopic.analytics, handleAnalytics)
-        socket.off('open', handleOpen)
-        socket.off('close', handleClose)
-        socket.off(MessageTopic.rssi, handleNetworkStatus)
-        socket.off(MessageTopic.otastatus, handleOAT)
-    }
+  const handleOpen = () => {
+    notifications.success('Connection to device established', 5000)
+  }
 
-    const handleOpen = () => {
-        notifications.success('Connection to device established', 5000)
-    }
+  const handleClose = () => {
+    notifications.error('Connection to device lost', 5000)
+    telemetry.setRSSI(0)
+  }
 
-    const handleClose = () => {
-        notifications.error('Connection to device lost', 5000)
-        telemetry.setRSSI(0)
-    }
+  const handleError = (data: any) => console.error(data)
 
-    const handleError = (data: unknown) => console.error(data)
+  const handleAnalytics = (data: Analytics) => analytics.addData(data)
 
-    const handleAnalytics = (data: Analytics) => analytics.addData(data)
+  const handleNetworkStatus = (data: number) => telemetry.setRSSI(data)
 
-    const handleNetworkStatus = (data: number) => telemetry.setRSSI(data)
+  const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data)
 
-    const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data)
-
-    let menuOpen = $state(false)
+  let menuOpen = $state(false)
 </script>
 
 <svelte:head>
-    <title>{page.data.title}</title>
+  <title>{page.data.title}</title>
 </svelte:head>
 
 <div class="drawer">
-    <input id="main-menu" type="checkbox" class="drawer-toggle" bind:checked={menuOpen} />
-    <div class="drawer-content flex flex-col">
-        <!-- Status bar content here -->
-        <Statusbar />
+  <input id="main-menu" type="checkbox" class="drawer-toggle" bind:checked={menuOpen} />
+  <div class="drawer-content flex flex-col">
+    <!-- Status bar content here -->
+    <Statusbar />
 
-        <!-- Main page content here -->
-        {@render children?.()}
-    </div>
-    <!-- Side Navigation -->
-    <div class="drawer-side z-30 shadow-lg">
-        <label for="main-menu" class="drawer-overlay"></label>
-        <Menu menuClicked={() => (menuOpen = false)} />
-    </div>
+    <!-- Main page content here -->
+    {@render children?.()}
+  </div>
+  <!-- Side Navigation -->
+  <div class="drawer-side z-30 shadow-lg">
+    <label for="main-menu" class="drawer-overlay"></label>
+    <Menu menuClicked={() => (menuOpen = false)} />
+  </div>
 </div>
 
 <Modals>
-    {#snippet backdrop()}
-        <div
-            class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
-            transition:fade
-            onclick={modals.closeAll}
-            onkeydown={e => e.key === 'Escape' && modals.closeAll()}
-            role="button"
-            tabindex="0"
-        ></div>
-    {/snippet}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  {#snippet backdrop()}
+    <div
+      class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
+      transition:fade
+      onclick={modals.closeAll}>
+    </div>
+  {/snippet}
 </Modals>
 
 <Toast />

app/src/routes/+layout.ts

@@ -2,33 +2,21 @@ export const prerender = true
 export const ssr = false
 
 const registerFetchIntercept = async () => {
-    const { fetch: originalFetch } = window
-    const fileService = (await import('$lib/services/file-service')).default
-    window.fetch = async (resource, config) => {
-        const url = resource instanceof Request ? resource.url : resource.toString()
-
-        let file = await fileService?.getFile(url)
-        if (file?.isOk() && file.inner) return new Response(new Uint8Array(file.inner))
-
-        if (url.startsWith('http')) {
-            try {
-                const urlObj = new URL(url)
-                const pathOnly = urlObj.pathname
-                file = await fileService?.getFile(pathOnly)
-                if (file?.isOk() && file.inner) return new Response(new Uint8Array(file.inner))
-            } catch {}
-        }
-
-        return originalFetch(resource, config)
-    }
+  const { fetch: originalFetch } = window
+  const fileService = (await import('$lib/services/file-service')).default
+  window.fetch = async (resource, config) => {
+    const url = resource instanceof Request ? resource.url : resource.toString()
+    const file = await fileService?.getFile(url)
+    return file?.isOk() ? new Response(file.inner) : originalFetch(resource, config)
+  }
 }
 
 export const load = async () => {
-    await registerFetchIntercept()
-    return {
-        title: 'Spot micro controller',
-        github: 'runeharlyk/SpotMicroESP32-Leika',
-        app_name: 'Spot Micro Controller',
-        copyright: '2025 Rune Harlyk'
-    }
+  await registerFetchIntercept()
+  return {
+    title: 'Spot micro controller',
+    github: 'runeharlyk/SpotMicroESP32-Leika',
+    app_name: 'Spot Micro Controller',
+    copyright: '2025 Rune Harlyk'
+  }
 }

app/src/routes/+page.svelte

@@ -1,30 +1,27 @@
 <script lang="ts">
-    import { goto } from '$app/navigation'
-    import Visualization from '$lib/components/Visualization.svelte'
-    import { socket } from '$lib/stores'
-    import { onMount } from 'svelte'
-    import { resolve } from '$app/paths'
+  import { goto } from '$app/navigation'
+  import Visualization from '$lib/components/Visualization.svelte'
+  import { socket } from '$lib/stores'
+  import { onMount } from 'svelte'
 
-    onMount(() => {
-        socket.subscribe(isConnected => {
-            if (isConnected) {
-                goto(resolve('/controller'))
-            }
-        })
+  onMount(() => {
+    socket.subscribe(isConnected => {
+      if (isConnected) {
+        goto('/controller')
+      }
     })
+  })
 </script>
 
 <div class="hero bg-base-100 h-screen">
-    <div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center">
-        <div class="w-64 h-64">
-            <Visualization defaultColor={null} orbit panel={false} ground={false} />
-        </div>
-        <div class="card-body w-80">
-            <h2 class="card-title text-center text-2xl">Begin you journey</h2>
-            <p class="py-6 text-center"></p>
-            <a class="btn btn-primary" href={resolve($socket ? '/controller' : '/connection')}>
-                Add Robot Dog
-            </a>
-        </div>
+  <div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center">
+    <div class="w-64 h-64">
+      <Visualization sky={false} orbit panel={false} ground={false} />
     </div>
+    <div class="card-body w-80">
+      <h2 class="card-title text-center text-2xl">Begin you journey</h2>
+      <p class="py-6 text-center"></p>
+      <a class="btn btn-primary" href={$socket ? '/controller' : '/connection'}> Add Robot Dog </a>
+    </div>
+  </div>
 </div>

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

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

app/src/routes/connection/+page.ts

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

app/src/routes/connection/Connection.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
-    import SettingsCard from '$lib/components/SettingsCard.svelte'
-    import { WiFi } from '$lib/components/icons'
-    import { apiLocation, socket } from '$lib/stores'
+  import SettingsCard from '$lib/components/SettingsCard.svelte';
+  import { WiFi } from '$lib/components/icons';
+  import { location, socket } from '$lib/stores';
 
-    const update = () => {
-        const ws = $apiLocation ? $apiLocation : window.location.host
-        socket.init(`ws://${ws}/api/ws/events`)
-    }
+  const update = () => {
+    const ws = $location ? $location : window.location.host;
+    socket.init(`ws://${ws}/api/ws/events`);
+  };
 </script>
 
 <SettingsCard collapsible={false}>
-    {#snippet icon()}
-        <WiFi class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    {/snippet}
-    {#snippet title()}
-        <span>Connection</span>
-    {/snippet}
+  {#snippet icon()}
+    <WiFi class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+  {/snippet}
+  {#snippet title()}
+    <span>Connection</span>
+  {/snippet}
 
-    <div class="flex">
-        <label class="label w-32" for="server">Address:</label>
-        <input class="input" bind:value={$apiLocation} />
-    </div>
+  <div class="flex">
+    <label class="label w-32" for="server">Address:</label>
+    <input class="input" bind:value={$location} />
+  </div>
 
-    <button class="btn btn-primary" onclick={update}>Update</button>
+  <button class="btn btn-primary" onclick={update}>Update</button>
 </SettingsCard>

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

@@ -1,31 +1,31 @@
 <script lang="ts">
-    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 { MessageTopic, type IMU } from '$lib/types/models'
+  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 { MessageTopic, type IMU } from '$lib/types/models'
 
-    let layout = $derived($views.find(v => v.name === $selectedView)!)
+  let layout = $derived($views.find(v => v.name === $selectedView)!)
 
-    onMount(() => {
-        socket.on(MessageTopic.imu, (data: IMU) => {
-            imu.addData(data)
-            if (data.heading)
-                mpu.update(mpuData => {
-                    mpuData.heading = data.heading
-                    console.log(data.heading)
+  onMount(() => {
+    socket.on(MessageTopic.imu, (data: IMU) => {
+      imu.addData(data)
+      if (data.heading)
+        mpu.update(mpuData => {
+          mpuData.heading = data.heading
+          console.log(data.heading)
 
-                    return mpuData
-                })
+          return mpuData
         })
     })
+  })
 </script>
 
 <div class="absolute top-0 select-none w-screen h-screen">
-    <Controls />
-    <div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
-        <WidgetContainer container={layout.content} />
-    </div>
+  <Controls />
+  <div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
+    <WidgetContainer container={layout.content} />
+  </div>
 </div>

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

@@ -1,3 +1,3 @@
 export const load = async () => {
-    return { title: 'Controller' }
-}
+	return { title: 'Controller' };
+};

app/src/routes/controller/Controls.svelte

@@ -1,225 +1,202 @@
 <script lang="ts">
-    import nipplejs from 'nipplejs'
-    import { onMount } from 'svelte'
-    import { capitalize, throttler } from '$lib/utilities'
-    import {
-        input,
-        outControllerData,
-        mode,
-        modes,
-        type Modes,
-        ModesEnum,
-        WalkGaits,
-        walkGait,
-        walkGaitLabels
-    } from '$lib/stores'
-    import type { vector } from '$lib/types/models'
-    import { VerticalSlider } from '$lib/components/input'
-    import { gamepadAxes, gamepadButtonsEdges, hasGamepad } from '$lib/stores/gamepad'
-    import { notifications } from '$lib/components/toasts/notifications'
+  import nipplejs from 'nipplejs'
+  import { onMount } from 'svelte'
+  import { capitalize, throttler } from '$lib/utilities'
+  import {
+    input,
+    outControllerData,
+    mode,
+    modes,
+    type Modes,
+    ModesEnum,
+    walkGaits,
+    WalkGaits,
+    walkGait,
+    walkGaitLabels
+  } from '$lib/stores'
+  import type { vector } from '$lib/types/models'
+  import { VerticalSlider } from '$lib/components/input'
+  import { gamepadAxes, hasGamepad } from '$lib/stores/gamepad'
+  import { notifications } from '$lib/components/toasts/notifications'
 
-    let throttle = new throttler()
-    let left: nipplejs.JoystickManager
-    let right: nipplejs.JoystickManager
+  let throttle = new throttler()
+  let left: nipplejs.JoystickManager
+  let right: nipplejs.JoystickManager
 
-    let throttle_timing = 40
-    let data = new Array(7)
+  let throttle_timing = 40
+  let data = new Array(7)
 
-    $effect(() => {
-        if ($hasGamepad) {
-            notifications.success('🎮 Gamepad connected', 3000)
-        }
+  $effect(() => {
+    if ($hasGamepad) {
+      notifications.success('🎮 Gamepad connected', 3000)
+    }
+  })
+
+  $effect(() => {
+    handleJoyMove('left', { x: $gamepadAxes[0], y: -$gamepadAxes[1] })
+    handleJoyMove('right', { x: $gamepadAxes[2], y: $gamepadAxes[3] })
+  })
+
+  // TODO React to button press
+  //   $effect(() => {
+  //     if ($gamepadButtons.length === 0) return
+  //
+  //   })
+
+  onMount(() => {
+    left = nipplejs.create({
+      zone: document.getElementById('left') as HTMLElement,
+      color: '#15191e80',
+      dynamicPage: true,
+      mode: 'static',
+      restOpacity: 1
     })
 
-    $effect(() => {
-        handleJoyMove('left', { x: $gamepadAxes[0], y: -$gamepadAxes[1] })
-        handleJoyMove('right', { x: $gamepadAxes[2], y: $gamepadAxes[3] })
+    right = nipplejs.create({
+      zone: document.getElementById('right') as HTMLElement,
+      color: '#15191e80',
+      dynamicPage: true,
+      mode: 'static',
+      restOpacity: 1
     })
 
-    $effect(() => {
-        if (!$hasGamepad) return
-        const b = $gamepadButtonsEdges
-        if (!b.length) return
-        if (b[0]?.justPressed) mode.set(5)
-        if (b[1]?.justPressed) mode.set(4)
-        if (b[2]?.justPressed) mode.set(3)
-        if (b[3]?.justPressed) mode.set(0)
-        if (b[12]?.justPressed)
-            input.update(inputData => {
-                inputData['height'] = Math.min(inputData.height + 0.1, 1)
-                return inputData
-            })
-        if (b[13]?.justPressed)
-            input.update(inputData => {
-                inputData['height'] = Math.min(inputData.height - 0.1, 1)
-                return inputData
-            })
+    left.on('move', (_, data) => handleJoyMove('left', data.vector))
+    left.on('end', (_, __) => handleJoyMove('left', { x: 0, y: 0 }))
+    right.on('move', (_, data) => handleJoyMove('right', data.vector))
+    right.on('end', (_, __) => handleJoyMove('right', { x: 0, y: 0 }))
+  })
+
+  const handleJoyMove = (key: 'left' | 'right', data: vector) => {
+    input.update(inputData => {
+      inputData[key] = data
+      return inputData
     })
+    throttle.throttle(updateData, throttle_timing)
+  }
 
-    onMount(() => {
-        left = nipplejs.create({
-            zone: document.getElementById('left') as HTMLElement,
-            color: '#15191e80',
-            dynamicPage: true,
-            mode: 'static',
-            restOpacity: 1
-        })
+  const updateData = () => {
+    data[0] = $input.left.x
+    data[1] = $input.left.y
+    data[2] = $input.right.x
+    data[3] = $input.right.y
+    data[4] = $input.height
+    data[5] = $input.speed
+    data[6] = $input.s1
 
-        right = nipplejs.create({
-            zone: document.getElementById('right') as HTMLElement,
-            color: '#15191e80',
-            dynamicPage: true,
-            mode: 'static',
-            restOpacity: 1
-        })
+    outControllerData.set(data)
+  }
 
-        left.on('move', (_, data) => handleJoyMove('left', data.vector))
-        left.on('end', () => handleJoyMove('left', { x: 0, y: 0 }))
-        right.on('move', (_, data) => handleJoyMove('right', data.vector))
-        right.on('end', () => handleJoyMove('right', { x: 0, y: 0 }))
+  const handleKeyup = (event: KeyboardEvent) => {
+    const down = event.type === 'keydown'
+    input.update(data => {
+      if (event.key === 'w') data.left.y = down ? 1 : 0
+      if (event.key === 'a') data.left.x = down ? 1 : 0
+      if (event.key === 's') data.left.y = down ? -1 : 0
+      if (event.key === 'd') data.left.x = down ? -1 : 0
+      return data
     })
+    throttle.throttle(updateData, throttle_timing)
+  }
 
-    const handleJoyMove = (key: 'left' | 'right', data: vector) => {
-        input.update(inputData => {
-            inputData[key] = data
-            return inputData
-        })
-        throttle.throttle(updateData, throttle_timing)
-    }
+  const handleRange = (event: Event, key: 'speed' | 'height' | 's1') => {
+    const value: number = Number((event.target as HTMLInputElement).value)
 
-    const updateData = () => {
-        data[0] = $input.left.x
-        data[1] = $input.left.y
-        data[2] = $input.right.x
-        data[3] = $input.right.y
-        data[4] = $input.height
-        data[5] = $input.speed
-        data[6] = $input.s1
+    input.update(inputData => {
+      inputData[key] = value
+      return inputData
+    })
+    throttle.throttle(updateData, throttle_timing)
+  }
 
-        outControllerData.set(data)
-    }
+  const changeMode = (modeValue: Modes) => {
+    mode.set(modes.indexOf(modeValue))
+  }
 
-    const handleKeyup = (event: KeyboardEvent) => {
-        const down = event.type === 'keydown'
-        input.update(data => {
-            if (event.key === 'w') data.left.y = down ? 1 : 0
-            if (event.key === 'a') data.left.x = down ? -1 : 0
-            if (event.key === 's') data.left.y = down ? -1 : 0
-            if (event.key === 'd') data.left.x = down ? 1 : 0
-            if (event.key === 'ArrowLeft') data.right.x = down ? 1 : 0
-            if (event.key === 'ArrowRight') data.right.x = down ? -1 : 0
-            return data
-        })
-        throttle.throttle(updateData, throttle_timing)
-    }
-
-    const handleRange = (event: Event, key: 'speed' | 'height' | 's1') => {
-        const value: number = Number((event.target as HTMLInputElement).value)
-
-        input.update(inputData => {
-            inputData[key] = value
-            return inputData
-        })
-        throttle.throttle(updateData, throttle_timing)
-    }
-
-    const changeMode = (modeValue: Modes) => {
-        mode.set(modes.indexOf(modeValue))
-    }
-
-    const changeWalkGait = (walkGaitValue: WalkGaits) => {
-        walkGait.set(walkGaitValue)
-    }
+  const changeWalkGait = (walkGaitValue: WalkGaits) => {
+    walkGait.set(walkGaitValue)
+  }
 </script>
 
 <div class="absolute top-0 left-0 w-screen h-screen">
-    <div class="absolute top-0 left-0 h-full w-full flex portrait:hidden">
-        <div id="left" class="flex w-60 items-center justify-end"></div>
-        <div class="flex-1"></div>
-        <div id="right" class="flex w-60 items-center"></div>
+  <div class="absolute top-0 left-0 h-full w-full flex portrait:hidden">
+    <div id="left" class="flex w-60 items-center justify-end"></div>
+    <div class="flex-1"></div>
+    <div id="right" class="flex w-60 items-center"></div>
+  </div>
+  <div class="absolute bottom-0 right-0 p-4 z-10 gap-2 flex-col hidden lg:flex">
+    <div class="flex justify-center w-full">
+      <kbd class="kbd">W</kbd>
     </div>
-    <div class="absolute bottom-0 right-0 p-4 z-10 gap-2 flex-col hidden lg:flex">
-        <div class="flex justify-center w-full">
-            <kbd class="kbd">W</kbd>
-        </div>
-        <div class="flex justify-center gap-2 w-full">
-            <kbd class="kbd">A</kbd>
-            <kbd class="kbd">S</kbd>
-            <kbd class="kbd">D</kbd>
-        </div>
-        <div class="flex justify-center w-full"></div>
+    <div class="flex justify-center gap-2 w-full">
+      <kbd class="kbd">A</kbd>
+      <kbd class="kbd">S</kbd>
+      <kbd class="kbd">D</kbd>
     </div>
-    <div class="absolute bottom-0 z-10 flex items-end">
-        <div
-            class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl"
-        >
-            <VerticalSlider
-                min={0}
-                max={1}
-                step={0.01}
-                oninput={(e: Event) => handleRange(e, 'height')}
-            />
-            <label for="height">Ht</label>
-        </div>
-        <div
-            class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden"
-        >
-            <div class="join">
-                {#each modes as modeValue}
-                    <button
-                        class="btn join-item"
-                        class:btn-primary={$mode === modes.indexOf(modeValue)}
-                        onclick={() => changeMode(modeValue)}
-                    >
-                        {capitalize(modeValue)}
-                    </button>
-                {/each}
-            </div>
+    <div class="flex justify-center w-full"></div>
+  </div>
+  <div class="absolute bottom-0 z-10 flex items-end">
+    <div class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl">
+      <VerticalSlider
+        min={0}
+        max={1}
+        step={0.01}
+        oninput={(e: Event) => handleRange(e, 'height')} />
+      <label for="height">Ht</label>
+    </div>
+    <div
+      class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden">
+      <div class="join">
+        {#each modes as modeValue}
+          <button
+            class="btn join-item"
+            class:btn-primary={$mode === modes.indexOf(modeValue)}
+            onclick={() => changeMode(modeValue)}>
+            {capitalize(modeValue)}
+          </button>
+        {/each}
+      </div>
 
-            {#if $mode === ModesEnum.Walk}
-                <div class="join">
-                    {#each Object.values(WalkGaits) as gaitValue}
-                        {#if typeof gaitValue === 'number'}
-                            <button
-                                class="btn join-item btn-sm"
-                                class:btn-secondary={$walkGait === gaitValue}
-                                onclick={() => changeWalkGait(gaitValue)}
-                            >
-                                {walkGaitLabels[gaitValue]}
-                            </button>
-                        {/if}
-                    {/each}
-                </div>
-
-                <div class="flex gap-4">
-                    <div>
-                        <label for="s1">S1</label>
-                        <input
-                            type="range"
-                            name="s1"
-                            min="0"
-                            step="0.01"
-                            max="1"
-                            oninput={e => handleRange(e, 's1')}
-                            class="range range-sm range-primary"
-                        />
-                    </div>
-                    <div>
-                        <label for="speed">Speed</label>
-                        <input
-                            type="range"
-                            name="speed"
-                            min="0"
-                            step="0.01"
-                            max="1"
-                            oninput={e => handleRange(e, 'speed')}
-                            class="range range-sm range-primary"
-                        />
-                    </div>
-                </div>
+      {#if $mode === ModesEnum.Walk}
+        <div class="join">
+          {#each Object.values(WalkGaits) as gaitValue}
+            {#if typeof gaitValue === 'number'}
+              <button
+                class="btn join-item btn-sm"
+                class:btn-secondary={$walkGait === gaitValue}
+                onclick={() => changeWalkGait(gaitValue)}>
+                {walkGaitLabels[gaitValue]}
+              </button>
             {/if}
+          {/each}
         </div>
+
+        <div class="flex gap-4">
+          <div>
+            <label for="s1">S1</label>
+            <input
+              type="range"
+              name="s1"
+              min="0"
+              step="0.01"
+              max="1"
+              oninput={e => handleRange(e, 's1')}
+              class="range range-sm range-primary" />
+          </div>
+          <div>
+            <label for="speed">Speed</label>
+            <input
+              type="range"
+              name="speed"
+              min="0"
+              step="0.01"
+              max="1"
+              oninput={e => handleRange(e, 'speed')}
+              class="range range-sm range-primary" />
+          </div>
+        </div>
+      {/if}
     </div>
+  </div>
 </div>
 
 <svelte:window onkeyup={handleKeyup} onkeydown={handleKeyup} />

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

@@ -1,8 +1,7 @@
-import type { PageLoad } from './$types'
-import { goto } from '$app/navigation'
-import { resolve } from '$app/paths'
+import type { PageLoad } from './$types';
+import { goto } from '$app/navigation';
 
 export const load = (async () => {
-    goto(resolve('/'))
-    return
-}) satisfies PageLoad
+	goto('/');
+	return;
+}) satisfies PageLoad;

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

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

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

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

app/src/routes/peripherals/camera/Camera.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-    import SettingsCard from '$lib/components/SettingsCard.svelte'
-    import CameraSetting from './CameraSetting.svelte'
-    import Stream from '$lib/components/Stream.svelte'
-    import { Camera } from '$lib/components/icons'
+	import SettingsCard from "$lib/components/SettingsCard.svelte";
+	import CameraSetting from './CameraSetting.svelte';
+	import Stream from '$lib/components/Stream.svelte';
+	import { Camera } from "$lib/components/icons";
 </script>
 
 <SettingsCard collapsible={false}>
     {#snippet icon()}
-        <Camera class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    {/snippet}
+		<Camera  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+	{/snippet}
     {#snippet title()}
-        <span>Camera</span>
-    {/snippet}
+		<span >Camera</span>
+	{/snippet}
     <Stream />
     <CameraSetting />
-</SettingsCard>
+</SettingsCard>

app/src/routes/peripherals/camera/CameraSetting.svelte

@@ -1,25 +1,13 @@
 <script lang="ts">
-    import { api } from '$lib/api'
-    import Spinner from '$lib/components/Spinner.svelte'
-    import type { CameraSettings } from '$lib/types/models'
-    let settings: CameraSettings = $state({
-        brightness: 0,
-        contrast: 0,
-        framesize: 0,
-        vflip: false,
-        hmirror: false,
-        special_effect: 0,
-        quality: 0,
-        saturation: 0,
-        sharpness: 0,
-        denoise: 0,
-        wb_mode: 0
-    })
+	import { api } from '$lib/api';
+	import Spinner from '$lib/components/Spinner.svelte';
+    import type { CameraSettings } from '$lib/types/models';
+    let settings:CameraSettings = $state()
 
     const getCameraSettings = async () => {
         const result = await api.get<CameraSettings>('/api/camera/settings')
-        if (result.isErr()) {
-            console.error('An error occurred', result.inner)
+        if (result.isErr()){
+            console.error("An error occurred", result.inner);
             return
         }
         settings = result.inner
@@ -27,8 +15,8 @@
 
     const updateCameraSettings = async () => {
         const result = await api.post<CameraSettings>('/api/camera/settings', settings)
-        if (result.isErr()) {
-            console.error('An error occurred', result.inner)
+        if (result.isErr()){
+            console.error("An error occurred", result.inner);
             return
         }
         settings = result.inner
@@ -37,47 +25,27 @@
 
 {#await getCameraSettings()}
     <Spinner />
-{:then}
+{:then _} 
     <div class="flex flex-col gap-1">
-        <button class="btn btn-primary" type="button" onclick={updateCameraSettings}
-            >Update camera settings</button
-        >
+        <button class="btn btn-primary" type="button" onclick={updateCameraSettings}>Update camera settings</button>
 
         <label for="brightness">
             Brightness {settings.brightness}
-            <input
-                type="range"
-                min="-2"
-                max="2"
-                class="range range-xs"
-                bind:value={settings.brightness}
-            />
+            <input type="range" min="-2" max="2" class="range range-xs" bind:value={settings.brightness}/> 
         </label>
 
         <label for="contrast">
             Contrast {settings.contrast}
-            <input
-                type="range"
-                min="-2"
-                max="2"
-                class="range range-xs"
-                bind:value={settings.contrast}
-            />
+            <input type="range" min="-2" max="2" class="range range-xs" bind:value={settings.contrast}/> 
         </label>
 
         <label for="framesize">
             FrameSize {settings.framesize}
-            <input
-                type="range"
-                min="0"
-                max="10"
-                class="range range-xs"
-                bind:value={settings.framesize}
-            />
+            <input type="range" min="0" max="10" class="range range-xs" bind:value={settings.framesize}/> 
         </label>
 
         <label class="cursor-pointer flex items-center justify-between">
-            Vertical flip
+            Vertical flip 
             <input type="checkbox" class="toggle" bind:checked={settings.vflip} />
         </label>
 
@@ -88,10 +56,7 @@
 
         <label for="special_effect" class="flex items-center">
             <span class="basis-1/2">Special Effect</span>
-            <select
-                class="select select-bordered select-sm w-full max-w-xs"
-                bind:value={settings.special_effect}
-            >
+            <select class="select select-bordered select-sm w-full max-w-xs" bind:value={settings.special_effect}>
                 <option value={0}>No effect</option>
                 <option value={1}>Negative</option>
                 <option value={2}>Grayscale</option>
@@ -102,4 +67,4 @@
             </select>
         </label>
     </div>
-{/await}
+{/await}

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

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

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

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

app/src/routes/peripherals/i2c/i2c.svelte

@@ -1,84 +1,79 @@
 <script lang="ts">
-    import SettingsCard from '$lib/components/SettingsCard.svelte'
-    import { onMount } from 'svelte'
-    import { socket } from '$lib/stores'
-    import { MessageTopic, type I2CDevice } from '$lib/types/models'
-    import { Connection } from '$lib/components/icons'
-    import I2CSetting from './i2cSetting.svelte'
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
+  import { onMount } from 'svelte'
+  import { socket } from '$lib/stores'
+  import { MessageTopic, type I2CDevice } from '$lib/types/models'
+  import { Connection } from '$lib/components/icons'
+  import I2CSetting from './i2cSetting.svelte'
 
-    const i2cDevices = [
-        { address: 30, part_number: 'HMC5883', name: '3-Axis Digital Compass/Magnetometer IC' },
-        { address: 41, part_number: 'BNO055', name: '9-Axis Absolute Orientation Sensor' },
-        { address: 64, part_number: 'PCA9685', name: '16-channel PWM driver default address' },
-        { address: 72, part_number: 'ADS1115', name: '4-channel 16-bit ADC' },
-        {
-            address: 104,
-            part_number: 'MPU6050',
-            name: 'Six-Axis (Gyro + Accelerometer) MEMS MotionTracking™ Devices'
-        },
-        {
-            address: 105,
-            part_number: 'ICM20948',
-            name: 'Nine-Axis (Gyro + Accelerometer + Magnetometer) MEMS MotionTracking™ Device'
-        },
-        { address: 115, part_number: 'PAJ7620U2', name: 'Gesture sensor' },
-        { address: 119, part_number: 'BMP085', name: 'Temp/Barometric' }
-    ]
+  const i2cDevices = [
+    { address: 30, part_number: 'HMC5883', name: '3-Axis Digital Compass/Magnetometer IC' },
+    { address: 41, part_number: 'BNO055', name: '9-Axis Absolute Orientation Sensor' },
+    { address: 64, part_number: 'PCA9685', name: '16-channel PWM driver default address' },
+    { address: 72, part_number: 'ADS1115', name: '4-channel 16-bit ADC' },
+    {
+      address: 104,
+      part_number: 'MPU6050',
+      name: 'Six-Axis (Gyro + Accelerometer) MEMS MotionTracking™ Devices'
+    },
+    { address: 115, part_number: 'PAJ7620U2', name: 'Gesture sensor' },
+    { address: 119, part_number: 'BMP085', name: 'Temp/Barometric' }
+  ]
 
-    let active_devices: I2CDevice[] = $state([])
+  let active_devices: I2CDevice[] = $state([])
 
-    let isLoading = $state(false)
+  let isLoading = $state(false)
 
-    onMount(() => {
-        socket.on(MessageTopic.i2cScan, handleScan)
-        triggerScan()
-        return () => socket.off(MessageTopic.i2cScan, handleScan)
-    })
+  onMount(() => {
+    socket.on(MessageTopic.i2cScan, handleScan)
+    triggerScan()
+    return () => socket.off(MessageTopic.i2cScan, handleScan)
+  })
 
-    const handleScan = (data: { addresses: number[] }) => {
-        active_devices = data.addresses.map(
-            (address: number) =>
-                i2cDevices.find(device => device.address === address) || {
-                    address,
-                    part_number: 'Unknown',
-                    name: 'Unknown'
-                }
-        )
-        isLoading = false
-    }
+  const handleScan = (data: any) => {
+    active_devices = data.addresses.map(
+      (address: number) =>
+        i2cDevices.find(device => device.address === address) || {
+          address,
+          part_number: 'Unknown',
+          name: 'Unknown'
+        }
+    )
+    isLoading = false
+  }
 
-    const triggerScan = () => {
-        isLoading = true
-        socket.sendEvent(MessageTopic.i2cScan, '')
-    }
+  const triggerScan = () => {
+    isLoading = true
+    socket.sendEvent(MessageTopic.i2cScan, '')
+  }
 </script>
 
 <SettingsCard collapsible={false}>
-    {#snippet icon()}
-        <Connection class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    {/snippet}
-    {#snippet title()}
-        <span>I<sup>2</sup>C</span>
-    {/snippet}
-    {#snippet right()}
-        <button class="btn btn-primary" onclick={triggerScan} disabled={isLoading}>
-            {#if isLoading}
-                <span class="loading loading-ring loading-xs"></span>
-            {:else}
-                Scan
-            {/if}
-        </button>
-    {/snippet}
+  {#snippet icon()}
+    <Connection class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+  {/snippet}
+  {#snippet title()}
+    <span>I<sup>2</sup>C</span>
+  {/snippet}
+  {#snippet right()}
+    <button class="btn btn-primary" onclick={triggerScan} disabled={isLoading}>
+      {#if isLoading}
+        <span class="loading loading-ring loading-xs"></span>
+      {:else}
+        Scan
+      {/if}
+    </button>
+  {/snippet}
 
-    <I2CSetting />
+  <I2CSetting />
 
-    <div class="grid">
-        {#if active_devices.length === 0}
-            <div>No I2C devices found</div>
-        {:else}
-            {#each active_devices as device}
-                <div>[{device.address.toString(16)}] {device.part_number} - {device.name}</div>
-            {/each}
-        {/if}
-    </div>
+  <div class="grid">
+    {#if active_devices.length === 0}
+      <div>No I2C devices found</div>
+    {:else}
+      {#each active_devices as device}
+        <div>[{device.address.toString(16)}] {device.part_number} - {device.name}</div>
+      {/each}
+    {/if}
+  </div>
 </SettingsCard>

app/src/routes/peripherals/i2c/i2cSetting.svelte

@@ -1,107 +1,99 @@
 <script lang="ts">
-    import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
-    import { socket } from '$lib/stores'
-    import { MessageTopic, type PeripheralsConfiguration } from '$lib/types/models'
-    import { onMount } from 'svelte'
-    import { modals } from 'svelte-modals'
-    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
+  import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
+  import { socket } from '$lib/stores'
+  import { MessageTopic, type PeripheralsConfiguration } from '$lib/types/models'
+  import { onMount } from 'svelte'
+  import { modals } from 'svelte-modals'
+  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
 
-    let settings: PeripheralsConfiguration | null = $state(null)
-    let isEditing = $state(false)
+  let settings: PeripheralsConfiguration | null = $state(null)
+  let isEditing = $state(false)
 
-    onMount(() => {
-        socket.on(MessageTopic.peripheralSettings, handleSettings)
-        socket.sendEvent(MessageTopic.peripheralSettings, '')
-        return () => socket.off(MessageTopic.peripheralSettings, handleSettings)
+  onMount(() => {
+    socket.on(MessageTopic.peripheralSettings, handleSettings)
+    socket.sendEvent(MessageTopic.peripheralSettings, '')
+    return () => socket.off(MessageTopic.peripheralSettings, handleSettings)
+  })
+
+  const handleSettings = (data: any) => {
+    settings = data
+  }
+
+  const handleSave = () => {
+    modals.open(ConfirmDialog, {
+      title: 'Confirm configuration',
+      message:
+        'Are you sure you want to save this configuration? The operation cannot be undone. Please make sure you have the correct settings.',
+      labels: {
+        cancel: { label: 'Cancel', icon: Cancel },
+        confirm: { label: 'Confirm', icon: Power }
+      },
+      onConfirm: () => {
+        modals.close()
+        socket.sendEvent(MessageTopic.peripheralSettings, settings)
+      }
     })
+  }
 
-    const handleSettings = (data: Record<string, unknown>) => {
-        settings = data as PeripheralsConfiguration
-    }
-
-    const handleSave = () => {
-        modals.open(ConfirmDialog, {
-            title: 'Confirm configuration',
-            message:
-                'Are you sure you want to save this configuration? The operation cannot be undone. Please make sure you have the correct settings.',
-            labels: {
-                cancel: { label: 'Cancel', icon: Cancel },
-                confirm: { label: 'Confirm', icon: Power }
-            },
-            onConfirm: () => {
-                modals.close()
-                socket.sendEvent(MessageTopic.peripheralSettings, settings)
-            }
-        })
-    }
-
-    const Icon = $derived(isEditing ? EditOff : Edit)
+  const Icon = $derived(isEditing ? EditOff : Edit)
 </script>
 
 {#if settings}
-    <div class="collapse bg-base-100 border-base-300 border">
-        <input type="checkbox" />
-        <div class="collapse-title font-semibold">Configuration</div>
-        <div class="collapse-content text-sm">
-            <div class="flex flex-col gap-2">
-                <label for="sda" class="input validator">
-                    SDA
+  <div class="collapse bg-base-100 border-base-300 border">
+    <input type="checkbox" />
+    <div class="collapse-title font-semibold">Configuration</div>
+    <div class="collapse-content text-sm">
+      <div class="flex flex-col gap-2">
+        <label for="sda" class="input validator">
+          SDA
 
-                    <input
-                        id="sda"
-                        type="number"
-                        required
-                        placeholder="Type a number between 1 to 48"
-                        min="0"
-                        max="48"
-                        title="SDA pin number (0-48)"
-                        disabled={!isEditing}
-                        bind:value={settings.sda}
-                    />
-                </label>
-                <label for="scl" class="input validator">
-                    SCL
+          <input
+            id="sda"
+            type="number"
+            required
+            placeholder="Type a number between 1 to 48"
+            min="0"
+            max="48"
+            title="SDA pin number (0-48)"
+            disabled={!isEditing}
+            bind:value={settings.sda} />
+        </label>
+        <label for="scl" class="input validator">
+          SCL
 
-                    <input
-                        id="scl"
-                        type="number"
-                        required
-                        placeholder="Type a number between 1 to 48"
-                        min="1"
-                        max="48"
-                        title="SCL pin number (0-48)"
-                        disabled={!isEditing}
-                        bind:value={settings.scl}
-                    />
-                </label>
-                <label class="input validator" for="frequency">
-                    Frequency
-                    <input
-                        id="frequency"
-                        type="number"
-                        required
-                        placeholder="Type a number between 100000 to 430000"
-                        min="100000"
-                        max="430000"
-                        title="I2C frequency in Hz"
-                        disabled={!isEditing}
-                        bind:value={settings.frequency}
-                    />
-                </label>
-                <div>
-                    <button
-                        class="btn btn-outline btn-primary"
-                        onclick={() => (isEditing = !isEditing)}
-                    >
-                        <Icon class="h-6 w-6" />
-                    </button>
-                    {#if isEditing}
-                        <button class="btn btn-outline btn-primary" onclick={handleSave}
-                            >Save</button
-                        >
-                    {/if}
-                </div>
-            </div>
+          <input
+            id="scl"
+            type="number"
+            required
+            placeholder="Type a number between 1 to 48"
+            min="1"
+            max="48"
+            title="SCL pin number (0-48)"
+            disabled={!isEditing}
+            bind:value={settings.scl} />
+        </label>
+        <label class="input validator" for="frequency">
+          Frequency
+          <input
+            id="frequency"
+            type="number"
+            required
+            placeholder="Type a number between 100000 to 430000"
+            min="100000"
+            max="430000"
+            title="I2C frequency in Hz"
+            disabled={!isEditing}
+            bind:value={settings.frequency} />
+        </label>
+        <div>
+          <button class="btn btn-outline btn-primary" onclick={() => (isEditing = !isEditing)}>
+            <Icon class="h-6 w-6" />
+          </button>
+          {#if isEditing}
+            <button class="btn btn-outline btn-primary" onclick={handleSave}>Save</button>
+          {/if}
         </div>
+      </div>
     </div>
+  </div>
 {/if}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import IMU from './imu.svelte'
+	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 />
+	<IMU />
 </div>

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

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