🎨 Expand animation with looping

.github/workflows/deploy.yml

@@ -0,0 +1,61 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./app
+    env:
+      BASE_PATH: /SpotMicroESP32-Leika
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+          cache-dependency-path: "./app/pnpm-lock.yaml"
+
+      - run: pnpm install
+      - run: pnpm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        with:
+          static_site_generator: "sveltekit"
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: app/build/
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: github-pages
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -2,7 +2,6 @@
 .vscode/c_cpp_properties.json
 .vscode/launch.json
 .vscode/ipch
-
 __pycache__/
 *.py[cod]
 *$py.class

.vscode/extensions.json

@@ -2,10 +2,10 @@
     // See http://go.microsoft.com/fwlink/?LinkId=827846
     // for the documentation about the extensions.json format
     "recommendations": [
-      "platformio.platformio-ide",
-      "svelte.svelte-vscode",
         "bradlc.vscode-tailwindcss",
-      "esbenp.prettier-vscode"
+        "esbenp.prettier-vscode",
+        "platformio.platformio-ide",
+        "svelte.svelte-vscode"
     ],
     "unwantedRecommendations": [
         "ms-vscode.cpptools-extension-pack"

app/.env

@@ -0,0 +1,3 @@
+PUBLIC_VITE_USE_HOST_NAME=true
+PUBLIC_USE_JSON=true
+PUBLIC_USE_MSGPACK=true

app/.eslintrc.cjs

@@ -28,4 +28,4 @@ module.exports = {
             }
         }
     ]
-};
+}

app/.gitignore

@@ -3,7 +3,6 @@ node_modules
 /build
 /.svelte-kit
 /package
-.env
 .env.*
 !.env.example
 vite.config.js.timestamp-*

app/.prettierrc

@@ -1,13 +1,12 @@
 {
     "useTabs": false,
     "singleQuote": true,
-    "tabWidth": 2,
+    "tabWidth": 4,
     "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,3 +1,7 @@
 {
-	"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" {
+declare module 'app-env' {
     interface ENV {
-    VITE_USE_HOST_NAME: boolean;
+        VITE_USE_HOST_NAME: boolean
     }
 
-  const appEnv: ENV;
-  export default appEnv;
+    const appEnv: ENV
+    export default appEnv
 }

app/package.json

@@ -16,52 +16,50 @@
         "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",
+        "@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.0.12",
-    "tslib": "^2.6.1",
-    "typescript": "^5.5.0",
-    "unplugin-icons": "^0.18.5",
-    "vite": "^6.2.1",
-    "vitest": "^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": {
-    "@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",
-    "jwt-decode": "^4.0.0",
-    "nipplejs": "^0.10.1",
+        "@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.0",
-    "three": "^0.162.0",
-    "urdf-loader": "^0.12.1",
+        "svelte-modals": "^2.0.1",
+        "three": "^0.180.0",
+        "urdf-loader": "^0.12.6",
         "uzip": "^0.20201231.0",
-    "xacro-parser": "^0.3.9",
-    "@types/msgpack-lite": "^0.1.11",
-    "msgpack-lite": "^0.1.26"
+        "xacro-parser": "^0.3.10"
     },
     "packageManager": "pnpm@9.3.0"
 }

app/playwright.config.ts

@@ -1,4 +1,4 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import type { PlaywrightTestConfig } from '@playwright/test'
 
 const config: PlaywrightTestConfig = {
     webServer: {
@@ -7,6 +7,6 @@ const config: PlaywrightTestConfig = {
     },
     testDir: 'tests/integration',
     testMatch: /(.+\.)?(test|spec)\.[jt]s/
-};
+}
 
-export default config;
+export default config

app/src/app.css

@@ -23,6 +23,14 @@
     --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

@@ -10,4 +10,4 @@ declare global {
     }
 }
 
-export {};
+export {}

app/src/app.html

@@ -3,7 +3,10 @@
     <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="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%

app/src/index.test.ts

@@ -1,7 +0,0 @@
-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 { location } from './stores';
+import { get } from 'svelte/store'
+import { Err, Ok, type Result } from './utilities'
+import { apiLocation } from './stores'
 
-export namespace api {
-    export function get<TResponse>(endpoint: string, params?: RequestInit) {
-        return sendRequest<TResponse>(endpoint, 'GET', null, params);
-    }
+export const api = {
+    get<TResponse>(endpoint: string, params?: RequestInit) {
+        return sendRequest<TResponse>(endpoint, 'GET', null, params)
+    },
 
-    export function post<TResponse>(endpoint: string, data?: unknown) {
-        return sendRequest<TResponse>(endpoint, 'POST', data);
-    }
+    post<TResponse>(endpoint: string, data?: unknown) {
+        return sendRequest<TResponse>(endpoint, 'POST', data)
+    },
 
-    export function put<TResponse>(endpoint: string, data?: unknown) {
-        return sendRequest<TResponse>(endpoint, 'PUT', data);
-    }
+    put<TResponse>(endpoint: string, data?: unknown) {
+        return sendRequest<TResponse>(endpoint, 'PUT', data)
+    },
 
-    export function remove<TResponse>(endpoint: string) {
-        return sendRequest<TResponse>(endpoint, 'DELETE');
+    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,43 +38,42 @@ async function sendRequest<TResponse>(
             Authorization: 'Basic',
             'Content-Type': 'application/json'
         }
-    };
+    }
 
-    let response;
+    let response
 
     try {
-        response = await fetch(endpoint, request);
-    } catch (error) {
-        return Err.new(new Error(), 'An error has occurred');
+        response = await fetch(endpoint, request)
+    } catch {
+        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(location)) return url;
-    const protocol = window.location.protocol;
-    return `${protocol}//${get(location)}${url.startsWith('/') ? '' : '/'}${url}`;
+    if (url.startsWith('http') || !get(apiLocation)) return url
+    const protocol = window.location.protocol
+    return `${protocol}//${get(apiLocation)}${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

@@ -23,15 +23,20 @@
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
         use:exitBeforeEnter
-    use:focusTrap>
+        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">
+            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()}>
+                <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}>

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,26 +1,18 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap';
-    import { fly } from 'svelte/transition';
-    import { Check } from './icons';
-    import { exitBeforeEnter } from 'svelte-modals';
-
-    // provided by <Modals />
-
-    interface Props {
-        isOpen: boolean;
-        title: string;
-        message: string;
-        onDismiss: any;
-        dismiss?: any;
-    }
+    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,
-        dismiss = { label: 'Dismiss', icon: Check }
-    }: Props = $props();
+        labels = {
+            dismiss: { label: 'Dismiss', icon: Check }
+        }
+    }: ModalProps = $props()
 </script>
 
 {#if isOpen}
@@ -43,7 +35,7 @@
                     class="btn btn-warning text-warning-content inline-flex items-center"
                     onclick={onDismiss}
                 >
-                    <dismiss.icon class="mr-2 h-5 w-5" /><span>{dismiss.label}</span>
+                    <labels.dismiss.icon class="mr-2 h-5 w-5" /><span>{labels.dismiss.label}</span>
                 </button>
             </div>
         </div>

app/src/lib/components/OrientationIndicator.svelte

@@ -4,7 +4,7 @@
     import { imu } from '$lib/stores/imu'
     import SceneBuilder from '$lib/sceneBuilder'
 
-  let canvas: HTMLCanvasElement = $state()
+    let canvas: HTMLCanvasElement
     let sceneBuilder: SceneBuilder
     let cube: THREE.Mesh
     let targetRotation = new THREE.Euler()

app/src/lib/components/SettingsCard.svelte

@@ -11,14 +11,23 @@
         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">
+        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">
+            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?.()}
@@ -27,26 +36,33 @@
                 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 ?
+                    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 }}>
+                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">
+        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">
+            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?.()}

app/src/lib/components/Spinner.svelte

@@ -1,6 +1,5 @@
 <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">

app/src/lib/components/StatusItem.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import type { ComponentType } from 'svelte'
+
     type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
 
     const {
@@ -9,12 +11,12 @@
         class: klass = '',
         children = null
     } = $props<{
-    icon?: any
+        icon?: ComponentType
         title: string
         description?: string | number
         variant?: Variant
         class?: string
-    children?: () => any
+        children?: () => ComponentType
     }>()
 
     const Icon = $derived(icon)

app/src/lib/components/Stream.svelte

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

app/src/lib/components/Toast.svelte

@@ -1,22 +1,24 @@
 <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 = {
+    let {
+        theme = {
             error: 'alert-error',
             success: 'alert-success',
             warning: 'alert-warning',
             info: 'alert-info'
-	}, icon = {
+        },
+        icon = {
             error: error,
             success: success,
             warning: warning,
             info: info
-	} } = $props();
+        }
+    } = $props()
 </script>
 
 <div class="toast toast-end mr-4">

app/src/lib/components/Visualization.svelte

@@ -6,7 +6,7 @@
         LineBasicMaterial,
         Mesh,
         MeshBasicMaterial,
-    Object3D,
+        type Object3D,
         SphereGeometry,
         Vector3,
         type NormalBufferAttributes,
@@ -21,7 +21,10 @@
         servoAnglesOut,
         servoAngles,
         mpu,
-    jointNames
+        jointNames,
+        currentKinematic,
+        walkGait,
+        walkGaitToMode
     } from '$lib/stores'
     import {
         extractFootColor,
@@ -32,12 +35,11 @@
     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 Kinematic, { type body_state_t } from '$lib/kinematic'
+    import { type body_state_t } from '$lib/kinematic'
     import {
+        Animater,
         BezierState,
         CalibrationState,
-    EightPhaseWalkState,
-    FourPhaseWalkState,
         IdleState,
         RestState,
         StandState
@@ -57,20 +59,18 @@
     let { sky = true, orbit = false, panel = true, debug = false, ground = true }: Props = $props()
 
     let sceneManager = $state(new SceneBuilder())
-  let canvas: HTMLCanvasElement = $state()
+    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 = new Kinematic()
+    let kinematic = get(currentKinematic)
 
     let planners = {
         [ModesEnum.Deactivated]: new IdleState(),
@@ -78,8 +78,8 @@
         [ModesEnum.Calibration]: new CalibrationState(),
         [ModesEnum.Rest]: new RestState(),
         [ModesEnum.Stand]: new StandState(),
-    [ModesEnum.Crawl]: new EightPhaseWalkState(),
-    [ModesEnum.Walk]: new BezierState()
+        [ModesEnum.Walk]: new BezierState(),
+        [ModesEnum.Animate]: new Animater()
     }
     let lastTick = performance.now()
 
@@ -92,7 +92,13 @@
         xm: 0,
         ym: 0.5,
         zm: 0,
-    feet: kinematic.getDefaultFeetPos()
+        feet: kinematic.getDefaultFeetPos(),
+        cumulative_x: 0,
+        cumulative_y: 0,
+        cumulative_z: 0,
+        cumulative_roll: 0,
+        cumulative_pitch: 0,
+        cumulative_yaw: 0
     }
 
     let settings = {
@@ -117,6 +123,7 @@
         await populateModelCache()
         await createScene()
         servoAngles.subscribe(updateAnglesFromStore)
+        walkGait.subscribe(gait => planners[ModesEnum.Walk].set_mode(walkGaitToMode(gait)))
         if (panel) createPanel()
     })
 
@@ -170,18 +177,21 @@
 
     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)
+        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(8, 30, orbit)
+            .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)
+            .addModel($model as URDFRobot)
             .addTransformControls(sceneManager.model)
             .fillParent()
             .addRenderCb(render)
@@ -195,32 +205,13 @@
         sceneManager.scene.add(target)
 
         if (debug) {
-      sceneManager.addDragControl(updateAngles)
+            sceneManager.addDragControl((angles: Record<string, number>) => {
+                Object.entries(angles).forEach(([name, angle]) => {
+                    updateAngles(name, angle)
+                })
+            })
         }
         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
-    }
-
-    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])
-    })
     }
 
     const calculate_kinematics = () => {
@@ -232,7 +223,13 @@
             xm: settings.xm,
             ym: settings.ym,
             zm: settings.zm,
-      feet: body_state.feet
+            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]))
@@ -243,12 +240,26 @@
         if (settings['Robot transform controls'] || !settings['Auto orient robot']) return
         robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y))
 
-    robot.position.z = smooth(robot.position.z, -settings.xm, 0.1)
-    robot.position.x = smooth(robot.position.x, -settings.zm, 0.1)
+        const cumulativeYaw = body_state.cumulative_yaw
 
-    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 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) => {
@@ -264,16 +275,15 @@
         if (sceneManager.isDragging || !settings['Internal kinematic']) return
         const controlData = get(outControllerData)
         const data = {
-      stop: controlData[0],
-      lx: controlData[1],
-      ly: controlData[2],
-      rx: controlData[3],
-      ry: controlData[4],
-      h: controlData[5],
-      s: controlData[6],
-      s1: controlData[7]
+            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 + 127) * 0.35) / 100
+        body_state.ym = data.h
 
         let planner = planners[get(mode)]
         const delta = performance.now() - lastTick
@@ -310,7 +320,6 @@
 
         const toes = getToeWorldPositions(robot)
 
-    renderTraceLines(toes)
         update_camera(robot)
         update_gait()
         calculate_kinematics()

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">

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

@@ -3,8 +3,8 @@
         min?: number
         max?: number
         step?: number
-    value?: any
-    oninput?: any
+        value?: number
+        oninput?: (value: number) => void
     }
 
     let {
@@ -24,7 +24,8 @@
     {max}
     {step}
     bind:value
-  {...rest} />
+    {...rest}
+/>
 
 <style>
     input[type='range']::-webkit-slider-runnable-track {

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,13 +1,17 @@
 <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;
+        container: WidgetContainerConfig
     }
 
-	let { container }: Props = $props();
+    let { container }: Props = $props()
 </script>
 
 <div class="w-full h-full flex flex-col overflow-hidden">

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

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Github } from "../icons";
+    import { Github } from '../icons'
 
     interface Props {
-		github: any;
+        github: { url: string; version: string; active?: boolean; href?: string }
     }
 
-	let { github }: Props = $props();
+    let { github }: Props = $props()
 </script>
 
 {#if github.active}

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

@@ -1,12 +1,13 @@
 <script>
-	import logo from '$lib/assets/logo512.png';
+    import logo from '$lib/assets/logo512.png'
+    import { resolve } from '$app/paths'
 
     /** @type {{appName: any}} */
-	let { appName } = $props();
+    let { appName } = $props()
 </script>
 
 <a
-	href="/"
+    href={resolve('/')}
     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" />

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

@@ -1,5 +1,6 @@
 <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'
@@ -22,7 +23,7 @@
         Metrics,
         DNS
     } from '$lib/components/icons'
-  import appEnv from 'app-env'
+    import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
 
     const features = useFeatureFlags()
 
@@ -32,15 +33,21 @@
 
     const github = { href: 'https://github.com/' + page.data.github, active: true }
 
+    import type { ComponentType } from 'svelte'
+
     type menuItem = {
         title: string
-    icon: ConstructorOfATypedSvelteComponent
+        icon: ComponentType
         href?: string
         feature: boolean
         active?: boolean
         submenu?: menuItem[]
     }
 
+    function withBase(path: string) {
+        return `${base}${path.startsWith('/') ? path : '/' + path}`
+    }
+
     let menuItems = $state<menuItem[]>([])
 
     $effect(() => {
@@ -48,13 +55,13 @@
             {
                 title: 'Connection',
                 icon: WiFi,
-        href: '/connection',
-        feature: !appEnv.VITE_USE_HOST_NAME
+                href: withBase('/connection'),
+                feature: !PUBLIC_VITE_USE_HOST_NAME
             },
             {
                 title: 'Controller',
                 icon: MdiController,
-        href: '/controller',
+                href: withBase('/controller'),
                 feature: true
             },
             {
@@ -65,25 +72,25 @@
                     {
                         title: 'I2C',
                         icon: Connection,
-            href: '/peripherals/i2c',
+                        href: withBase('/peripherals/i2c'),
                         feature: true
                     },
                     {
                         title: 'Camera',
                         icon: Camera,
-            href: '/peripherals/camera',
+                        href: withBase('/peripherals/camera'),
                         feature: $features.camera
                     },
                     {
                         title: 'Servo',
                         icon: MotorOutline,
-            href: '/peripherals/servo',
+                        href: withBase('/peripherals/servo'),
                         feature: true
                     },
                     {
                         title: 'IMU',
                         icon: Rotate3d,
-            href: '/peripherals/imu',
+                        href: withBase('/peripherals/imu'),
                         feature: $features.imu || $features.mag || $features.bmp
                     }
                 ]
@@ -96,19 +103,19 @@
                     {
                         title: 'WiFi Station',
                         icon: Router,
-            href: '/wifi/sta',
+                        href: withBase('/wifi/sta'),
                         feature: true
                     },
                     {
                         title: 'Access Point',
                         icon: AP,
-            href: '/wifi/ap',
+                        href: withBase('/wifi/ap'),
                         feature: true
                     },
                     {
                         title: 'mDNS',
                         icon: DNS,
-            href: '/wifi/mdns',
+                        href: withBase('/wifi/mdns'),
                         feature: true
                     }
                 ]
@@ -121,26 +128,29 @@
                     {
                         title: 'System Status',
                         icon: Health,
-            href: '/system/status',
+                        href: withBase('/system/status'),
                         feature: true
                     },
                     {
                         title: 'File System',
                         icon: Folder,
-            href: '/system/filesystem',
+                        href: withBase('/system/filesystem'),
                         feature: true
                     },
                     {
                         title: 'System Metrics',
                         icon: Metrics,
-            href: '/system/metrics',
+                        href: withBase('/system/metrics'),
                         feature: true
                     },
                     {
                         title: 'Firmware Update',
                         icon: Update,
-            href: '/system/update',
-            feature: $features.ota || $features.upload_firmware || $features.download_firmware
+                        href: withBase('/system/update'),
+                        feature:
+                            $features.ota ||
+                            $features.upload_firmware ||
+                            $features.download_firmware
                     }
                 ]
             }
@@ -164,7 +174,7 @@
         setActiveMenuItem(page.data.title)
     })
 
-  const updateMenu = (event: any) => {
+    const updateMenu = (event: CustomEvent) => {
         setActiveMenuItem(event.details)
     }
 </script>
@@ -176,7 +186,8 @@
         {menuItems}
         select={updateMenu}
         class="grow flex-nowrap overflow-y-auto overflow-x-hidden"
-    level="0" />
+        level="0"
+    />
 
     <div class="divider my-0"></div>
 

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

@@ -1,8 +1,10 @@
 <script lang="ts">
     import MenuList from './MenuList.svelte'
+    import type { ComponentType } from 'svelte'
+
     type MenuItem = {
         title: string
-    icon: ConstructorOfATypedSvelteComponent
+        icon: ComponentType
         href?: string
         feature: boolean
         active?: boolean
@@ -17,7 +19,7 @@
 </script>
 
 <ul class={klass + ' menu w-full'}>
-  {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
+    {#each menuItems as MenuItem[] as menuItem (menuItem.title)}
         {#if menuItem.feature}
             <li>
                 {#if menuItem.submenu}
@@ -27,7 +29,12 @@
                             {menuItem.title}
                         </summary>
                         <div class="pl-4">
-              <MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
+                            <MenuList
+                                menuItems={menuItem.submenu}
+                                level={level + 1}
+                                {select}
+                                class={klass}
+                            />
                         </div>
                     </details>
                 {:else}
@@ -37,7 +44,8 @@
                         class:bg-base-100={menuItem.active}
                         class:text-lg={level === 0}
                         class:text-md={level === 1}
-            onclick={() => selectMenuItem(menuItem.title)}>
+                        onclick={() => selectMenuItem(menuItem.title)}
+                    >
                         <menuItem.icon class="h-6 w-6" />
                         {menuItem.title}
                     </a>

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

@@ -1,8 +1,8 @@
 <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}>

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

@@ -1,26 +1,26 @@
 <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;
+        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;
-	};
+        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"}>
+    <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

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,10 +1,9 @@
 <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>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { MdiWeatherSunny, MdiMoonAndStars } from "../icons";
+    import { MdiWeatherSunny, MdiMoonAndStars } from '../icons'
 </script>
 
 <label class="swap swap-rotate">

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

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { Hamburger } from '../icons'
+    import { resolve } from '$app/paths'
 </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="/">
+        <a href={resolve('/')}>
             <Hamburger class="h-8 w-8" />
         </a>
     </div>

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

@@ -1,80 +1,80 @@
 <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;
+        update?: boolean
     }
 
-    let { update = $bindable(false) }: Props = $props();
+    let { update = $bindable(false) }: Props = $props()
 
-    let firmwareVersion: string = $state('');
-    let firmwareDownloadLink: string = $state('');
+    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;
+            console.warn('Error: Could not find releases in the repository')
+            return
         }
         if (result.isErr()) {
-            console.error('Error:', result.inner);
-            return;
+            console.error('Error:', result.inner)
+            return
         }
 
-        const results = result.inner;
-        update = false;
-        firmwareVersion = '';
+        const results = result.inner
+        update = false
+        firmwareVersion = ''
 
-        if (compareVersions(results.tag_name, $features.firmware_version) === 1) {
+        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)
+                    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);
+                    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 });
+        const result = await api.post('/api/downloadUpdate', { download_url: url })
         if (result.isErr()) {
-            console.error('Error:', result.inner);
-            return;
+            console.error('Error:', result.inner)
+            return
         }
     }
 
     onMount(async () => {
         if ($features.download_firmware) {
-            await getGithubAPI();
-            setInterval(async () => await getGithubAPI(), 60 * 60 * 1000); // once per hour
+            await getGithubAPI()
+            setInterval(async () => await getGithubAPI(), 60 * 60 * 1000) // once per hour
         }
-    });
+    })
 
     function confirmGithubUpdate(url: string) {
         modals.open(ConfirmDialog, {
@@ -85,12 +85,12 @@
                 confirm: { label: 'Update', icon: CloudDown }
             },
             onConfirm: () => {
-                postGithubDownload(url);
+                postGithubDownload(url)
                 modals.open(GithubUpdateDialog, {
                     onConfirm: () => modals.closeAll()
-                });
+                })
             }
-        });
+        })
     }
 </script>
 

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/toasts/Toast.svelte

@@ -1,22 +1,24 @@
 <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 = {
+    let {
+        theme = {
             error: 'alert-error',
             success: 'alert-success',
             warning: 'alert-warning',
             info: 'alert-info'
-	}, icon = {
+        },
+        icon = {
             error: error,
             success: success,
             warning: warning,
             info: info
-	} } = $props();
+        }
+    } = $props()
 </script>
 
 <div class="toast toast-end mr-4 z-20">

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

@@ -1,42 +1,42 @@
-import { writable, derived, type Writable } from 'svelte/store';
+import { writable } from 'svelte/store'
 
-type StateType = 'info' | 'success' | 'warning' | 'error';
+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();
+        const id = generateId()
         setTimeout(() => {
-			notifications.update((state) => {
-				return state.filter((n) => n.id !== id);
-			});
-		}, timeout);
-		notifications.update((state) => {
-			return [...state, { id, type, message }];
-		});
+            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) => send(msg, 'error', timeout),
-		warning: (msg: string, timeout: number) => send(msg, 'warning', timeout),
-		info: (msg: string, timeout: number) => send(msg, 'info', timeout),
-		success: (msg: string, timeout: number) => send(msg, 'success', timeout)
-	};
+        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();
+export const notifications = createNotificationStore()

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

@@ -1,22 +1,22 @@
 <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 = $state();
-	let chart: Chart;
+    let chartElement: HTMLCanvasElement
+    let chart: Chart<'line', number[], number>
 
     interface Props {
-		label: any;
-		data: number[];
-		title: any;
+        label: string
+        data: number[]
+        title: string
     }
 
-	let { label, data, title }: Props = $props();
+    let { label, data, title }: Props = $props()
 
-    Chart.register(...registerables);
+    Chart.register(...registerables)
 
     onMount(() => {
         chart = new Chart(chartElement, {
@@ -31,7 +31,7 @@
                         borderWidth: 2,
                         data,
                         yAxisID: 'y'
-					},
+                    }
                 ]
             },
             options: {
@@ -83,16 +83,15 @@
                     }
                 }
             }
-		});
+        })
 
         setInterval(() => {
             chart.data.labels = data
             chart.data.datasets[0].data = data
-        }, 500);
+        }, 500)
     })
 </script>
 
-
 <div class="w-full h-full overflow-x-auto">
     <div
         class="flex w-full flex-col space-y-1 h-60"

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

@@ -1,12 +1,12 @@
 <script lang="ts">
     interface Props {
-        options?: string[];
-        selectedOption?: string;
-        change: () => void;
-        [key: string]: any;
+        options?: string[]
+        selectedOption?: string
+        change?: () => void
+        [key: string]: unknown
     }
 
-    let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
+    let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props()
 </script>
 
 <select

app/src/lib/gait.ts

@@ -1,8 +1,6 @@
+import { get } from 'svelte/store'
 import type { body_state_t } from './kinematic'
-import Kinematic from './kinematic'
-import { fromInt8 } from './utilities'
-
-const { sin } = Math
+import { currentKinematic } from './stores/featureFlags'
 
 export interface gait_state_t {
     step_height: number
@@ -14,7 +12,6 @@ export interface gait_state_t {
 }
 
 export interface ControllerCommand {
-  stop: number
     lx: number
     ly: number
     rx: number
@@ -39,7 +36,7 @@ export abstract class GaitState {
     }
 
     public get default_feet_pos() {
-    return new Kinematic().getDefaultFeetPos()
+        return get(currentKinematic).getDefaultFeetPos()
     }
 
     protected get default_height() {
@@ -56,16 +53,26 @@ export abstract class GaitState {
         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 / 128 + 1) / 2,
-      step_x: Math.floor(fromInt8(command.ly, -1, 1) * 10) / 10,
-      step_z: -(Math.floor(fromInt8(command.lx, -1, 1) * 10) / 10),
-      step_velocity: command.s / 128 + 1,
-      step_angle: command.rx / 128,
+            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
         }
 
@@ -75,12 +82,19 @@ export abstract class GaitState {
 
 export class IdleState extends GaitState {
     protected name = 'Idle'
+
+    step(body_state: body_state_t, command: ControllerCommand) {
+        super.step(body_state, command)
+        return body_state
+    }
 }
 
 export class CalibrationState extends GaitState {
     protected name = 'Calibration'
 
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+    // 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
@@ -95,7 +109,9 @@ export class CalibrationState extends GaitState {
 export class RestState extends GaitState {
     protected name = 'Rest'
 
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+    // 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
@@ -110,167 +126,65 @@ export class RestState extends GaitState {
 export class StandState extends GaitState {
     protected name = 'Stand'
 
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+    step(body_state: body_state_t, command: ControllerCommand) {
+        super.step(body_state, command)
         body_state.omega = 0
-    body_state.phi = command.rx / 8
-    body_state.psi = command.ry / 8
-    body_state.xm = command.ly / 2 / 100
-    body_state.zm = command.lx / 2 / 100
+        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
     }
 }
 
-abstract class PhaseGaitState extends GaitState {
-  protected tick = 0
-  protected phase = 0
-  protected phase_time = 0
-  protected abstract num_phases: number
-  protected abstract phase_speed_factor: number
-  protected abstract swing_stand_ratio: number
-
-  protected contact_phases!: number[][]
-  protected shifts!: number[][]
-
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    super.step(body_state, command, dt)
-    this.update_phase()
-    this.update_body_position()
-    this.update_feet_positions()
-    return this.body_state
-  }
-
-  update_phase() {
-    this.phase_time += this.dt * this.phase_speed_factor * this.gait_state.step_velocity
-
-    if (this.phase_time >= 1) {
-      this.phase += 1
-      if (this.phase == this.num_phases) this.phase = 0
-      this.phase_time = 0
-    }
-  }
-
-  update_body_position() {
-    if (this.num_phases === 4) return
-
-    const shift = this.shifts[Math.floor(this.phase / 2)]
-
-    this.body_state.xm += (shift[0] - this.body_state.xm) * this.dt * 4
-    this.body_state.zm += (shift[2] - this.body_state.zm) * this.dt * 4
-  }
-
-  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[] {
-    const contact = this.contact_phases[index][this.phase]
-    return contact ? this.stand(index) : this.swing(index)
-  }
-
-  stand(index: number): number[] {
-    const delta_pos = [
-      -this.gait_state.step_x * this.dt * this.swing_stand_ratio,
-      0,
-      -this.gait_state.step_z * this.dt * this.swing_stand_ratio
-    ]
-
-    this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0]
-    this.body_state.feet[index][1] = this.default_feet_pos[index][1]
-    this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2]
-    return this.body_state.feet[index]
-  }
-
-  swing(index: number): number[] {
-    const delta_pos = [this.gait_state.step_x * this.dt, 0, this.gait_state.step_z * this.dt]
-
-    if (this.gait_state.step_x == 0) {
-      delta_pos[0] =
-        (this.default_feet_pos[index][0] - this.body_state.feet[index][0]) * this.dt * 8
-    }
-
-    if (this.gait_state.step_z == 0) {
-      delta_pos[2] =
-        (this.default_feet_pos[index][2] - this.body_state.feet[index][2]) * this.dt * 8
-    }
-
-    this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0]
-    this.body_state.feet[index][1] =
-      this.default_feet_pos[index][1] + sin(this.phase_time * Math.PI) * this.gait_state.step_height
-    this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2]
-    return this.body_state.feet[index]
-  }
-}
-
-export class FourPhaseWalkState extends PhaseGaitState {
-  protected name = 'Four phase walk'
-  protected num_phases = 4
-  protected phase_speed_factor = 6
-  protected contact_phases = [
-    [1, 0, 1, 1],
-    [1, 1, 1, 0],
-    [1, 1, 1, 0],
-    [1, 0, 1, 1]
-  ]
-  protected swing_stand_ratio = 1 / (this.num_phases - 1)
-
-  begin() {
-    super.begin()
-  }
-
-  end() {
-    super.end()
-  }
-
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    return super.step(body_state, command, dt)
-  }
-}
-
-export class EightPhaseWalkState extends PhaseGaitState {
-  protected name = 'Eight phase walk'
-  protected num_phases = 8
-  protected phase_speed_factor = 4
-  protected contact_phases = [
-    [1, 0, 1, 1, 1, 1, 1, 1],
-    [1, 1, 1, 1, 1, 0, 1, 1],
-    [1, 1, 1, 1, 1, 1, 1, 0],
-    [1, 1, 1, 0, 1, 1, 1, 1]
-  ]
-  protected shifts = [
-    [-0.05, 0, -0.2],
-    [0.3, 0, 0.2],
-    [-0.05, 0, 0.2],
-    [0.3, 0, -0.2]
-  ]
-  protected swing_stand_ratio = 1 / (this.num_phases - 1)
-
-  begin() {
-    super.begin()
-  }
-
-  end() {
-    super.end()
-  }
-
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    return super.step(body_state, command, dt)
-  }
-}
-
 export class BezierState extends GaitState {
     protected name = 'Bezier'
     protected phase = 0
     protected phase_num = 0
-  protected step_length: number = 0
-  offset = [0, 0.5, 0.5, 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 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)
+    }
 
     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]
+        }
+    }
+
     end() {
         super.end()
     }
@@ -278,49 +192,140 @@ export class BezierState extends GaitState {
     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
-    }
+        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
     }
 
     update_phase() {
-    this.phase += this.dt * this.gait_state.step_velocity * 2
+        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 += 1
-      this.phase_num %= 2
+            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
+
+        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)
+            }
+        }
+
+        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
-    }
+        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 <= 0.75 ?
-        this.stand_controller(index, phase / 0.75)
-      : this.swing_controller(index, (phase - 0.75) / (1 - 0.75))
+        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) {
-    let depth = this.gait_state.step_depth
+        const depth = this.gait_state.step_depth
         return this.controller(index, phase, stance_curve, depth)
     }
 
     swing_controller(index: number, phase: number) {
-    let height = this.gait_state.step_height
+        const height = this.gait_state.step_height
         return this.controller(index, phase, bezier_curve, height)
     }
 
@@ -346,6 +351,51 @@ export class BezierState extends GaitState {
 
         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 }
+    }
 }
 
 const stance_curve = (length: number, angle: number, depth: number, phase: number): number[] => {
@@ -356,10 +406,7 @@ const stance_curve = (length: number, angle: number, depth: number, phase: numbe
     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))
-  }
+    if (length !== 0) Y = -depth * Math.cos((Math.PI * (X + Y)) / (2 * length))
     return [X, Y, Z]
 }
 
@@ -390,6 +437,7 @@ const bezier_curve = (length: number, angle: number, height: number, phase: numb
     }
     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)
@@ -440,8 +488,467 @@ const comb = (n: number, k: number): number => {
     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)
-  }
+    for (let i = 0; i < k; i++) c = (c * (n - i)) / (i + 1)
     return c
+};
+
+/*
+Units:  meters, radians, seconds / beats
+*/
+
+// interface Options {
+//     controls: 'body' | 'legs' | 'both';
+
+//     extendable?: boolean; // if true, the animation can loop
+//     description?: string; // a description of the animation
+// }
+
+interface Frame {
+  time: number
+  position: number[]
+  orientation: number[]
+  feet?: number[][]
+}
+
+type Parameter = {
+  // name: string;
+  min: number
+  max: number
+  default: number
+}
+
+type Parameters = Record<string, Parameter>
+
+interface Animation {
+  // options: Options = {};
+  parameters: Parameters
+  frames: Frame[]
+  loop?: boolean
+}
+
+const generateCircleAnimation = (
+  radius: number,
+  y: number,
+  duration: number,
+  segments: number
+): Animation => {
+  const frames: Frame[] = []
+  const deltaTime = duration / segments
+
+  for (let i = 0; i <= segments; i++) {
+    const angle = (2 * Math.PI * i) / segments // Angle in radians
+    const x = radius * Math.cos(angle)
+    const z = radius * Math.sin(angle)
+
+    frames.push({
+      time: i * deltaTime,
+      position: [x, y, z],
+      orientation: [0, 0, 0]
+    })
+  }
+
+  return {
+    parameters: {
+      speed: { min: 0.1, max: 2, default: 1 },
+      x_offset: { min: -0.1, max: 0.1, default: 0 }
+    },
+    frames
+  }
+}
+
+const kinematicShowCaseGen = generateCircleAnimation(0.5, 0.7, 4000, 32)
+
+const kinematicShowCase: Animation = {
+  loop: true,
+  parameters: {
+    speed: { min: 0.1, max: 2, default: 1 },
+    x_offset: { min: -0.1, max: 0.1, default: 0 }
+  },
+  frames: [
+    {
+      time: 0,
+      position: [0.5, 0.7, 0],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 500,
+      position: [0.3, 0.7, 0.3],
+      orientation: [0, 0, 0]
+    },
+    {
+      time: 1000,
+      position: [0, 0.7, 0.5],
+      orientation: [0, 0, 0]
+    },
+    {
+      time: 1500,
+      position: [-0.3, 0.7, 0.3],
+      orientation: [0, 0, 0]
+    },
+    {
+      time: 2000,
+      position: [-0.5, 0.7, 0],
+      orientation: [0, 0, 0]
+    },
+    {
+      time: 2500,
+      position: [-0.3, 0.7, -0.3],
+      orientation: [0, 0, 0]
+    },
+    {
+      time: 3000,
+      position: [0, 0.7, -0.5],
+      orientation: [0, 0, 0]
+    },
+    {
+      time: 3500,
+      position: [0.3, 0.7, -0.3],
+      orientation: [0, 0, 0]
+    },
+    {
+      time: 4000,
+      position: [0.5, 0.7, 0],
+      orientation: [0, 0, 0]
+    }
+  ]
+}
+
+const stretch: Animation = {
+  loop: false,
+  parameters: {
+    speed: { min: 0.1, max: 2, default: 1 },
+    x_offset: { min: -0.1, max: 0.1, default: 0 }
+  },
+  frames: [
+    // Step forward
+    {
+      time: 0,
+      position: [0, 0.7, 0],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 250,
+      position: [0, 0.7, -0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [1.5, -0.5, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 500,
+      position: [0, 0.7, -0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [2, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 750,
+      position: [0, 0.7, 0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [2, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 1000,
+      position: [0, 0.7, 0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [2, -1, 1, 1],
+        [1.5, -0.5, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 1250,
+      position: [0, 0.7, 0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [2, -1, 1, 1],
+        [2, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 2500,
+      position: [0.5, 0.7, 0],
+      orientation: [0, 0, 25]
+    },
+    {
+      time: 4000,
+      position: [-0.7, 0.7, 0],
+      orientation: [0, 0, -20]
+    },
+    {
+      time: 5000,
+      position: [-0.7, 0.7, 0],
+      orientation: [0, 0, -20]
+    },
+    {
+      time: 6000,
+      position: [0, 0.7, 0],
+      orientation: [0, 0, 0]
+    },
+    {
+      time: 6000,
+      position: [-0.2, 0.7, -0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [2, -1, 1, 1],
+        [2, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 6500,
+      position: [-0.2, 0.7, -0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [0.5, -0.5, 1, 1],
+        [2, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 7000,
+      position: [-0.2, 0.7, 0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [2, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 7500,
+      position: [-0.2, 0.7, 0.2],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [0.5, -0.5, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 8000,
+      position: [0, 0.7, 0],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    }
+  ]
+}
+
+const pee: Animation = {
+  loop: false,
+
+  parameters: {
+    speed: { min: 0.1, max: 2, default: 1 },
+    x_offset: { min: -0.1, max: 0.1, default: 0 }
+  },
+  frames: [
+    {
+      time: 0,
+      position: [0, 0.7, 0],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 1000,
+      position: [0, 0.7, 0],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 2000,
+      position: [0.2, 0.7, 0.45],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 3000,
+      position: [0.2, 0.7, 0.45],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 4000,
+      position: [0.2, 0.7, 0.45],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, 0, -1, 1]
+      ]
+    },
+    {
+      time: 5000,
+      position: [0.2, 0.7, 0.45],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    },
+    {
+      time: 6000,
+      position: [0, 0.7, 0],
+      orientation: [0, 0, 0],
+      feet: [
+        [1, -1, 1, 1],
+        [1, -1, -1, 1],
+        [-1, -1, 1, 1],
+        [-1, -1, -1, 1]
+      ]
+    }
+  ]
+}
+
+export class Animater extends GaitState {
+  protected name = 'Bezier'
+  time = 0
+  animation = [stretch, pee, kinematicShowCase][0]
+  speed = 1
+  xOffset = 0
+
+  begin() {
+    this.reset()
+    super.begin()
+  }
+
+  end() {
+    this.reset()
+    super.end()
+  }
+
+  reset() {
+    this.time = 0
+  }
+
+  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+    return this.step_animation(body_state, dt)
+  }
+
+  setAnimation(animation: Animation) {
+    this.animation = animation
+    this.reset()
+  }
+
+  step_animation(body_state: body_state_t, dt: number = 0.02) {
+    this.dt = dt / 1000
+    const frames = this.animation.frames
+    const duration = frames[frames.length - 1].time
+
+    this.time += dt * this.speed
+    if (this.animation.loop !== false && this.time > duration) {
+      this.time = this.time % duration
+    } else if (this.time > duration) {
+      this.time = duration
+    }
+
+    const { prevFrame, nextFrame } = this.getBoundingFrames()
+
+    const t = this.getInterpolationFactor(prevFrame, nextFrame)
+    const position = this.interpolatePosition(prevFrame.position, nextFrame.position, t)
+    const orientation = this.interpolatePosition(prevFrame.orientation, nextFrame.orientation, t)
+
+    // Apply x_offset
+    // position[0] += this.xOffset;
+
+    body_state.xm = position[0]
+    body_state.ym = position[1]
+    body_state.zm = position[2]
+    body_state.omega = orientation[0]
+    body_state.phi = orientation[1]
+    body_state.psi = orientation[2]
+
+    if (prevFrame.feet && nextFrame.feet) {
+      for (let i = 0; i < 4; i++) {
+        body_state.feet[i] = this.interpolatePosition(prevFrame.feet[i], nextFrame.feet[i], t)
+      }
+    }
+
+    return body_state
+  }
+
+  private getBoundingFrames(): { prevFrame: Frame; nextFrame: Frame } {
+    const frames = this.animation.frames
+
+    for (let i = 0; i < frames.length - 1; i++) {
+      const prevFrame = frames[i]
+      const nextFrame = frames[i + 1]
+
+      if (this.time >= prevFrame.time && this.time <= nextFrame.time) {
+        return { prevFrame, nextFrame }
+      }
+    }
+
+    // Fallback (should not be reached if looping correctly)
+    return { prevFrame: frames[frames.length - 1], nextFrame: frames[0] }
+  }
+
+  private getInterpolationFactor(prevFrame: Frame, nextFrame: Frame): number {
+    const timeRange = nextFrame.time - prevFrame.time
+    const elapsed = this.time - prevFrame.time
+    return elapsed / timeRange
+  }
+
+  private interpolatePosition(pos1: number[], pos2: number[], t: number): number[] {
+    return pos1.map((val, index) => val + t * (pos2[index] - val))
+  }
 }

app/src/lib/kinematic.ts

@@ -6,6 +6,12 @@ export interface body_state_t {
     ym: number
     zm: number
     feet: number[][]
+    cumulative_x: number
+    cumulative_y: number
+    cumulative_z: number
+    cumulative_roll: number
+    cumulative_pitch: number
+    cumulative_yaw: number
 }
 
 export interface position {
@@ -20,15 +26,24 @@ export interface target_position {
     yaw: number
 }
 
+export interface KinematicParams {
+    coxa: number
+    coxa_offset: number
+    femur: number
+    tibia: number
+    L: number
+    W: number
+}
+
 const { cos, sin, atan2, acos, sqrt, max, min } = Math
 
 const DEG2RAD = 0.017453292519943
 
 export default class Kinematic {
-  l1: number
-  l2: number
-  l3: number
-  l4: number
+    coxa: number
+    coxa_offset: number
+    femur: number
+    tibia: number
 
     L: number
     W: number
@@ -43,14 +58,13 @@ export default class Kinematic {
         [1, 0, 0]
     ]
 
-  constructor() {
-    this.l1 = 60.5 / 100
-    this.l2 = 10 / 100
-    this.l3 = 111.7 / 100
-    this.l4 = 118.5 / 100
-
-    this.L = 207.5 / 100
-    this.W = 78 / 100
+    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],
@@ -62,7 +76,7 @@ export default class Kinematic {
 
     getDefaultFeetPos(): number[][] {
         return this.mountOffsets.map((offset, i) => {
-      return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.l1 : this.l1)]
+            return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.coxa : this.coxa)]
         })
     }
 
@@ -93,11 +107,17 @@ export default class Kinematic {
                 pz = bz - mz
 
             const lx =
-        this.invMountRot[0][0] * px + this.invMountRot[0][1] * py + this.invMountRot[0][2] * pz
+                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
+                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
+                this.invMountRot[2][0] * px +
+                this.invMountRot[2][1] * py +
+                this.invMountRot[2][2] * pz
 
             const xLocal = i % 2 === 1 ? -lx : lx
             return this.legIK(xLocal, ly, lz)
@@ -105,13 +125,15 @@ export default class Kinematic {
     }
 
     private legIK(x: number, y: number, z: number): [number, number, number] {
-    const F = sqrt(max(0, x * x + y * y - this.l1 * this.l1))
-    const G = F - this.l2
+        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.l1)
-    const D = (H * H - this.l3 * this.l3 - this.l4 * this.l4) / (2 * this.l3 * this.l4)
+        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.l4 * sin(t3), this.l3 + this.l4 * cos(t3))
+        const t2 = atan2(z, G) - atan2(this.tibia * sin(t3), this.femur + this.tibia * cos(t3))
         return [t1, t2, t3]
     }
 

app/src/lib/sceneBuilder.ts

@@ -21,78 +21,78 @@ import {
     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';
+} 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();
+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;
+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: 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;
+    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
+    highlightMaterial: MeshPhongMaterial
+    sky!: Sky
+    transformControl: TransformControls
+    public modelGroup!: Group
 
     constructor() {
-        this.scene = new Scene();
+        this.scene = new Scene()
         if (this.scene.environment?.mapping) {
-            this.scene.environment.mapping = EquirectangularReflectionMapping;
+            this.scene.environment.mapping = EquirectangularReflectionMapping
         }
-        return this;
+        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;
-    };
+        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);
+        this.sky = new Sky()
+        this.sky.scale.setScalar(450000)
+        this.scene.add(this.sky)
         const effectController = {
             turbidity: 10,
             rayleigh: 3,
@@ -101,279 +101,280 @@ export default class SceneBuilder {
             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();
+        }
+        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;
-    };
+        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;
-    };
+        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 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);
+        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);
+        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);
+        })
+        mirror.rotateX(-Math.PI / 2)
+        this.scene.add(mirror)
 
-        return this;
-    };
+        return this
+    }
 
     public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
-        this.orbit = new OrbitControls(this.camera, this.renderer.domElement);
-        this.orbit.minDistance = minDistance;
-        this.orbit.maxDistance = maxDistance;
-        this.orbit.autoRotate = autoRotate;
-        this.orbit.update();
-        return this;
-    };
+        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;
-    };
+        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);
+        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;
-    };
+        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 canvas = document.createElement('canvas')
+        canvas.width = size
+        canvas.height = size
+        const context = canvas.getContext('2d')
 
-        const squareSize = size / squares;
+        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);
+                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;
-    };
+        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;
-    };
+        this.scene.fog = new FogExp2(color, density)
+        return this
+    }
 
     public fillParent = () => {
-        const parentElement = this.renderer.domElement.parentElement;
+        const parentElement = this.renderer.domElement.parentElement
         if (parentElement) {
-            const width = parentElement.clientWidth;
-            const height = parentElement.clientHeight;
-            this.handleResize(width, height);
+            const width = parentElement.clientWidth
+            const height = parentElement.clientHeight
+            this.handleResize(width, height)
+        }
+        return this
     }
-        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;
-    };
+        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 addRenderCb = (callback: () => void) => {
+        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;
-    };
+            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);
+        )
+        this.scene.add(arrowHelper)
+        return this
     }
 
-    isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed';
+    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) => {
+        const traverse = (c: Object3D) => {
             if (c.type === 'Mesh') {
                 if (revert) {
-                    c.material = c.__origMaterial;
-                    delete c.__origMaterial;
+                    c.material = c.__origMaterial
+                    delete c.__origMaterial
                 } else {
-                    c.__origMaterial = c.material;
-                    c.material = material;
+                    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];
+                    const child = c.children[i]
                     if (!child.isURDFCollider) {
-                        traverse(c.children[i]);
+                        traverse(c.children[i])
                     }
                 }
             }
-        };
-        traverse(m);
-    };
+        }
+        traverse(m)
+    }
 
-    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 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: any) => {
-        this.modelGroup = new Group();
-        this.modelGroup.add(model);
-        this.model = model;
-        this.scene.add(this.modelGroup);
-        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: any) => {
-        const highlightColor = '#FFFFFF';
+    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);
-        };
+            this.setJointValue(joint.name, angle)
+            updateAngle(joint.name, angle)
+        }
         dragControls.onDragStart = () => {
-            this.orbit.enabled = false;
-            this.isDragging = true;
-        };
+            this.orbit.enabled = false
+            this.isDragging = true
+        }
         dragControls.onDragEnd = () => {
-            this.orbit.enabled = true;
-            this.isDragging = false;
-        };
+            this.orbit.enabled = true
+            this.isDragging = false
+        }
         dragControls.onHover = (joint: URDFMimicJoint) =>
-            this.highlightLinkGeometry(joint, false, highlightMaterial);
+            this.highlightLinkGeometry(joint, false, highlightMaterial)
         dragControls.onUnhover = (joint: URDFMimicJoint) =>
-            this.highlightLinkGeometry(joint, true, highlightMaterial);
+            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;
-    };
+        )
+        return this
+    }
 
     public toggleFog = () => {
-        this.scene.fog = this.scene.fog ? null : this.fog;
-    };
+        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;
-    };
+        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,54 +1,53 @@
-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);
+        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.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);
+            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');
+        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');
+        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);
+        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'));
-		});
+                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;
-			});
+            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,7 +1,7 @@
-import { type Analytics } from '$lib/types/models';
-import { writable } from 'svelte/store';
+import { type Analytics } from '$lib/types/models'
+import { writable } from 'svelte/store'
 
-let analytics_data = {
+const analytics_data = {
     uptime: <number[]>[],
     free_heap: <number[]>[],
     total_heap: <number[]>[],
@@ -14,20 +14,22 @@ let analytics_data = {
     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) => ({
+            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),
+                free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(
+                    -maxAnalyticsData
+                ),
                 total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
                     -maxAnalyticsData
                 ),
@@ -35,21 +37,33 @@ function createAnalytics() {
                     ...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(
+                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
                 ),
-				max_alloc_heap: [...analytics_data.max_alloc_heap, content.max_alloc_heap / 1000].slice(
+                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
                 ),
-				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,47 +1,39 @@
-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, any>;
+    id: string | number
+    component: keyof typeof WidgetComponents
+    props?: Record<string, unknown>
 }
 
 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 is WidgetConfig => 'component' in widget
 
 export const WidgetComponents = {
     Visualization,
     Stream,
     ChartWidget
-};
+}
 
 interface View {
-	name: string;
-	content: WidgetContainerConfig;
+    name: string
+    content: WidgetContainerConfig
 }
 
 const defaultViews: View[] = [
-	{
-		name: 'Stream',
-		content: {
-			id: 'root',
-			layout: 'column',
-			widgets: [{ id: 2, component: 'Stream' }]
-		}
-	},
     {
         name: '3D representation',
         content: {
@@ -50,6 +42,14 @@ const defaultViews: View[] = [
             widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
         }
     },
+    {
+        name: 'Stream',
+        content: {
+            id: 'root',
+            layout: 'column',
+            widgets: [{ id: 2, component: 'Stream' }]
+        }
+    },
     {
         name: 'Split screen',
         content: {
@@ -60,8 +60,8 @@ const defaultViews: View[] = [
             ]
         }
     }
-];
+]
 
-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

@@ -1,20 +1,64 @@
-import { api } from '$lib/api';
-import { notifications } from '$lib/components/toasts/notifications';
-import { writable, type Writable } from 'svelte/store';
+import { api } from '$lib/api'
+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'
 
-let featureFlagsStore: Writable<Record<string, boolean>>;
+let featureFlagsStore: Writable<Record<string, boolean | string>>
 
 export function useFeatureFlags() {
     if (!featureFlagsStore) {
-		featureFlagsStore = writable<Record<string, boolean>>({});
+        featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {})
 
-		api.get<Record<string, boolean>>('/api/features').then((result) => {
-			if (result.isOk()) featureFlagsStore.set(result.inner);
+        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);
+                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
+        }
+    }
+}
+
+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
+})
+
+export const currentKinematic = derived(
+    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);
+        document.documentElement.requestFullscreen()
+        isFullscreen.set(true)
     }
 }
 
 export function exitFullscreen() {
     if (document.fullscreenElement) {
-		document.exitFullscreen();
-		isFullscreen.set(false);
+        document.exitFullscreen()
+        isFullscreen.set(false)
     }
 }

app/src/lib/stores/gamepad.ts

@@ -5,43 +5,83 @@ export type GamepadState = {
     gamepads: Gamepad[]
 }
 
-export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
-  const update = () => {
-    const hasGamepadAPI = 'getGamepads' in navigator
-    if (!hasGamepadAPI) {
-      set({ available: false, gamepads: [] })
-      return
+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)
 }
 
-    const gps = navigator.getGamepads?.() ?? []
-    const validGamepads = gps.filter(Boolean) as Gamepad[]
-    set({
-      available: true,
-      gamepads: validGamepads
-    })
+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)
     }
 
-  window.addEventListener('gamepadconnected', update)
-  window.addEventListener('gamepaddisconnected', update)
-  let raf = requestAnimationFrame(update)
+    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
+    raf = requestAnimationFrame(update)
 
     return () => {
+        running = false
         cancelAnimationFrame(raf)
-    window.removeEventListener('gamepadconnected', update)
-    window.removeEventListener('gamepaddisconnected', update)
+        window.removeEventListener('gamepadconnected', onConnect)
+        window.removeEventListener('gamepaddisconnected', onDisconnect)
+        document.removeEventListener('visibilitychange', onVis)
     }
 })
 
-export const gamepad = derived(gamepads, $gamepads =>
-  $gamepads.available && $gamepads.gamepads.length > 0 ? $gamepads.gamepads[0] : null
+export const gamepad = derived(gamepads, s =>
+    s.available && s.gamepads.length ? s.gamepads[0] : null
 )
 
-export const gamepadAxes = derived(gamepad, $gamepad => $gamepad?.axes ?? [0, 0, 0, 0])
+export const hasGamepad = derived(gamepads, s => s.available && s.gamepads.length > 0)
 
-export const gamepadButtons = derived(gamepad, $gamepad => $gamepad?.buttons ?? [])
+export const gamepadAxes = derived(gamepad, g => (g ? g.axes.map(dz) : [0, 0, 0, 0]))
 
-export const hasGamepad = derived(
-  gamepads,
-  $gamepads => $gamepads.available && $gamepads.gamepads.length > 0
+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
+})

app/src/lib/stores/imu.ts

@@ -1,7 +1,7 @@
-import { writable } from 'svelte/store';
-import type { IMU } 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,16 +12,16 @@ export const imu = (() => {
         altitude: [] as number[],
         pressure: [] as number[],
         bmp_temp: [] as number[]
-    });
+    })
 
     const addData = (content: IMU) => {
         update(data => {
-            (Object.keys(content) as (keyof IMU)[]).forEach(key => {
-                data[key] = [...data[key], content[key]].slice(-maxIMUData);
-            });
-            return data;
-        });
-    };
+            ;(Object.keys(content) as (keyof IMU)[]).forEach(key => {
+                data[key] = [...data[key], content[key]].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,5 +1,6 @@
-import { persistentStore } from '$lib/utilities';
-import { writable } from 'svelte/store';
-import appEnv from 'app-env';
+import { persistentStore } from '$lib/utilities'
+import { writable } from 'svelte/store'
+import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
 
-export const location = appEnv.VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '');
+export const apiLocation =
+    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

@@ -1,12 +1,12 @@
-import type { ControllerInput } from '$lib/types/models';
-import { persistentStore } from '$lib/utilities/svelte-utilities';
-import { writable, type Writable } from 'svelte/store';
+import type { ControllerInput } from '$lib/types/models'
+import { persistentStore } from '$lib/utilities/svelte-utilities'
+import { writable, type Writable } from 'svelte/store'
 
-export const emulateModel = writable(true);
+export const emulateModel = writable(true)
 
-export const jointNames = persistentStore('joint_names', <string[]>[]);
+export const jointNames = persistentStore('joint_names', <string[]>[])
 
-export const model = writable();
+export const model = writable()
 
 export const modes = [
   'deactivated',
@@ -14,32 +14,50 @@ export const modes = [
   'calibration',
   'rest',
   'stand',
-	'crawl',
-	'walk'
-] as const;
+  'walk',
+  'animate'
+] as const
 
-export type Modes = (typeof modes)[number];
+export type Modes = (typeof modes)[number]
 
 export enum ModesEnum {
-	Deactivated,
-	Idle,
-	Calibration,
-	Rest,
-	Stand,
-	Crawl,
-	Walk
+  Deactivated = 0,
+  Idle = 1,
+  Calibration = 2,
+  Rest = 3,
+  Stand = 4,
+  Walk = 5,
+  Animate = 6
 }
 
-export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated);
+export enum WalkGaits {
+    Trot = 0,
+    Crawl = 1
+}
 
-export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0]);
+export const walkGaits = ['trot', 'crawl'] as const
 
-export const kinematicData = writable([0, 0, 0, 0, 1, 0]);
+export const walkGaitLabels: Record<WalkGaits, string> = {
+    [WalkGaits.Trot]: 'Trot',
+    [WalkGaits.Crawl]: 'Crawl'
+}
+
+export const walkGaitToMode = (gait: WalkGaits): 'trot' | 'crawl' => {
+    return gait === WalkGaits.Trot ? 'trot' : 'crawl'
+}
+
+export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated)
+
+export const walkGait: Writable<WalkGaits> = writable(WalkGaits.Trot)
+
+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: 50,
-	speed: 50,
-	s1: 50
-});
+    height: 0.5,
+    speed: 0.5,
+    s1: 0.05
+})

app/src/lib/stores/orientation.ts

@@ -1,27 +0,0 @@
-import { readable } from 'svelte/store';
-
-export const heading = readable(0, (set) => {
-	const updateHeading = (e: any) => {
-		let alpha;
-		if (e.webkitCompassHeading) alpha = e.webkitCompassHeading;
-		else if (e.alpha) alpha = e.alpha;
-		else {
-			let q = e.target.quaternion;
-			alpha =
-				Math.atan2(2 * q[0] * q[1] + 2 * q[2] * q[3], 1 - 2 * q[1] * q[1] - 2 * q[2] * q[2]) *
-				(180 / Math.PI);
-			if (alpha < 0) alpha += 360;
-		}
-		set(alpha);
-	};
-	if ('AbsoluteOrientationSensor' in window) {
-		var sensor = new window.AbsoluteOrientationSensor({ frequency: 60 }) as any;
-		sensor.addEventListener('reading', updateHeading);
-		sensor.start();
-	} else if (window.DeviceMotionEvent) window.addEventListener('deviceorientation', updateHeading);
-
-	return () => {
-		if ('AbsoluteOrientationSensor' in window) sensor.removeEventListener('reading', updateHeading);
-		window.addEventListener('deviceorientation', updateHeading);
-	};
-});

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

@@ -1,22 +1,22 @@
-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
-]);
+])
 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({});
+])
+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 = {
@@ -24,4 +24,4 @@ export const socketData = {
     logs,
     mpu,
     distances
-};
+}

app/src/lib/stores/socket.ts

@@ -1,24 +1,41 @@
 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]
 
-export enum Topics {
-  imu = 0,
-  mode = 1,
-  command = 2,
-  servo = 3,
-  input = 4,
-  angles = 5,
-  position = 6
+type SocketMessage = [number, string?, unknown?]
+
+let useBinary = false
+
+const decodeMessage = (data: string | ArrayBuffer): SocketMessage | null => {
+    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}`)
+    }
+    return null
+}
+
+const encodeMessage = (data: unknown) => {
+    try {
+        return useBinary ? encode(data) : JSON.stringify(data)
+    } catch (error) {
+        console.error(`Could not encode data: ${data} - ${error}`)
+    }
 }
 
 function createWebSocket() {
-  let listeners = new Map<string | Topics, Set<(data?: unknown) => void>>()
+    const listeners = new Map<string, Set<(data?: unknown) => void>>()
     const { subscribe, set } = writable(false)
     const reconnectTimeoutTime = 5000
-  let unresponsiveTimeoutId: number
-  let reconnectTimeoutId: number
+    let unresponsiveTimeoutId: ReturnType<typeof setTimeout>
+    let reconnectTimeoutId: ReturnType<typeof setTimeout>
     let ws: WebSocket
     let socketUrl: string | URL
 
@@ -38,40 +55,32 @@ function createWebSocket() {
 
     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 as unknown as Topics)
+                subscribeToEvent(event)
             }
         }
-    ws.onmessage = message => {
+        ws.onmessage = frame => {
             resetUnresponsiveCheck()
-      let data = message.data
-      if (data instanceof ArrayBuffer) {
-        listeners.get('binary')?.forEach(listener => listener(data))
-        return
-      }
-      data = data.substring(1)
-
-      if (!data) return
-
-      let event = data.substring(data.indexOf('/') + 1, data.indexOf('['))
-      let payload = data.substring(data.indexOf('[') + 1, data.lastIndexOf(']'))
-
-      try {
-        payload = JSON.parse(payload)
-      } catch (error) {}
+            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: Topics, listener?: (data: any) => void) {
-    let eventListeners = listeners.get(event)
+    function unsubscribe(event: string, listener?: (data: unknown) => void) {
+        const eventListeners = listeners.get(event)
         if (!eventListeners) return
 
         if (!eventListeners.size) {
@@ -89,42 +98,61 @@ function createWebSocket() {
         unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime)
     }
 
-  function sendEvent(event: Topics, data: unknown) {
+    function sendEvent(event: string, data: unknown) {
         if (!ws || ws.readyState !== WebSocket.OPEN) return
-    ws.send(JSON.stringify([2, event, data]))
+        send([2, event, data])
     }
 
-  function unsubscribeToEvent(event: Topics) {
+    function unsubscribeToEvent(event: string) {
         if (!ws || ws.readyState !== WebSocket.OPEN) return
-    ws.send(`[1,${event}]`)
+        send([1, event])
     }
 
-  function subscribeToEvent(event: Topics) {
+    function subscribeToEvent(event: string) {
         if (!ws || ws.readyState !== WebSocket.OPEN) return
-    ws.send(`[0,${event}]`)
+        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: Topics | SocketEvent, listener: (data: T) => void): (() => void) => {
+        on: <T>(event: string, listener: (data: T) => void): (() => void) => {
             let eventListeners = listeners.get(event)
             if (!eventListeners) {
-        if (!socketEvents.includes(event)) {
+                if (!socketEvents.includes(event as SocketEvent)) {
                     subscribeToEvent(event)
                 }
                 eventListeners = new Set()
                 listeners.set(event, eventListeners)
             }
-      eventListeners.add(listener as (data: any) => void)
+            eventListeners.add(listener as (data: unknown) => void)
 
             return () => {
-        unsubscribe(event, listener)
+                unsubscribe(event, listener as (data: unknown) => void)
             }
         },
-    off: (event: Topics, listener?: (data: any) => void) => {
-      unsubscribe(event, listener)
+        off: <T>(event: string, listener?: (data: T) => void) => {
+            unsubscribe(event, listener as (data: unknown) => void)
         }
     }
 }

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'
 
-let telemetry_data = {
+const telemetry_data = {
     rssi: {
         rssi: 0
     },
@@ -10,10 +10,10 @@ let telemetry_data = {
         progress: 0,
         error: ''
     }
-};
+}
 
 function createTelemetry() {
-    const { subscribe, set, update } = writable(telemetry_data);
+    const { subscribe, 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,3 +1,21 @@
+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'
+}
+
 export type vector = { x: number; y: number }
 
 export interface ControllerInput {

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

@@ -1,14 +1,14 @@
 declare module 'uzip' {
     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;
+        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>
     }
 
-	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;
+    private _throttlePause: boolean
     constructor() {
-		this._throttlePause = false;
+        this._throttlePause = false
     }
-	throttle = (callback: Function, time: number) => {
-		if (this._throttlePause) return;
+    throttle = (callback: () => void, time: number) => {
+        if (this._throttlePause) return
 
-		this._throttlePause = true;
+        this._throttlePause = true
         setTimeout(() => {
-			callback();
-			this._throttlePause = false;
-		}, time);
-	};
+            callback()
+            this._throttlePause = false
+        }, time)
+    }
 }

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

@@ -1,4 +1,6 @@
 export const daisyColor = (name: string, opacity: number = 100) => {
-	const color = getComputedStyle(document.documentElement).getPropertyValue(name);
-	return `oklch(${color} / ${opacity}%)`;
-};
+    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,9 +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 './position-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));
-	let scaled = ((number - min) / (max - min)) * 255;
-	return Math.round(scaled) & 0xff;
-};
+    number = Math.max(min, Math.min(max, number))
+    const 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));
-	let 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))
+    const 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

@@ -2,15 +2,17 @@ import { Color, LoaderUtils, Vector3 } from 'three'
 import URDFLoader, { type URDFRobot } from 'urdf-loader'
 import { XacroLoader } from 'xacro-parser'
 import { Result } from '$lib/utilities'
-import { jointNames, model } from '$lib/stores'
+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('/yertle.URDF')
+    const modelRes = await loadModel(get(currentVariant).model)
     if (modelRes.isOk()) {
         const [urdf, JOINT_NAME] = modelRes.inner
         jointNames.set(JOINT_NAME)
@@ -21,21 +23,23 @@ export const populateModelCache = async () => {
 }
 
 export const cacheModelFiles = async () => {
-  const data = await fetch('/URDF.zip')
+    const data = await fetch(get(currentVariant).stl)
 
     const files = uzip.parse(await data.arrayBuffer())
 
     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)
+        const normalizedPath = path.startsWith('/') ? path : '/' + path
+        const resolvedUrl = resolve(normalizedPath as any)
+        fileService?.saveFile(resolvedUrl, data)
+        fileService?.saveFile(normalizedPath, data)
     }
 }
 
 export const loadModel = async (url: string): Promise<Result<[URDFRobot, string[]], string>> => {
     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')

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

@@ -1,30 +1,32 @@
 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 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 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))
-		);
+                Math.cos(this.degToRad(lat)) *
+                    Math.cos(solarDec) *
+                    Math.cos(this.degToRad(hourAngle))
+        )
 
-		return this.radToDeg(elevation);
+        return this.radToDeg(elevation)
     }
 
     getJulianDate(date: Date) {
-		const Y = date.getUTCFullYear();
-		const M = date.getUTCMonth() + 1;
+        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;
+            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) +
@@ -33,33 +35,33 @@ class SunCalculator {
             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)));
+        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 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;
+            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);
+        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(
@@ -69,16 +71,16 @@ class SunCalculator {
                     0.014615 * Math.cos(2 * q) -
                     0.040849 * Math.sin(2 * g)
             )
-		);
+        )
     }
 
     degToRad(deg: number) {
-		return deg * (Math.PI / 180);
+        return deg * (Math.PI / 180)
     }
 
     radToDeg(rad: number) {
-		return rad * (180 / Math.PI);
+        return rad * (180 / Math.PI)
     }
 }
 
-export const sunCalculator = new SunCalculator();
+export const sunCalculator = new SunCalculator()

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

@@ -1,18 +1,18 @@
 export class Err<T, U> {
-	#inner: T;
-	#exception?: U;
+    #inner: T
+    #exception?: U
 
     constructor(inner: T, exception?: U) {
-		this.#inner = inner;
-		this.#exception = exception;
+        this.#inner = inner
+        this.#exception = exception
     }
 
     get inner(): T {
-		return this.#inner;
+        return this.#inner
     }
 
     get exception(): U | undefined {
-		return this.#exception;
+        return this.#exception
     }
 
     /**
@@ -20,7 +20,7 @@ export class Err<T, U> {
      * @returns `true` if `Ok`; `false` if `Err`
      */
     isOk(): false {
-		return false;
+        return false
     }
 
     /**
@@ -28,7 +28,7 @@ export class Err<T, U> {
      * @returns `true` if `Err`; `false` if `Ok`
      */
     isErr(): this is Err<T, U> {
-		return true;
+        return true
     }
 
     /**
@@ -37,6 +37,6 @@ export class Err<T, U> {
      * @returns `Err(inner)`
      */
     static new<E, F>(inner: E, exception: F): Err<E, F> {
-		return new Err<E, F>(inner, exception);
+        return new Err<E, F>(inner, exception)
     }
 }

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,12 +1,12 @@
 export class Ok<T> {
-	#inner: T;
+    #inner: T
 
     constructor(inner: T) {
-		this.#inner = inner;
+        this.#inner = inner
     }
 
     get inner(): T {
-		return this.#inner;
+        return this.#inner
     }
 
     /**
@@ -14,7 +14,7 @@ export class Ok<T> {
      * @returns `true` if `Ok`; `false` if `Err`
      */
     isOk(): this is Ok<T> {
-		return true;
+        return true
     }
 
     /**
@@ -22,7 +22,7 @@ export class Ok<T> {
      * @returns `true` if `Err`; `false` if `Ok`
      */
     isErr(): false {
-		return false;
+        return false
     }
 
     /**
@@ -31,7 +31,7 @@ export class Ok<T> {
      * @returns `Ok(inner)`
      */
     static new<T>(inner: T): Ok<T> {
-		return new Ok<T>(inner);
+        return new Ok<T>(inner)
     }
 
     /**
@@ -39,6 +39,6 @@ export class Ok<T> {
      * @returns `Ok(void)`
      */
     static void(): Ok<void> {
-		return new Ok(undefined);
+        return new Ok(undefined)
     }
 }

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

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));
-	});
+        if (browser) localStorage.setItem(key, JSON.stringify(value))
+    })
 
-	store.set(data);
+    store.set(data)
 
-	return store;
-};
+    return store
+}

app/src/routes/+error.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
-    import { onMount } from 'svelte';
-
-    onMount(() => {
-        setTimeout(() => {
-            goto('/');
-        }, 3000);
-    });
+    import { page } from '$app/state'
+    import { resolve } from '$app/paths'
 </script>
 
 <div class="flex justify-center items-center w-full h-full">
-    <h1 class="text-4xl">404 - Page not found</h1>
-    <p>You will be redirected to the home page in 3 seconds</p>
+    <h1>{page.status} {page.error?.message}</h1>
+    <span>Go to <a class="btn btn-primary" href={resolve('/')}>Home page</a></span>
 </div>

app/src/routes/+layout.svelte

@@ -1,13 +1,13 @@
 <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 { 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,
@@ -18,76 +18,80 @@
         servoAngles,
         servoAnglesOut,
         socket,
-        location,
-        useFeatureFlags
-    } from '$lib/stores';
-    import type { Analytics, DownloadOTA } from '$lib/types/models';
+        apiLocation,
+        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;
+        children?: import('svelte').Snippet
     }
 
-    let { children }: Props = $props();
+    let { children }: Props = $props()
 
-    const features = useFeatureFlags();
+    const features = useFeatureFlags()
 
     onMount(async () => {
-        const ws = $location ? $location : window.location.host;
-        socket.init(`ws://${ws}/api/ws/events`);
+        const ws = $apiLocation ? $apiLocation : window.location.host
+        socket.init(`ws://${ws}/api/ws`)
 
-        addEventListeners();
+        addEventListeners()
 
-        outControllerData.subscribe(data => socket.sendEvent('input', { data }));
-        mode.subscribe(data => socket.sendEvent('mode', { data }));
-        servoAnglesOut.subscribe(data => socket.sendEvent('angles', { data }));
-        kinematicData.subscribe(data => socket.sendEvent('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();
-    });
+        removeEventListeners()
+    })
 
     const addEventListeners = () => {
-        socket.on('open', handleOpen);
-        socket.on('close', handleClose);
-        socket.on('error', handleError);
-        socket.on('rssi', handleNetworkStatus);
-        socket.on('mode', (data: ModesEnum) => mode.set(data));
-        socket.on('analytics', handleAnalytics);
-        socket.on('angles', (angles: number[]) => {
-            if (angles.length) servoAngles.set(angles);
-        });
+        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('otastatus', handleOAT);
-            if (data?.sonar) socket.on('sonar', data => console.log(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('analytics', handleAnalytics);
-        socket.off('open', handleOpen);
-        socket.off('close', handleClose);
-        socket.off('rssi', handleNetworkStatus);
-        socket.off('otastatus', handleOAT);
-    };
+        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);
-    };
+        notifications.success('Connection to device established', 5000)
+    }
 
     const handleClose = () => {
-        notifications.error('Connection to device lost', 5000);
-        telemetry.setRSSI(0);
-    };
+        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>
@@ -111,13 +115,14 @@
 </div>
 
 <Modals>
-    <!-- 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}
+            onkeydown={e => e.key === 'Escape' && modals.closeAll()}
+            role="button"
+            tabindex="0"
         ></div>
     {/snippet}
 </Modals>

app/src/routes/+layout.ts

@@ -1,22 +1,34 @@
-export const prerender = false;
-export const ssr = false;
+export const prerender = true
+export const ssr = false
 
 const registerFetchIntercept = async () => {
-	const { fetch: originalFetch } = window;
-	const fileService = (await import('$lib/services/file-service')).default;
+    const { fetch: originalFetch } = window
+    const fileService = (await import('$lib/services/file-service')).default
     window.fetch = async (resource, config) => {
-		let url = resource instanceof Request ? resource.url : resource.toString();
-		let file = await fileService.getFile(url);
-		return file.isOk() ? new Response(file.inner) : originalFetch(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)
+    }
+}
 
 export const load = async () => {
-	await registerFetchIntercept();
+    await registerFetchIntercept()
     return {
         title: 'Spot micro controller',
         github: 'runeharlyk/SpotMicroESP32-Leika',
         app_name: 'Spot Micro Controller',
-		copyright: '2024 Rune Harlyk'
-	};
-};
+        copyright: '2025 Rune Harlyk'
+    }
+}

app/src/routes/+page.svelte

@@ -3,11 +3,12 @@
     import Visualization from '$lib/components/Visualization.svelte'
     import { socket } from '$lib/stores'
     import { onMount } from 'svelte'
+    import { resolve } from '$app/paths'
 
     onMount(() => {
         socket.subscribe(isConnected => {
             if (isConnected) {
-        goto('/controller')
+                goto(resolve('/controller'))
             }
         })
     })
@@ -21,7 +22,9 @@
         <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>
+            <a class="btn btn-primary" href={resolve($socket ? '/controller' : '/connection')}>
+                Add Robot Dog
+            </a>
         </div>
     </div>
 </div>

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

@@ -1,5 +1,5 @@
 <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">

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;
+    }
+}) satisfies PageLoad

app/src/routes/connection/Connection.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-    import SettingsCard from '$lib/components/SettingsCard.svelte';
-    import { WiFi } from '$lib/components/icons';
-    import { location, socket, useFeatureFlags } from '$lib/stores';
-
-    const features = useFeatureFlags();
+    import SettingsCard from '$lib/components/SettingsCard.svelte'
+    import { WiFi } from '$lib/components/icons'
+    import { apiLocation, socket } from '$lib/stores'
 
     const update = () => {
-        const ws = $location ? $location : window.location.host;
-        socket.init(`ws://${ws}/api/ws/events`);
-    };
+        const ws = $apiLocation ? $apiLocation : window.location.host
+        socket.init(`ws://${ws}/api/ws/events`)
+    }
 </script>
 
 <SettingsCard collapsible={false}>
@@ -21,7 +19,7 @@
 
     <div class="flex">
         <label class="label w-32" for="server">Address:</label>
-        <input class="input" bind:value={$location} />
+        <input class="input" bind:value={$apiLocation} />
     </div>
 
     <button class="btn btn-primary" onclick={update}>Update</button>

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

@@ -1,26 +1,26 @@
 <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 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('imu', (data: IMU) => {
-            imu.addData(data);
+        socket.on(MessageTopic.imu, (data: IMU) => {
+            imu.addData(data)
             if (data.heading)
                 mpu.update(mpuData => {
-                    mpuData.heading = data.heading;
-                    console.log(data.heading);
+                    mpuData.heading = data.heading
+                    console.log(data.heading)
 
-                    return mpuData;
-                });
-        });
-    });
+                    return mpuData
+                })
+        })
+    })
 </script>
 
 <div class="absolute top-0 select-none w-screen h-screen">

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,11 +1,21 @@
 <script lang="ts">
     import nipplejs from 'nipplejs'
     import { onMount } from 'svelte'
-  import { capitalize, throttler, toInt8 } from '$lib/utilities'
-  import { input, outControllerData, mode, modes, type Modes, ModesEnum } from '$lib/stores'
+    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, gamepadButtons, hasGamepad } from '$lib/stores/gamepad'
+    import { gamepadAxes, gamepadButtonsEdges, hasGamepad } from '$lib/stores/gamepad'
     import { notifications } from '$lib/components/toasts/notifications'
 
     let throttle = new throttler()
@@ -13,7 +23,7 @@
     let right: nipplejs.JoystickManager
 
     let throttle_timing = 40
-  let data = new Array(8)
+    let data = new Array(7)
 
     $effect(() => {
         if ($hasGamepad) {
@@ -26,11 +36,25 @@
         handleJoyMove('right', { x: $gamepadAxes[2], y: $gamepadAxes[3] })
     })
 
-  // TODO React to button press
-  //   $effect(() => {
-  //     if ($gamepadButtons.length === 0) return
-  //
-  //   })
+    $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
+            })
+    })
 
     onMount(() => {
         left = nipplejs.create({
@@ -50,9 +74,9 @@
         })
 
         left.on('move', (_, data) => handleJoyMove('left', data.vector))
-    left.on('end', (_, __) => handleJoyMove('left', { x: 0, y: 0 }))
+        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 }))
+        right.on('end', () => handleJoyMove('right', { x: 0, y: 0 }))
     })
 
     const handleJoyMove = (key: 'left' | 'right', data: vector) => {
@@ -64,14 +88,13 @@
     }
 
     const updateData = () => {
-    data[0] = 0
-    data[1] = toInt8($input.left.x, -1, 1)
-    data[2] = toInt8($input.left.y, -1, 1)
-    data[3] = toInt8($input.right.x, -1, 1)
-    data[4] = toInt8($input.right.y, -1, 1)
-    data[5] = toInt8($input.height, 0, 100)
-    data[6] = toInt8($input.speed, 0, 100)
-    data[7] = toInt8($input.s1, 0, 100)
+        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
 
         outControllerData.set(data)
     }
@@ -80,9 +103,11 @@
         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 === '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 === '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)
@@ -101,6 +126,10 @@
     const changeMode = (modeValue: Modes) => {
         mode.set(modes.indexOf(modeValue))
     }
+
+    const changeWalkGait = (walkGaitValue: WalkGaits) => {
+        walkGait.set(walkGaitValue)
+    }
 </script>
 
 <div class="absolute top-0 left-0 w-screen h-screen">
@@ -121,24 +150,47 @@
         <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={100} oninput={(e: Event) => handleRange(e, 'height')} />
+        <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">
+            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)}>
+                        onclick={() => changeMode(modeValue)}
+                    >
                         {capitalize(modeValue)}
                     </button>
                 {/each}
             </div>
 
-      {#if $mode === ModesEnum.Walk || $mode === ModesEnum.Crawl}
+            {#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>
@@ -146,9 +198,11 @@
                             type="range"
                             name="s1"
                             min="0"
-              max="25"
+                            step="0.01"
+                            max="1"
                             oninput={e => handleRange(e, 's1')}
-              class="range range-sm range-primary" />
+                            class="range range-sm range-primary"
+                        />
                     </div>
                     <div>
                         <label for="speed">Speed</label>
@@ -156,9 +210,11 @@
                             type="range"
                             name="speed"
                             min="0"
-              max="25"
+                            step="0.01"
+                            max="1"
                             oninput={e => handleRange(e, 'speed')}
-              class="range range-sm range-primary" />
+                            class="range range-sm range-primary"
+                        />
                     </div>
                 </div>
             {/if}

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

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

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

@@ -1,5 +1,5 @@
 <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">

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;
+    }
+}) satisfies PageLoad

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

@@ -1,8 +1,8 @@
 <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}>

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

@@ -1,13 +1,25 @@
 <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()
+    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
+    })
 
     const getCameraSettings = async () => {
         const result = await api.get<CameraSettings>('/api/camera/settings')
         if (result.isErr()) {
-            console.error("An error occurred", result.inner);
+            console.error('An error occurred', result.inner)
             return
         }
         settings = result.inner
@@ -16,7 +28,7 @@
     const updateCameraSettings = async () => {
         const result = await api.post<CameraSettings>('/api/camera/settings', settings)
         if (result.isErr()) {
-            console.error("An error occurred", result.inner);
+            console.error('An error occurred', result.inner)
             return
         }
         settings = result.inner
@@ -25,23 +37,43 @@
 
 {#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">
@@ -56,7 +88,10 @@
 
         <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>

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

@@ -2,7 +2,7 @@
     import SettingsCard from '$lib/components/SettingsCard.svelte'
     import { onMount } from 'svelte'
     import { socket } from '$lib/stores'
-  import type { I2CDevice } from '$lib/types/models'
+    import { MessageTopic, type I2CDevice } from '$lib/types/models'
     import { Connection } from '$lib/components/icons'
     import I2CSetting from './i2cSetting.svelte'
 
@@ -16,6 +16,7 @@
             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' }
     ]
 
@@ -24,12 +25,12 @@
     let isLoading = $state(false)
 
     onMount(() => {
-    socket.on('i2cScan', handleScan)
+        socket.on(MessageTopic.i2cScan, handleScan)
         triggerScan()
-    return () => socket.off('i2cScan', handleScan)
+        return () => socket.off(MessageTopic.i2cScan, handleScan)
     })
 
-  const handleScan = (data: any) => {
+    const handleScan = (data: { addresses: number[] }) => {
         active_devices = data.addresses.map(
             (address: number) =>
                 i2cDevices.find(device => device.address === address) || {
@@ -43,7 +44,7 @@
 
     const triggerScan = () => {
         isLoading = true
-    socket.sendEvent('i2cScan', '')
+        socket.sendEvent(MessageTopic.i2cScan, '')
     }
 </script>
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
     import { socket } from '$lib/stores'
-  import type { PeripheralsConfiguration } from '$lib/types/models'
+    import { MessageTopic, type PeripheralsConfiguration } from '$lib/types/models'
     import { onMount } from 'svelte'
     import { modals } from 'svelte-modals'
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
@@ -10,13 +10,13 @@
     let isEditing = $state(false)
 
     onMount(() => {
-    socket.on('peripheralSettings', handleSettings)
-    socket.sendEvent('peripheralSettings', '')
-    return () => socket.off('peripheralSettings', handleSettings)
+        socket.on(MessageTopic.peripheralSettings, handleSettings)
+        socket.sendEvent(MessageTopic.peripheralSettings, '')
+        return () => socket.off(MessageTopic.peripheralSettings, handleSettings)
     })
 
-  const handleSettings = (data: any) => {
-    settings = data
+    const handleSettings = (data: Record<string, unknown>) => {
+        settings = data as PeripheralsConfiguration
     }
 
     const handleSave = () => {
@@ -30,7 +30,7 @@
             },
             onConfirm: () => {
                 modals.close()
-        socket.sendEvent('peripheralSettings', settings)
+                socket.sendEvent(MessageTopic.peripheralSettings, settings)
             }
         })
     }
@@ -56,7 +56,8 @@
                         max="48"
                         title="SDA pin number (0-48)"
                         disabled={!isEditing}
-            bind:value={settings.sda} />
+                        bind:value={settings.sda}
+                    />
                 </label>
                 <label for="scl" class="input validator">
                     SCL
@@ -70,7 +71,8 @@
                         max="48"
                         title="SCL pin number (0-48)"
                         disabled={!isEditing}
-            bind:value={settings.scl} />
+                        bind:value={settings.scl}
+                    />
                 </label>
                 <label class="input validator" for="frequency">
                     Frequency
@@ -83,14 +85,20 @@
                         max="430000"
                         title="I2C frequency in Hz"
                         disabled={!isEditing}
-            bind:value={settings.frequency} />
+                        bind:value={settings.frequency}
+                    />
                 </label>
                 <div>
-          <button class="btn btn-outline btn-primary" onclick={() => (isEditing = !isEditing)}>
+                    <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>
+                        <button class="btn btn-outline btn-primary" onclick={handleSave}
+                            >Save</button
+                        >
                     {/if}
                 </div>
             </div>