💅 Updates the frontpage

.github/workflows/embedded-build.yml

@@ -0,0 +1,43 @@
+name: PlatformIO CI
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+        - 'esp32/**'  
+  pull_request:
+    branches: [ master ]
+    paths:
+        - 'esp32/**'  
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./esp32
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/cache@v3
+        with:
+          path: |
+            ~/.cache/pip
+            ~/.platformio/.cache
+          key: ${{ runner.os }}-pio
+
+      - uses: actions/setup-python@v4
+        with:
+          python-version: '3.x'
+      - run: pip install -r ./scripts/requirements.txt
+      - name: Install PlatformIO Core
+        run: pip install --upgrade platformio
+
+      - name: Build PlatformIO Project
+        run: pio run
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-artifacts
+          path: esp32/build/firmware

.github/workflows/frontend-tests.yml

@@ -1,10 +1,14 @@
-name: CI
+name: Frontend Tests
 
 on:
   push:
     branches: [ master ]
+    paths:
+        - 'app/**'  
   pull_request:
     branches: [ master ]
+    paths:
+        - 'app/**'  
     
 permissions:
   contents: read
@@ -19,7 +23,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: pnpm/action-setup@v2
       with:
-        version: 8
+        version: 9
 
     - name: Setup Node.js
       uses: actions/setup-node@v4
@@ -30,6 +34,8 @@ jobs:
 
     - name: Install dependencies
       run: pnpm install
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
 
     - name: Run tests
-      run: pnpm test
+      run: pnpm test

.gitignore

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,6 +1,15 @@
 {
     "files.associations": {
-        "cmath": "cpp"
+      "cmath": "cpp",
+      "array": "cpp",
+      "deque": "cpp",
+      "string": "cpp",
+      "unordered_map": "cpp",
+      "unordered_set": "cpp",
+      "vector": "cpp",
+      "string_view": "cpp",
+      "initializer_list": "cpp",
+      "regex": "cpp"
     },
     "editor.tabSize": 4,
     "editor.detectIndentation": false,

app/.env.embedded

@@ -1,3 +0,0 @@
-VITE_API_URL="leika.local"
-VITE_SOCKET_URL="leika.local"
-VITE_EMBEDDED_BUILD=true

app/.env.mock_embedded

@@ -1,3 +0,0 @@
-VITE_API_URL="hostname"
-VITE_SOCKET_URL="hostname:2096"
-VITE_EMBEDDED_BUILD=true

app/.env.mock_web

@@ -1,3 +0,0 @@
-VITE_API_URL="hostname"
-VITE_SOCKET_URL="hostname:2096"
-VITE_EMBEDDED_BUILD=false

app/.env.web

@@ -1,3 +0,0 @@
-VITE_API_URL="leika.local"
-VITE_SOCKET_URL="leika.local"
-VITE_EMBEDDED_BUILD=false

app/.eslintignore

@@ -10,4 +10,4 @@ node_modules
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
 package-lock.json
-yarn.lock
+yarn.lock

app/.eslintrc.cjs

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

app/.eslintrc.json

@@ -1,15 +0,0 @@
-{
-	"env": {
-		"browser": true,
-		"es2021": true
-	},
-	"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
-	"overrides": [],
-	"parser": "@typescript-eslint/parser",
-	"parserOptions": {
-		"ecmaVersion": "latest",
-		"sourceType": "module"
-	},
-	"plugins": ["@typescript-eslint"],
-	"rules": {}
-}

app/.gitignore

@@ -1,24 +1,10 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

app/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

app/.prettierignore

@@ -1,13 +1,4 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
 package-lock.json
-yarn.lock
+yarn.lock

app/.prettierrc

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

app/.vscode/extensions.json

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

app/README.md

@@ -1,3 +1,38 @@
-# Controller App
+# create-svelte
 
-This is the controller for my spot micro
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

app/env.d.ts

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

app/index.html

@@ -1,15 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
-		<meta
-			name="viewport"
-			content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
-		/>
-	</head>
-	<body>
-		<div id="app"></div>
-		<script type="module" src="/src/main.ts"></script>
-	</body>
-</html>

app/package.json

@@ -1,55 +1,65 @@
 {
-	"name": "app",
-	"private": true,
-	"version": "0.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite --mode embedded",
-		"dev:mock_embedded": "vite --mode mock_embedded",
-		"dev:mock_web": "vite --mode mock_web",
-		"build": "vite build --mode embedded",
-		"build:mock_web": "vite build --mode mock_web",
-		"build:web": "vite build --mode web",
-		"preview": "vite preview",
-		"test": "vitest --environment jsdom",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@tsconfig/svelte": "^5.0.2",
-		"@types/three": "^0.160.0",
-		"@typescript-eslint/eslint-plugin": "^6.20.0",
-		"@typescript-eslint/parser": "^6.20.0",
-		"autoprefixer": "^10.4.17",
-		"cross-env": "^7.0.3",
-		"husky": "^9.0.7",
-		"jsdom": "^24.0.0",
-		"lint-staged": "^15.2.0",
-		"postcss": "^8.4.33",
-		"prettier": "3.2.4",
-		"svelte": "^4.2.9",
-		"svelte-check": "^3.6.3",
-		"svelte-hero-icons": "^5.0.0",
-		"tailwindcss": "^3.4.1",
-		"tslib": "^2.6.2",
-		"typescript": "^5.3.3",
-		"vite": "^5.0.12",
-		"vite-plugin-compression": "^0.5.1",
-		"vite-plugin-singlefile": "^1.0.0",
-		"vitest": "^1.3.1"
-	},
-	"dependencies": {
-		"nipplejs": "^0.10.1",
-		"prettier-plugin-svelte": "^3.2.1",
-		"svelte-routing": "^2.11.0",
-		"three": "^0.160.1",
-		"urdf-loader": "^0.12.1",
-		"uzip": "^0.20201231.0",
-		"xacro-parser": "^0.3.9"
-	},
-	"lint-staged": {
-		"*.js": "eslint --cache --fix",
-		"*.{js,css,md,ts,svelte}": "prettier --write"
-	}
-}
+  "name": "spot_micro_controller",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev --host",
+    "build": "vite build",
+    "build:embedded": "cross-env VITE_USE_HOST_NAME=true vite build",
+    "preview": "vite preview",
+    "test": "pnpm run test:integration && pnpm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  },
+  "devDependencies": {
+    "@iconify-json/mdi": "^1.1.64",
+    "@iconify-json/tabler": "^1.1.109",
+    "@playwright/test": "^1.49.1",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@types/eslint": "^8.56.0",
+    "@types/three": "^0.162.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.45.1",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.2.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-focus-trap": "^1.2.0",
+    "tailwindcss": "^4.0.12",
+    "tslib": "^2.6.1",
+    "typescript": "^5.5.0",
+    "unplugin-icons": "^0.18.5",
+    "vite": "^6.2.1",
+    "vitest": "^1.2.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@niku/vite-env-caster": "^1.0.2",
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.12",
+    "chart.js": "^4.4.2",
+    "compare-versions": "^6.1.0",
+    "cross-env": "^7.0.3",
+    "daisyui": "^5.0.0",
+    "jwt-decode": "^4.0.0",
+    "nipplejs": "^0.10.1",
+    "svelte-dnd-list": "^0.1.8",
+    "svelte-modals": "^2.0.0",
+    "three": "^0.162.0",
+    "urdf-loader": "^0.12.1",
+    "uzip": "^0.20201231.0",
+    "xacro-parser": "^0.3.9"
+  },
+  "packageManager": "pnpm@9.3.0"
+}

app/playwright.config.ts

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

app/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
-};

app/src/App.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import { Router, Route } from 'svelte-routing';
-	import { onMount } from 'svelte';
-	import TopBar from './components/TopBar.svelte';
-	import socketService from '$lib/services/socket-service';
-	import Controller from './routes/Controller.svelte';
-	import { fileService } from '$lib/services';
-	import Settings from './routes/Settings.svelte';
-	import { jointNames, model, outControllerData, mode } from '$lib/stores';
-	import { loadModelAsync, socketLocation } from '$lib/utilities';
-	import type { Result } from '$lib/utilities/result';
-
-	export let url = window.location.pathname;
-	onMount(async () => {
-		socketService.connect(socketLocation);
-		socketService.addPublisher(outControllerData);
-		socketService.addPublisher(mode, 'mode');
-
-		registerFetchIntercept();
-		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 });
-		}
-	});
-
-	const registerFetchIntercept = () => {
-		const { fetch: originalFetch } = window;
-		window.fetch = async (...args) => {
-			const [resource, config] = args;
-			let file: Result<Uint8Array | undefined, string>;
-			file = await fileService.getFile(resource.toString());
-			return file.isOk() ? new Response(file.inner) : originalFetch(resource, config);
-		};
-	};
-</script>
-
-<Router {url}>
-	<TopBar />
-	<div class="absolute w-full h-full bg-background text-on-background">
-		<Route path="/" component={Controller} />
-		<Route path="/settings/*page" component={Settings} />
-	</div>
-</Router>

app/src/app.css

@@ -1,20 +1,40 @@
-:root {
-	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	font-weight: 400;
+@import 'tailwindcss';
+@plugin "daisyui";
 
-	font-synthesis: none;
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
+@plugin "daisyui" {
+  themes:
+    light --default,
+    dark --prefersdark;
 }
 
-body {
-	margin: 0;
+@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 {
-    top: 50px;
-    right:0px
-}
+  top: 64px;
+  right: 0px;
+}
+
+@media (max-width: 1023px) {
+  #three-gui-panel {
+    top: 48px;
+  }
+}

app/src/app.d.ts

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

app/src/app.html

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

app/src/components/Controls.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">
-	import nipplejs from 'nipplejs';
-	import { onMount } from 'svelte';
-	import { capitalize, throttler, toInt8 } from '$lib/utilities';
-	import { input, outControllerData, mode, modes, type Modes } from '$lib/stores';
-	import type { vector } from '$lib/models';
-    import Range from './input/Range.svelte';
-	import Button from './input/Button.svelte';
-
-	let throttle = new throttler();
-	let left: nipplejs.JoystickManager;
-	let right: nipplejs.JoystickManager;
-
-	let throttle_timing = 40;
-	let data = new Int8Array($outControllerData.length);
-
-	onMount(() => {
-		left = nipplejs.create({
-			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] = 1;
-		data[1] = 0;
-		data[2] = toInt8($input.left.x, -1, 1);
-		data[3] = toInt8($input.left.y, -1, 1);
-		data[4] = toInt8($input.right.x, -1, 1);
-		data[5] = toInt8($input.right.y, -1, 1);
-		data[6] = toInt8($input.height, 0, 100);
-		data[7] = toInt8($input.speed, 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:CustomEvent, key: 'speed' | 'height') => {
-        const value:number = event.detail
-        input.update((inputData) => {
-			inputData[key] = value;
-			return inputData;
-		});
-        throttle.throttle(updateData, throttle_timing);
-    }
-
-	const changeMode = (modeValue: Modes) => {
-		mode.set(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 id="left" class="flex w-60 items-center justify-end" />
-		<div class="flex-1" />
-		<div id="right" class="flex w-60 items-center" />
-	</div>
-	<div class="absolute bottom-0 z-10 p-4 gap-4 flex items-end">
-		{#each modes as modeValue}
-			<div>
-				<Button
-					on:click={() => changeMode(modeValue)}
-					active={$mode === modeValue}
-				>
-					{capitalize(modeValue)}
-				</Button>
-			</div>
-		{/each}
-        <div>
-            {#if $mode === 'walk'}
-			    <Range label="Speed" on:value={(e) => handleRange(e, 'speed')}></Range>
-            {/if}
-            <Range label="Height" on:value={(e) => handleRange(e, 'height')}></Range>
-        </div>
-	</div>
-</div>
-
-<svelte:window on:keyup={handleKeyup} on:keydown={handleKeyup} />

app/src/components/Topbar.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">
-	import socketService from '$lib/services/socket-service';
-	import { Icon, Bars3, XMark, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
-	import { emulateModel } from '$lib/stores';
-	import { Link, useLocation } from 'svelte-routing';
-	import { isConnected } from '$lib/stores';
-
-	const views = ['Virtual environment', 'Robot camera'];
-	const modes = ['Drive', 'Choreography'];
-
-	const location = useLocation();
-
-	let selected_view = views[0];
-	let selected_modes = modes[0];
-	let settingOpen = window.location.pathname.includes('/settings');
-
-	$: emulateModel.set(selected_view === views[0]);
-	$: settingOpen = $location.pathname.includes('/settings');
-
-	const stop = () => {
-		if ($isConnected) {
-			socketService.send(JSON.stringify({ type: 'system/stop' }));
-		}
-	};
-</script>
-
-<div class="topbar absolute left-0 top-0 w-full z-10 flex justify-between bg-zinc-800">
-	<div class="flex gap-2 p-2">
-		{#if settingOpen}
-			<Link to="/">
-				<Icon src={XMark} size="32" />
-			</Link>
-		{:else}
-			<Link to="/settings">
-				<Icon src={Bars3} size="32" />
-			</Link>
-		{/if}
-		<select
-			bind:value={selected_modes}
-			class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800"
-		>
-			{#each modes as mode}
-				<option>{mode}</option>
-			{/each}
-		</select>
-
-		<select
-			bind:value={selected_view}
-			class="rounded-md outline outline-2 text-zinc-200 outline-zinc-600 bg-zinc-800"
-		>
-			{#each views as view}
-				<option>{view}</option>
-			{/each}
-		</select>
-	</div>
-
-	<div class="flex gap-2 p-2">
-		<button class="action_button bg-zinc-600">
-			<Icon src={Power} size="24" />
-		</button>
-		<button class="action_button"><Icon src={Battery100} size="24" /></button>
-		<button class="action_button"
-			><Icon src={$isConnected ? Signal : SignalSlash} size="24" /></button
-		>
-	</div>
-	<div>
-		<button class="h-full w-20 bg-red-600 text-white" on:click={stop}>STOP</button>
-	</div>
-</div>
-
-<style>
-	.topbar {
-		height: 50px;
-	}
-	.action_button {
-		border-radius: 4px;
-		width: 34px;
-		height: 34px;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		outline: 1px solid #52525b;
-	}
-</style>

app/src/components/Views/Model.svelte

@@ -1,180 +0,0 @@
-<script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
-	import { BufferGeometry, CanvasTexture, CircleGeometry, CubicBezierCurve3, Line, LineBasicMaterial, Mesh, MeshBasicMaterial, Vector3, type NormalBufferAttributes } from 'three';
-	import socketService from '$lib/services/socket-service';
-	import uzip from 'uzip';
-	import { model } from '$lib/stores';
-	import { footColor, isEmbeddedApp, location, toeWorldPositions } from '$lib/utilities';
-	import { fileService } from '$lib/services';
-	import { servoAngles, mpu, jointNames } from '$lib/stores';
-	import SceneBuilder from '$lib/sceneBuilder';
-	import { lerp, degToRad } from 'three/src/math/MathUtils';
-    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-	let sceneManager = new SceneBuilder();
-	let canvas: HTMLCanvasElement, streamCanvas: HTMLCanvasElement, stream: HTMLImageElement;
-	let context: CanvasRenderingContext2D, texture: CanvasTexture;
-
-	let modelAngles: number[] | Int16Array = new Array(12).fill(0);
-	let modelTargetAngles: number[] | Int16Array = new Array(12).fill(0);
-
-    let feet_trace = new Array(4).fill([]);
-    let trace_lines: BufferGeometry<NormalBufferAttributes>[] = []
-
-	const videoStream = `//${location}/api/stream`;
-
-	let showStream = false;
-
-    let settings = {
-        'Trace feet':true,
-        'Trace points': 30,
-        'Fix camera on robot': true
-    }
-
-	onMount(async () => {
-        await cacheModelFiles()
-        await createScene();
-        if (!isEmbeddedApp) createPanel();
-	});
-
-	onDestroy(() => {
-		canvas.remove();
-	});
-
-    const createPanel = () => {
-        const panel = new GUI({width: 310});
-        panel.close();
-        panel.domElement.id = 'three-gui-panel';
- 
-        const visibility = panel.addFolder('Visualization');
-        visibility.add(settings, 'Trace feet')
-        visibility.add(settings, 'Trace points', 1, 1000, 1)
-        visibility.add(settings, 'Fix camera on robot')
-    }
-
-	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);
-		socketService.send(
-			JSON.stringify({
-				type: 'kinematic/angle',
-				angle: angle * (180 / Math.PI),
-				id: $jointNames.indexOf(name)
-			})
-		);
-	};
-
-	const createScene = async () => {
-		sceneManager
-			.addRenderer({ antialias: true, canvas: canvas, alpha: true })
-			.addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
-			.addOrbitControls(8, 30)
-			.addSky()
-			.addGroundPlane()
-			.addGridHelper({ size: 250, divisions: 125 })
-			.addAmbientLight({ color: 0xffffff, intensity: 0.7 })
-			.addDirectionalLight({ x: 10, y: 100, z: 10, color: 0xffffff, intensity: 1 })
-			.addArrowHelper({ origin: { x: 0, y: 0, z: 0 }, direction: { x: 0, y: -2, z: 0 } })
-			.addFogExp2(0xcccccc, 0.015)
-			.addModel($model)
-			.addDragControl(updateAngles)
-			.handleResize()
-			.addRenderCb(render)
-			.startRenderLoop();
-
-		addVideoStream();
-
-		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 addVideoStream = () => {
-		context = streamCanvas.getContext('2d')!;
-		texture = new CanvasTexture(stream);
-		const liveStream = new Mesh(
-			new CircleGeometry(35, 32),
-			new MeshBasicMaterial({ map: texture })
-		);
-		liveStream.position.z = -50;
-		liveStream.visible = showStream;
-		sceneManager.scene.add(liveStream);
-	};
-
-	const handleVideoStream = () => {
-		if (!showStream) return;
-		context.drawImage(stream, 0, 0);
-		texture.needsUpdate = true;
-	};
-
-    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 render = () => {
-		const robot = sceneManager.model;
-		if (!robot) return;
-
-        const toes = toeWorldPositions(robot)
-
-        renderTraceLines(toes)
-
-        if (settings['Fix camera on robot']) {
-            sceneManager.controls.target = robot.position.clone()
-        }
-
-		robot.position.y = robot.position.y - Math.min(...toes.map(toe => toe.y));
-		robot.rotation.z = lerp(robot.rotation.z, degToRad($mpu.heading + 90), 0.1);
-		modelTargetAngles = $servoAngles;
-
-		handleVideoStream();
-
-		for (let i = 0; i < $jointNames.length; i++) {
-			modelAngles[i] = lerp(
-				(robot.joints[$jointNames[i]].angle as number) * (180 / Math.PI),
-				modelTargetAngles[i],
-				0.1
-			);
-			robot.joints[$jointNames[i]].setJointValue(degToRad(modelAngles[i]));
-		}
-	};
-</script>
-
-<svelte:window on:resize={sceneManager.handleResize} />
-
-{#if showStream}
-	<img
-		bind:this={stream}
-		src={videoStream}
-		class="hidden"
-		alt="Live stream is down"
-		crossorigin="anonymous"
-	/>
-{/if}
-<canvas bind:this={streamCanvas} class="hidden"></canvas>
-<canvas bind:this={canvas} class="absolute"></canvas>

app/src/components/Views/Stream.svelte

@@ -1,19 +0,0 @@
-<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/components/input/Button.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-    export let active = false
-</script>
-
-<button
-    on:click
-    class={$$restProps.class + ' rounded-md outline outline-2 text-zinc-200 outline-zinc-600 p-2' + 
-        (active ? ' bg-zinc-600' : '')}
->
-<slot/>
-</button>

app/src/components/input/Range.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte'
-    const dispatch = createEventDispatcher()
-
-	export let value = 50;
-	export let min = 0;
-	export let max = 100;
-	export let label = '';
-
-    const dispatchValueInput = () => {
-        dispatch('value', value)
-    }
-</script>
-
-<div class="">
-	<input
-		id="range"
-		type="range"
-		{min}
-		{max}
-		bind:value
-        on:change
-        on:input={dispatchValueInput}
-		class="w-32 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
-	/>
-</div>
-<label for="range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{label}</label
->
-

app/src/components/settings/Calibration.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { jointNames } from '../../lib/stores';
-
-	type Servo = {
-		id: number;
-		name: string;
-		minPWM: number;
-		maxPWM: number;
-		pwmFor180: number;
-	};
-
-	let servos: Servo[] = [];
-
-	onMount(() => {
-		jointNames.subscribe((data) => {
-			servos = data.map((name: string, i: number) => {
-				return {
-					id: i,
-					name,
-					minPWM: 0,
-					maxPWM: 0,
-					pwmFor180: 0
-				};
-			});
-		});
-	});
-
-	let selectedServo: number | null = null;
-
-	function updateServoValue(index: number, field: keyof Servo, value: number): void {
-		servos[index] = { ...servos[index], [field]: value };
-	}
-
-	const formatServo = (servo: Servo) => {
-		const string = servo.name;
-		const name = string.charAt(0).toUpperCase() + string.split('_').join(' ').slice(1);
-		return `${servo.id} ${name}`;
-	};
-</script>
-
-<div>
-	<div class="servo-selector">
-		<label for="servo-select">Select Servo:</label>
-		<select id="servo-select" class="bg-zinc-800" bind:value={selectedServo}>
-			{#each servos as servo}
-				<option value={servo.id}>{formatServo(servo)}</option>
-			{/each}
-		</select>
-	</div>
-
-	{#if selectedServo !== null}
-		<div class="mt-5">
-			<h2>Servo {formatServo(servos[selectedServo])} Calibration</h2>
-			<label for="minPWM">Min PWM:</label>
-			<input
-				type="number"
-				id="minPWM"
-				class="bg-zinc-800"
-				value={servos[selectedServo].minPWM}
-				on:blur={(event) =>
-					updateServoValue(selectedServo ?? 0, 'minPWM', Number(event.target?.value))}
-			/>
-
-			<label for="maxPWM">Max PWM:</label>
-			<input
-				type="number"
-				id="maxPWM"
-				class="bg-zinc-800"
-				value={servos[selectedServo].maxPWM}
-				on:blur={(event) =>
-					updateServoValue(selectedServo ?? 0, 'maxPWM', Number(event.target?.value))}
-			/>
-
-			<label for="pwmFor180">PWM for 180°:</label>
-			<input
-				type="number"
-				id="pwmFor180"
-				class="bg-zinc-800"
-				value={servos[selectedServo].pwmFor180}
-				on:blur={(event) =>
-					updateServoValue(selectedServo ?? 0, 'pwmFor180', Number(event.target?.value))}
-			/>
-		</div>
-	{/if}
-</div>

app/src/components/settings/Configuration.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { socketService } from '$lib/services';
-	import { isConnected, settings } from '$lib/stores';
-	import { onMount } from 'svelte';
-
-	onMount(() => {
-		if ($isConnected) {
-			const message = JSON.stringify({ type: 'system/settings' });
-			socketService.send(message);
-		}
-	});
-</script>
-
-<div class="w-full h-full">
-	<div>
-		{#each Object.entries($settings) as entry}
-			<div class="flex gap-8">
-				<div class="w-32">{entry[0]}:</div>
-				<div>{entry[1]}</div>
-			</div>
-		{/each}
-	</div>
-</div>

app/src/components/settings/Info.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { humanFileSize } from '$lib/utilities';
-	import socketService from '$lib/services/socket-service';
-	import { isConnected, systemInfo } from '$lib/stores';
-
-	onMount(() => {
-		if ($isConnected) {
-			const message = JSON.stringify({ type: 'system/info' });
-			socketService.send(message);
-		}
-	});
-</script>
-
-<div class="w-full h-full">
-	<div class="w-1/3">
-		{#each Object.entries($systemInfo ?? {}) as entry}
-			<div class="flex gap-8">
-				<div class="w-32">{entry[0]}:</div>
-				{#if entry[0].includes('Size') || entry[0].includes('Free') || entry[0].includes('Min')}
-					<div>{humanFileSize(entry[1])}</div>
-				{:else}
-					<div>{entry[1]}</div>
-				{/if}
-			</div>
-		{/each}
-	</div>
-</div>

app/src/components/settings/Log.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import socketService from '$lib/services/socket-service';
-	import { isConnected, logs } from '$lib/stores';
-	import { onMount } from 'svelte';
-
-	onMount(() => {
-		if ($isConnected) {
-			const message = JSON.stringify({ type: 'system/logs' });
-			socketService.send(message);
-		}
-	});
-</script>
-
-<div class="w-full h-full">
-	{#each $logs as entry}
-		<div>{entry}</div>
-	{/each}
-</div>

app/src/index.css

@@ -1,35 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* @layer base {
-    :root {
-        --primary: 98 0 238;
-        --primary-variant: 55 0 179;
-        --secondary: 55 0 179;
-        --secondary-variant: 55 0 179;
-        --background: 255 255 255;
-        --surface: 251 251 250;
-        --error: 176 0 32;
-        --on-primary: 255 255 255;
-        --on-secondary: 0 0 0;
-        --on-background: 0 0 0;
-        --on-surface: 0 0 0;
-        --on-error: 255 255 255;
-    }
-  
-    :root[class~="dark"] {
-        --primary: 98 0 238;
-        --primary-variant: 55 0 179;
-        --secondary: 55 0 179;
-        --secondary-variant: 55 0 179;
-        --background: 30 30 30;
-        --surface: 36 36 36;
-        --error: 176 0 32;
-        --on-primary: 255 255 255;
-        --on-secondary: 255 255 255;
-        --on-background: 255 255 255;
-        --on-surface: 255 255 255;
-        --on-error: 255 255 255;
-    }
-  } */

app/src/index.test.ts

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

app/src/lib/api.ts

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

app/src/lib/components/Collapsible.svelte

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

app/src/lib/components/ConfirmDialog.svelte

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

app/src/lib/components/GithubUpdateDialog.svelte

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

app/src/lib/components/InfoDialog.svelte

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

app/src/lib/components/SettingsCard.svelte

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

app/src/lib/components/Spinner.svelte

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

app/src/lib/components/Stream.svelte

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

app/src/lib/components/Toast.svelte

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

app/src/lib/components/Visualization.svelte

@@ -0,0 +1,342 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte'
+  import {
+    BufferGeometry,
+    Line,
+    LineBasicMaterial,
+    Mesh,
+    MeshBasicMaterial,
+    Object3D,
+    SphereGeometry,
+    Vector3,
+    type NormalBufferAttributes,
+    type Object3DEventMap
+  } from 'three'
+  import {
+    ModesEnum,
+    kinematicData,
+    mode,
+    model,
+    outControllerData,
+    servoAnglesOut,
+    servoAngles,
+    mpu,
+    jointNames
+  } from '$lib/stores'
+  import { footColor, populateModelCache, throttler, toeWorldPositions } 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 {
+    sky?: boolean
+    orbit?: boolean
+    panel?: boolean
+    debug?: boolean
+    ground?: boolean
+    zoom?: number
+  }
+
+  let {
+    sky = true,
+    orbit = false,
+    panel = true,
+    debug = false,
+    ground = true,
+    zoom = 8
+  }: Props = $props()
+
+  let sceneManager = $state(new SceneBuilder())
+  let canvas: HTMLCanvasElement = $state()
+
+  let currentModelAngles: number[] = new Array(12).fill(0)
+  let modelTargetAngles: number[] = new Array(12).fill(0)
+  let gui_panel: GUI
+  let Throttler = new throttler()
+
+  let feet_trace = new Array(4).fill([])
+  let trace_lines: BufferGeometry<NormalBufferAttributes>[] = []
+  let target: Object3D<Object3DEventMap>
+
+  let target_position = { x: 0, z: 0, yaw: 0 }
+
+  let kinematic = new Kinematic()
+
+  let planners = {
+    [ModesEnum.Deactivated]: new IdleState(),
+    [ModesEnum.Idle]: new IdleState(),
+    [ModesEnum.Calibration]: new CalibrationState(),
+    [ModesEnum.Rest]: new RestState(),
+    [ModesEnum.Stand]: new StandState(),
+    [ModesEnum.Crawl]: new EightPhaseWalkState(),
+    [ModesEnum.Walk]: new 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: planners[ModesEnum.Idle].default_feet_pos
+  }
+
+  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(Math.min(zoom, 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()
+
+    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],
+      s1: controlData[7]
+    }
+    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.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 = 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} />
+
+<canvas bind:this={canvas}></canvas>

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

@@ -0,0 +1,92 @@
+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 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/tabler/address-book'
+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/tabler/pencil'
+export { default as Delete } from '~icons/tabler/trash'
+
+export { default as Network } from '~icons/tabler/router'
+export { default as Reload } from '~icons/tabler/reload'
+
+export { default as Firmware } from '~icons/tabler/refresh-alert'
+export { default as CloudDown } from '~icons/tabler/cloud-download'
+export { default as Server } from '~icons/tabler/server'
+export { default as Clock } from '~icons/tabler/clock'
+export { default as UTC } from '~icons/tabler/clock-pin'
+export { default as Stopwatch } from '~icons/tabler/24-hours'
+
+export { default as CPU } from '~icons/tabler/cpu'
+export { default as CPP } from '~icons/tabler/binary'
+export { default as Sleep } from '~icons/tabler/zzz'
+export { default as FactoryReset } from '~icons/tabler/refresh-dot'
+export { default as Speed } from '~icons/tabler/activity'
+export { default as Flash } from '~icons/tabler/device-sd-card'
+export { default as Pyramid } from '~icons/tabler/pyramid'
+export { default as Sketch } from '~icons/tabler/chart-pie'
+export { default as Heap } from '~icons/tabler/box-model'
+export { default as Temperature } from '~icons/tabler/temperature'
+export { default as SDK } from '~icons/tabler/sdk'
+
+export { default as Prerelease } from '~icons/tabler/test-pipe'
+export { default as Error } from '~icons/tabler/circle-x'
+
+export { default as OTA } from '~icons/tabler/file-upload'
+export { default as Warning } from '~icons/tabler/alert-triangle'
+
+export { default as AddUser } from '~icons/tabler/user-plus'
+export { default as Admin } from '~icons/tabler/key'
+export { default as Save } from '~icons/tabler/device-floppy'

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { MdiEyeOffOutline, MdiEyeOutline } from "../icons";
+
+    interface Props {
+        show?: boolean;
+        value?: string;
+        id?: string;
+    }
+
+    let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props();
+    
+	let type = $derived(show ? 'text' : 'password');
+
+	const handleInput = (e: 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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,178 @@
+<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
+  } 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: '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: $features.analytics
+          },
+          {
+            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" level="0" />
+
+  <div class="divider my-0"></div>
+
+  <div class="flex items-center justify-between">
+    <GithubButton {github} />
+    <div class="flex items-center justify-end text-sm gap-2">
+      <Copyright class="h-4 w-4" />{copyright}
+    </div>
+  </div>
+</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { modals } from 'svelte-modals';
+    import { notifications } from '$lib/components/toasts/notifications';
+    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+    import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
+    import { compareVersions } from 'compare-versions';
+    import { onMount } from 'svelte';
+    import { api } from '$lib/api';
+    import type { GithubRelease } from '$lib/types/models';
+    import { useFeatureFlags } from '$lib/stores/featureFlags';
+    import { Cancel, CloudDown, Firmware } from '../icons';
+
+    const features = useFeatureFlags();
+
+    interface Props {
+        update?: boolean;
+    }
+
+    let { update = $bindable(false) }: Props = $props();
+
+    let firmwareVersion: string = $state('');
+    let firmwareDownloadLink: string = $state('');
+
+    async function getGithubAPI() {
+        const headers = {
+            accept: 'application/vnd.github+json',
+            'X-GitHub-Api-Version': '2022-11-28'
+        };
+        const result = await api.get<GithubRelease>(
+            `https://api.github.com/repos/${page.data.github}/releases/latest`,
+            { headers }
+        );
+        if (result.inner.message === '404' || result.inner.message == 'Not Found') {
+            console.warn('Error: Could not find releases in the repository');
+            return;
+        }
+        if (result.isErr()) {
+            console.error('Error:', result.inner);
+            return;
+        }
+
+        const results = result.inner;
+        update = false;
+        firmwareVersion = '';
+
+        if (compareVersions(results.tag_name, $features.firmware_version) === 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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,452 @@
+import type { body_state_t } from './kinematic';
+import { fromInt8 } from './utilities';
+
+const { sin } = Math;
+
+export interface gait_state_t {
+    step_height: number;
+    step_x: number;
+    step_z: number;
+    step_angle: number;
+    step_velocity: number;
+    step_depth: number;
+}
+
+export interface ControllerCommand {
+    stop: number;
+    lx: number;
+    ly: number;
+    rx: number;
+    ry: number;
+    h: number;
+    s: number;
+    s1: number;
+}
+
+export abstract class GaitState {
+    protected abstract name: string;
+
+    protected dt = 0.02;
+    protected body_state!: body_state_t;
+    protected gait_state: gait_state_t = {
+        step_height: 0.4,
+        step_x: 0,
+        step_z: 0,
+        step_angle: 0,
+        step_velocity: 1,
+        step_depth: 0.002
+    };
+
+    public get default_feet_pos() {
+        return [
+            [1, -1, 1, 1],
+            [1, -1, -1, 1],
+            [-1, -1, 1, 1],
+            [-1, -1, -1, 1]
+        ];
+    }
+
+    protected get default_height() {
+        return 0.5;
+    }
+
+    begin() {
+        console.log('Starting', this.name);
+    }
+    end() {
+        console.log('Ending', this.name);
+    }
+    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+        this.map_command(command);
+        this.body_state = body_state;
+        this.dt = dt / 1000;
+        return body_state;
+    }
+
+    map_command(command: ControllerCommand) {
+        const newCommand = {
+            step_height: 0.4 + (command.s1 / 128 + 1) / 2,
+            step_x: Math.floor(fromInt8(command.ly, -1, 1) * 10) / 10,
+            step_z: -(Math.floor(fromInt8(command.lx, -1, 1) * 10) / 10),
+            step_velocity: command.s / 128 + 1,
+            step_angle: command.rx / 128,
+            step_depth: 0.002
+        };
+
+        this.gait_state = newCommand;
+    }
+}
+
+export class IdleState extends GaitState {
+    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';
+
+    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+        body_state.omega = 0;
+        body_state.phi = 0;
+        body_state.psi = 0;
+        body_state.xm = 0;
+        body_state.ym = this.default_height / 2;
+        body_state.zm = 0;
+        body_state.feet = this.default_feet_pos;
+        return body_state;
+    }
+}
+
+export class StandState extends GaitState {
+    protected name = 'Stand';
+
+    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+        body_state.omega = 0;
+        body_state.phi = command.rx / 8;
+        body_state.psi = command.ry / 8;
+        body_state.xm = command.ly / 2 / 100;
+        body_state.zm = command.lx / 2 / 100;
+        body_state.feet = this.default_feet_pos;
+        return body_state;
+    }
+}
+
+abstract class PhaseGaitState extends GaitState {
+    protected tick = 0;
+    protected phase = 0;
+    protected phase_time = 0;
+    protected abstract num_phases: number;
+    protected abstract phase_speed_factor: number;
+    protected abstract swing_stand_ratio: number;
+
+    protected contact_phases!: number[][];
+    protected shifts!: number[][];
+
+    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+        super.step(body_state, command, dt);
+        this.update_phase();
+        this.update_body_position();
+        this.update_feet_positions();
+        return this.body_state;
+    }
+
+    update_phase() {
+        this.phase_time += this.dt * this.phase_speed_factor * this.gait_state.step_velocity;
+
+        if (this.phase_time >= 1) {
+            this.phase += 1;
+            if (this.phase == this.num_phases) this.phase = 0;
+            this.phase_time = 0;
+        }
+    }
+
+    update_body_position() {
+        if (this.num_phases === 4) return;
+
+        const shift = this.shifts[Math.floor(this.phase / 2)];
+
+        this.body_state.xm += (shift[0] - this.body_state.xm) * this.dt * 4;
+        this.body_state.zm += (shift[2] - this.body_state.zm) * this.dt * 4;
+    }
+
+    update_feet_positions() {
+        for (let i = 0; i < 4; i++) {
+            this.body_state.feet[i] = this.update_foot_position(i);
+        }
+    }
+
+    update_foot_position(index: number): number[] {
+        const contact = this.contact_phases[index][this.phase];
+        return contact ? this.stand(index) : this.swing(index);
+    }
+
+    stand(index: number): number[] {
+        const delta_pos = [
+            -this.gait_state.step_x * this.dt * this.swing_stand_ratio,
+            0,
+            -this.gait_state.step_z * this.dt * this.swing_stand_ratio
+        ];
+
+        this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0];
+        this.body_state.feet[index][1] = this.default_feet_pos[index][1];
+        this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2];
+        return this.body_state.feet[index];
+    }
+
+    swing(index: number): number[] {
+        const delta_pos = [this.gait_state.step_x * this.dt, 0, this.gait_state.step_z * this.dt];
+
+        if (this.gait_state.step_x == 0) {
+            delta_pos[0] =
+                (this.default_feet_pos[index][0] - this.body_state.feet[index][0]) * this.dt * 8;
+        }
+
+        if (this.gait_state.step_z == 0) {
+            delta_pos[2] =
+                (this.default_feet_pos[index][2] - this.body_state.feet[index][2]) * this.dt * 8;
+        }
+
+        this.body_state.feet[index][0] = this.body_state.feet[index][0] + delta_pos[0];
+        this.body_state.feet[index][1] =
+            this.default_feet_pos[index][1] +
+            sin(this.phase_time * Math.PI) * this.gait_state.step_height;
+        this.body_state.feet[index][2] = this.body_state.feet[index][2] + delta_pos[2];
+        return this.body_state.feet[index];
+    }
+}
+
+export class FourPhaseWalkState extends PhaseGaitState {
+    protected name = 'Four phase walk';
+    protected num_phases = 4;
+    protected phase_speed_factor = 6;
+    protected contact_phases = [
+        [1, 0, 1, 1],
+        [1, 1, 1, 0],
+        [1, 1, 1, 0],
+        [1, 0, 1, 1]
+    ];
+    protected swing_stand_ratio = 1 / (this.num_phases - 1);
+
+    begin() {
+        super.begin();
+    }
+
+    end() {
+        super.end();
+    }
+
+    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+        return super.step(body_state, command, dt);
+    }
+}
+
+export class EightPhaseWalkState extends PhaseGaitState {
+    protected name = 'Eight phase walk';
+    protected num_phases = 8;
+    protected phase_speed_factor = 4;
+    protected contact_phases = [
+        [1, 0, 1, 1, 1, 1, 1, 1],
+        [1, 1, 1, 1, 1, 0, 1, 1],
+        [1, 1, 1, 1, 1, 1, 1, 0],
+        [1, 1, 1, 0, 1, 1, 1, 1]
+    ];
+    protected shifts = [
+        [-0.05, 0, -0.2],
+        [0.3, 0, 0.2],
+        [-0.05, 0, 0.2],
+        [0.3, 0, -0.2]
+    ];
+    protected swing_stand_ratio = 1 / (this.num_phases - 1);
+
+    begin() {
+        super.begin();
+    }
+
+    end() {
+        super.end();
+    }
+
+    step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
+        return super.step(body_state, command, dt);
+    }
+}
+
+export class BezierState extends GaitState {
+    protected name = 'Bezier';
+    protected phase = 0;
+    protected phase_num = 0;
+    protected step_length: number = 0;
+    offset = [0, 0.5, 0.5, 0];
+
+    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/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

app/src/lib/kinematic.ts

@@ -1,120 +1,166 @@
-export default class Kinematic {
-	private l1: number;
-	private l2: number;
-	private l3: number;
-	private l4: number;
 
-	private L: number;
-	private W: number;
+export interface body_state_t {
+	omega: number;
+	phi: number;
+	psi: number;
+	xm: number;
+	ym: number;
+	zm: number;
+	feet: number[][];
+}
+
+export interface position {
+	x: number;
+	y: number;
+	z: number;
+}
+
+export interface target_position {
+	x: number;
+	z: number;
+	yaw: number;
+}
+
+const { cos, sin, atan2, sqrt } = Math;
+
+const DEG2RAD = 0.017453292519943;
+
+export default class Kinematic {
+	l1: number;
+	l2: number;
+	l3: number;
+	l4: number;
+
+	L: number;
+	W: number;
+
+	DEG2RAD = DEG2RAD;
+
+	sHp = sin(Math.PI / 2);
+	cHp = cos(Math.PI / 2);
+
+	Tlf: number[][] = [];
+	Trf: number[][] = [];
+	Tlb: number[][] = [];
+	Trb: number[][] = [];
+
+	point_lf: number[][];
+	point_rf: number[][];
+	point_lb: number[][];
+	point_rb: number[][];
+	Ix: number[][];
 
 	constructor() {
-		this.l1 = 50;
-		this.l2 = 20;
-		this.l3 = 120;
-		this.l4 = 155;
+		this.l1 = 60.5 / 100;
+		this.l2 = 10 / 100;
+		this.l3 = 100.7 / 100;
+		this.l4 = 118.5 / 100;
 
-		this.L = 140;
-		this.W = 75;
-	}
+		this.L = 207.5 / 100;
+		this.W = 78 / 100;
 
-	bodyIK(
-		omega: number,
-		phi: number,
-		psi: number,
-		xm: number,
-		ym: number,
-		zm: number
-	): number[][][] {
-		const { cos, sin } = Math;
-
-		const Rx: number[][] = [
-			[1, 0, 0, 0],
-			[0, cos(omega), -sin(omega), 0],
-			[0, sin(omega), cos(omega), 0],
-			[0, 0, 0, 1]
-		];
-		const Ry: number[][] = [
-			[cos(phi), 0, sin(phi), 0],
+		this.point_lf = [
+			[this.cHp, 0, this.sHp, this.L / 2],
 			[0, 1, 0, 0],
-			[-sin(phi), 0, cos(phi), 0],
+			[-this.sHp, 0, this.cHp, this.W / 2],
 			[0, 0, 0, 1]
 		];
-		const Rz: number[][] = [
-			[cos(psi), -sin(psi), 0, 0],
-			[sin(psi), cos(psi), 0, 0],
+
+		this.point_rf = [
+			[this.cHp, 0, this.sHp, this.L / 2],
+			[0, 1, 0, 0],
+			[-this.sHp, 0, this.cHp, -this.W / 2],
+			[0, 0, 0, 1]
+		];
+
+		this.point_lb = [
+			[this.cHp, 0, this.sHp, -this.L / 2],
+			[0, 1, 0, 0],
+			[-this.sHp, 0, this.cHp, this.W / 2],
+			[0, 0, 0, 1]
+		];
+
+		this.point_rb = [
+			[this.cHp, 0, this.sHp, -this.L / 2],
+			[0, 1, 0, 0],
+			[-this.sHp, 0, this.cHp, -this.W / 2],
+			[0, 0, 0, 1]
+		];
+		this.Ix = [
+			[-1, 0, 0, 0],
+			[0, 1, 0, 0],
 			[0, 0, 1, 0],
 			[0, 0, 0, 1]
 		];
-		const Rxyz: number[][] = this.matrixMultiply(this.matrixMultiply(Rx, Ry), Rz);
+	}
 
-		const T: number[][] = [
-			[0, 0, 0, xm],
-			[0, 0, 0, ym],
-			[0, 0, 0, zm],
-			[0, 0, 0, 0]
-		];
-		const Tm: number[][] = this.matrixAdd(T, Rxyz);
-
-		const sHp = sin(Math.PI / 2);
-		const cHp = cos(Math.PI / 2);
-		const L = this.L;
-		const W = this.W;
+	public calcIK(body_state: body_state_t): number[] {
+		this.bodyIK(body_state);
 
 		return [
-			this.matrixMultiply(Tm, [
-				[cHp, 0, sHp, L / 2],
-				[0, 1, 0, 0],
-				[-sHp, 0, cHp, W / 2],
-				[0, 0, 0, 1]
-			]),
-			this.matrixMultiply(Tm, [
-				[cHp, 0, sHp, L / 2],
-				[0, 1, 0, 0],
-				[-sHp, 0, cHp, -W / 2],
-				[0, 0, 0, 1]
-			]),
-			this.matrixMultiply(Tm, [
-				[cHp, 0, sHp, -L / 2],
-				[0, 1, 0, 0],
-				[-sHp, 0, cHp, W / 2],
-				[0, 0, 0, 1]
-			]),
-			this.matrixMultiply(Tm, [
-				[cHp, 0, sHp, -L / 2],
-				[0, 1, 0, 0],
-				[-sHp, 0, cHp, -W / 2],
-				[0, 0, 0, 1]
-			])
+			...this.legIK(this.multiplyVector(this.inverse(this.Tlf), body_state.feet[0])),
+			...this.legIK(
+				this.multiplyVector(
+					this.Ix,
+					this.multiplyVector(this.inverse(this.Trf), body_state.feet[1])
+				)
+			),
+			...this.legIK(this.multiplyVector(this.inverse(this.Tlb), body_state.feet[2])),
+			...this.legIK(
+				this.multiplyVector(
+					this.Ix,
+					this.multiplyVector(this.inverse(this.Trb), body_state.feet[3])
+				)
+			)
 		];
 	}
 
-	private legIK(point: number[]): number[] {
+	bodyIK(p: body_state_t) {
+		const cos_omega = cos(p.omega * this.DEG2RAD);
+		const sin_omega = sin(p.omega * this.DEG2RAD);
+		const cos_phi = cos(p.phi * this.DEG2RAD);
+		const sin_phi = sin(p.phi * this.DEG2RAD);
+		const cos_psi = cos(p.psi * this.DEG2RAD);
+		const sin_psi = sin(p.psi * this.DEG2RAD);
+
+		const Tm: number[][] = [
+			[cos_phi * cos_psi, -sin_psi * cos_phi, sin_phi, p.xm],
+			[
+				sin_omega * sin_phi * cos_psi + sin_psi * cos_omega,
+				-sin_omega * sin_phi * sin_psi + cos_omega * cos_psi,
+				-sin_omega * cos_phi,
+				p.ym
+			],
+			[
+				sin_omega * sin_psi - sin_phi * cos_omega * cos_psi,
+				sin_omega * cos_psi + sin_phi * sin_psi * cos_omega,
+				cos_omega * cos_phi,
+				p.zm
+			],
+			[0, 0, 0, 1]
+		];
+
+		this.Tlf = this.matrixMultiply(Tm, this.point_lf);
+		this.Trf = this.matrixMultiply(Tm, this.point_rf);
+		this.Tlb = this.matrixMultiply(Tm, this.point_lb);
+		this.Trb = this.matrixMultiply(Tm, this.point_rb);
+	}
+
+	public legIK(point: number[]): number[] {
 		const [x, y, z] = point;
-		const { atan2, cos, sin, sqrt, acos } = Math;
-		const { l1, l2, l3, l4 } = this;
 
-		let F;
+		let F = sqrt(x ** 2 + y ** 2 - this.l1 ** 2);
+		if (isNaN(F)) F = this.l1;
 
-		try {
-			F = sqrt(x ** 2 + y ** 2 - l1 ** 2);
-			if (isNaN(F)) throw new Error('F is NaN');
-		} catch (error) {
-			//console.log(error)
-			F = l1;
-		}
-		const G = F - l2;
+		const G = F - this.l2;
 		const H = sqrt(G ** 2 + z ** 2);
 
-		const theta1 = -atan2(y, x) - atan2(F, -l1);
-		const D = (H ** 2 - l3 ** 2 - l4 ** 2) / (2 * l3 * l4);
-		let theta3: number;
-		try {
-			theta3 = acos(D);
-			if (isNaN(theta3)) throw new Error('theta3 is NaN');
-		} catch (error) {
-			theta3 = 0;
-		}
-		const theta2 = atan2(z, G) - atan2(l4 * sin(theta3), l3 + l4 * cos(theta3));
+		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];
 	}
@@ -165,81 +211,7 @@ export default class Kinematic {
 		return result;
 	}
 
-	private matrixAdd(a: number[][], b: number[][]): number[][] {
-		const result: number[][] = [];
-
-		for (let i = 0; i < a.length; i++) {
-			const row: number[] = [];
-
-			for (let j = 0; j < a[i].length; j++) {
-				row.push(a[i][j] + b[i][j]);
-			}
-
-			result.push(row);
-		}
-
-		return result;
-	}
-
-	public calcLegPoints(angles: number[]): number[][] {
-		const [theta1, theta2, theta3] = angles;
-		const theta23 = theta2 + theta3;
-
-		const T0: number[] = [0, 0, 0, 1];
-		const T1: number[] = this.vectorAdd(T0, [
-			-this.l1 * Math.cos(theta1),
-			this.l1 * Math.sin(theta1),
-			0,
-			0
-		]);
-		const T2: number[] = this.vectorAdd(T1, [
-			-this.l2 * Math.sin(theta1),
-			-this.l2 * Math.cos(theta1),
-			0,
-			0
-		]);
-		const T3: number[] = this.vectorAdd(T2, [
-			-this.l3 * Math.sin(theta1) * Math.cos(theta2),
-			-this.l3 * Math.cos(theta1) * Math.cos(theta2),
-			this.l3 * Math.sin(theta2),
-			0
-		]);
-		const T4: number[] = this.vectorAdd(T3, [
-			-this.l4 * Math.sin(theta1) * Math.cos(theta23),
-			-this.l4 * Math.cos(theta1) * Math.cos(theta23),
-			this.l4 * Math.sin(theta23),
-			0
-		]);
-
-		return [T0, T1, T2, T3, T4];
-	}
-
-	public calcIK(Lp: number[][], angles: number[], center: number[]): number[][] {
-		const [omega, phi, psi] = angles;
-		const [xm, ym, zm] = center;
-
-		const [Tlf, Trf, Tlb, Trb] = this.bodyIK(omega, phi, psi, xm, ym, zm);
-
-		const Ix: number[][] = [
-			[-1, 0, 0, 0],
-			[0, 1, 0, 0],
-			[0, 0, 1, 0],
-			[0, 0, 0, 1]
-		];
-
-		return [
-			this.legIK(this.multiplyVector(this.matrixInverse(Tlf), Lp[0])),
-			this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trf), Lp[1]))),
-			this.legIK(this.multiplyVector(this.matrixInverse(Tlb), Lp[2])),
-			this.legIK(this.multiplyVector(Ix, this.multiplyVector(this.matrixInverse(Trb), Lp[3])))
-		];
-	}
-
-	private vectorAdd(a: number[], b: number[]): number[] {
-		return a.map((val, index) => val + b[index]);
-	}
-
-	private matrixInverse(matrix: number[][]): number[][] {
+	private inverse(matrix: number[][]): number[][] {
 		const det = this.determinant(matrix);
 		const adjugate = this.adjugate(matrix);
 		const scalar = 1 / det;
@@ -346,48 +318,3 @@ export default class Kinematic {
 	}
 }
 
-export class ForwardKinematics {
-	private l1: number;
-	private l2: number;
-	private l3: number;
-	private l4: number;
-
-	constructor() {
-		this.l1 = 50;
-		this.l2 = 20;
-		this.l3 = 120;
-		this.l4 = 155;
-	}
-
-	public calculateFootpoint(theta1: number, theta2: number, theta3: number): number[] {
-		const { cos, sin } = Math;
-
-		const x =
-			this.l1 * cos(theta1) +
-			this.l2 * cos(theta1) +
-			this.l3 * cos(theta1 + theta2) +
-			this.l4 * cos(theta1 + theta2 + theta3);
-		const y =
-			this.l1 * sin(theta1) +
-			this.l2 * sin(theta1) +
-			this.l3 * sin(theta1 + theta2) +
-			this.l4 * sin(theta1 + theta2 + theta3);
-		const z = 0;
-
-		return [x, y, z];
-	}
-
-	public calculateFootpoints(angles: number[]): number[][] {
-		const footpoints: number[][] = [];
-
-		for (let i = 0; i < angles.length; i += 3) {
-			const theta1 = angles[i];
-			const theta2 = angles[i + 1];
-			const theta3 = angles[i + 2];
-			const footpoint = this.calculateFootpoint(theta1, theta2, theta3);
-			footpoints.push(footpoint);
-		}
-
-		return footpoints;
-	}
-}

app/src/lib/models.ts

@@ -1,22 +0,0 @@
-export type vector = { x: number; y: number };
-
-export interface ControllerInput {
-	left: vector;
-	right: vector;
-	height: number;
-	speed: number;
-}
-
-export type angles = number[] | Int16Array;
-
-export type AnglesData = {
-	type: 'angles';
-	data: angles;
-};
-
-export type LogData = {
-	type: 'log';
-	data: string;
-};
-
-export type WebSocketJsonMsg = AnglesData | LogData;

app/src/lib/sceneBuilder.ts

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

app/src/lib/services/index.ts

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

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

@@ -1,96 +0,0 @@
-import { isConnected, socketData } from '$lib/stores';
-import { Result, Ok } from '$lib/utilities';
-import { resultService } from '$lib/services';
-import { type WebSocketJsonMsg } from '$lib/models';
-import type { Writable } from 'svelte/store';
-
-type WebsocketOutData = string | ArrayBufferLike | Blob | ArrayBufferView;
-
-// TODO
-/**
- * MOVE THE store to a store.ts file
- *
- * Make an object on the class that encapsulate all the stores
- *
- * Make the handle message function look up the type and set the value, to simplify the code
- */
-
-class SocketService {
-	private socket!: WebSocket;
-    private url?:string
-
-	constructor() {}
-
-	public connect(url: string): void {
-        this.url = url
-		this.socket = new WebSocket(url);
-		this.socket.binaryType = 'arraybuffer';
-		this.socket.onopen = () => this.handleConnected();
-		this.socket.onclose = () => this.handleDisconnected();
-		this.socket.onmessage = (event: MessageEvent) =>
-			resultService.handleResult(this.handleMessage(event), 'SocketService');
-		this.socket.onerror = (error: Event) => console.log(error);
-	}
-
-	public send(data: WebsocketOutData): Result<void, string> {
-		if (this.socket.readyState === WebSocket.OPEN) {
-			this.socket.send(data);
-			return Ok.void();
-		}
-		return Result.err('The connection is not open');
-	}
-
-	public addPublisher(store: Writable<WebsocketOutData>, type?: string) {
-		const publish = (data: WebsocketOutData) =>
-			this.send(type ? JSON.stringify({ type, data }) : data);
-		store.subscribe(publish);
-	}
-
-	private handleConnected(): void {
-		isConnected.set(true);
-	}
-
-	private handleDisconnected(): void {
-		isConnected.set(false);
-        setTimeout(() => this.connect(this.url as string), 500)
-	}
-
-	private getJsonFromMessage(msg: string): Result<WebSocketJsonMsg, string> {
-		try {
-			return Result.ok(JSON.parse(msg) as WebSocketJsonMsg);
-		} catch (error) {
-			return Result.err('Failed to parse socket message', error);
-		}
-	}
-
-	private handleBufferMessage(buffer: ArrayBuffer): Result<void, string> {
-		console.log(buffer);
-		return Ok.void();
-	}
-
-	private handleMessage(event: MessageEvent): Result<void, string> {
-		if (event.data instanceof ArrayBuffer) {
-			return this.handleBufferMessage(event.data);
-		}
-		let msgRes = this.getJsonFromMessage(event.data);
-		if (msgRes.isErr()) {
-			return msgRes;
-		}
-		const msg = msgRes.inner;
-
-		if (msg.type === 'log') {
-			socketData.logs.update((entries) => {
-				entries.push(msg.data);
-				return entries;
-			});
-			return Ok.void();
-		} else if (msg.data && msg.type in socketData) {
-			socketData[msg.type].set(msg.data);
-			return Ok.void();
-		}
-
-		return Result.err(`Got invalid msg: ${JSON.stringify(msg)}`);
-	}
-}
-
-export default new SocketService();

app/src/lib/stores/analytics.ts

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

app/src/lib/stores/application.ts

@@ -0,0 +1,67 @@
+import { persistentStore } from '$lib/utilities';
+import { get, type Writable } from 'svelte/store';
+
+import Visualization from '$lib/components/Visualization.svelte';
+import Stream from '$lib/components/Stream.svelte';
+import ChartWidget from '$lib/components/widget/ChartWidget.svelte';
+
+export interface WidgetConfig {
+	id: string | number;
+	component: keyof typeof WidgetComponents;
+	props?: Record<string, 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

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

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

app/src/lib/stores/imu.ts

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

app/src/lib/stores/index.ts

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

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

@@ -0,0 +1,5 @@
+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,24 +1,45 @@
-import type { ControllerInput } from '$lib/models';
-import { persistentStore } from '$lib/utilities';
+import type { ControllerInput } from '$lib/types/models';
+import { persistentStore } from '$lib/utilities/svelte-utilities';
 import { writable, type Writable } from 'svelte/store';
 
 export const emulateModel = writable(true);
 
-export const jointNames = persistentStore('joint_names', []);
+export const jointNames = persistentStore('joint_names', <string[]>[]);
 
 export const model = writable();
 
-export const modes = ['idle', 'rest', 'stand', 'walk'] as const;
+export const modes = [
+	'deactivated',
+	'idle',
+	'calibration',
+	'rest',
+	'stand',
+	'crawl',
+	'walk'
+] as const;
 
 export type Modes = (typeof modes)[number];
 
-export const mode: Writable<Modes> = writable('idle');
+export enum ModesEnum {
+	Deactivated,
+	Idle,
+	Calibration,
+	Rest,
+	Stand,
+	Crawl,
+	Walk
+}
 
-export const outControllerData = writable(new Int8Array([0, 0, 0, 0, 0, 0, 70, 0]));
+export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated);
+
+export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0]);
+
+export const kinematicData = writable([0, 0, 0, 0, 1, 0]);
 
 export const input: Writable<ControllerInput> = writable({
 	left: { x: 0, y: 0 },
 	right: { x: 0, y: 0 },
-	height: 70,
-	speed: 0
+	height: 50,
+	speed: 50,
+	s1: 50
 });

app/src/lib/stores/orientation.ts

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

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

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

app/src/lib/stores/socket.ts

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

app/src/lib/stores/telemetry.ts

@@ -0,0 +1,35 @@
+import type { DownloadOTA } from '$lib/types/models';
+import { writable } from 'svelte/store';
+
+let telemetry_data = {
+    rssi: {
+        rssi: 0
+    },
+    download_ota: {
+        status: 'none',
+        progress: 0,
+        error: ''
+    }
+};
+
+function createTelemetry() {
+    const { subscribe, set, update } = writable(telemetry_data);
+
+    return {
+        subscribe,
+        setRSSI: (data: number) => {
+            update(telemetry_data => ({
+                ...telemetry_data,
+                rssi: { rssi: data }
+            }));
+        },
+        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/types/mathutils.d.ts

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

app/src/lib/types/models.ts

@@ -0,0 +1,178 @@
+export type vector = { x: number; y: number };
+
+export interface ControllerInput {
+    left: vector;
+    right: vector;
+    height: number;
+    speed: number;
+    s1: number;
+}
+
+export type GithubRelease = {
+    message: string;
+    tag_name: string;
+    assets: Array<{
+        name: string;
+        browser_download_url: string;
+    }>;
+};
+
+export type angles = number[] | Int16Array;
+
+export type WifiStatus = {
+    status: number;
+    local_ip: string;
+    mac_address: string;
+    rssi: number;
+    ssid: string;
+    bssid: string;
+    channel: number;
+    subnet_mask: string;
+    gateway_ip: string;
+    dns_ip_1: string;
+    dns_ip_2?: string;
+};
+
+export type WifiSettings = {
+    hostname: string;
+    priority_RSSI: boolean;
+    wifi_networks: KnownNetworkItem[];
+};
+
+export type NetworkList = {
+    networks: NetworkItem[];
+};
+
+export type KnownNetworkItem = {
+    ssid: string;
+    password: string;
+    static_ip_config: boolean;
+    local_ip?: string;
+    subnet_mask?: string;
+    gateway_ip?: string;
+    dns_ip_1?: string;
+    dns_ip_2?: string;
+};
+
+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 DownloadOTA = {
+    status: string;
+    progress: number;
+    error: string;
+};
+
+export type Analytics = {
+    max_alloc_heap: number;
+    psram_size: number;
+    free_psram: number;
+    free_heap: number;
+    total_heap: number;
+    min_free_heap: number;
+    core_temp: number;
+    fs_total: number;
+    fs_used: number;
+    uptime: number;
+    cpu0_usage: number;
+    cpu1_usage: number;
+    cpu_usage: number;
+};
+
+export type Rssi = {
+    rssi: number;
+    ssid: string;
+};
+
+export type StaticSystemInformation = {
+    esp_platform: string;
+    firmware_version: string;
+    cpu_freq_mhz: number;
+    cpu_type: string;
+    cpu_rev: number;
+    cpu_cores: number;
+    sketch_size: number;
+    free_sketch_space: number;
+    sdk_version: string;
+    arduino_version: string;
+    flash_chip_size: number;
+    flash_chip_speed: number;
+    cpu_reset_reason: string;
+};
+
+export type SystemInformation = Analytics & StaticSystemInformation;
+
+export type IMU = {
+    x: number;
+    y: number;
+    z: number;
+    heading: number;
+    altitude: number;
+    bmp_temp: number;
+    pressure: number;
+};
+
+export interface I2CDevice {
+    address: number;
+    part_number: string;
+    name: string;
+}
+
+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/types/uzip.d.ts

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