🪴 Adds webserial lidar support

.github/workflows/embedded-build.yml

@@ -2,19 +2,20 @@ 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
@@ -27,8 +28,8 @@ jobs:
 
       - uses: actions/setup-python@v4
         with:
-          python-version: "3.x"
+          python-version: '3.x'
-      - run: pip install -r esp32/scripts/requirements.txt
+      - run: pip install -r ./scripts/requirements.txt
       - name: Install PlatformIO Core
         run: pip install --upgrade platformio
 
@@ -36,7 +37,7 @@ jobs:
         run: pio run
 
       - name: Upload Artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
         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: 9
+        version: 8
 
     - 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,9 +1,4 @@
 .vscode/.browse.c_cpp.db*
 .vscode/c_cpp_properties.json
 .vscode/launch.json
-.vscode/ipch
+.vscode/ipch
-
-__pycache__/
-*.py[cod]
-*$py.class
-.pio

app/.prettierrc

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

app/README.md

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

app/env.d.ts

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

app/package.json

@@ -1,67 +1,61 @@
 {
-  "name": "spot_micro_controller",
+	"name": "spot_micro_controller",
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "dev": "vite dev --host",
+		"dev": "vite dev --host",
-    "build": "vite build",
+		"build": "vite build",
-    "build:embedded": "cross-env VITE_USE_HOST_NAME=true vite build",
+		"preview": "vite preview",
-    "preview": "vite preview",
+		"test": "npm run test:integration && npm run test:unit",
-    "test": "pnpm run test:integration && pnpm run test:unit",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
-    "lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
-    "format": "prettier --write .",
+		"test:integration": "playwright test",
-    "test:integration": "playwright test",
+		"test:unit": "vitest"
-    "test:unit": "vitest"
+	},
-  },
+	"devDependencies": {
-  "devDependencies": {
+		"@iconify-json/mdi": "^1.1.64",
-    "@iconify-json/mdi": "^1.1.64",
+		"@iconify-json/tabler": "^1.1.109",
-    "@iconify-json/tabler": "^1.1.109",
+		"@playwright/test": "^1.28.1",
-    "@playwright/test": "^1.49.1",
+		"@sveltejs/adapter-auto": "^3.0.0",
-    "@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.27",
+		"@sveltejs/kit": "^2.5.5",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/eslint": "^8.56.0",
+		"@types/eslint": "^8.56.0",
-    "@types/three": "^0.162.0",
+		"@types/three": "^0.162.0",
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
+		"@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
+		"@typescript-eslint/parser": "^7.0.0",
-    "autoprefixer": "^10.4.19",
+		"autoprefixer": "^10.4.19",
-    "eslint": "^8.56.0",
+		"eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
+		"eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
+		"eslint-plugin-svelte": "^2.35.1",
-    "jsdom": "^24.0.0",
+		"jsdom": "^24.0.0",
-    "prettier": "^3.1.1",
+		"postcss": "^8.4.38",
-    "prettier-plugin-svelte": "^3.2.6",
+		"prettier": "^3.1.1",
-    "svelte": "^5.0.0",
+		"prettier-plugin-svelte": "^3.1.2",
-    "svelte-check": "^4.0.0",
+		"svelte": "^4.2.7",
-    "svelte-focus-trap": "^1.2.0",
+		"svelte-check": "^3.6.0",
-    "tailwindcss": "^4.0.12",
+		"svelte-focus-trap": "^1.2.0",
-    "tslib": "^2.6.1",
+		"tailwindcss": "^3.4.3",
-    "typescript": "^5.5.0",
+		"tslib": "^2.6.1",
-    "unplugin-icons": "^0.18.5",
+		"typescript": "^5.1.6",
-    "vite": "^6.2.1",
+		"unplugin-icons": "^0.18.5",
-    "vitest": "^1.2.0"
+		"vite": "^5.0.3",
-  },
+		"vitest": "^1.2.0"
-  "type": "module",
+	},
-  "dependencies": {
+	"type": "module",
-    "@niku/vite-env-caster": "^1.0.2",
+	"dependencies": {
-    "@sveltejs/adapter-auto": "^4.0.0",
+		"chart.js": "^4.4.2",
-    "@tailwindcss/vite": "^4.0.12",
+		"compare-versions": "^6.1.0",
-    "chart.js": "^4.4.2",
+		"daisyui": "^4.10.2",
-    "compare-versions": "^6.1.0",
+		"jwt-decode": "^4.0.0",
-    "cross-env": "^7.0.3",
+		"nipplejs": "^0.10.1",
-    "daisyui": "^5.0.0",
+		"svelte-dnd-list": "^0.1.8",
-    "jwt-decode": "^4.0.0",
+		"svelte-modals": "^1.3.0",
-    "nipplejs": "^0.10.1",
+		"three": "^0.162.0",
-    "svelte-dnd-list": "^0.1.8",
+		"urdf-loader": "^0.12.1",
-    "svelte-modals": "^2.0.0",
+		"uzip": "^0.20201231.0",
-    "three": "^0.162.0",
+		"xacro-parser": "^0.3.9"
-    "urdf-loader": "^0.12.1",
+	}
-    "uzip": "^0.20201231.0",
+}
-    "xacro-parser": "^0.3.9",
-    "@types/msgpack-lite": "^0.1.11",
-    "msgpack-lite": "^0.1.26"
-  },
-  "packageManager": "pnpm@9.3.0"
-}

app/postcss.config.js

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

app/src/app.css

@@ -1,31 +1,9 @@
-@import 'tailwindcss';
+@tailwind base;
-@plugin "daisyui";
+@tailwind components;
+@tailwind utilities;
 
-@plugin "daisyui" {
+#nipple_0_0, #nipple_1_1 {
-    themes:
+    z-index: 10!important;
-        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);
-}
-
-#nipple_0_0,
-#nipple_1_1 {
-    z-index: 10 !important;
 }
 
 #three-gui-panel {
@@ -37,4 +15,4 @@
     #three-gui-panel {
         top: 48px;
     }
-}
+}

app/src/app.html

@@ -3,9 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/logo512.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<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">

app/src/lib/DaisyUiHelper.ts

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

app/src/lib/components/BatteryIndicator.svelte

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

app/src/lib/components/ConfirmDialog.svelte

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

app/src/lib/components/GithubUpdateDialog.svelte

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

app/src/lib/components/InfoDialog.svelte

@@ -1,51 +1,42 @@
 <script lang="ts">
-    import { focusTrap } from 'svelte-focus-trap';
+	import { closeModal } from 'svelte-modals';
-    import { fly } from 'svelte/transition';
+	import { focusTrap } from 'svelte-focus-trap';
-    import { Check } from './icons';
+	import { fly } from 'svelte/transition';
-    import { exitBeforeEnter } from 'svelte-modals';
+	import Check from '~icons/tabler/check';
 
-    // provided by <Modals />
+	// provided by <Modals />
+	export let isOpen: boolean;
 
-    interface Props {
+	export let title: string;
-        isOpen: boolean;
+	export let message: string;
-        title: string;
+	export let onDismiss: any;
-        message: string;
+	export let dismiss = { label: 'Dismiss', icon: Check };
-        onDismiss: any;
-        dismiss?: any;
-    }
-
-    let {
-        isOpen,
-        title,
-        message,
-        onDismiss,
-        dismiss = { label: 'Dismiss', icon: Check }
-    }: Props = $props();
 </script>
 
 {#if isOpen}
-    <div
+	<div
-        role="dialog"
+		role="dialog"
-        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-        transition:fly={{ y: 50 }}
+		transition:fly={{ y: 50 }}
-        use:exitBeforeEnter
+		on:introstart
-        use:focusTrap
+		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"
+		<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>
+			<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-            <p class="text-base-content mb-1 text-start">{message}</p>
+			<div class="divider my-2" />
-            <div class="divider my-2"></div>
+			<p class="text-base-content mb-1 text-start">{message}</p>
-            <div class="flex justify-end gap-2">
+			<div class="divider my-2" />
-                <button
+			<div class="flex justify-end gap-2">
-                    class="btn btn-warning text-warning-content inline-flex items-center"
+				<button
-                    onclick={onDismiss}
+					class="btn btn-warning text-warning-content inline-flex items-center"
-                >
+					on:click={onDismiss}
-                    <dismiss.icon class="mr-2 h-5 w-5" /><span>{dismiss.label}</span>
+					><svelte:component this={dismiss.icon} class="mr-2 h-5 w-5" /><span>{dismiss.label}</span
-                </button>
+					></button
-            </div>
+				>
-        </div>
+			</div>
-    </div>
+		</div>
+	</div>
 {/if}

app/src/lib/components/InputPassword.svelte

@@ -0,0 +1,60 @@
+<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/Lidar.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+    import { lidar, type LidarPoint } from '$lib/stores/lidar'
+
+    function getIntersection(angle:number, size:number):number {
+            const sinAngle = Math.sin(angle);
+            const cosAngle = Math.cos(angle);
+
+            let x, y;
+            if (Math.abs(cosAngle) > Math.abs(sinAngle)) {
+                x = size * Math.sign(cosAngle);
+                y = x * sinAngle / cosAngle;
+            } else {
+                y = size * Math.sign(sinAngle);
+                x = y * cosAngle / sinAngle;
+            }
+
+            return Math.sqrt(x**2 + y**2);
+        }
+
+
+    let canvas:HTMLCanvasElement
+    let ctx
+
+    const DEG2RAD = 0.017453292519943;
+
+    onMount(() => {
+        ctx = canvas.getContext("2d")
+        resize()      
+        lidar.subscribe(lidar => {
+            draw(lidar.points)
+        })
+    })
+
+    const draw = (points:LidarPoint[]) => {
+        if(!points) return
+        const centerX = canvas.width / 2
+        const centerY = canvas.height / 2
+        
+        const scale = 0.01//Math.max(centerX, centerY) / Math.max(...points.map((point) => point.distance))
+
+        if (!ctx) return
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (let i = 0; i < points.length; i++){
+            const angle = points[i].angle
+            const distance = points[i].distance
+            const quality = points[i].quality
+
+            const endX = centerX + (distance * scale) * Math.cos(angle * DEG2RAD);
+            const endY = centerY - (distance * scale) * Math.sin(angle * DEG2RAD);
+
+            ctx.beginPath();
+            ctx.moveTo(centerX, centerY);
+            ctx.lineTo(endX, endY);
+            ctx.strokeStyle = "grey"
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.arc(endX, endY, 3, 0, Math.PI * 2);
+            ctx.fillStyle = "#1bfc06"
+            ctx.fill();
+        }
+    }
+
+    const resize = () => {
+        const parentElement = canvas.parentElement;
+		if (parentElement) {
+			canvas.width = parentElement.clientWidth
+            canvas.height = parentElement.clientHeight
+		}
+    }
+
+</script>
+
+<svelte:window on:resize={resize}></svelte:window>
+
+<canvas bind:this={canvas} class="w-full h-full"></canvas>

app/src/lib/components/OrientationIndicator.svelte

@@ -1,78 +0,0 @@
-<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 = $state()
-  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

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

app/src/lib/components/Spinner.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { Loader } from "./icons";
+	import Loader from '~icons/tabler/loader-2';
-
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center p-6">

app/src/lib/components/StatusItem.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
-
-  const {
-    icon,
-    title,
-    description = '',
-    variant = 'primary',
-    class: klass = '',
-    children = null
-  } = $props<{
-    icon?: any
-    title: string
-    description?: string | number
-    variant?: Variant
-    class?: string
-    children?: () => any
-  }>()
-
-  const Icon = $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,17 +1,21 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte';
+	import { user } from '$lib/stores/user';
-    import { location } from '$lib/stores';
+	import { onDestroy } from 'svelte';
 
-    let source = $state(`${$location}/api/camera/stream`);
+	const ws_token = `?access_token=${$user.bearer_token}`
 
-    onDestroy(() => (source = '#'));
+    let source = "/api/camera/stream"+ ws_token;
+
+	onDestroy(() => {
+		source = '#';
+	});
 </script>
 
 <div class="w-full h-full">
-    <img
+	<img
-        src={source}
+		src={source}
-        class="absolute object-cover blur-3xl w-full h-full -z-10"
+		class="absolute object-cover blur-3xl w-full h-full -z-10"
-        alt="Live stream is down"
+		alt="Live stream is down"
-    />
+	/>
-    <img src={source} class="object-contain w-full h-full" 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

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

app/src/lib/components/TopBar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-    import {Hamburger} from '../icons'
+    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="/">
-            <Hamburger class="h-8 w-8"/>
+            <svelte:component this={MdiHamburgerMenu} class="h-8 w-8"/>
         </a>
     </div>
 </div>

app/src/lib/components/UpdateIndicator.svelte

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

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

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

@@ -1,26 +0,0 @@
-<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: any) => value = e.target.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

@@ -1,34 +0,0 @@
-<script lang="ts">
-  interface Props {
-    min?: number
-    max?: number
-    step?: number
-    value?: any
-    oninput?: any
-  }
-
-  let {
-    min = 0,
-    max = 100,
-    step = 1,
-    value = $bindable((max - min) / 2),
-    ...rest
-  }: Props = $props()
-</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

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

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

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

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

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { Github } from "../icons";
-
-	interface Props {
-		github: any;
-	}
-
-	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

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

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

@@ -1,189 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/state'
-  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 appEnv from 'app-env'
-
-  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 }
-
-  type menuItem = {
-    title: string
-    icon: ConstructorOfATypedSvelteComponent
-    href?: string
-    feature: boolean
-    active?: boolean
-    submenu?: menuItem[]
-  }
-
-  let menuItems = $state<menuItem[]>([])
-
-  $effect(() => {
-    menuItems = [
-      {
-        title: 'Connection',
-        icon: WiFi,
-        href: '/connection',
-        feature: !appEnv.VITE_USE_HOST_NAME
-      },
-      {
-        title: 'Controller',
-        icon: MdiController,
-        href: '/controller',
-        feature: true
-      },
-      {
-        title: 'Peripherals',
-        icon: Devices,
-        feature: true,
-        submenu: [
-          {
-            title: 'I2C',
-            icon: Connection,
-            href: '/peripherals/i2c',
-            feature: true
-          },
-          {
-            title: 'Camera',
-            icon: Camera,
-            href: '/peripherals/camera',
-            feature: $features.camera
-          },
-          {
-            title: 'Servo',
-            icon: MotorOutline,
-            href: '/peripherals/servo',
-            feature: true
-          },
-          {
-            title: 'IMU',
-            icon: Rotate3d,
-            href: '/peripherals/imu',
-            feature: $features.imu || $features.mag || $features.bmp
-          }
-        ]
-      },
-      {
-        title: 'WiFi',
-        icon: WiFi,
-        feature: true,
-        submenu: [
-          {
-            title: 'WiFi Station',
-            icon: Router,
-            href: '/wifi/sta',
-            feature: true
-          },
-          {
-            title: 'Access Point',
-            icon: AP,
-            href: '/wifi/ap',
-            feature: true
-          },
-          {
-            title: 'mDNS',
-            icon: DNS,
-            href: '/wifi/mdns',
-            feature: true
-          }
-        ]
-      },
-      {
-        title: 'System',
-        icon: Settings,
-        feature: true,
-        submenu: [
-          {
-            title: 'System Status',
-            icon: Health,
-            href: '/system/status',
-            feature: true
-          },
-          {
-            title: 'File System',
-            icon: Folder,
-            href: '/system/filesystem',
-            feature: true
-          },
-          {
-            title: 'System Metrics',
-            icon: Metrics,
-            href: '/system/metrics',
-            feature: true
-          },
-          {
-            title: 'Firmware Update',
-            icon: Update,
-            href: '/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: any) => {
-    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

@@ -1,48 +0,0 @@
-<script lang="ts">
-  import MenuList from './MenuList.svelte'
-  type MenuItem = {
-    title: string
-    icon: ConstructorOfATypedSvelteComponent
-    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, i (menuItem.title)}
-    {#if menuItem.feature}
-      <li>
-        {#if menuItem.submenu}
-          <details open={menuItem.submenu.some(subItem => subItem.active)}>
-            <summary class="font-bold">
-              <menuItem.icon class="h-6 w-6" />
-              {menuItem.title}
-            </summary>
-            <div class="pl-4">
-              <MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
-            </div>
-          </details>
-        {:else}
-          <a
-            href={menuItem.href}
-            class="font-bold"
-            class:bg-base-100={menuItem.active}
-            class:text-lg={level === 0}
-            class:text-md={level === 1}
-            onclick={() => selectMenuItem(menuItem.title)}>
-            <menuItem.icon class="h-6 w-6" />
-            {menuItem.title}
-          </a>
-        {/if}
-      </li>
-    {/if}
-  {/each}
-</ul>

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

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

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

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

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

@@ -1,9 +0,0 @@
-<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/UpdateIndicator.svelte

@@ -1,111 +0,0 @@
-<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) === 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)
-                ) {
-                    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

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

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

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

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

@@ -1,103 +0,0 @@
-<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 = $state();
-	let chart: Chart;
-
-	interface Props {
-		label: any;
-		data: number[];
-		title: any;
-	}
-
-	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

@@ -1,20 +0,0 @@
-<script lang="ts">
-    interface Props {
-        options?: string[];
-        selectedOption?: string;
-        change: () => void;
-        [key: string]: any;
-    }
-
-    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,447 +1,242 @@
-import type { body_state_t } from './kinematic'
+import type { body_state_t } from './kinematic';
-import Kinematic from './kinematic'
+import { fromInt8 } from './utilities';
-import { fromInt8 } from './utilities'
 
-const { sin } = Math
+const { sin } = Math;
 
 export interface gait_state_t {
-  step_height: number
+	step_height: number;
-  step_x: number
+	step_x: number;
-  step_z: number
+	step_z: number;
-  step_angle: number
+	step_angle: number;
-  step_velocity: number
+	step_velocity: number;
-  step_depth: number
+	step_depth: number;
 }
 
 export interface ControllerCommand {
-  stop: number
+	stop: number;
-  lx: number
+	lx: number;
-  ly: number
+	ly: number;
-  rx: number
+	rx: number;
-  ry: number
+	ry: number;
-  h: number
+	h: number;
-  s: number
+	s: number;
-  s1: number
 }
 
 export abstract class GaitState {
-  protected abstract name: string
+	protected abstract name: string;
 
-  protected dt = 0.02
+	protected static body_state: body_state_t;
-  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() {
+	public get default_feet_pos() {
-    return new Kinematic().getDefaultFeetPos()
+		return [
-  }
+			[1, -1, 1, 1],
+			[1, -1, -1, 1],
+			[-1, -1, 1, 1],
+			[-1, -1, -1, 1]
+		];
+	}
 
-  protected get default_height() {
+	protected get default_height() {
-    return 0.5
+		return 0.5;
-  }
+	}
 
-  begin() {
+	begin() {
-    console.log('Starting', this.name)
+		console.log('Starting', this.name);
-  }
+	}
-  end() {
+	end() {
-    console.log('Ending', this.name)
+		console.log('Ending', this.name);
-  }
+	}
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    this.map_command(command)
+		return body_state;
-    this.body_state = body_state
+	}
-    this.dt = dt / 1000
-    return body_state
-  }
 
-  map_command(command: ControllerCommand) {
+	map_command(command: ControllerCommand): gait_state_t {
-    const newCommand = {
+		return {
-      step_height: 0.4 + (command.s1 / 128 + 1) / 2,
+			step_height: 0.4 + Math.abs(command.ry / 128),
-      step_x: Math.floor(fromInt8(command.ly, -1, 1) * 10) / 10,
+			step_x: (Math.floor(fromInt8(command.ly, -1, 1) * 10) / 10) * 3,
-      step_z: -(Math.floor(fromInt8(command.lx, -1, 1) * 10) / 10),
+			step_z: -(Math.floor(fromInt8(command.lx, -1, 1) * 10) / 10) * 3,
-      step_velocity: command.s / 128 + 1,
+			step_velocity: command.s / 128 + 1,
-      step_angle: command.rx / 128,
+			step_angle: 0,
-      step_depth: 0.002
+			step_depth: 0.2
-    }
+		};
-
+	}
-    this.gait_state = newCommand
-  }
 }
 
 export class IdleState extends GaitState {
-  protected name = 'Idle'
+	protected name = 'Idle';
-}
-
-export class CalibrationState extends GaitState {
-  protected name = 'Calibration'
-
-  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 * 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) {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    body_state.omega = 0
+		body_state.omega = 0;
-    body_state.phi = 0
+		body_state.phi = 0;
-    body_state.psi = 0
+		body_state.psi = 0;
-    body_state.xm = 0
+		body_state.xm = 0;
-    body_state.ym = this.default_height / 2
+		body_state.ym = this.default_height / 2;
-    body_state.zm = 0
+		body_state.zm = 0;
-    body_state.feet = this.default_feet_pos
+		body_state.feet = this.default_feet_pos;
-    return body_state
+		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) {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    body_state.omega = 0
+		body_state.omega = 0;
-    body_state.phi = command.rx / 8
+		body_state.phi = command.rx / 8;
-    body_state.psi = command.ry / 8
+		body_state.psi = command.ry / 8;
-    body_state.xm = command.ly / 2 / 100
+		body_state.xm = command.ly / 2 / 100;
-    body_state.zm = command.lx / 2 / 100
+		body_state.zm = command.lx / 2 / 100;
-    body_state.feet = this.default_feet_pos
+		body_state.feet = this.default_feet_pos;
-    return body_state
+		return body_state;
-  }
+	}
 }
 
 abstract class PhaseGaitState extends GaitState {
-  protected tick = 0
+	protected tick = 0;
-  protected phase = 0
+	protected phase = 0;
-  protected phase_time = 0
+	protected phase_time = 0;
-  protected abstract num_phases: number
+	protected abstract num_phases: number;
-  protected abstract phase_speed_factor: number
+	protected abstract phase_speed_factor: number;
-  protected abstract swing_stand_ratio: number
+	protected abstract swing_stand_ratio: number;
 
-  protected contact_phases!: number[][]
+	protected contact_phases!: number[][];
-  protected shifts!: number[][]
+	protected shifts!: number[][];
 
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+	protected body_state!: body_state_t;
-    super.step(body_state, command, dt)
+	protected gait_state!: gait_state_t;
-    this.update_phase()
+	protected dt = 0.02;
-    this.update_body_position()
-    this.update_feet_positions()
-    return this.body_state
-  }
 
-  update_phase() {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    this.phase_time += this.dt * this.phase_speed_factor * this.gait_state.step_velocity
+		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;
+	}
 
-    if (this.phase_time >= 1) {
+	update_phase() {
-      this.phase += 1
+		this.phase_time += this.dt * this.phase_speed_factor * this.gait_state.step_velocity;
-      if (this.phase == this.num_phases) this.phase = 0
-      this.phase_time = 0
-    }
-  }
 
-  update_body_position() {
+		if (this.phase_time >= 1) {
-    if (this.num_phases === 4) return
+			this.phase += 1;
+			if (this.phase == this.num_phases) this.phase = 0;
+			this.phase_time = 0;
+		}
+	}
 
-    const shift = this.shifts[Math.floor(this.phase / 2)]
+	update_body_position() {
+		if (this.num_phases === 4) return;
 
-    this.body_state.xm += (shift[0] - this.body_state.xm) * this.dt * 4
+		const shift = this.shifts[Math.floor(this.phase / 2)];
-    this.body_state.zm += (shift[2] - this.body_state.zm) * this.dt * 4
-  }
 
-  update_feet_positions() {
+		this.body_state.xm += (shift[0] - this.body_state.xm) * this.dt * 4;
-    for (let i = 0; i < 4; i++) {
+		this.body_state.zm += (shift[2] - this.body_state.zm) * this.dt * 4;
-      this.body_state.feet[i] = this.update_foot_position(i)
+	}
-    }
-  }
 
-  update_foot_position(index: number): number[] {
+	update_feet_positions() {
-    const contact = this.contact_phases[index][this.phase]
+		for (let i = 0; i < 4; i++) {
-    return contact ? this.stand(index) : this.swing(index)
+			this.body_state.feet[i] = this.update_foot_position(i);
-  }
+		}
+	}
 
-  stand(index: number): number[] {
+	update_foot_position(index: number): number[] {
-    const delta_pos = [
+		const contact = this.contact_phases[index][this.phase];
-      -this.gait_state.step_x * this.dt * this.swing_stand_ratio,
+		return contact ? this.stand(index) : this.swing(index);
-      0,
+	}
-      -this.gait_state.step_z * this.dt * this.swing_stand_ratio
-    ]
 
-    this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0]
+	stand(index: number): number[] {
-    this.body_state.feet[index][1] = this.default_feet_pos[index][1]
+		const delta_pos = [
-    this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2]
+			-this.gait_state.step_x * this.dt * this.swing_stand_ratio,
-    return this.body_state.feet[index]
+			0,
-  }
+			-this.gait_state.step_z * this.dt * this.swing_stand_ratio
+		];
 
-  swing(index: number): number[] {
+		this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0];
-    const delta_pos = [this.gait_state.step_x * this.dt, 0, this.gait_state.step_z * this.dt]
+		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];
+	}
 
-    if (this.gait_state.step_x == 0) {
+	swing(index: number): number[] {
-      delta_pos[0] =
+		const delta_pos = [this.gait_state.step_x * this.dt, 0, this.gait_state.step_z * this.dt];
-        (this.default_feet_pos[index][0] - this.body_state.feet[index][0]) * this.dt * 8
-    }
 
-    if (this.gait_state.step_z == 0) {
+		if (this.gait_state.step_x == 0) {
-      delta_pos[2] =
+			delta_pos[0] =
-        (this.default_feet_pos[index][2] - this.body_state.feet[index][2]) * this.dt * 8
+				(this.default_feet_pos[index][0] - this.body_state.feet[index][0]) * this.dt * 8;
-    }
+		}
 
-    this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0]
+		if (this.gait_state.step_z == 0) {
-    this.body_state.feet[index][1] =
+			delta_pos[2] =
-      this.default_feet_pos[index][1] + sin(this.phase_time * Math.PI) * this.gait_state.step_height
+				(this.default_feet_pos[index][2] - this.body_state.feet[index][2]) * this.dt * 8;
-    this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2]
+		}
-    return this.body_state.feet[index]
+
-  }
+		this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0];
+		this.body_state.feet[index][1] =
+			this.default_feet_pos[index][1] +
+			sin(this.phase_time * Math.PI) * this.gait_state.step_height;
+		this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2];
+		return this.body_state.feet[index];
+	}
 }
 
 export class FourPhaseWalkState extends PhaseGaitState {
-  protected name = 'Four phase walk'
+	protected name = 'Four phase walk';
-  protected num_phases = 4
+	protected num_phases = 4;
-  protected phase_speed_factor = 6
+	protected phase_speed_factor = 2.5;
-  protected contact_phases = [
+	protected contact_phases = [
-    [1, 0, 1, 1],
+		[1, 0, 1, 1],
-    [1, 1, 1, 0],
+		[1, 1, 1, 0],
-    [1, 1, 1, 0],
+		[1, 1, 1, 0],
-    [1, 0, 1, 1]
+		[1, 0, 1, 1]
-  ]
+	];
-  protected swing_stand_ratio = 1 / (this.num_phases - 1)
+	protected swing_stand_ratio = 1 / (this.num_phases - 1);
 
-  begin() {
+	begin() {
-    super.begin()
+		super.begin();
-  }
+	}
 
-  end() {
+	end() {
-    super.end()
+		super.end();
-  }
+	}
 
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    return super.step(body_state, command, dt)
+		return super.step(body_state, command, dt);
-  }
+	}
 }
 
 export class EightPhaseWalkState extends PhaseGaitState {
-  protected name = 'Eight phase walk'
+	protected name = 'Eight phase walk';
-  protected num_phases = 8
+	protected num_phases = 8;
-  protected phase_speed_factor = 4
+	protected phase_speed_factor = 1.5;
-  protected contact_phases = [
+	protected contact_phases = [
-    [1, 0, 1, 1, 1, 1, 1, 1],
+		[1, 0, 1, 1, 1, 1, 1, 1],
-    [1, 1, 1, 1, 1, 0, 1, 1],
+		[1, 1, 1, 0, 1, 1, 1, 1],
-    [1, 1, 1, 1, 1, 1, 1, 0],
+		[1, 1, 1, 1, 1, 0, 1, 1],
-    [1, 1, 1, 0, 1, 1, 1, 1]
+		[1, 1, 1, 1, 1, 1, 1, 0]
-  ]
+	];
-  protected shifts = [
+	protected shifts = [
-    [-0.05, 0, -0.2],
+		[-0.3, 0, -0.2],
-    [0.3, 0, 0.2],
+		[-0.3, 0, 0.2],
-    [-0.05, 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)
+	protected swing_stand_ratio = 1 / (this.num_phases - 1);
 
-  begin() {
+	begin() {
-    super.begin()
+		super.begin();
-  }
+	}
 
-  end() {
+	end() {
-    super.end()
+		super.end();
-  }
+	}
 
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+	step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    return super.step(body_state, command, dt)
+		return super.step(body_state, command, dt);
-  }
+	}
-}
-
-export class BezierState extends GaitState {
-  protected name = 'Bezier'
-  protected phase = 0
-  protected phase_num = 0
-  protected step_length: number = 0
-  offset = [0, 0.5, 0.5, 0]
-
-  begin() {
-    super.begin()
-  }
-
-  end() {
-    super.end()
-  }
-
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    super.step(body_state, command, dt)
-    this.step_length = Math.sqrt(this.gait_state.step_x ** 2 + this.gait_state.step_z ** 2)
-    if (this.gait_state.step_x < 0) {
-      this.step_length = -this.step_length
-    }
-    this.update_phase()
-    this.update_feet_positions()
-    return this.body_state
-  }
-
-  update_phase() {
-    this.phase += this.dt * this.gait_state.step_velocity * 2
-    if (this.phase >= 1) {
-      this.phase_num += 1
-      this.phase_num %= 2
-      this.phase = 0
-    }
-  }
-
-  update_feet_positions() {
-    for (let i = 0; i < 4; i++) {
-      this.body_state.feet[i] = this.update_foot_position(i)
-    }
-  }
-
-  update_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 <= 0.75 ?
-        this.stand_controller(index, phase / 0.75)
-      : this.swing_controller(index, (phase - 0.75) / (1 - 0.75))
-  }
-
-  stand_controller(index: number, phase: number) {
-    let depth = this.gait_state.step_depth
-    return this.controller(index, phase, stance_curve, depth)
-  }
-
-  swing_controller(index: number, phase: number) {
-    let height = this.gait_state.step_height
-    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]
-  }
-}
-
-const stance_curve = (length: number, angle: number, depth: number, phase: number): number[] => {
-  const X_POLAR = Math.cos(angle)
-  const Y_POLAR = Math.sin(angle)
-
-  const step = length * (1 - 2 * phase)
-  const X = step * X_POLAR
-  const Z = step * Y_POLAR
-  let Y = 0
-
-  if (length !== 0) {
-    Y = -depth * Math.cos((Math.PI * (X + Y)) / (2 * length))
-  }
-  return [X, Y, Z]
-}
-
-const yawArc = (default_foot_pos: number[], current_foot_pos: number[]): number => {
-  const foot_mag = Math.sqrt(default_foot_pos[0] ** 2 + default_foot_pos[2] ** 2)
-  const foot_dir = Math.atan2(default_foot_pos[2], default_foot_pos[0])
-  const offsets = [
-    current_foot_pos[0] - default_foot_pos[0],
-    current_foot_pos[2] - default_foot_pos[2],
-    current_foot_pos[1] - default_foot_pos[1]
-  ]
-  const offset_mag = Math.sqrt(offsets[0] ** 2 + offsets[2] ** 2)
-  const offset_mod = Math.atan2(offset_mag, foot_mag)
-
-  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,131 +1,320 @@
+
 export interface body_state_t {
-  omega: number
+	omega: number;
-  phi: number
+	phi: number;
-  psi: number
+	psi: number;
-  xm: number
+	xm: number;
-  ym: number
+	ym: number;
-  zm: number
+	zm: number;
-  feet: number[][]
+	feet: number[][];
 }
 
 export interface position {
-  x: number
+	x: number;
-  y: number
+	y: number;
-  z: number
+	z: number;
 }
 
 export interface target_position {
-  x: number
+	x: number;
-  z: number
+	z: number;
-  yaw: number
+	yaw: number;
 }
 
-const { cos, sin, atan2, acos, sqrt, max, min } = Math
+const { cos, sin, atan2, sqrt } = Math;
 
-const DEG2RAD = 0.017453292519943
+const DEG2RAD = 0.017453292519943;
 
 export default class Kinematic {
-  l1: number
+	l1: number;
-  l2: number
+	l2: number;
-  l3: number
+	l3: number;
-  l4: number
+	l4: number;
 
-  L: number
+	L: number;
-  W: number
+	W: number;
 
-  DEG2RAD = DEG2RAD
+	DEG2RAD = DEG2RAD;
 
-  mountOffsets: number[][]
+	sHp = sin(Math.PI / 2);
+	cHp = cos(Math.PI / 2);
 
-  invMountRot = [
+	Tlf: number[][] = [];
-    [0, 0, -1],
+	Trf: number[][] = [];
-    [0, 1, 0],
+	Tlb: number[][] = [];
-    [1, 0, 0]
+	Trb: number[][] = [];
-  ]
 
-  constructor() {
+	point_lf: number[][];
-    this.l1 = 60.5 / 100
+	point_rf: number[][];
-    this.l2 = 10 / 100
+	point_lb: number[][];
-    this.l3 = 111.7 / 100
+	point_rb: number[][];
-    this.l4 = 118.5 / 100
+	Ix: number[][];
 
-    this.L = 207.5 / 100
+	constructor() {
-    this.W = 78 / 100
+		this.l1 = 60.5 / 100;
+		this.l2 = 10 / 100;
+		this.l3 = 100.7 / 100;
+		this.l4 = 118.5 / 100;
 
-    this.mountOffsets = [
+		this.L = 207.5 / 100;
-      [this.L / 2, 0, this.W / 2],
+		this.W = 78 / 100;
-      [this.L / 2, 0, -this.W / 2],
-      [-this.L / 2, 0, this.W / 2],
-      [-this.L / 2, 0, -this.W / 2]
-    ]
-  }
 
-  getDefaultFeetPos(): number[][] {
+		this.point_lf = [
-    return this.mountOffsets.map((offset, i) => {
+			[this.cHp, 0, this.sHp, this.L / 2],
-      return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.l1 : this.l1)]
+			[0, 1, 0, 0],
-    })
+			[-this.sHp, 0, this.cHp, this.W / 2],
-  }
+			[0, 0, 0, 1]
+		];
 
-  calcIK(p: body_state_t): number[] {
+		this.point_rf = [
-    const roll = p.omega * this.DEG2RAD
+			[this.cHp, 0, this.sHp, this.L / 2],
-    const pitch = p.phi * this.DEG2RAD
+			[0, 1, 0, 0],
-    const yaw = p.psi * this.DEG2RAD
+			[-this.sHp, 0, this.cHp, -this.W / 2],
-    const rot = this.euler2R(roll, pitch, yaw)
+			[0, 0, 0, 1]
-    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]
+		this.point_lb = [
-      const px = bx - mx,
+			[this.cHp, 0, this.sHp, -this.L / 2],
-        py = by - my,
+			[0, 1, 0, 0],
-        pz = bz - mz
+			[-this.sHp, 0, this.cHp, this.W / 2],
+			[0, 0, 0, 1]
+		];
 
-      const lx =
+		this.point_rb = [
-        this.invMountRot[0][0] * px + this.invMountRot[0][1] * py + this.invMountRot[0][2] * pz
+			[this.cHp, 0, this.sHp, -this.L / 2],
-      const ly =
+			[0, 1, 0, 0],
-        this.invMountRot[1][0] * px + this.invMountRot[1][1] * py + this.invMountRot[1][2] * pz
+			[-this.sHp, 0, this.cHp, -this.W / 2],
-      const lz =
+			[0, 0, 0, 1]
-        this.invMountRot[2][0] * px + this.invMountRot[2][1] * py + this.invMountRot[2][2] * pz
+		];
+		this.Ix = [
+			[-1, 0, 0, 0],
+			[0, 1, 0, 0],
+			[0, 0, 1, 0],
+			[0, 0, 0, 1]
+		];
+	}
 
-      const xLocal = i % 2 === 1 ? -lx : lx
+	public calcIK(body_state: body_state_t): number[] {
-      return this.legIK(xLocal, ly, lz)
+		this.bodyIK(body_state);
-    })
-  }
 
-  private legIK(x: number, y: number, z: number): [number, number, number] {
+		return [
-    const F = sqrt(max(0, x * x + y * y - this.l1 * this.l1))
+			...this.legIK(this.multiplyVector(this.inverse(this.Tlf), body_state.feet[0])),
-    const G = F - this.l2
+			...this.legIK(
-    const H = sqrt(G * G + z * z)
+				this.multiplyVector(
-    const t1 = -atan2(y, x) - atan2(F, -this.l1)
+					this.Ix,
-    const D = (H * H - this.l3 * this.l3 - this.l4 * this.l4) / (2 * this.l3 * this.l4)
+					this.multiplyVector(this.inverse(this.Trf), body_state.feet[1])
-    const t3 = acos(max(-1, min(1, D)))
+				)
-    const t2 = atan2(z, G) - atan2(this.l4 * sin(t3), this.l3 + this.l4 * cos(t3))
+			),
-    return [t1, t2, t3]
+			...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])
+				)
+			)
+		];
+	}
 
-  private euler2R(roll: number, pitch: number, yaw: number): number[][] {
+	bodyIK(p: body_state_t) {
-    const cr = cos(roll),
+		const cos_omega = cos(p.omega * this.DEG2RAD);
-      sr = sin(roll)
+		const sin_omega = sin(p.omega * this.DEG2RAD);
-    const cp = cos(pitch),
+		const cos_phi = cos(p.phi * this.DEG2RAD);
-      sp = sin(pitch)
+		const sin_phi = sin(p.phi * this.DEG2RAD);
-    const cy = cos(yaw),
+		const cos_psi = cos(p.psi * this.DEG2RAD);
-      sy = sin(yaw)
+		const sin_psi = sin(p.psi * this.DEG2RAD);
-    return [
+
-      [cp * cy, -cp * sy, sp],
+		const Tm: number[][] = [
-      [sr * sp * cy + sy * cr, -sr * sp * sy + cr * cy, -sr * cp],
+			[cos_phi * cos_psi, -sin_psi * cos_phi, sin_phi, p.xm],
-      [sr * sy - sp * cr * cy, sr * cy + sp * sy * cr, cr * cp]
+			[
-    ]
+				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;
+	}
 }
+

app/src/lib/models.ts

@@ -0,0 +1,169 @@
+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,31 +1,29 @@
 import {
-    Mesh,
+	Mesh,
-    PerspectiveCamera,
+	PerspectiveCamera,
-    PlaneGeometry,
+	PlaneGeometry,
-    Scene,
+	Scene,
-    WebGLRenderer,
+	WebGLRenderer,
-    AmbientLight,
+	AmbientLight,
-    DirectionalLight,
+	DirectionalLight,
-    PCFSoftShadowMap,
+	PCFSoftShadowMap,
-    type GridHelper,
+	GridHelper,
-    ArrowHelper,
+	ArrowHelper,
-    Vector3,
+	Vector3,
-    FogExp2,
+	FogExp2,
-    CanvasTexture,
+	CanvasTexture,
-    type ColorRepresentation,
+	type ColorRepresentation,
-    type WebGLRendererParameters,
+	type WebGLRendererParameters,
-    MeshPhongMaterial,
+	MeshPhongMaterial,
-    EquirectangularReflectionMapping,
+	EquirectangularReflectionMapping,
-    ACESFilmicToneMapping,
+	ACESFilmicToneMapping,
-    MathUtils,
+	MathUtils,
-    Group,
+	MeshStandardMaterial,
-    MeshBasicMaterial,
+	Group
-    RepeatWrapping
 } from 'three';
 import { Sky } from 'three/addons/objects/Sky.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls';
-import { Reflector } from 'three/examples/jsm/objects/Reflector.js';
 import { type URDFJoint, type URDFMimicJoint, type URDFRobot } from 'urdf-loader';
 import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls';
 import { sunCalculator } from './utilities/position-utilities';
@@ -33,347 +31,321 @@ import { sunCalculator } from './utilities/position-utilities';
 export const addScene = () => new Scene();
 
 interface position {
-    x?: number;
+	x?: number;
-    y?: number;
+	y?: number;
-    z?: number;
+	z?: number;
 }
 
 interface light {
-    color?: ColorRepresentation;
+	color?: ColorRepresentation;
-    intensity?: number;
+	intensity?: number;
+}
+
+interface gridOptions {
+	divisions?: number;
+	size?: number;
 }
 
 interface arrowOptions {
-    origin: position;
+	origin: position;
-    direction: position;
+	direction: position;
-    length?: number;
+	length?: number;
-    color?: ColorRepresentation;
+	color?: ColorRepresentation;
 }
 
 type directionalLight = position & light;
 
+type gridHelperOptions = gridOptions & position;
+
 export default class SceneBuilder {
-    public scene: Scene;
+	public scene: Scene;
-    public camera!: PerspectiveCamera;
+	public camera!: PerspectiveCamera;
-    public ground!: Mesh;
+	public ground!: Mesh;
-    public renderer!: WebGLRenderer;
+	public renderer!: WebGLRenderer;
-    public orbit: OrbitControls;
+	public orbit: OrbitControls;
-    public callback: Function | undefined;
+	public callback: Function | undefined;
-    public gridHelper!: GridHelper;
+	public gridHelper!: GridHelper;
-    public model!: URDFRobot;
+	public model!: URDFRobot;
-    public liveStreamTexture!: CanvasTexture;
+	public liveStreamTexture!: CanvasTexture;
-    private fog!: FogExp2;
+	private fog!: FogExp2;
-    private isLoaded: boolean = false;
+	private isLoaded: boolean = false;
-    public isDragging: boolean = false;
+	public isDragging: boolean = false;
-    highlightMaterial: any;
+	highlightMaterial: any;
-    sky!: Sky;
+	sky!: Sky;
-    transformControl: TransformControls;
+	transformControl: TransformControls;
-    public modelGroup!: Group;
+	public modelGroup!: Group;
 
-    constructor() {
+	constructor() {
-        this.scene = new Scene();
+		this.scene = new Scene();
-        if (this.scene.environment?.mapping) {
+		if (this.scene.environment?.mapping) {
-            this.scene.environment.mapping = EquirectangularReflectionMapping;
+			this.scene.environment.mapping = EquirectangularReflectionMapping;
-        }
+		}
-        return this;
+		return this;
-    }
+	}
 
-    public addRenderer = (parameters?: WebGLRendererParameters) => {
+	public addRenderer = (parameters?: WebGLRendererParameters) => {
-        this.renderer = new WebGLRenderer(parameters);
+		this.renderer = new WebGLRenderer(parameters);
-        this.renderer.outputColorSpace = 'srgb';
+		this.renderer.outputColorSpace = 'srgb';
-        this.renderer.shadowMap.enabled = true;
+		this.renderer.shadowMap.enabled = true;
-        this.renderer.shadowMap.type = PCFSoftShadowMap;
+		this.renderer.shadowMap.type = PCFSoftShadowMap;
-        this.renderer.toneMapping = ACESFilmicToneMapping;
+		this.renderer.toneMapping = ACESFilmicToneMapping;
-        this.renderer.toneMappingExposure = 0.85;
+		this.renderer.toneMappingExposure = 0.85;
-        if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement);
+		if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement);
-        return this;
+		return this;
-    };
+	};
 
-    public addSky = () => {
+	public addSky = () => {
-        this.sky = new Sky();
+		this.sky = new Sky();
-        this.sky.scale.setScalar(450000);
+		this.sky.scale.setScalar(450000);
-        this.scene.add(this.sky);
+		this.scene.add(this.sky);
-        const effectController = {
+		const effectController = {
-            turbidity: 10,
+			turbidity: 10,
-            rayleigh: 3,
+			rayleigh: 3,
-            mieCoefficient: 0.005,
+			mieCoefficient: 0.005,
-            mieDirectionalG: 0.7,
+			mieDirectionalG: 0.7,
-            elevation: sunCalculator.calculateSunElevation(),
+			elevation: sunCalculator.calculateSunElevation(),
-            azimuth: 200,
+			azimuth: 180,
-            exposure: this.renderer.toneMappingExposure
+			exposure: this.renderer.toneMappingExposure
-        };
+		};
-        const uniforms = this.sky.material.uniforms;
+		const uniforms = this.sky.material.uniforms;
-        uniforms['turbidity'].value = effectController.turbidity;
+		uniforms['turbidity'].value = effectController.turbidity;
-        uniforms['rayleigh'].value = effectController.rayleigh;
+		uniforms['rayleigh'].value = effectController.rayleigh;
-        uniforms['mieCoefficient'].value = effectController.mieCoefficient;
+		uniforms['mieCoefficient'].value = effectController.mieCoefficient;
-        uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
+		uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
-        this.renderer.toneMappingExposure = 0.5;
+		this.renderer.toneMappingExposure = 0.5;
-        const phi = MathUtils.degToRad(90 - effectController.elevation);
+		const phi = MathUtils.degToRad(90 - effectController.elevation);
-        const theta = MathUtils.degToRad(effectController.azimuth);
+		const theta = MathUtils.degToRad(effectController.azimuth);
-        const sun = new Vector3();
+		const sun = new Vector3();
 
-        sun.setFromSphericalCoords(1, phi, theta);
+		sun.setFromSphericalCoords(1, phi, theta);
-        uniforms['sunPosition'].value.copy(sun);
+		uniforms['sunPosition'].value.copy(sun);
-        return this;
+		return this;
-    };
+	};
 
-    public addPerspectiveCamera = (options: position) => {
+	public addPerspectiveCamera = (options: position) => {
-        this.camera = new PerspectiveCamera();
+		this.camera = new PerspectiveCamera();
-        this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0);
+		this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0);
-        this.scene.add(this.camera);
+		this.scene.add(this.camera);
-        return this;
+		return this;
-    };
+	};
 
-    public addGroundPlane = (options?: position) => {
+	public addGroundPlane = (options?: position) => {
-        const checkerboardTexture = this.createCheckerboardTexture(1024, 2);
+		var planeMaterial = new MeshStandardMaterial({ color: 0x808080, side: 2, opacity: 0.5 });
-        checkerboardTexture.wrapS = RepeatWrapping;
+		this.ground = new Mesh(new PlaneGeometry(), planeMaterial);
-        checkerboardTexture.wrapT = RepeatWrapping;
+		this.ground.rotation.x = -Math.PI / 2;
-        checkerboardTexture.repeat.set(100, 100);
+		this.ground.scale.setScalar(30);
-        const checkerboardMat = new MeshBasicMaterial({
+		this.ground.position.set(options?.x ?? 0, options?.y ?? 0, options?.z ?? 0);
-            map: checkerboardTexture,
+		this.ground.receiveShadow = true;
-            opacity: 0.1,
+		this.scene.add(this.ground);
-            transparent: true
+		return this;
-        });
+	};
 
-        const plane = new PlaneGeometry(400, 400);
+	public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
+		this.orbit = new OrbitControls(this.camera, this.renderer.domElement);
+		this.orbit.minDistance = minDistance;
+		this.orbit.maxDistance = maxDistance;
+		this.orbit.autoRotate = autoRotate;
+		this.orbit.update();
+		return this;
+	};
 
-        this.ground = new Mesh(plane, checkerboardMat);
+	public addAmbientLight = (options: light) => {
-        this.ground.rotation.x = -Math.PI / 2;
+		const ambientLight = new AmbientLight(options.color, options.intensity);
-        this.ground.position.set(options?.x ?? 0, options?.y ?? 0.01, options?.z ?? 0);
+		this.scene.add(ambientLight);
-        this.ground.receiveShadow = true;
+		return this;
-        this.scene.add(this.ground);
+	};
 
-        const mirror = new Reflector(plane, {
+	public addDirectionalLight = (options: directionalLight) => {
-            clipBias: 0.003,
+		const directionalLight = new DirectionalLight(options.color, options.intensity);
-            textureWidth: window.innerWidth * window.devicePixelRatio,
+		directionalLight.castShadow = true;
-            textureHeight: window.innerHeight * window.devicePixelRatio,
+		directionalLight.shadow.camera.top = 10;
-            color: 0x00bfff
+		directionalLight.shadow.camera.bottom = -10;
-        });
+		directionalLight.shadow.camera.right = 10;
-        mirror.rotateX(-Math.PI / 2);
+		directionalLight.shadow.camera.left = -10;
-        this.scene.add(mirror);
+		directionalLight.shadow.mapSize.set(4096, 4096);
 
-        return this;
+		directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-    };
+		this.scene.add(directionalLight);
+		return this;
+	};
 
-    public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
+	public addGridHelper = (options: gridHelperOptions) => {
-        this.orbit = new OrbitControls(this.camera, this.renderer.domElement);
+		this.gridHelper = new GridHelper(options.size, options.divisions);
-        this.orbit.minDistance = minDistance;
+		this.gridHelper.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-        this.orbit.maxDistance = maxDistance;
+		this.gridHelper.material.opacity = 0.2;
-        this.orbit.autoRotate = autoRotate;
+		this.gridHelper.material.depthWrite = false;
-        this.orbit.update();
+		this.gridHelper.material.transparent = true;
-        return this;
+		this.scene.add(this.gridHelper);
-    };
+		return this;
+	};
 
-    public addAmbientLight = (options: light) => {
+	public addFogExp2 = (color: ColorRepresentation, density?: number) => {
-        const ambientLight = new AmbientLight(options.color, options.intensity);
+		this.scene.fog = new FogExp2(color, density);
-        this.scene.add(ambientLight);
+		return this;
-        return this;
+	};
-    };
 
-    public addDirectionalLight = (options: directionalLight) => {
+	public fillParent = () => {
-        const directionalLight = new DirectionalLight(options.color, options.intensity);
+		const parentElement = this.renderer.domElement.parentElement;
-        directionalLight.castShadow = true;
+		if (parentElement) {
-        directionalLight.shadow.camera.top = 10;
+			const width = parentElement.clientWidth;
-        directionalLight.shadow.camera.bottom = -10;
+			const height = parentElement.clientHeight;
-        directionalLight.shadow.camera.right = 10;
+			this.handleResize(width, height);
-        directionalLight.shadow.camera.left = -10;
+		}
-        directionalLight.shadow.mapSize.set(4096, 4096);
+		return this;
+	};
 
-        directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
+	public handleResize = (width = window.innerWidth, height = window.innerHeight) => {
-        this.scene.add(directionalLight);
+		this.renderer.setSize(width, height);
-        return this;
+		this.renderer.setPixelRatio(window.devicePixelRatio);
-    };
+		this.camera.aspect = width / height;
+		this.camera.updateProjectionMatrix();
+		return this;
+	};
 
-    private createCheckerboardTexture = (size: number, squares: number) => {
+	public addRenderCb = (callback: Function) => {
-        const canvas = document.createElement('canvas');
+		this.callback = callback;
-        canvas.width = size;
+		return this;
-        canvas.height = size;
+	};
-        const context = canvas.getContext('2d');
 
-        const squareSize = size / squares;
+	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;
+	};
 
-        for (let y = 0; y < squares; y++) {
+	public addArrowHelper = (options?: arrowOptions) => {
-            for (let x = 0; x < squares; x++) {
+		const dir = new Vector3(
-                context!.fillStyle = (x + y) % 2 === 0 ? '#ffffff' : '#000000';
+			options?.direction.x ?? 0,
-                context!.fillRect(x * squareSize, y * squareSize, squareSize, squareSize);
+			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;
+	};
 
-        const texture = new CanvasTexture(canvas);
+	private setJointValue(jointName: string, angle: number) {
-        texture.wrapS = texture.wrapT = RepeatWrapping;
+		if (!this.model) return;
-        texture.anisotropy = 16;
+		if (!this.model.joints[jointName]) return;
-        return texture;
+		this.model.joints[jointName].setJointValue(angle);
-    };
+	}
 
-    public addFogExp2 = (color: ColorRepresentation, density?: number) => {
+	isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed';
-        this.scene.fog = new FogExp2(color, density);
-        return this;
-    };
 
-    public fillParent = () => {
+	highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
-        const parentElement = this.renderer.domElement.parentElement;
+		const traverse = (c: any) => {
-        if (parentElement) {
+			if (c.type === 'Mesh') {
-            const width = parentElement.clientWidth;
+				if (revert) {
-            const height = parentElement.clientHeight;
+					c.material = c.__origMaterial;
-            this.handleResize(width, height);
+					delete c.__origMaterial;
-        }
+				} else {
-        return this;
+					c.__origMaterial = c.material;
-    };
+					c.material = material;
+				}
+			}
 
-    public handleResize = (width = window.innerWidth, height = window.innerHeight) => {
+			if (c === m || !this.isJoint(c)) {
-        this.renderer.setSize(width, height);
+				for (let i = 0; i < c.children.length; i++) {
-        this.renderer.setPixelRatio(window.devicePixelRatio);
+					const child = c.children[i];
-        this.camera.aspect = width / height;
+					if (!child.isURDFCollider) {
-        this.camera.updateProjectionMatrix();
+						traverse(c.children[i]);
-        return this;
+					}
-    };
+				}
+			}
+		};
+		traverse(m);
+	};
 
-    public addRenderCb = (callback: Function) => {
+	public addTransformControls = (model: any) => {
-        this.callback = callback;
+		this.transformControl = new TransformControls(this.camera, this.renderer.domElement);
-        return this;
+		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 startRenderLoop = () => {
+	public addModel = (model: any) => {
-        this.renderer.setAnimationLoop(() => {
+		this.modelGroup = new Group();
-            this.renderer.render(this.scene, this.camera);
+		this.modelGroup.add(model);
-            this.orbit.update();
+		this.model = model;
-            this.handleRobotShadow();
+		this.scene.add(this.modelGroup);
-            if (this.callback) this.callback();
+		return this;
-            if (!this.liveStreamTexture) return;
+	};
-        });
-        return this;
-    };
 
-    public addArrowHelper = (options?: arrowOptions) => {
+	public addDragControl = (updateAngle: any) => {
-        const dir = new Vector3(
+		const highlightColor = '#FFFFFF';
-            options?.direction.x ?? 0,
+		const highlightMaterial = new MeshPhongMaterial({
-            options?.direction.y ?? 0,
+			shininess: 10,
-            options?.direction.z ?? 0
+			color: highlightColor,
-        );
+			emissive: highlightColor,
-        const origin = new Vector3(
+			emissiveIntensity: 0.25
-            options?.origin.x ?? 0,
+		});
-            options?.origin.y ?? 0,
-            options?.origin.z ?? 0
-        );
-        const arrowHelper = new ArrowHelper(
-            dir,
-            origin,
-            options?.length ?? 1.5,
-            options?.color ?? 0xff0000
-        );
-        this.scene.add(arrowHelper);
-        return this;
-    };
 
-    private setJointValue(jointName: string, angle: number) {
+		const dragControls = new PointerURDFDragControls(
-        if (!this.model) return;
+			this.scene,
-        if (!this.model.joints[jointName]) return;
+			this.camera,
-        this.model.joints[jointName].setJointValue(angle);
+			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);
 
-    isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed';
+		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;
+	};
 
-    highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
+	public toggleFog = () => {
-        const traverse = (c: any) => {
+		this.scene.fog = this.scene.fog ? null : this.fog;
-            if (c.type === 'Mesh') {
+	};
-                if (revert) {
-                    c.material = c.__origMaterial;
-                    delete c.__origMaterial;
-                } else {
-                    c.__origMaterial = c.material;
-                    c.material = material;
-                }
-            }
 
-            if (c === m || !this.isJoint(c)) {
+	private handleRobotShadow = () => {
-                for (let i = 0; i < c.children.length; i++) {
+		if (this.isLoaded) return;
-                    const child = c.children[i];
+		const intervalId = setInterval(() => {
-                    if (!child.isURDFCollider) {
+			this.model?.traverse((c) => (c.castShadow = true));
-                        traverse(c.children[i]);
+		}, 10);
-                    }
+		setTimeout(() => {
-                }
+			clearInterval(intervalId);
-            }
+		}, 1000);
-        };
+		this.isLoaded = true;
-        traverse(m);
+	};
-    };
-
-    public addTransformControls = (model: any) => {
-        this.transformControl = new TransformControls(this.camera, this.renderer.domElement);
-        this.transformControl.addEventListener('dragging-changed', (event: any) => {
-            this.orbit.enabled = !event.value;
-            this.isDragging = !event.value;
-        });
-        this.transformControl.attach(model);
-        this.scene.add(this.transformControl);
-        this.transformControl.setMode('rotate');
-        return this;
-    };
-
-    public addModel = (model: any) => {
-        this.modelGroup = new Group();
-        this.modelGroup.add(model);
-        this.model = model;
-        this.scene.add(this.modelGroup);
-        return this;
-    };
-
-    public addDragControl = (updateAngle: any) => {
-        const highlightColor = '#FFFFFF';
-        const highlightMaterial = new MeshPhongMaterial({
-            shininess: 10,
-            color: highlightColor,
-            emissive: highlightColor,
-            emissiveIntensity: 0.9
-        });
-
-        const dragControls = new PointerURDFDragControls(
-            this.scene,
-            this.camera,
-            this.renderer.domElement
-        );
-        dragControls.updateJoint = (joint: URDFMimicJoint, angle: number) => {
-            this.setJointValue(joint.name, angle);
-            updateAngle(joint.name, angle);
-        };
-        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,38 +1,51 @@
 import { Result } from '$lib/utilities/result';
-import { browser } from '$app/environment';
 
 class FileService {
-	private dbPromise: Promise<Result<IDBDatabase, string>> | null = browser
+	private dbName = 'fileStorageDB';
-		? this.openDatabase()
+	private dbVersion = 1;
-		: null;
+	private storeName = 'files';
+	private dbPromise: Promise<Result<IDBDatabase, string>>;
+
+	constructor() {
+		this.dbPromise = this.openDatabase();
+	}
 
 	private async openDatabase(): Promise<Result<IDBDatabase, string>> {
 		return new Promise((resolve) => {
-			const request = indexedDB.open('fileStorageDB', 1);
+			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.onsuccess = () => resolve(Result.ok(request.result));
+
+			request.onupgradeneeded = (event) => {
+				const db = request.result;
+				if (!db.objectStoreNames.contains(this.storeName)) {
+					db.createObjectStore(this.storeName);
+				}
+			};
 		});
 	}
 
 	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');
+		if (dbResult.isErr()) {
-		const store = dbResult.inner.transaction('files', mode).objectStore('files');
+			return Result.err('Database not initialized properly');
-		return Result.ok(store);
+		}
+		const db = dbResult.inner;
+		const transaction = db.transaction(this.storeName, mode);
+		return Result.ok(transaction.objectStore(this.storeName));
 	}
 
 	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');
+		if (storeResult.isErr()) {
+			return Result.err('Failed to access object store for writing');
+		}
+		const store = storeResult.inner;
 
 		return new Promise((resolve) => {
-			const request = storeResult.inner.put(file, key);
+			const request = store.put(file, key);
 			request.onsuccess = () => resolve(Result.ok(request.result));
 			request.onerror = () => resolve(Result.err('Failed to save file'));
 		});
@@ -40,15 +53,19 @@ class FileService {
 
 	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');
+		if (storeResult.isErr()) {
+			return Result.err('Failed to access object store for reading');
+		}
+		const store = storeResult.inner;
 
 		return new Promise((resolve) => {
-			const request = storeResult.inner.get(key);
+			const request = store.get(key);
+
 			request.onsuccess = () =>
-				resolve(request.result ? Result.ok(request.result) : Result.err('File not found'));
+				resolve(request.result ? Result.ok(request.result) : Result.err('File content not found'));
 			request.onerror = () => resolve(Result.err('Failed to retrieve file'));
 		});
 	}
 }
 
-export default browser ? new FileService() : null;
+export default new FileService();

app/src/lib/stores/application.ts

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

app/src/lib/stores/featureFlags.ts

@@ -1,20 +0,0 @@
-import { api } from '$lib/api';
-import { notifications } from '$lib/components/toasts/notifications';
-import { writable, type Writable } from 'svelte/store';
-
-let featureFlagsStore: Writable<Record<string, boolean>>;
-
-export function useFeatureFlags() {
-	if (!featureFlagsStore) {
-		featureFlagsStore = writable<Record<string, boolean>>({});
-
-		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;
-}

app/src/lib/stores/fullscreen.ts

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

@@ -1,47 +0,0 @@
-import { readable, derived } from 'svelte/store'
-
-export type GamepadState = {
-  available: boolean
-  gamepads: Gamepad[]
-}
-
-export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
-  const update = () => {
-    const hasGamepadAPI = 'getGamepads' in navigator
-    if (!hasGamepadAPI) {
-      set({ available: false, gamepads: [] })
-      return
-    }
-
-    const gps = navigator.getGamepads?.() ?? []
-    const validGamepads = gps.filter(Boolean) as Gamepad[]
-    set({
-      available: true,
-      gamepads: validGamepads
-    })
-    raf = requestAnimationFrame(update)
-  }
-
-  window.addEventListener('gamepadconnected', update)
-  window.addEventListener('gamepaddisconnected', update)
-  let raf = requestAnimationFrame(update)
-
-  return () => {
-    cancelAnimationFrame(raf)
-    window.removeEventListener('gamepadconnected', update)
-    window.removeEventListener('gamepaddisconnected', update)
-  }
-})
-
-export const gamepad = derived(gamepads, $gamepads =>
-  $gamepads.available && $gamepads.gamepads.length > 0 ? $gamepads.gamepads[0] : null
-)
-
-export const gamepadAxes = derived(gamepad, $gamepad => $gamepad?.axes ?? [0, 0, 0, 0])
-
-export const gamepadButtons = derived(gamepad, $gamepad => $gamepad?.buttons ?? [])
-
-export const hasGamepad = derived(
-  gamepads,
-  $gamepads => $gamepads.available && $gamepads.gamepads.length > 0
-)

app/src/lib/stores/imu.ts

@@ -1,27 +1,36 @@
+import { type IMU } from '$lib/types/models';
 import { writable } from 'svelte/store';
-import type { IMU } 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;
 
-export const imu = (() => {
+function createIMU() {
-    const { subscribe, update } = writable({
+	const { subscribe, update } = writable(imu_data);
-        x: [] as number[],
-        y: [] as number[],
-        z: [] as number[],
-        heading: [] as number[],
-        altitude: [] as number[],
-        pressure: [] as number[],
-        bmp_temp: [] as number[]
-    });
 
-    const addData = (content: IMU) => {
+	return {
-        update(data => {
+		subscribe,
-            (Object.keys(content) as (keyof IMU)[]).forEach(key => {
+		addData: (content: IMU) => {
-                data[key] = [...data[key], content[key]].slice(-maxIMUData);
+			update((imu_data) => ({
-            });
+				...imu_data,
-            return 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)
+			}));
+		}
+	};
+}
 
-    return { subscribe, addData };
+export const imu = createIMU();
-})();

app/src/lib/stores/index.ts

@@ -2,8 +2,3 @@ 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/lidar.ts

@@ -0,0 +1,29 @@
+import { writable } from 'svelte/store';
+
+export type LidarPoint = {
+	distance: number;
+	angle: number;
+	quality: number;
+};
+
+let lidar_data = {
+	points: <LidarPoint[]>[]
+};
+
+const maxLidarData = 600;
+
+function createLidar() {
+	const { subscribe, update } = writable(lidar_data);
+
+	return {
+		subscribe,
+		addData: (lidarPoint: LidarPoint) => {
+			update((lidar_data) => ({
+				...lidar_data,
+				points: [...lidar_data.points, lidarPoint].slice(-maxLidarData)
+			}));
+		}
+	};
+}
+
+export const lidar = createLidar();

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

@@ -1,5 +0,0 @@
-import { persistentStore } from '$lib/utilities';
-import { writable } from 'svelte/store';
-import appEnv from 'app-env';
-
-export const location = appEnv.VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '');

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

@@ -1,22 +1,14 @@
-import type { ControllerInput } from '$lib/types/models';
+import type { ControllerInput } from '$lib/models';
 import { persistentStore } from '$lib/utilities/svelte-utilities';
 import { writable, type Writable } from 'svelte/store';
 
 export const emulateModel = writable(true);
 
-export const jointNames = persistentStore('joint_names', <string[]>[]);
+export const jointNames = persistentStore('joint_names', []);
 
 export const model = writable();
 
-export const modes = [
+export const modes = ['deactivated', 'idle', 'calibration', 'rest', 'stand', 'crawl', 'walk'] as const;
-	'deactivated',
-	'idle',
-	'calibration',
-	'rest',
-	'stand',
-	'crawl',
-	'walk'
-] as const;
 
 export type Modes = (typeof modes)[number];
 
@@ -30,7 +22,7 @@ export enum ModesEnum {
 	Walk
 }
 
-export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated);
+export const mode: Writable<ModesEnum> = writable(ModesEnum.Walk);
 
 export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0]);
 

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

@@ -1,5 +1,5 @@
 import { writable, type Writable } from 'svelte/store';
-import { type angles } from '$lib/types/models';
+import { type angles } from '$lib/models';
 
 export const servoAnglesOut: Writable<number[]> = writable([
 	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
@@ -8,6 +8,7 @@ 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({});
@@ -15,6 +16,7 @@ export const distances = writable({});
 export interface socketDataCollection {
 	angles: Writable<angles>;
 	logs: Writable<string[]>;
+	battery: Writable<unknown>;
 	mpu: Writable<unknown>;
 	distances: Writable<unknown>;
 }
@@ -22,6 +24,7 @@ export interface socketDataCollection {
 export const socketData = {
 	angles: servoAngles,
 	logs,
+	battery,
 	mpu,
 	distances
 };

app/src/lib/stores/socket.ts

@@ -1,132 +1,122 @@
-import { writable } from 'svelte/store'
+import { writable } from 'svelte/store';
 
-const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const
+const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const;
-type SocketEvent = (typeof socketEvents)[number]
+type SocketEvent = (typeof socketEvents)[number];
-
-export enum Topics {
-  imu = 0,
-  mode = 1,
-  command = 2,
-  servo = 3,
-  input = 4,
-  angles = 5,
-  position = 6
-}
 
 function createWebSocket() {
-  let listeners = new Map<string | Topics, Set<(data?: unknown) => void>>()
+	let listeners = new Map<string, Set<(data?: unknown) => void>>();
-  const { subscribe, set } = writable(false)
+	const { subscribe, set } = writable(false);
-  const reconnectTimeoutTime = 5000
+	const reconnectTimeoutTime = 5000;
-  let unresponsiveTimeoutId: number
+	let unresponsiveTimeoutId: number;
-  let reconnectTimeoutId: number
+	let reconnectTimeoutId: number;
-  let ws: WebSocket
+	let ws: WebSocket;
-  let socketUrl: string | URL
+	let socketUrl: string | URL;
 
-  function init(url: string | URL) {
+	function init(url: string | URL) {
-    socketUrl = url
+		socketUrl = url;
-    connect()
+		connect();
-  }
+	}
 
-  function disconnect(reason: SocketEvent, event?: Event) {
+	function disconnect(reason: SocketEvent, event?: Event) {
-    ws.close()
+		ws.close();
-    set(false)
+		set(false);
-    clearTimeout(unresponsiveTimeoutId)
+		clearTimeout(unresponsiveTimeoutId);
-    clearTimeout(reconnectTimeoutId)
+		clearTimeout(reconnectTimeoutId);
-    listeners.get(reason)?.forEach(listener => listener(event))
+		listeners.get(reason)?.forEach((listener) => listener(event));
-    reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime)
+		reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime);
-  }
+	}
 
-  function connect() {
+	function connect() {
-    ws = new WebSocket(socketUrl)
+		ws = new WebSocket(socketUrl);
-    ws.onopen = ev => {
+		ws.onopen = (ev) => {
-      set(true)
+			set(true);
-      clearTimeout(reconnectTimeoutId)
+			clearTimeout(reconnectTimeoutId);
-      listeners.get('open')?.forEach(listener => listener(ev))
+			listeners.get('open')?.forEach((listener) => listener(ev));
-      for (const event of listeners.keys()) {
+			for (const event of listeners.keys()) {
-        if (socketEvents.includes(event as SocketEvent)) continue
+				if (socketEvents.includes(event as SocketEvent)) continue;
-        subscribeToEvent(event as unknown as Topics)
+				subscribeToEvent(event);
-      }
+			}
-    }
+		};
-    ws.onmessage = message => {
+		ws.onmessage = (message) => {
-      resetUnresponsiveCheck()
+			resetUnresponsiveCheck();
-      let data = message.data
+			let data = message.data;
-      if (data instanceof ArrayBuffer) {
+			if (data instanceof ArrayBuffer) {
-        listeners.get('binary')?.forEach(listener => listener(data))
+				listeners.get('binary')?.forEach((listener) => listener(data));
-        return
+				return;
-      }
+			}
-      data = data.substring(1)
+			data = data.substring(1);
 
-      if (!data) return
+			if (!data) return;
 
-      let event = data.substring(data.indexOf('/') + 1, data.indexOf('['))
+			let event = data.substring(data.indexOf('/') + 1, data.indexOf('['));
-      let payload = data.substring(data.indexOf('[') + 1, data.lastIndexOf(']'))
+			let payload = data.substring(data.indexOf('[') + 1, data.lastIndexOf(']'));
 
-      try {
+			try {
-        payload = JSON.parse(payload)
+				payload = JSON.parse(payload);
-      } catch (error) {}
+			} catch (error) {}
-      if (event) listeners.get(event)?.forEach(listener => listener(payload))
+			if (event) listeners.get(event)?.forEach((listener) => listener(payload));
-    }
+		};
-    ws.onerror = ev => disconnect('error', ev)
+		ws.onerror = (ev) => disconnect('error', ev);
-    ws.onclose = ev => disconnect('close', ev)
+		ws.onclose = (ev) => disconnect('close', ev);
-  }
+	}
 
-  function unsubscribe(event: Topics, listener?: (data: any) => void) {
+	function unsubscribe(event: string, listener?: (data: any) => void) {
-    let eventListeners = listeners.get(event)
+		let eventListeners = listeners.get(event);
-    if (!eventListeners) return
+		if (!eventListeners) return;
 
-    if (!eventListeners.size) {
+		if (!eventListeners.size) {
-      unsubscribeToEvent(event)
+			unsubscribeToEvent(event);
-    }
+		}
-    if (listener) {
+		if (listener) {
-      eventListeners?.delete(listener)
+			eventListeners?.delete(listener);
-    } else {
+		} else {
-      listeners.delete(event)
+			listeners.delete(event);
-    }
+		}
-  }
+	}
 
-  function resetUnresponsiveCheck() {
+	function resetUnresponsiveCheck() {
-    clearTimeout(unresponsiveTimeoutId)
+		clearTimeout(unresponsiveTimeoutId);
-    unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime)
+		unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime);
-  }
+	}
 
-  function sendEvent(event: Topics, data: unknown) {
+	function sendEvent(event: string, data: unknown) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return
+		if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    ws.send(JSON.stringify([2, event, data]))
+		ws.send(`2/${event}[${JSON.stringify(data)}]`);
-  }
+	}
 
-  function unsubscribeToEvent(event: Topics) {
+	function unsubscribeToEvent(event: string) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return
+		if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    ws.send(`[1,${event}]`)
+		ws.send('1/' + event);
-  }
+	}
 
-  function subscribeToEvent(event: Topics) {
+	function subscribeToEvent(event: string) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return
+		if (!ws || ws.readyState !== WebSocket.OPEN) return;
-    ws.send(`[0,${event}]`)
+		ws.send('0/' + event);
-  }
+	}
 
-  return {
+	return {
-    subscribe,
+		subscribe,
-    sendEvent,
+		sendEvent,
-    init,
+		init,
-    on: <T>(event: Topics | SocketEvent, listener: (data: T) => void): (() => void) => {
+		on: <T>(event: string, listener: (data: T) => void): (() => void) => {
-      let eventListeners = listeners.get(event)
+			let eventListeners = listeners.get(event);
-      if (!eventListeners) {
+			if (!eventListeners) {
-        if (!socketEvents.includes(event)) {
+				if (!socketEvents.includes(event as SocketEvent)) {
-          subscribeToEvent(event)
+					subscribeToEvent(event);
-        }
+				}
-        eventListeners = new Set()
+				eventListeners = new Set();
-        listeners.set(event, eventListeners)
+				listeners.set(event, eventListeners);
-      }
+			}
-      eventListeners.add(listener as (data: any) => void)
+			eventListeners.add(listener as (data: any) => void);
 
-      return () => {
+			return () => {
-        unsubscribe(event, listener)
+				unsubscribe(event, listener);
-      }
+			};
-    },
+		},
-    off: (event: Topics, listener?: (data: any) => void) => {
+		off: (event: string, listener?: (data: any) => void) => {
-      unsubscribe(event, listener)
+			unsubscribe(event, listener);
-    }
+		}
-  }
+	};
 }
 
-export const socket = createWebSocket()
+export const socket = createWebSocket();

app/src/lib/stores/telemetry.ts

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

app/src/lib/stores/user.ts

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

@@ -1,17 +0,0 @@
-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,221 +1,143 @@
-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
+	status: number;
-  local_ip: string
+	local_ip: string;
-  mac_address: string
+	mac_address: string;
-  rssi: number
+	rssi: number;
-  ssid: string
+	ssid: string;
-  bssid: string
+	bssid: string;
-  channel: number
+	channel: number;
-  subnet_mask: string
+	subnet_mask: string;
-  gateway_ip: string
+	gateway_ip: string;
-  dns_ip_1: string
+	dns_ip_1: string;
-  dns_ip_2?: string
+	dns_ip_2?: string;
-}
+};
 
 export type WifiSettings = {
-  hostname: string
+	hostname: string;
-  priority_RSSI: boolean
+	priority_RSSI: boolean;
-  wifi_networks: KnownNetworkItem[]
+	wifi_networks: KnownNetworkItem[];
-}
+};
-
-export type NetworkList = {
-  networks: NetworkItem[]
-}
 
 export type KnownNetworkItem = {
-  ssid: string
+	ssid: string;
-  password: string
+	password: string;
-  static_ip_config: boolean
+	static_ip_config: boolean;
-  local_ip?: string
+	local_ip?: string;
-  subnet_mask?: string
+	subnet_mask?: string;
-  gateway_ip?: string
+	gateway_ip?: string;
-  dns_ip_1?: string
+	dns_ip_1?: string;
-  dns_ip_2?: string
+	dns_ip_2?: string;
-}
+};
 
 export type NetworkItem = {
-  rssi: number
+	rssi: number;
-  ssid: string
+	ssid: string;
-  bssid: string
+	bssid: string;
-  channel: number
+	channel: number;
-  encryption_type: number
+	encryption_type: number;
-}
+};
 
 export type ApStatus = {
-  status: number
+	status: number;
-  ip_address: string
+	ip_address: string;
-  mac_address: string
+	mac_address: string;
-  station_num: number
+	station_num: number;
-}
+};
 
 export type ApSettings = {
-  provision_mode: number
+	provision_mode: number;
-  ssid: string
+	ssid: string;
-  password: string
+	password: string;
-  channel: number
+	channel: number;
-  ssid_hidden: boolean
+	ssid_hidden: boolean;
-  max_clients: number
+	max_clients: number;
-  local_ip: string
+	local_ip: string;
-  gateway_ip: string
+	gateway_ip: string;
-  subnet_mask: 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;
+};
 
 export type DownloadOTA = {
-  status: string
+	status: string;
-  progress: number
+	progress: number;
-  error: string
+	error: string;
-}
+};
+
+export type NTPSettings = {
+	enabled: boolean;
+	server: string;
+	tz_label: string;
+	tz_format: string;
+};
 
 export type Analytics = {
-  max_alloc_heap: number
+	max_alloc_heap: number;
-  psram_size: number
+	psram_size: number;
-  free_psram: number
+	free_psram: number;
-  free_heap: number
+	free_heap: number;
-  total_heap: number
+	total_heap: number;
-  min_free_heap: number
+	min_free_heap: number;
-  core_temp: number
+	core_temp: number;
-  fs_total: number
+	fs_total: number;
-  fs_used: number
+	fs_used: number;
-  uptime: number
+	uptime: number;
-  cpu0_usage: number
+	cpu0_usage: number;
-  cpu1_usage: number
+	cpu1_usage: number;
-  cpu_usage: number
+	cpu_usage: number;
-}
+};
 
 export type Rssi = {
-  rssi: number
+	rssi: number;
-  ssid: string
+	ssid: string;
-}
+};
 
 export type StaticSystemInformation = {
-  esp_platform: string
+	esp_platform: string;
-  firmware_version: string
+	firmware_version: string;
-  cpu_freq_mhz: number
+	cpu_freq_mhz: number;
-  cpu_type: string
+	cpu_type: string;
-  cpu_rev: number
+	cpu_rev: number;
-  cpu_cores: number
+	cpu_cores: number;
-  sketch_size: number
+	sketch_size: number;
-  free_sketch_space: number
+	free_sketch_space: number;
-  sdk_version: string
+	sdk_version: string;
-  arduino_version: string
+	arduino_version: string;
-  flash_chip_size: number
+	flash_chip_size: number;
-  flash_chip_speed: number
+	flash_chip_speed: number;
-  cpu_reset_reason: string
+	cpu_reset_reason: string;
-}
+};
 
-export type SystemInformation = Analytics & StaticSystemInformation
+export type SystemInformation = Analytics & StaticSystemInformation;
 
 export type IMU = {
-  x: number
+	x: number;
-  y: number
+	y: number;
-  z: number
+	z: number;
-  heading: number
+	imu_temp: number;
-  altitude: number
+	altitude: number;
-  bmp_temp: number
+	bmp_temp: number;
-  pressure: number
+	pressure: number;
-}
+};
 
 export interface I2CDevice {
-  address: number
+    address: number;
-  part_number: string
+    part_number: string;
-  name: 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

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

app/src/lib/utilities/index.ts

@@ -4,6 +4,4 @@ export * from './svelte-utilities';
 export * from './math-utilities';
 export * from './buffer-utilities';
 export * from './model-utilities';
-export * from './position-utilities';
+export * from './location-utilities';
-export * from './string-utilities';
-export * from './color-utilities';

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

@@ -0,0 +1,9 @@
+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/model-utilities.ts

@@ -1,92 +1,63 @@
-import { Color, LoaderUtils, Vector3 } from 'three'
+import { Color, LoaderUtils, Vector3 } from 'three';
-import URDFLoader, { type URDFRobot } from 'urdf-loader'
+import URDFLoader, { type URDFRobot } from 'urdf-loader';
-import { XacroLoader } from 'xacro-parser'
+import { XacroLoader } from 'xacro-parser';
-import { Result } from '$lib/utilities'
+import { Result } from '$lib/utilities';
-import { jointNames, model } from '$lib/stores'
-import uzip from 'uzip'
-import { fileService } from '$lib/services'
 
-let model_xml: XMLDocument
+let model_xml: XMLDocument;
 
-export const populateModelCache = async () => {
+export const loadModelAsync = async (
-  await cacheModelFiles()
+	url: string
-  const modelRes = await loadModel('/yertle.URDF')
+): Promise<Result<[URDFRobot, string[]], string>> => {
-  if (modelRes.isOk()) {
+	return new Promise((resolve, reject) => {
-    const [urdf, JOINT_NAME] = modelRes.inner
+		const xacroLoader = new XacroLoader();
-    jointNames.set(JOINT_NAME)
+		const urdfLoader = new URDFLoader();
-    model.set(urdf)
+		urdfLoader.workingPath = LoaderUtils.extractUrlBase(url);
-  } else {
-    console.error(modelRes.inner, { exception: modelRes.exception })
-  }
-}
 
-export const cacheModelFiles = async () => {
+		xacroLoader.load(
-  const data = await fetch('/URDF.zip')
+			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]);
 
-  const files = uzip.parse(await data.arrayBuffer())
+					resolve(Result.ok([model, joints]));
+				} catch (error) {
+					resolve(Result.err('Failed to load model', error));
+				}
+			},
+			(error) => resolve(Result.err('Failed to load model', error))
+		);
+	});
+};
 
-  for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
+export const toeWorldPositions = (robot: URDFRobot) => {
-    const url = new URL(path, window.location.href)
+	const toe_positions: Vector3[] = [];
-    fileService?.saveFile(url.toString(), data)
+	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;
+};
 
-export const loadModel = async (url: string): Promise<Result<[URDFRobot, string[]], string>> => {
+export const footColor = () => {
-  const urdfLoader = new URDFLoader()
+	const colorElem = model_xml.querySelector('material[name=foot_color] > color') as Element;
-  urdfLoader.workingPath = LoaderUtils.extractUrlBase(url)
+	const colorAttrStr = colorElem.getAttribute('rgba') as string;
+	const colorStr = colorAttrStr
+		.split(' ')
+		.slice(0, 3)
+		.map((val) => Math.floor(+val * 255))
+		.join(', ');
 
-  let xml = url.endsWith('.xacro') ? await loadXacro(url) : await fetch(url).then(res => res.text())
+	return new Color(`rgb(${colorStr})`);
-
+};
-  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/string-utilities.ts

@@ -1,47 +1,36 @@
 export const humanFileSize = (size: number): string => {
-  const units = ['B', 'kB', 'MB', 'GB', 'TB']
+	const units = ['B', 'kB', 'MB', 'GB', 'TB'];
-  const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024))
+	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]
+	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
+	// Calculate the number of seconds, minutes, hours, and days
-  let minutes = Math.floor(seconds / 60)
+	let minutes = Math.floor(seconds / 60);
-  let hours = Math.floor(minutes / 60)
+	let hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24)
+	let days = Math.floor(hours / 24);
 
-  // Calculate the remaining hours, minutes, and seconds
+	// Calculate the remaining hours, minutes, and seconds
-  hours = hours % 24
+	hours = hours % 24;
-  minutes = minutes % 60
+	minutes = minutes % 60;
-  seconds = seconds % 60
+	seconds = seconds % 60;
 
-  // Create the formatted string
+	// Create the formatted string
-  let result = ''
+	let result = '';
-  if (days > 0) {
+	if (days > 0) {
-    result += days + ' day' + (days > 1 ? 's' : '') + ' '
+		result += days + ' day' + (days > 1 ? 's' : '') + ' ';
-  }
+	}
-  if (hours > 0) {
+	if (hours > 0) {
-    result += hours + ' hour' + (hours > 1 ? 's' : '') + ' '
+		result += hours + ' hour' + (hours > 1 ? 's' : '') + ' ';
-  }
+	}
-  if (minutes > 0) {
+	if (minutes > 0) {
-    result += minutes + ' minute' + (minutes > 1 ? 's' : '') + ' '
+		result += minutes + ' minute' + (minutes > 1 ? 's' : '') + ' ';
-  }
+	}
-  result += seconds + ' second' + (seconds > 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';
 
-export const persistentStore = <T>(key: string, initialValue: T) => {
+export const isEmbeddedApp = import.meta.env.VITE_EMBEDDED_BUILD === 'true';
-	const savedValue = browser ? localStorage.getItem(key) : null;
-	const data: T = savedValue !== null ? JSON.parse(savedValue) : initialValue;
-	const store = writable<T>();
 
-	store.subscribe(value => {
+export const persistentStore = (key: string, initialValue: any) => {
-		if (browser) localStorage.setItem(key, JSON.stringify(value));
+	const savedValue = browser ? JSON.parse(localStorage.getItem(key) as string) : null;
+	const data = savedValue !== null ? savedValue : initialValue;
+	const store = writable(data);
+
+	store.subscribe((value) => {
+		browser && localStorage.setItem(key, JSON.stringify(value));
 	});
 
-	store.set(data);
-
 	return store;
 };

app/src/routes/+layout.svelte

@@ -1,125 +1,129 @@
 <script lang="ts">
-    import { onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
-    import { page } from '$app/state';
+	import { user } from '$lib/stores/user';
-    import { Modals, modals } from 'svelte-modals';
+	import { telemetry } from '$lib/stores/telemetry';
-    import Toast from '$lib/components/toasts/Toast.svelte';
+	import { analytics } from '$lib/stores/analytics';
-    import { notifications } from '$lib/components/toasts/notifications';
+	import type { userProfile } from '$lib/stores/user';
-    import { fade } from 'svelte/transition';
+	import { page } from '$app/stores';
-    import '../app.css';
+	import { Modals, closeModal } from 'svelte-modals';
-    import Menu from '../lib/components/menu/Menu.svelte';
+	import Toast from '$lib/components/toasts/Toast.svelte';
-    import Statusbar from '../lib/components/statusbar/statusbar.svelte';
+	import { notifications } from '$lib/components/toasts/notifications';
-    import {
+	import { fade } from 'svelte/transition';
-        telemetry,
+	import '../app.css';
-        analytics,
+	import Menu from './menu.svelte';
-        ModesEnum,
+	import Statusbar from './statusbar.svelte';
-        kinematicData,
+	import Login from './login.svelte';
-        mode,
+	import { ModesEnum, kinematicData, mode, outControllerData, servoAngles, servoAnglesOut, socket } from '$lib/stores';
-        outControllerData,
+	import type { Analytics, Battery, DownloadOTA } from '$lib/types/models';
-        servoAngles,
+	import { api } from '$lib/api';
-        servoAnglesOut,
-        socket,
-        location,
-        useFeatureFlags
-    } from '$lib/stores';
-    import type { Analytics, DownloadOTA } from '$lib/types/models';
-    interface Props {
-        children?: import('svelte').Snippet;
-    }
 
-    let { children }: Props = $props();
+	onMount(async () => {
+		if ($user.bearer_token !== '') {
+			await validateUser($user);
+		}
+        const ws_token = $page.data.features.security ? '?access_token=' + $user.bearer_token : '';
+		socket.init(`ws://${window.location.host}/ws/events${ws_token}`);
 
-    const features = useFeatureFlags();
+		addEventListeners();
 
-    onMount(async () => {
+        outControllerData.subscribe((data) => socket.sendEvent("input", {data}));
-        const ws = $location ? $location : window.location.host;
+        mode.subscribe((data) => socket.sendEvent("mode", {data}));
-        socket.init(`ws://${ws}/api/ws/events`);
+        servoAnglesOut.subscribe((data) => socket.sendEvent("angles", {data}));
-
+        kinematicData.subscribe((data) => socket.sendEvent("position", {data}));
-        addEventListeners();
+	});
-
-        outControllerData.subscribe(data => socket.sendEvent('input', { data }));
-        mode.subscribe(data => socket.sendEvent('mode', { data }));
-        servoAnglesOut.subscribe(data => socket.sendEvent('angles', { data }));
-        kinematicData.subscribe(data => socket.sendEvent('position', { data }));
-    });
 
     onDestroy(() => {
         removeEventListeners();
     });
 
     const addEventListeners = () => {
-        socket.on('open', handleOpen);
+		socket.on('open', handleOpen);
-        socket.on('close', handleClose);
+		socket.on('close', handleClose);
-        socket.on('error', handleError);
+		socket.on('error', handleError);
-        socket.on('rssi', handleNetworkStatus);
+		socket.on('rssi', handleNetworkStatus);
-        socket.on('mode', (data: ModesEnum) => mode.set(data));
+		socket.on('mode', (data:ModesEnum) => mode.set(data));
-        socket.on('analytics', handleAnalytics);
+		socket.on('angles', (angles:number[]) => { if (angles.length) servoAngles.set(angles)});
-        socket.on('angles', (angles: number[]) => {
+		if ($page.data.features.analytics) socket.on('analytics', handleAnalytics);
-            if (angles.length) servoAngles.set(angles);
+		if ($page.data.features.battery) socket.on('battery', handleBattery);
-        });
+		if ($page.data.features.download_firmware) socket.on('otastatus', handleOAT);
-        features.subscribe(data => {
+        if ($page.data.features.sonar) socket.on('sonar', data => console.log(data))
-            if (data?.download_firmware) socket.on('otastatus', handleOAT);
+	};
-            if (data?.sonar) socket.on('sonar', data => console.log(data));
-        });
-    };
 
     const removeEventListeners = () => {
-        socket.off('analytics', handleAnalytics);
+		socket.off('analytics', handleAnalytics);
-        socket.off('open', handleOpen);
+		socket.off('open', handleOpen);
-        socket.off('close', handleClose);
+		socket.off('close', handleClose);
-        socket.off('rssi', handleNetworkStatus);
+		socket.off('rssi', handleNetworkStatus);
-        socket.off('otastatus', handleOAT);
+		socket.off('battery', handleBattery);
-    };
+		socket.off('otastatus', handleOAT);
+	};
 
-    const handleOpen = () => {
+    async function validateUser(userdata: userProfile) {
-        notifications.success('Connection to device established', 5000);
+        const result = await api.get('/api/verifyAuthorization')
-    };
+        if (result.isErr()){
+            user.invalidate();
+            console.error('Error:', result.inner);
+        }
+	}
 
-    const handleClose = () => {
+	const handleOpen = () => {
-        notifications.error('Connection to device lost', 5000);
+		notifications.success('Connection to device established', 5000);
-        telemetry.setRSSI(0);
+	};
-    };
 
-    const handleError = (data: any) => console.error(data);
+	const handleClose = () => {
+		notifications.error('Connection to device lost', 5000);
+		telemetry.setRSSI(0);
+	};
 
-    const handleAnalytics = (data: Analytics) => analytics.addData(data);
+	const handleError = (data: any) => console.error(data);
 
-    const handleNetworkStatus = (data: number) => telemetry.setRSSI(data);
+	const handleAnalytics = (data: Analytics) => analytics.addData(data);
 
-    const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data);
+	const handleNetworkStatus = (data: number) => telemetry.setRSSI(data);
+
+	const handleBattery = (data: Battery) => telemetry.setBattery(data);
+
+	const handleOAT = (data: DownloadOTA) => telemetry.setDownloadOTA(data);
+
+	let menuOpen = false;
 
-    let menuOpen = $state(false);
 </script>
 
 <svelte:head>
-    <title>{page.data.title}</title>
+	<title>{$page.data.title}</title>
 </svelte:head>
 
-<div class="drawer">
+{#if $page.data.features.security && $user.bearer_token === ''}
-    <input id="main-menu" type="checkbox" class="drawer-toggle" bind:checked={menuOpen} />
+	<Login />
-    <div class="drawer-content flex flex-col">
+{:else}
-        <!-- Status bar content here -->
+	<div class="drawer">
-        <Statusbar />
+		<input id="main-menu" type="checkbox" class="drawer-toggle" bind:checked={menuOpen} />
+		<div class="drawer-content flex flex-col">
+			<!-- Status bar content here -->
+			<Statusbar />
 
-        <!-- Main page content here -->
+			<!-- Main page content here -->
-        {@render children?.()}
+            <slot />
-    </div>
+		</div>
-    <!-- Side Navigation -->
+		<!-- Side Navigation -->
-    <div class="drawer-side z-30 shadow-lg">
+		<div class="drawer-side z-30 shadow-lg">
-        <label for="main-menu" class="drawer-overlay"></label>
+			<label for="main-menu" class="drawer-overlay" />
-        <Menu menuClicked={() => (menuOpen = false)} />
+			<Menu
-    </div>
+				on:menuClicked={() => menuOpen = false}
-</div>
+			/>
+		</div>
+	</div>
+{/if}
 
 <Modals>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
-    {#snippet backdrop()}
+	<div
-        <div
+		slot="backdrop"
-            class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
+		class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur"
-            transition:fade
+		transition:fade
-            onclick={modals.closeAll}
+		on:click={closeModal}
-        ></div>
+	/>
-    {/snippet}
 </Modals>
 
 <Toast />

app/src/routes/+layout.ts

@@ -1,4 +1,7 @@
-export const prerender = false;
+import { jointNames, model } from '$lib/stores';
+import { loadModelAsync } from '$lib/utilities/model-utilities';
+
+export const prerender = true;
 export const ssr = false;
 
 const registerFetchIntercept = async () => {
@@ -11,9 +14,24 @@ const registerFetchIntercept = async () => {
 	};
 };
 
-export const load = async () => {
+const loadModelFiles = async () => {
+	const modelRes = await loadModelAsync('/spot_micro.urdf.xacro');
+	if (modelRes.isOk()) {
+		const [urdf, JOINT_NAME] = modelRes.inner;
+		jointNames.set(JOINT_NAME);
+		model.set(urdf);
+	} else {
+		console.error(modelRes.inner, { exception: modelRes.exception });
+	}
+};
+
+export const load = async ({ fetch }) => {
 	await registerFetchIntercept();
+	await loadModelFiles();
+	const result = await fetch('/api/features');
+	const features = await result.json();
 	return {
+		features,
 		title: 'Spot micro controller',
 		github: 'runeharlyk/SpotMicroESP32-Leika',
 		app_name: 'Spot Micro Controller',

app/src/routes/+page.svelte

@@ -1,27 +1,24 @@
 <script lang="ts">
-  import { goto } from '$app/navigation'
+	import type { PageData } from './$types';
-  import Visualization from '$lib/components/Visualization.svelte'
+	import { notifications } from '$lib/components/toasts/notifications';
-  import { socket } from '$lib/stores'
+	import Visualization from '$lib/components/Visualization.svelte';
-  import { onMount } from 'svelte'
 
-  onMount(() => {
+	export let data: PageData;
-    socket.subscribe(isConnected => {
-      if (isConnected) {
-        goto('/controller')
-      }
-    })
-  })
 </script>
 
 <div class="hero bg-base-100 h-screen">
-  <div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center">
+	<div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center">
-    <div class="w-64 h-64">
+        <div class="w-64 h-64">
-      <Visualization sky={false} orbit panel={false} ground={false} />
+            <Visualization sky={false} orbit panel={false} ground={false}/>
-    </div>
+        </div>
-    <div class="card-body w-80">
+		<div class="card-body w-80">
-      <h2 class="card-title text-center text-2xl">Begin you journey</h2>
+			<h2 class="card-title text-center text-2xl">Welcome to {data.app_name}</h2>
-      <p class="py-6 text-center"></p>
+			<p class="py-6 text-center"></p>
-      <a class="btn btn-primary" href={$socket ? '/controller' : '/connection'}> Add Robot Dog </a>
+			<a
-    </div>
+				class="btn btn-primary"
-  </div>
+				href="/controller"
+				on:click={() => notifications.success('You did it!', 1000)}>Begin</a
+			>
+		</div>
+	</div>
 </div>

app/src/routes/connection/Connection.svelte

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

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

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

app/src/routes/connections/ntp/+page.svelte

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

app/src/routes/connections/ntp/+page.ts

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

app/src/routes/connections/ntp/NTP.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { slide } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import SettingsCard from '$lib/components/SettingsCard.svelte';
+	import Collapsible from '$lib/components/Collapsible.svelte';
+	import Spinner from '$lib/components/Spinner.svelte';
+	import { user } from '$lib/stores/user';
+	import { page } from '$app/stores';
+	import { notifications } from '$lib/components/toasts/notifications';
+	import { TIME_ZONES } from './timezones';
+	import NTP from '~icons/tabler/clock-check';
+	import Server from '~icons/tabler/server';
+	import Clock from '~icons/tabler/clock';
+	import UTC from '~icons/tabler/clock-pin';
+	import Stopwatch from '~icons/tabler/24-hours';
+	import type { NTPSettings, NTPStatus } from '$lib/types/models';
+	import { api } from '$lib/api';
+
+	let ntpSettings: NTPSettings;
+	let ntpStatus: NTPStatus;
+
+	async function getNTPStatus() {
+        const result = await api.get<NTPStatus>('/api/ntpStatus');
+        if (result.isErr()){
+            console.error('Error:', result.inner);
+            return
+        }
+        ntpStatus = result.inner
+	}
+
+	async function getNTPSettings() {
+        const result = await api.get<NTPSettings>('/api/ntpSettings');
+        if (result.isErr()){
+            console.error('Error:', result.inner);
+            return
+        }
+        ntpSettings = result.inner
+	}
+
+	const interval = setInterval(async () => {
+		getNTPStatus();
+	}, 5000);
+
+	onDestroy(() => clearInterval(interval));
+
+	onMount(() => {
+		if (!$page.data.features.security || $user.admin) {
+			getNTPSettings();
+		}
+	});
+
+	let formField: any;
+
+	let formErrors = {
+		server: false
+	};
+
+	async function postNTPSettings(data: NTPSettings) {
+        const result = await api.post<NTPSettings>('/api/ntpSettings', data);
+        if (result.isErr()){
+            notifications.error('User not authorized.', 3000);
+            console.error('Error:', result.inner);
+            return
+        }
+        ntpSettings = result.inner
+	}
+
+	function handleSubmitNTP() {
+		let valid = true;
+
+		// Validate Server
+		// RegEx for IPv4
+		const regexExpIPv4 =
+			/\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/;
+		const regexExpURL =
+			/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/i;
+
+		if (!regexExpURL.test(ntpSettings.server) && !regexExpIPv4.test(ntpSettings.server)) {
+			valid = false;
+			formErrors.server = true;
+		} else {
+			formErrors.server = false;
+		}
+
+		ntpSettings.tz_format = TIME_ZONES[ntpSettings.tz_label];
+
+		// Submit JSON to REST API
+		if (valid) {
+			postNTPSettings(ntpSettings);
+			//alert('Form Valid');
+		}
+	}
+
+	function 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 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' : '');
+
+		return result;
+	}
+</script>
+
+<SettingsCard collapsible={false}>
+	<Clock slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+	<span slot="title">Network Time</span>
+	<div class="w-full overflow-x-auto">
+		{#await getNTPStatus()}
+			<Spinner />
+		{:then nothing}
+			<div
+				class="flex w-full flex-col space-y-1"
+				transition:slide|local={{ duration: 300, easing: cubicOut }}
+			>
+				<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
+					<div
+						class="mask mask-hexagon h-auto w-10 {ntpStatus.status === 1
+							? 'bg-success'
+							: 'bg-error'}"
+					>
+						<NTP
+							class="h-auto w-full scale-75 {ntpStatus.status === 1
+								? 'text-success-content'
+								: 'text-error-content'}"
+						/>
+					</div>
+					<div>
+						<div class="font-bold">Status</div>
+						<div class="text-sm opacity-75">
+							{ntpStatus.status === 1 ? 'Active' : 'Inactive'}
+						</div>
+					</div>
+				</div>
+
+				<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
+					<div class="mask mask-hexagon bg-primary h-auto w-10">
+						<Server class="text-primary-content h-auto w-full scale-75" />
+					</div>
+					<div>
+						<div class="font-bold">NTP Server</div>
+						<div class="text-sm opacity-75">
+							{ntpStatus.server}
+						</div>
+					</div>
+				</div>
+
+				<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
+					<div class="mask mask-hexagon bg-primary h-auto w-10">
+						<Clock class="text-primary-content h-auto w-full scale-75" />
+					</div>
+					<div>
+						<div class="font-bold">Local Time</div>
+						<div class="text-sm opacity-75">
+							{new Intl.DateTimeFormat('en-GB', {
+								dateStyle: 'long',
+								timeStyle: 'long'
+							}).format(new Date(ntpStatus.local_time))}
+						</div>
+					</div>
+				</div>
+
+				<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
+					<div class="mask mask-hexagon bg-primary h-auto w-10">
+						<UTC class="text-primary-content h-auto w-full scale-75" />
+					</div>
+					<div>
+						<div class="font-bold">UTC Time</div>
+						<div class="text-sm opacity-75">
+							{new Intl.DateTimeFormat('en-GB', {
+								dateStyle: 'long',
+								timeStyle: 'long',
+								timeZone: 'UTC'
+							}).format(new Date(ntpStatus.utc_time))}
+						</div>
+					</div>
+				</div>
+
+				<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
+					<div class="mask mask-hexagon bg-primary h-auto w-10">
+						<Stopwatch class="text-primary-content h-auto w-full scale-75" />
+					</div>
+					<div>
+						<div class="font-bold">Uptime</div>
+						<div class="text-sm opacity-75">
+							{convertSeconds(ntpStatus.uptime)}
+						</div>
+					</div>
+				</div>
+			</div>
+		{/await}
+	</div>
+
+	{#if !$page.data.features.security || $user.admin}
+		<Collapsible open={false} on:closed={getNTPSettings}>
+			<span slot="title">Change NTP Settings</span>
+			<form
+				class="form-control w-full"
+				on:submit|preventDefault={handleSubmitNTP}
+				novalidate
+				bind:this={formField}
+			>
+				<label class="label cursor-pointer justify-start gap-4">
+					<input
+						type="checkbox"
+						bind:checked={ntpSettings.enabled}
+						class="checkbox checkbox-primary"
+					/>
+					<span class="">Enable NTP</span>
+				</label>
+				<label class="label" for="server">
+					<span class="label-text text-md">Server</span>
+				</label>
+				<input
+					type="text"
+					min="3"
+					max="64"
+					class="input input-bordered invalid:border-error w-full invalid:border-2 {formErrors.server
+						? 'border-error border-2'
+						: ''}"
+					bind:value={ntpSettings.server}
+					id="server"
+					required
+				/>
+				<label class="label" for="subnet">
+					<span class="label-text-alt text-error {formErrors.server ? '' : 'hidden'}"
+						>Must be a valid IPv4 address or URL</span
+					>
+				</label>
+				<label class="label" for="tz">
+					<span class="label-text text-md">Pick Time Zone</span>
+				</label>
+				<select class="select select-bordered" bind:value={ntpSettings.tz_label} id="tz">
+					{#each Object.entries(TIME_ZONES) as [tz_label, tz_format]}
+						<option value={tz_label}>{tz_label}</option>
+					{/each}
+				</select>
+
+				<div class="mt-6 place-self-end">
+					<button class="btn btn-primary" type="submit">Apply Settings</button>
+				</div>
+			</form>
+		</Collapsible>
+	{/if}
+</SettingsCard>

app/src/routes/connections/ntp/timezones.ts

@@ -0,0 +1,466 @@
+export type TimeZones = {
+    [name: string]: string
+  };
+  
+export const TIME_ZONES: TimeZones = {
+    "Africa/Abidjan": "GMT0",
+    "Africa/Accra": "GMT0",
+    "Africa/Addis_Ababa": "EAT-3",
+    "Africa/Algiers": "CET-1",
+    "Africa/Asmara": "EAT-3",
+    "Africa/Bamako": "GMT0",
+    "Africa/Bangui": "WAT-1",
+    "Africa/Banjul": "GMT0",
+    "Africa/Bissau": "GMT0",
+    "Africa/Blantyre": "CAT-2",
+    "Africa/Brazzaville": "WAT-1",
+    "Africa/Bujumbura": "CAT-2",
+    "Africa/Cairo": "EET-2",
+    "Africa/Casablanca": "UNK-1",
+    "Africa/Ceuta": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Africa/Conakry": "GMT0",
+    "Africa/Dakar": "GMT0",
+    "Africa/Dar_es_Salaam": "EAT-3",
+    "Africa/Djibouti": "EAT-3",
+    "Africa/Douala": "WAT-1",
+    "Africa/El_Aaiun": "UNK-1",
+    "Africa/Freetown": "GMT0",
+    "Africa/Gaborone": "CAT-2",
+    "Africa/Harare": "CAT-2",
+    "Africa/Johannesburg": "SAST-2",
+    "Africa/Juba": "EAT-3",
+    "Africa/Kampala": "EAT-3",
+    "Africa/Khartoum": "CAT-2",
+    "Africa/Kigali": "CAT-2",
+    "Africa/Kinshasa": "WAT-1",
+    "Africa/Lagos": "WAT-1",
+    "Africa/Libreville": "WAT-1",
+    "Africa/Lome": "GMT0",
+    "Africa/Luanda": "WAT-1",
+    "Africa/Lubumbashi": "CAT-2",
+    "Africa/Lusaka": "CAT-2",
+    "Africa/Malabo": "WAT-1",
+    "Africa/Maputo": "CAT-2",
+    "Africa/Maseru": "SAST-2",
+    "Africa/Mbabane": "SAST-2",
+    "Africa/Mogadishu": "EAT-3",
+    "Africa/Monrovia": "GMT0",
+    "Africa/Nairobi": "EAT-3",
+    "Africa/Ndjamena": "WAT-1",
+    "Africa/Niamey": "WAT-1",
+    "Africa/Nouakchott": "GMT0",
+    "Africa/Ouagadougou": "GMT0",
+    "Africa/Porto-Novo": "WAT-1",
+    "Africa/Sao_Tome": "GMT0",
+    "Africa/Tripoli": "EET-2",
+    "Africa/Tunis": "CET-1",
+    "Africa/Windhoek": "CAT-2",
+    "America/Adak": "HST10HDT,M3.2.0,M11.1.0",
+    "America/Anchorage": "AKST9AKDT,M3.2.0,M11.1.0",
+    "America/Anguilla": "AST4",
+    "America/Antigua": "AST4",
+    "America/Araguaina": "UNK3",
+    "America/Argentina/Buenos_Aires": "UNK3",
+    "America/Argentina/Catamarca": "UNK3",
+    "America/Argentina/Cordoba": "UNK3",
+    "America/Argentina/Jujuy": "UNK3",
+    "America/Argentina/La_Rioja": "UNK3",
+    "America/Argentina/Mendoza": "UNK3",
+    "America/Argentina/Rio_Gallegos": "UNK3",
+    "America/Argentina/Salta": "UNK3",
+    "America/Argentina/San_Juan": "UNK3",
+    "America/Argentina/San_Luis": "UNK3",
+    "America/Argentina/Tucuman": "UNK3",
+    "America/Argentina/Ushuaia": "UNK3",
+    "America/Aruba": "AST4",
+    "America/Asuncion": "UNK4UNK,M10.1.0/0,M3.4.0/0",
+    "America/Atikokan": "EST5",
+    "America/Bahia": "UNK3",
+    "America/Bahia_Banderas": "CST6CDT,M4.1.0,M10.5.0",
+    "America/Barbados": "AST4",
+    "America/Belem": "UNK3",
+    "America/Belize": "CST6",
+    "America/Blanc-Sablon": "AST4",
+    "America/Boa_Vista": "UNK4",
+    "America/Bogota": "UNK5",
+    "America/Boise": "MST7MDT,M3.2.0,M11.1.0",
+    "America/Cambridge_Bay": "MST7MDT,M3.2.0,M11.1.0",
+    "America/Campo_Grande": "UNK4",
+    "America/Cancun": "EST5",
+    "America/Caracas": "UNK4",
+    "America/Cayenne": "UNK3",
+    "America/Cayman": "EST5",
+    "America/Chicago": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Chihuahua": "MST7MDT,M4.1.0,M10.5.0",
+    "America/Costa_Rica": "CST6",
+    "America/Creston": "MST7",
+    "America/Cuiaba": "UNK4",
+    "America/Curacao": "AST4",
+    "America/Danmarkshavn": "GMT0",
+    "America/Dawson": "MST7",
+    "America/Dawson_Creek": "MST7",
+    "America/Denver": "MST7MDT,M3.2.0,M11.1.0",
+    "America/Detroit": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Dominica": "AST4",
+    "America/Edmonton": "MST7MDT,M3.2.0,M11.1.0",
+    "America/Eirunepe": "UNK5",
+    "America/El_Salvador": "CST6",
+    "America/Fort_Nelson": "MST7",
+    "America/Fortaleza": "UNK3",
+    "America/Glace_Bay": "AST4ADT,M3.2.0,M11.1.0",
+    "America/Godthab": "UNK3UNK,M3.5.0/-2,M10.5.0/-1",
+    "America/Goose_Bay": "AST4ADT,M3.2.0,M11.1.0",
+    "America/Grand_Turk": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Grenada": "AST4",
+    "America/Guadeloupe": "AST4",
+    "America/Guatemala": "CST6",
+    "America/Guayaquil": "UNK5",
+    "America/Guyana": "UNK4",
+    "America/Halifax": "AST4ADT,M3.2.0,M11.1.0",
+    "America/Havana": "CST5CDT,M3.2.0/0,M11.1.0/1",
+    "America/Hermosillo": "MST7",
+    "America/Indiana/Indianapolis": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Indiana/Knox": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Indiana/Marengo": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Indiana/Petersburg": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Indiana/Tell_City": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Indiana/Vevay": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Indiana/Vincennes": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Indiana/Winamac": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Inuvik": "MST7MDT,M3.2.0,M11.1.0",
+    "America/Iqaluit": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Jamaica": "EST5",
+    "America/Juneau": "AKST9AKDT,M3.2.0,M11.1.0",
+    "America/Kentucky/Louisville": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Kentucky/Monticello": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Kralendijk": "AST4",
+    "America/La_Paz": "UNK4",
+    "America/Lima": "UNK5",
+    "America/Los_Angeles": "PST8PDT,M3.2.0,M11.1.0",
+    "America/Lower_Princes": "AST4",
+    "America/Maceio": "UNK3",
+    "America/Managua": "CST6",
+    "America/Manaus": "UNK4",
+    "America/Marigot": "AST4",
+    "America/Martinique": "AST4",
+    "America/Matamoros": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Mazatlan": "MST7MDT,M4.1.0,M10.5.0",
+    "America/Menominee": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Merida": "CST6CDT,M4.1.0,M10.5.0",
+    "America/Metlakatla": "AKST9AKDT,M3.2.0,M11.1.0",
+    "America/Mexico_City": "CST6CDT,M4.1.0,M10.5.0",
+    "America/Miquelon": "UNK3UNK,M3.2.0,M11.1.0",
+    "America/Moncton": "AST4ADT,M3.2.0,M11.1.0",
+    "America/Monterrey": "CST6CDT,M4.1.0,M10.5.0",
+    "America/Montevideo": "UNK3",
+    "America/Montreal": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Montserrat": "AST4",
+    "America/Nassau": "EST5EDT,M3.2.0,M11.1.0",
+    "America/New_York": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Nipigon": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Nome": "AKST9AKDT,M3.2.0,M11.1.0",
+    "America/Noronha": "UNK2",
+    "America/North_Dakota/Beulah": "CST6CDT,M3.2.0,M11.1.0",
+    "America/North_Dakota/Center": "CST6CDT,M3.2.0,M11.1.0",
+    "America/North_Dakota/New_Salem": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Ojinaga": "MST7MDT,M3.2.0,M11.1.0",
+    "America/Panama": "EST5",
+    "America/Pangnirtung": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Paramaribo": "UNK3",
+    "America/Phoenix": "MST7",
+    "America/Port-au-Prince": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Port_of_Spain": "AST4",
+    "America/Porto_Velho": "UNK4",
+    "America/Puerto_Rico": "AST4",
+    "America/Punta_Arenas": "UNK3",
+    "America/Rainy_River": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Rankin_Inlet": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Recife": "UNK3",
+    "America/Regina": "CST6",
+    "America/Resolute": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Rio_Branco": "UNK5",
+    "America/Santarem": "UNK3",
+    "America/Santiago": "UNK4UNK,M9.1.6/24,M4.1.6/24",
+    "America/Santo_Domingo": "AST4",
+    "America/Sao_Paulo": "UNK3",
+    "America/Scoresbysund": "UNK1UNK,M3.5.0/0,M10.5.0/1",
+    "America/Sitka": "AKST9AKDT,M3.2.0,M11.1.0",
+    "America/St_Barthelemy": "AST4",
+    "America/St_Johns": "NST3:30NDT,M3.2.0,M11.1.0",
+    "America/St_Kitts": "AST4",
+    "America/St_Lucia": "AST4",
+    "America/St_Thomas": "AST4",
+    "America/St_Vincent": "AST4",
+    "America/Swift_Current": "CST6",
+    "America/Tegucigalpa": "CST6",
+    "America/Thule": "AST4ADT,M3.2.0,M11.1.0",
+    "America/Thunder_Bay": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Tijuana": "PST8PDT,M3.2.0,M11.1.0",
+    "America/Toronto": "EST5EDT,M3.2.0,M11.1.0",
+    "America/Tortola": "AST4",
+    "America/Vancouver": "PST8PDT,M3.2.0,M11.1.0",
+    "America/Whitehorse": "MST7",
+    "America/Winnipeg": "CST6CDT,M3.2.0,M11.1.0",
+    "America/Yakutat": "AKST9AKDT,M3.2.0,M11.1.0",
+    "America/Yellowknife": "MST7MDT,M3.2.0,M11.1.0",
+    "Antarctica/Casey": "UNK-8",
+    "Antarctica/Davis": "UNK-7",
+    "Antarctica/DumontDUrville": "UNK-10",
+    "Antarctica/Macquarie": "UNK-11",
+    "Antarctica/Mawson": "UNK-5",
+    "Antarctica/McMurdo": "NZST-12NZDT,M9.5.0,M4.1.0/3",
+    "Antarctica/Palmer": "UNK3",
+    "Antarctica/Rothera": "UNK3",
+    "Antarctica/Syowa": "UNK-3",
+    "Antarctica/Troll": "UNK0UNK-2,M3.5.0/1,M10.5.0/3",
+    "Antarctica/Vostok": "UNK-6",
+    "Arctic/Longyearbyen": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Asia/Aden": "UNK-3",
+    "Asia/Almaty": "UNK-6",
+    "Asia/Amman": "EET-2EEST,M3.5.4/24,M10.5.5/1",
+    "Asia/Anadyr": "UNK-12",
+    "Asia/Aqtau": "UNK-5",
+    "Asia/Aqtobe": "UNK-5",
+    "Asia/Ashgabat": "UNK-5",
+    "Asia/Atyrau": "UNK-5",
+    "Asia/Baghdad": "UNK-3",
+    "Asia/Bahrain": "UNK-3",
+    "Asia/Baku": "UNK-4",
+    "Asia/Bangkok": "UNK-7",
+    "Asia/Barnaul": "UNK-7",
+    "Asia/Beirut": "EET-2EEST,M3.5.0/0,M10.5.0/0",
+    "Asia/Bishkek": "UNK-6",
+    "Asia/Brunei": "UNK-8",
+    "Asia/Chita": "UNK-9",
+    "Asia/Choibalsan": "UNK-8",
+    "Asia/Colombo": "UNK-5:30",
+    "Asia/Damascus": "EET-2EEST,M3.5.5/0,M10.5.5/0",
+    "Asia/Dhaka": "UNK-6",
+    "Asia/Dili": "UNK-9",
+    "Asia/Dubai": "UNK-4",
+    "Asia/Dushanbe": "UNK-5",
+    "Asia/Famagusta": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Asia/Gaza": "EET-2EEST,M3.5.5/0,M10.5.6/1",
+    "Asia/Hebron": "EET-2EEST,M3.5.5/0,M10.5.6/1",
+    "Asia/Ho_Chi_Minh": "UNK-7",
+    "Asia/Hong_Kong": "HKT-8",
+    "Asia/Hovd": "UNK-7",
+    "Asia/Irkutsk": "UNK-8",
+    "Asia/Jakarta": "WIB-7",
+    "Asia/Jayapura": "WIT-9",
+    "Asia/Jerusalem": "IST-2IDT,M3.4.4/26,M10.5.0",
+    "Asia/Kabul": "UNK-4:30",
+    "Asia/Kamchatka": "UNK-12",
+    "Asia/Karachi": "PKT-5",
+    "Asia/Kathmandu": "UNK-5:45",
+    "Asia/Khandyga": "UNK-9",
+    "Asia/Kolkata": "IST-5:30",
+    "Asia/Krasnoyarsk": "UNK-7",
+    "Asia/Kuala_Lumpur": "UNK-8",
+    "Asia/Kuching": "UNK-8",
+    "Asia/Kuwait": "UNK-3",
+    "Asia/Macau": "CST-8",
+    "Asia/Magadan": "UNK-11",
+    "Asia/Makassar": "WITA-8",
+    "Asia/Manila": "PST-8",
+    "Asia/Muscat": "UNK-4",
+    "Asia/Nicosia": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Asia/Novokuznetsk": "UNK-7",
+    "Asia/Novosibirsk": "UNK-7",
+    "Asia/Omsk": "UNK-6",
+    "Asia/Oral": "UNK-5",
+    "Asia/Phnom_Penh": "UNK-7",
+    "Asia/Pontianak": "WIB-7",
+    "Asia/Pyongyang": "KST-9",
+    "Asia/Qatar": "UNK-3",
+    "Asia/Qyzylorda": "UNK-5",
+    "Asia/Riyadh": "UNK-3",
+    "Asia/Sakhalin": "UNK-11",
+    "Asia/Samarkand": "UNK-5",
+    "Asia/Seoul": "KST-9",
+    "Asia/Shanghai": "CST-8",
+    "Asia/Singapore": "UNK-8",
+    "Asia/Srednekolymsk": "UNK-11",
+    "Asia/Taipei": "CST-8",
+    "Asia/Tashkent": "UNK-5",
+    "Asia/Tbilisi": "UNK-4",
+    "Asia/Tehran": "UNK-3:30UNK,J79/24,J263/24",
+    "Asia/Thimphu": "UNK-6",
+    "Asia/Tokyo": "JST-9",
+    "Asia/Tomsk": "UNK-7",
+    "Asia/Ulaanbaatar": "UNK-8",
+    "Asia/Urumqi": "UNK-6",
+    "Asia/Ust-Nera": "UNK-10",
+    "Asia/Vientiane": "UNK-7",
+    "Asia/Vladivostok": "UNK-10",
+    "Asia/Yakutsk": "UNK-9",
+    "Asia/Yangon": "UNK-6:30",
+    "Asia/Yekaterinburg": "UNK-5",
+    "Asia/Yerevan": "UNK-4",
+    "Atlantic/Azores": "UNK1UNK,M3.5.0/0,M10.5.0/1",
+    "Atlantic/Bermuda": "AST4ADT,M3.2.0,M11.1.0",
+    "Atlantic/Canary": "WET0WEST,M3.5.0/1,M10.5.0",
+    "Atlantic/Cape_Verde": "UNK1",
+    "Atlantic/Faroe": "WET0WEST,M3.5.0/1,M10.5.0",
+    "Atlantic/Madeira": "WET0WEST,M3.5.0/1,M10.5.0",
+    "Atlantic/Reykjavik": "GMT0",
+    "Atlantic/South_Georgia": "UNK2",
+    "Atlantic/St_Helena": "GMT0",
+    "Atlantic/Stanley": "UNK3",
+    "Australia/Adelaide": "ACST-9:30ACDT,M10.1.0,M4.1.0/3",
+    "Australia/Brisbane": "AEST-10",
+    "Australia/Broken_Hill": "ACST-9:30ACDT,M10.1.0,M4.1.0/3",
+    "Australia/Currie": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+    "Australia/Darwin": "ACST-9:30",
+    "Australia/Eucla": "UNK-8:45",
+    "Australia/Hobart": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+    "Australia/Lindeman": "AEST-10",
+    "Australia/Lord_Howe": "UNK-10:30UNK-11,M10.1.0,M4.1.0",
+    "Australia/Melbourne": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+    "Australia/Perth": "AWST-8",
+    "Australia/Sydney": "AEST-10AEDT,M10.1.0,M4.1.0/3",
+    "Etc/GMT": "GMT0",
+    "Etc/GMT+0": "GMT0",
+    "Etc/GMT+1": "UNK1",
+    "Etc/GMT+10": "UNK10",
+    "Etc/GMT+11": "UNK11",
+    "Etc/GMT+12": "UNK12",
+    "Etc/GMT+2": "UNK2",
+    "Etc/GMT+3": "UNK3",
+    "Etc/GMT+4": "UNK4",
+    "Etc/GMT+5": "UNK5",
+    "Etc/GMT+6": "UNK6",
+    "Etc/GMT+7": "UNK7",
+    "Etc/GMT+8": "UNK8",
+    "Etc/GMT+9": "UNK9",
+    "Etc/GMT-0": "GMT0",
+    "Etc/GMT-1": "UNK-1",
+    "Etc/GMT-10": "UNK-10",
+    "Etc/GMT-11": "UNK-11",
+    "Etc/GMT-12": "UNK-12",
+    "Etc/GMT-13": "UNK-13",
+    "Etc/GMT-14": "UNK-14",
+    "Etc/GMT-2": "UNK-2",
+    "Etc/GMT-3": "UNK-3",
+    "Etc/GMT-4": "UNK-4",
+    "Etc/GMT-5": "UNK-5",
+    "Etc/GMT-6": "UNK-6",
+    "Etc/GMT-7": "UNK-7",
+    "Etc/GMT-8": "UNK-8",
+    "Etc/GMT-9": "UNK-9",
+    "Etc/GMT0": "GMT0",
+    "Etc/Greenwich": "GMT0",
+    "Etc/UCT": "UTC0",
+    "Etc/UTC": "UTC0",
+    "Etc/Universal": "UTC0",
+    "Etc/Zulu": "UTC0",
+    "Europe/Amsterdam": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Andorra": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Astrakhan": "UNK-4",
+    "Europe/Athens": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Belgrade": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Berlin": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Bratislava": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Brussels": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Bucharest": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Budapest": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Busingen": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Chisinau": "EET-2EEST,M3.5.0,M10.5.0/3",
+    "Europe/Copenhagen": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Dublin": "IST-1GMT0,M10.5.0,M3.5.0/1",
+    "Europe/Gibraltar": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Guernsey": "GMT0BST,M3.5.0/1,M10.5.0",
+    "Europe/Helsinki": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Isle_of_Man": "GMT0BST,M3.5.0/1,M10.5.0",
+    "Europe/Istanbul": "UNK-3",
+    "Europe/Jersey": "GMT0BST,M3.5.0/1,M10.5.0",
+    "Europe/Kaliningrad": "EET-2",
+    "Europe/Kiev": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Kirov": "UNK-3",
+    "Europe/Lisbon": "WET0WEST,M3.5.0/1,M10.5.0",
+    "Europe/Ljubljana": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/London": "GMT0BST,M3.5.0/1,M10.5.0",
+    "Europe/Luxembourg": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Madrid": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Malta": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Mariehamn": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Minsk": "UNK-3",
+    "Europe/Monaco": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Moscow": "MSK-3",
+    "Europe/Oslo": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Paris": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Podgorica": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Prague": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Riga": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Rome": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Samara": "UNK-4",
+    "Europe/San_Marino": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Sarajevo": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Saratov": "UNK-4",
+    "Europe/Simferopol": "MSK-3",
+    "Europe/Skopje": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Sofia": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Stockholm": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Tallinn": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Tirane": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Ulyanovsk": "UNK-4",
+    "Europe/Uzhgorod": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Vaduz": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Vatican": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Vienna": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Vilnius": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Volgograd": "UNK-4",
+    "Europe/Warsaw": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Zagreb": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Europe/Zaporozhye": "EET-2EEST,M3.5.0/3,M10.5.0/4",
+    "Europe/Zurich": "CET-1CEST,M3.5.0,M10.5.0/3",
+    "Indian/Antananarivo": "EAT-3",
+    "Indian/Chagos": "UNK-6",
+    "Indian/Christmas": "UNK-7",
+    "Indian/Cocos": "UNK-6:30",
+    "Indian/Comoro": "EAT-3",
+    "Indian/Kerguelen": "UNK-5",
+    "Indian/Mahe": "UNK-4",
+    "Indian/Maldives": "UNK-5",
+    "Indian/Mauritius": "UNK-4",
+    "Indian/Mayotte": "EAT-3",
+    "Indian/Reunion": "UNK-4",
+    "Pacific/Apia": "UNK-13UNK,M9.5.0/3,M4.1.0/4",
+    "Pacific/Auckland": "NZST-12NZDT,M9.5.0,M4.1.0/3",
+    "Pacific/Bougainville": "UNK-11",
+    "Pacific/Chatham": "UNK-12:45UNK,M9.5.0/2:45,M4.1.0/3:45",
+    "Pacific/Chuuk": "UNK-10",
+    "Pacific/Easter": "UNK6UNK,M9.1.6/22,M4.1.6/22",
+    "Pacific/Efate": "UNK-11",
+    "Pacific/Enderbury": "UNK-13",
+    "Pacific/Fakaofo": "UNK-13",
+    "Pacific/Fiji": "UNK-12UNK,M11.2.0,M1.2.3/99",
+    "Pacific/Funafuti": "UNK-12",
+    "Pacific/Galapagos": "UNK6",
+    "Pacific/Gambier": "UNK9",
+    "Pacific/Guadalcanal": "UNK-11",
+    "Pacific/Guam": "ChST-10",
+    "Pacific/Honolulu": "HST10",
+    "Pacific/Kiritimati": "UNK-14",
+    "Pacific/Kosrae": "UNK-11",
+    "Pacific/Kwajalein": "UNK-12",
+    "Pacific/Majuro": "UNK-12",
+    "Pacific/Marquesas": "UNK9:30",
+    "Pacific/Midway": "SST11",
+    "Pacific/Nauru": "UNK-12",
+    "Pacific/Niue": "UNK11",
+    "Pacific/Norfolk": "UNK-11UNK,M10.1.0,M4.1.0/3",
+    "Pacific/Noumea": "UNK-11",
+    "Pacific/Pago_Pago": "SST11",
+    "Pacific/Palau": "UNK-9",
+    "Pacific/Pitcairn": "UNK8",
+    "Pacific/Pohnpei": "UNK-11",
+    "Pacific/Port_Moresby": "UNK-10",
+    "Pacific/Rarotonga": "UNK10",
+    "Pacific/Saipan": "ChST-10",
+    "Pacific/Tahiti": "UNK10",
+    "Pacific/Tarawa": "UNK-12",
+    "Pacific/Tongatapu": "UNK-13",
+    "Pacific/Wake": "UNK-12",
+    "Pacific/Wallis": "UNK-12"
+  };

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Controls from './Controls.svelte';
+	import { socket } from '$lib/stores';
+	import Spinner from '$lib/components/Spinner.svelte';
+</script>
+<div class="select-none">
+    {#if !$socket}
+        <div class="absolute left-0 flex flex-col w-screen h-screen justify-center items-center backdrop-blur-sm z-10">
+            <Spinner/>
+            <h2>Waiting for connection</h2>
+        </div>
+    {/if}
+    <Controls />
+    <slot/>
+</div>

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

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

app/src/routes/controller/Controls.svelte

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

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { location } from '$lib/utilities';
+
+	let videoStream = `//${location}/api/stream`;
+
+	onDestroy(() => {
+		videoStream = '#';
+	});
+</script>
+
+<div class="w-full h-full">
+	<img
+		src={videoStream}
+		class="absolute object-cover blur-3xl w-full h-full -z-10"
+		alt="Live stream is down"
+	/>
+	<img src={videoStream} class="object-contain w-full h-full" alt="Live stream is down" />
+</div>

app/src/routes/login.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import logo from '$lib/assets/logo512.png';
+	import InputPassword from '$lib/components/InputPassword.svelte';
+	import { user } from '$lib/stores/user';
+	import { notifications } from '$lib/components/toasts/notifications';
+	import { fade, fly } from 'svelte/transition';
+	import Login from '~icons/tabler/login';
+	import { api } from '$lib/api';
+	import type { JWT } from '$lib/models';
+
+	type SignInData = {
+		password: string;
+		username: string;
+	};
+
+	let username = '';
+	let password = '';
+
+	let loginFailed = false;
+
+	let token = { access_token: '' };
+
+	async function signInUser(data: SignInData) {
+        const result = await api.post<JWT>('/api/signIn', data)
+		if (result.isErr()){
+            username = '';
+            password = '';
+            notifications.error('Wrong Username or Password!', 5000);
+            loginFailed = true;
+            setTimeout(() => {
+                loginFailed = false;
+            }, 1500);
+            return
+        }
+        token = result.inner;
+        user.init(token.access_token);
+        username = $user.username;
+        notifications.success('User ' + username + ' signed in', 5000);
+	}
+</script>
+
+<div class="hero from-primary/30 to-secondary/30 min-h-screen bg-gradient-to-br">
+	<div
+		class="card lg:card-side bg-base-100 face shadow-2xl {loginFailed
+			? 'failure border-error border-2'
+			: ''}"
+		in:fly={{ delay: 200, y: 100, duration: 500 }}
+		out:fade={{ duration: 200 }}
+	>
+		<figure class="bg-base-200"><img src={logo} alt="Logo" class="h-auto w-48 lg:w-64" /></figure>
+		<div class="card-body w-80">
+			<h2 class="card-title text-2xl">Login</h2>
+			<form class="form-control w-full max-w-xs">
+				<label class="label" for="user">
+					<span class="label-text text-md">Username</span>
+				</label>
+				<input
+					type="text"
+					class="input input-bordered w-full max-w-xs"
+					id="user"
+					bind:value={username}
+				/>
+
+				<label class="label" for="pwd">
+					<span class="label-text text-md">Password</span>
+				</label>
+				<InputPassword id="pwd" bind:value={password} />
+
+				<div class="card-actions mt-4 justify-end">
+					<button
+						class="btn btn-primary inline-flex items-center"
+						on:click={() => {
+							signInUser({ username, password });
+						}}><Login class="mr-2 h-5 w-5" /><span>Login</span></button
+					>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
+
+<style>
+	.failure {
+		animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+		transform: translate3d(0, 0, 0);
+		backface-visibility: hidden;
+		perspective: 1000px;
+	}
+	@keyframes shake {
+		10%,
+		90% {
+			transform: translatex(-1px);
+		}
+
+		20%,
+		80% {
+			transform: translatex(2px);
+		}
+
+		30%,
+		50%,
+		70% {
+			transform: translatex(-4px);
+		}
+
+		40%,
+		60% {
+			transform: translatex(4px);
+		}
+	}
+</style>

app/src/routes/menu.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+	import logo from '$lib/assets/logo512.png';
+	import MdiGithub from '~icons/mdi/github';
+    import MdiConnection from '~icons/mdi/connection';
+	import Users from '~icons/mdi/users';
+	import Settings from '~icons/mdi/settings';
+    import MdiController from '~icons/mdi/controller';
+    import Devices from '~icons/mdi/devices'
+    import Camera from '~icons/mdi/camera-outline';
+    import Rotate3d from '~icons/mdi/rotate-3d';
+    import MdiLandslideOutline from '~icons/mdi/landslide-outline';
+    import MotorOutline from '~icons/mdi/motor-outline';
+	import Health from '~icons/mdi/stethoscope';
+	import Folder from '~icons/mdi/folder-outline';
+	import Update from '~icons/mdi/reload';
+	import WiFi from '~icons/mdi/wifi';
+	import Router from '~icons/mdi/router';
+	import AP from '~icons/mdi/access-point';
+	import Remote from '~icons/mdi/network';
+	import Avatar from '~icons/mdi/user-circle';
+	import Logout from '~icons/mdi/logout';
+	import Copyright from '~icons/mdi/copyright';
+	import NTP from '~icons/mdi/clock-check';
+	import Metrics from '~icons/mdi/report-bar';
+	import { page } from '$app/stores';
+	import { user } from '$lib/stores/user';
+	import { createEventDispatcher } from 'svelte';
+
+	const appName = $page.data.app_name;
+
+	const copyright = $page.data.copyright;
+
+	const github = { href: 'https://github.com/' + $page.data.github, active: true };
+
+	type menuItem = {
+		title: string;
+		icon: ConstructorOfATypedSvelteComponent;
+		href?: string;
+		feature: boolean;
+		active?: boolean;
+		submenu?: subMenuItem[];
+	};
+
+	type subMenuItem = {
+		title: string;
+		icon: ConstructorOfATypedSvelteComponent;
+		href: string;
+		feature: boolean;
+		active: boolean;
+	};
+
+	let menuItems = [
+        {
+            title: 'Controller',
+            icon: MdiController,
+            href: '/controller',
+            feature: true,
+        },
+        {
+			title: 'Peripherals',
+			icon: Devices,
+			feature: true,
+			submenu: [
+                {
+					title: 'I2C',
+					icon: MdiConnection,
+					href: '/peripherals/i2c',
+					feature: true,
+				},
+				{
+					title: 'Camera',
+					icon: Camera,
+					href: '/peripherals/camera',
+					feature: $page.data.features.camera,
+				},
+                {
+					title: 'Servo',
+					icon: MotorOutline,
+					href: '/peripherals/servo',
+					feature: true,
+				},
+                {
+					title: 'IMU',
+					icon: Rotate3d,
+					href: '/peripherals/imu',
+					feature: $page.data.features.imu || $page.data.features.mag || $page.data.features.bmp,
+				},
+                {
+					title: 'Lidar',
+					icon: MdiLandslideOutline,
+					href: '/peripherals/lidar',
+					feature: true//$page.data.features.lidar,
+				}
+			]
+		},
+		{
+			title: 'Connections',
+			icon: Remote,
+			feature: $page.data.features.ntp,
+			submenu: [
+				{
+					title: 'NTP',
+					icon: NTP,
+					href: '/connections/ntp',
+					feature: $page.data.features.ntp,
+					
+				}
+			]
+		},
+		{
+			title: 'WiFi',
+			icon: WiFi,
+			feature: true,
+			submenu: [
+				{
+					title: 'WiFi Station',
+					icon: Router,
+					href: '/wifi/sta',
+					feature: true,
+					
+				},
+				{
+					title: 'Access Point',
+					icon: AP,
+					href: '/wifi/ap',
+					feature: true,
+					
+				}
+			]
+		},
+		{
+			title: 'Users',
+			icon: Users,
+			href: '/user',
+			feature: $page.data.features.security && $user.admin,
+			
+		},
+		{
+			title: 'System',
+			icon: Settings,
+			feature: true,
+			submenu: [
+				{
+					title: 'System Status',
+					icon: Health,
+					href: '/system/status',
+					feature: true,
+					
+				},
+                {
+					title: 'File System',
+					icon: Folder,
+					href: '/system/filesystem',
+					feature: true,
+					
+				},
+				{
+					title: 'System Metrics',
+					icon: Metrics,
+					href: '/system/metrics',
+					feature: $page.data.features.analytics,
+					
+				},
+				{
+					title: 'Firmware Update',
+					icon: Update,
+					href: '/system/update',
+					feature:
+						($page.data.features.ota ||
+							$page.data.features.upload_firmware ||
+							$page.data.features.download_firmware) &&
+						(!$page.data.features.security || $user.admin),
+				}
+			]
+		}
+	] as menuItem[];
+
+	const dispatch = createEventDispatcher();
+
+	function setActiveMenuItem(targetTitle: string) {
+		menuItems.forEach(item => {
+			item.active = item.title === targetTitle;
+			item.submenu?.forEach(subItem => {
+				subItem.active = subItem.title === targetTitle;
+			});
+		});
+		menuItems = menuItems
+		dispatch('menuClicked');
+	}
+
+	$: setActiveMenuItem($page.data.title);
+</script>
+
+<div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4">
+	<!-- Sidebar content here -->
+	<a
+		href="/"
+		class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
+		on:click={() => setActiveMenuItem('')}
+	>
+		<img src={logo} alt="Logo" class="h-12 w-12" />
+		<h1 class="px-4 text-2xl font-bold">{appName}</h1>
+	</a>
+	<ul class="menu rounded-box menu-vertical flex-nowrap overflow-y-auto">
+		{#each menuItems as menuItem, i (menuItem.title)}
+			{#if menuItem.feature}
+				<li>
+					{#if menuItem.submenu}
+						<details>
+							<summary class="text-lg font-bold">
+								<svelte:component this={menuItem.icon} class="h-6 w-6" />
+								{menuItem.title}
+							</summary>
+							<ul>
+								{#each menuItem.submenu as subMenuItem}
+									{#if subMenuItem.feature}
+										<li class="hover-bordered">
+											<a
+												href={subMenuItem.href}
+												class:bg-base-100={subMenuItem.active}
+												class="text-ml font-bold"
+												on:click={() => {
+													setActiveMenuItem(subMenuItem.title);
+													menuItems = menuItems;
+												}}
+												><svelte:component
+													this={subMenuItem.icon}
+													class="h-5 w-5"
+												/>{subMenuItem.title}</a
+											>
+										</li>
+									{/if}
+								{/each}
+							</ul>
+						</details>
+					{:else}
+						<a
+							href={menuItem.href}
+							class:bg-base-100={menuItem.active}
+							class="text-lg font-bold"
+							on:click={() => {
+								setActiveMenuItem(menuItem.title);
+								menuItems = menuItems;
+							}}><svelte:component this={menuItem.icon} class="h-6 w-6" />{menuItem.title}</a
+						>
+					{/if}
+				</li>
+			{/if}
+		{/each}
+	</ul>
+
+	<div class="flex-col" />
+	<div class="flex-grow" />
+
+	{#if $page.data.features.security}
+		<div class="flex items-center">
+			<Avatar class="h-8 w-8" />
+			<span class="flex-grow px-4 text-xl font-bold">{$user.username}</span>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class="btn btn-ghost"
+				on:click={() => {
+					user.invalidate();
+				}}
+			>
+				<Logout class="h-8 w-8 rotate-180" />
+			</div>
+		</div>
+	{/if}
+
+	<div class="divider my-0" />
+	<div class="flex items-center">
+		{#if github.active}
+			<a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer"
+				><MdiGithub class="h-5 w-5" /></a
+			>
+		{/if}
+		<div class="inline-flex flex-grow items-center justify-end text-sm">
+			<Copyright class="h-4 w-4" /><span class="px-2">{copyright}</span>
+		</div>
+	</div>
+</div>

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

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

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { api } from '$lib/api';
 	import Spinner from '$lib/components/Spinner.svelte';
-    import type { CameraSettings } from '$lib/types/models';
+    import type { CameraSettings } from '$lib/models';
-    let settings:CameraSettings = $state()
+    let settings:CameraSettings
 
     const getCameraSettings = async () => {
         const result = await api.get<CameraSettings>('/api/camera/settings')
@@ -27,7 +27,7 @@
     <Spinner />
 {:then _} 
     <div class="flex flex-col gap-1">
-        <button class="btn btn-primary" type="button" onclick={updateCameraSettings}>Update camera settings</button>
+        <button class="btn btn-primary" type="button" on:click={updateCameraSettings}>Update camera settings</button>
 
         <label for="brightness">
             Brightness {settings.brightness}

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

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

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

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

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

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

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

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

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

@@ -1,253 +1,304 @@
 <script lang="ts">
-  import SettingsCard from '$lib/components/SettingsCard.svelte'
+	import SettingsCard from "$lib/components/SettingsCard.svelte";
-  import { imu } from '$lib/stores/imu'
+    import Rotate3d from '~icons/mdi/rotate-3d';
-  import { Chart, registerables } from 'chart.js'
+    import { imu } from '$lib/stores/imu';
-  import { cubicOut } from 'svelte/easing'
+    import { Chart, registerables } from 'chart.js';
-  import { slide } from 'svelte/transition'
+	import { cubicOut } from "svelte/easing";
-  import { onDestroy, onMount } from 'svelte'
+	import { slide } from "svelte/transition";
-  import { socket } from '$lib/stores'
+	import { onDestroy, onMount } from "svelte";
-  import type { IMU } from '$lib/types/models'
+	import { daisyColor } from "$lib/DaisyUiHelper";
-  import { useFeatureFlags } from '$lib/stores/featureFlags'
+	import { socket } from "$lib/stores";
-  import { Rotate3d } from '$lib/components/icons'
+	import type { IMU } from "$lib/types/models";
+	import { page } from "$app/stores";
 
-  Chart.register(...registerables)
+    Chart.register(...registerables);
 
-  const features = useFeatureFlags()
+    let angleChartElement: HTMLCanvasElement;
-  let intervalId: number
+	let angleChart: Chart;
 
-  let angleChartElement: HTMLCanvasElement = $state()
+    let tempChartElement: HTMLCanvasElement;
-  let tempChartElement: HTMLCanvasElement = $state()
+	let tempChart: Chart;
-  let altitudeChartElement: HTMLCanvasElement = $state()
 
-  let angleChart: Chart
+    let altitudeChartElement: HTMLCanvasElement;
-  let tempChart: Chart
+	let altitudeChart: Chart;
-  let altitudeChart: Chart
 
-  const getChartColors = () => {
+    const handleImu = (data: IMU) => {
-    const style = getComputedStyle(document.body)
+        console.log(data);
-    return {
+        
-      primary: style.getPropertyValue('--color-primary'),
+        imu.addData(data);   
-      secondary: style.getPropertyValue('--color-secondary'),
-      accent: style.getPropertyValue('--color-accent'),
-      background: style.getPropertyValue('--color-background')
     }
-  }
 
-  const createBaseChartConfig = (bgColor: string) => ({
+    onMount(() => {
-    maintainAspectRatio: false,
+        socket.on('imu', handleImu);
-    responsive: true,
+        angleChart = new Chart(angleChartElement, {
-    plugins: {
+			type: 'line',
-      legend: { display: true },
+			data: {
-      tooltip: { mode: 'index', intersect: false }
+				datasets: [
-    },
+					{
-    elements: { point: { radius: 1 } },
+						label: 'x',
-    scales: {
+						borderColor: daisyColor('--p'),
-      x: {
+						backgroundColor: daisyColor('--p', 50),
-        grid: { color: bgColor },
+						borderWidth: 2,
-        ticks: { color: bgColor },
+						data: $imu.x,
-        display: false
+						yAxisID: 'y'
-      },
+					},
-      y: {
+					{
-        type: 'linear',
+						label: 'y',
-        position: 'left',
+						borderColor: daisyColor('--s'),
-        min: 0,
+						backgroundColor: daisyColor('--s', 50),
-        max: 10,
+						borderWidth: 2,
-        grid: { color: bgColor },
+						data: $imu.y,
-        ticks: { color: bgColor },
+						yAxisID: 'y'
-        border: { color: bgColor }
+					},
-      }
+                    {
-    }
+						label: 'z',
-  })
+						borderColor: daisyColor('--a'),
+						backgroundColor: daisyColor('--a', 50),
+						borderWidth: 2,
+						data: $imu.z,
+						yAxisID: 'y'
+					}
+				]
+			},
+			options: {
+				maintainAspectRatio: false,
+				responsive: true,
+				plugins: {
+					legend: {
+						display: true
+					},
+					tooltip: {
+						mode: 'index',
+						intersect: false
+					}
+				},
+				elements: {
+					point: {
+						radius: 1
+					}
+				},
+				scales: {
+					x: {
+						grid: {
+							color: daisyColor('--bc', 10)
+						},
+						ticks: {
+							color: daisyColor('--bc')
+						},
+						display: false
+					},
+					y: {
+						type: 'linear',
+						title: {
+							display: true,
+							text: 'Angle [°]',
+							color: daisyColor('--bc'),
+							font: {
+								size: 16,
+								weight: 'bold'
+							}
+						},
+						position: 'left',
+						min:  0,
+						max: 10,
+						grid: { color: daisyColor('--bc', 10) },
+						ticks: { color: daisyColor('--bc') },
+						border: { color: daisyColor('--bc', 10) }
+					}
+				}
+			}
+		});
+        tempChart = new Chart(tempChartElement, {
+			type: 'line',
+			data: {
+				datasets: [
+					{
+						label: 'Barometer temperature',
+						borderColor: daisyColor('--s'),
+						backgroundColor: daisyColor('--s', 50),
+						borderWidth: 2,
+						data: $imu.bmp_temp,
+						yAxisID: 'y'
+					}
+				]
+			},
+			options: {
+				maintainAspectRatio: false,
+				responsive: true,
+				plugins: {
+					legend: {
+						display: true
+					},
+					tooltip: {
+						mode: 'index',
+						intersect: false
+					}
+				},
+				elements: {
+					point: {
+						radius: 1
+					}
+				},
+				scales: {
+					x: {
+						grid: {
+							color: daisyColor('--bc', 10)
+						},
+						ticks: {
+							color: daisyColor('--bc')
+						},
+						display: false
+					},
+					y: {
+						type: 'linear',
+						title: {
+							display: true,
+							text: 'Temperature [C°]',
+							color: daisyColor('--bc'),
+							font: {
+								size: 16,
+								weight: 'bold'
+							}
+						},
+						position: 'left',
+						min:  0,
+						max: 10,
+						grid: { color: daisyColor('--bc', 10) },
+						ticks: { color: daisyColor('--bc') },
+						border: { color: daisyColor('--bc', 10) }
+					}
+				}
+			}
+		});
+        altitudeChart = new Chart(altitudeChartElement, {
+			type: 'line',
+			data: {
+				datasets: [
+					{
+						label: 'Altitude',
+						borderColor: daisyColor('--p'),
+						backgroundColor: daisyColor('--p', 50),
+						borderWidth: 2,
+						data: $imu.altitude,
+						yAxisID: 'y'
+					}
+				]
+			},
+			options: {
+				maintainAspectRatio: false,
+				responsive: true,
+				plugins: {
+					legend: {
+						display: true
+					},
+					tooltip: {
+						mode: 'index',
+						intersect: false
+					}
+				},
+				elements: {
+					point: {
+						radius: 1
+					}
+				},
+				scales: {
+					x: {
+						grid: {
+							color: daisyColor('--bc', 10)
+						},
+						ticks: {
+							color: daisyColor('--bc')
+						},
+						display: false
+					},
+					y: {
+						type: 'linear',
+						title: {
+							display: true,
+							text: 'Altitude [M]',
+							color: daisyColor('--bc'),
+							font: {
+								size: 16,
+								weight: 'bold'
+							}
+						},
+						position: 'left',
+						min:  0,
+						max: 10,
+						grid: { color: daisyColor('--bc', 10) },
+						ticks: { color: daisyColor('--bc') },
+						border: { color: daisyColor('--bc', 10) }
+					}
+				}
+			}
+		});
+        setInterval(() => {
+			updateData(), 200;
+		});
+    })
 
-  const initializeCharts = () => {
+    onDestroy(() => {
-    const colors = getChartColors()
+        socket.off('imu', handleImu);
-    const baseConfig = createBaseChartConfig(colors.background)
+    })
 
-    angleChart = new Chart(angleChartElement, {
+    const updateData = () => {
-      type: 'line',
+        if ($page.data.features.imu) {
-      data: {
+            angleChart.data.labels = $imu.x;
-        datasets: [
+            angleChart.data.datasets[0].data = $imu.x;
-          {
+            angleChart.data.datasets[1].data = $imu.y;
-            label: 'x',
+            angleChart.data.datasets[2].data = $imu.z;
-            borderColor: colors.primary,
+            angleChart.options.scales!.y!.min = Math.min(Math.min(...$imu.x), Math.min(...$imu.y), Math.min(...$imu.z)) - 1;
-            backgroundColor: colors.primary,
+            angleChart.options.scales!.y!.max = Math.max(Math.max(...$imu.x), Math.max(...$imu.y), Math.max(...$imu.z)) + 1;
-            borderWidth: 2,
+            angleChart.update('none');
-            data: $imu.x,
-            yAxisID: 'y'
-          },
-          {
-            label: 'y',
-            borderColor: colors.secondary,
-            backgroundColor: colors.secondary,
-            borderWidth: 2,
-            data: $imu.y,
-            yAxisID: 'y'
-          },
-          {
-            label: 'z',
-            borderColor: colors.accent,
-            backgroundColor: colors.accent,
-            borderWidth: 2,
-            data: $imu.z,
-            yAxisID: 'y'
-          }
-        ]
-      },
-      options: {
-        ...baseConfig,
-        scales: {
-          ...baseConfig.scales,
-          y: {
-            ...baseConfig.scales.y,
-            title: {
-              display: true,
-              text: 'Angle [°]',
-              color: colors.background,
-              font: { size: 16, weight: 'bold' }
-            }
-          }
         }
-      }
-    })
 
-    tempChart = new Chart(tempChartElement, {
+        if ($page.data.features.bmp) {
-      type: 'line',
+            tempChart.data.labels = $imu.bmp_temp;
-      data: {
+            tempChart.data.datasets[0].data = $imu.bmp_temp;
-        datasets: [
+            tempChart.options.scales!.y!.min = Math.min(...$imu.bmp_temp) - 1;
-          {
+            tempChart.options.scales!.y!.max = Math.max(...$imu.bmp_temp) + 1;
-            label: 'Barometer temperature',
+            tempChart.update('none');
-            borderColor: colors.secondary,
+    
-            backgroundColor: colors.secondary,
+            altitudeChart.data.labels = $imu.altitude;
-            borderWidth: 2,
+            altitudeChart.data.datasets[0].data = $imu.altitude;
-            data: $imu.bmp_temp,
+            altitudeChart.options.scales!.y!.min = Math.min(Math.min(...$imu.altitude)) - 1;
-            yAxisID: 'y'
+            altitudeChart.options.scales!.y!.max = Math.max(Math.max(...$imu.altitude)) + 1;
-          }
+            altitudeChart.update('none');
-        ]
-      },
-      options: {
-        ...baseConfig,
-        scales: {
-          ...baseConfig.scales,
-          y: {
-            ...baseConfig.scales.y,
-            title: {
-              display: true,
-              text: 'Temperature [C°]',
-              color: colors.background,
-              font: { size: 16, weight: 'bold' }
-            }
-          }
         }
-      }
-    })
-
-    altitudeChart = new Chart(altitudeChartElement, {
-      type: 'line',
-      data: {
-        datasets: [
-          {
-            label: 'Altitude',
-            borderColor: colors.primary,
-            backgroundColor: colors.primary,
-            borderWidth: 2,
-            data: $imu.altitude,
-            yAxisID: 'y'
-          }
-        ]
-      },
-      options: {
-        ...baseConfig,
-        scales: {
-          ...baseConfig.scales,
-          y: {
-            ...baseConfig.scales.y,
-            title: {
-              display: true,
-              text: 'Altitude [M]',
-              color: colors.background,
-              font: { size: 16, weight: 'bold' }
-            }
-          }
-        }
-      }
-    })
-  }
-
-  const updateChartData = (chart: Chart, data: number[], label: string) => {
-    chart.data.labels = data
-    chart.data.datasets[0].data = data
-    chart.options.scales!.y!.min = Math.min(...data) - 1
-    chart.options.scales!.y!.max = Math.max(...data) + 1
-    chart.update('none')
-  }
-
-  const updateData = () => {
-    if ($features.imu) {
-      angleChart.data.labels = $imu.x
-      angleChart.data.datasets[0].data = $imu.x
-      angleChart.data.datasets[1].data = $imu.y
-      angleChart.data.datasets[2].data = $imu.z
-
-      const allValues = [...$imu.x, ...$imu.y, ...$imu.z]
-      angleChart.options.scales!.y!.min = Math.min(...allValues) - 1
-      angleChart.options.scales!.y!.max = Math.max(...allValues) + 1
-      angleChart.update('none')
     }
 
-    if ($features.bmp) {
-      updateChartData(tempChart, $imu.bmp_temp, 'Temperature')
-      updateChartData(altitudeChart, $imu.altitude, 'Altitude')
-    }
-  }
-
-  onMount(() => {
-    socket.on('imu', (data: IMU) => {
-      console.log(data)
-      imu.addData(data)
-    })
-
-    initializeCharts()
-    intervalId = setInterval(updateData, 200)
-  })
-
-  onDestroy(() => {
-    socket.off('imu')
-    clearInterval(intervalId)
-  })
 </script>
 
 <SettingsCard collapsible={false}>
-  {#snippet icon()}
+    <Rotate3d slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    <Rotate3d class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    <span slot="title">IMU</span>
-  {/snippet}
+    {#if $page.data.features.imu} 
-  {#snippet title()}
+        <div class="w-full overflow-x-auto">
-    <span>IMU</span>
+            <div
-  {/snippet}
+            class="flex w-full flex-col space-y-1 h-60"
-
+            transition:slide|local={{ duration: 300, easing: cubicOut }}
-  {#if $features.imu}
+            >
-    <div class="w-full overflow-x-auto">
+                <canvas bind:this={angleChartElement} />
-      <div
+            </div>
-        class="flex w-full flex-col space-y-1 h-60"
+        </div>
-        transition:slide|local={{ duration: 300, easing: cubicOut }}>
+    {/if}
-        <canvas bind:this={angleChartElement}></canvas>
+    {#if $page.data.features.bmp} 
-      </div>
+        <div class="w-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={tempChartElement} />
+            </div>
+        </div>
+        <div class="w-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={altitudeChartElement} />
+        </div>
     </div>
-  {/if}
+    {/if}
-
+    <!-- <IMUSetting /> -->
-  {#if $features.bmp}
+</SettingsCard>
-    <div class="w-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={tempChartElement}></canvas>
-      </div>
-    </div>
-    <div class="w-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={altitudeChartElement}></canvas>
-      </div>
-    </div>
-  {/if}
-</SettingsCard>

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

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