Fix IMU ang MAG, added MAG chart to svelte

https://github.com/Jerome-Graves/yertle/

.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

.github/workflows/embedded-build.yml

@@ -2,20 +2,19 @@ name: PlatformIO CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
     paths:
-        - 'esp32/**'  
+      - "esp32/**"
+      - "platformio.ini"
   pull_request:
-    branches: [ master ]
+    branches: [master]
     paths:
-        - 'esp32/**'  
+      - "esp32/**"
+      - "platformio.ini"
 
 jobs:
   build:
     runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: ./esp32
 
     steps:
       - uses: actions/checkout@v3
@@ -28,8 +27,8 @@ jobs:
 
       - uses: actions/setup-python@v4
         with:
-          python-version: '3.x'
-      - run: pip install -r ./scripts/requirements.txt
+          python-version: "3.x"
+      - run: pip install -r esp32/scripts/requirements.txt
       - name: Install PlatformIO Core
         run: pip install --upgrade platformio
 
@@ -37,7 +36,7 @@ jobs:
         run: pio run
 
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: build-artifacts
           path: esp32/build/firmware

.github/workflows/frontend-tests.yml

@@ -23,7 +23,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 9
 
     - name: Setup Node.js
       uses: actions/setup-node@v4
@@ -38,4 +38,4 @@ jobs:
       run: npx playwright install --with-deps
 
     - name: Run tests
-      run: pnpm test
+      run: pnpm test

.gitignore

@@ -1,4 +1,8 @@
 .vscode/.browse.c_cpp.db*
 .vscode/c_cpp_properties.json
 .vscode/launch.json
-.vscode/ipch
+.vscode/ipch
+__pycache__/
+*.py[cod]
+*$py.class
+.pio

.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"
+        "bradlc.vscode-tailwindcss",
+        "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

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

app/.gitignore

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

app/.prettierrc

@@ -1,8 +1,12 @@
 {
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+    "useTabs": false,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "arrowParens": "avoid",
+    "experimentalTernaries": true,
+    "printWidth": 100,
+    "semi": 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/README.md

@@ -8,30 +8,21 @@ If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
+npx sv create
 ```
 
 ## Developing
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've created your project, follow these steps:
 
-```bash
-npm run dev
+1: Delete package-lock.json
+2: Check `git status`. If you see any changes other than package-lock.json or favicon.ico, run the command `git restore ./` (See below)
+3: Run `npm install` or `pnpm install` or `yarn` to install the dependencies
+4: Run `npm run build` to build the project
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+Running `git status` should show:
 
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
+[![example.png](https://i.postimg.cc/yddM3hH3/example.png)](https://postimg.cc/7CFsp2bq)
 
 You can preview the production build with `npm run preview`.
 

app/env.d.ts

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

app/package.json

@@ -1,61 +1,65 @@
 {
-	"name": "spot_micro_controller",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev --host",
-		"build": "vite build",
-		"preview": "vite preview",
-		"test": "npm run test:integration && npm run test:unit",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
-	},
-	"devDependencies": {
-		"@iconify-json/mdi": "^1.1.64",
-		"@iconify-json/tabler": "^1.1.109",
-		"@playwright/test": "^1.28.1",
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.5.5",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@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.35.1",
-		"jsdom": "^24.0.0",
-		"postcss": "^8.4.38",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
-		"svelte-focus-trap": "^1.2.0",
-		"tailwindcss": "^3.4.3",
-		"tslib": "^2.6.1",
-		"typescript": "^5.1.6",
-		"unplugin-icons": "^0.18.5",
-		"vite": "^5.0.3",
-		"vitest": "^1.2.0"
-	},
-	"type": "module",
-	"dependencies": {
-		"chart.js": "^4.4.2",
-		"compare-versions": "^6.1.0",
-		"daisyui": "^4.10.2",
-		"jwt-decode": "^4.0.0",
-		"nipplejs": "^0.10.1",
-		"svelte-dnd-list": "^0.1.8",
-		"svelte-modals": "^1.3.0",
-		"three": "^0.162.0",
-		"urdf-loader": "^0.12.1",
-		"uzip": "^0.20201231.0",
-		"xacro-parser": "^0.3.9"
-	}
-}
+    "name": "spot_micro_controller",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "dev": "vite dev --host",
+        "build": "vite build",
+        "build:embedded": "cross-env VITE_USE_HOST_NAME=true vite build",
+        "preview": "vite preview",
+        "test": "pnpm run test:integration && pnpm run test:unit",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "lint": "prettier --check . && eslint .",
+        "format": "prettier --write .",
+        "test:integration": "playwright test",
+        "test:unit": "vitest"
+    },
+    "devDependencies": {
+        "@iconify-json/mdi": "^1.2.3",
+        "@iconify-json/tabler": "^1.2.23",
+        "@playwright/test": "^1.56.0",
+        "@sveltejs/adapter-static": "^3.0.10",
+        "@sveltejs/kit": "^2.46.4",
+        "@sveltejs/vite-plugin-svelte": "^6.2.1",
+        "@types/eslint": "^9.6.1",
+        "@types/three": "^0.180.0",
+        "@typescript-eslint/eslint-plugin": "^8.46.0",
+        "@typescript-eslint/parser": "^8.46.0",
+        "autoprefixer": "^10.4.21",
+        "eslint": "^9.37.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-svelte": "^3.12.4",
+        "jsdom": "^27.0.0",
+        "prettier": "^3.6.2",
+        "prettier-plugin-svelte": "^3.4.0",
+        "svelte": "^5.39.11",
+        "svelte-check": "^4.3.3",
+        "svelte-focus-trap": "^1.2.0",
+        "tailwindcss": "^4.1.14",
+        "tslib": "^2.8.1",
+        "typescript": "^5.9.3",
+        "unplugin-icons": "^22.4.2",
+        "vite": "^7.1.9",
+        "vitest": "^3.2.4"
+    },
+    "type": "module",
+    "dependencies": {
+        "@msgpack/msgpack": "^3.1.2",
+        "@niku/vite-env-caster": "^1.1.2",
+        "@sveltejs/adapter-auto": "^6.1.1",
+        "@tailwindcss/vite": "^4.1.14",
+        "chart.js": "^4.5.0",
+        "compare-versions": "^6.1.1",
+        "cross-env": "^10.1.0",
+        "daisyui": "^5.2.0",
+        "nipplejs": "^0.10.2",
+        "svelte-dnd-list": "^0.1.8",
+        "svelte-modals": "^2.0.1",
+        "three": "^0.180.0",
+        "urdf-loader": "^0.12.6",
+        "uzip": "^0.20201231.0",
+        "xacro-parser": "^0.3.10"
+    },
+    "packageManager": "pnpm@9.3.0"
+}

app/playwright.config.ts

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

app/postcss.config.js

@@ -1,5 +0,0 @@
-import tailwindcss from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
-export default {
-	plugins: [tailwindcss(), autoprefixer()]
-};

app/src/app.css

@@ -1,9 +1,39 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@plugin "daisyui";
 
-#nipple_0_0, #nipple_1_1 {
-    z-index: 10!important;
+@plugin "daisyui" {
+    themes:
+        light --default,
+        dark --prefersdark;
+}
+
+@plugin "daisyui/theme" {
+    name: 'light';
+    default: true;
+    --color-primary: #00bfff;
+    --color-secondary: #3c00ff;
+    --base-content: white;
+}
+
+@plugin "daisyui/theme" {
+    name: 'dark';
+    prefersdark: true;
+    --color-primary: #00bfff;
+    --color-secondary: #3c00ff;
+    --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;
 }
 
 #three-gui-panel {
@@ -15,4 +45,4 @@
     #three-gui-panel {
         top: 48px;
     }
-}
+}

app/src/app.d.ts

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

app/src/app.html

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

app/src/index.test.ts

@@ -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/DaisyUiHelper.ts

@@ -1,4 +0,0 @@
-export function daisyColor(name: string, opacity: number = 100) {
-	const color = getComputedStyle(document.documentElement).getPropertyValue(name);
-	return `oklch(${color} / ${opacity}%)`;
-}

app/src/lib/api.ts

@@ -1,73 +1,79 @@
-import { user } from '$lib/stores/user';
-import { get } from 'svelte/store';
-import { Err, Ok, type Result } from './utilities';
+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')
+    }
 }
 
 async function sendRequest<TResponse>(
-	endpoint: string,
-	method: string,
-	data?: unknown,
-	params?: RequestInit
+    endpoint: string,
+    method: string,
+    data?: unknown,
+    params?: RequestInit
 ): Promise<Result<TResponse, Error>> {
-	const user_token = get(user).bearer_token;
-	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,
-		method,
-		body,
-		headers: {
-			...params?.headers,
-			Authorization: user_token ? 'Bearer ' + user_token : 'Basic',
-			'Content-Type': 'application/json'
-		}
-	};
+    const request = {
+        ...params,
+        method,
+        body,
+        headers: {
+            ...params?.headers,
+            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');
-	}
+    try {
+        response = await fetch(endpoint, request)
+    } catch {
+        return Err.new(new Error(), 'An error has occurred')
+    }
 
-	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), 'An error has occurred');
-	}
+    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), 'An error has occurred')
+    }
 
-	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);
-	} else {
-		// Handle empty object as response
-		return Ok.new(null as TResponse);
-	}
+    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)
+    } else {
+        // Handle empty object as response
+        return Ok.new(null as TResponse)
+    }
+}
+
+function resolveUrl(url: string): string {
+    if (url.startsWith('http') || !get(apiLocation)) return url
+    const protocol = window.location.protocol
+    return `${protocol}//${get(apiLocation)}${url.startsWith('/') ? '' : '/'}${url}`
 }
 
 export class ApiError extends Error {
-	constructor(public readonly response: Response) {
-		super(`${response.status}`);
-	}
+    constructor(public readonly response: Response) {
+        super(`${response.status}`)
+    }
 }

app/src/lib/components/BatteryIndicator.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import Battery0 from '~icons/tabler/battery';
-	import Battery25 from '~icons/tabler/battery-1';
-	import Battery50 from '~icons/tabler/battery-2';
-	import Battery75 from '~icons/tabler/battery-3';
-	import Battery100 from '~icons/tabler/battery-4';
-	import BatteryCharging from '~icons/tabler/battery-charging-2';
-
-	export let current = 0;
-	export let voltage = 0;
-</script>
-
-<div class="tooltip tooltip-left z-10" data-tip="{voltage}V {Math.floor(current*10)/10} mA">
-	{#if voltage == 0}
-		<BatteryCharging class="{$$props.class || ''} -rotate-90 animate-pulse" />
-	{:else if voltage > 8.2}
-		<Battery100 class="{$$props.class || ''} -rotate-90" />
-	{:else if voltage > 8}
-		<Battery75 class="{$$props.class || ''} -rotate-90" />
-	{:else if voltage > 7.8}
-		<Battery50 class="{$$props.class || ''} -rotate-90" />
-	{:else if voltage > 7.6}
-		<Battery25 class="{$$props.class || ''} -rotate-90" />
-	{:else}
-		<Battery0 class="{$$props.class || ''} text-error -rotate-90 animate-pulse" />
-	{/if}
-</div>

app/src/lib/components/Collapsible.svelte

@@ -1,43 +1,44 @@
 <script lang="ts">
-	import { slide } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
-	import Down from '~icons/tabler/chevron-down';
-	import { createEventDispatcher } from 'svelte';
+    import { slide } from 'svelte/transition'
+    import { cubicOut } from 'svelte/easing'
+    import { Down } from './icons'
 
-	const dispatch = createEventDispatcher();
+    function openCollapsible() {
+        open = !open
+        if (open) {
+            opened()
+        } else {
+            closed()
+        }
+    }
 
-	function openCollapsible() {
-		open = !open;
-		if (open) {
-			dispatch('opened');
-		} else {
-			dispatch('closed');
-		}
-	}
-
-	export let open = false;
+    let { icon, title, children, open, opened, closed, class: klass } = $props()
 </script>
 
-<div class="{$$props.class || ''} relative grid w-full max-w-2xl self-center overflow-hidden">
-	<div class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
-		<span class="inline-flex items-baseline">
-			<slot name="icon" />
-			<slot name="title" />
-		</span>
-		<button class="btn btn-circle btn-ghost btn-sm" on:click={() => openCollapsible()}>
-			<Down
-				class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open
-					? 'rotate-180'
-					: ''}"
-			/>
-		</button>
-	</div>
-	{#if open}
-		<div
-			class="flex flex-col gap-2 p-4 pt-0"
-			transition:slide|local={{ duration: 300, easing: cubicOut }}
-		>
-			<slot />
-		</div>
-	{/if}
+<div class="{klass} relative grid w-full max-w-2xl self-center overflow-hidden">
+    <div
+        class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
+    >
+        <span class="inline-flex items-baseline">
+            {@render icon?.()}
+            {@render title?.()}
+        </span>
+        <button class="btn btn-circle btn-ghost btn-sm" onclick={() => openCollapsible()}>
+            <Down
+                class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
+                    open
+                ) ?
+                    'rotate-180'
+                :   ''}"
+            />
+        </button>
+    </div>
+    {#if open}
+        <div
+            class="flex flex-col gap-2 p-4 pt-0"
+            transition:slide|local={{ duration: 300, easing: cubicOut }}
+        >
+            {@render children?.()}
+        </div>
+    {/if}
 </div>

app/src/lib/components/ConfirmDialog.svelte

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

app/src/lib/components/GithubUpdateDialog.svelte

@@ -1,92 +1,101 @@
 <script lang="ts">
-	import { closeAllModals, 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/tabler/x';
+    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 />
-	export let isOpen: boolean;
+    // provided by <Modals />
+    interface Props {
+        isOpen: boolean
+    }
 
-	let updating = true;
+    let { isOpen }: Props = $props()
 
-	let progress = 0;
-	$: if ($telemetry.download_ota.status == 'progress') {
-		progress = $telemetry.download_ota.progress;
-	}
+    let updating = $state(true)
 
-	$: if ($telemetry.download_ota.status == 'error') {
-		updating = false;
-	}
+    let progress = $state(0)
+    $effect(() => {
+        if ($telemetry.download_ota.status == 'progress') {
+            progress = $telemetry.download_ota.progress
+        }
+    })
 
-	let message = 'Preparing ...';
-	let timerId: number;
+    $effect(() => {
+        if ($telemetry.download_ota.status == 'error') {
+            updating = false
+        }
+    })
 
-	$: if ($telemetry.download_ota.status == 'progress') {
-		message = 'Downloading ...';
-	} else if ($telemetry.download_ota.status == 'error') {
-		message = $telemetry.download_ota.error;
-	} else if ($telemetry.download_ota.status == 'finished') {
-		message = 'Restarting ...';
-		progress = 0;
-		// Reload page after 5 sec
-		timerId = setTimeout(() => {
-			closeAllModals();
-			location.reload();
-		}, 5000);
-	}
+    let message = $state('Preparing ...')
 
-	onBeforeClose(() => {
-		if (updating) {
-			// prevents modal from closing
-			return false;
-		} else {
-			$telemetry.download_ota.status = 'idle';
-			$telemetry.download_ota.error = '';
-			$telemetry.download_ota.progress = 0;
-			return true;
-		}
-	});
+    $effect(() => {
+        if ($telemetry.download_ota.status == 'progress') {
+            message = 'Downloading ...'
+        } else if ($telemetry.download_ota.status == 'error') {
+            message = $telemetry.download_ota.error
+        } else if ($telemetry.download_ota.status == 'finished') {
+            message = 'Restarting ...'
+            progress = 0
+            // Reload page after 5 sec
+            setTimeout(() => {
+                modals.closeAll()
+                location.reload()
+            }, 5000)
+        }
+    })
+
+    onBeforeClose(() => {
+        if (updating) {
+            // prevents modal from closing
+            return false
+        } else {
+            $telemetry.download_ota.status = 'idle'
+            $telemetry.download_ota.error = ''
+            $telemetry.download_ota.progress = 0
+            return true
+        }
+    })
 </script>
 
 {#if isOpen}
-	<div
-		role="dialog"
-		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-		transition:fly={{ y: 50 }}
-		on:introstart
-		on:outroend
-		use:focusTrap
-	>
-		<div
-			class="bg-base-100 rounded-box pointer-events-auto flex max-h-full 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">Updating Firmware</h2>
-			<div class="divider my-2" />
-			<div class="overflow-y-auto">
-				<div class="bg-base-100 flex flex-col items-center justify-center p-6">
-					{#if $telemetry.download_ota.status == 'progress'}
-						<progress class="progress progress-primary w-56" value={progress} max="100" />
-					{:else}
-						<progress class="progress progress-primary w-56" />
-					{/if}
-					<p class="mt-8 text-2xl">{message}</p>
-				</div>
-			</div>
-			<div class="divider my-2" />
-			<div class="flex flex-wrap justify-end gap-2">
-				<div class="flex-grow" />
-				<button
-					class="btn btn-warning text-warning-content inline-flex flex-none items-center"
-					disabled={updating}
-					on:click={() => {
-						closeAllModals();
-						location.reload();
-					}}
-				>
-					<Cancel class="mr-2 h-5 w-5" /><span>Close</span></button
-				>
-			</div>
-		</div>
-	</div>
+    <div
+        role="dialog"
+        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+        transition:fly={{ y: 50 }}
+        use:exitBeforeEnter
+        use:focusTrap
+    >
+        <div
+            class="bg-base-100 rounded-box pointer-events-auto flex max-h-full 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">Updating Firmware</h2>
+            <div class="divider my-2"></div>
+            <div class="overflow-y-auto">
+                <div class="bg-base-100 flex flex-col items-center justify-center p-6">
+                    {#if $telemetry.download_ota.status == 'progress'}
+                        <progress class="progress progress-primary w-56" value={progress} max="100"
+                        ></progress>
+                    {:else}
+                        <progress class="progress progress-primary w-56"></progress>
+                    {/if}
+                    <p class="mt-8 text-2xl">{message}</p>
+                </div>
+            </div>
+            <div class="divider my-2"></div>
+            <div class="flex flex-wrap justify-end gap-2">
+                <div class="grow"></div>
+                <button
+                    class="btn btn-warning text-warning-content inline-flex flex-none items-center"
+                    disabled={updating}
+                    onclick={() => {
+                        modals.closeAll()
+                        location.reload()
+                    }}
+                >
+                    <Cancel class="mr-2 h-5 w-5" /><span>Close</span></button
+                >
+            </div>
+        </div>
+    </div>
 {/if}

app/src/lib/components/InfoDialog.svelte

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

app/src/lib/components/InputPassword.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-	let show = false;
-	$: type = show ? 'text' : 'password';
-
-	export let value = '';
-	export let id = '';
-	function handleInput(e: any) {
-		value = e.target.value;
-	}
-</script>
-
-<div class="relative">
-	<input {type} class="input input-bordered w-full" {value} on:input={handleInput} {id} />
-	<div class="absolute inset-y-0 right-0 flex items-center pr-1">
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}"
-			on:click={() => (show = false)}
-			width="40"
-			height="40"
-			viewBox="0 0 24 24"
-			stroke-width="2"
-			stroke="currentColor"
-			fill="none"
-            role="button"
-            tabindex="0"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-			<path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
-			<path
-				d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"
-			/>
-			<path d="M3 3l18 18" />
-		</svg>
-
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}"
-			on:click={() => (show = true)}
-			width="40"
-			height="40"
-			viewBox="0 0 24 24"
-			stroke-width="2"
-			stroke="currentColor"
-			fill="none"
-            role="button"
-            tabindex="0"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		>
-			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-			<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-			<path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
-		</svg>
-	</div>
-</div>

app/src/lib/components/OrientationIndicator.svelte

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

app/src/lib/components/RSSIIndicator.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import WiFi from '~icons/tabler/wifi';
-	import WiFi0 from '~icons/tabler/wifi-0';
-	import WiFi1 from '~icons/tabler/wifi-1';
-	import WiFi2 from '~icons/tabler/wifi-2';
-    import WifiOff from '~icons/tabler/wifi-off';
-
-	export let showDBm = true;
-	export let rssi_dbm = 0;
-</script>
-
-<div class="indicator">
-	<div class="tooltip tooltip-left" data-tip={rssi_dbm + " dBm"}>
-		{#if showDBm}
-			<span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
-				{rssi_dbm} dBm
-			</span>
-		{/if}
-		{#if rssi_dbm >= -55}
-			<WiFi class={$$props.class || ''} />
-		{:else if rssi_dbm >= -75}
-			<div class="{$$props.class || ''} relative">
-				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
-				<WiFi2 class="absolute inset-0 h-full w-full" />
-			</div>
-		{:else if rssi_dbm >= -85}
-			<div class="{$$props.class || ''} relative">
-				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
-				<WiFi1 class="absolute inset-0 h-full w-full" />
-			</div>
-        {:else if rssi_dbm === 0}
-            <WifiOff class={$$props.class || ''} />
-		{:else}
-			<div class="{$$props.class || ''} relative">
-				<WiFi class="absolute inset-0 h-full w-full opacity-30" />
-				<WiFi0 class="absolute inset-0 h-full w-full" />
-			</div>
-		{/if}
-	</div>
-</div>

app/src/lib/components/SettingsCard.svelte

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

app/src/lib/components/Spinner.svelte

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

app/src/lib/components/StatusItem.svelte

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

app/src/lib/components/Stream.svelte

@@ -1,21 +1,17 @@
 <script lang="ts">
-	import { user } from '$lib/stores/user';
-	import { onDestroy } from 'svelte';
+    import { onDestroy } from 'svelte'
+    import { apiLocation } from '$lib/stores'
 
-	const ws_token = `?access_token=${$user.bearer_token}`
+    let source = $state(`${$apiLocation}/api/camera/stream`)
 
-    let source = "/api/camera/stream"+ ws_token;
-
-	onDestroy(() => {
-		source = '#';
-	});
+    onDestroy(() => (source = '#'))
 </script>
 
 <div class="w-full h-full">
-	<img
-		src={source}
-		class="absolute object-cover blur-3xl w-full h-full -z-10"
-		alt="Live stream is down"
-	/>
-	<img src={source} class="object-contain w-full h-full" alt="Live stream is down" />
+    <img
+        src={source}
+        class="absolute object-cover blur-3xl w-full h-full -z-10"
+        alt="Live stream is down"
+    />
+    <img src={source} class="object-contain w-full h-full" alt="Live stream is down" />
 </div>

app/src/lib/components/Toast.svelte

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

app/src/lib/components/TopBar.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-    import MdiHamburgerMenu from '~icons/mdi/hamburger-menu';
-</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="/">
-            <svelte:component this={MdiHamburgerMenu} class="h-8 w-8"/>
-        </a>
-    </div>
-</div>
-
-<style>
-	.topbar {
-		height: 50px;
-	}
-</style>

app/src/lib/components/UpdateIndicator.svelte

@@ -1,106 +0,0 @@
-<script lang="ts">
-	import { page } from '$app/stores';
-	import { openModal, closeAllModals } from 'svelte-modals';
-	import { user } from '$lib/stores/user';
-	import { notifications } from '$lib/components/toasts/notifications';
-	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-	import Firmware from '~icons/tabler/refresh-alert';
-	import Cancel from '~icons/tabler/x';
-	import CloudDown from '~icons/tabler/cloud-download';
-	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/models';
-
-	export let update = false;
-
-	let firmwareVersion: string;
-	let firmwareDownloadLink: string;
-
-	async function getGithubAPI() {
-        const headers = {
-            accept: 'application/vnd.github+json',
-            'X-GitHub-Api-Version': '2022-11-28'
-        }
-        const result = await api.get<GithubRelease>(`https://api.github.com/repos/${$page.data.github}/releases/latest`, {headers})
-        if (result.inner.message === "404" || result.inner.message == "Not Found") {
-            console.warn('Error: Could not find releases in the repository');
-            return
-        }
-        if (result.isErr()) {
-            console.error('Error:', result.inner);
-            return
-        }
-        
-        const results = result.inner;
-        update = false;
-        firmwareVersion = '';
-
-        if (compareVersions(results.tag_name, $page.data.features.firmware_version) === 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($page.data.features.firmware_built_target)
-                ) {
-                    update = true;
-                    firmwareVersion = results.tag_name;
-                    firmwareDownloadLink = results.assets[i].browser_download_url;
-                    notifications.info('Firmware update available.', 5000);
-                }
-            }
-        }
-	}
-
-	async function postGithubDownload(url: string) {
-        const result = await api.post('/api/downloadUpdate', { download_url: url });
-        if (result.isErr()){
-            console.error('Error:', result.inner);
-            return
-        }
-	}
-
-	onMount(async () => {
-		if ($page.data.features.download_firmware && (!$page.data.features.security || $user.admin)) {
-			await getGithubAPI();
-			const interval = setInterval(
-				async () => {
-					await getGithubAPI();
-				},
-				60 * 60 * 1000
-			); // once per hour
-		}
-	});
-
-	function confirmGithubUpdate(url: string) {
-		openModal(ConfirmDialog, {
-			title: 'Confirm flashing new firmware to the device',
-			message: 'Are you sure you want to overwrite the existing firmware with a new one?',
-			labels: {
-				cancel: { label: 'Abort', icon: Cancel },
-				confirm: { label: 'Update', icon: CloudDown }
-			},
-			onConfirm: () => {
-				postGithubDownload(url);
-				openModal(GithubUpdateDialog, {
-					onConfirm: () => closeAllModals()
-				});
-			}
-		});
-	}
-</script>
-
-{#if update}
-	<button
-		class="btn btn-square btn-ghost h-9 w-9"
-		on:click={() => confirmGithubUpdate(firmwareDownloadLink)}
-	>
-		<span
-			class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
-			>{firmwareVersion}</span
-		>
-		<Firmware class="h-7 w-7" />
-	</button>
-{/if}

app/src/lib/components/Visualization.svelte

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

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

@@ -0,0 +1,96 @@
+export { default as Connection } from '~icons/mdi/connection'
+export { default as Users } from '~icons/mdi/users'
+export { default as Settings } from '~icons/mdi/settings'
+export { default as MdiController } from '~icons/mdi/controller'
+export { default as Devices } from '~icons/mdi/devices'
+export { default as Camera } from '~icons/mdi/camera-outline'
+export { default as Rotate3d } from '~icons/mdi/rotate-3d'
+export { default as MotorOutline } from '~icons/mdi/motor-outline'
+export { default as Health } from '~icons/mdi/stethoscope'
+export { default as Folder } from '~icons/mdi/folder-outline'
+export { default as Update } from '~icons/mdi/reload'
+export { default as Router } from '~icons/mdi/router'
+export { default as AP } from '~icons/mdi/access-point'
+export { default as Remote } from '~icons/mdi/network'
+export { default as Copyright } from '~icons/mdi/copyright'
+export { default as NTP } from '~icons/mdi/clock-check'
+export { default as Metrics } from '~icons/mdi/report-bar'
+export { default as MdiEyeOutline } from '~icons/mdi/eye-outline'
+export { default as MdiEyeOffOutline } from '~icons/mdi/eye-off-outline'
+export { default as Github } from '~icons/mdi/github'
+export { default as Avatar } from '~icons/mdi/user-circle'
+export { default as Logout } from '~icons/mdi/logout'
+export { default as Record } from '~icons/mdi/radio-button-unchecked'
+export { default as MdiFullscreen } from '~icons/mdi/fullscreen'
+export { default as MdiFullscreenExit } from '~icons/mdi/fullscreen-exit'
+export { default as WiFi } from '~icons/tabler/wifi'
+export { default as WiFi0 } from '~icons/tabler/wifi-0'
+export { default as WiFi1 } from '~icons/tabler/wifi-1'
+export { default as WiFi2 } from '~icons/tabler/wifi-2'
+export { default as WifiOff } from '~icons/tabler/wifi-off'
+export { default as MdiWeatherSunny } from '~icons/mdi/weather-sunny'
+export { default as MdiMoonAndStars } from '~icons/mdi/moon-and-stars'
+export { default as Hamburger } from '~icons/mdi/hamburger-menu'
+
+export { default as FileIcon } from '~icons/mdi/file'
+export { default as FolderIcon } from '~icons/mdi/folder-outline'
+export { default as FolderOpenOutline } from '~icons/mdi/folder-open-outline'
+export { default as TrashIcon } from '~icons/mdi/trash'
+export { default as RotateCcw } from '~icons/mdi/rotate-left'
+export { default as RotateCw } from '~icons/mdi/rotate-right'
+
+export { default as Down } from '~icons/tabler/chevron-down'
+export { default as Cancel } from '~icons/tabler/x'
+export { default as Check } from '~icons/tabler/check'
+export { default as Login } from '~icons/tabler/login'
+export { default as Loader } from '~icons/tabler/loader-2'
+export { default as error } from '~icons/tabler/circle-x'
+export { default as success } from '~icons/tabler/circle-check'
+export { default as warning } from '~icons/tabler/alert-triangle'
+export { default as info } from '~icons/tabler/info-circle'
+export { default as Power } from '~icons/tabler/power'
+
+export { default as MAC } from '~icons/tabler/dna-2'
+export { default as Home } from '~icons/tabler/home'
+export { default as SSID } from '~icons/tabler/router'
+export { default as DNS } from '~icons/mdi/dns'
+export { default as Gateway } from '~icons/tabler/torii'
+export { default as Subnet } from '~icons/tabler/grid-dots'
+export { default as Channel } from '~icons/tabler/antenna'
+export { default as Scan } from '~icons/tabler/radar-2'
+export { default as Add } from '~icons/tabler/circle-plus'
+export { default as Edit } from '~icons/mdi/edit'
+export { default as EditOff } from '~icons/mdi/edit-off'
+export { default as Delete } from '~icons/tabler/trash'
+
+export { default as Network } from '~icons/tabler/router'
+export { default as Reload } from '~icons/tabler/reload'
+
+export { default as Firmware } from '~icons/tabler/refresh-alert'
+export { default as CloudDown } from '~icons/tabler/cloud-download'
+export { default as Server } from '~icons/tabler/server'
+export { default as Clock } from '~icons/tabler/clock'
+export { default as UTC } from '~icons/tabler/clock-pin'
+export { default as Stopwatch } from '~icons/tabler/24-hours'
+
+export { default as CPU } from '~icons/tabler/cpu'
+export { default as CPP } from '~icons/tabler/binary'
+export { default as Sleep } from '~icons/tabler/zzz'
+export { default as FactoryReset } from '~icons/tabler/refresh-dot'
+export { default as Speed } from '~icons/tabler/activity'
+export { default as Flash } from '~icons/tabler/device-sd-card'
+export { default as Pyramid } from '~icons/tabler/pyramid'
+export { default as Sketch } from '~icons/tabler/chart-pie'
+export { default as Heap } from '~icons/tabler/box-model'
+export { default as Temperature } from '~icons/tabler/temperature'
+export { default as SDK } from '~icons/tabler/sdk'
+
+export { default as Prerelease } from '~icons/tabler/test-pipe'
+export { default as Error } from '~icons/tabler/circle-x'
+
+export { default as OTA } from '~icons/tabler/file-upload'
+export { default as Warning } from '~icons/tabler/alert-triangle'
+
+export { default as AddUser } from '~icons/tabler/user-plus'
+export { default as Admin } from '~icons/tabler/key'
+export { default as Save } from '~icons/tabler/device-floppy'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+<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'
+
+    const features = useFeatureFlags()
+
+    const postSleep = async () => await api.post('/api/system/sleep')
+
+    const confirmSleep = () => {
+        modals.open(ConfirmDialog, {
+            title: 'Confirm Power Down',
+            message: 'Are you sure you want to switch off the device?',
+            labels: {
+                cancel: { label: 'Abort', icon: Cancel },
+                confirm: { label: 'Switch Off', icon: Power }
+            },
+            onConfirm: () => {
+                modals.close()
+                postSleep()
+            }
+        })
+    }
+</script>
+
+{#if $features.sleep}
+    <div class="flex-none">
+        <button class="btn btn-square btn-ghost h-9 w-10" onclick={confirmSleep}>
+            <Power class="text-error h-9 w-9" />
+        </button>
+    </div>
+{/if}

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { mode, modes } from '$lib/stores'
+
+    const deactivate = async () => {
+        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

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

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

@@ -0,0 +1,18 @@
+<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={resolve('/')}>
+            <Hamburger class="h-8 w-8" />
+        </a>
+    </div>
+</div>
+
+<style>
+    .topbar {
+        height: 50px;
+    }
+</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app/src/lib/gait.ts

@@ -1,242 +1,493 @@
-import type { body_state_t } from './kinematic';
-import { fromInt8 } from './utilities';
-
-const { sin } = Math;
+import { get } from 'svelte/store'
+import type { body_state_t } from './kinematic'
+import { currentKinematic } from './stores/featureFlags'
 
 export interface gait_state_t {
-	step_height: number;
-	step_x: number;
-	step_z: number;
-	step_angle: number;
-	step_velocity: number;
-	step_depth: number;
+    step_height: number
+    step_x: number
+    step_z: number
+    step_angle: number
+    step_velocity: number
+    step_depth: number
 }
 
 export interface ControllerCommand {
-	stop: number;
-	lx: number;
-	ly: number;
-	rx: number;
-	ry: number;
-	h: number;
-	s: number;
+    lx: number
+    ly: number
+    rx: number
+    ry: number
+    h: number
+    s: number
+    s1: number
 }
 
 export abstract class GaitState {
-	protected abstract name: string;
+    protected abstract name: string
 
-	protected static body_state: body_state_t;
+    protected dt = 0.02
+    protected body_state!: body_state_t
+    protected gait_state: gait_state_t = {
+        step_height: 0.4,
+        step_x: 0,
+        step_z: 0,
+        step_angle: 0,
+        step_velocity: 1,
+        step_depth: 0.002
+    }
 
-	public get default_feet_pos() {
-		return [
-			[1, -1, 1, 1],
-			[1, -1, -1, 1],
-			[-1, -1, 1, 1],
-			[-1, -1, -1, 1]
-		];
-	}
+    public get default_feet_pos() {
+        return get(currentKinematic).getDefaultFeetPos()
+    }
 
-	protected get default_height() {
-		return 0.5;
-	}
+    protected get default_height() {
+        return 0.5
+    }
 
-	begin() {
-		console.log('Starting', this.name);
-	}
-	end() {
-		console.log('Ending', this.name);
-	}
-	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-		return body_state;
-	}
+    begin() {
+        console.log('Starting', this.name)
+    }
+    end() {
+        console.log('Ending', this.name)
+    }
+    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+        this.map_command(command)
+        this.body_state = body_state
+        this.dt = dt / 1000
 
-	map_command(command: ControllerCommand): gait_state_t {
-		return {
-			step_height: 0.4 + Math.abs(command.ry / 128),
-			step_x: (Math.floor(fromInt8(command.ly, -1, 1) * 10) / 10) * 3,
-			step_z: -(Math.floor(fromInt8(command.lx, -1, 1) * 10) / 10) * 3,
-			step_velocity: command.s / 128 + 1,
-			step_angle: 0,
-			step_depth: 0.2
-		};
-	}
+        if (body_state.cumulative_x === undefined) {
+            body_state.cumulative_x = 0
+            body_state.cumulative_y = 0
+            body_state.cumulative_z = 0
+            body_state.cumulative_roll = 0
+            body_state.cumulative_pitch = 0
+            body_state.cumulative_yaw = 0
+        }
+
+        return body_state
+    }
+
+    map_command(command: ControllerCommand) {
+        const newCommand = {
+            step_height: 0.4 + (command.s1 + 1) / 2,
+            step_x: command.ly,
+            step_z: -command.lx,
+            step_velocity: command.s,
+            step_angle: command.rx,
+            step_depth: 0.002
+        }
+
+        this.gait_state = newCommand
+    }
 }
 
 export class IdleState extends GaitState {
-	protected name = 'Idle';
+    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'
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    step(body_state: body_state_t, _command: ControllerCommand) {
+        super.step(body_state, _command)
+        body_state.omega = 0
+        body_state.phi = 0
+        body_state.psi = 0
+        body_state.xm = 0
+        body_state.ym = this.default_height * 10
+        body_state.zm = 0
+        body_state.feet = this.default_feet_pos
+        return body_state
+    }
 }
 
 export class RestState extends GaitState {
-	protected name = 'Rest';
+    protected name = 'Rest'
 
-	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-		body_state.omega = 0;
-		body_state.phi = 0;
-		body_state.psi = 0;
-		body_state.xm = 0;
-		body_state.ym = this.default_height / 2;
-		body_state.zm = 0;
-		body_state.feet = this.default_feet_pos;
-		return body_state;
-	}
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    step(body_state: body_state_t, _command: ControllerCommand) {
+        super.step(body_state, _command)
+        body_state.omega = 0
+        body_state.phi = 0
+        body_state.psi = 0
+        body_state.xm = 0
+        body_state.ym = this.default_height / 2
+        body_state.zm = 0
+        body_state.feet = this.default_feet_pos
+        return body_state
+    }
 }
 
 export class StandState extends GaitState {
-	protected name = 'Stand';
+    protected name = 'Stand'
 
-	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-		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.feet = this.default_feet_pos;
-		return body_state;
-	}
+    step(body_state: body_state_t, command: ControllerCommand) {
+        super.step(body_state, command)
+        body_state.omega = 0
+        body_state.phi = command.rx * 10 * (Math.PI / 2)
+        body_state.psi = command.ry * 10 * (Math.PI / 2)
+        body_state.xm = command.ly / 4
+        body_state.zm = command.lx / 4
+        body_state.feet = this.default_feet_pos
+        return body_state
+    }
 }
 
-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;
+export class BezierState extends GaitState {
+    protected name = 'Bezier'
+    protected phase = 0
+    protected phase_num = 0
+    protected step_length = 0
+    protected stand_offset = 0.75
+    protected mode: 'crawl' | 'trot' = 'trot'
+    protected speed_factor = 1
+    offset = [0, 0.5, 0.75, 0.25]
 
-	protected contact_phases!: number[][];
-	protected shifts!: number[][];
+    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 body_state!: body_state_t;
-	protected gait_state!: gait_state_t;
-	protected dt = 0.02;
+    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 }
 
-	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-		this.body_state = body_state;
-		this.gait_state = this.map_command(command);
-		this.dt = dt / 1000;
-		this.update_phase();
-		this.update_body_position();
-		this.update_feet_positions();
-		return this.body_state;
-	}
+    constructor() {
+        super()
+        this.set_mode(this.mode)
+    }
 
-	update_phase() {
-		this.phase_time += this.dt * this.phase_speed_factor * this.gait_state.step_velocity;
+    begin() {
+        super.begin()
+    }
 
-		if (this.phase_time >= 1) {
-			this.phase += 1;
-			if (this.phase == this.num_phases) this.phase = 0;
-			this.phase_time = 0;
-		}
-	}
+    set_mode(mode: 'crawl' | 'trot', duty?: number, order?: [number, number, number, number]) {
+        console.log('BezierState set_mode', mode)
 
-	update_body_position() {
-		if (this.num_phases === 4) return;
+        this.mode = mode
+        if (mode === 'crawl') {
+            this.speed_factor = 0.5
+            this.stand_offset = duty ?? 0.85
+            const o = order ?? [3, 0, 2, 1]
+            const base = [0, 0.25, 0.5, 0.75]
+            const offsets = new Array(4).fill(0)
+            for (let i = 0; i < 4; i++) offsets[o[i]] = base[i]
+            this.offset = offsets
+        } else {
+            this.speed_factor = 2
+            this.stand_offset = duty ?? 0.6
+            this.offset = order ? (order.map(v => v % 1) as number[]) : [0, 0.5, 0.5, 0]
+        }
+    }
 
-		const shift = this.shifts[Math.floor(this.phase / 2)];
+    end() {
+        super.end()
+    }
 
-		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;
-	}
+    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+        super.step(body_state, command, dt)
+        this.step_length = Math.sqrt(this.gait_state.step_x ** 2 + this.gait_state.step_z ** 2)
+        if (this.gait_state.step_x < 0) this.step_length = -this.step_length
+        this.update_phase()
+        this.update_body_position()
+        this.update_feet_positions()
+        this.update_cumulative_position()
+        return this.body_state
+    }
 
-	update_feet_positions() {
-		for (let i = 0; i < 4; i++) {
-			this.body_state.feet[i] = this.update_foot_position(i);
-		}
-	}
+    update_phase() {
+        const m = this.gait_state
+        if (m.step_x === 0 && m.step_z === 0 && m.step_angle === 0) {
+            this.phase = 0
+            return
+        }
+        this.phase += this.dt * m.step_velocity * this.speed_factor
+        if (this.phase >= 1) {
+            this.phase_num = (this.phase_num + 1) % 2
+            this.phase = 0
+        }
+    }
 
-	update_foot_position(index: number): number[] {
-		const contact = this.contact_phases[index][this.phase];
-		return contact ? this.stand(index) : this.swing(index);
-	}
+    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
 
-	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
-		];
+        if (this.mode !== 'crawl') return
 
-		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];
-	}
+        const { stance, swing, next_swing, time_to_lift } = this.get_leg_states()
 
-	swing(index: number): number[] {
-		const delta_pos = [this.gait_state.step_x * this.dt, 0, this.gait_state.step_z * this.dt];
+        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
 
-		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;
-		}
+                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]
 
-		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.shift_start_time = time_to_lift
+            }
 
-		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];
-	}
+            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
+        this.body_state.feet[index][0] = this.default_feet_pos[index][0]
+        this.body_state.feet[index][1] = this.default_feet_pos[index][1]
+        this.body_state.feet[index][2] = this.default_feet_pos[index][2]
+        return phase <= this.stand_offset ?
+                this.stand_controller(index, phase / this.stand_offset)
+            :   this.swing_controller(index, (phase - this.stand_offset) / (1 - this.stand_offset))
+    }
+
+    stand_controller(index: number, phase: number) {
+        const depth = this.gait_state.step_depth
+        return this.controller(index, phase, stance_curve, depth)
+    }
+
+    swing_controller(index: number, phase: number) {
+        const height = this.gait_state.step_height
+        return this.controller(index, phase, bezier_curve, height)
+    }
+
+    controller(
+        index: number,
+        phase: number,
+        controller: (length: number, angle: number, ...args: number[]) => number[],
+        ...args: number[]
+    ) {
+        let length = this.step_length / 2
+        let angle = Math.atan2(this.gait_state.step_z, this.step_length) * 2
+        const delta_pos = controller(length, angle, ...args, phase)
+
+        length = this.gait_state.step_angle * 2
+        angle = yawArc(this.default_feet_pos[index], this.body_state.feet[index])
+
+        const delta_rot = controller(length, angle, ...args, phase)
+
+        this.body_state.feet[index][0] += delta_pos[0] + delta_rot[0] * 0.2
+        this.body_state.feet[index][2] += delta_pos[2] + delta_rot[2] * 0.2
+        if (this.gait_state.step_x || this.gait_state.step_z || this.gait_state.step_angle)
+            this.body_state.feet[index][1] += delta_pos[1] + delta_rot[1] * 0.2
+
+        return this.body_state.feet[index]
+    }
+
+    update_cumulative_position() {
+        if (this.last_body_state === null) {
+            this.last_body_state = { ...this.body_state }
+            this.body_state.cumulative_x = 0
+            this.body_state.cumulative_y = 0
+            this.body_state.cumulative_z = 0
+            this.body_state.cumulative_roll = 0
+            this.body_state.cumulative_pitch = 0
+            this.body_state.cumulative_yaw = 0
+            return
+        }
+
+        const m = this.gait_state
+        const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0
+
+        if (moving) {
+            const step_displacement_x_local =
+                m.step_x * m.step_velocity * this.dt * this.speed_factor
+            const step_displacement_z_local =
+                m.step_z * m.step_velocity * this.dt * this.speed_factor
+            const step_displacement_yaw =
+                m.step_angle * m.step_velocity * this.dt * this.speed_factor
+
+            const cos_yaw = Math.cos(this.cumulative_orientation.yaw)
+            const sin_yaw = Math.sin(this.cumulative_orientation.yaw)
+            const step_displacement_x =
+                step_displacement_x_local * cos_yaw - step_displacement_z_local * sin_yaw
+            const step_displacement_z =
+                step_displacement_x_local * sin_yaw + step_displacement_z_local * cos_yaw
+
+            this.cumulative_position.x += step_displacement_x
+            this.cumulative_position.z += step_displacement_z
+            this.cumulative_orientation.yaw += step_displacement_yaw
+        }
+
+        this.body_state.cumulative_x = this.cumulative_position.x
+        this.body_state.cumulative_y = this.cumulative_position.y
+        this.body_state.cumulative_z = this.cumulative_position.z
+        this.body_state.cumulative_roll = this.cumulative_orientation.roll
+        this.body_state.cumulative_pitch = this.cumulative_orientation.pitch
+        this.body_state.cumulative_yaw = this.cumulative_orientation.yaw
+
+        this.last_body_state = { ...this.body_state }
+    }
 }
 
-export class FourPhaseWalkState extends PhaseGaitState {
-	protected name = 'Four phase walk';
-	protected num_phases = 4;
-	protected phase_speed_factor = 2.5;
-	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);
+const stance_curve = (length: number, angle: number, depth: number, phase: number): number[] => {
+    const X_POLAR = Math.cos(angle)
+    const Y_POLAR = Math.sin(angle)
 
-	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);
-	}
+    const step = length * (1 - 2 * phase)
+    const X = step * X_POLAR
+    const Z = step * Y_POLAR
+    let Y = 0
+    if (length !== 0) Y = -depth * Math.cos((Math.PI * (X + Y)) / (2 * length))
+    return [X, Y, Z]
 }
 
-export class EightPhaseWalkState extends PhaseGaitState {
-	protected name = 'Eight phase walk';
-	protected num_phases = 8;
-	protected phase_speed_factor = 1.5;
-	protected contact_phases = [
-		[1, 0, 1, 1, 1, 1, 1, 1],
-		[1, 1, 1, 0, 1, 1, 1, 1],
-		[1, 1, 1, 1, 1, 0, 1, 1],
-		[1, 1, 1, 1, 1, 1, 1, 0]
-	];
-	protected shifts = [
-		[-0.3, 0, -0.2],
-		[-0.3, 0, 0.2],
-		[0.3, 0, -0.2],
-		[0.3, 0, 0.2]
-	];
-	protected swing_stand_ratio = 1 / (this.num_phases - 1);
+const yawArc = (default_foot_pos: number[], current_foot_pos: number[]): number => {
+    const foot_mag = Math.sqrt(default_foot_pos[0] ** 2 + default_foot_pos[2] ** 2)
+    const foot_dir = Math.atan2(default_foot_pos[2], default_foot_pos[0])
+    const offsets = [
+        current_foot_pos[0] - default_foot_pos[0],
+        current_foot_pos[2] - default_foot_pos[2],
+        current_foot_pos[1] - default_foot_pos[1]
+    ]
+    const offset_mag = Math.sqrt(offsets[0] ** 2 + offsets[2] ** 2)
+    const offset_mod = Math.atan2(offset_mag, foot_mag)
 
-	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);
-	}
+    return Math.PI / 2.0 + foot_dir + offset_mod
+}
+
+const bezier_curve = (length: number, angle: number, height: number, phase: number): number[] => {
+    const control_points = get_control_points(length, angle, height)
+    const n = control_points.length - 1
+
+    const point = [0, 0, 0]
+    for (let i = 0; i <= n; i++) {
+        const bernstein_poly = comb(n, i) * Math.pow(phase, i) * Math.pow(1 - phase, n - i)
+        point[0] += bernstein_poly * control_points[i][0]
+        point[1] += bernstein_poly * control_points[i][1]
+        point[2] += bernstein_poly * control_points[i][2]
+    }
+    return point
+}
+
+const get_control_points = (length: number, angle: number, height: number): number[][] => {
+    const X_POLAR = Math.cos(angle)
+    const Z_POLAR = Math.sin(angle)
+
+    const STEP = [
+        -length,
+        -length * 1.4,
+        -length * 1.5,
+        -length * 1.5,
+        -length * 1.5,
+        0.0,
+        0.0,
+        0.0,
+        length * 1.5,
+        length * 1.5,
+        length * 1.4,
+        length
+    ]
+
+    const Y = [
+        0.0,
+        0.0,
+        height * 0.9,
+        height * 0.9,
+        height * 0.9,
+        height * 0.9,
+        height * 0.9,
+        height * 1.1,
+        height * 1.1,
+        height * 1.1,
+        0.0,
+        0.0
+    ]
+
+    const control_points: number[][] = []
+
+    for (let i = 0; i < STEP.length; i++) {
+        const X = STEP[i] * X_POLAR
+        const Z = STEP[i] * Z_POLAR
+        control_points.push([X, Y[i], Z])
+    }
+
+    return control_points
+}
+
+const comb = (n: number, k: number): number => {
+    if (k < 0 || k > n) return 0
+    if (k === 0 || k === n) return 1
+    k = Math.min(k, n - k)
+    let c = 1
+    for (let i = 0; i < k; i++) c = (c * (n - i)) / (i + 1)
+    return c
 }

app/src/lib/kinematic.ts

@@ -1,320 +1,153 @@
-
 export interface body_state_t {
-	omega: number;
-	phi: number;
-	psi: number;
-	xm: number;
-	ym: number;
-	zm: number;
-	feet: number[][];
+    omega: number
+    phi: number
+    psi: number
+    xm: number
+    ym: number
+    zm: number
+    feet: number[][]
+    cumulative_x: number
+    cumulative_y: number
+    cumulative_z: number
+    cumulative_roll: number
+    cumulative_pitch: number
+    cumulative_yaw: number
 }
 
 export interface position {
-	x: number;
-	y: number;
-	z: number;
+    x: number
+    y: number
+    z: number
 }
 
 export interface target_position {
-	x: number;
-	z: number;
-	yaw: number;
+    x: number
+    z: number
+    yaw: number
 }
 
-const { cos, sin, atan2, sqrt } = Math;
+export interface KinematicParams {
+    coxa: number
+    coxa_offset: number
+    femur: number
+    tibia: number
+    L: number
+    W: number
+}
 
-const DEG2RAD = 0.017453292519943;
+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;
-
-	L: number;
-	W: number;
-
-	DEG2RAD = DEG2RAD;
-
-	sHp = sin(Math.PI / 2);
-	cHp = cos(Math.PI / 2);
-
-	Tlf: number[][] = [];
-	Trf: number[][] = [];
-	Tlb: number[][] = [];
-	Trb: number[][] = [];
-
-	point_lf: number[][];
-	point_rf: number[][];
-	point_lb: number[][];
-	point_rb: number[][];
-	Ix: number[][];
-
-	constructor() {
-		this.l1 = 60.5 / 100;
-		this.l2 = 10 / 100;
-		this.l3 = 100.7 / 100;
-		this.l4 = 118.5 / 100;
-
-		this.L = 207.5 / 100;
-		this.W = 78 / 100;
-
-		this.point_lf = [
-			[this.cHp, 0, this.sHp, this.L / 2],
-			[0, 1, 0, 0],
-			[-this.sHp, 0, this.cHp, this.W / 2],
-			[0, 0, 0, 1]
-		];
-
-		this.point_rf = [
-			[this.cHp, 0, this.sHp, this.L / 2],
-			[0, 1, 0, 0],
-			[-this.sHp, 0, this.cHp, -this.W / 2],
-			[0, 0, 0, 1]
-		];
-
-		this.point_lb = [
-			[this.cHp, 0, this.sHp, -this.L / 2],
-			[0, 1, 0, 0],
-			[-this.sHp, 0, this.cHp, this.W / 2],
-			[0, 0, 0, 1]
-		];
-
-		this.point_rb = [
-			[this.cHp, 0, this.sHp, -this.L / 2],
-			[0, 1, 0, 0],
-			[-this.sHp, 0, this.cHp, -this.W / 2],
-			[0, 0, 0, 1]
-		];
-		this.Ix = [
-			[-1, 0, 0, 0],
-			[0, 1, 0, 0],
-			[0, 0, 1, 0],
-			[0, 0, 0, 1]
-		];
-	}
-
-	public calcIK(body_state: body_state_t): number[] {
-		this.bodyIK(body_state);
-
-		return [
-			...this.legIK(this.multiplyVector(this.inverse(this.Tlf), body_state.feet[0])),
-			...this.legIK(
-				this.multiplyVector(
-					this.Ix,
-					this.multiplyVector(this.inverse(this.Trf), body_state.feet[1])
-				)
-			),
-			...this.legIK(this.multiplyVector(this.inverse(this.Tlb), body_state.feet[2])),
-			...this.legIK(
-				this.multiplyVector(
-					this.Ix,
-					this.multiplyVector(this.inverse(this.Trb), body_state.feet[3])
-				)
-			)
-		];
-	}
-
-	bodyIK(p: body_state_t) {
-		const cos_omega = cos(p.omega * this.DEG2RAD);
-		const sin_omega = sin(p.omega * this.DEG2RAD);
-		const cos_phi = cos(p.phi * this.DEG2RAD);
-		const sin_phi = sin(p.phi * this.DEG2RAD);
-		const cos_psi = cos(p.psi * this.DEG2RAD);
-		const sin_psi = sin(p.psi * this.DEG2RAD);
-
-		const Tm: number[][] = [
-			[cos_phi * cos_psi, -sin_psi * cos_phi, sin_phi, p.xm],
-			[
-				sin_omega * sin_phi * cos_psi + sin_psi * cos_omega,
-				-sin_omega * sin_phi * sin_psi + cos_omega * cos_psi,
-				-sin_omega * cos_phi,
-				p.ym
-			],
-			[
-				sin_omega * sin_psi - sin_phi * cos_omega * cos_psi,
-				sin_omega * cos_psi + sin_phi * sin_psi * cos_omega,
-				cos_omega * cos_phi,
-				p.zm
-			],
-			[0, 0, 0, 1]
-		];
-
-		this.Tlf = this.matrixMultiply(Tm, this.point_lf);
-		this.Trf = this.matrixMultiply(Tm, this.point_rf);
-		this.Tlb = this.matrixMultiply(Tm, this.point_lb);
-		this.Trb = this.matrixMultiply(Tm, this.point_rb);
-	}
-
-	public legIK(point: number[]): number[] {
-		const [x, y, z] = point;
-
-		let F = sqrt(x ** 2 + y ** 2 - this.l1 ** 2);
-		if (isNaN(F)) F = this.l1;
-
-		const G = F - this.l2;
-		const H = sqrt(G ** 2 + z ** 2);
-
-		const theta1 = -atan2(y, x) - atan2(F, -this.l1);
-		const D = (H ** 2 - this.l3 ** 2 - this.l4 ** 2) / (2 * this.l3 * this.l4);
-		let theta3 = atan2(sqrt(1 - D ** 2), D);
-		if (isNaN(theta3)) theta3 = 0;
-
-		const theta2 = atan2(z, G) - atan2(this.l4 * sin(theta3), this.l3 + this.l4 * cos(theta3));
-
-		return [theta1, theta2, theta3];
-	}
-
-	matrixMultiply(a: number[][], b: number[][]): number[][] {
-		const result: number[][] = [];
-
-		for (let i = 0; i < a.length; i++) {
-			const row: number[] = [];
-
-			for (let j = 0; j < b[0].length; j++) {
-				let sum = 0;
-
-				for (let k = 0; k < a[i].length; k++) {
-					sum += a[i][k] * b[k][j];
-				}
-
-				row.push(sum);
-			}
-
-			result.push(row);
-		}
-
-		return result;
-	}
-
-	multiplyVector(matrix: number[][], vector: number[]): number[] {
-		const rows = matrix.length;
-		const cols = matrix[0].length;
-		const vectorLength = vector.length;
-
-		if (cols !== vectorLength) {
-			throw new Error('Matrix and vector dimensions do not match for multiplication.');
-		}
-
-		const result = [];
-
-		for (let i = 0; i < rows; i++) {
-			let sum = 0;
-
-			for (let j = 0; j < cols; j++) {
-				sum += matrix[i][j] * vector[j];
-			}
-
-			result.push(sum);
-		}
-
-		return result;
-	}
-
-	private inverse(matrix: number[][]): number[][] {
-		const det = this.determinant(matrix);
-		const adjugate = this.adjugate(matrix);
-		const scalar = 1 / det;
-		const inverse: number[][] = [];
-
-		for (let i = 0; i < matrix.length; i++) {
-			const row: number[] = [];
-
-			for (let j = 0; j < matrix[i].length; j++) {
-				row.push(adjugate[i][j] * scalar);
-			}
-
-			inverse.push(row);
-		}
-
-		return inverse;
-	}
-
-	private determinant(matrix: number[][]): number {
-		if (matrix.length !== matrix[0].length) {
-			throw new Error('The matrix is not square.');
-		}
-
-		if (matrix.length === 2) {
-			return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
-		}
-
-		let det = 0;
-
-		for (let i = 0; i < matrix.length; i++) {
-			const sign = i % 2 === 0 ? 1 : -1;
-			const subMatrix: number[][] = [];
-
-			for (let j = 1; j < matrix.length; j++) {
-				const row: number[] = [];
-
-				for (let k = 0; k < matrix.length; k++) {
-					if (k !== i) {
-						row.push(matrix[j][k]);
-					}
-				}
-
-				subMatrix.push(row);
-			}
-
-			det += sign * matrix[0][i] * this.determinant(subMatrix);
-		}
-
-		return det;
-	}
-
-	private adjugate(matrix: number[][]): number[][] {
-		if (matrix.length !== matrix[0].length) {
-			throw new Error('The matrix is not square.');
-		}
-
-		const adjugate: number[][] = [];
-
-		for (let i = 0; i < matrix.length; i++) {
-			const row: number[] = [];
-
-			for (let j = 0; j < matrix[i].length; j++) {
-				const sign = (i + j) % 2 === 0 ? 1 : -1;
-				const subMatrix: number[][] = [];
-
-				for (let k = 0; k < matrix.length; k++) {
-					if (k !== i) {
-						const subRow: number[] = [];
-
-						for (let l = 0; l < matrix.length; l++) {
-							if (l !== j) {
-								subRow.push(matrix[k][l]);
-							}
-						}
-
-						subMatrix.push(subRow);
-					}
-				}
-
-				const cofactor = sign * this.determinant(subMatrix);
-				row.push(cofactor);
-			}
-
-			adjugate.push(row);
-		}
-
-		return this.transpose(adjugate);
-	}
-
-	private transpose(matrix: number[][]): number[][] {
-		const transposed: number[][] = [];
-
-		for (let i = 0; i < matrix.length; i++) {
-			const row: number[] = [];
-
-			for (let j = 0; j < matrix[i].length; j++) {
-				row.push(matrix[j][i]);
-			}
-
-			transposed.push(row);
-		}
-
-		return transposed;
-	}
+    coxa: number
+    coxa_offset: number
+    femur: number
+    tibia: number
+
+    L: number
+    W: number
+
+    DEG2RAD = DEG2RAD
+
+    mountOffsets: number[][]
+
+    invMountRot = [
+        [0, 0, -1],
+        [0, 1, 0],
+        [1, 0, 0]
+    ]
+
+    constructor(params: KinematicParams) {
+        this.coxa = params.coxa
+        this.coxa_offset = params.coxa_offset
+        this.femur = params.femur
+        this.tibia = params.tibia
+        this.L = params.L
+        this.W = params.W
+
+        this.mountOffsets = [
+            [this.L / 2, 0, this.W / 2],
+            [this.L / 2, 0, -this.W / 2],
+            [-this.L / 2, 0, this.W / 2],
+            [-this.L / 2, 0, -this.W / 2]
+        ]
+    }
+
+    getDefaultFeetPos(): number[][] {
+        return this.mountOffsets.map((offset, i) => {
+            return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.coxa : this.coxa)]
+        })
+    }
+
+    calcIK(p: body_state_t): number[] {
+        const roll = p.omega * this.DEG2RAD
+        const pitch = p.phi * this.DEG2RAD
+        const yaw = p.psi * this.DEG2RAD
+        const rot = this.euler2R(roll, pitch, yaw)
+        const inv_rot = [
+            [rot[0][0], rot[1][0], rot[2][0]],
+            [rot[0][1], rot[1][1], rot[2][1]],
+            [rot[0][2], rot[1][2], rot[2][2]]
+        ]
+        const inv_trans = [
+            -inv_rot[0][0] * p.xm - inv_rot[0][1] * p.ym - inv_rot[0][2] * p.zm,
+            -inv_rot[1][0] * p.xm - inv_rot[1][1] * p.ym - inv_rot[1][2] * p.zm,
+            -inv_rot[2][0] * p.xm - inv_rot[2][1] * p.ym - inv_rot[2][2] * p.zm
+        ]
+        return p.feet.flatMap((foot, i) => {
+            const [wx, wy, wz] = foot
+            const bx = inv_rot[0][0] * wx + inv_rot[0][1] * wy + inv_rot[0][2] * wz + inv_trans[0]
+            const by = inv_rot[1][0] * wx + inv_rot[1][1] * wy + inv_rot[1][2] * wz + inv_trans[1]
+            const bz = inv_rot[2][0] * wx + inv_rot[2][1] * wy + inv_rot[2][2] * wz + inv_trans[2]
+
+            const [mx, my, mz] = this.mountOffsets[i]
+            const px = bx - mx,
+                py = by - my,
+                pz = bz - mz
+
+            const lx =
+                this.invMountRot[0][0] * px +
+                this.invMountRot[0][1] * py +
+                this.invMountRot[0][2] * pz
+            const ly =
+                this.invMountRot[1][0] * px +
+                this.invMountRot[1][1] * py +
+                this.invMountRot[1][2] * pz
+            const lz =
+                this.invMountRot[2][0] * px +
+                this.invMountRot[2][1] * py +
+                this.invMountRot[2][2] * pz
+
+            const xLocal = i % 2 === 1 ? -lx : lx
+            return this.legIK(xLocal, ly, lz)
+        })
+    }
+
+    private legIK(x: number, y: number, z: number): [number, number, number] {
+        const F = sqrt(max(0, x * x + y * y - this.coxa * this.coxa))
+        const G = F - this.coxa_offset
+        const H = sqrt(G * G + z * z)
+        const t1 = -atan2(y, x) - atan2(F, -this.coxa)
+        const D =
+            (H * H - this.femur * this.femur - this.tibia * this.tibia) /
+            (2 * this.femur * this.tibia)
+        const t3 = acos(max(-1, min(1, D)))
+        const t2 = atan2(z, G) - atan2(this.tibia * sin(t3), this.femur + this.tibia * cos(t3))
+        return [t1, t2, t3]
+    }
+
+    private euler2R(roll: number, pitch: number, yaw: number): number[][] {
+        const cr = cos(roll),
+            sr = sin(roll)
+        const cp = cos(pitch),
+            sp = sin(pitch)
+        const cy = cos(yaw),
+            sy = sin(yaw)
+        return [
+            [cp * cy, -cp * sy, sp],
+            [sr * sp * cy + sy * cr, -sr * sp * sy + cr * cy, -sr * cp],
+            [sr * sy - sp * cr * cy, sr * cy + sp * sy * cr, cr * cp]
+        ]
+    }
 }
-

app/src/lib/models.ts

@@ -1,169 +0,0 @@
-export type vector = { x: number; y: number };
-
-export interface ControllerInput {
-	left: vector;
-	right: vector;
-	height: number;
-	speed: number;
-	s1: number;
-}
-
-export type GithubRelease = {
-	message: string;
-	tag_name: string;
-	assets: Array<{
-		name: string;
-		browser_download_url: string;
-	}>;
-};
-
-export type JWT = { access_token: string };
-
-export type angles = number[] | Int16Array;
-
-export type WifiStatus = {
-	status: number;
-	local_ip: string;
-	mac_address: string;
-	rssi: number;
-	ssid: string;
-	bssid: string;
-	channel: number;
-	subnet_mask: string;
-	gateway_ip: string;
-	dns_ip_1: string;
-	dns_ip_2?: string;
-};
-
-export type WifiSettings = {
-	hostname: string;
-	priority_RSSI: boolean;
-	wifi_networks: NetworkItem[];
-};
-
-export type NetworkList = {
-	networks: NetworkItem[];
-};
-
-export type KnownNetworkItem = {
-	ssid: string;
-	password: string;
-	static_ip_config: boolean;
-	local_ip?: string;
-	subnet_mask?: string;
-	gateway_ip?: string;
-	dns_ip_1?: string;
-	dns_ip_2?: string;
-};
-
-export type NetworkItem = {
-	rssi: number;
-	ssid: string;
-	bssid: string;
-	channel: number;
-	encryption_type: number;
-};
-
-export type ApStatus = {
-	status: number;
-	ip_address: string;
-	mac_address: string;
-	station_num: number;
-};
-
-export type ApSettings = {
-	provision_mode: number;
-	ssid: string;
-	password: string;
-	channel: number;
-	ssid_hidden: boolean;
-	max_clients: number;
-	local_ip: string;
-	gateway_ip: string;
-	subnet_mask: string;
-};
-
-export type LightState = {
-	led_on: boolean;
-};
-
-export type NTPStatus = {
-	status: number;
-	utc_time: string;
-	local_time: string;
-	server: string;
-	uptime: number;
-};
-
-export type NTPSettings = {
-	enabled: boolean;
-	server: string;
-	tz_label: string;
-	tz_format: string;
-};
-
-export type Analytics = {
-	max_alloc_heap: number;
-	psram_size: number;
-	free_psram: number;
-	free_heap: number;
-	total_heap: number;
-	min_free_heap: number;
-	core_temp: number;
-	fs_total: number;
-	fs_used: number;
-	uptime: number;
-};
-
-export type StaticSystemInformation = {
-	esp_platform: string;
-	firmware_version: string;
-	cpu_freq_mhz: number;
-	cpu_type: string;
-	cpu_rev: number;
-	cpu_cores: number;
-	sketch_size: number;
-	free_sketch_space: number;
-	sdk_version: string;
-	arduino_version: string;
-	flash_chip_size: number;
-	flash_chip_speed: number;
-	cpu_reset_reason: string;
-};
-
-export type SystemInformation = Analytics & StaticSystemInformation;
-
-export type CameraSettings = {
-	framesize: number;
-	quality: number;
-	brightness: number;
-	contrast: number;
-	saturation: number;
-	sharpness: number;
-	denoise: number;
-	special_effect: number;
-	wb_mode: number;
-	vflip: boolean;
-	hmirror: boolean;
-};
-
-export type File = number;
-
-export interface Directory {
-	[key: string]: File | Directory;
-}
-
-export type Servo = {
-	name: string;
-	channel: number;
-	inverted: boolean;
-	angle: number;
-	center_angle: number;
-};
-
-export type ServoConfiguration = {
-	is_active: boolean;
-	servo_pwm_frequency: number;
-	servo_oscillator_frequency: number;
-	servos: Servo[];
-};

app/src/lib/sceneBuilder.ts

@@ -1,351 +1,348 @@
 import {
-	Mesh,
-	PerspectiveCamera,
-	PlaneGeometry,
-	Scene,
-	WebGLRenderer,
-	AmbientLight,
-	DirectionalLight,
-	PCFSoftShadowMap,
-	GridHelper,
-	ArrowHelper,
-	Vector3,
-	FogExp2,
-	CanvasTexture,
-	type ColorRepresentation,
-	type WebGLRendererParameters,
-	MeshPhongMaterial,
-	EquirectangularReflectionMapping,
-	ACESFilmicToneMapping,
-	MathUtils,
-	MeshStandardMaterial,
-	Group
-} 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 { type URDFJoint, type URDFMimicJoint, type URDFRobot } from 'urdf-loader';
-import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls';
-import { sunCalculator } from './utilities/position-utilities';
+    Mesh,
+    PerspectiveCamera,
+    PlaneGeometry,
+    Scene,
+    WebGLRenderer,
+    AmbientLight,
+    DirectionalLight,
+    PCFSoftShadowMap,
+    type GridHelper,
+    ArrowHelper,
+    Vector3,
+    FogExp2,
+    CanvasTexture,
+    type ColorRepresentation,
+    type WebGLRendererParameters,
+    MeshPhongMaterial,
+    EquirectangularReflectionMapping,
+    ACESFilmicToneMapping,
+    Group,
+    MeshBasicMaterial,
+    RepeatWrapping,
+    Object3D
+} from 'three'
+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'
 
-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;
-}
-
-interface gridOptions {
-	divisions?: number;
-	size?: 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 gridHelperOptions = gridOptions & position;
+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
+    transformControl: TransformControls
+    public modelGroup!: Group
 
-	constructor() {
-		this.scene = new Scene();
-		if (this.scene.environment?.mapping) {
-			this.scene.environment.mapping = EquirectangularReflectionMapping;
-		}
-		return this;
-	}
+    constructor() {
+        this.scene = new Scene()
+        if (this.scene.environment?.mapping) {
+            this.scene.environment.mapping = EquirectangularReflectionMapping
+        }
+        return this
+    }
 
-	public addRenderer = (parameters?: WebGLRendererParameters) => {
-		this.renderer = new WebGLRenderer(parameters);
-		this.renderer.outputColorSpace = 'srgb';
-		this.renderer.shadowMap.enabled = true;
-		this.renderer.shadowMap.type = PCFSoftShadowMap;
-		this.renderer.toneMapping = ACESFilmicToneMapping;
-		this.renderer.toneMappingExposure = 0.85;
-		if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement);
-		return this;
-	};
+    public addRenderer = (parameters?: WebGLRendererParameters) => {
+        this.renderer = new WebGLRenderer(parameters)
+        this.renderer.outputColorSpace = 'srgb'
+        this.renderer.shadowMap.enabled = true
+        this.renderer.shadowMap.type = PCFSoftShadowMap
+        this.renderer.toneMapping = ACESFilmicToneMapping
+        this.renderer.toneMappingExposure = 0.85
+        if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement)
+        return this
+    }
 
-	public addSky = () => {
-		this.sky = new Sky();
-		this.sky.scale.setScalar(450000);
-		this.scene.add(this.sky);
-		const effectController = {
-			turbidity: 10,
-			rayleigh: 3,
-			mieCoefficient: 0.005,
-			mieDirectionalG: 0.7,
-			elevation: sunCalculator.calculateSunElevation(),
-			azimuth: 180,
-			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();
+    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
+    }
 
-		sun.setFromSphericalCoords(1, phi, theta);
-		uniforms['sunPosition'].value.copy(sun);
-		return this;
-	};
+    public addGroundPlane = (options?: position) => {
+        const checkerboardTexture = this.createCheckerboardTexture(1024, 2)
+        checkerboardTexture.wrapS = RepeatWrapping
+        checkerboardTexture.wrapT = RepeatWrapping
+        checkerboardTexture.repeat.set(100, 100)
+        const checkerboardMat = new MeshBasicMaterial({
+            map: checkerboardTexture,
+            opacity: 0.1,
+            transparent: true
+        })
 
-	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;
-	};
+        const plane = new PlaneGeometry(400, 400)
 
-	public addGroundPlane = (options?: position) => {
-		var planeMaterial = new MeshStandardMaterial({ color: 0x808080, side: 2, opacity: 0.5 });
-		this.ground = new Mesh(new PlaneGeometry(), planeMaterial);
-		this.ground.rotation.x = -Math.PI / 2;
-		this.ground.scale.setScalar(30);
-		this.ground.position.set(options?.x ?? 0, options?.y ?? 0, options?.z ?? 0);
-		this.ground.receiveShadow = true;
-		this.scene.add(this.ground);
-		return this;
-	};
+        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)
 
-	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;
-	};
+        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)
 
-	public addAmbientLight = (options: light) => {
-		const ambientLight = new AmbientLight(options.color, options.intensity);
-		this.scene.add(ambientLight);
-		return this;
-	};
+        return this
+    }
 
-	public addDirectionalLight = (options: directionalLight) => {
-		const directionalLight = new DirectionalLight(options.color, options.intensity);
-		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);
+    public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
+        this.orbit = new OrbitControls(this.camera, this.renderer.domElement)
+        this.orbit.minDistance = minDistance + (maxDistance - minDistance) / 2
+        this.orbit.maxDistance = maxDistance
+        this.orbit.autoRotate = autoRotate
+        this.orbit.update()
+        this.orbit.minDistance = minDistance
+        return this
+    }
 
-		directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-		this.scene.add(directionalLight);
-		return this;
-	};
+    public addAmbientLight = (options: light) => {
+        const ambientLight = new AmbientLight(options.color, options.intensity)
+        this.scene.add(ambientLight)
+        return this
+    }
 
-	public addGridHelper = (options: gridHelperOptions) => {
-		this.gridHelper = new GridHelper(options.size, options.divisions);
-		this.gridHelper.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-		this.gridHelper.material.opacity = 0.2;
-		this.gridHelper.material.depthWrite = false;
-		this.gridHelper.material.transparent = true;
-		this.scene.add(this.gridHelper);
-		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)
 
-	public addFogExp2 = (color: ColorRepresentation, density?: number) => {
-		this.scene.fog = new FogExp2(color, density);
-		return this;
-	};
+        directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0)
+        this.scene.add(directionalLight)
+        return this
+    }
 
-	public fillParent = () => {
-		const parentElement = this.renderer.domElement.parentElement;
-		if (parentElement) {
-			const width = parentElement.clientWidth;
-			const height = parentElement.clientHeight;
-			this.handleResize(width, height);
-		}
-		return this;
-	};
+    private createCheckerboardTexture = (size: number, squares: number) => {
+        const canvas = document.createElement('canvas')
+        canvas.width = size
+        canvas.height = size
+        const context = canvas.getContext('2d')
 
-	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;
-	};
+        const squareSize = size / squares
 
-	public addRenderCb = (callback: Function) => {
-		this.callback = callback;
-		return this;
-	};
+        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)
+            }
+        }
 
-	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;
-	};
+        const texture = new CanvasTexture(canvas)
+        texture.wrapS = texture.wrapT = RepeatWrapping
+        texture.anisotropy = 16
+        return texture
+    }
 
-	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;
-	};
+    public addFogExp2 = (color: ColorRepresentation, density?: number) => {
+        this.scene.fog = new FogExp2(color, density)
+        return this
+    }
 
-	private setJointValue(jointName: string, angle: number) {
-		if (!this.model) return;
-		if (!this.model.joints[jointName]) return;
-		this.model.joints[jointName].setJointValue(angle);
-	}
+    public fillParent = () => {
+        const parentElement = this.renderer.domElement.parentElement
+        if (parentElement) {
+            const width = parentElement.clientWidth
+            const height = parentElement.clientHeight
+            this.handleResize(width, height)
+        }
+        return this
+    }
 
-	isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed';
+    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
+    }
 
-	highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
-		const traverse = (c: any) => {
-			if (c.type === 'Mesh') {
-				if (revert) {
-					c.material = c.__origMaterial;
-					delete c.__origMaterial;
-				} else {
-					c.__origMaterial = c.material;
-					c.material = material;
-				}
-			}
+    public addRenderCb = (callback: () => void) => {
+        this.callback = callback
+        return this
+    }
 
-			if (c === m || !this.isJoint(c)) {
-				for (let i = 0; i < c.children.length; i++) {
-					const child = c.children[i];
-					if (!child.isURDFCollider) {
-						traverse(c.children[i]);
-					}
-				}
-			}
-		};
-		traverse(m);
-	};
+    public startRenderLoop = () => {
+        this.renderer.setAnimationLoop(() => {
+            this.renderer.render(this.scene, this.camera)
+            this.orbit.update()
+            this.handleRobotShadow()
+            if (this.callback) this.callback()
+            if (!this.liveStreamTexture) return
+        })
+        return this
+    }
 
-	public 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 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
+    }
 
-	public addModel = (model: any) => {
-		this.modelGroup = new Group();
-		this.modelGroup.add(model);
-		this.model = model;
-		this.scene.add(this.modelGroup);
-		return this;
-	};
+    private setJointValue(jointName: string, angle: number) {
+        if (!this.model) return
+        if (!this.model.joints[jointName]) return
+        this.model.joints[jointName].setJointValue(angle)
+    }
 
-	public addDragControl = (updateAngle: any) => {
-		const highlightColor = '#FFFFFF';
-		const highlightMaterial = new MeshPhongMaterial({
-			shininess: 10,
-			color: highlightColor,
-			emissive: highlightColor,
-			emissiveIntensity: 0.25
-		});
+    isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed'
 
-		const dragControls = new PointerURDFDragControls(
-			this.scene,
-			this.camera,
-			this.renderer.domElement
-		);
-		dragControls.updateJoint = (joint: URDFMimicJoint, angle: number) => {
-			this.setJointValue(joint.name, angle);
-			updateAngle(joint.name, angle);
-		};
-		dragControls.onDragStart = () => {
-			this.orbit.enabled = false;
-			this.isDragging = true;
-		};
-		dragControls.onDragEnd = () => {
-			this.orbit.enabled = true;
-			this.isDragging = false;
-		};
-		dragControls.onHover = (joint: URDFMimicJoint) =>
-			this.highlightLinkGeometry(joint, false, highlightMaterial);
-		dragControls.onUnhover = (joint: URDFMimicJoint) =>
-			this.highlightLinkGeometry(joint, true, highlightMaterial);
+    highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
+        const traverse = (c: Object3D) => {
+            if (c.type === 'Mesh') {
+                if (revert) {
+                    c.material = c.__origMaterial
+                    delete c.__origMaterial
+                } else {
+                    c.__origMaterial = c.material
+                    c.material = material
+                }
+            }
 
-		this.renderer.domElement.addEventListener('touchstart', (data) =>
-			dragControls._mouseDown(data.touches[0])
-		);
-		this.renderer.domElement.addEventListener('touchmove', (data) =>
-			dragControls._mouseMove(data.touches[0])
-		);
-		this.renderer.domElement.addEventListener('touchend', (data) =>
-			dragControls._mouseUp(data.touches[0])
-		);
-		return this;
-	};
+            if (c === m || !this.isJoint(c)) {
+                for (let i = 0; i < c.children.length; i++) {
+                    const child = c.children[i]
+                    if (!child.isURDFCollider) {
+                        traverse(c.children[i])
+                    }
+                }
+            }
+        }
+        traverse(m)
+    }
 
-	public toggleFog = () => {
-		this.scene.fog = this.scene.fog ? null : this.fog;
-	};
+    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
+    }
 
-	private handleRobotShadow = () => {
-		if (this.isLoaded) return;
-		const intervalId = setInterval(() => {
-			this.model?.traverse((c) => (c.castShadow = true));
-		}, 10);
-		setTimeout(() => {
-			clearInterval(intervalId);
-		}, 1000);
-		this.isLoaded = true;
-	};
+    public addModel = (model: URDFRobot) => {
+        this.modelGroup = new Group()
+        this.modelGroup.add(model)
+        this.model = model
+        this.scene.add(this.modelGroup)
+        return this
+    }
+
+    public addDragControl = (updateAngle: (angles: Record<string, number>) => void) => {
+        const highlightColor = '#FFFFFF'
+        const highlightMaterial = new MeshPhongMaterial({
+            shininess: 10,
+            color: highlightColor,
+            emissive: highlightColor,
+            emissiveIntensity: 0.9
+        })
+
+        const dragControls = new PointerURDFDragControls(
+            this.scene,
+            this.camera,
+            this.renderer.domElement
+        )
+        dragControls.updateJoint = (joint: URDFMimicJoint, angle: number) => {
+            this.setJointValue(joint.name, angle)
+            updateAngle({ [joint.name]: angle })
+        }
+        dragControls.onDragStart = () => {
+            this.orbit.enabled = false
+            this.isDragging = true
+        }
+        dragControls.onDragEnd = () => {
+            this.orbit.enabled = true
+            this.isDragging = false
+        }
+        dragControls.onHover = (joint: URDFMimicJoint) =>
+            this.highlightLinkGeometry(joint, false, highlightMaterial)
+        dragControls.onUnhover = (joint: URDFMimicJoint) =>
+            this.highlightLinkGeometry(joint, true, highlightMaterial)
+
+        this.renderer.domElement.addEventListener(
+            'touchstart',
+            data => dragControls._mouseDown(data.touches[0]),
+            { passive: true }
+        )
+        this.renderer.domElement.addEventListener(
+            'touchmove',
+            data => dragControls._mouseMove(data.touches[0]),
+            { passive: true }
+        )
+        this.renderer.domElement.addEventListener(
+            'touchend',
+            data => dragControls._mouseUp(data.touches[0]),
+            { passive: true }
+        )
+        return this
+    }
+
+    public toggleFog = () => {
+        this.scene.fog = this.scene.fog ? null : this.fog
+    }
+
+    private handleRobotShadow = () => {
+        if (this.isLoaded) return
+        const intervalId = setInterval(() => this.model?.traverse(c => (c.castShadow = true)), 10)
+        setTimeout(() => clearInterval(intervalId), 1000)
+        this.isLoaded = true
+    }
 }

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

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

app/src/lib/services/index.ts

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

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

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

app/src/lib/stores/analytics.ts

@@ -1,55 +1,69 @@
-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 = {
-	uptime: <number[]>[],
-	free_heap: <number[]>[],
-	total_heap: <number[]>[],
-	used_heap: <number[]>[],
-	min_free_heap: <number[]>[],
-	max_alloc_heap: <number[]>[],
-	fs_used: <number[]>[],
-	fs_total: <number[]>[],
-	core_temp: <number[]>[],
-	cpu0_usage: <number[]>[],
-	cpu1_usage: <number[]>[],
-	cpu_usage: <number[]>[]
-};
-
-const maxAnalyticsData = 100;
-
-function createAnalytics() {
-	const { subscribe, update } = writable(analytics_data);
-
-	return {
-		subscribe,
-		addData: (content: Analytics) => {
-			update((analytics_data) => ({
-				...analytics_data,
-				uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
-				free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(-maxAnalyticsData),
-				total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
-					-maxAnalyticsData
-				),
-				used_heap: [
-					...analytics_data.used_heap,
-					(content.total_heap - content.free_heap) / 1000
-				].slice(-maxAnalyticsData),
-				min_free_heap: [...analytics_data.min_free_heap, content.min_free_heap / 1000].slice(
-					-maxAnalyticsData
-				),
-				max_alloc_heap: [...analytics_data.max_alloc_heap, content.max_alloc_heap / 1000].slice(
-					-maxAnalyticsData
-				),
-				fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(-maxAnalyticsData),
-				fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(-maxAnalyticsData),
-				core_temp: [...analytics_data.core_temp, content.core_temp].slice(-maxAnalyticsData),
-				cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(-maxAnalyticsData),
-				cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(-maxAnalyticsData),
-				cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
-			}));
-		}
-	};
+const analytics_data = {
+    uptime: <number[]>[],
+    free_heap: <number[]>[],
+    total_heap: <number[]>[],
+    used_heap: <number[]>[],
+    min_free_heap: <number[]>[],
+    max_alloc_heap: <number[]>[],
+    fs_used: <number[]>[],
+    fs_total: <number[]>[],
+    core_temp: <number[]>[],
+    cpu0_usage: <number[]>[],
+    cpu1_usage: <number[]>[],
+    cpu_usage: <number[]>[]
 }
 
-export const analytics = createAnalytics();
+const maxAnalyticsData = 100
+
+function createAnalytics() {
+    const { subscribe, update } = writable(analytics_data)
+
+    return {
+        subscribe,
+        addData: (content: Analytics) => {
+            update(analytics_data => ({
+                ...analytics_data,
+                uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
+                free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(
+                    -maxAnalyticsData
+                ),
+                total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
+                    -maxAnalyticsData
+                ),
+                used_heap: [
+                    ...analytics_data.used_heap,
+                    (content.total_heap - content.free_heap) / 1000
+                ].slice(-maxAnalyticsData),
+                min_free_heap: [
+                    ...analytics_data.min_free_heap,
+                    content.min_free_heap / 1000
+                ].slice(-maxAnalyticsData),
+                max_alloc_heap: [
+                    ...analytics_data.max_alloc_heap,
+                    content.max_alloc_heap / 1000
+                ].slice(-maxAnalyticsData),
+                fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(
+                    -maxAnalyticsData
+                ),
+                fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(
+                    -maxAnalyticsData
+                ),
+                core_temp: [...analytics_data.core_temp, content.core_temp].slice(
+                    -maxAnalyticsData
+                ),
+                cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(
+                    -maxAnalyticsData
+                ),
+                cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(
+                    -maxAnalyticsData
+                ),
+                cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
+            }))
+        }
+    }
+}
+
+export const analytics = createAnalytics()

app/src/lib/stores/application.ts

@@ -0,0 +1,67 @@
+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'
+
+export interface WidgetConfig {
+    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>
+}
+
+export const isWidgetConfig = (
+    widget: WidgetConfig | WidgetContainerConfig
+): widget is WidgetConfig => 'component' in widget
+
+export const WidgetComponents = {
+    Visualization,
+    Stream,
+    ChartWidget
+}
+
+interface View {
+    name: string
+    content: WidgetContainerConfig
+}
+
+const defaultViews: View[] = [
+    {
+        name: '3D representation',
+        content: {
+            id: 'root',
+            layout: 'column',
+            widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
+        }
+    },
+    {
+        name: 'Stream',
+        content: {
+            id: 'root',
+            layout: 'column',
+            widgets: [{ id: 2, component: 'Stream' }]
+        }
+    },
+    {
+        name: 'Split screen',
+        content: {
+            id: 'root',
+            widgets: [
+                { id: 2, component: 'Stream' },
+                { id: 2, component: 'Visualization', props: { debug: true } }
+            ]
+        }
+    }
+]
+
+export const views: Writable<View[]> = persistentStore('views', defaultViews)
+
+export const selectedView = persistentStore('selected_view', get(views)[0].name)

app/src/lib/stores/featureFlags.ts

@@ -0,0 +1,64 @@
+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 | string>>
+
+export function useFeatureFlags() {
+    if (!featureFlagsStore) {
+        featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {})
+
+        api.get<Record<string, boolean>>('/api/features').then(result => {
+            if (result.isOk()) featureFlagsStore.set(result.inner)
+            else {
+                notifications.error('Feature flag could not be fetched', 2500)
+            }
+        })
+    }
+
+    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

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

app/src/lib/stores/gamepad.ts

@@ -0,0 +1,87 @@
+import { readable, derived } from 'svelte/store'
+
+export type GamepadState = {
+    available: boolean
+    gamepads: Gamepad[]
+}
+
+const DEADZONE = 0.15
+const dz = (x: number) => {
+    const a = Math.abs(x)
+    if (a < DEADZONE) return 0
+    return ((a - DEADZONE) / (1 - DEADZONE)) * Math.sign(x)
+}
+
+let raf = 0
+let running = false
+
+export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
+    const update = () => {
+        const pads = navigator.getGamepads?.() ?? []
+        const list = Array.from(pads)
+            .map(p => p || null)
+            .filter(Boolean) as Gamepad[]
+        set({ available: 'getGamepads' in navigator, gamepads: list })
+        raf = requestAnimationFrame(update)
+    }
+
+    const 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', onConnect)
+        window.removeEventListener('gamepaddisconnected', onDisconnect)
+        document.removeEventListener('visibilitychange', onVis)
+    }
+})
+
+export const gamepad = derived(gamepads, s =>
+    s.available && s.gamepads.length ? s.gamepads[0] : null
+)
+
+export const hasGamepad = derived(gamepads, s => s.available && s.gamepads.length > 0)
+
+export const gamepadAxes = derived(gamepad, g => (g ? g.axes.map(dz) : [0, 0, 0, 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,36 +1,40 @@
-import { type IMU } from '$lib/types/models';
-import { writable } from 'svelte/store';
+import { writable } from 'svelte/store'
+import type { IMUMsg } from '$lib/types/models'
 
-let imu_data = {
-	x: <number[]>[],
-	y: <number[]>[],
-	z: <number[]>[],
-	imu_temp: <number[]>[],
-	altitude: <number[]>[],
-	pressure: <number[]>[],
-	bmp_temp: <number[]>[]
-};
+const maxIMUData = 100
 
-const maxIMUData = 100;
+export const imu = (() => {
+    const { subscribe, update } = writable({
+        x: [] as number[],
+        y: [] as number[],
+        z: [] as number[],
+        heading: [] as number[],
+        altitude: [] as number[],
+        pressure: [] as number[],
+        bmp_temp: [] as number[]
+    })
 
-function createIMU() {
-	const { subscribe, update } = writable(imu_data);
+    const addData = (content: IMUMsg) => {
+        update(data => {
+            if (content.imu && content.imu[4]) {
+                data.x = [...data.x, content.imu[0]].slice(-maxIMUData)
+                data.y = [...data.y, content.imu[1]].slice(-maxIMUData)
+                data.z = [...data.z, content.imu[2]].slice(-maxIMUData)
+            }
 
-	return {
-		subscribe,
-		addData: (content: IMU) => {
-			update((imu_data) => ({
-				...imu_data,
-				x: [...imu_data.x, content.x].slice(-maxIMUData),
-				y: [...imu_data.y, content.y].slice(-maxIMUData),
-				z: [...imu_data.z, content.z].slice(-maxIMUData),
-				imu_temp: [...imu_data.imu_temp, content.imu_temp].slice(-maxIMUData),
-				altitude: [...imu_data.altitude, content.altitude].slice(-maxIMUData),
-				pressure: [...imu_data.pressure, content.pressure].slice(-maxIMUData),
-				bmp_temp: [...imu_data.bmp_temp, content.bmp_temp].slice(-maxIMUData)
-			}));
-		}
-	};
-}
+            if (content.mag && content.mag[4]) {
+                data.heading = [...data.heading, content.mag[3]].slice(-maxIMUData)
+            }
 
-export const imu = createIMU();
+            if (content.bmp && content.bmp[3]) {
+                data.pressure = [...data.pressure, content.bmp[0]].slice(-maxIMUData)
+                data.altitude = [...data.altitude, content.bmp[1]].slice(-maxIMUData)
+                data.bmp_temp = [...data.bmp_temp, content.bmp[2]].slice(-maxIMUData)
+            }
+
+            return data
+        })
+    }
+
+    return { subscribe, addData }
+})()

app/src/lib/stores/index.ts

@@ -1,4 +1,9 @@
-export * from './socket-store';
-export * from './logging-store';
-export * from './model-store';
-export * from './socket';
+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

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

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,37 +1,54 @@
-import type { ControllerInput } from '$lib/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', []);
+export const jointNames = persistentStore('joint_names', <string[]>[])
 
-export const model = writable();
+export const model = writable()
 
-export const modes = ['deactivated', 'idle', 'calibration', 'rest', 'stand', 'crawl', 'walk'] as const;
+export const modes = ['deactivated', 'idle', 'calibration', 'rest', 'stand', 'walk'] 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
 }
 
-export const mode: Writable<ModesEnum> = writable(ModesEnum.Walk);
+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
-});
+    left: { x: 0, y: 0 },
+    right: { x: 0, y: 0 },
+    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,30 +1,27 @@
-import { writable, type Writable } from 'svelte/store';
-import { type angles } from '$lib/models';
+import { writable, type Writable } from 'svelte/store'
+import { type angles } from '$lib/types/models'
 
 export const servoAnglesOut: Writable<number[]> = writable([
-	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-]);
+    0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
+])
 export const servoAngles: Writable<number[]> = writable([
-	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-]);
-export const logs = writable([] as string[]);
-export const battery = writable({});
-export const mpu = writable({ heading: 0 });
-export const sonar = writable([0, 0]);
-export const distances = writable({});
+    0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
+])
+export const logs = writable([] as string[])
+export const mpu = writable({ heading: 0 })
+export const sonar = writable([0, 0])
+export const distances = writable({})
 
 export interface socketDataCollection {
-	angles: Writable<angles>;
-	logs: Writable<string[]>;
-	battery: Writable<unknown>;
-	mpu: Writable<unknown>;
-	distances: Writable<unknown>;
+    angles: Writable<angles>
+    logs: Writable<string[]>
+    mpu: Writable<unknown>
+    distances: Writable<unknown>
 }
 
 export const socketData = {
-	angles: servoAngles,
-	logs,
-	battery,
-	mpu,
-	distances
-};
+    angles: servoAngles,
+    logs,
+    mpu,
+    distances
+}

app/src/lib/stores/socket.ts

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

app/src/lib/stores/telemetry.ts

@@ -1,45 +1,35 @@
-import type { Battery, 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 = {
-	rssi: {
-		rssi: 0
-	},
-	battery: {
-		voltage: 100,
-		current: false
-	},
-	download_ota: {
-		status: 'none',
-		progress: 0,
-		error: ''
-	}
-};
-
-function createTelemetry() {
-	const { subscribe, set, update } = writable(telemetry_data);
-
-	return {
-		subscribe,
-		setRSSI: (data: number) => {
-			update((telemetry_data) => ({
-				...telemetry_data,
-				rssi: { rssi: data }
-			}));
-		},
-		setBattery: (data: Battery) => {
-			update((telemetry_data) => ({
-				...telemetry_data,
-				battery: { voltage: data.voltage, current: data.current }
-			}));
-		},
-		setDownloadOTA: (data: DownloadOTA) => {
-			update((telemetry_data) => ({
-				...telemetry_data,
-				download_ota: { status: data.status, progress: data.progress, error: data.error }
-			}));
-		}
-	};
+const telemetry_data = {
+    rssi: {
+        rssi: 0
+    },
+    download_ota: {
+        status: 'none',
+        progress: 0,
+        error: ''
+    }
 }
 
-export const telemetry = createTelemetry();
+function createTelemetry() {
+    const { subscribe, update } = writable(telemetry_data)
+
+    return {
+        subscribe,
+        setRSSI: (data: number) => {
+            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()

app/src/lib/stores/user.ts

@@ -1,55 +0,0 @@
-import { writable } from 'svelte/store';
-import { goto } from '$app/navigation';
-import { jwtDecode } from 'jwt-decode';
-
-export type userProfile = {
-	username: string;
-	admin: boolean;
-	bearer_token: string;
-};
-
-type decodedJWT = {
-	username: string;
-	admin: boolean;
-};
-
-let empty = {
-	username: '',
-	admin: false,
-	bearer_token: ''
-};
-
-function createStore() {
-	const { subscribe, set } = writable(empty);
-
-	// retrieve store from sessionStorage / localStorage if available
-	const userdata = localStorage.getItem('user');
-	if (userdata) {
-		set(JSON.parse(userdata));
-	}
-
-	return {
-		subscribe,
-		init: (access_token: string) => {
-			const decoded: decodedJWT = jwtDecode(access_token);
-			const userdata = {
-				bearer_token: access_token,
-				username: decoded.username,
-				admin: decoded.admin
-			};
-			set(userdata);
-			// persist store in sessionStorage / localStorage
-			localStorage.setItem('user', JSON.stringify(userdata));
-		},
-		invalidate: () => {
-			console.log('Log out user');
-			set(empty);
-			// remove localStorage "user"
-			localStorage.removeItem('user');
-			// redirect to login page
-			goto('/');
-		}
-	};
-}
-
-export const user = createStore();

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

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

app/src/lib/types/models.ts

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

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

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

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

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

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

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

app/src/lib/utilities/index.ts

@@ -1,7 +1,8 @@
-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 './location-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 './string-utilities'
+export * from './color-utilities'

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

@@ -1,9 +0,0 @@
-export const hostname = 'localhost'; //window.location.hostname;
-
-export const isSecure = true; // window.location.protocol === 'https:';
-
-export const location = 'localhost:5173'; //window.location; //import.meta.env.VITE_API_URL.replace('hostname', hostname);
-
-const socketScheme = isSecure ? 'wss://' : 'ws://';
-
-export const socketLocation = socketScheme + location; // import.meta.env.VITE_SOCKET_URL.replace('hostname', hostname);

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

@@ -1,63 +1,96 @@
-import { Color, LoaderUtils, Vector3 } from 'three';
-import URDFLoader, { type URDFRobot } from 'urdf-loader';
-import { XacroLoader } from 'xacro-parser';
-import { Result } from '$lib/utilities';
+import { Color, LoaderUtils, Vector3 } from 'three'
+import URDFLoader, { type URDFRobot } from 'urdf-loader'
+import { XacroLoader } from 'xacro-parser'
+import { Result } from '$lib/utilities'
+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;
+let model_xml: XMLDocument
 
-export const loadModelAsync = async (
-	url: string
-): Promise<Result<[URDFRobot, string[]], string>> => {
-	return new Promise((resolve, reject) => {
-		const xacroLoader = new XacroLoader();
-		const urdfLoader = new URDFLoader();
-		urdfLoader.workingPath = LoaderUtils.extractUrlBase(url);
+export const populateModelCache = async () => {
+    await cacheModelFiles()
+    const modelRes = await loadModel(get(currentVariant).model)
+    if (modelRes.isOk()) {
+        const [urdf, JOINT_NAME] = modelRes.inner
+        jointNames.set(JOINT_NAME)
+        model.set(urdf)
+    } else {
+        console.error(modelRes.inner, { exception: modelRes.exception })
+    }
+}
 
-		xacroLoader.load(
-			url,
-			async (xml) => {
-				model_xml = xml;
-				try {
-					const model = urdfLoader.parse(xml);
-					model.rotation.x = -Math.PI / 2;
-					model.rotation.z = Math.PI / 2;
-					model.traverse((c) => (c.castShadow = true));
-					model.updateMatrixWorld(true);
-					model.scale.setScalar(10);
-					const joints = Object.entries(model.joints)
-						.filter((joint) => joint[1].jointType !== 'fixed')
-						.map((joint) => joint[0]);
+export const cacheModelFiles = async () => {
+    const data = await fetch(get(currentVariant).stl)
 
-					resolve(Result.ok([model, joints]));
-				} catch (error) {
-					resolve(Result.err('Failed to load model', error));
-				}
-			},
-			(error) => resolve(Result.err('Failed to load model', error))
-		);
-	});
-};
+    const files = uzip.parse(await data.arrayBuffer())
 
-export const toeWorldPositions = (robot: URDFRobot) => {
-	const toe_positions: Vector3[] = [];
-	robot.traverse((child) => {
-		if (child.name.includes('toe') && !child.name.includes('_link')) {
-			const worldPosition = new Vector3();
-			child.getWorldPosition(worldPosition);
-			toe_positions.push(worldPosition);
-		}
-	});
-	return toe_positions;
-};
+    for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
+        const normalizedPath = path.startsWith('/') ? path : '/' + path
+        const resolvedUrl = resolve(normalizedPath as any)
+        fileService?.saveFile(resolvedUrl, data)
+        fileService?.saveFile(normalizedPath, data)
+    }
+}
 
-export const footColor = () => {
-	const colorElem = model_xml.querySelector('material[name=foot_color] > color') as Element;
-	const colorAttrStr = colorElem.getAttribute('rgba') as string;
-	const colorStr = colorAttrStr
-		.split(' ')
-		.slice(0, 3)
-		.map((val) => Math.floor(+val * 255))
-		.join(', ');
+export const loadModel = async (url: string): Promise<Result<[URDFRobot, string[]], string>> => {
+    const urdfLoader = new URDFLoader()
 
-	return new Color(`rgb(${colorStr})`);
-};
+    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')
+    }
+
+    return new Promise(resolve => {
+        model_xml = xml
+        try {
+            const model = urdfLoader.parse(xml)
+            setupRobot(model)
+            const joints = Object.entries(model.joints)
+                .filter(joint => joint[1].jointType !== 'fixed')
+                .map(joint => joint[0])
+
+            resolve(Result.ok([model, joints]))
+        } catch (error) {
+            resolve(Result.err('Failed to load model', error))
+        }
+    })
+}
+
+const loadXacro = async (url: string): Promise<XMLDocument> =>
+    new Promise((resolve, reject) => {
+        new XacroLoader().load(url, resolve, reject)
+    })
+
+function setupRobot(robot: URDFRobot) {
+    robot.rotation.x = -Math.PI / 2
+    robot.rotation.z = Math.PI / 2
+    robot.scale.setScalar(10)
+    robot.traverse(c => (c.castShadow = true))
+    robot.updateMatrixWorld(true)
+}
+
+export function getToeWorldPositions(robot: URDFRobot): Vector3[] {
+    const toes: Vector3[] = []
+    robot.traverse(c => {
+        if (c.name.includes('toe') && !c.name.includes('_link'))
+            toes.push(c.getWorldPosition(new Vector3()))
+    })
+    return toes
+}
+
+export const extractFootColor = () => {
+    const colorElem = model_xml.querySelector('material[name=foot_color] > color') as Element
+    const colorAttrStr = colorElem.getAttribute('rgba') as string
+    const colorStr = colorAttrStr
+        .split(' ')
+        .slice(0, 3)
+        .map(val => Math.floor(+val * 255))
+        .join(', ')
+
+    return new Color(`rgb(${colorStr})`)
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,16 +1,16 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
+import { writable } from 'svelte/store'
+import { browser } from '$app/environment'
 
-export const isEmbeddedApp = import.meta.env.VITE_EMBEDDED_BUILD === 'true';
+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>()
 
-export const persistentStore = (key: string, initialValue: any) => {
-	const savedValue = browser ? JSON.parse(localStorage.getItem(key) as string) : null;
-	const data = savedValue !== null ? savedValue : initialValue;
-	const store = writable(data);
+    store.subscribe(value => {
+        if (browser) localStorage.setItem(key, JSON.stringify(value))
+    })
 
-	store.subscribe((value) => {
-		browser && localStorage.setItem(key, JSON.stringify(value));
-	});
+    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>
-</div>
+    <h1>{page.status} {page.error?.message}</h1>
+    <span>Go to <a class="btn btn-primary" href={resolve('/')}>Home page</a></span>
+</div>