Merge branch 'walking-gait' of https://github.com/runeharlyk/SpotMicroESP32-Leika into walking-gait

Updates to use process for camera stream
Updates camera and mocks
2024-05-27 01:25:43 +02:00 · 2024-03-07 15:14:10 +01:00 · 2024-03-07 14:01:09 +01:00 · 2024-03-05 15:02:31 +01:00 · 2024-03-05 11:35:10 +01:00 · 2024-03-04 23:41:48 +01:00
792 changed files with 27205 additions and 77957 deletions
@@ -1,14 +1,10 @@
-name: Frontend Tests
+name: CI

 on:
  push:
    branches: [ master ]
-    paths:
-        - 'app/**'  
  pull_request:
    branches: [ master ]
-    paths:
-        - 'app/**'  
    
 permissions:
  contents: read
@@ -23,7 +19,7 @@ jobs:
    - uses: actions/checkout@v4
    - uses: pnpm/action-setup@v2
      with:
-        version: 9
+        version: 8

    - name: Setup Node.js
      uses: actions/setup-node@v4
@@ -34,8 +30,6 @@ 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
@@ -1,42 +0,0 @@
-name: PlatformIO CI
-
-on:
-  push:
-    branches: [master]
-    paths:
-      - "esp32/**"
-      - "platformio.ini"
-  pull_request:
-    branches: [master]
-    paths:
-      - "esp32/**"
-      - "platformio.ini"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    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 esp32/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
@@ -1,9 +1,2 @@
-.vscode/.browse.c_cpp.db*
-.vscode/c_cpp_properties.json
-.vscode/launch.json
-.vscode/ipch
-
-__pycache__/
-*.py[cod]
-*$py.class
-.pio
+*.pyc
+spot_env
@@ -2,10 +2,7 @@
    // See http://go.microsoft.com/fwlink/?LinkId=827846
    // for the documentation about the extensions.json format
    "recommendations": [
-      "platformio.platformio-ide",
-      "svelte.svelte-vscode",
-      "bradlc.vscode-tailwindcss",
-      "esbenp.prettier-vscode"
+        "platformio.platformio-ide"
    ],
    "unwantedRecommendations": [
        "ms-vscode.cpptools-extension-pack"
@@ -1,15 +1,6 @@
 {
    "files.associations": {
-      "cmath": "cpp",
-      "array": "cpp",
-      "deque": "cpp",
-      "string": "cpp",
-      "unordered_map": "cpp",
-      "unordered_set": "cpp",
-      "vector": "cpp",
-      "string_view": "cpp",
-      "initializer_list": "cpp",
-      "regex": "cpp"
+        "cmath": "cpp"
    },
    "editor.tabSize": 4,
    "editor.detectIndentation": false,
@@ -0,0 +1,3 @@
+VITE_API_URL="leika.local"
+VITE_SOCKET_URL="leika.local"
+VITE_EMBEDDED_BUILD=true
@@ -0,0 +1,3 @@
+VITE_API_URL="hostname"
+VITE_SOCKET_URL="hostname:2096"
+VITE_EMBEDDED_BUILD=true
@@ -0,0 +1,3 @@
+VITE_API_URL="hostname"
+VITE_SOCKET_URL="hostname:2096"
+VITE_EMBEDDED_BUILD=false
@@ -0,0 +1,3 @@
+VITE_API_URL="leika.local"
+VITE_SOCKET_URL="leika.local"
+VITE_EMBEDDED_BUILD=false
@@ -10,4 +10,4 @@ node_modules
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml
 package-lock.json
-yarn.lock
+yarn.lock
@@ -1,31 +1,20 @@
-/** @type { import("eslint").Linter.Config } */
 module.exports = {
 	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
 	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
+	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')
+	},
 	parserOptions: {
 		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
+		ecmaVersion: 2020
 	},
 	env: {
 		browser: true,
 		es2017: true,
 		node: true
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
+	}
 };
@@ -0,0 +1,15 @@
+{
+	"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": {}
+}
@@ -1,10 +1,24 @@
-.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -1 +0,0 @@
-engine-strict=true
@@ -1,4 +1,13 @@
+.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
@@ -1,13 +1,9 @@
 {
-    "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" } }]
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
@@ -1,3 +1,3 @@
 {
-	"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"]
+	"recommendations": ["svelte.svelte-vscode"]
 }
@@ -1,29 +1,3 @@
-# create-svelte
+# Controller App

-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
-npx sv create
-```
-
-## Developing
-
-Once you've created your project, follow these steps:
-
-1: Delete package-lock.json
-2: Check `git status`. If you see any changes other than package-lock.json or favicon.ico, run the command `git restore ./` (See below)
-3: Run `npm install` or `pnpm install` or `yarn` to install the dependencies
-4: Run `npm run build` to build the project
-
-Running `git status` should show:
-
-[![example.png](https://i.postimg.cc/yddM3hH3/example.png)](https://postimg.cc/7CFsp2bq)
-
-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.
+This is the controller for my spot micro
@@ -1,8 +0,0 @@
-declare module "app-env" {
-  interface ENV {
-    VITE_USE_HOST_NAME: boolean;
-  }
-
-  const appEnv: ENV;
-  export default appEnv;
-}
@@ -0,0 +1,15 @@
+<!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>
@@ -1,67 +1,55 @@
 {
-  "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",
-    "@types/msgpack-lite": "^0.1.11",
-    "msgpack-lite": "^0.1.26"
-  },
-  "packageManager": "pnpm@9.3.0"
-}
+	"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"
+	}
+}
@@ -1,12 +0,0 @@
-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;
@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};
@@ -0,0 +1,48 @@
+<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>
@@ -1,40 +1,20 @@
-@import 'tailwindcss';
-@plugin "daisyui";
+:root {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;

-@plugin "daisyui" {
-    themes:
-        light --default,
-        dark --prefersdark;
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
 }

-@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;
+body {
+	margin: 0;
 }

 #three-gui-panel {
-    top: 64px;
-    right: 0px;
-}
-
-@media (max-width: 1023px) {
-    #three-gui-panel {
-        top: 48px;
-    }
-}
+    top: 50px;
+    right:0px
+}
@@ -1,13 +0,0 @@
-// 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 {};
@@ -1,14 +0,0 @@
-<!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>
@@ -0,0 +1,113 @@
+<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} />
@@ -0,0 +1,84 @@
+<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>
@@ -0,0 +1,180 @@
+<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>
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { location } from '$lib/utilities';
+
+	let videoStream = `//${location}/api/stream`;
+
+	onDestroy(() => {
+		videoStream = '#';
+	});
+</script>
+
+<div class="w-full h-full">
+	<img
+		src={videoStream}
+		class="absolute object-cover blur-3xl w-full h-full -z-10"
+		alt="Live stream is down"
+	/>
+	<img src={videoStream} class="object-contain w-full h-full" alt="Live stream is down" />
+</div>
@@ -0,0 +1,11 @@
+<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>
@@ -0,0 +1,29 @@
+<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
+>
+
@@ -0,0 +1,86 @@
+<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>
@@ -0,0 +1,23 @@
+<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>
@@ -0,0 +1,28 @@
+<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>
@@ -0,0 +1,18 @@
+<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>
@@ -0,0 +1,35 @@
+@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;
+    }
+  } */
@@ -1,7 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});
@@ -1,80 +0,0 @@
-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}`);
-    }
-}
@@ -1,44 +0,0 @@
-<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>
@@ -1,43 +0,0 @@
-<script lang="ts">
-  import { focusTrap } from 'svelte-focus-trap'
-  import { fly } from 'svelte/transition'
-  import { Cancel, Check } from '$lib/components/icons'
-  import { modals, exitBeforeEnter, type ModalProps } from 'svelte-modals'
-
-  let {
-    isOpen,
-    title,
-    message,
-    onConfirm,
-    labels = {
-      cancel: { label: 'Cancel', icon: Cancel },
-      confirm: { label: 'OK', icon: Check }
-    }
-  }: ModalProps = $props()
-</script>
-
-{#if isOpen}
-  {@const SvelteComponent = labels?.confirm.icon}
-  <div
-    role="dialog"
-    class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
-    transition:fly={{ y: 50 }}
-    use:exitBeforeEnter
-    use:focusTrap>
-    <div
-      class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
-      <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
-      <div class="divider my-2"></div>
-      <p class="text-base-content mb-1 text-start">{message}</p>
-      <div class="divider my-2"></div>
-      <div class="flex justify-end gap-2">
-        <button class="btn btn-error inline-flex items-center" onclick={() => modals.close()}>
-          <labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
-        </button>
-        <button class="btn btn-primary inline-flex items-center" onclick={onConfirm}>
-          <SvelteComponent class="mr-2 h-5 w-5" /><span>{labels?.confirm.label}</span>
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
@@ -1,101 +0,0 @@
-<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}
@@ -1,51 +0,0 @@
-<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}
@@ -1,78 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte'
-  import * as THREE from 'three'
-  import { imu } from '$lib/stores/imu'
-  import SceneBuilder from '$lib/sceneBuilder'
-
-  let canvas: HTMLCanvasElement = $state()
-  let sceneBuilder: SceneBuilder
-  let cube: THREE.Mesh
-  let targetRotation = new THREE.Euler()
-  let lastUpdateTime = 0
-  const LERP_SPEED = 5 // rotations per second
-
-  const initThreeJS = () => {
-    sceneBuilder = new SceneBuilder()
-      .addRenderer({ canvas: canvas, antialias: true, alpha: true })
-      .addPerspectiveCamera({ x: 2, y: 0, z: 2 })
-      .addOrbitControls(1, 10, false)
-      .addAmbientLight({ color: 0x404040, intensity: 0.5 })
-      .addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
-      .fillParent()
-
-    const geometry = new THREE.BoxGeometry(1, 1, 1)
-    const material = new THREE.MeshPhongMaterial({
-      color: 0x00ff00,
-      transparent: true,
-      opacity: 0.8
-    })
-    cube = new THREE.Mesh(geometry, material)
-    sceneBuilder.scene.add(cube)
-
-    sceneBuilder.addRenderCb(() => {
-      if (!cube) return
-      const currentTime = performance.now()
-      const deltaTime = (currentTime - lastUpdateTime) / 1000 // convert to seconds
-      lastUpdateTime = currentTime
-
-      const lerpFactor = Math.min(1, LERP_SPEED * deltaTime)
-      cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor)
-      cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor)
-      cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor)
-    })
-
-    sceneBuilder.startRenderLoop()
-  }
-
-  const updateOrientation = () => {
-    if (!cube) return
-
-    const y = -$imu.x[$imu.x.length - 1] || 0
-    const x = $imu.y[$imu.y.length - 1] || 0
-    const z = -$imu.z[$imu.z.length - 1] || 0
-
-    targetRotation.set(
-      THREE.MathUtils.degToRad(x),
-      THREE.MathUtils.degToRad(y),
-      THREE.MathUtils.degToRad(z)
-    )
-  }
-
-  onMount(() => {
-    initThreeJS()
-  })
-
-  onDestroy(() => {
-    sceneBuilder?.renderer?.dispose()
-  })
-
-  $effect(() => {
-    if ($imu) {
-      updateOrientation()
-    }
-  })
-</script>
-
-<div class="h-60 w-60 border-2 border-base-300 rounded-md">
-  <canvas class="w-full h-full" bind:this={canvas}></canvas>
-</div>
@@ -1,60 +0,0 @@
-<script lang="ts">
-  import { slide } from 'svelte/transition'
-  import { cubicOut } from 'svelte/easing'
-  import { Down } from './icons'
-  interface Props {
-    open?: boolean
-    collapsible?: boolean
-    icon?: import('svelte').Snippet
-    title?: import('svelte').Snippet
-    children?: import('svelte').Snippet
-    right?: import('svelte').Snippet
-  }
-
-  let { open = $bindable(true), collapsible = true, icon, title, children, right }: Props = $props()
-</script>
-
-{#if collapsible}
-  <div
-    class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
-    <div
-      class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
-      <span class="inline-flex items-baseline">
-        {@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 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium">
-      <span class="inline-flex items-baseline">
-        {@render icon?.()}
-        {@render title?.()}
-      </span>
-      {@render right?.()}
-    </div>
-    <div class="flex flex-col gap-2 p-4 pt-0">
-      {@render children?.()}
-    </div>
-  </div>
-{/if}
@@ -1,9 +0,0 @@
-<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>
@@ -1,45 +0,0 @@
-<script lang="ts">
-  type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
-
-  const {
-    icon,
-    title,
-    description = '',
-    variant = 'primary',
-    class: klass = '',
-    children = null
-  } = $props<{
-    icon?: any
-    title: string
-    description?: string | number
-    variant?: Variant
-    class?: string
-    children?: () => any
-  }>()
-
-  const Icon = $derived(icon)
-
-  const variants: Record<Variant, [string, string]> = {
-    success: ['bg-success', 'text-success-content'],
-    error: ['bg-error', 'text-error-content'],
-    primary: ['bg-primary', 'text-primary-content'],
-    info: ['bg-info', 'text-info-content'],
-    warning: ['bg-warning', 'text-warning-content']
-  }
-
-  const variantKey: Variant = (variant as Variant) in variants ? (variant as Variant) : 'primary'
-  const [bgColor, textColor] = variants[variantKey]
-</script>
-
-<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2 {klass}">
-  {#if icon}
-    <div class="mask mask-hexagon {bgColor} h-auto w-10 flex-none">
-      <Icon class="{textColor} h-auto w-full scale-75" />
-    </div>
-  {/if}
-  <div class="grow">
-    <div class="font-bold">{title}</div>
-    <div class="text-sm opacity-75 grow">{description}</div>
-  </div>
-  {@render children?.()}
-</div>
@@ -1,17 +0,0 @@
-<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>
@@ -1,35 +0,0 @@
-<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>
@@ -1,339 +0,0 @@
-<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 {
-    extractFootColor,
-    populateModelCache,
-    throttler,
-    getToeWorldPositions
-  } from '$lib/utilities'
-  import SceneBuilder from '$lib/sceneBuilder'
-  import { lerp, degToRad } from 'three/src/math/MathUtils'
-  import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
-  import Kinematic, { type body_state_t } from '$lib/kinematic'
-  import {
-    BezierState,
-    CalibrationState,
-    EightPhaseWalkState,
-    FourPhaseWalkState,
-    IdleState,
-    RestState,
-    StandState
-  } from '$lib/gait'
-  import { radToDeg } from 'three/src/math/MathUtils.js'
-  import type { URDFRobot } from 'urdf-loader'
-  import { get } from 'svelte/store'
-
-  interface Props {
-    sky?: boolean
-    orbit?: boolean
-    panel?: boolean
-    debug?: boolean
-    ground?: boolean
-  }
-
-  let { sky = true, orbit = false, panel = true, debug = false, ground = true }: Props = $props()
-
-  let sceneManager = $state(new SceneBuilder())
-  let canvas: HTMLCanvasElement = $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: kinematic.getDefaultFeetPos()
-  }
-
-  let settings = {
-    'Internal kinematic': true,
-    'Robot transform controls': false,
-    'Auto orient robot': true,
-    'Trace feet': debug,
-    'Target position': false,
-    'Trace points': 30,
-    'Fix camera on robot': true,
-    'Smooth motion': true,
-    omega: 0,
-    phi: 0,
-    psi: 0,
-    xm: 0,
-    ym: 0.7,
-    zm: 0,
-    Background: 'black'
-  }
-
-  onMount(async () => {
-    await populateModelCache()
-    await createScene()
-    servoAngles.subscribe(updateAnglesFromStore)
-    if (panel) createPanel()
-  })
-
-  onDestroy(() => {
-    canvas.remove()
-    gui_panel?.destroy()
-  })
-
-  const updateAnglesFromStore = (angles: number[]) => {
-    if (sceneManager.isDragging) return
-    if (settings['Internal kinematic']) return
-    modelTargetAngles = angles
-  }
-
-  const createPanel = () => {
-    gui_panel = new GUI({ width: 310 })
-    gui_panel.close()
-    gui_panel.domElement.id = 'three-gui-panel'
-
-    const general = gui_panel.addFolder('General')
-    general.add(settings, 'Internal kinematic')
-    general.add(settings, 'Robot transform controls')
-    general.add(settings, 'Auto orient robot')
-
-    const kinematic = gui_panel.addFolder('Kinematics')
-    kinematic.add(settings, 'omega', -20, 20).onChange(updateKinematicPosition).listen()
-    kinematic.add(settings, 'phi', -30, 30).onChange(updateKinematicPosition).listen()
-    kinematic.add(settings, 'psi', -20, 15).onChange(updateKinematicPosition).listen()
-    kinematic.add(settings, 'xm', -1, 1).onChange(updateKinematicPosition).listen()
-    kinematic.add(settings, 'ym', 0, 1).onChange(updateKinematicPosition).listen()
-    kinematic.add(settings, 'zm', -1.3, 1.3).onChange(updateKinematicPosition).listen()
-
-    const visibility = gui_panel.addFolder('Visualization')
-    visibility.add(settings, 'Trace feet')
-    visibility.add(settings, 'Trace points', 1, 1000, 1)
-    visibility.add(settings, 'Target position')
-    visibility.add(settings, 'Smooth motion')
-    visibility.addColor(settings, 'Background')
-  }
-
-  const updateKinematicPosition = () => {
-    kinematicData.set([
-      settings.omega,
-      settings.phi,
-      settings.psi,
-      settings.xm,
-      settings.ym,
-      settings.zm
-    ])
-  }
-
-  const updateAngles = (name: string, angle: number) => {
-    modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
-    Throttler.throttle(() => servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num))), 100)
-  }
-
-  const createScene = async () => {
-    sceneManager
-      .addRenderer({ antialias: true, canvas, alpha: true })
-      .addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
-      .addOrbitControls(8, 30, orbit)
-      .addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 3 })
-      .addAmbientLight({ color: 0xffffff, intensity: 0.5 })
-      .addFogExp2(0xcccccc, 0.015)
-      .addModel($model)
-      .addTransformControls(sceneManager.model)
-      .fillParent()
-      .addRenderCb(render)
-      .startRenderLoop()
-
-    if (ground) sceneManager.addGroundPlane()
-
-    const geometry = new SphereGeometry(0.1, 32, 16)
-    const material = new MeshBasicMaterial({ color: 0xffff00 })
-    target = new Mesh(geometry, material)
-    sceneManager.scene.add(target)
-
-    if (debug) {
-      sceneManager.addDragControl(updateAngles)
-    }
-    if (sky) sceneManager.addSky()
-
-    for (let i = 0; i < 4; i++) {
-      const geometry = new BufferGeometry()
-      const material = new LineBasicMaterial({ color: extractFootColor() })
-      const line = new Line(geometry, material)
-      trace_lines.push(geometry)
-      sceneManager.scene.add(line)
-    }
-  }
-
-  const renderTraceLines = (foot_positions: Vector3[]) => {
-    if (!settings['Trace feet']) {
-      if (!feet_trace.length) return
-      trace_lines.forEach((line, i) => line.setFromPoints(feet_trace[i].slice(-1)))
-      feet_trace = new Array(4).fill([])
-      return
-    }
-
-    trace_lines.forEach((line, i) => {
-      feet_trace[i].push(foot_positions[i])
-      feet_trace[i] = feet_trace[i].slice(-settings['Trace points'])
-      line.setFromPoints(feet_trace[i])
-    })
-  }
-
-  const calculate_kinematics = () => {
-    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.35) / 100
-
-    let planner = planners[get(mode)]
-    const delta = performance.now() - lastTick
-    lastTick = performance.now()
-
-    body_state = planner.step(body_state, data, delta)
-
-    settings.omega = body_state.omega
-    settings.phi = body_state.phi
-    settings.psi = body_state.psi
-    settings.xm = body_state.xm
-    settings.ym = body_state.ym
-    settings.zm = body_state.zm
-  }
-
-  const update_robot_position = (robot: URDFRobot) => {
-    if (!settings['Robot transform controls']) return
-    settings.omega = radToDeg(robot.rotation.y)
-    settings.phi = radToDeg(robot.rotation.z) + $mpu.heading - 90
-    settings.psi = radToDeg(robot.rotation.x) + 90
-    settings.xm = robot.position.z * 100
-    settings.zm = -robot.position.x * 100
-  }
-
-  const updateTargetPosition = () => {
-    target.visible = settings['Target position']
-    target.position.x = smooth(target.position.x, target_position.x, 0.5)
-    target.position.z = smooth(target.position.z, target_position.z, 0.5)
-  }
-
-  const render = () => {
-    const robot = sceneManager.model
-    if (!robot) return
-
-    const toes = getToeWorldPositions(robot)
-
-    renderTraceLines(toes)
-    update_camera(robot)
-    update_gait()
-    calculate_kinematics()
-    update_robot_position(robot)
-
-    sceneManager.transformControl.showX = settings['Robot transform controls']
-    sceneManager.transformControl.showY = settings['Robot transform controls']
-    sceneManager.transformControl.showZ = settings['Robot transform controls']
-
-    for (let i = 0; i < $jointNames.length; i++) {
-      currentModelAngles[i] = smooth(
-        (robot.joints[$jointNames[i]].angle as number) * (180 / Math.PI),
-        modelTargetAngles[i],
-        0.1
-      )
-      robot.joints[$jointNames[i]].setJointValue(degToRad(currentModelAngles[i]))
-    }
-
-    orient_robot(robot, toes)
-    updateTargetPosition()
-  }
-</script>
-
-<svelte:window onresize={sceneManager.fillParent} />
-
-<canvas bind:this={canvas}></canvas>
@@ -1,96 +0,0 @@
-export { default as Connection } from '~icons/mdi/connection'
-export { default as Users } from '~icons/mdi/users'
-export { default as Settings } from '~icons/mdi/settings'
-export { default as MdiController } from '~icons/mdi/controller'
-export { default as Devices } from '~icons/mdi/devices'
-export { default as Camera } from '~icons/mdi/camera-outline'
-export { default as Rotate3d } from '~icons/mdi/rotate-3d'
-export { default as MotorOutline } from '~icons/mdi/motor-outline'
-export { default as Health } from '~icons/mdi/stethoscope'
-export { default as Folder } from '~icons/mdi/folder-outline'
-export { default as Update } from '~icons/mdi/reload'
-export { default as Router } from '~icons/mdi/router'
-export { default as AP } from '~icons/mdi/access-point'
-export { default as Remote } from '~icons/mdi/network'
-export { default as Copyright } from '~icons/mdi/copyright'
-export { default as NTP } from '~icons/mdi/clock-check'
-export { default as Metrics } from '~icons/mdi/report-bar'
-export { default as MdiEyeOutline } from '~icons/mdi/eye-outline'
-export { default as MdiEyeOffOutline } from '~icons/mdi/eye-off-outline'
-export { default as Github } from '~icons/mdi/github'
-export { default as Avatar } from '~icons/mdi/user-circle'
-export { default as Logout } from '~icons/mdi/logout'
-export { default as Record } from '~icons/mdi/radio-button-unchecked'
-export { default as MdiFullscreen } from '~icons/mdi/fullscreen'
-export { default as MdiFullscreenExit } from '~icons/mdi/fullscreen-exit'
-export { default as WiFi } from '~icons/tabler/wifi'
-export { default as WiFi0 } from '~icons/tabler/wifi-0'
-export { default as WiFi1 } from '~icons/tabler/wifi-1'
-export { default as WiFi2 } from '~icons/tabler/wifi-2'
-export { default as WifiOff } from '~icons/tabler/wifi-off'
-export { default as MdiWeatherSunny } from '~icons/mdi/weather-sunny'
-export { default as MdiMoonAndStars } from '~icons/mdi/moon-and-stars'
-export { default as Hamburger } from '~icons/mdi/hamburger-menu'
-
-export { default as FileIcon } from '~icons/mdi/file'
-export { default as FolderIcon } from '~icons/mdi/folder-outline'
-export { default as FolderOpenOutline } from '~icons/mdi/folder-open-outline'
-export { default as TrashIcon } from '~icons/mdi/trash'
-export { default as RotateCcw } from '~icons/mdi/rotate-left'
-export { default as RotateCw } from '~icons/mdi/rotate-right'
-
-export { default as Down } from '~icons/tabler/chevron-down'
-export { default as Cancel } from '~icons/tabler/x'
-export { default as Check } from '~icons/tabler/check'
-export { default as Login } from '~icons/tabler/login'
-export { default as Loader } from '~icons/tabler/loader-2'
-export { default as error } from '~icons/tabler/circle-x'
-export { default as success } from '~icons/tabler/circle-check'
-export { default as warning } from '~icons/tabler/alert-triangle'
-export { default as info } from '~icons/tabler/info-circle'
-export { default as Power } from '~icons/tabler/power'
-
-export { default as MAC } from '~icons/tabler/dna-2'
-export { default as Home } from '~icons/tabler/home'
-export { default as SSID } from '~icons/tabler/router'
-export { default as DNS } from '~icons/mdi/dns'
-export { default as Gateway } from '~icons/tabler/torii'
-export { default as Subnet } from '~icons/tabler/grid-dots'
-export { default as Channel } from '~icons/tabler/antenna'
-export { default as Scan } from '~icons/tabler/radar-2'
-export { default as Add } from '~icons/tabler/circle-plus'
-export { default as Edit } from '~icons/mdi/edit'
-export { default as EditOff } from '~icons/mdi/edit-off'
-export { default as Delete } from '~icons/tabler/trash'
-
-export { default as Network } from '~icons/tabler/router'
-export { default as Reload } from '~icons/tabler/reload'
-
-export { default as Firmware } from '~icons/tabler/refresh-alert'
-export { default as CloudDown } from '~icons/tabler/cloud-download'
-export { default as Server } from '~icons/tabler/server'
-export { default as Clock } from '~icons/tabler/clock'
-export { default as UTC } from '~icons/tabler/clock-pin'
-export { default as Stopwatch } from '~icons/tabler/24-hours'
-
-export { default as CPU } from '~icons/tabler/cpu'
-export { default as CPP } from '~icons/tabler/binary'
-export { default as Sleep } from '~icons/tabler/zzz'
-export { default as FactoryReset } from '~icons/tabler/refresh-dot'
-export { default as Speed } from '~icons/tabler/activity'
-export { default as Flash } from '~icons/tabler/device-sd-card'
-export { default as Pyramid } from '~icons/tabler/pyramid'
-export { default as Sketch } from '~icons/tabler/chart-pie'
-export { default as Heap } from '~icons/tabler/box-model'
-export { default as Temperature } from '~icons/tabler/temperature'
-export { default as SDK } from '~icons/tabler/sdk'
-
-export { default as Prerelease } from '~icons/tabler/test-pipe'
-export { default as Error } from '~icons/tabler/circle-x'
-
-export { default as OTA } from '~icons/tabler/file-upload'
-export { default as Warning } from '~icons/tabler/alert-triangle'
-
-export { default as AddUser } from '~icons/tabler/user-plus'
-export { default as Admin } from '~icons/tabler/key'
-export { default as Save } from '~icons/tabler/device-floppy'
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import { MdiEyeOffOutline, MdiEyeOutline } from "../icons";
-
-    interface Props {
-        show?: boolean;
-        value?: string;
-        id?: string;
-    }
-
-    let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props();
-    
-	let type = $derived(show ? 'text' : 'password');
-
-	const handleInput = (e: any) => value = e.target.value
-
-    const togglePassword = () => show = !show
-</script>
-
-<label class="input input-bordered flex items-center gap-2">
-    <input {type} class="grow" {value} oninput={handleInput} {id} />
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <div onclick={togglePassword} role="button" tabindex="0">
-        <MdiEyeOffOutline class="text-base-content/50 h-6 {show ? 'block' : 'hidden'}" />
-        <MdiEyeOutline class="text-base-content/50 h-6 {show ? 'hidden' : 'block'}" />
-    </div>
-</label>
@@ -1,34 +0,0 @@
-<script lang="ts">
-  interface Props {
-    min?: number
-    max?: number
-    step?: number
-    value?: any
-    oninput?: any
-  }
-
-  let {
-    min = 0,
-    max = 100,
-    step = 1,
-    value = $bindable((max - min) / 2),
-    ...rest
-  }: Props = $props()
-</script>
-
-<input
-  type="range"
-  style="writing-mode: vertical-lr; direction: rtl"
-  class="cursor-pointer"
-  {min}
-  {max}
-  {step}
-  bind:value
-  {...rest} />
-
-<style>
-  input[type='range']::-webkit-slider-runnable-track {
-    background: oklch(var(--p) / 1);
-    border-radius: var(--rounded-box, 1rem);
-  }
-</style>
@@ -1,2 +0,0 @@
-export { default as PasswordInput } from './InputPassword.svelte';
-export { default as VerticalSlider } from './VerticalSlider.svelte';
@@ -1,11 +0,0 @@
-<script lang="ts">
-    interface Props {
-        children?: import('svelte').Snippet;
-    }
-
-    let { children }: Props = $props();
-</script>
-
-<div class="box-border overflow-hidden flex-1">
-    {@render children?.()}
-</div>
@@ -1,37 +0,0 @@
-<script lang="ts">
-	import WidgetContainer from './WidgetContainer.svelte';
-	import { WidgetComponents, type WidgetContainerConfig, isWidgetConfig } from '$lib/stores/application';
-	import Widget from './Widget.svelte';
-
-	interface Props {
-		container: WidgetContainerConfig;
-	}
-
-	let { container }: Props = $props();
-</script>
-
-<div class="w-full h-full flex flex-col overflow-hidden">
-	<div
-		class="flex w-full h-full"
-		class:flex-row={container.layout === 'column'}
-		class:flex-col={container.layout === 'row'}
-		class:flex-wrap={container.layout === 'wrap'}
-	>
-		{#each container.widgets as widget, index (widget.id + '-' + index)}
-			<Widget>
-				{#if isWidgetConfig(widget)}
-					{@const SvelteComponent = WidgetComponents[widget.component]}
-					<SvelteComponent {...widget.props} />
-				{:else if widget.widgets}
-					<WidgetContainer container={widget} />
-				{/if}
-			</Widget>
-			{#if index !== container.widgets.length - 1}
-				<div
-					class="divider bg-base-300 m-0"
-					class:divider-horizontal={container.layout === 'column'}
-				></div>
-			{/if}
-		{/each}
-	</div>
-</div>
@@ -1,15 +0,0 @@
-<script lang="ts">
-	import { Github } from "../icons";
-
-	interface Props {
-		github: any;
-	}
-
-	let { github }: Props = $props();
-</script>
-
-{#if github.active}
-	<a href={github.href} class="btn btn-ghost" target="_blank" rel="noopener noreferrer">
-        <Github class="h-5 w-5" />
-    </a>
-{/if}
@@ -1,14 +0,0 @@
-<script>
-	import logo from '$lib/assets/logo512.png';
-
-	/** @type {{appName: any}} */
-	let { appName } = $props();
-</script>
-
-<a
-	href="/"
-	class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
->
-	<img src={logo} alt="Logo" class="h-12 w-12" />
-	<h1 class="px-4 text-2xl font-bold">{appName}</h1>
-</a>
@@ -1,189 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/state'
-  import { useFeatureFlags } from '$lib/stores/featureFlags'
-  import GithubButton from '../menu/GithubButton.svelte'
-  import LogoButton from '../menu/LogoButton.svelte'
-  import MenuList from '../menu/MenuList.svelte'
-  import {
-    Connection,
-    Settings,
-    MdiController,
-    Devices,
-    Camera,
-    Rotate3d,
-    MotorOutline,
-    Health,
-    Folder,
-    Update,
-    WiFi,
-    Router,
-    AP,
-    Copyright,
-    Metrics,
-    DNS
-  } from '$lib/components/icons'
-  import appEnv from 'app-env'
-
-  const features = useFeatureFlags()
-
-  const appName = page.data.app_name
-
-  const copyright = page.data.copyright
-
-  const github = { href: 'https://github.com/' + page.data.github, active: true }
-
-  type menuItem = {
-    title: string
-    icon: ConstructorOfATypedSvelteComponent
-    href?: string
-    feature: boolean
-    active?: boolean
-    submenu?: menuItem[]
-  }
-
-  let menuItems = $state<menuItem[]>([])
-
-  $effect(() => {
-    menuItems = [
-      {
-        title: 'Connection',
-        icon: WiFi,
-        href: '/connection',
-        feature: !appEnv.VITE_USE_HOST_NAME
-      },
-      {
-        title: 'Controller',
-        icon: MdiController,
-        href: '/controller',
-        feature: true
-      },
-      {
-        title: 'Peripherals',
-        icon: Devices,
-        feature: true,
-        submenu: [
-          {
-            title: 'I2C',
-            icon: Connection,
-            href: '/peripherals/i2c',
-            feature: true
-          },
-          {
-            title: 'Camera',
-            icon: Camera,
-            href: '/peripherals/camera',
-            feature: $features.camera
-          },
-          {
-            title: 'Servo',
-            icon: MotorOutline,
-            href: '/peripherals/servo',
-            feature: true
-          },
-          {
-            title: 'IMU',
-            icon: Rotate3d,
-            href: '/peripherals/imu',
-            feature: $features.imu || $features.mag || $features.bmp
-          }
-        ]
-      },
-      {
-        title: 'WiFi',
-        icon: WiFi,
-        feature: true,
-        submenu: [
-          {
-            title: 'WiFi Station',
-            icon: Router,
-            href: '/wifi/sta',
-            feature: true
-          },
-          {
-            title: 'Access Point',
-            icon: AP,
-            href: '/wifi/ap',
-            feature: true
-          },
-          {
-            title: 'mDNS',
-            icon: DNS,
-            href: '/wifi/mdns',
-            feature: true
-          }
-        ]
-      },
-      {
-        title: 'System',
-        icon: Settings,
-        feature: true,
-        submenu: [
-          {
-            title: 'System Status',
-            icon: Health,
-            href: '/system/status',
-            feature: true
-          },
-          {
-            title: 'File System',
-            icon: Folder,
-            href: '/system/filesystem',
-            feature: true
-          },
-          {
-            title: 'System Metrics',
-            icon: Metrics,
-            href: '/system/metrics',
-            feature: true
-          },
-          {
-            title: 'Firmware Update',
-            icon: Update,
-            href: '/system/update',
-            feature: $features.ota || $features.upload_firmware || $features.download_firmware
-          }
-        ]
-      }
-    ] as menuItem[]
-  })
-
-  const { menuClicked } = $props()
-
-  function setActiveMenuItem(targetTitle: string) {
-    menuItems.forEach(item => {
-      item.active = item.title === targetTitle
-      item.submenu?.forEach(subItem => {
-        subItem.active = subItem.title === targetTitle
-      })
-    })
-    menuItems = menuItems
-    menuClicked()
-  }
-
-  $effect(() => {
-    setActiveMenuItem(page.data.title)
-  })
-
-  const updateMenu = (event: any) => {
-    setActiveMenuItem(event.details)
-  }
-</script>
-
-<div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
-  <LogoButton {appName} />
-
-  <MenuList
-    {menuItems}
-    select={updateMenu}
-    class="grow flex-nowrap overflow-y-auto overflow-x-hidden"
-    level="0" />
-
-  <div class="divider my-0"></div>
-
-  <div class="flex items-center justify-between">
-    <GithubButton {github} />
-    <div class="flex items-center justify-end text-sm gap-2">
-      <Copyright class="h-4 w-4" />{copyright}
-    </div>
-  </div>
-</div>
@@ -1,48 +0,0 @@
-<script lang="ts">
-  import MenuList from './MenuList.svelte'
-  type MenuItem = {
-    title: string
-    icon: ConstructorOfATypedSvelteComponent
-    href?: string
-    feature: boolean
-    active?: boolean
-    submenu?: MenuItem[]
-  }
-
-  let { level, menuItems, select, class: klass } = $props()
-
-  const selectMenuItem = (title: string) => {
-    select(title)
-  }
-</script>
-
-<ul class={klass + ' menu w-full'}>
-  {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
-    {#if menuItem.feature}
-      <li>
-        {#if menuItem.submenu}
-          <details open={menuItem.submenu.some(subItem => subItem.active)}>
-            <summary class="font-bold">
-              <menuItem.icon class="h-6 w-6" />
-              {menuItem.title}
-            </summary>
-            <div class="pl-4">
-              <MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
-            </div>
-          </details>
-        {:else}
-          <a
-            href={menuItem.href}
-            class="font-bold"
-            class:bg-base-100={menuItem.active}
-            class:text-lg={level === 0}
-            class:text-md={level === 1}
-            onclick={() => selectMenuItem(menuItem.title)}>
-            <menuItem.icon class="h-6 w-6" />
-            {menuItem.title}
-          </a>
-        {/if}
-      </li>
-    {/if}
-  {/each}
-</ul>
@@ -1,10 +0,0 @@
-<script lang="ts">
-    import { isFullscreen, toggleFullscreen } from '$lib/stores';
-	import { MdiFullscreenExit, MdiFullscreen } from '../icons';
-
-    const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen);
-</script>
-
-<button onclick={toggleFullscreen}>
-    <SvelteComponent class="h-7 w-7" />
-</button>
@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from "../icons";
-
-	interface Props {
-		showDBm?: boolean;
-		rssi?: number;
-	}
-
-	let { showDBm = false, rssi = 0 }: Props = $props();
-
-	const getWiFiIcon = () => {
-		if (rssi === 0) return WifiOff;
-		if (rssi >= -55) return WiFi;
-		if (rssi >= -75) return WiFi2;
-		if (rssi >= -85) return WiFi1;
-		return WiFi0;
-	};
-
-	const SvelteComponent = $derived(getWiFiIcon());
-</script>
-
-<div class="indicator">
-	<div class="tooltip tooltip-left" data-tip={rssi + " dBm"}>
-		{#if showDBm}
-			<span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
-				{rssi} dBm
-			</span>
-		{/if}
-		<div class="h-7 w-7">
-			<SvelteComponent class="absolute inset-0 h-full w-full" />
-		</div>
-	</div>
-</div>
@@ -1,34 +0,0 @@
-<script lang="ts">
-    import { useFeatureFlags } from '$lib/stores';
-    import { modals } from 'svelte-modals';
-    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-    import { api } from '$lib/api';
-    import { Cancel, Power } from '../icons';
-
-    const features = useFeatureFlags();
-
-    const postSleep = async () => await api.post('/api/system/sleep');
-
-    const confirmSleep = () => {
-        modals.open(ConfirmDialog, {
-            title: 'Confirm Power Down',
-            message: 'Are you sure you want to switch off the device?',
-            labels: {
-                cancel: { label: 'Abort', icon: Cancel },
-                confirm: { label: 'Switch Off', icon: Power }
-            },
-            onConfirm: () => {
-                modals.close();
-                postSleep();
-            }
-        });
-    };
-</script>
-
-{#if $features.sleep}
-    <div class="flex-none">
-        <button class="btn btn-square btn-ghost h-9 w-10" onclick={confirmSleep}>
-            <Power class="text-error h-9 w-9" />
-        </button>
-    </div>
-{/if}
@@ -1,10 +0,0 @@
-<script lang="ts">
-	import { mode, modes } from "$lib/stores";
-
-    const deactivate = async () => {
-		mode.set(modes.indexOf('deactivated'));
-	};
-</script>
-
-
-<button onclick={deactivate} class="bg-error text-white btn rounded-none">STOP</button>
@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { MdiWeatherSunny, MdiMoonAndStars } from "../icons";
-</script>
-
-<label class="swap swap-rotate">
-    <input type="checkbox" value="light" class="theme-controller" />
-    <MdiWeatherSunny class="swap-off h-7 w-7" />
-    <MdiMoonAndStars class="swap-on h-7 w-7" />
-</label>
@@ -1,17 +0,0 @@
-<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>
@@ -1,111 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/state';
-    import { modals } from 'svelte-modals';
-    import { notifications } from '$lib/components/toasts/notifications';
-    import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
-    import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
-    import { compareVersions } from 'compare-versions';
-    import { onMount } from 'svelte';
-    import { api } from '$lib/api';
-    import type { GithubRelease } from '$lib/types/models';
-    import { useFeatureFlags } from '$lib/stores/featureFlags';
-    import { Cancel, CloudDown, Firmware } from '../icons';
-
-    const features = useFeatureFlags();
-
-    interface Props {
-        update?: boolean;
-    }
-
-    let { update = $bindable(false) }: Props = $props();
-
-    let firmwareVersion: string = $state('');
-    let firmwareDownloadLink: string = $state('');
-
-    async function getGithubAPI() {
-        const headers = {
-            accept: 'application/vnd.github+json',
-            'X-GitHub-Api-Version': '2022-11-28'
-        };
-        const result = await api.get<GithubRelease>(
-            `https://api.github.com/repos/${page.data.github}/releases/latest`,
-            { headers }
-        );
-        if (result.inner.message === '404' || result.inner.message == 'Not Found') {
-            console.warn('Error: Could not find releases in the repository');
-            return;
-        }
-        if (result.isErr()) {
-            console.error('Error:', result.inner);
-            return;
-        }
-
-        const results = result.inner;
-        update = false;
-        firmwareVersion = '';
-
-        if (compareVersions(results.tag_name, $features.firmware_version) === 1) {
-            // iterate over assets and find the correct one
-            for (let i = 0; i < results.assets.length; i++) {
-                // check if the asset is of type *.bin
-                if (
-                    results.assets[i].name.includes('.bin') &&
-                    results.assets[i].name.includes($features.firmware_built_target)
-                ) {
-                    update = true;
-                    firmwareVersion = results.tag_name;
-                    firmwareDownloadLink = results.assets[i].browser_download_url;
-                    notifications.info('Firmware update available.', 5000);
-                }
-            }
-        }
-    }
-
-    async function postGithubDownload(url: string) {
-        const result = await api.post('/api/downloadUpdate', { download_url: url });
-        if (result.isErr()) {
-            console.error('Error:', result.inner);
-            return;
-        }
-    }
-
-    onMount(async () => {
-        if ($features.download_firmware) {
-            await getGithubAPI();
-            setInterval(async () => await getGithubAPI(), 60 * 60 * 1000); // once per hour
-        }
-    });
-
-    function confirmGithubUpdate(url: string) {
-        modals.open(ConfirmDialog, {
-            title: 'Confirm flashing new firmware to the device',
-            message: 'Are you sure you want to overwrite the existing firmware with a new one?',
-            labels: {
-                cancel: { label: 'Abort', icon: Cancel },
-                confirm: { label: 'Update', icon: CloudDown }
-            },
-            onConfirm: () => {
-                postGithubDownload(url);
-                modals.open(GithubUpdateDialog, {
-                    onConfirm: () => modals.closeAll()
-                });
-            }
-        });
-    }
-</script>
-
-{#if update}
-    <div class="indicator flex-none">
-        <button
-            class="btn btn-square btn-ghost h-9 w-9"
-            onclick={() => confirmGithubUpdate(firmwareDownloadLink)}
-        >
-            <span
-                class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
-            >
-                {firmwareVersion}
-            </span>
-            <Firmware class="h-7 w-7" />
-        </button>
-    </div>
-{/if}
@@ -1,6 +0,0 @@
-<script lang="ts">
-	import { selectedView, views } from "$lib/stores/application";
-	import Selector from "../widget/Selector.svelte";
-</script>
-
-<Selector bind:selectedOption={$selectedView} options={$views.map((v) => v.name)} />
@@ -1,38 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/state'
-  import { telemetry } from '$lib/stores/telemetry'
-
-  import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'
-  import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'
-  import SleepButton from './SleepButton.svelte'
-  import ThemeButton from './ThemeButton.svelte'
-  import FullscreenButton from './FullscreenButton.svelte'
-  import StopButton from './StopButton.svelte'
-  import ViewSelector from './ViewSelector.svelte'
-  import { Hamburger } from '../icons'
-</script>
-
-<div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
-  <div class="flex flex-1 gap-2">
-    <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
-      <Hamburger class="h-6 w-auto" />
-    </label>
-    {#if page.data.title === 'Controller'}
-      <ViewSelector />
-    {:else}
-      <h1 class="px-2 text-xl font-bold lg:text-2xl">{page.data.title}</h1>
-    {/if}
-  </div>
-
-  <UpdateIndicator />
-
-  <FullscreenButton />
-
-  <ThemeButton />
-
-  <RssiIndicator rssi={$telemetry.rssi.rssi} />
-
-  <SleepButton />
-
-  <StopButton />
-</div>
@@ -1,35 +0,0 @@
-<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>
@@ -1,42 +0,0 @@
-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();
@@ -1,103 +0,0 @@
-<script lang="ts">
-	import { daisyColor } from "$lib/utilities";
-	import { Chart, registerables } from "chart.js";
-	import { onMount } from "svelte";
-	import { cubicOut } from "svelte/easing";
-	import { slide } from "svelte/transition";
-
-    let chartElement: HTMLCanvasElement = $state();
-	let chart: Chart;
-
-	interface Props {
-		label: any;
-		data: number[];
-		title: any;
-	}
-
-	let { label, data, title }: Props = $props();
-
-    Chart.register(...registerables);
-
-    onMount(() => {
-        chart = new Chart(chartElement, {
-			type: 'line',
-			data: {
-				labels: data,
-				datasets: [
-					{
-						label,
-						borderColor: daisyColor('--p'),
-						backgroundColor: daisyColor('--p', 50),
-						borderWidth: 2,
-                        data,
-						yAxisID: 'y'
-					},
-				]
-			},
-			options: {
-				maintainAspectRatio: false,
-				responsive: true,
-				plugins: {
-					legend: {
-						display: true
-					},
-					tooltip: {
-						mode: 'index',
-						intersect: false
-					}
-				},
-				elements: {
-					point: {
-						radius: 0
-					}
-				},
-				scales: {
-					x: {
-						grid: {
-							color: daisyColor('--bc', 10)
-						},
-						ticks: {
-							color: daisyColor('--bc')
-						},
-						display: false
-					},
-					y: {
-						type: 'linear',
-						title: {
-							display: true,
-							text: title,
-							color: daisyColor('--bc'),
-							font: {
-								size: 16,
-								weight: 'bold'
-							}
-						},
-						position: 'left',
-						min: 0,
-						max: 100,
-						grid: { color: daisyColor('--bc', 10) },
-						ticks: {
-							color: daisyColor('--bc')
-						},
-						border: { color: daisyColor('--bc', 10) }
-					}
-				}
-			}
-		});
-
-        setInterval(() => {
-            chart.data.labels = data
-            chart.data.datasets[0].data = data
-        }, 500);
-    })
-</script>
-
-
-<div class="w-full h-full overflow-x-auto">
-    <div
-        class="flex w-full flex-col space-y-1 h-60"
-        transition:slide|local={{ duration: 300, easing: cubicOut }}
-    >
-        <canvas bind:this={chartElement}></canvas>
-    </div>
-</div>
@@ -1,20 +0,0 @@
-<script lang="ts">
-    interface Props {
-        options?: string[];
-        selectedOption?: string;
-        change: () => void;
-        [key: string]: any;
-    }
-
-    let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
-</script>
-
-<select
-    bind:value={selectedOption}
-    {...rest}
-    class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
->
-    {#each options as option}
-        <option value={option}>{option}</option>
-    {/each}
-</select>
@@ -1,447 +0,0 @@
-import type { body_state_t } from './kinematic'
-import Kinematic 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 new Kinematic().getDefaultFeetPos()
-  }
-
-  protected get default_height() {
-    return 0.5
-  }
-
-  begin() {
-    console.log('Starting', this.name)
-  }
-  end() {
-    console.log('Ending', this.name)
-  }
-  step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
-    this.map_command(command)
-    this.body_state = body_state
-    this.dt = dt / 1000
-    return body_state
-  }
-
-  map_command(command: ControllerCommand) {
-    const newCommand = {
-      step_height: 0.4 + (command.s1 / 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
-}
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
@@ -1,131 +1,393 @@
-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, acos, sqrt, max, min } = Math
-
-const DEG2RAD = 0.017453292519943
-
 export default class Kinematic {
-  l1: number
-  l2: number
-  l3: number
-  l4: number
+	private l1: number;
+	private l2: number;
+	private l3: number;
+	private l4: number;

-  L: number
-  W: number
+	private L: number;
+	private W: number;

-  DEG2RAD = DEG2RAD
+	constructor() {
+		this.l1 = 50;
+		this.l2 = 20;
+		this.l3 = 120;
+		this.l4 = 155;

-  mountOffsets: number[][]
+		this.L = 140;
+		this.W = 75;
+	}

-  invMountRot = [
-    [0, 0, -1],
-    [0, 1, 0],
-    [1, 0, 0]
-  ]
+	bodyIK(
+		omega: number,
+		phi: number,
+		psi: number,
+		xm: number,
+		ym: number,
+		zm: number
+	): number[][][] {
+		const { cos, sin } = Math;

-  constructor() {
-    this.l1 = 60.5 / 100
-    this.l2 = 10 / 100
-    this.l3 = 111.7 / 100
-    this.l4 = 118.5 / 100
+		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],
+			[0, 1, 0, 0],
+			[-sin(phi), 0, cos(phi), 0],
+			[0, 0, 0, 1]
+		];
+		const Rz: number[][] = [
+			[cos(psi), -sin(psi), 0, 0],
+			[sin(psi), cos(psi), 0, 0],
+			[0, 0, 1, 0],
+			[0, 0, 0, 1]
+		];
+		const Rxyz: number[][] = this.matrixMultiply(this.matrixMultiply(Rx, Ry), Rz);

-    this.L = 207.5 / 100
-    this.W = 78 / 100
+		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);

-    this.mountOffsets = [
-      [this.L / 2, 0, this.W / 2],
-      [this.L / 2, 0, -this.W / 2],
-      [-this.L / 2, 0, this.W / 2],
-      [-this.L / 2, 0, -this.W / 2]
-    ]
-  }
+		const sHp = sin(Math.PI / 2);
+		const cHp = cos(Math.PI / 2);
+		const L = this.L;
+		const W = this.W;

-  getDefaultFeetPos(): number[][] {
-    return this.mountOffsets.map((offset, i) => {
-      return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.l1 : this.l1)]
-    })
-  }
+		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]
+			])
+		];
+	}

-  calcIK(p: body_state_t): number[] {
-    const roll = p.omega * this.DEG2RAD
-    const pitch = p.phi * this.DEG2RAD
-    const yaw = p.psi * this.DEG2RAD
-    const rot = this.euler2R(roll, pitch, yaw)
-    const inv_rot = [
-      [rot[0][0], rot[1][0], rot[2][0]],
-      [rot[0][1], rot[1][1], rot[2][1]],
-      [rot[0][2], rot[1][2], rot[2][2]]
-    ]
-    const inv_trans = [
-      -inv_rot[0][0] * p.xm - inv_rot[0][1] * p.ym - inv_rot[0][2] * p.zm,
-      -inv_rot[1][0] * p.xm - inv_rot[1][1] * p.ym - inv_rot[1][2] * p.zm,
-      -inv_rot[2][0] * p.xm - inv_rot[2][1] * p.ym - inv_rot[2][2] * p.zm
-    ]
-    return p.feet.flatMap((foot, i) => {
-      const [wx, wy, wz] = foot
-      const bx = inv_rot[0][0] * wx + inv_rot[0][1] * wy + inv_rot[0][2] * wz + inv_trans[0]
-      const by = inv_rot[1][0] * wx + inv_rot[1][1] * wy + inv_rot[1][2] * wz + inv_trans[1]
-      const bz = inv_rot[2][0] * wx + inv_rot[2][1] * wy + inv_rot[2][2] * wz + inv_trans[2]
+	private legIK(point: number[]): number[] {
+		const [x, y, z] = point;
+		const { atan2, cos, sin, sqrt, acos } = Math;
+		const { l1, l2, l3, l4 } = this;

-      const [mx, my, mz] = this.mountOffsets[i]
-      const px = bx - mx,
-        py = by - my,
-        pz = bz - mz
+		let F;

-      const lx =
-        this.invMountRot[0][0] * px + this.invMountRot[0][1] * py + this.invMountRot[0][2] * pz
-      const ly =
-        this.invMountRot[1][0] * px + this.invMountRot[1][1] * py + this.invMountRot[1][2] * pz
-      const lz =
-        this.invMountRot[2][0] * px + this.invMountRot[2][1] * py + this.invMountRot[2][2] * pz
+		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 H = sqrt(G ** 2 + z ** 2);

-      const xLocal = i % 2 === 1 ? -lx : lx
-      return this.legIK(xLocal, ly, lz)
-    })
-  }
+		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));

-  private legIK(x: number, y: number, z: number): [number, number, number] {
-    const F = sqrt(max(0, x * x + y * y - this.l1 * this.l1))
-    const G = F - this.l2
-    const H = sqrt(G * G + z * z)
-    const t1 = -atan2(y, x) - atan2(F, -this.l1)
-    const D = (H * H - this.l3 * this.l3 - this.l4 * this.l4) / (2 * this.l3 * this.l4)
-    const t3 = acos(max(-1, min(1, D)))
-    const t2 = atan2(z, G) - atan2(this.l4 * sin(t3), this.l3 + this.l4 * cos(t3))
-    return [t1, t2, t3]
-  }
+		return [theta1, theta2, theta3];
+	}

-  private euler2R(roll: number, pitch: number, yaw: number): number[][] {
-    const cr = cos(roll),
-      sr = sin(roll)
-    const cp = cos(pitch),
-      sp = sin(pitch)
-    const cy = cos(yaw),
-      sy = sin(yaw)
-    return [
-      [cp * cy, -cp * sy, sp],
-      [sr * sp * cy + sy * cr, -sr * sp * sy + cr * cy, -sr * cp],
-      [sr * sy - sp * cr * cy, sr * cy + sp * sy * cr, cr * cp]
-    ]
-  }
+	matrixMultiply(a: number[][], b: number[][]): number[][] {
+		const result: number[][] = [];
+
+		for (let i = 0; i < a.length; i++) {
+			const row: number[] = [];
+
+			for (let j = 0; j < b[0].length; j++) {
+				let sum = 0;
+
+				for (let k = 0; k < a[i].length; k++) {
+					sum += a[i][k] * b[k][j];
+				}
+
+				row.push(sum);
+			}
+
+			result.push(row);
+		}
+
+		return result;
+	}
+
+	multiplyVector(matrix: number[][], vector: number[]): number[] {
+		const rows = matrix.length;
+		const cols = matrix[0].length;
+		const vectorLength = vector.length;
+
+		if (cols !== vectorLength) {
+			throw new Error('Matrix and vector dimensions do not match for multiplication.');
+		}
+
+		const result = [];
+
+		for (let i = 0; i < rows; i++) {
+			let sum = 0;
+
+			for (let j = 0; j < cols; j++) {
+				sum += matrix[i][j] * vector[j];
+			}
+
+			result.push(sum);
+		}
+
+		return result;
+	}
+
+	private 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[][] {
+		const det = this.determinant(matrix);
+		const adjugate = this.adjugate(matrix);
+		const scalar = 1 / det;
+		const inverse: number[][] = [];
+
+		for (let i = 0; i < matrix.length; i++) {
+			const row: number[] = [];
+
+			for (let j = 0; j < matrix[i].length; j++) {
+				row.push(adjugate[i][j] * scalar);
+			}
+
+			inverse.push(row);
+		}
+
+		return inverse;
+	}
+
+	private determinant(matrix: number[][]): number {
+		if (matrix.length !== matrix[0].length) {
+			throw new Error('The matrix is not square.');
+		}
+
+		if (matrix.length === 2) {
+			return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
+		}
+
+		let det = 0;
+
+		for (let i = 0; i < matrix.length; i++) {
+			const sign = i % 2 === 0 ? 1 : -1;
+			const subMatrix: number[][] = [];
+
+			for (let j = 1; j < matrix.length; j++) {
+				const row: number[] = [];
+
+				for (let k = 0; k < matrix.length; k++) {
+					if (k !== i) {
+						row.push(matrix[j][k]);
+					}
+				}
+
+				subMatrix.push(row);
+			}
+
+			det += sign * matrix[0][i] * this.determinant(subMatrix);
+		}
+
+		return det;
+	}
+
+	private adjugate(matrix: number[][]): number[][] {
+		if (matrix.length !== matrix[0].length) {
+			throw new Error('The matrix is not square.');
+		}
+
+		const adjugate: number[][] = [];
+
+		for (let i = 0; i < matrix.length; i++) {
+			const row: number[] = [];
+
+			for (let j = 0; j < matrix[i].length; j++) {
+				const sign = (i + j) % 2 === 0 ? 1 : -1;
+				const subMatrix: number[][] = [];
+
+				for (let k = 0; k < matrix.length; k++) {
+					if (k !== i) {
+						const subRow: number[] = [];
+
+						for (let l = 0; l < matrix.length; l++) {
+							if (l !== j) {
+								subRow.push(matrix[k][l]);
+							}
+						}
+
+						subMatrix.push(subRow);
+					}
+				}
+
+				const cofactor = sign * this.determinant(subMatrix);
+				row.push(cofactor);
+			}
+
+			adjugate.push(row);
+		}
+
+		return this.transpose(adjugate);
+	}
+
+	private transpose(matrix: number[][]): number[][] {
+		const transposed: number[][] = [];
+
+		for (let i = 0; i < matrix.length; i++) {
+			const row: number[] = [];
+
+			for (let j = 0; j < matrix[i].length; j++) {
+				row.push(matrix[j][i]);
+			}
+
+			transposed.push(row);
+		}
+
+		return transposed;
+	}
+}
+
+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;
+	}
 }
@@ -0,0 +1,22 @@
+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;
@@ -1,379 +1,319 @@
 import {
-    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
+	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 { TransformControls } from 'three/examples/jsm/controls/TransformControls';
-import { Reflector } from 'three/examples/jsm/objects/Reflector.js';
 import { type URDFJoint, type URDFMimicJoint, type URDFRobot } from 'urdf-loader';
 import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls';
-import { sunCalculator } from './utilities/position-utilities';

 export const addScene = () => new Scene();

 interface position {
-    x?: number;
-    y?: number;
-    z?: number;
+	x?: number;
+	y?: number;
+	z?: number;
 }

 interface light {
-    color?: ColorRepresentation;
-    intensity?: number;
+	color?: ColorRepresentation;
+	intensity?: number;
+}
+
+interface gridOptions {
+	divisions?: number;
+	size?: number;
 }

 interface arrowOptions {
-    origin: position;
-    direction: position;
-    length?: number;
-    color?: ColorRepresentation;
+	origin: position;
+	direction: position;
+	length?: number;
+	color?: ColorRepresentation;
 }

 type directionalLight = position & light;

-export default class SceneBuilder {
-    public scene: Scene;
-    public camera!: PerspectiveCamera;
-    public ground!: Mesh;
-    public renderer!: WebGLRenderer;
-    public orbit: OrbitControls;
-    public callback: 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;
+type gridHelperOptions = gridOptions & position;

-    constructor() {
-        this.scene = new Scene();
-        if (this.scene.environment?.mapping) {
-            this.scene.environment.mapping = EquirectangularReflectionMapping;
-        }
-        return this;
-    }
-
-    public addRenderer = (parameters?: WebGLRendererParameters) => {
-        this.renderer = new WebGLRenderer(parameters);
-        this.renderer.outputColorSpace = 'srgb';
-        this.renderer.shadowMap.enabled = true;
-        this.renderer.shadowMap.type = PCFSoftShadowMap;
-        this.renderer.toneMapping = ACESFilmicToneMapping;
-        this.renderer.toneMappingExposure = 0.85;
-        if (!parameters?.canvas) document.body.appendChild(this.renderer.domElement);
-        return this;
-    };
-
-    public addSky = () => {
-        this.sky = new Sky();
-        this.sky.scale.setScalar(450000);
-        this.scene.add(this.sky);
-        const effectController = {
-            turbidity: 10,
-            rayleigh: 3,
-            mieCoefficient: 0.005,
-            mieDirectionalG: 0.7,
-            elevation: sunCalculator.calculateSunElevation(),
-            azimuth: 200,
-            exposure: this.renderer.toneMappingExposure
-        };
-        const uniforms = this.sky.material.uniforms;
-        uniforms['turbidity'].value = effectController.turbidity;
-        uniforms['rayleigh'].value = effectController.rayleigh;
-        uniforms['mieCoefficient'].value = effectController.mieCoefficient;
-        uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;
-        this.renderer.toneMappingExposure = 0.5;
-        const phi = MathUtils.degToRad(90 - effectController.elevation);
-        const theta = MathUtils.degToRad(effectController.azimuth);
-        const sun = new Vector3();
-
-        sun.setFromSphericalCoords(1, phi, theta);
-        uniforms['sunPosition'].value.copy(sun);
-        return this;
-    };
-
-    public addPerspectiveCamera = (options: position) => {
-        this.camera = new PerspectiveCamera();
-        this.camera.position.set(options.x ?? 0, options.y ?? 2.7, options.z ?? 0);
-        this.scene.add(this.camera);
-        return this;
-    };
-
-    public addGroundPlane = (options?: position) => {
-        const checkerboardTexture = this.createCheckerboardTexture(1024, 2);
-        checkerboardTexture.wrapS = RepeatWrapping;
-        checkerboardTexture.wrapT = RepeatWrapping;
-        checkerboardTexture.repeat.set(100, 100);
-        const checkerboardMat = new MeshBasicMaterial({
-            map: checkerboardTexture,
-            opacity: 0.1,
-            transparent: true
-        });
-
-        const plane = new PlaneGeometry(400, 400);
-
-        this.ground = new Mesh(plane, checkerboardMat);
-        this.ground.rotation.x = -Math.PI / 2;
-        this.ground.position.set(options?.x ?? 0, options?.y ?? 0.01, options?.z ?? 0);
-        this.ground.receiveShadow = true;
-        this.scene.add(this.ground);
-
-        const mirror = new Reflector(plane, {
-            clipBias: 0.003,
-            textureWidth: window.innerWidth * window.devicePixelRatio,
-            textureHeight: window.innerHeight * window.devicePixelRatio,
-            color: 0x00bfff
-        });
-        mirror.rotateX(-Math.PI / 2);
-        this.scene.add(mirror);
-
-        return this;
-    };
-
-    public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
-        this.orbit = new OrbitControls(this.camera, this.renderer.domElement);
-        this.orbit.minDistance = minDistance;
-        this.orbit.maxDistance = maxDistance;
-        this.orbit.autoRotate = autoRotate;
-        this.orbit.update();
-        return this;
-    };
-
-    public addAmbientLight = (options: light) => {
-        const ambientLight = new AmbientLight(options.color, options.intensity);
-        this.scene.add(ambientLight);
-        return this;
-    };
-
-    public addDirectionalLight = (options: directionalLight) => {
-        const directionalLight = new DirectionalLight(options.color, options.intensity);
-        directionalLight.castShadow = true;
-        directionalLight.shadow.camera.top = 10;
-        directionalLight.shadow.camera.bottom = -10;
-        directionalLight.shadow.camera.right = 10;
-        directionalLight.shadow.camera.left = -10;
-        directionalLight.shadow.mapSize.set(4096, 4096);
-
-        directionalLight.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
-        this.scene.add(directionalLight);
-        return this;
-    };
-
-    private createCheckerboardTexture = (size: number, squares: number) => {
-        const canvas = document.createElement('canvas');
-        canvas.width = size;
-        canvas.height = size;
-        const context = canvas.getContext('2d');
-
-        const squareSize = size / squares;
-
-        for (let y = 0; y < squares; y++) {
-            for (let x = 0; x < squares; x++) {
-                context!.fillStyle = (x + y) % 2 === 0 ? '#ffffff' : '#000000';
-                context!.fillRect(x * squareSize, y * squareSize, squareSize, squareSize);
-            }
-        }
-
-        const texture = new CanvasTexture(canvas);
-        texture.wrapS = texture.wrapT = RepeatWrapping;
-        texture.anisotropy = 16;
-        return texture;
-    };
-
-    public addFogExp2 = (color: ColorRepresentation, density?: number) => {
-        this.scene.fog = new FogExp2(color, density);
-        return this;
-    };
-
-    public fillParent = () => {
-        const parentElement = this.renderer.domElement.parentElement;
-        if (parentElement) {
-            const width = parentElement.clientWidth;
-            const height = parentElement.clientHeight;
-            this.handleResize(width, height);
-        }
-        return this;
-    };
-
-    public handleResize = (width = window.innerWidth, height = window.innerHeight) => {
-        this.renderer.setSize(width, height);
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        this.camera.aspect = width / height;
-        this.camera.updateProjectionMatrix();
-        return this;
-    };
-
-    public addRenderCb = (callback: Function) => {
-        this.callback = callback;
-        return this;
-    };
-
-    public startRenderLoop = () => {
-        this.renderer.setAnimationLoop(() => {
-            this.renderer.render(this.scene, this.camera);
-            this.orbit.update();
-            this.handleRobotShadow();
-            if (this.callback) this.callback();
-            if (!this.liveStreamTexture) return;
-        });
-        return this;
-    };
-
-    public addArrowHelper = (options?: arrowOptions) => {
-        const dir = new Vector3(
-            options?.direction.x ?? 0,
-            options?.direction.y ?? 0,
-            options?.direction.z ?? 0
-        );
-        const origin = new Vector3(
-            options?.origin.x ?? 0,
-            options?.origin.y ?? 0,
-            options?.origin.z ?? 0
-        );
-        const arrowHelper = new ArrowHelper(
-            dir,
-            origin,
-            options?.length ?? 1.5,
-            options?.color ?? 0xff0000
-        );
-        this.scene.add(arrowHelper);
-        return this;
-    };
-
-    private setJointValue(jointName: string, angle: number) {
-        if (!this.model) return;
-        if (!this.model.joints[jointName]) return;
-        this.model.joints[jointName].setJointValue(angle);
-    }
-
-    isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed';
-
-    highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
-        const traverse = (c: any) => {
-            if (c.type === 'Mesh') {
-                if (revert) {
-                    c.material = c.__origMaterial;
-                    delete c.__origMaterial;
-                } else {
-                    c.__origMaterial = c.material;
-                    c.material = material;
-                }
-            }
-
-            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;
-    };
+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);
+}
+
+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;
+
+	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 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();
+
+		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 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 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;
+	};
+
+	public addAmbientLight = (options: light) => {
+		const ambientLight = new AmbientLight(options.color, options.intensity);
+		this.scene.add(ambientLight);
+		return this;
+	};
+
+	public addDirectionalLight = (options: directionalLight) => {
+		const directionalLight = new DirectionalLight(options.color, options.intensity);
+		directionalLight.castShadow = true;
+		directionalLight.shadow.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;
+	};
+
+	public addGridHelper = (options: gridHelperOptions) => {
+		this.gridHelper = new GridHelper(options.size, options.divisions);
+		this.gridHelper.position.set(options.x ?? 0, options.y ?? 0, options.z ?? 0);
+		this.gridHelper.material.opacity = 0.2;
+		this.gridHelper.material.depthWrite = false;
+		this.gridHelper.material.transparent = true;
+		this.scene.add(this.gridHelper);
+		return this;
+	};
+
+	public addFogExp2 = (color: ColorRepresentation, density?: number) => {
+		this.scene.fog = new FogExp2(color, density);
+		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 addRenderCb = (callback: Function) => {
+		this.callback = callback;
+		return this;
+	};
+
+	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;
+	};
+
+	public addArrowHelper = (options?: arrowOptions) => {
+		const dir = new Vector3(
+			options?.direction.x ?? 0,
+			options?.direction.y ?? 0,
+			options?.direction.z ?? 0
+		);
+		const origin = new Vector3(
+			options?.origin.x ?? 0,
+			options?.origin.y ?? 0,
+			options?.origin.z ?? 0
+		);
+		const arrowHelper = new ArrowHelper(
+			dir,
+			origin,
+			options?.length ?? 1.5,
+			options?.color ?? 0xff0000
+		);
+		this.scene.add(arrowHelper);
+		return this;
+	};
+
+	private setJointValue(jointName: string, angle: number) {
+		if (!this.model) return;
+		if (!this.model.joints[jointName]) return;
+		this.model.joints[jointName].setJointValue(angle);
+	}
+
+	isJoint = (j: URDFJoint) => j.isURDFJoint && j.jointType !== 'fixed';
+
+	highlightLinkGeometry = (m: URDFMimicJoint, revert: boolean, material: MeshPhongMaterial) => {
+		const traverse = (c: any) => {
+			if (c.type === 'Mesh') {
+				if (revert) {
+					c.material = c.__origMaterial;
+					delete c.__origMaterial;
+				} else {
+					c.__origMaterial = c.material;
+					c.material = material;
+				}
+			}
+
+			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 addModel = (model: any) => {
+		this.model = model;
+		this.scene.add(model);
+		return this;
+	};
+
+	public addDragControl = (updateAngle: any) => {
+		const highlightColor = '#FFFFFF';
+		const highlightMaterial = new MeshPhongMaterial({
+			shininess: 10,
+			color: highlightColor,
+			emissive: highlightColor,
+			emissiveIntensity: 0.25
+		});
+
+		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);
+
+		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 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;
+	};
 }
@@ -1,38 +1,51 @@
 import { Result } from '$lib/utilities/result';
-import { browser } from '$app/environment';

 class FileService {
-	private dbPromise: Promise<Result<IDBDatabase, string>> | null = browser
-		? this.openDatabase()
-		: null;
+	private dbName = 'fileStorageDB';
+	private dbVersion = 1;
+	private storeName = 'files';
+	private dbPromise: Promise<Result<IDBDatabase, string>>;
+
+	constructor() {
+		this.dbPromise = this.openDatabase();
+	}

 	private async openDatabase(): Promise<Result<IDBDatabase, string>> {
 		return new Promise((resolve) => {
-			const request = indexedDB.open('fileStorageDB', 1);
+			const request = indexedDB.open(this.dbName, this.dbVersion);

-			request.onupgradeneeded = () => {
-				request.result.createObjectStore('files');
-			};
-			request.onsuccess = () => resolve(Result.ok(request.result));
 			request.onerror = () => resolve(Result.err('Error opening database'));
+
+			request.onsuccess = () => resolve(Result.ok(request.result));
+
+			request.onupgradeneeded = (event) => {
+				const db = request.result;
+				if (!db.objectStoreNames.contains(this.storeName)) {
+					db.createObjectStore(this.storeName);
+				}
+			};
 		});
 	}

 	private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
-		if (!browser || !this.dbPromise)
-			return Result.err('Not running in browser or DB not initialized');
 		const dbResult = await this.dbPromise;
-		if (dbResult.isErr()) return Result.err('Database not initialized');
-		const store = dbResult.inner.transaction('files', mode).objectStore('files');
-		return Result.ok(store);
+		if (dbResult.isErr()) {
+			return Result.err('Database not initialized properly');
+		}
+		const db = dbResult.inner;
+		const transaction = db.transaction(this.storeName, mode);
+		return Result.ok(transaction.objectStore(this.storeName));
 	}

 	public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
 		const storeResult = await this.getStore('readwrite');
-		if (storeResult.isErr()) return Result.err('Failed to access store');
+		if (storeResult.isErr()) {
+			return Result.err('Failed to access object store for writing');
+		}
+		const store = storeResult.inner;

 		return new Promise((resolve) => {
-			const request = storeResult.inner.put(file, key);
+			const request = store.put(file, key);
 			request.onsuccess = () => resolve(Result.ok(request.result));
 			request.onerror = () => resolve(Result.err('Failed to save file'));
 		});
@@ -40,15 +53,19 @@ class FileService {

 	public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
 		const storeResult = await this.getStore('readonly');
-		if (storeResult.isErr()) return Result.err('Failed to access store');
+		if (storeResult.isErr()) {
+			return Result.err('Failed to access object store for reading');
+		}
+		const store = storeResult.inner;

 		return new Promise((resolve) => {
-			const request = storeResult.inner.get(key);
+			const request = store.get(key);
+
 			request.onsuccess = () =>
-				resolve(request.result ? Result.ok(request.result) : Result.err('File not found'));
+				resolve(request.result ? Result.ok(request.result) : Result.err('File content not found'));
 			request.onerror = () => resolve(Result.err('Failed to retrieve file'));
 		});
 	}
 }

-export default browser ? new FileService() : null;
+export default new FileService();
@@ -1,2 +1,3 @@
 export { default as fileService } from './file-service';
+export { default as socketService } from './socket-service';
 export { default as resultService } from './result-service';
@@ -0,0 +1,96 @@
+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();
@@ -1,55 +0,0 @@
-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();
@@ -1,67 +0,0 @@
-import { persistentStore } from '$lib/utilities';
-import { get, type Writable } from 'svelte/store';
-
-import Visualization from '$lib/components/Visualization.svelte';
-import Stream from '$lib/components/Stream.svelte';
-import ChartWidget from '$lib/components/widget/ChartWidget.svelte';
-
-export interface WidgetConfig {
-	id: string | number;
-	component: keyof typeof WidgetComponents;
-	props?: Record<string, any>;
-}
-
-export interface WidgetContainerConfig {
-	id: string | number;
-	layout?: 'row' | 'column' | 'wrap';
-	header?: string;
-	widgets: Array<WidgetConfig | WidgetContainerConfig>;
-}
-
-export const isWidgetConfig = (
-	widget: WidgetConfig | WidgetContainerConfig
-): widget is WidgetConfig => 'component' in widget;
-
-export const WidgetComponents = {
-	Visualization,
-	Stream,
-	ChartWidget
-};
-
-interface View {
-	name: string;
-	content: WidgetContainerConfig;
-}
-
-const defaultViews: View[] = [
-	{
-		name: 'Stream',
-		content: {
-			id: 'root',
-			layout: 'column',
-			widgets: [{ id: 2, component: 'Stream' }]
-		}
-	},
-	{
-		name: '3D representation',
-		content: {
-			id: 'root',
-			layout: 'column',
-			widgets: [{ id: 2, component: 'Visualization', props: { debug: true } }]
-		}
-	},
-	{
-		name: 'Split screen',
-		content: {
-			id: 'root',
-			widgets: [
-				{ id: 2, component: 'Stream' },
-				{ id: 2, component: 'Visualization', props: { debug: true } }
-			]
-		}
-	}
-];
-
-export const views: Writable<View[]> = persistentStore('views', defaultViews);
-
-export const selectedView = persistentStore('selected_view', get(views)[0].name);
@@ -1,20 +0,0 @@
-import { api } from '$lib/api';
-import { notifications } from '$lib/components/toasts/notifications';
-import { writable, type Writable } from 'svelte/store';
-
-let featureFlagsStore: Writable<Record<string, boolean>>;
-
-export function useFeatureFlags() {
-	if (!featureFlagsStore) {
-		featureFlagsStore = writable<Record<string, boolean>>({});
-
-		api.get<Record<string, boolean>>('/api/features').then((result) => {
-			if (result.isOk()) featureFlagsStore.set(result.inner);
-			else {
-				notifications.error('Feature flag could not be fetched', 2500);
-			}
-		});
-	}
-
-	return featureFlagsStore;
-}
@@ -1,24 +0,0 @@
-import { writable } from 'svelte/store';
-
-export const isFullscreen = writable(false);
-
-export function toggleFullscreen() {
-	isFullscreen.update((state) => {
-		!state ? document.documentElement.requestFullscreen() : document.exitFullscreen();
-		return !state;
-	});
-}
-
-export function enterFullscreen() {
-	if (!document.fullscreenElement) {
-		document.documentElement.requestFullscreen();
-		isFullscreen.set(true);
-	}
-}
-
-export function exitFullscreen() {
-	if (document.fullscreenElement) {
-		document.exitFullscreen();
-		isFullscreen.set(false);
-	}
-}
@@ -1,47 +0,0 @@
-import { readable, derived } from 'svelte/store'
-
-export type GamepadState = {
-  available: boolean
-  gamepads: Gamepad[]
-}
-
-export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
-  const update = () => {
-    const hasGamepadAPI = 'getGamepads' in navigator
-    if (!hasGamepadAPI) {
-      set({ available: false, gamepads: [] })
-      return
-    }
-
-    const gps = navigator.getGamepads?.() ?? []
-    const validGamepads = gps.filter(Boolean) as Gamepad[]
-    set({
-      available: true,
-      gamepads: validGamepads
-    })
-    raf = requestAnimationFrame(update)
-  }
-
-  window.addEventListener('gamepadconnected', update)
-  window.addEventListener('gamepaddisconnected', update)
-  let raf = requestAnimationFrame(update)
-
-  return () => {
-    cancelAnimationFrame(raf)
-    window.removeEventListener('gamepadconnected', update)
-    window.removeEventListener('gamepaddisconnected', update)
-  }
-})
-
-export const gamepad = derived(gamepads, $gamepads =>
-  $gamepads.available && $gamepads.gamepads.length > 0 ? $gamepads.gamepads[0] : null
-)
-
-export const gamepadAxes = derived(gamepad, $gamepad => $gamepad?.axes ?? [0, 0, 0, 0])
-
-export const gamepadButtons = derived(gamepad, $gamepad => $gamepad?.buttons ?? [])
-
-export const hasGamepad = derived(
-  gamepads,
-  $gamepads => $gamepads.available && $gamepads.gamepads.length > 0
-)
@@ -1,27 +0,0 @@
-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 };
-})();
@@ -1,9 +1,3 @@
 export * from './socket-store';
 export * from './logging-store';
 export * from './model-store';
-export * from './socket';
-export * from './fullscreen';
-export * from './telemetry';
-export * from './analytics';
-export * from './featureFlags';
-export * from './location-store';
@@ -1,5 +0,0 @@
-import { persistentStore } from '$lib/utilities';
-import { writable } from 'svelte/store';
-import appEnv from 'app-env';
-
-export const location = appEnv.VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '');
@@ -1,45 +1,24 @@
-import type { ControllerInput } from '$lib/types/models';
-import { persistentStore } from '$lib/utilities/svelte-utilities';
+import type { ControllerInput } from '$lib/models';
+import { persistentStore } from '$lib/utilities';
 import { writable, type Writable } from 'svelte/store';

 export const emulateModel = writable(true);

-export const jointNames = persistentStore('joint_names', <string[]>[]);
+export const jointNames = persistentStore('joint_names', []);

 export const model = writable();

-export const modes = [
-	'deactivated',
-	'idle',
-	'calibration',
-	'rest',
-	'stand',
-	'crawl',
-	'walk'
-] as const;
+export const modes = ['idle', 'rest', 'stand', 'walk'] as const;

 export type Modes = (typeof modes)[number];

-export enum ModesEnum {
-	Deactivated,
-	Idle,
-	Calibration,
-	Rest,
-	Stand,
-	Crawl,
-	Walk
-}
+export const mode: Writable<Modes> = writable('idle');

-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 outControllerData = writable(new Int8Array([0, 0, 0, 0, 0, 0, 70, 0]));

 export const input: Writable<ControllerInput> = writable({
 	left: { x: 0, y: 0 },
 	right: { x: 0, y: 0 },
-	height: 50,
-	speed: 50,
-	s1: 50
+	height: 70,
+	speed: 0
 });
@@ -1,27 +0,0 @@
-import { readable } from 'svelte/store';
-
-export const heading = readable(0, (set) => {
-	const updateHeading = (e: any) => {
-		let alpha;
-		if (e.webkitCompassHeading) alpha = e.webkitCompassHeading;
-		else if (e.alpha) alpha = e.alpha;
-		else {
-			let q = e.target.quaternion;
-			alpha =
-				Math.atan2(2 * q[0] * q[1] + 2 * q[2] * q[3], 1 - 2 * q[1] * q[1] - 2 * q[2] * q[2]) *
-				(180 / Math.PI);
-			if (alpha < 0) alpha += 360;
-		}
-		set(alpha);
-	};
-	if ('AbsoluteOrientationSensor' in window) {
-		var sensor = new window.AbsoluteOrientationSensor({ frequency: 60 }) as any;
-		sensor.addEventListener('reading', updateHeading);
-		sensor.start();
-	} else if (window.DeviceMotionEvent) window.addEventListener('deviceorientation', updateHeading);
-
-	return () => {
-		if ('AbsoluteOrientationSensor' in window) sensor.removeEventListener('reading', updateHeading);
-		window.addEventListener('deviceorientation', updateHeading);
-	};
-});
@@ -1,27 +1,31 @@
 import { writable, type Writable } from 'svelte/store';
-import { type angles } from '$lib/types/models';
+import { type angles } from '$lib/models';

-export const servoAnglesOut: Writable<number[]> = writable([
-	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-]);
-export const servoAngles: Writable<number[]> = writable([
-	0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
-]);
+export const isConnected = writable(false);
+export const servoAngles: Writable<angles> = writable(new Int16Array(12).fill(0));
 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
+	distances,
+	settings,
+	systemInfo
 };
@@ -1,132 +0,0 @@
-import { writable } from 'svelte/store'
-
-const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const
-type SocketEvent = (typeof socketEvents)[number]
-
-export enum Topics {
-  imu = 0,
-  mode = 1,
-  command = 2,
-  servo = 3,
-  input = 4,
-  angles = 5,
-  position = 6
-}
-
-function createWebSocket() {
-  let listeners = new Map<string | Topics, 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 as unknown as Topics)
-      }
-    }
-    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: Topics, 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: Topics, data: unknown) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return
-    ws.send(JSON.stringify([2, event, data]))
-  }
-
-  function unsubscribeToEvent(event: Topics) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return
-    ws.send(`[1,${event}]`)
-  }
-
-  function subscribeToEvent(event: Topics) {
-    if (!ws || ws.readyState !== WebSocket.OPEN) return
-    ws.send(`[0,${event}]`)
-  }
-
-  return {
-    subscribe,
-    sendEvent,
-    init,
-    on: <T>(event: Topics | SocketEvent, listener: (data: T) => void): (() => void) => {
-      let eventListeners = listeners.get(event)
-      if (!eventListeners) {
-        if (!socketEvents.includes(event)) {
-          subscribeToEvent(event)
-        }
-        eventListeners = new Set()
-        listeners.set(event, eventListeners)
-      }
-      eventListeners.add(listener as (data: any) => void)
-
-      return () => {
-        unsubscribe(event, listener)
-      }
-    },
-    off: (event: Topics, listener?: (data: any) => void) => {
-      unsubscribe(event, listener)
-    }
-  }
-}
-
-export const socket = createWebSocket()
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Rune Harlyk	d36d3a711f	Merge branch 'walking-gait' of https://github.com/runeharlyk/SpotMicroESP32-Leika into walking-gait	2024-05-27 01:25:43 +02:00
Rune Harlyk	9e40e01065	Updates to use process for camera stream	2024-03-07 15:14:10 +01:00
Rune Harlyk	971418fce8	Updates camera and mocks	2024-03-07 14:01:09 +01:00
Rune Harlyk	fae6171f93	Simplifies spot class and add threaded websocket controller interface	2024-03-05 15:02:31 +01:00
Rune Harlyk	7208cc7b1c	🎍 Adds virtual sensors and camera mjpeg stream	2024-03-05 11:35:10 +01:00
Rune Harlyk	f28d5e345b	🐕 Adds way to simulate the model	2024-03-04 23:41:48 +01:00
Rune Harlyk	5449658df7	Refactors simulation an raspberry pi project	2024-03-04 22:27:43 +01:00
Rune Harlyk	ebca54f2a0	🧪 Adds initial new python mocking	2024-03-04 18:43:07 +01:00
Rune Harlyk	9c5096a3c5	🐾 Updates controller to have command	2024-03-04 18:43:07 +01:00
Rune Harlyk	1753e539db	🦴 Adds Simulator from OpenQuadruped/spot_mini_mini	2024-03-04 18:43:07 +01:00
Rune Harlyk	e673a50fa2	📷 Adds setting for fixing camera on robot	2024-03-04 18:43:06 +01:00
Rune Harlyk	c6eadc36fd	📲 Reconnect socket after connection closes	2024-03-04 18:15:25 +01:00
Rune Harlyk	ccb115cccc	Fixes relative imports	2024-03-04 16:11:50 +01:00
Rune Harlyk	14c0f438a6	🧪 Adds initial new python mocking	2024-03-04 15:57:30 +01:00
Rune Harlyk	68a0e609fc	🐾 Updates controller to have command	2024-03-04 15:56:22 +01:00
Rune Harlyk	6a981b64fa	Adds Simulator from OpenQuadruped/spot_mini_mini	2024-03-04 15:55:45 +01:00
Rune Harlyk	02871591fd	📷 Adds setting for fixing camera on robot	2024-03-01 16:56:56 +01:00
Rune Harlyk	3f07a91ce8	👍 Updates app unit test suite	2024-02-26 15:35:15 +01:00
Rune Harlyk	37b9022a96	🎄 Update app-unit-test.yml	2024-02-26 15:14:31 +01:00
Rune Harlyk	40616f2cda	🌲 Update app-unit-test.yml	2024-02-26 15:13:24 +01:00
Rune Harlyk	aff2765724	Merge branch 'master' into walking-gait	2024-02-26 15:02:45 +01:00
Rune Harlyk	b80a5a97db	👻 Updates node action, version and install to use ci	2024-02-26 15:01:23 +01:00
Rune Harlyk	13b7550022	📲 Reconnect socket after connection closes	2024-02-26 14:45:58 +01:00
Rune Harlyk	70203c3700	🎃 Updates trigger branch for app-unit-test.yml	2024-02-26 14:45:58 +01:00
				`@@ -1 +0,0 @@`
				// place files you want to import through the `$lib` alias in this folder.