Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: Darkages/SpotMicroESP32-Leika:skills
Branches Tags
Darkages/SpotMicroESP32-Leika:master Darkages/SpotMicroESP32-Leika:sdcard-pb-improve Darkages/SpotMicroESP32-Leika:eventbus-restructuring Darkages/SpotMicroESP32-Leika:event_bus Darkages/SpotMicroESP32-Leika:ICM20948_fix_rb1 Darkages/SpotMicroESP32-Leika:ICM20948_fix Darkages/SpotMicroESP32-Leika:skills_system Darkages/SpotMicroESP32-Leika:ICM20948_plus_new_HTTP Darkages/SpotMicroESP32-Leika:animation Darkages/SpotMicroESP32-Leika:skills Darkages/SpotMicroESP32-Leika:extract-messages Darkages/SpotMicroESP32-Leika:new-frontpage Darkages/SpotMicroESP32-Leika:lidar Darkages/SpotMicroESP32-Leika:walking-gait
..
pull from: Darkages/SpotMicroESP32-Leika:new-frontpage
Branches Tags
Darkages/SpotMicroESP32-Leika:master Darkages/SpotMicroESP32-Leika:sdcard-pb-improve Darkages/SpotMicroESP32-Leika:eventbus-restructuring Darkages/SpotMicroESP32-Leika:event_bus Darkages/SpotMicroESP32-Leika:ICM20948_fix_rb1 Darkages/SpotMicroESP32-Leika:ICM20948_fix Darkages/SpotMicroESP32-Leika:skills_system Darkages/SpotMicroESP32-Leika:ICM20948_plus_new_HTTP Darkages/SpotMicroESP32-Leika:animation Darkages/SpotMicroESP32-Leika:skills Darkages/SpotMicroESP32-Leika:extract-messages Darkages/SpotMicroESP32-Leika:new-frontpage Darkages/SpotMicroESP32-Leika:lidar Darkages/SpotMicroESP32-Leika:walking-gait

1 Commits
skills .. new-frontpage

Author SHA1 Message Date
Rune Harlyk d0b192a3e6 💅 Updates the frontpage 2025-03-08 13:06:56 +01:00
196 changed files with 7111 additions and 219338 deletions
Expand all files Collapse all files
.github/workflows/deploy.yml
-61
View File
@@ -1,61 +0,0 @@
name: Deploy GitHub Pages
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
build:
runs-on: ubuntu-latest
defaults:
run:
working-directory: ./app
env:
BASE_PATH: /SpotMicroESP32-Leika
steps:
- uses: actions/checkout@v4
- uses: pnpm/action-setup@v2
with:
version: 9
- uses: actions/setup-node@v4
with:
node-version: 20
cache: "pnpm"
cache-dependency-path: "./app/pnpm-lock.yaml"
- run: pnpm install
- run: pnpm run build
- name: Setup Pages
uses: actions/configure-pages@v4
with:
static_site_generator: "sveltekit"
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: app/build/
deploy:
runs-on: ubuntu-latest
needs: build
environment:
name: github-pages
steps:
- name: Deploy
id: deployment
uses: actions/deploy-pages@v4
.github/workflows/embedded-build.yml
+9 -8
View File
@@ -2,19 +2,20 @@ name: PlatformIO CI
on: on:
push: push:
branches: [master] branches: [ master ]
paths: paths:
- "esp32/**" - 'esp32/**'
- "platformio.ini"
pull_request: pull_request:
branches: [master] branches: [ master ]
paths: paths:
- "esp32/**" - 'esp32/**'
- "platformio.ini"
jobs: jobs:
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
defaults:
run:
working-directory: ./esp32
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v3
@@ -27,8 +28,8 @@ jobs:
- uses: actions/setup-python@v4 - uses: actions/setup-python@v4
with: with:
python-version: "3.x" python-version: '3.x'
- run: pip install -r esp32/scripts/requirements.txt - run: pip install -r ./scripts/requirements.txt
- name: Install PlatformIO Core - name: Install PlatformIO Core
run: pip install --upgrade platformio run: pip install --upgrade platformio
.gitignore
+1 -1
View File
@@ -2,7 +2,7 @@
.vscode/c_cpp_properties.json .vscode/c_cpp_properties.json
.vscode/launch.json .vscode/launch.json
.vscode/ipch .vscode/ipch
__pycache__/ __pycache__/
*.py[cod] *.py[cod]
*$py.class *$py.class
.pio
.vscode/extensions.json
Vendored
+4 -4
View File
@@ -2,10 +2,10 @@
// See http://go.microsoft.com/fwlink/?LinkId=827846 // See http://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format // for the documentation about the extensions.json format
"recommendations": [ "recommendations": [
"bradlc.vscode-tailwindcss", "platformio.platformio-ide",
"esbenp.prettier-vscode", "svelte.svelte-vscode",
"platformio.platformio-ide", "bradlc.vscode-tailwindcss",
"svelte.svelte-vscode" "esbenp.prettier-vscode"
], ],
"unwantedRecommendations": [ "unwantedRecommendations": [
"ms-vscode.cpptools-extension-pack" "ms-vscode.cpptools-extension-pack"
app/.env
-3
View File
@@ -1,3 +0,0 @@
PUBLIC_VITE_USE_HOST_NAME=true
PUBLIC_USE_JSON=true
PUBLIC_USE_MSGPACK=true
app/.gitignore
+1
View File
@@ -3,6 +3,7 @@ node_modules
/build /build
/.svelte-kit /.svelte-kit
/package /package
.env
.env.* .env.*
!.env.example !.env.example
vite.config.js.timestamp-* vite.config.js.timestamp-*
app/README.md
+17 -8
View File
@@ -8,21 +8,30 @@ If you're seeing this, you've probably already done this step. Congrats!
```bash ```bash
# create a new project in the current directory # create a new project in the current directory
npx sv create npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
``` ```
## Developing ## Developing
Once you've created your project, follow these steps: Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
1: Delete package-lock.json ```bash
2: Check `git status`. If you see any changes other than package-lock.json or favicon.ico, run the command `git restore ./` (See below) npm run dev
3: Run `npm install` or `pnpm install` or `yarn` to install the dependencies
4: Run `npm run build` to build the project
Running `git status` should show: # or start the server and open the app in a new browser tab
npm run dev -- --open
```
[![example.png](https://i.postimg.cc/yddM3hH3/example.png)](https://postimg.cc/7CFsp2bq) ## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`. You can preview the production build with `npm run preview`.
app/package.json
+1 -1
View File
@@ -45,7 +45,6 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@msgpack/msgpack": "^3.1.2",
"@niku/vite-env-caster": "^1.0.2", "@niku/vite-env-caster": "^1.0.2",
"@sveltejs/adapter-auto": "^4.0.0", "@sveltejs/adapter-auto": "^4.0.0",
"@tailwindcss/vite": "^4.0.12", "@tailwindcss/vite": "^4.0.12",
@@ -53,6 +52,7 @@
"compare-versions": "^6.1.0", "compare-versions": "^6.1.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"daisyui": "^5.0.0", "daisyui": "^5.0.0",
"jwt-decode": "^4.0.0",
"nipplejs": "^0.10.1", "nipplejs": "^0.10.1",
"svelte-dnd-list": "^0.1.8", "svelte-dnd-list": "^0.1.8",
"svelte-modals": "^2.0.0", "svelte-modals": "^2.0.0",
app/pnpm-lock.yaml
Generated
+41 -58
View File
@@ -8,18 +8,15 @@ importers:
.: .:
dependencies: dependencies:
'@msgpack/msgpack':
specifier: ^3.1.2
version: 3.1.2
'@niku/vite-env-caster': '@niku/vite-env-caster':
specifier: ^1.0.2 specifier: ^1.0.2
version: 1.1.2 version: 1.1.2
'@sveltejs/adapter-auto': '@sveltejs/adapter-auto':
specifier: ^4.0.0 specifier: ^4.0.0
version: 4.0.0(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))) version: 4.0.0(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))
'@tailwindcss/vite': '@tailwindcss/vite':
specifier: ^4.0.12 specifier: ^4.0.12
version: 4.0.12(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) version: 4.0.12(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
chart.js: chart.js:
specifier: ^4.4.2 specifier: ^4.4.2
version: 4.4.2 version: 4.4.2
@@ -32,6 +29,9 @@ importers:
daisyui: daisyui:
specifier: ^5.0.0 specifier: ^5.0.0
version: 5.0.0 version: 5.0.0
jwt-decode:
specifier: ^4.0.0
version: 4.0.0
nipplejs: nipplejs:
specifier: ^0.10.1 specifier: ^0.10.1
version: 0.10.1 version: 0.10.1
@@ -65,13 +65,13 @@ importers:
version: 1.49.1 version: 1.49.1
'@sveltejs/adapter-static': '@sveltejs/adapter-static':
specifier: ^3.0.1 specifier: ^3.0.1
version: 3.0.1(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))) version: 3.0.1(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))
'@sveltejs/kit': '@sveltejs/kit':
specifier: ^2.5.27 specifier: ^2.5.27
version: 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) version: 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
'@sveltejs/vite-plugin-svelte': '@sveltejs/vite-plugin-svelte':
specifier: ^5.0.3 specifier: ^5.0.3
version: 5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) version: 5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
'@types/eslint': '@types/eslint':
specifier: ^8.56.0 specifier: ^8.56.0
version: 8.56.0 version: 8.56.0
@@ -128,10 +128,10 @@ importers:
version: 0.18.5 version: 0.18.5
vite: vite:
specifier: ^6.2.1 specifier: ^6.2.1
version: 6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2) version: 6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)
vitest: vitest:
specifier: ^1.2.0 specifier: ^1.2.0
version: 1.2.0(@types/node@24.0.12)(jsdom@24.0.0)(lightningcss@1.29.2) version: 1.2.0(jsdom@24.0.0)(lightningcss@1.29.2)
packages: packages:
@@ -509,10 +509,6 @@ packages:
'@kurkle/color@0.3.2': '@kurkle/color@0.3.2':
resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==} resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
'@msgpack/msgpack@3.1.2':
resolution: {integrity: sha512-JEW4DEtBzfe8HvUYecLU9e6+XJnKDlUAIve8FvPzF3Kzs6Xo/KuZkZJsDH0wJXl/qEZbeeE7edxDNY3kMs39hQ==}
engines: {node: '>= 18'}
'@niku/vite-env-caster@1.1.2': '@niku/vite-env-caster@1.1.2':
resolution: {integrity: sha512-6I/8REFdmfeGnK92H3nYHGc6lExwjm72jLxAsDPlfji97Eej4rOMl6WuYGLgsQI0pl5RrMRMveeRdijdL6hW+Q==} resolution: {integrity: sha512-6I/8REFdmfeGnK92H3nYHGc6lExwjm72jLxAsDPlfji97Eej4rOMl6WuYGLgsQI0pl5RrMRMveeRdijdL6hW+Q==}
@@ -764,9 +760,6 @@ packages:
'@types/json-schema@7.0.15': '@types/json-schema@7.0.15':
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
'@types/node@24.0.12':
resolution: {integrity: sha512-LtOrbvDf5ndC9Xi+4QZjVL0woFymF/xSTKZKPgrrl7H7XoeDvnD+E2IclKVDyaK9UM756W/3BXqSU+JEHopA9g==}
'@types/semver@7.5.8': '@types/semver@7.5.8':
resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
@@ -1430,6 +1423,10 @@ packages:
json-stable-stringify-without-jsonify@1.0.1: json-stable-stringify-without-jsonify@1.0.1:
resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
jwt-decode@4.0.0:
resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
engines: {node: '>=18'}
keyv@4.5.4: keyv@4.5.4:
resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
@@ -2022,9 +2019,6 @@ packages:
ufo@1.5.3: ufo@1.5.3:
resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==} resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
undici-types@7.8.0:
resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
universalify@0.2.0: universalify@0.2.0:
resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==} resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
engines: {node: '>= 4.0.0'} engines: {node: '>= 4.0.0'}
@@ -2538,8 +2532,6 @@ snapshots:
'@kurkle/color@0.3.2': {} '@kurkle/color@0.3.2': {}
'@msgpack/msgpack@3.1.2': {}
'@niku/vite-env-caster@1.1.2': '@niku/vite-env-caster@1.1.2':
dependencies: dependencies:
chalk: 4.1.2 chalk: 4.1.2
@@ -2621,18 +2613,18 @@ snapshots:
'@sinclair/typebox@0.27.8': {} '@sinclair/typebox@0.27.8': {}
'@sveltejs/adapter-auto@4.0.0(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))': '@sveltejs/adapter-auto@4.0.0(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))':
dependencies: dependencies:
'@sveltejs/kit': 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) '@sveltejs/kit': 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
import-meta-resolve: 4.1.0 import-meta-resolve: 4.1.0
'@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))': '@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))':
dependencies: dependencies:
'@sveltejs/kit': 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) '@sveltejs/kit': 2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
'@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))': '@sveltejs/kit@2.17.3(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))':
dependencies: dependencies:
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
'@types/cookie': 0.6.0 '@types/cookie': 0.6.0
cookie: 0.6.0 cookie: 0.6.0
devalue: 5.1.1 devalue: 5.1.1
@@ -2645,27 +2637,27 @@ snapshots:
set-cookie-parser: 2.6.0 set-cookie-parser: 2.6.0
sirv: 3.0.1 sirv: 3.0.1
svelte: 5.20.4 svelte: 5.20.4
vite: 6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2) vite: 6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)
'@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))': '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))':
dependencies: dependencies:
'@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
debug: 4.4.0 debug: 4.4.0
svelte: 5.20.4 svelte: 5.20.4
vite: 6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2) vite: 6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
'@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))': '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))':
dependencies: dependencies:
'@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)))(svelte@5.20.4)(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
debug: 4.4.0 debug: 4.4.0
deepmerge: 4.3.1 deepmerge: 4.3.1
kleur: 4.1.5 kleur: 4.1.5
magic-string: 0.30.17 magic-string: 0.30.17
svelte: 5.20.4 svelte: 5.20.4
vite: 6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2) vite: 6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)
vitefu: 1.0.6(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)) vitefu: 1.0.6(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@@ -2722,13 +2714,13 @@ snapshots:
'@tailwindcss/oxide-win32-arm64-msvc': 4.0.12 '@tailwindcss/oxide-win32-arm64-msvc': 4.0.12
'@tailwindcss/oxide-win32-x64-msvc': 4.0.12 '@tailwindcss/oxide-win32-x64-msvc': 4.0.12
'@tailwindcss/vite@4.0.12(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))': '@tailwindcss/vite@4.0.12(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2))':
dependencies: dependencies:
'@tailwindcss/node': 4.0.12 '@tailwindcss/node': 4.0.12
'@tailwindcss/oxide': 4.0.12 '@tailwindcss/oxide': 4.0.12
lightningcss: 1.29.2 lightningcss: 1.29.2
tailwindcss: 4.0.12 tailwindcss: 4.0.12
vite: 6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2) vite: 6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)
'@tweenjs/tween.js@23.1.2': {} '@tweenjs/tween.js@23.1.2': {}
@@ -2745,11 +2737,6 @@ snapshots:
'@types/json-schema@7.0.15': {} '@types/json-schema@7.0.15': {}
'@types/node@24.0.12':
dependencies:
undici-types: 7.8.0
optional: true
'@types/semver@7.5.8': {} '@types/semver@7.5.8': {}
'@types/stats.js@0.17.3': {} '@types/stats.js@0.17.3': {}
@@ -3513,6 +3500,8 @@ snapshots:
json-stable-stringify-without-jsonify@1.0.1: {} json-stable-stringify-without-jsonify@1.0.1: {}
jwt-decode@4.0.0: {}
keyv@4.5.4: keyv@4.5.4:
dependencies: dependencies:
json-buffer: 3.0.1 json-buffer: 3.0.1
@@ -4021,9 +4010,6 @@ snapshots:
ufo@1.5.3: {} ufo@1.5.3: {}
undici-types@7.8.0:
optional: true
universalify@0.2.0: {} universalify@0.2.0: {}
unplugin-icons@0.18.5: unplugin-icons@0.18.5:
@@ -4068,13 +4054,13 @@ snapshots:
uzip@0.20201231.0: {} uzip@0.20201231.0: {}
vite-node@1.2.0(@types/node@24.0.12)(lightningcss@1.29.2): vite-node@1.2.0(lightningcss@1.29.2):
dependencies: dependencies:
cac: 6.7.14 cac: 6.7.14
debug: 4.4.0 debug: 4.4.0
pathe: 1.1.2 pathe: 1.1.2
picocolors: 1.0.1 picocolors: 1.0.1
vite: 5.4.14(@types/node@24.0.12)(lightningcss@1.29.2) vite: 5.4.14(lightningcss@1.29.2)
transitivePeerDependencies: transitivePeerDependencies:
- '@types/node' - '@types/node'
- less - less
@@ -4086,33 +4072,31 @@ snapshots:
- supports-color - supports-color
- terser - terser
vite@5.4.14(@types/node@24.0.12)(lightningcss@1.29.2): vite@5.4.14(lightningcss@1.29.2):
dependencies: dependencies:
esbuild: 0.21.5 esbuild: 0.21.5
postcss: 8.5.3 postcss: 8.5.3
rollup: 4.34.8 rollup: 4.34.8
optionalDependencies: optionalDependencies:
'@types/node': 24.0.12
fsevents: 2.3.3 fsevents: 2.3.3
lightningcss: 1.29.2 lightningcss: 1.29.2
vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2): vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2):
dependencies: dependencies:
esbuild: 0.25.0 esbuild: 0.25.0
postcss: 8.5.3 postcss: 8.5.3
rollup: 4.34.8 rollup: 4.34.8
optionalDependencies: optionalDependencies:
'@types/node': 24.0.12
fsevents: 2.3.3 fsevents: 2.3.3
jiti: 2.4.2 jiti: 2.4.2
lightningcss: 1.29.2 lightningcss: 1.29.2
yaml: 2.4.2 yaml: 2.4.2
vitefu@1.0.6(vite@6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)): vitefu@1.0.6(vite@6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)):
optionalDependencies: optionalDependencies:
vite: 6.2.1(@types/node@24.0.12)(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2) vite: 6.2.1(jiti@2.4.2)(lightningcss@1.29.2)(yaml@2.4.2)
vitest@1.2.0(@types/node@24.0.12)(jsdom@24.0.0)(lightningcss@1.29.2): vitest@1.2.0(jsdom@24.0.0)(lightningcss@1.29.2):
dependencies: dependencies:
'@vitest/expect': 1.2.0 '@vitest/expect': 1.2.0
'@vitest/runner': 1.2.0 '@vitest/runner': 1.2.0
@@ -4132,11 +4116,10 @@ snapshots:
strip-literal: 1.3.0 strip-literal: 1.3.0
tinybench: 2.8.0 tinybench: 2.8.0
tinypool: 0.8.4 tinypool: 0.8.4
vite: 5.4.14(@types/node@24.0.12)(lightningcss@1.29.2) vite: 5.4.14(lightningcss@1.29.2)
vite-node: 1.2.0(@types/node@24.0.12)(lightningcss@1.29.2) vite-node: 1.2.0(lightningcss@1.29.2)
why-is-node-running: 2.2.2 why-is-node-running: 2.2.2
optionalDependencies: optionalDependencies:
'@types/node': 24.0.12
jsdom: 24.0.0 jsdom: 24.0.0
transitivePeerDependencies: transitivePeerDependencies:
- less - less
app/src/app.css
+19 -19
View File
@@ -2,39 +2,39 @@
@plugin "daisyui"; @plugin "daisyui";
@plugin "daisyui" { @plugin "daisyui" {
themes: themes:
light --default, light --default,
dark --prefersdark; dark --prefersdark;
} }
@plugin "daisyui/theme" { @plugin "daisyui/theme" {
name: 'light'; name: 'light';
default: true; default: true;
--color-primary: #00bfff; --color-primary: #00bfff;
--color-secondary: #3c00ff; --color-secondary: #3c00ff;
--base-content: white; --base-content: white;
} }
@plugin "daisyui/theme" { @plugin "daisyui/theme" {
name: 'dark'; name: 'dark';
prefersdark: true; prefersdark: true;
--color-primary: #00bfff; --color-primary: #00bfff;
--color-secondary: #3c00ff; --color-secondary: #3c00ff;
--base-content: oklch(0.3 0.012 256); --base-content: oklch(0.3 0.012 256);
} }
#nipple_0_0, #nipple_0_0,
#nipple_1_1 { #nipple_1_1 {
z-index: 10 !important; z-index: 10 !important;
} }
#three-gui-panel { #three-gui-panel {
top: 64px; top: 64px;
right: 0px; right: 0px;
} }
@media (max-width: 1023px) { @media (max-width: 1023px) {
#three-gui-panel { #three-gui-panel {
top: 48px; top: 48px;
} }
} }
app/src/lib/components/ConfirmDialog.svelte
+52 -34
View File
@@ -1,43 +1,61 @@
<script lang="ts"> <script lang="ts">
import { focusTrap } from 'svelte-focus-trap' import { focusTrap } from 'svelte-focus-trap';
import { fly } from 'svelte/transition' import { fly } from 'svelte/transition';
import { Cancel, Check } from '$lib/components/icons' import { Cancel, Check } from '$lib/components/icons';
import { modals, exitBeforeEnter, type ModalProps } from 'svelte-modals' import { modals, exitBeforeEnter } from 'svelte-modals';
let { // provided by <Modals />
isOpen,
title, interface Props {
message, isOpen: boolean;
onConfirm, title: string;
labels = { message: string;
cancel: { label: 'Cancel', icon: Cancel }, onConfirm: any;
confirm: { label: 'OK', icon: Check } labels?: any;
} }
}: ModalProps = $props()
let {
isOpen,
title,
message,
onConfirm,
labels = {
cancel: { label: 'Cancel', icon: Cancel },
confirm: { label: 'OK', icon: Check }
}
}: Props = $props();
</script> </script>
{#if isOpen} {#if isOpen}
{@const SvelteComponent = labels?.confirm.icon} {@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 <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"> role="dialog"
<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2> class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
<div class="divider my-2"></div> transition:fly={{ y: 50 }}
<p class="text-base-content mb-1 text-start">{message}</p> use:exitBeforeEnter
<div class="divider my-2"></div> use:focusTrap
<div class="flex justify-end gap-2"> >
<button class="btn btn-error inline-flex items-center" onclick={() => modals.close()}> <div
<labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span> class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
</button> >
<button class="btn btn-primary inline-flex items-center" onclick={onConfirm}> <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
<SvelteComponent class="mr-2 h-5 w-5" /><span>{labels?.confirm.label}</span> <div class="divider my-2"></div>
</button> <p class="text-base-content mb-1 text-start">{message}</p>
</div> <div class="divider my-2"></div>
<div class="flex justify-end gap-2">
<button
class="btn btn-primary inline-flex items-center"
onclick={() => modals.close()}
>
<labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
</button>
<button
class="btn btn-warning text-warning-content inline-flex items-center"
onclick={onConfirm}
>
<SvelteComponent class="mr-2 h-5 w-5" /><span>{labels?.confirm.label}</span>
</button>
</div>
</div>
</div> </div>
</div>
{/if} {/if}
app/src/lib/components/InfoDialog.svelte
+43 -32
View File
@@ -1,40 +1,51 @@
<script lang="ts"> <script lang="ts">
import { focusTrap } from 'svelte-focus-trap'; import { focusTrap } from 'svelte-focus-trap';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { Check } from './icons'; import { Check } from './icons';
import { exitBeforeEnter, type ModalProps } from 'svelte-modals'; import { exitBeforeEnter } from 'svelte-modals';
let { // provided by <Modals />
isOpen,
title, interface Props {
message, isOpen: boolean;
onDismiss, title: string;
labels = { message: string;
dismiss: { label: 'Dismiss', icon: Check }, onDismiss: any;
}, dismiss?: any;
}: ModalProps = $props(); }
let {
isOpen,
title,
message,
onDismiss,
dismiss = { label: 'Dismiss', icon: Check }
}: Props = $props();
</script> </script>
{#if isOpen} {#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 <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"> role="dialog"
<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2> class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
<div class="divider my-2"></div> transition:fly={{ y: 50 }}
<p class="text-base-content mb-1 text-start">{message}</p> use:exitBeforeEnter
<div class="divider my-2"></div> use:focusTrap
<div class="flex justify-end gap-2"> >
<button <div
class="btn btn-warning text-warning-content inline-flex items-center" class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
onclick={onDismiss}> >
<labels.dismiss.icon class="mr-2 h-5 w-5" /><span>{labels.dismiss.label}</span> <h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
</button> <div class="divider my-2"></div>
</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> </div>
</div>
{/if} {/if}
app/src/lib/components/OrientationIndicator.svelte
-78
View File
@@ -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;
let sceneBuilder: SceneBuilder;
let cube: THREE.Mesh;
let targetRotation = new THREE.Euler();
let lastUpdateTime = 0;
const LERP_SPEED = 5; // rotations per second
const initThreeJS = () => {
sceneBuilder = new SceneBuilder()
.addRenderer({ canvas: canvas, antialias: true, alpha: true })
.addPerspectiveCamera({ x: 2, y: 0, z: 2 })
.addOrbitControls(1, 10, false)
.addAmbientLight({ color: 0x404040, intensity: 0.5 })
.addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
.fillParent();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({
color: 0x00ff00,
transparent: true,
opacity: 0.8,
});
cube = new THREE.Mesh(geometry, material);
sceneBuilder.scene.add(cube);
sceneBuilder.addRenderCb(() => {
if (!cube) return;
const currentTime = performance.now();
const deltaTime = (currentTime - lastUpdateTime) / 1000; // convert to seconds
lastUpdateTime = currentTime;
const lerpFactor = Math.min(1, LERP_SPEED * deltaTime);
cube.rotation.x = THREE.MathUtils.lerp(cube.rotation.x, targetRotation.x, lerpFactor);
cube.rotation.y = THREE.MathUtils.lerp(cube.rotation.y, targetRotation.y, lerpFactor);
cube.rotation.z = THREE.MathUtils.lerp(cube.rotation.z, targetRotation.z, lerpFactor);
});
sceneBuilder.startRenderLoop();
};
const updateOrientation = () => {
if (!cube) return;
const y = -$imu.x[$imu.x.length - 1] || 0;
const x = $imu.y[$imu.y.length - 1] || 0;
const z = -$imu.z[$imu.z.length - 1] || 0;
targetRotation.set(
THREE.MathUtils.degToRad(x),
THREE.MathUtils.degToRad(y),
THREE.MathUtils.degToRad(z)
);
};
onMount(() => {
initThreeJS();
});
onDestroy(() => {
sceneBuilder?.renderer?.dispose();
});
$effect(() => {
if ($imu) {
updateOrientation();
}
});
</script>
<div class="h-60 w-60 border-2 border-base-300 rounded-md">
<canvas class="w-full h-full" bind:this={canvas}></canvas>
</div>
app/src/lib/components/SettingsCard.svelte
+62 -53
View File
@@ -1,60 +1,69 @@
<script lang="ts"> <script lang="ts">
import { slide } from 'svelte/transition' import { slide } from 'svelte/transition';
import { cubicOut } from 'svelte/easing' import { cubicOut } from 'svelte/easing';
import { Down } from './icons' import { Down } from './icons';
interface Props { interface Props {
open?: boolean open?: boolean;
collapsible?: boolean collapsible?: boolean;
icon?: import('svelte').Snippet icon?: import('svelte').Snippet;
title?: import('svelte').Snippet title?: import('svelte').Snippet;
children?: import('svelte').Snippet children?: import('svelte').Snippet;
right?: import('svelte').Snippet }
}
let { open = $bindable(true), collapsible = true, icon, title, children, right }: Props = $props() let {
open = $bindable(true),
collapsible = true,
icon,
title,
children
}: Props = $props();
</script> </script>
{#if collapsible} {#if collapsible}
<div <div
class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"> class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
<div >
class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"> <div
<span class="inline-flex items-baseline"> class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
{@render icon?.()} >
{@render title?.()} <span class="inline-flex items-baseline">
</span> {@render icon?.()}
<button {@render title?.()}
class="btn btn-circle btn-ghost btn-sm" </span>
onclick={() => { <button
open = !open class="btn btn-circle btn-ghost btn-sm"
}}> onclick={() => {
<Down open = !open;
class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open ? }}
'rotate-180' >
: ''}" /> <Down
</button> class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open
</div> ? 'rotate-180'
{#if open} : ''}"
<div />
class="flex flex-col gap-2 p-4 pt-0" </button>
transition:slide|local={{ duration: 300, easing: cubicOut }}> </div>
{@render children?.()} {#if open}
</div> <div
{/if} class="flex flex-col gap-2 p-4 pt-0"
</div> transition:slide|local={{ duration: 300, easing: cubicOut }}
>
{@render children?.()}
</div>
{/if}
</div>
{:else} {:else}
<div <div
class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"> class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
<div >
class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"> <div class="min-h-16 w-full p-4 text-xl font-medium">
<span class="inline-flex items-baseline"> <span class="inline-flex items-baseline">
{@render icon?.()} {@render icon?.()}
{@render title?.()} {@render title?.()}
</span> </span>
{@render right?.()} </div>
</div> <div class="flex flex-col gap-2 p-4 pt-0">
<div class="flex flex-col gap-2 p-4 pt-0"> {@render children?.()}
{@render children?.()} </div>
</div> </div>
</div>
{/if} {/if}
app/src/lib/components/StatusItem.svelte
-45
View File
@@ -1,45 +0,0 @@
<script lang="ts">
type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning'
const {
icon,
title,
description = '',
variant = 'primary',
class: klass = '',
children = null
} = $props<{
icon?: any
title: string
description?: string | number
variant?: Variant
class?: string
children?: () => any
}>()
const Icon = $derived(icon)
const variants: Record<Variant, [string, string]> = {
success: ['bg-success', 'text-success-content'],
error: ['bg-error', 'text-error-content'],
primary: ['bg-primary', 'text-primary-content'],
info: ['bg-info', 'text-info-content'],
warning: ['bg-warning', 'text-warning-content']
}
const variantKey: Variant = (variant as Variant) in variants ? (variant as Variant) : 'primary'
const [bgColor, textColor] = variants[variantKey]
</script>
<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2 {klass}">
{#if icon}
<div class="mask mask-hexagon {bgColor} h-auto w-10 flex-none">
<Icon class="{textColor} h-auto w-full scale-75" />
</div>
{/if}
<div class="grow">
<div class="font-bold">{title}</div>
<div class="text-sm opacity-75 grow">{description}</div>
</div>
{@render children?.()}
</div>
app/src/lib/components/Visualization.svelte
+38 -30
View File
@@ -6,7 +6,7 @@
LineBasicMaterial, LineBasicMaterial,
Mesh, Mesh,
MeshBasicMaterial, MeshBasicMaterial,
type Object3D, Object3D,
SphereGeometry, SphereGeometry,
Vector3, Vector3,
type NormalBufferAttributes, type NormalBufferAttributes,
@@ -21,23 +21,22 @@
servoAnglesOut, servoAnglesOut,
servoAngles, servoAngles,
mpu, mpu,
jointNames, jointNames
currentKinematic,
walkGait,
walkGaits,
walkGaitToMode
} from '$lib/stores' } from '$lib/stores'
import { import { footColor, populateModelCache, throttler, toeWorldPositions } from '$lib/utilities'
extractFootColor,
populateModelCache,
throttler,
getToeWorldPositions
} from '$lib/utilities'
import SceneBuilder from '$lib/sceneBuilder' import SceneBuilder from '$lib/sceneBuilder'
import { lerp, degToRad } from 'three/src/math/MathUtils' import { lerp, degToRad } from 'three/src/math/MathUtils'
import { GUI } from 'three/addons/libs/lil-gui.module.min.js' import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
import { type body_state_t } from '$lib/kinematic' import Kinematic, { type body_state_t } from '$lib/kinematic'
import { BezierState, CalibrationState, IdleState, RestState, StandState } from '$lib/gait' import {
BezierState,
CalibrationState,
EightPhaseWalkState,
FourPhaseWalkState,
IdleState,
RestState,
StandState
} from '$lib/gait'
import { radToDeg } from 'three/src/math/MathUtils.js' import { radToDeg } from 'three/src/math/MathUtils.js'
import type { URDFRobot } from 'urdf-loader' import type { URDFRobot } from 'urdf-loader'
import { get } from 'svelte/store' import { get } from 'svelte/store'
@@ -48,12 +47,20 @@
panel?: boolean panel?: boolean
debug?: boolean debug?: boolean
ground?: boolean ground?: boolean
zoom?: number
} }
let { sky = true, orbit = false, panel = true, debug = false, ground = true }: Props = $props() let {
sky = true,
orbit = false,
panel = true,
debug = false,
ground = true,
zoom = 8
}: Props = $props()
let sceneManager = $state(new SceneBuilder()) let sceneManager = $state(new SceneBuilder())
let canvas: HTMLCanvasElement let canvas: HTMLCanvasElement = $state()
let currentModelAngles: number[] = new Array(12).fill(0) let currentModelAngles: number[] = new Array(12).fill(0)
let modelTargetAngles: number[] = new Array(12).fill(0) let modelTargetAngles: number[] = new Array(12).fill(0)
@@ -66,7 +73,7 @@
let target_position = { x: 0, z: 0, yaw: 0 } let target_position = { x: 0, z: 0, yaw: 0 }
let kinematic = get(currentKinematic) let kinematic = new Kinematic()
let planners = { let planners = {
[ModesEnum.Deactivated]: new IdleState(), [ModesEnum.Deactivated]: new IdleState(),
@@ -74,6 +81,7 @@
[ModesEnum.Calibration]: new CalibrationState(), [ModesEnum.Calibration]: new CalibrationState(),
[ModesEnum.Rest]: new RestState(), [ModesEnum.Rest]: new RestState(),
[ModesEnum.Stand]: new StandState(), [ModesEnum.Stand]: new StandState(),
[ModesEnum.Crawl]: new EightPhaseWalkState(),
[ModesEnum.Walk]: new BezierState() [ModesEnum.Walk]: new BezierState()
} }
let lastTick = performance.now() let lastTick = performance.now()
@@ -87,7 +95,7 @@
xm: 0, xm: 0,
ym: 0.5, ym: 0.5,
zm: 0, zm: 0,
feet: kinematic.getDefaultFeetPos() feet: planners[ModesEnum.Idle].default_feet_pos
} }
let settings = { let settings = {
@@ -112,7 +120,6 @@
await populateModelCache() await populateModelCache()
await createScene() await createScene()
servoAngles.subscribe(updateAnglesFromStore) servoAngles.subscribe(updateAnglesFromStore)
walkGait.subscribe(gait => planners[ModesEnum.Walk].set_mode(walkGaitToMode(gait)))
if (panel) createPanel() if (panel) createPanel()
}) })
@@ -173,7 +180,7 @@
sceneManager sceneManager
.addRenderer({ antialias: true, canvas, alpha: true }) .addRenderer({ antialias: true, canvas, alpha: true })
.addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 }) .addPerspectiveCamera({ x: -0.5, y: 0.5, z: 1 })
.addOrbitControls(2, 20, orbit) .addOrbitControls(Math.min(zoom, 8), 30, orbit)
.addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 3 }) .addDirectionalLight({ x: 10, y: 20, z: 10, color: 0xffffff, intensity: 3 })
.addAmbientLight({ color: 0xffffff, intensity: 0.5 }) .addAmbientLight({ color: 0xffffff, intensity: 0.5 })
.addFogExp2(0xcccccc, 0.015) .addFogExp2(0xcccccc, 0.015)
@@ -197,7 +204,7 @@
for (let i = 0; i < 4; i++) { for (let i = 0; i < 4; i++) {
const geometry = new BufferGeometry() const geometry = new BufferGeometry()
const material = new LineBasicMaterial({ color: extractFootColor() }) const material = new LineBasicMaterial({ color: footColor() })
const line = new Line(geometry, material) const line = new Line(geometry, material)
trace_lines.push(geometry) trace_lines.push(geometry)
sceneManager.scene.add(line) sceneManager.scene.add(line)
@@ -260,15 +267,16 @@
if (sceneManager.isDragging || !settings['Internal kinematic']) return if (sceneManager.isDragging || !settings['Internal kinematic']) return
const controlData = get(outControllerData) const controlData = get(outControllerData)
const data = { const data = {
lx: controlData[0], stop: controlData[0],
ly: controlData[1], lx: controlData[1],
rx: controlData[2], ly: controlData[2],
ry: controlData[3], rx: controlData[3],
h: controlData[4], ry: controlData[4],
s: controlData[5], h: controlData[5],
s1: controlData[6] s: controlData[6],
s1: controlData[7]
} }
body_state.ym = data.h body_state.ym = ((data.h + 127) * 0.75) / 100
let planner = planners[get(mode)] let planner = planners[get(mode)]
const delta = performance.now() - lastTick const delta = performance.now() - lastTick
@@ -303,7 +311,7 @@
const robot = sceneManager.model const robot = sceneManager.model
if (!robot) return if (!robot) return
const toes = getToeWorldPositions(robot) const toes = toeWorldPositions(robot)
renderTraceLines(toes) renderTraceLines(toes)
update_camera(robot) update_camera(robot)
app/src/lib/components/icons/index.ts
+2 -6
View File
@@ -35,9 +35,6 @@ export { default as Hamburger } from '~icons/mdi/hamburger-menu'
export { default as FileIcon } from '~icons/mdi/file' export { default as FileIcon } from '~icons/mdi/file'
export { default as FolderIcon } from '~icons/mdi/folder-outline' export { default as FolderIcon } from '~icons/mdi/folder-outline'
export { default as FolderOpenOutline } from '~icons/mdi/folder-open-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 Down } from '~icons/tabler/chevron-down'
export { default as Cancel } from '~icons/tabler/x' export { default as Cancel } from '~icons/tabler/x'
@@ -53,14 +50,13 @@ export { default as Power } from '~icons/tabler/power'
export { default as MAC } from '~icons/tabler/dna-2' export { default as MAC } from '~icons/tabler/dna-2'
export { default as Home } from '~icons/tabler/home' export { default as Home } from '~icons/tabler/home'
export { default as SSID } from '~icons/tabler/router' export { default as SSID } from '~icons/tabler/router'
export { default as DNS } from '~icons/mdi/dns' export { default as DNS } from '~icons/tabler/address-book'
export { default as Gateway } from '~icons/tabler/torii' export { default as Gateway } from '~icons/tabler/torii'
export { default as Subnet } from '~icons/tabler/grid-dots' export { default as Subnet } from '~icons/tabler/grid-dots'
export { default as Channel } from '~icons/tabler/antenna' export { default as Channel } from '~icons/tabler/antenna'
export { default as Scan } from '~icons/tabler/radar-2' export { default as Scan } from '~icons/tabler/radar-2'
export { default as Add } from '~icons/tabler/circle-plus' export { default as Add } from '~icons/tabler/circle-plus'
export { default as Edit } from '~icons/mdi/edit' export { default as Edit } from '~icons/tabler/pencil'
export { default as EditOff } from '~icons/mdi/edit-off'
export { default as Delete } from '~icons/tabler/trash' export { default as Delete } from '~icons/tabler/trash'
export { default as Network } from '~icons/tabler/router' export { default as Network } from '~icons/tabler/router'
app/src/lib/components/layout/WidgetContainer.svelte
+30 -33
View File
@@ -1,40 +1,37 @@
<script lang="ts"> <script lang="ts">
import WidgetContainer from './WidgetContainer.svelte'; import WidgetContainer from './WidgetContainer.svelte';
import { import { WidgetComponents, type WidgetContainerConfig, isWidgetConfig } from '$lib/stores/application';
WidgetComponents, import Widget from './Widget.svelte';
type WidgetContainerConfig,
isWidgetConfig,
} from '$lib/stores/application';
import Widget from './Widget.svelte';
interface Props { interface Props {
container: WidgetContainerConfig; container: WidgetContainerConfig;
} }
let { container }: Props = $props(); let { container }: Props = $props();
</script> </script>
<div class="w-full h-full flex flex-col overflow-hidden"> <div class="w-full h-full flex flex-col overflow-hidden">
<div <div
class="flex w-full h-full" class="flex w-full h-full"
class:flex-row={container.layout === 'column'} class:flex-row={container.layout === 'column'}
class:flex-col={container.layout === 'row'} class:flex-col={container.layout === 'row'}
class:flex-wrap={container.layout === 'wrap'}> class:flex-wrap={container.layout === 'wrap'}
{#each container.widgets as widget, index (widget.id + '-' + index)} >
<Widget> {#each container.widgets as widget, index (widget.id + '-' + index)}
{#if isWidgetConfig(widget)} <Widget>
{@const SvelteComponent = WidgetComponents[widget.component]} {#if isWidgetConfig(widget)}
<SvelteComponent {...widget.props} /> {@const SvelteComponent = WidgetComponents[widget.component]}
{:else if widget.widgets} <SvelteComponent {...widget.props} />
<WidgetContainer container={widget} /> {:else if widget.widgets}
{/if} <WidgetContainer container={widget} />
</Widget> {/if}
{#if index !== container.widgets.length - 1} </Widget>
<div {#if index !== container.widgets.length - 1}
class="divider bg-base-300 m-0" <div
class:divider-horizontal={container.layout === 'column'}> class="divider bg-base-300 m-0"
</div> class:divider-horizontal={container.layout === 'column'}
{/if} ></div>
{/each} {/if}
</div> {/each}
</div>
</div> </div>
app/src/lib/components/menu/Menu.svelte
+17 -33
View File
@@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state' import { page } from '$app/state'
import { base } from '$app/paths'
import { useFeatureFlags } from '$lib/stores/featureFlags' import { useFeatureFlags } from '$lib/stores/featureFlags'
import GithubButton from '../menu/GithubButton.svelte' import GithubButton from '../menu/GithubButton.svelte'
import LogoButton from '../menu/LogoButton.svelte' import LogoButton from '../menu/LogoButton.svelte'
@@ -20,10 +19,9 @@
Router, Router,
AP, AP,
Copyright, Copyright,
Metrics, Metrics
DNS
} from '$lib/components/icons' } from '$lib/components/icons'
import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public' import appEnv from 'app-env'
const features = useFeatureFlags() const features = useFeatureFlags()
@@ -42,10 +40,6 @@
submenu?: menuItem[] submenu?: menuItem[]
} }
function withBase(path: string) {
return `${base}${path.startsWith('/') ? path : '/' + path}`
}
let menuItems = $state<menuItem[]>([]) let menuItems = $state<menuItem[]>([])
$effect(() => { $effect(() => {
@@ -53,13 +47,13 @@
{ {
title: 'Connection', title: 'Connection',
icon: WiFi, icon: WiFi,
href: withBase('/connection'), href: '/connection',
feature: !PUBLIC_VITE_USE_HOST_NAME feature: !appEnv.VITE_USE_HOST_NAME
}, },
{ {
title: 'Controller', title: 'Controller',
icon: MdiController, icon: MdiController,
href: withBase('/controller'), href: '/controller',
feature: true feature: true
}, },
{ {
@@ -70,25 +64,25 @@
{ {
title: 'I2C', title: 'I2C',
icon: Connection, icon: Connection,
href: withBase('/peripherals/i2c'), href: '/peripherals/i2c',
feature: true feature: true
}, },
{ {
title: 'Camera', title: 'Camera',
icon: Camera, icon: Camera,
href: withBase('/peripherals/camera'), href: '/peripherals/camera',
feature: $features.camera feature: $features.camera
}, },
{ {
title: 'Servo', title: 'Servo',
icon: MotorOutline, icon: MotorOutline,
href: withBase('/peripherals/servo'), href: '/peripherals/servo',
feature: true feature: true
}, },
{ {
title: 'IMU', title: 'IMU',
icon: Rotate3d, icon: Rotate3d,
href: withBase('/peripherals/imu'), href: '/peripherals/imu',
feature: $features.imu || $features.mag || $features.bmp feature: $features.imu || $features.mag || $features.bmp
} }
] ]
@@ -101,19 +95,13 @@
{ {
title: 'WiFi Station', title: 'WiFi Station',
icon: Router, icon: Router,
href: withBase('/wifi/sta'), href: '/wifi/sta',
feature: true feature: true
}, },
{ {
title: 'Access Point', title: 'Access Point',
icon: AP, icon: AP,
href: withBase('/wifi/ap'), href: '/wifi/ap',
feature: true
},
{
title: 'mDNS',
icon: DNS,
href: withBase('/wifi/mdns'),
feature: true feature: true
} }
] ]
@@ -126,25 +114,25 @@
{ {
title: 'System Status', title: 'System Status',
icon: Health, icon: Health,
href: withBase('/system/status'), href: '/system/status',
feature: true feature: true
}, },
{ {
title: 'File System', title: 'File System',
icon: Folder, icon: Folder,
href: withBase('/system/filesystem'), href: '/system/filesystem',
feature: true feature: true
}, },
{ {
title: 'System Metrics', title: 'System Metrics',
icon: Metrics, icon: Metrics,
href: withBase('/system/metrics'), href: '/system/metrics',
feature: true feature: $features.analytics
}, },
{ {
title: 'Firmware Update', title: 'Firmware Update',
icon: Update, icon: Update,
href: withBase('/system/update'), href: '/system/update',
feature: $features.ota || $features.upload_firmware || $features.download_firmware feature: $features.ota || $features.upload_firmware || $features.download_firmware
} }
] ]
@@ -177,11 +165,7 @@
<div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content"> <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
<LogoButton {appName} /> <LogoButton {appName} />
<MenuList <MenuList {menuItems} select={updateMenu} class="grow flex-nowrap overflow-y-auto" level="0" />
{menuItems}
select={updateMenu}
class="grow flex-nowrap overflow-y-auto overflow-x-hidden"
level="0" />
<div class="divider my-0"></div> <div class="divider my-0"></div>
app/src/lib/components/menu/MenuList.svelte
+2 -2
View File
@@ -16,13 +16,13 @@
} }
</script> </script>
<ul class={klass + ' menu w-full'}> <ul class={klass + ' menu'}>
{#each menuItems as MenuItem[] as menuItem, i (menuItem.title)} {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
{#if menuItem.feature} {#if menuItem.feature}
<li> <li>
{#if menuItem.submenu} {#if menuItem.submenu}
<details open={menuItem.submenu.some(subItem => subItem.active)}> <details open={menuItem.submenu.some(subItem => subItem.active)}>
<summary class="font-bold"> <summary class="text-lg font-bold">
<menuItem.icon class="h-6 w-6" /> <menuItem.icon class="h-6 w-6" />
{menuItem.title} {menuItem.title}
</summary> </summary>
app/src/lib/components/statusbar/UpdateIndicator.svelte
+96 -94
View File
@@ -1,109 +1,111 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state' import { page } from '$app/state';
import { modals } from 'svelte-modals' import { modals } from 'svelte-modals';
import { notifications } from '$lib/components/toasts/notifications' import { notifications } from '$lib/components/toasts/notifications';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte' import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte' import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
import { compareVersions } from 'compare-versions' import { compareVersions } from 'compare-versions';
import { onMount } from 'svelte' import { onMount } from 'svelte';
import { api } from '$lib/api' import { api } from '$lib/api';
import type { GithubRelease } from '$lib/types/models' import type { GithubRelease } from '$lib/types/models';
import { useFeatureFlags } from '$lib/stores/featureFlags' import { useFeatureFlags } from '$lib/stores/featureFlags';
import { Cancel, CloudDown, Firmware } from '../icons' import { Cancel, CloudDown, Firmware } from '../icons';
const features = useFeatureFlags() const features = useFeatureFlags();
interface Props { interface Props {
update?: boolean 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 let { update = $bindable(false) }: Props = $props();
update = false
firmwareVersion = ''
if (compareVersions(results.tag_name, $features.firmware_version as string) === 1) { let firmwareVersion: string = $state('');
// iterate over assets and find the correct one let firmwareDownloadLink: string = $state('');
for (let i = 0; i < results.assets.length; i++) {
// check if the asset is of type *.bin async function getGithubAPI() {
if ( const headers = {
results.assets[i].name.includes('.bin') && accept: 'application/vnd.github+json',
results.assets[i].name.includes($features.firmware_built_target as string) 'X-GitHub-Api-Version': '2022-11-28'
) { };
update = true const result = await api.get<GithubRelease>(
firmwareVersion = results.tag_name `https://api.github.com/repos/${page.data.github}/releases/latest`,
firmwareDownloadLink = results.assets[i].browser_download_url { headers }
notifications.info('Firmware update available.', 5000) );
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;
} }
}
}
}
async function postGithubDownload(url: string) { const results = result.inner;
const result = await api.post('/api/downloadUpdate', { download_url: url }) update = false;
if (result.isErr()) { firmwareVersion = '';
console.error('Error:', result.inner)
return
}
}
onMount(async () => { if (compareVersions(results.tag_name, $features.firmware_version) === 1) {
if ($features.download_firmware) { // iterate over assets and find the correct one
await getGithubAPI() for (let i = 0; i < results.assets.length; i++) {
setInterval(async () => await getGithubAPI(), 60 * 60 * 1000) // once per hour // 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);
}
}
}
} }
})
function confirmGithubUpdate(url: string) { async function postGithubDownload(url: string) {
modals.open(ConfirmDialog, { const result = await api.post('/api/downloadUpdate', { download_url: url });
title: 'Confirm flashing new firmware to the device', if (result.isErr()) {
message: 'Are you sure you want to overwrite the existing firmware with a new one?', console.error('Error:', result.inner);
labels: { return;
cancel: { label: 'Abort', icon: Cancel }, }
confirm: { label: 'Update', icon: CloudDown } }
},
onConfirm: () => { onMount(async () => {
postGithubDownload(url) if ($features.download_firmware) {
modals.open(GithubUpdateDialog, { await getGithubAPI();
onConfirm: () => modals.closeAll() 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> </script>
{#if update} {#if update}
<div class="indicator flex-none"> <div class="indicator flex-none">
<button <button
class="btn btn-square btn-ghost h-9 w-9" class="btn btn-square btn-ghost h-9 w-9"
onclick={() => confirmGithubUpdate(firmwareDownloadLink)}> onclick={() => confirmGithubUpdate(firmwareDownloadLink)}
<span >
class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"> <span
{firmwareVersion} class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
</span> >
<Firmware class="h-7 w-7" /> {firmwareVersion}
</button> </span>
</div> <Firmware class="h-7 w-7" />
</button>
</div>
{/if} {/if}
app/src/lib/components/toasts/notifications.ts
+30 -30
View File
@@ -1,42 +1,42 @@
import { writable, derived, type Writable } from 'svelte/store' import { writable, derived, type Writable } from 'svelte/store';
type StateType = 'info' | 'success' | 'warning' | 'error' type StateType = 'info' | 'success' | 'warning' | 'error';
type State = { type State = {
id: string id: string;
type: StateType type: StateType;
message: string message: string;
} };
function createNotificationStore() { function createNotificationStore() {
const state: State[] = [] const state: State[] = [];
const notifications = writable(state) const notifications = writable(state);
const { subscribe } = notifications const { subscribe } = notifications;
function send(message: string, type: StateType = 'info', timeout: number) { function send(message: string, type: StateType = 'info', timeout: number) {
const id = generateId() const id = generateId();
setTimeout(() => { setTimeout(() => {
notifications.update(state => { notifications.update((state) => {
return state.filter(n => n.id !== id) return state.filter((n) => n.id !== id);
}) });
}, timeout) }, timeout);
notifications.update(state => { notifications.update((state) => {
return [...state, { id, type, message }] return [...state, { id, type, message }];
}) });
} }
return { return {
subscribe, subscribe,
send, send,
error: (msg: string, timeout: number = 4000) => send(msg, 'error', timeout), error: (msg: string, timeout: number) => send(msg, 'error', timeout),
warning: (msg: string, timeout: number = 4000) => send(msg, 'warning', timeout), warning: (msg: string, timeout: number) => send(msg, 'warning', timeout),
info: (msg: string, timeout: number = 4000) => send(msg, 'info', timeout), info: (msg: string, timeout: number) => send(msg, 'info', timeout),
success: (msg: string, timeout: number = 4000) => send(msg, 'success', timeout) success: (msg: string, timeout: number) => send(msg, 'success', timeout)
} };
} }
function generateId() { function generateId() {
return '_' + Math.random().toString(36).substr(2, 9) return '_' + Math.random().toString(36).substr(2, 9);
} }
export const notifications = createNotificationStore() export const notifications = createNotificationStore();
app/src/lib/components/widget/ChartWidget.svelte
+92 -90
View File
@@ -1,101 +1,103 @@
<script lang="ts"> <script lang="ts">
import { daisyColor } from '$lib/utilities'; import { daisyColor } from "$lib/utilities";
import { Chart, registerables } from 'chart.js'; import { Chart, registerables } from "chart.js";
import { onMount } from 'svelte'; import { onMount } from "svelte";
import { cubicOut } from 'svelte/easing'; import { cubicOut } from "svelte/easing";
import { slide } from 'svelte/transition'; import { slide } from "svelte/transition";
let chartElement: HTMLCanvasElement; let chartElement: HTMLCanvasElement = $state();
let chart: Chart; let chart: Chart;
interface Props { interface Props {
label: any; label: any;
data: number[]; data: number[];
title: any; title: any;
} }
let { label, data, title }: Props = $props(); let { label, data, title }: Props = $props();
Chart.register(...registerables); Chart.register(...registerables);
onMount(() => { onMount(() => {
chart = new Chart(chartElement, { chart = new Chart(chartElement, {
type: 'line', type: 'line',
data: { data: {
labels: data, labels: data,
datasets: [ datasets: [
{ {
label, label,
borderColor: daisyColor('--p'), borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--p', 50), backgroundColor: daisyColor('--p', 50),
borderWidth: 2, borderWidth: 2,
data, data,
yAxisID: 'y', yAxisID: 'y'
}, },
], ]
}, },
options: { options: {
maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
plugins: { plugins: {
legend: { legend: {
display: true, display: true
}, },
tooltip: { tooltip: {
mode: 'index', mode: 'index',
intersect: false, intersect: false
}, }
}, },
elements: { elements: {
point: { point: {
radius: 0, radius: 0
}, }
}, },
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--bc', 10), color: daisyColor('--bc', 10)
}, },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--bc')
}, },
display: false, display: false
}, },
y: { y: {
type: 'linear', type: 'linear',
title: { title: {
display: true, display: true,
text: title, text: title,
color: daisyColor('--bc'), color: daisyColor('--bc'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold'
}, }
}, },
position: 'left', position: 'left',
min: 0, min: 0,
max: 100, max: 100,
grid: { color: daisyColor('--bc', 10) }, grid: { color: daisyColor('--bc', 10) },
ticks: { ticks: {
color: daisyColor('--bc'), color: daisyColor('--bc')
}, },
border: { color: daisyColor('--bc', 10) }, border: { color: daisyColor('--bc', 10) }
}, }
}, }
}, }
}); });
setInterval(() => { setInterval(() => {
chart.data.labels = data; chart.data.labels = data
chart.data.datasets[0].data = data; chart.data.datasets[0].data = data
}, 500); }, 500);
}); })
</script> </script>
<div class="w-full h-full overflow-x-auto"> <div class="w-full h-full overflow-x-auto">
<div <div
class="flex w-full flex-col space-y-1 h-60" class="flex w-full flex-col space-y-1 h-60"
transition:slide|local={{ duration: 300, easing: cubicOut }}> transition:slide|local={{ duration: 300, easing: cubicOut }}
<canvas bind:this={chartElement}></canvas> >
</div> <canvas bind:this={chartElement}></canvas>
</div>
</div> </div>
app/src/lib/components/widget/Selector.svelte
+14 -13
View File
@@ -1,19 +1,20 @@
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
options?: string[]; options?: string[];
selectedOption?: string; selectedOption?: string;
change?: () => void; change: () => void;
[key: string]: any; [key: string]: any;
} }
let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props(); let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
</script> </script>
<select <select
bind:value={selectedOption} bind:value={selectedOption}
{...rest} {...rest}
class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"> class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
{#each options as option} >
<option value={option}>{option}</option> {#each options as option}
{/each} <option value={option}>{option}</option>
{/each}
</select> </select>
app/src/lib/gait.ts
+387 -360
View File
@@ -1,425 +1,452 @@
import { get } from 'svelte/store' import type { body_state_t } from './kinematic';
import type { body_state_t } from './kinematic' import { fromInt8 } from './utilities';
import { currentKinematic } from './stores/featureFlags'
const { sin } = Math;
export interface gait_state_t { export interface gait_state_t {
step_height: number step_height: number;
step_x: number step_x: number;
step_z: number step_z: number;
step_angle: number step_angle: number;
step_velocity: number step_velocity: number;
step_depth: number step_depth: number;
} }
export interface ControllerCommand { export interface ControllerCommand {
lx: number stop: number;
ly: number lx: number;
rx: number ly: number;
ry: number rx: number;
h: number ry: number;
s: number h: number;
s1: number s: number;
s1: number;
} }
export abstract class GaitState { export abstract class GaitState {
protected abstract name: string protected abstract name: string;
protected dt = 0.02 protected dt = 0.02;
protected body_state!: body_state_t protected body_state!: body_state_t;
protected gait_state: gait_state_t = { protected gait_state: gait_state_t = {
step_height: 0.4, step_height: 0.4,
step_x: 0, step_x: 0,
step_z: 0, step_z: 0,
step_angle: 0, step_angle: 0,
step_velocity: 1, step_velocity: 1,
step_depth: 0.002 step_depth: 0.002
} };
public get default_feet_pos() { public get default_feet_pos() {
return get(currentKinematic).getDefaultFeetPos() return [
} [1, -1, 1, 1],
[1, -1, -1, 1],
protected get default_height() { [-1, -1, 1, 1],
return 0.5 [-1, -1, -1, 1]
} ];
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 + 1) / 2,
step_x: command.ly,
step_z: -command.lx,
step_velocity: command.s,
step_angle: command.rx,
step_depth: 0.002
} }
this.gait_state = newCommand 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 { export class IdleState extends GaitState {
protected name = 'Idle' protected name = 'Idle';
} }
export class CalibrationState extends GaitState { export class CalibrationState extends GaitState {
protected name = 'Calibration' protected name = 'Calibration';
// eslint-disable-next-line @typescript-eslint/no-unused-vars step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
step(body_state: body_state_t, _command: ControllerCommand) { body_state.omega = 0;
body_state.omega = 0 body_state.phi = 0;
body_state.phi = 0 body_state.psi = 0;
body_state.psi = 0 body_state.xm = 0;
body_state.xm = 0 body_state.ym = this.default_height * 10;
body_state.ym = this.default_height * 10 body_state.zm = 0;
body_state.zm = 0 body_state.feet = this.default_feet_pos;
body_state.feet = this.default_feet_pos return body_state;
return body_state }
}
} }
export class RestState extends GaitState { export class RestState extends GaitState {
protected name = 'Rest' protected name = 'Rest';
// eslint-disable-next-line @typescript-eslint/no-unused-vars step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
step(body_state: body_state_t, _command: ControllerCommand) { body_state.omega = 0;
body_state.omega = 0 body_state.phi = 0;
body_state.phi = 0 body_state.psi = 0;
body_state.psi = 0 body_state.xm = 0;
body_state.xm = 0 body_state.ym = this.default_height / 2;
body_state.ym = this.default_height / 2 body_state.zm = 0;
body_state.zm = 0 body_state.feet = this.default_feet_pos;
body_state.feet = this.default_feet_pos return body_state;
return body_state }
}
} }
export class StandState extends GaitState { export class StandState extends GaitState {
protected name = 'Stand' protected name = 'Stand';
step(body_state: body_state_t, command: ControllerCommand) { step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
body_state.omega = 0 body_state.omega = 0;
body_state.phi = command.rx * 10 * (Math.PI / 2) body_state.phi = command.rx / 8;
body_state.psi = command.ry * 10 * (Math.PI / 2) body_state.psi = command.ry / 8;
body_state.xm = command.ly / 4 body_state.xm = command.ly / 2 / 100;
body_state.zm = command.lx / 4 body_state.zm = command.lx / 2 / 100;
body_state.feet = this.default_feet_pos body_state.feet = this.default_feet_pos;
return body_state return body_state;
} }
}
abstract class PhaseGaitState extends GaitState {
protected tick = 0;
protected 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 { export class BezierState extends GaitState {
protected name = 'Bezier' protected name = 'Bezier';
protected phase = 0 protected phase = 0;
protected phase_num = 0 protected phase_num = 0;
protected step_length = 0 protected step_length: number = 0;
protected stand_offset = 0.85 offset = [0, 0.5, 0.5, 0];
protected mode: 'crawl' | 'trot' = 'trot'
protected speed_factor = 1
offset = [0, 0.5, 0.75, 0.25]
protected shift_start_pos = { x: 0, z: 0 } begin() {
protected shift_target_pos = { x: 0, z: 0 } super.begin();
protected shift_start_time = 0
protected current_shift_leg = -1
constructor() {
super()
this.set_mode(this.mode)
}
begin() {
super.begin()
}
set_mode(mode: 'crawl' | 'trot', duty?: number, order?: [number, number, number, number]) {
console.log('BezierState set_mode', mode)
this.mode = mode
if (mode === 'crawl') {
this.speed_factor = 0.5
this.stand_offset = duty ?? 0.85
const o = order ?? [3, 0, 2, 1]
const base = [0, 0.25, 0.5, 0.75]
const offsets = new Array(4).fill(0)
for (let i = 0; i < 4; i++) offsets[o[i]] = base[i]
this.offset = offsets
} else {
this.speed_factor = 2
this.stand_offset = duty ?? 0.6
this.offset = order ? (order.map(v => v % 1) as number[]) : [0, 0.5, 0.5, 0]
} }
}
end() { end() {
super.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_body_position()
this.update_feet_positions()
return this.body_state
}
update_phase() {
const m = this.gait_state
if (m.step_x === 0 && m.step_z === 0 && m.step_angle === 0) {
this.phase = 0
return
} }
this.phase += this.dt * m.step_velocity * this.speed_factor
if (this.phase >= 1) {
this.phase_num = (this.phase_num + 1) % 2
this.phase = 0
}
}
update_body_position() { step(body_state: body_state_t, command: ControllerCommand, dt: number = 0.02) {
const m = this.gait_state super.step(body_state, command, dt);
const moving = m.step_x !== 0 || m.step_z !== 0 || m.step_angle !== 0 this.step_length = Math.sqrt(this.gait_state.step_x ** 2 + this.gait_state.step_z ** 2);
if (!moving) return if (this.gait_state.step_x < 0) {
this.step_length = -this.step_length;
if (this.mode !== 'crawl') return
const { stance, swing, next_swing, time_to_lift } = this.get_leg_states()
if (stance.length >= 3 && swing.length === 0 && next_swing !== -1) {
if (this.current_shift_leg !== next_swing) {
this.current_shift_leg = next_swing
this.shift_start_pos.x = this.body_state.xm
this.shift_start_pos.z = this.body_state.zm
const remaining_legs = stance.filter(leg => leg !== next_swing)
const target = this.stance_centroid(remaining_legs)
this.shift_target_pos.x = target[0]
this.shift_target_pos.z = target[2]
this.shift_start_time = time_to_lift
}
const total_time = this.shift_start_time
const progress = total_time > 0 ? 1 - time_to_lift / total_time : 1
const smooth_progress = this.smoothstep01(Math.max(0, Math.min(1, progress)))
this.body_state.xm = this.lerp(
this.shift_start_pos.x,
this.shift_target_pos.x,
smooth_progress
)
this.body_state.zm = this.lerp(
this.shift_start_pos.z,
this.shift_target_pos.z,
smooth_progress
)
}
}
protected lerp(a: number, b: number, t: number): number {
return a + (b - a) * t
}
protected stance_centroid(legs: number[]): number[] {
if (legs.length === 0) return [this.body_state.xm, 0, this.body_state.zm]
let sx = 0,
sz = 0
for (const i of legs) {
sx += this.body_state.feet[i][0]
sz += this.body_state.feet[i][2]
}
return [sx / legs.length, 0, sz / legs.length]
}
protected get_leg_states(): {
stance: number[]
swing: number[]
next_swing: number
time_to_lift: number
} {
const stance: number[] = []
const swing: number[] = []
let next_swing = -1
let min_time_to_swing = Infinity
for (let i = 0; i < 4; i++) {
let phase = this.phase + this.offset[i]
if (phase >= 1) phase -= 1
if (phase <= this.stand_offset) {
stance.push(i)
const time_to_swing = this.stand_offset - phase
if (time_to_swing < min_time_to_swing) {
min_time_to_swing = time_to_swing
next_swing = i
} }
} else { this.update_phase();
swing.push(i) this.update_feet_positions();
} return this.body_state;
} }
return { stance, swing, next_swing, time_to_lift: min_time_to_swing } 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;
}
}
protected smoothstep01(t: number): number { update_feet_positions() {
const x = Math.max(0, Math.min(1, t)) for (let i = 0; i < 4; i++) {
return x * x * (3 - 2 * x) this.body_state.feet[i] = this.update_foot_position(i);
} }
}
update_feet_positions() { update_foot_position(index: number): number[] {
for (let i = 0; i < 4; i++) this.body_state.feet[i] = this.update_foot_position(i) 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));
}
update_foot_position(index: number): number[] { stand_controller(index: number, phase: number) {
let phase = this.phase + this.offset[index] let depth = this.gait_state.step_depth;
if (phase >= 1) phase -= 1 return this.controller(index, phase, stance_curve, depth);
this.body_state.feet[index][0] = this.default_feet_pos[index][0] }
this.body_state.feet[index][1] = this.default_feet_pos[index][1]
this.body_state.feet[index][2] = this.default_feet_pos[index][2]
return phase <= this.stand_offset ?
this.stand_controller(index, phase / this.stand_offset)
: this.swing_controller(index, (phase - this.stand_offset) / (1 - this.stand_offset))
}
stand_controller(index: number, phase: number) { swing_controller(index: number, phase: number) {
const depth = this.gait_state.step_depth let height = this.gait_state.step_height;
return this.controller(index, phase, stance_curve, depth) return this.controller(index, phase, bezier_curve, height);
} }
swing_controller(index: number, phase: number) { controller(
const height = this.gait_state.step_height index: number,
return this.controller(index, phase, bezier_curve, height) 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);
controller( length = this.gait_state.step_angle * 2;
index: number, angle = yawArc(this.default_feet_pos[index], this.body_state.feet[index]);
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 const delta_rot = controller(length, angle, ...args, phase);
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;
this.body_state.feet[index][0] += delta_pos[0] + delta_rot[0] * 0.2 return this.body_state.feet[index];
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 stance_curve = (length: number, angle: number, depth: number, phase: number): number[] => {
const X_POLAR = Math.cos(angle) const X_POLAR = Math.cos(angle);
const Y_POLAR = Math.sin(angle) const Y_POLAR = Math.sin(angle);
const step = length * (1 - 2 * phase) const step = length * (1 - 2 * phase);
const X = step * X_POLAR const X = step * X_POLAR;
const Z = step * Y_POLAR const Z = step * Y_POLAR;
let Y = 0 let Y = 0;
if (length !== 0) Y = -depth * Math.cos((Math.PI * (X + Y)) / (2 * length))
return [X, Y, Z] 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 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_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 foot_dir = Math.atan2(default_foot_pos[2], default_foot_pos[0]);
const offsets = [ const offsets = [
current_foot_pos[0] - default_foot_pos[0], current_foot_pos[0] - default_foot_pos[0],
current_foot_pos[2] - default_foot_pos[2], current_foot_pos[2] - default_foot_pos[2],
current_foot_pos[1] - default_foot_pos[1] current_foot_pos[1] - default_foot_pos[1]
] ];
const offset_mag = Math.sqrt(offsets[0] ** 2 + offsets[2] ** 2) const offset_mag = Math.sqrt(offsets[0] ** 2 + offsets[2] ** 2);
const offset_mod = Math.atan2(offset_mag, foot_mag) const offset_mod = Math.atan2(offset_mag, foot_mag);
return Math.PI / 2.0 + foot_dir + offset_mod return Math.PI / 2.0 + foot_dir + offset_mod;
} };
const bezier_curve = (length: number, angle: number, height: number, phase: number): number[] => { const bezier_curve = (length: number, angle: number, height: number, phase: number): number[] => {
const control_points = get_control_points(length, angle, height) const control_points = get_control_points(length, angle, height);
const n = control_points.length - 1 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 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 get_control_points = (length: number, angle: number, height: number): number[][] => {
const X_POLAR = Math.cos(angle) const X_POLAR = Math.cos(angle);
const Z_POLAR = Math.sin(angle) const Z_POLAR = Math.sin(angle);
const STEP = [ const STEP = [
-length, -length,
-length * 1.4, -length * 1.4,
-length * 1.5, -length * 1.5,
-length * 1.5, -length * 1.5,
-length * 1.5, -length * 1.5,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
length * 1.5, length * 1.5,
length * 1.5, length * 1.5,
length * 1.4, length * 1.4,
length length
] ];
const Y = [ const Y = [
0.0, 0.0,
0.0, 0.0,
height * 0.9, height * 0.9,
height * 0.9, height * 0.9,
height * 0.9, height * 0.9,
height * 0.9, height * 0.9,
height * 0.9, height * 0.9,
height * 1.1, height * 1.1,
height * 1.1, height * 1.1,
height * 1.1, height * 1.1,
0.0, 0.0,
0.0 0.0
] ];
const control_points: number[][] = [] const control_points: number[][] = [];
for (let i = 0; i < STEP.length; i++) { for (let i = 0; i < STEP.length; i++) {
const X = STEP[i] * X_POLAR const X = STEP[i] * X_POLAR;
const Z = STEP[i] * Z_POLAR const Z = STEP[i] * Z_POLAR;
control_points.push([X, Y[i], Z]) control_points.push([X, Y[i], Z]);
} }
return control_points return control_points;
} };
const comb = (n: number, k: number): number => { const comb = (n: number, k: number): number => {
if (k < 0 || k > n) return 0 if (k < 0 || k > n) return 0;
if (k === 0 || k === n) return 1 if (k === 0 || k === n) return 1;
k = Math.min(k, n - k) k = Math.min(k, n - k);
let c = 1 let c = 1;
for (let i = 0; i < k; i++) c = (c * (n - i)) / (i + 1) for (let i = 0; i < k; i++) {
return c c = (c * (n - i)) / (i + 1);
} }
return c;
};
app/src/lib/kinematic.ts
+294 -114
View File
@@ -1,140 +1,320 @@
export interface body_state_t { export interface body_state_t {
omega: number omega: number;
phi: number phi: number;
psi: number psi: number;
xm: number xm: number;
ym: number ym: number;
zm: number zm: number;
feet: number[][] feet: number[][];
} }
export interface position { export interface position {
x: number x: number;
y: number y: number;
z: number z: number;
} }
export interface target_position { export interface target_position {
x: number x: number;
z: number z: number;
yaw: number yaw: number;
} }
export interface KinematicParams { const { cos, sin, atan2, sqrt } = Math;
coxa: number
coxa_offset: number
femur: number
tibia: number
L: number
W: number
}
const { cos, sin, atan2, acos, sqrt, max, min } = Math const DEG2RAD = 0.017453292519943;
const DEG2RAD = 0.017453292519943
export default class Kinematic { export default class Kinematic {
coxa: number l1: number;
coxa_offset: number l2: number;
femur: number l3: number;
tibia: number l4: number;
L: number L: number;
W: number W: number;
DEG2RAD = DEG2RAD DEG2RAD = DEG2RAD;
mountOffsets: number[][] sHp = sin(Math.PI / 2);
cHp = cos(Math.PI / 2);
invMountRot = [ Tlf: number[][] = [];
[0, 0, -1], Trf: number[][] = [];
[0, 1, 0], Tlb: number[][] = [];
[1, 0, 0] Trb: number[][] = [];
]
constructor(params: KinematicParams) { point_lf: number[][];
this.coxa = params.coxa point_rf: number[][];
this.coxa_offset = params.coxa_offset point_lb: number[][];
this.femur = params.femur point_rb: number[][];
this.tibia = params.tibia Ix: number[][];
this.L = params.L
this.W = params.W
this.mountOffsets = [ constructor() {
[this.L / 2, 0, this.W / 2], this.l1 = 60.5 / 100;
[this.L / 2, 0, -this.W / 2], this.l2 = 10 / 100;
[-this.L / 2, 0, this.W / 2], this.l3 = 100.7 / 100;
[-this.L / 2, 0, -this.W / 2] this.l4 = 118.5 / 100;
]
}
getDefaultFeetPos(): number[][] { this.L = 207.5 / 100;
return this.mountOffsets.map((offset, i) => { this.W = 78 / 100;
return [offset[0], -1, offset[2] + (i % 2 === 1 ? -this.coxa : this.coxa)]
})
}
calcIK(p: body_state_t): number[] { this.point_lf = [
const roll = p.omega * this.DEG2RAD [this.cHp, 0, this.sHp, this.L / 2],
const pitch = p.phi * this.DEG2RAD [0, 1, 0, 0],
const yaw = p.psi * this.DEG2RAD [-this.sHp, 0, this.cHp, this.W / 2],
const rot = this.euler2R(roll, pitch, yaw) [0, 0, 0, 1]
const inv_rot = [ ];
[rot[0][0], rot[1][0], rot[2][0]],
[rot[0][1], rot[1][1], rot[2][1]],
[rot[0][2], rot[1][2], rot[2][2]]
]
const inv_trans = [
-inv_rot[0][0] * p.xm - inv_rot[0][1] * p.ym - inv_rot[0][2] * p.zm,
-inv_rot[1][0] * p.xm - inv_rot[1][1] * p.ym - inv_rot[1][2] * p.zm,
-inv_rot[2][0] * p.xm - inv_rot[2][1] * p.ym - inv_rot[2][2] * p.zm
]
return p.feet.flatMap((foot, i) => {
const [wx, wy, wz] = foot
const bx = inv_rot[0][0] * wx + inv_rot[0][1] * wy + inv_rot[0][2] * wz + inv_trans[0]
const by = inv_rot[1][0] * wx + inv_rot[1][1] * wy + inv_rot[1][2] * wz + inv_trans[1]
const bz = inv_rot[2][0] * wx + inv_rot[2][1] * wy + inv_rot[2][2] * wz + inv_trans[2]
const [mx, my, mz] = this.mountOffsets[i] this.point_rf = [
const px = bx - mx, [this.cHp, 0, this.sHp, this.L / 2],
py = by - my, [0, 1, 0, 0],
pz = bz - mz [-this.sHp, 0, this.cHp, -this.W / 2],
[0, 0, 0, 1]
];
const lx = this.point_lb = [
this.invMountRot[0][0] * px + this.invMountRot[0][1] * py + this.invMountRot[0][2] * pz [this.cHp, 0, this.sHp, -this.L / 2],
const ly = [0, 1, 0, 0],
this.invMountRot[1][0] * px + this.invMountRot[1][1] * py + this.invMountRot[1][2] * pz [-this.sHp, 0, this.cHp, this.W / 2],
const lz = [0, 0, 0, 1]
this.invMountRot[2][0] * px + this.invMountRot[2][1] * py + this.invMountRot[2][2] * pz ];
const xLocal = i % 2 === 1 ? -lx : lx this.point_rb = [
return this.legIK(xLocal, ly, lz) [this.cHp, 0, this.sHp, -this.L / 2],
}) [0, 1, 0, 0],
} [-this.sHp, 0, this.cHp, -this.W / 2],
[0, 0, 0, 1]
];
this.Ix = [
[-1, 0, 0, 0],
[0, 1, 0, 0],
[0, 0, 1, 0],
[0, 0, 0, 1]
];
}
private legIK(x: number, y: number, z: number): [number, number, number] { public calcIK(body_state: body_state_t): number[] {
const F = sqrt(max(0, x * x + y * y - this.coxa * this.coxa)) this.bodyIK(body_state);
const G = F - this.coxa_offset
const H = sqrt(G * G + z * z)
const t1 = -atan2(y, x) - atan2(F, -this.coxa)
const D =
(H * H - this.femur * this.femur - this.tibia * this.tibia) / (2 * this.femur * this.tibia)
const t3 = acos(max(-1, min(1, D)))
const t2 = atan2(z, G) - atan2(this.tibia * sin(t3), this.femur + this.tibia * cos(t3))
return [t1, t2, t3]
}
private euler2R(roll: number, pitch: number, yaw: number): number[][] { return [
const cr = cos(roll), ...this.legIK(this.multiplyVector(this.inverse(this.Tlf), body_state.feet[0])),
sr = sin(roll) ...this.legIK(
const cp = cos(pitch), this.multiplyVector(
sp = sin(pitch) this.Ix,
const cy = cos(yaw), this.multiplyVector(this.inverse(this.Trf), body_state.feet[1])
sy = sin(yaw) )
return [ ),
[cp * cy, -cp * sy, sp], ...this.legIK(this.multiplyVector(this.inverse(this.Tlb), body_state.feet[2])),
[sr * sp * cy + sy * cr, -sr * sp * sy + cr * cy, -sr * cp], ...this.legIK(
[sr * sy - sp * cr * cy, sr * cy + sp * sy * cr, cr * cp] this.multiplyVector(
] this.Ix,
} this.multiplyVector(this.inverse(this.Trb), body_state.feet[3])
)
)
];
}
bodyIK(p: body_state_t) {
const cos_omega = cos(p.omega * this.DEG2RAD);
const sin_omega = sin(p.omega * this.DEG2RAD);
const cos_phi = cos(p.phi * this.DEG2RAD);
const sin_phi = sin(p.phi * this.DEG2RAD);
const cos_psi = cos(p.psi * this.DEG2RAD);
const sin_psi = sin(p.psi * this.DEG2RAD);
const Tm: number[][] = [
[cos_phi * cos_psi, -sin_psi * cos_phi, sin_phi, p.xm],
[
sin_omega * sin_phi * cos_psi + sin_psi * cos_omega,
-sin_omega * sin_phi * sin_psi + cos_omega * cos_psi,
-sin_omega * cos_phi,
p.ym
],
[
sin_omega * sin_psi - sin_phi * cos_omega * cos_psi,
sin_omega * cos_psi + sin_phi * sin_psi * cos_omega,
cos_omega * cos_phi,
p.zm
],
[0, 0, 0, 1]
];
this.Tlf = this.matrixMultiply(Tm, this.point_lf);
this.Trf = this.matrixMultiply(Tm, this.point_rf);
this.Tlb = this.matrixMultiply(Tm, this.point_lb);
this.Trb = this.matrixMultiply(Tm, this.point_rb);
}
public legIK(point: number[]): number[] {
const [x, y, z] = point;
let F = sqrt(x ** 2 + y ** 2 - this.l1 ** 2);
if (isNaN(F)) F = this.l1;
const G = F - this.l2;
const H = sqrt(G ** 2 + z ** 2);
const theta1 = -atan2(y, x) - atan2(F, -this.l1);
const D = (H ** 2 - this.l3 ** 2 - this.l4 ** 2) / (2 * this.l3 * this.l4);
let theta3 = atan2(sqrt(1 - D ** 2), D);
if (isNaN(theta3)) theta3 = 0;
const theta2 = atan2(z, G) - atan2(this.l4 * sin(theta3), this.l3 + this.l4 * cos(theta3));
return [theta1, theta2, theta3];
}
matrixMultiply(a: number[][], b: number[][]): number[][] {
const result: number[][] = [];
for (let i = 0; i < a.length; i++) {
const row: number[] = [];
for (let j = 0; j < b[0].length; j++) {
let sum = 0;
for (let k = 0; k < a[i].length; k++) {
sum += a[i][k] * b[k][j];
}
row.push(sum);
}
result.push(row);
}
return result;
}
multiplyVector(matrix: number[][], vector: number[]): number[] {
const rows = matrix.length;
const cols = matrix[0].length;
const vectorLength = vector.length;
if (cols !== vectorLength) {
throw new Error('Matrix and vector dimensions do not match for multiplication.');
}
const result = [];
for (let i = 0; i < rows; i++) {
let sum = 0;
for (let j = 0; j < cols; j++) {
sum += matrix[i][j] * vector[j];
}
result.push(sum);
}
return result;
}
private inverse(matrix: number[][]): number[][] {
const det = this.determinant(matrix);
const adjugate = this.adjugate(matrix);
const scalar = 1 / det;
const inverse: number[][] = [];
for (let i = 0; i < matrix.length; i++) {
const row: number[] = [];
for (let j = 0; j < matrix[i].length; j++) {
row.push(adjugate[i][j] * scalar);
}
inverse.push(row);
}
return inverse;
}
private determinant(matrix: number[][]): number {
if (matrix.length !== matrix[0].length) {
throw new Error('The matrix is not square.');
}
if (matrix.length === 2) {
return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0];
}
let det = 0;
for (let i = 0; i < matrix.length; i++) {
const sign = i % 2 === 0 ? 1 : -1;
const subMatrix: number[][] = [];
for (let j = 1; j < matrix.length; j++) {
const row: number[] = [];
for (let k = 0; k < matrix.length; k++) {
if (k !== i) {
row.push(matrix[j][k]);
}
}
subMatrix.push(row);
}
det += sign * matrix[0][i] * this.determinant(subMatrix);
}
return det;
}
private adjugate(matrix: number[][]): number[][] {
if (matrix.length !== matrix[0].length) {
throw new Error('The matrix is not square.');
}
const adjugate: number[][] = [];
for (let i = 0; i < matrix.length; i++) {
const row: number[] = [];
for (let j = 0; j < matrix[i].length; j++) {
const sign = (i + j) % 2 === 0 ? 1 : -1;
const subMatrix: number[][] = [];
for (let k = 0; k < matrix.length; k++) {
if (k !== i) {
const subRow: number[] = [];
for (let l = 0; l < matrix.length; l++) {
if (l !== j) {
subRow.push(matrix[k][l]);
}
}
subMatrix.push(subRow);
}
}
const cofactor = sign * this.determinant(subMatrix);
row.push(cofactor);
}
adjugate.push(row);
}
return this.transpose(adjugate);
}
private transpose(matrix: number[][]): number[][] {
const transposed: number[][] = [];
for (let i = 0; i < matrix.length; i++) {
const row: number[] = [];
for (let j = 0; j < matrix[i].length; j++) {
row.push(matrix[j][i]);
}
transposed.push(row);
}
return transposed;
}
} }
app/src/lib/sceneBuilder.ts
+1 -2
View File
@@ -157,11 +157,10 @@ export default class SceneBuilder {
public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => { public addOrbitControls = (minDistance: number, maxDistance: number, autoRotate = true) => {
this.orbit = new OrbitControls(this.camera, this.renderer.domElement) this.orbit = new OrbitControls(this.camera, this.renderer.domElement)
this.orbit.minDistance = minDistance + (maxDistance - minDistance) / 2 this.orbit.minDistance = 5
this.orbit.maxDistance = maxDistance this.orbit.maxDistance = maxDistance
this.orbit.autoRotate = autoRotate this.orbit.autoRotate = autoRotate
this.orbit.update() this.orbit.update()
this.orbit.minDistance = minDistance
return this return this
} }
app/src/lib/stores/featureFlags.ts
+14 -56
View File
@@ -1,62 +1,20 @@
import { api } from '$lib/api' import { api } from '$lib/api';
import { notifications } from '$lib/components/toasts/notifications' import { notifications } from '$lib/components/toasts/notifications';
import Kinematic from '$lib/kinematic' import { writable, type Writable } from 'svelte/store';
import { persistentStore } from '$lib/utilities'
import { derived, type Writable } from 'svelte/store'
import { base } from '$app/paths'
let featureFlagsStore: Writable<Record<string, boolean | string>> let featureFlagsStore: Writable<Record<string, boolean>>;
export function useFeatureFlags() { export function useFeatureFlags() {
if (!featureFlagsStore) { if (!featureFlagsStore) {
featureFlagsStore = persistentStore<Record<string, boolean | string>>('FeatureFlags', {}) featureFlagsStore = writable<Record<string, boolean>>({});
api.get<Record<string, boolean>>('/api/features').then(result => { api.get<Record<string, boolean>>('/api/features').then((result) => {
if (result.isOk()) featureFlagsStore.set(result.inner) if (result.isOk()) featureFlagsStore.set(result.inner);
else { else {
notifications.error('Feature flag could not be fetched', 2500) notifications.error('Feature flag could not be fetched', 2500);
} }
}) });
} }
return featureFlagsStore return featureFlagsStore;
} }
export const variants = {
SPOTMICRO_ESP32: {
model: `${base}/spot_micro.urdf.xacro`,
stl: `${base}/stl.zip`,
kinematics: {
coxa: 60.5 / 100,
coxa_offset: 10 / 100,
femur: 111.7 / 100,
tibia: 118.5 / 100,
L: 207.5 / 100,
W: 78 / 100
}
},
SPOTMICRO_YERTLE: {
model: `${base}/yertle.URDF`,
stl: `${base}/URDF.zip`,
kinematics: {
coxa: 35 / 100,
coxa_offset: 0 / 100,
femur: 130 / 100,
tibia: 130 / 100,
L: 240 / 100,
W: 78 / 100
}
}
}
export const currentVariant = derived(useFeatureFlags(), $flagStore => {
const variantFlag = $flagStore['variant'] as string
return variantFlag && variants[variantFlag as keyof typeof variants] ?
variants[variantFlag as keyof typeof variants]
: variants.SPOTMICRO_ESP32
})
export const currentKinematic = derived(
currentVariant,
$variant => new Kinematic($variant.kinematics)
)
app/src/lib/stores/gamepad.ts
-47
View File
@@ -1,47 +0,0 @@
import { readable, derived } from 'svelte/store'
export type GamepadState = {
available: boolean
gamepads: Gamepad[]
}
export const gamepads = readable<GamepadState>({ available: false, gamepads: [] }, set => {
const update = () => {
const hasGamepadAPI = 'getGamepads' in navigator
if (!hasGamepadAPI) {
set({ available: false, gamepads: [] })
return
}
const gps = navigator.getGamepads?.() ?? []
const validGamepads = gps.filter(Boolean) as Gamepad[]
set({
available: true,
gamepads: validGamepads
})
raf = requestAnimationFrame(update)
}
window.addEventListener('gamepadconnected', update)
window.addEventListener('gamepaddisconnected', update)
let raf = requestAnimationFrame(update)
return () => {
cancelAnimationFrame(raf)
window.removeEventListener('gamepadconnected', update)
window.removeEventListener('gamepaddisconnected', update)
}
})
export const gamepad = derived(gamepads, $gamepads =>
$gamepads.available && $gamepads.gamepads.length > 0 ? $gamepads.gamepads[0] : null
)
export const gamepadAxes = derived(gamepad, $gamepad => $gamepad?.axes ?? [0, 0, 0, 0])
export const gamepadButtons = derived(gamepad, $gamepad => $gamepad?.buttons ?? [])
export const hasGamepad = derived(
gamepads,
$gamepads => $gamepads.available && $gamepads.gamepads.length > 0
)
app/src/lib/stores/location-store.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { persistentStore } from '$lib/utilities'; import { persistentStore } from '$lib/utilities';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'; import appEnv from 'app-env';
export const location = PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', ''); export const location = appEnv.VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '');
app/src/lib/stores/model-store.ts
+32 -41
View File
@@ -1,54 +1,45 @@
import type { ControllerInput } from '$lib/types/models' import type { ControllerInput } from '$lib/types/models';
import { persistentStore } from '$lib/utilities/svelte-utilities' import { persistentStore } from '$lib/utilities/svelte-utilities';
import { writable, type Writable } from 'svelte/store' import { writable, type Writable } from 'svelte/store';
export const emulateModel = writable(true) export const emulateModel = writable(true);
export const jointNames = persistentStore('joint_names', <string[]>[]) export const jointNames = persistentStore('joint_names', <string[]>[]);
export const model = writable() export const model = writable();
export const modes = ['deactivated', 'idle', 'calibration', 'rest', 'stand', 'walk'] as const export const modes = [
'deactivated',
'idle',
'calibration',
'rest',
'stand',
'crawl',
'walk'
] as const;
export type Modes = (typeof modes)[number] export type Modes = (typeof modes)[number];
export enum ModesEnum { export enum ModesEnum {
Deactivated = 0, Deactivated,
Idle = 1, Idle,
Calibration = 2, Calibration,
Rest = 3, Rest,
Stand = 4, Stand,
Walk = 5 Crawl,
Walk
} }
export enum WalkGaits { export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated);
Trot = 0,
Crawl = 1
}
export const walkGaits = ['trot', 'crawl'] as const export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0]);
export const walkGaitLabels: Record<WalkGaits, string> = { export const kinematicData = writable([0, 0, 0, 0, 1, 0]);
[WalkGaits.Trot]: 'Trot',
[WalkGaits.Crawl]: 'Crawl'
}
export const walkGaitToMode = (gait: WalkGaits): 'trot' | 'crawl' => {
return gait === WalkGaits.Trot ? 'trot' : 'crawl'
}
export const mode: Writable<ModesEnum> = writable(ModesEnum.Deactivated)
export const walkGait: Writable<WalkGaits> = writable(WalkGaits.Trot)
export const outControllerData = writable([0, 0, 0, 0, 0, 1, 0])
export const kinematicData = writable([0, 0, 0, 0, 1, 0])
export const input: Writable<ControllerInput> = writable({ export const input: Writable<ControllerInput> = writable({
left: { x: 0, y: 0 }, left: { x: 0, y: 0 },
right: { x: 0, y: 0 }, right: { x: 0, y: 0 },
height: 0.5, height: 50,
speed: 0.5, speed: 50,
s1: 0.05 s1: 50
}) });
app/src/lib/stores/orientation.ts
+27
View File
@@ -0,0 +1,27 @@
import { readable } from 'svelte/store';
export const heading = readable(0, (set) => {
const updateHeading = (e: any) => {
let alpha;
if (e.webkitCompassHeading) alpha = e.webkitCompassHeading;
else if (e.alpha) alpha = e.alpha;
else {
let q = e.target.quaternion;
alpha =
Math.atan2(2 * q[0] * q[1] + 2 * q[2] * q[3], 1 - 2 * q[1] * q[1] - 2 * q[2] * q[2]) *
(180 / Math.PI);
if (alpha < 0) alpha += 360;
}
set(alpha);
};
if ('AbsoluteOrientationSensor' in window) {
var sensor = new window.AbsoluteOrientationSensor({ frequency: 60 }) as any;
sensor.addEventListener('reading', updateHeading);
sensor.start();
} else if (window.DeviceMotionEvent) window.addEventListener('deviceorientation', updateHeading);
return () => {
if ('AbsoluteOrientationSensor' in window) sensor.removeEventListener('reading', updateHeading);
window.addEventListener('deviceorientation', updateHeading);
};
});
app/src/lib/stores/socket.ts
+100 -138
View File
@@ -1,160 +1,122 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import { encode, decode } from '@msgpack/msgpack';
const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const; const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const;
type SocketEvent = (typeof socketEvents)[number]; type SocketEvent = (typeof socketEvents)[number];
type SocketMessage = [number, string?, unknown?];
let useBinary = false;
const decodeMessage = (data: string | ArrayBuffer): SocketMessage | null => {
useBinary = data instanceof ArrayBuffer;
try {
if (useBinary) {
return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage;
}
return JSON.parse(data as string);
} catch (error) {
console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`);
}
return null;
};
const encodeMessage = (data: unknown) => {
try {
return useBinary ? encode(data) : JSON.stringify(data);
} catch (error) {
console.error(`Could not encode data: ${data} - ${error}`);
}
};
function createWebSocket() { function createWebSocket() {
const listeners = new Map<string, Set<(data?: unknown) => void>>(); let listeners = new Map<string, Set<(data?: unknown) => void>>();
const { subscribe, set } = writable(false); const { subscribe, set } = writable(false);
const reconnectTimeoutTime = 5000; const reconnectTimeoutTime = 5000;
let unresponsiveTimeoutId: ReturnType<typeof setTimeout>; let unresponsiveTimeoutId: number;
let reconnectTimeoutId: ReturnType<typeof setTimeout>; let reconnectTimeoutId: number;
let ws: WebSocket; let ws: WebSocket;
let socketUrl: string | URL; let socketUrl: string | URL;
function init(url: string | URL) { function init(url: string | URL) {
socketUrl = url; socketUrl = url;
connect(); connect();
} }
function disconnect(reason: SocketEvent, event?: Event) { function disconnect(reason: SocketEvent, event?: Event) {
ws.close(); ws.close();
set(false); set(false);
clearTimeout(unresponsiveTimeoutId); clearTimeout(unresponsiveTimeoutId);
clearTimeout(reconnectTimeoutId); clearTimeout(reconnectTimeoutId);
listeners.get(reason)?.forEach(listener => listener(event)); listeners.get(reason)?.forEach((listener) => listener(event));
reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime); reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime);
} }
function connect() { function connect() {
ws = new WebSocket(socketUrl); ws = new WebSocket(socketUrl);
ws.binaryType = 'arraybuffer'; ws.onopen = (ev) => {
ws.onopen = ev => { set(true);
ping(); clearTimeout(reconnectTimeoutId);
useBinary = true; listeners.get('open')?.forEach((listener) => listener(ev));
ping(); for (const event of listeners.keys()) {
set(true); if (socketEvents.includes(event as SocketEvent)) continue;
clearTimeout(reconnectTimeoutId); subscribeToEvent(event);
listeners.get('open')?.forEach(listener => listener(ev)); }
for (const event of listeners.keys()) { };
if (socketEvents.includes(event as SocketEvent)) continue; ws.onmessage = (message) => {
subscribeToEvent(event); resetUnresponsiveCheck();
} let data = message.data;
}; if (data instanceof ArrayBuffer) {
ws.onmessage = frame => { listeners.get('binary')?.forEach((listener) => listener(data));
resetUnresponsiveCheck(); return;
const message = decodeMessage(frame.data); }
if (!message) return; data = data.substring(1);
const [, event, payload = undefined] = message;
if (event) listeners.get(event)?.forEach(listener => listener(payload));
};
ws.onerror = ev => disconnect('error', ev);
ws.onclose = ev => disconnect('close', ev);
}
function unsubscribe(event: string, listener?: (data: unknown) => void) { if (!data) return;
const eventListeners = listeners.get(event);
if (!eventListeners) return;
if (!eventListeners.size) { let event = data.substring(data.indexOf('/') + 1, data.indexOf('['));
unsubscribeToEvent(event); let payload = data.substring(data.indexOf('[') + 1, data.lastIndexOf(']'));
}
if (listener) {
eventListeners?.delete(listener);
} else {
listeners.delete(event);
}
}
function resetUnresponsiveCheck() { try {
clearTimeout(unresponsiveTimeoutId); payload = JSON.parse(payload);
unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime); } catch (error) {}
} if (event) listeners.get(event)?.forEach((listener) => listener(payload));
};
ws.onerror = (ev) => disconnect('error', ev);
ws.onclose = (ev) => disconnect('close', ev);
}
function sendEvent(event: string, data: unknown) { function unsubscribe(event: string, listener?: (data: any) => void) {
if (!ws || ws.readyState !== WebSocket.OPEN) return; let eventListeners = listeners.get(event);
send([2, event, data]); if (!eventListeners) return;
}
function unsubscribeToEvent(event: string) { if (!eventListeners.size) {
if (!ws || ws.readyState !== WebSocket.OPEN) return; unsubscribeToEvent(event);
send([1, event]); }
} if (listener) {
eventListeners?.delete(listener);
} else {
listeners.delete(event);
}
}
function subscribeToEvent(event: string) { function resetUnresponsiveCheck() {
if (!ws || ws.readyState !== WebSocket.OPEN) return; clearTimeout(unresponsiveTimeoutId);
send([0, event]); unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime);
} }
function send(data: unknown) { function sendEvent(event: string, data: unknown) {
if (!ws || ws.readyState !== WebSocket.OPEN) return; if (!ws || ws.readyState !== WebSocket.OPEN) return;
const serialized = encodeMessage(data); ws.send(`2/${event}[${JSON.stringify(data)}]`);
if (!serialized) { }
console.error('Could not serialize data:', data);
return;
}
ws.send(serialized);
}
function ping() { function unsubscribeToEvent(event: string) {
const serialized = encodeMessage([4]); if (!ws || ws.readyState !== WebSocket.OPEN) return;
if (!serialized) { ws.send('1/' + event);
console.error('Could not serialize message'); }
return;
}
ws.send(serialized);
}
return { function subscribeToEvent(event: string) {
subscribe, if (!ws || ws.readyState !== WebSocket.OPEN) return;
sendEvent, ws.send('0/' + event);
init, }
on: <T>(event: string, listener: (data: T) => void): (() => void) => {
let eventListeners = listeners.get(event);
if (!eventListeners) {
if (!socketEvents.includes(event as SocketEvent)) {
subscribeToEvent(event);
}
eventListeners = new Set();
listeners.set(event, eventListeners);
}
eventListeners.add(listener as (data: unknown) => void);
return () => { return {
unsubscribe(event, listener as (data: unknown) => void); subscribe,
}; sendEvent,
}, init,
off: <T>(event: string, listener?: (data: T) => void) => { on: <T>(event: string, listener: (data: T) => void): (() => void) => {
unsubscribe(event, listener as (data: unknown) => void); let eventListeners = listeners.get(event);
}, if (!eventListeners) {
}; if (!socketEvents.includes(event as SocketEvent)) {
subscribeToEvent(event);
}
eventListeners = new Set();
listeners.set(event, eventListeners);
}
eventListeners.add(listener as (data: any) => void);
return () => {
unsubscribe(event, listener);
};
},
off: (event: string, listener?: (data: any) => void) => {
unsubscribe(event, listener);
}
};
} }
export const socket = createWebSocket(); export const socket = createWebSocket();
app/src/lib/types/models.ts
+134 -195
View File
@@ -1,239 +1,178 @@
export enum MessageTopic { export type vector = { x: number; y: number };
imu = 'imu',
mode = 'mode',
input = 'input',
analytics = 'analytics',
position = 'position',
angles = 'angles',
i2cScan = 'i2cScan',
peripheralSettings = 'peripheralSettings',
otastatus = 'otastatus',
gait = 'walk_gait',
servoState = 'servoState',
servoPWM = 'servoPWM',
WiFiSettings = 'WiFiSettings',
sonar = 'sonar',
rssi = 'rssi'
}
export type vector = { x: number; y: number }
export interface ControllerInput { export interface ControllerInput {
left: vector left: vector;
right: vector right: vector;
height: number height: number;
speed: number speed: number;
s1: number s1: number;
} }
export type GithubRelease = { export type GithubRelease = {
message: string message: string;
tag_name: string tag_name: string;
assets: Array<{ assets: Array<{
name: string name: string;
browser_download_url: string browser_download_url: string;
}> }>;
} };
export type angles = number[] | Int16Array export type angles = number[] | Int16Array;
export type WifiStatus = { export type WifiStatus = {
status: number status: number;
local_ip: string local_ip: string;
mac_address: string mac_address: string;
rssi: number rssi: number;
ssid: string ssid: string;
bssid: string bssid: string;
channel: number channel: number;
subnet_mask: string subnet_mask: string;
gateway_ip: string gateway_ip: string;
dns_ip_1: string dns_ip_1: string;
dns_ip_2?: string dns_ip_2?: string;
} };
export type WifiSettings = { export type WifiSettings = {
hostname: string hostname: string;
priority_RSSI: boolean priority_RSSI: boolean;
wifi_networks: KnownNetworkItem[] wifi_networks: KnownNetworkItem[];
} };
export type NetworkList = { export type NetworkList = {
networks: NetworkItem[] networks: NetworkItem[];
} };
export type KnownNetworkItem = { export type KnownNetworkItem = {
ssid: string ssid: string;
password: string password: string;
static_ip_config: boolean static_ip_config: boolean;
local_ip?: string local_ip?: string;
subnet_mask?: string subnet_mask?: string;
gateway_ip?: string gateway_ip?: string;
dns_ip_1?: string dns_ip_1?: string;
dns_ip_2?: string dns_ip_2?: string;
} };
export type NetworkItem = { export type NetworkItem = {
rssi: number rssi: number;
ssid: string ssid: string;
bssid: string bssid: string;
channel: number channel: number;
encryption_type: number encryption_type: number;
} };
export type ApStatus = { export type ApStatus = {
status: number status: number;
ip_address: string ip_address: string;
mac_address: string mac_address: string;
station_num: number station_num: number;
} };
export type ApSettings = { export type ApSettings = {
provision_mode: number provision_mode: number;
ssid: string ssid: string;
password: string password: string;
channel: number channel: number;
ssid_hidden: boolean ssid_hidden: boolean;
max_clients: number max_clients: number;
local_ip: string local_ip: string;
gateway_ip: string gateway_ip: string;
subnet_mask: string subnet_mask: string;
} };
export type DownloadOTA = { export type DownloadOTA = {
status: string status: string;
progress: number progress: number;
error: string error: string;
} };
export type Analytics = { export type Analytics = {
max_alloc_heap: number max_alloc_heap: number;
psram_size: number psram_size: number;
free_psram: number free_psram: number;
free_heap: number free_heap: number;
total_heap: number total_heap: number;
min_free_heap: number min_free_heap: number;
core_temp: number core_temp: number;
fs_total: number fs_total: number;
fs_used: number fs_used: number;
uptime: number uptime: number;
cpu0_usage: number cpu0_usage: number;
cpu1_usage: number cpu1_usage: number;
cpu_usage: number cpu_usage: number;
} };
export type Rssi = { export type Rssi = {
rssi: number rssi: number;
ssid: string ssid: string;
} };
export type StaticSystemInformation = { export type StaticSystemInformation = {
esp_platform: string esp_platform: string;
firmware_version: string firmware_version: string;
cpu_freq_mhz: number cpu_freq_mhz: number;
cpu_type: string cpu_type: string;
cpu_rev: number cpu_rev: number;
cpu_cores: number cpu_cores: number;
sketch_size: number sketch_size: number;
free_sketch_space: number free_sketch_space: number;
sdk_version: string sdk_version: string;
arduino_version: string arduino_version: string;
flash_chip_size: number flash_chip_size: number;
flash_chip_speed: number flash_chip_speed: number;
cpu_reset_reason: string cpu_reset_reason: string;
} };
export type SystemInformation = Analytics & StaticSystemInformation export type SystemInformation = Analytics & StaticSystemInformation;
export type IMU = { export type IMU = {
x: number x: number;
y: number y: number;
z: number z: number;
heading: number heading: number;
altitude: number altitude: number;
bmp_temp: number bmp_temp: number;
pressure: number pressure: number;
} };
export interface I2CDevice { export interface I2CDevice {
address: number address: number;
part_number: string part_number: string;
name: string name: string;
}
export type PinConfig = {
pin: number
mode: string
type: string
role: string
}
export type PeripheralsConfiguration = {
sda: number
scl: number
frequency: number
pins: PinConfig[]
} }
export type CameraSettings = { export type CameraSettings = {
framesize: number framesize: number;
quality: number quality: number;
brightness: number brightness: number;
contrast: number contrast: number;
saturation: number saturation: number;
sharpness: number sharpness: number;
denoise: number denoise: number;
special_effect: number special_effect: number;
wb_mode: number wb_mode: number;
vflip: boolean vflip: boolean;
hmirror: boolean hmirror: boolean;
} };
export type File = number export type File = number;
export interface Directory { export interface Directory {
[key: string]: File | Directory [key: string]: File | Directory;
} }
export type Servo = { export type Servo = {
name: string name: string;
channel: number channel: number;
inverted: boolean inverted: boolean;
angle: number angle: number;
center_angle: number center_angle: number;
} };
export type ServoConfiguration = { export type ServoConfiguration = {
is_active: boolean is_active: boolean;
servo_pwm_frequency: number servo_pwm_frequency: number;
servo_oscillator_frequency: number servo_oscillator_frequency: number;
servos: Servo[] servos: Servo[];
} };
export interface MDNSServiceQuery {
services: MDNSServiceItem[]
}
export interface MDNSServiceItem {
ip: string
port: number
name: string
}
export interface MDNSService {
service: string
protocol: string
port: number
}
export interface MDNSTxtRecord {
key: string
value: string
}
export interface MDNSStatus {
started: boolean
hostname: string
instance: string
services: MDNSService[]
global_txt_records: MDNSTxtRecord[]
}
app/src/lib/utilities/color-utilities.ts
+2 -4
View File
@@ -1,6 +1,4 @@
export const daisyColor = (name: string, opacity: number = 100) => { export const daisyColor = (name: string, opacity: number = 100) => {
const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); const color = getComputedStyle(document.documentElement).getPropertyValue(name);
if (opacity >= 100) return color; return `oklch(${color} / ${opacity}%)`;
const alpha = Math.min(Math.max(opacity, 0), 100) / 100;
return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`;
}; };
app/src/lib/utilities/model-utilities.ts
+76 -80
View File
@@ -1,93 +1,89 @@
import { Color, LoaderUtils, Vector3 } from 'three' import { Color, LoaderUtils, Vector3 } from 'three';
import URDFLoader, { type URDFRobot } from 'urdf-loader' import URDFLoader, { type URDFRobot } from 'urdf-loader';
import { XacroLoader } from 'xacro-parser' import { XacroLoader } from 'xacro-parser';
import { Result } from '$lib/utilities' import { Result } from '$lib/utilities';
import { currentVariant, jointNames, model } from '$lib/stores' import { jointNames, model } from '$lib/stores';
import uzip from 'uzip' import uzip from 'uzip';
import { fileService } from '$lib/services' import { fileService } from '$lib/services';
import { get } from 'svelte/store'
let model_xml: XMLDocument let model_xml: XMLDocument;
export const populateModelCache = async () => { export const populateModelCache = async () => {
await cacheModelFiles() await cacheModelFiles();
const modelRes = await loadModel(get(currentVariant).model) const modelRes = await loadModelAsync('/spot_micro.urdf.xacro');
if (modelRes.isOk()) { if (modelRes.isOk()) {
const [urdf, JOINT_NAME] = modelRes.inner const [urdf, JOINT_NAME] = modelRes.inner;
jointNames.set(JOINT_NAME) jointNames.set(JOINT_NAME);
model.set(urdf) model.set(urdf);
} else { } else {
console.error(modelRes.inner, { exception: modelRes.exception }) console.error(modelRes.inner, { exception: modelRes.exception });
} }
} };
export const cacheModelFiles = async () => { export const cacheModelFiles = async () => {
const data = await fetch(get(currentVariant).stl) let data = await fetch('/stl.zip');
const files = uzip.parse(await data.arrayBuffer()) var files = uzip.parse(await data.arrayBuffer());
for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) { for (const [path, data] of Object.entries(files) as [path: string, data: Uint8Array][]) {
const url = new URL(path, window.location.href) const url = new URL(path, window.location.href);
fileService?.saveFile(url.toString(), data) fileService.saveFile(url.toString(), data);
} }
} };
export const loadModel = async (url: string): Promise<Result<[URDFRobot, string[]], string>> => { export const loadModelAsync = async (
const urdfLoader = new URDFLoader() url: string
urdfLoader.workingPath = LoaderUtils.extractUrlBase(url) ): Promise<Result<[URDFRobot, string[]], string>> => {
return new Promise((resolve, reject) => {
const xacroLoader = new XacroLoader();
const urdfLoader = new URDFLoader();
urdfLoader.workingPath = LoaderUtils.extractUrlBase(url);
let xml = url.endsWith('.xacro') ? await loadXacro(url) : await fetch(url).then(res => res.text()) xacroLoader.load(
url,
async (xml) => {
model_xml = xml;
try {
const model = urdfLoader.parse(xml);
model.rotation.x = -Math.PI / 2;
model.rotation.z = Math.PI / 2;
model.traverse((c) => (c.castShadow = true));
model.updateMatrixWorld(true);
model.scale.setScalar(10);
const joints = Object.entries(model.joints)
.filter((joint) => joint[1].jointType !== 'fixed')
.map((joint) => joint[0]);
if (typeof xml === 'string') { resolve(Result.ok([model, joints]));
xml = new window.DOMParser().parseFromString(xml, 'text/xml') } catch (error) {
} resolve(Result.err('Failed to load model', error));
}
},
(error) => resolve(Result.err('Failed to load model', error))
);
});
};
return new Promise(resolve => { export const toeWorldPositions = (robot: URDFRobot) => {
model_xml = xml const toe_positions: Vector3[] = [];
try { robot.traverse((child) => {
const model = urdfLoader.parse(xml) if (child.name.includes('toe') && !child.name.includes('_link')) {
setupRobot(model) const worldPosition = new Vector3();
const joints = Object.entries(model.joints) child.getWorldPosition(worldPosition);
.filter(joint => joint[1].jointType !== 'fixed') toe_positions.push(worldPosition);
.map(joint => joint[0]) }
});
return toe_positions;
};
resolve(Result.ok([model, joints])) export const footColor = () => {
} catch (error) { const colorElem = model_xml.querySelector('material[name=foot_color] > color') as Element;
resolve(Result.err('Failed to load model', error)) const colorAttrStr = colorElem.getAttribute('rgba') as string;
} const colorStr = colorAttrStr
}) .split(' ')
} .slice(0, 3)
.map((val) => Math.floor(+val * 255))
.join(', ');
const loadXacro = async (url: string): Promise<XMLDocument> => return new Color(`rgb(${colorStr})`);
new Promise((resolve, reject) => { };
new XacroLoader().load(url, resolve, reject)
})
function setupRobot(robot: URDFRobot) {
robot.rotation.x = -Math.PI / 2
robot.rotation.z = Math.PI / 2
robot.scale.setScalar(10)
robot.traverse(c => (c.castShadow = true))
robot.updateMatrixWorld(true)
}
export function getToeWorldPositions(robot: URDFRobot): Vector3[] {
const toes: Vector3[] = []
robot.traverse(c => {
if (c.name.includes('toe') && !c.name.includes('_link'))
toes.push(c.getWorldPosition(new Vector3()))
})
return toes
}
export const extractFootColor = () => {
const colorElem = model_xml.querySelector('material[name=foot_color] > color') as Element
const colorAttrStr = colorElem.getAttribute('rgba') as string
const colorStr = colorAttrStr
.split(' ')
.slice(0, 3)
.map(val => Math.floor(+val * 255))
.join(', ')
return new Color(`rgb(${colorStr})`)
}
app/src/lib/utilities/string-utilities.ts
+28 -39
View File
@@ -1,47 +1,36 @@
export const humanFileSize = (size: number): string => { export const humanFileSize = (size: number): string => {
const units = ['B', 'kB', 'MB', 'GB', 'TB'] const units = ['B', 'kB', 'MB', 'GB', 'TB'];
const i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024)) var i = size == 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));
return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i] return Number((size / Math.pow(1024, i)).toFixed(2)) * 1 + units[i];
} };
export const capitalize = (str: string): string => { export const capitalize = (str: string): string => {
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
} };
export const convertSeconds = (seconds: number) => { export const convertSeconds = (seconds: number) => {
// Calculate the number of seconds, minutes, hours, and days // Calculate the number of seconds, minutes, hours, and days
let minutes = Math.floor(seconds / 60) let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60) let hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24) let days = Math.floor(hours / 24);
// Calculate the remaining hours, minutes, and seconds // Calculate the remaining hours, minutes, and seconds
hours = hours % 24 hours = hours % 24;
minutes = minutes % 60 minutes = minutes % 60;
seconds = seconds % 60 seconds = seconds % 60;
// Create the formatted string // Create the formatted string
let result = '' let result = '';
if (days > 0) { if (days > 0) {
result += days + ' day' + (days > 1 ? 's' : '') + ' ' result += days + ' day' + (days > 1 ? 's' : '') + ' ';
} }
if (hours > 0) { if (hours > 0) {
result += hours + ' hour' + (hours > 1 ? 's' : '') + ' ' result += hours + ' hour' + (hours > 1 ? 's' : '') + ' ';
} }
if (minutes > 0) { if (minutes > 0) {
result += minutes + ' minute' + (minutes > 1 ? 's' : '') + ' ' result += minutes + ' minute' + (minutes > 1 ? 's' : '') + ' ';
} }
result += seconds + ' second' + (seconds > 1 ? 's' : '') result += seconds + ' second' + (seconds > 1 ? 's' : '');
return result return result;
} };
export const compareIp = (ip1: string, ip2: string) => {
const ip1Parts = ip1.split('.').map(Number)
const ip2Parts = ip2.split('.').map(Number)
for (let i = 0; i < 4; i++) {
if (ip1Parts[i] !== ip2Parts[i]) {
return ip1Parts[i] > ip2Parts[i] ? 1 : -1
}
}
return 0
}
app/src/routes/+error.svelte
+10 -3
View File
@@ -1,8 +1,15 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state' import { goto } from '$app/navigation';
import { onMount } from 'svelte';
onMount(() => {
setTimeout(() => {
goto('/');
}, 3000);
});
</script> </script>
<div class="flex justify-center items-center w-full h-full"> <div class="flex justify-center items-center w-full h-full">
<h1>{page.status} {page.error?.message}</h1> <h1 class="text-4xl">404 - Page not found</h1>
<span>Go to <a class="btn btn-primary" href="/">Home page</a></span> <p>You will be redirected to the home page in 3 seconds</p>
</div> </div>
app/src/routes/+layout.svelte
+16 -20
View File
@@ -19,12 +19,9 @@
servoAnglesOut, servoAnglesOut,
socket, socket,
location, location,
useFeatureFlags, useFeatureFlags
walkGait
} from '$lib/stores' } from '$lib/stores'
import { type Analytics, type DownloadOTA } from '$lib/types/models' import type { Analytics, DownloadOTA } from '$lib/types/models'
import { MessageTopic } from '$lib/types/models'
interface Props { interface Props {
children?: import('svelte').Snippet children?: import('svelte').Snippet
} }
@@ -39,11 +36,10 @@
addEventListeners() addEventListeners()
outControllerData.subscribe(data => socket.sendEvent(MessageTopic.input, data)) outControllerData.subscribe(data => socket.sendEvent('input', { data }))
mode.subscribe(data => socket.sendEvent(MessageTopic.mode, data)) mode.subscribe(data => socket.sendEvent('mode', { data }))
walkGait.subscribe(data => socket.sendEvent(MessageTopic.gait, data)) servoAnglesOut.subscribe(data => socket.sendEvent('angles', { data }))
servoAnglesOut.subscribe(data => socket.sendEvent(MessageTopic.angles, data)) kinematicData.subscribe(data => socket.sendEvent('position', { data }))
kinematicData.subscribe(data => socket.sendEvent(MessageTopic.position, data))
}) })
onDestroy(() => { onDestroy(() => {
@@ -54,24 +50,24 @@
socket.on('open', handleOpen) socket.on('open', handleOpen)
socket.on('close', handleClose) socket.on('close', handleClose)
socket.on('error', handleError) socket.on('error', handleError)
socket.on(MessageTopic.rssi, handleNetworkStatus) socket.on('rssi', handleNetworkStatus)
socket.on(MessageTopic.mode, (data: ModesEnum) => mode.set(data)) socket.on('mode', (data: ModesEnum) => mode.set(data))
socket.on(MessageTopic.analytics, handleAnalytics) socket.on('analytics', handleAnalytics)
socket.on(MessageTopic.angles, (angles: number[]) => { socket.on('angles', (angles: number[]) => {
if (angles.length) servoAngles.set(angles) if (angles.length) servoAngles.set(angles)
}) })
features.subscribe(data => { features.subscribe(data => {
if (data?.download_firmware) socket.on(MessageTopic.otastatus, handleOAT) if (data?.download_firmware) socket.on('otastatus', handleOAT)
if (data?.sonar) socket.on(MessageTopic.sonar, data => console.log(data)) if (data?.sonar) socket.on('sonar', data => console.log(data))
}) })
} }
const removeEventListeners = () => { const removeEventListeners = () => {
socket.off(MessageTopic.analytics, handleAnalytics) socket.off('analytics', handleAnalytics)
socket.off('open', handleOpen) socket.off('open', handleOpen)
socket.off('close', handleClose) socket.off('close', handleClose)
socket.off(MessageTopic.rssi, handleNetworkStatus) socket.off('rssi', handleNetworkStatus)
socket.off(MessageTopic.otastatus, handleOAT) socket.off('otastatus', handleOAT)
} }
const handleOpen = () => { const handleOpen = () => {
@@ -98,7 +94,7 @@
<title>{page.data.title}</title> <title>{page.data.title}</title>
</svelte:head> </svelte:head>
<div class="drawer"> <div class="drawer h-screen">
<input id="main-menu" type="checkbox" class="drawer-toggle" bind:checked={menuOpen} /> <input id="main-menu" type="checkbox" class="drawer-toggle" bind:checked={menuOpen} />
<div class="drawer-content flex flex-col"> <div class="drawer-content flex flex-col">
<!-- Status bar content here --> <!-- Status bar content here -->
app/src/routes/+layout.ts
+18 -18
View File
@@ -1,22 +1,22 @@
export const prerender = true export const prerender = false;
export const ssr = false export const ssr = false;
const registerFetchIntercept = async () => { const registerFetchIntercept = async () => {
const { fetch: originalFetch } = window const { fetch: originalFetch } = window;
const fileService = (await import('$lib/services/file-service')).default const fileService = (await import('$lib/services/file-service')).default;
window.fetch = async (resource, config) => { window.fetch = async (resource, config) => {
const url = resource instanceof Request ? resource.url : resource.toString() let url = resource instanceof Request ? resource.url : resource.toString();
const file = await fileService?.getFile(url) let file = await fileService.getFile(url);
return file?.isOk() ? new Response(file.inner) : originalFetch(resource, config) return file.isOk() ? new Response(file.inner) : originalFetch(resource, config);
} };
} };
export const load = async () => { export const load = async () => {
await registerFetchIntercept() await registerFetchIntercept();
return { return {
title: 'Spot micro controller', title: 'Spot micro controller',
github: 'runeharlyk/SpotMicroESP32-Leika', github: 'runeharlyk/SpotMicroESP32-Leika',
app_name: 'Spot Micro Controller', app_name: 'Spot Micro Controller',
copyright: '2025 Rune Harlyk' copyright: '2024 Rune Harlyk'
} };
} };
app/src/routes/+page.svelte
+10 -8
View File
@@ -13,15 +13,17 @@
}) })
</script> </script>
<div class="hero bg-base-100 h-screen"> <div class="w-full h-full flex justify-center items-center">
<div class="card md:card-side bg-base-200 shadow-2xl flex justify-center items-center"> <div class="h-full flex flex-col">
<div class="w-64 h-64"> <div class="grow-3 w-80 relative">
<Visualization sky={false} orbit panel={false} ground={false} /> <Visualization sky={false} orbit panel={false} ground={false} zoom={8} />
<div class="absolute bottom-0 w-full h-40 bg-gradient-to-t from-base-100 to-transparent">
</div>
</div> </div>
<div class="card-body w-80"> <div class="grow-3 flex justify-center">
<h2 class="card-title text-center text-2xl">Begin you journey</h2> <a class="btn btn-primary rounded-full" href={$socket ? '/controller' : '/connection'}>
<p class="py-6 text-center"></p> Add Robot Dog
<a class="btn btn-primary" href={$socket ? '/controller' : '/connection'}> Add Robot Dog </a> </a>
</div> </div>
</div> </div>
</div> </div>
app/src/routes/connection/Connection.svelte
+20 -18
View File
@@ -1,26 +1,28 @@
<script lang="ts"> <script lang="ts">
import SettingsCard from '$lib/components/SettingsCard.svelte'; import SettingsCard from '$lib/components/SettingsCard.svelte';
import { WiFi } from '$lib/components/icons'; import { WiFi } from '$lib/components/icons';
import { location, socket } from '$lib/stores'; import { location, socket, useFeatureFlags } from '$lib/stores';
const update = () => { const features = useFeatureFlags();
const ws = $location ? $location : window.location.host;
socket.init(`ws://${ws}/api/ws/events`); const update = () => {
}; const ws = $location ? $location : window.location.host;
socket.init(`ws://${ws}/api/ws/events`);
};
</script> </script>
<SettingsCard collapsible={false}> <SettingsCard collapsible={false}>
{#snippet icon()} {#snippet icon()}
<WiFi class="lex-shrink-0 mr-2 h-6 w-6 self-end" /> <WiFi class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet} {/snippet}
{#snippet title()} {#snippet title()}
<span>Connection</span> <span >Connection</span>
{/snippet} {/snippet}
<div class="flex"> <div class="flex">
<label class="label w-32" for="server">Address:</label> <label class="label w-32" for="server">Address:</label>
<input class="input" bind:value={$location} /> <input class="input" bind:value={$location} />
</div> </div>
<button class="btn btn-primary" onclick={update}>Update</button> <button class="btn btn-primary" onclick={update}>Update</button>
</SettingsCard> </SettingsCard>
app/src/routes/controller/+page.svelte
+23 -23
View File
@@ -1,31 +1,31 @@
<script lang="ts"> <script lang="ts">
import Controls from './Controls.svelte' import Controls from './Controls.svelte';
import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte' import WidgetContainer from '$lib/components/layout/WidgetContainer.svelte';
import { selectedView, views } from '$lib/stores/application' import { selectedView, views } from '$lib/stores/application';
import { onMount } from 'svelte' import { onMount } from 'svelte';
import { mpu, socket } from '$lib/stores' import { mpu, socket } from '$lib/stores';
import { imu } from '$lib/stores/imu' import { imu } from '$lib/stores/imu';
import { MessageTopic, type IMU } from '$lib/types/models' import type { IMU } from '$lib/types/models';
let layout = $derived($views.find(v => v.name === $selectedView)!) let layout = $derived($views.find(v => v.name === $selectedView)!);
onMount(() => { onMount(() => {
socket.on(MessageTopic.imu, (data: IMU) => { socket.on('imu', (data: IMU) => {
imu.addData(data) imu.addData(data);
if (data.heading) if (data.heading)
mpu.update(mpuData => { mpu.update(mpuData => {
mpuData.heading = data.heading mpuData.heading = data.heading;
console.log(data.heading) console.log(data.heading);
return mpuData return mpuData;
}) });
}) });
}) });
</script> </script>
<div class="absolute top-0 select-none w-screen h-screen"> <div class="absolute top-0 select-none w-screen h-screen">
<Controls /> <Controls />
<div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12"> <div class="absolute w-full h-screen top-0 overflow-hidden lg:pt-16 pt-12">
<WidgetContainer container={layout.content} /> <WidgetContainer container={layout.content} />
</div> </div>
</div> </div>
app/src/routes/controller/Controls.svelte
+16 -68
View File
@@ -1,47 +1,17 @@
<script lang="ts"> <script lang="ts">
import nipplejs from 'nipplejs' import nipplejs from 'nipplejs'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { capitalize, throttler } from '$lib/utilities' import { capitalize, throttler, toInt8 } from '$lib/utilities'
import { import { input, outControllerData, mode, modes, type Modes, ModesEnum } from '$lib/stores'
input,
outControllerData,
mode,
modes,
type Modes,
ModesEnum,
walkGaits,
WalkGaits,
walkGait,
walkGaitLabels
} from '$lib/stores'
import type { vector } from '$lib/types/models' import type { vector } from '$lib/types/models'
import { VerticalSlider } from '$lib/components/input' import { VerticalSlider } from '$lib/components/input'
import { gamepadAxes, hasGamepad } from '$lib/stores/gamepad'
import { notifications } from '$lib/components/toasts/notifications'
let throttle = new throttler() let throttle = new throttler()
let left: nipplejs.JoystickManager let left: nipplejs.JoystickManager
let right: nipplejs.JoystickManager let right: nipplejs.JoystickManager
let throttle_timing = 40 let throttle_timing = 40
let data = new Array(7) let data = new Array(8)
$effect(() => {
if ($hasGamepad) {
notifications.success('🎮 Gamepad connected', 3000)
}
})
$effect(() => {
handleJoyMove('left', { x: $gamepadAxes[0], y: -$gamepadAxes[1] })
handleJoyMove('right', { x: $gamepadAxes[2], y: $gamepadAxes[3] })
})
// TODO React to button press
// $effect(() => {
// if ($gamepadButtons.length === 0) return
//
// })
onMount(() => { onMount(() => {
left = nipplejs.create({ left = nipplejs.create({
@@ -75,13 +45,14 @@
} }
const updateData = () => { const updateData = () => {
data[0] = $input.left.x data[0] = 0
data[1] = $input.left.y data[1] = toInt8($input.left.x, -1, 1)
data[2] = $input.right.x data[2] = toInt8($input.left.y, -1, 1)
data[3] = $input.right.y data[3] = toInt8($input.right.x, -1, 1)
data[4] = $input.height data[4] = toInt8($input.right.y, -1, 1)
data[5] = $input.speed data[5] = toInt8($input.height, 0, 100)
data[6] = $input.s1 data[6] = toInt8($input.speed, 0, 100)
data[7] = toInt8($input.s1, 0, 100)
outControllerData.set(data) outControllerData.set(data)
} }
@@ -99,7 +70,7 @@
} }
const handleRange = (event: Event, key: 'speed' | 'height' | 's1') => { const handleRange = (event: Event, key: 'speed' | 'height' | 's1') => {
const value: number = Number((event.target as HTMLInputElement).value) const value: number = event.target?.value
input.update(inputData => { input.update(inputData => {
inputData[key] = value inputData[key] = value
@@ -111,10 +82,6 @@
const changeMode = (modeValue: Modes) => { const changeMode = (modeValue: Modes) => {
mode.set(modes.indexOf(modeValue)) mode.set(modes.indexOf(modeValue))
} }
const changeWalkGait = (walkGaitValue: WalkGaits) => {
walkGait.set(walkGaitValue)
}
</script> </script>
<div class="absolute top-0 left-0 w-screen h-screen"> <div class="absolute top-0 left-0 w-screen h-screen">
@@ -136,11 +103,7 @@
</div> </div>
<div class="absolute bottom-0 z-10 flex items-end"> <div class="absolute bottom-0 z-10 flex items-end">
<div class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl"> <div class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl">
<VerticalSlider <VerticalSlider min={0} max={100} oninput={(e: Event) => handleRange(e, 'height')} />
min={0}
max={1}
step={0.01}
oninput={(e: Event) => handleRange(e, 'height')} />
<label for="height">Ht</label> <label for="height">Ht</label>
</div> </div>
<div <div
@@ -156,20 +119,7 @@
{/each} {/each}
</div> </div>
{#if $mode === ModesEnum.Walk} {#if $mode === ModesEnum.Walk || $mode === ModesEnum.Crawl}
<div class="join">
{#each Object.values(WalkGaits) as gaitValue}
{#if typeof gaitValue === 'number'}
<button
class="btn join-item btn-sm"
class:btn-secondary={$walkGait === gaitValue}
onclick={() => changeWalkGait(gaitValue)}>
{walkGaitLabels[gaitValue]}
</button>
{/if}
{/each}
</div>
<div class="flex gap-4"> <div class="flex gap-4">
<div> <div>
<label for="s1">S1</label> <label for="s1">S1</label>
@@ -177,8 +127,7 @@
type="range" type="range"
name="s1" name="s1"
min="0" min="0"
step="0.01" max="100"
max="1"
oninput={e => handleRange(e, 's1')} oninput={e => handleRange(e, 's1')}
class="range range-sm range-primary" /> class="range range-sm range-primary" />
</div> </div>
@@ -188,8 +137,7 @@
type="range" type="range"
name="speed" name="speed"
min="0" min="0"
step="0.01" max="100"
max="1"
oninput={e => handleRange(e, 'speed')} oninput={e => handleRange(e, 'speed')}
class="range range-sm range-primary" /> class="range range-sm range-primary" />
</div> </div>
app/src/routes/peripherals/i2c/+page.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import I2C from './i2c.svelte' import I2C from './i2c.svelte';
</script> </script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8"> <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
<I2C /> <I2C />
</div> </div>
app/src/routes/peripherals/i2c/+page.ts
+5 -5
View File
@@ -1,7 +1,7 @@
import type { PageLoad } from './$types' import type { PageLoad } from './$types';
export const load = (async () => { export const load = (async () => {
return { return {
title: 'I2C' title: 'I2C'
} };
}) satisfies PageLoad }) satisfies PageLoad;
app/src/routes/peripherals/i2c/i2c.svelte
+47 -69
View File
@@ -1,79 +1,57 @@
<script lang="ts"> <script lang="ts">
import SettingsCard from '$lib/components/SettingsCard.svelte' import SettingsCard from '$lib/components/SettingsCard.svelte';
import { onMount } from 'svelte' import { onMount } from 'svelte';
import { socket } from '$lib/stores' import { socket } from '$lib/stores';
import { MessageTopic, type I2CDevice } from '$lib/types/models' import type { I2CDevice } from '$lib/types/models';
import { Connection } from '$lib/components/icons' import { Connection } from '$lib/components/icons';
import I2CSetting from './i2cSetting.svelte'
const i2cDevices = [ const i2cDevices = [
{ address: 30, part_number: 'HMC5883', name: '3-Axis Digital Compass/Magnetometer IC' }, { address: 30, part_number: 'HMC5883', name: '3-Axis Digital Compass/Magnetometer IC' },
{ address: 41, part_number: 'BNO055', name: '9-Axis Absolute Orientation Sensor' }, { address: 64, part_number: 'PCA9685', name: '16-channel PWM driver default address' },
{ address: 64, part_number: 'PCA9685', name: '16-channel PWM driver default address' }, { address: 72, part_number: 'ADS1115', name: '4-channel 16-bit ADC' },
{ address: 72, part_number: 'ADS1115', name: '4-channel 16-bit ADC' }, {
{ address: 104,
address: 104, part_number: 'MPU6050',
part_number: 'MPU6050', name: 'Six-Axis (Gyro + Accelerometer) MEMS MotionTracking™ Devices'
name: 'Six-Axis (Gyro + Accelerometer) MEMS MotionTracking™ Devices' },
}, { address: 119, part_number: 'BMP085', name: 'Temp/Barometric' }
{ address: 115, part_number: 'PAJ7620U2', name: 'Gesture sensor' }, ];
{ address: 119, part_number: 'BMP085', name: 'Temp/Barometric' }
]
let active_devices: I2CDevice[] = $state([]) let active_devices: I2CDevice[] = $state([]);
let isLoading = $state(false) onMount(() => {
socket.on('i2cScan', handleScan);
socket.sendEvent('i2cScan', '');
return () => socket.off('i2cScan', handleScan);
});
onMount(() => { const handleScan = (data: any) => {
socket.on(MessageTopic.i2cScan, handleScan) active_devices = data.addresses.map(
triggerScan() (address: number) =>
return () => socket.off(MessageTopic.i2cScan, handleScan) i2cDevices.find(device => device.address === address) || {
}) address,
part_number: 'Unknown',
const handleScan = (data: any) => { name: 'Unknown'
active_devices = data.addresses.map( }
(address: number) => );
i2cDevices.find(device => device.address === address) || { };
address,
part_number: 'Unknown',
name: 'Unknown'
}
)
isLoading = false
}
const triggerScan = () => {
isLoading = true
socket.sendEvent(MessageTopic.i2cScan, '')
}
</script> </script>
<SettingsCard collapsible={false}> <SettingsCard collapsible={false}>
{#snippet icon()} {#snippet icon()}
<Connection class="lex-shrink-0 mr-2 h-6 w-6 self-end" /> <Connection class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet} {/snippet}
{#snippet title()} {#snippet title()}
<span>I<sup>2</sup>C</span> <span >I<sup>2</sup>C</span>
{/snippet} {/snippet}
{#snippet right()}
<button class="btn btn-primary" onclick={triggerScan} disabled={isLoading}>
{#if isLoading}
<span class="loading loading-ring loading-xs"></span>
{:else}
Scan
{/if}
</button>
{/snippet}
<I2CSetting /> <div class="grid">
{#if active_devices.length === 0}
<div class="grid"> <div>No I2C devices found</div>
{#if active_devices.length === 0} {:else}
<div>No I2C devices found</div> {#each active_devices as device}
{:else} <div>[{device.address.toString(16)}] {device.part_number} - {device.name}</div>
{#each active_devices as device} {/each}
<div>[{device.address.toString(16)}] {device.part_number} - {device.name}</div> {/if}
{/each} </div>
{/if}
</div>
</SettingsCard> </SettingsCard>
app/src/routes/peripherals/i2c/i2cSetting.svelte
-99
View File
@@ -1,99 +0,0 @@
<script lang="ts">
import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
import { socket } from '$lib/stores'
import { MessageTopic, type PeripheralsConfiguration } from '$lib/types/models'
import { onMount } from 'svelte'
import { modals } from 'svelte-modals'
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
let settings: PeripheralsConfiguration | null = $state(null)
let isEditing = $state(false)
onMount(() => {
socket.on(MessageTopic.peripheralSettings, handleSettings)
socket.sendEvent(MessageTopic.peripheralSettings, '')
return () => socket.off(MessageTopic.peripheralSettings, handleSettings)
})
const handleSettings = (data: any) => {
settings = data
}
const handleSave = () => {
modals.open(ConfirmDialog, {
title: 'Confirm configuration',
message:
'Are you sure you want to save this configuration? The operation cannot be undone. Please make sure you have the correct settings.',
labels: {
cancel: { label: 'Cancel', icon: Cancel },
confirm: { label: 'Confirm', icon: Power }
},
onConfirm: () => {
modals.close()
socket.sendEvent(MessageTopic.peripheralSettings, settings)
}
})
}
const Icon = $derived(isEditing ? EditOff : Edit)
</script>
{#if settings}
<div class="collapse bg-base-100 border-base-300 border">
<input type="checkbox" />
<div class="collapse-title font-semibold">Configuration</div>
<div class="collapse-content text-sm">
<div class="flex flex-col gap-2">
<label for="sda" class="input validator">
SDA
<input
id="sda"
type="number"
required
placeholder="Type a number between 1 to 48"
min="0"
max="48"
title="SDA pin number (0-48)"
disabled={!isEditing}
bind:value={settings.sda} />
</label>
<label for="scl" class="input validator">
SCL
<input
id="scl"
type="number"
required
placeholder="Type a number between 1 to 48"
min="1"
max="48"
title="SCL pin number (0-48)"
disabled={!isEditing}
bind:value={settings.scl} />
</label>
<label class="input validator" for="frequency">
Frequency
<input
id="frequency"
type="number"
required
placeholder="Type a number between 100000 to 430000"
min="100000"
max="430000"
title="I2C frequency in Hz"
disabled={!isEditing}
bind:value={settings.frequency} />
</label>
<div>
<button class="btn btn-outline btn-primary" onclick={() => (isEditing = !isEditing)}>
<Icon class="h-6 w-6" />
</button>
{#if isEditing}
<button class="btn btn-outline btn-primary" onclick={handleSave}>Save</button>
{/if}
</div>
</div>
</div>
</div>
{/if}
app/src/routes/peripherals/imu/imu.svelte
+290 -233
View File
@@ -1,253 +1,310 @@
<script lang="ts"> <script lang="ts">
import SettingsCard from '$lib/components/SettingsCard.svelte' import SettingsCard from "$lib/components/SettingsCard.svelte";
import { imu } from '$lib/stores/imu' import { imu } from '$lib/stores/imu';
import { Chart, registerables } from 'chart.js' import { Chart, registerables } from 'chart.js';
import { cubicOut } from 'svelte/easing' import { cubicOut } from "svelte/easing";
import { slide } from 'svelte/transition' import { slide } from "svelte/transition";
import { onDestroy, onMount } from 'svelte' import { onDestroy, onMount } from "svelte";
import { socket } from '$lib/stores' import { daisyColor } from "$lib/utilities";
import { MessageTopic, type IMU } from '$lib/types/models' import { socket } from "$lib/stores";
import { useFeatureFlags } from '$lib/stores/featureFlags' import type { IMU } from "$lib/types/models";
import { Rotate3d } from '$lib/components/icons' import { useFeatureFlags } from "$lib/stores/featureFlags";
import { Rotate3d } from "$lib/components/icons";
Chart.register(...registerables) const features = useFeatureFlags();
const features = useFeatureFlags() Chart.register(...registerables);
let intervalId: ReturnType<typeof setInterval> | number
let angleChartElement: HTMLCanvasElement let angleChartElement: HTMLCanvasElement = $state();
let tempChartElement: HTMLCanvasElement let angleChart: Chart;
let altitudeChartElement: HTMLCanvasElement
let angleChart: Chart let tempChartElement: HTMLCanvasElement = $state();
let tempChart: Chart let tempChart: Chart;
let altitudeChart: Chart
const getChartColors = () => { let altitudeChartElement: HTMLCanvasElement = $state();
const style = getComputedStyle(document.body) let altitudeChart: Chart;
return {
primary: style.getPropertyValue('--color-primary'), const handleImu = (data: IMU) => {
secondary: style.getPropertyValue('--color-secondary'), console.log(data);
accent: style.getPropertyValue('--color-accent'),
background: style.getPropertyValue('--color-background') imu.addData(data);
} }
}
const createBaseChartConfig = (bgColor: string) => ({ onMount(() => {
maintainAspectRatio: false, socket.on('imu', handleImu);
responsive: true, angleChart = new Chart(angleChartElement, {
plugins: { type: 'line',
legend: { display: true }, data: {
tooltip: { mode: 'index' as const, intersect: false } datasets: [
}, {
elements: { point: { radius: 1 } }, label: 'x',
scales: { borderColor: daisyColor('--p'),
x: { backgroundColor: daisyColor('--p', 50),
grid: { color: bgColor }, borderWidth: 2,
ticks: { color: bgColor }, data: $imu.x,
display: false yAxisID: 'y'
}, },
y: { {
type: 'linear' as const, label: 'y',
position: 'left' as const, borderColor: daisyColor('--s'),
min: 0, backgroundColor: daisyColor('--s', 50),
max: 10, borderWidth: 2,
grid: { color: bgColor }, data: $imu.y,
ticks: { color: bgColor }, yAxisID: 'y'
border: { color: bgColor } },
} {
} label: 'z',
}) borderColor: daisyColor('--a'),
backgroundColor: daisyColor('--a', 50),
borderWidth: 2,
data: $imu.z,
yAxisID: 'y'
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
display: true
},
tooltip: {
mode: 'index',
intersect: false
}
},
elements: {
point: {
radius: 1
}
},
scales: {
x: {
grid: {
color: daisyColor('--bc', 10)
},
ticks: {
color: daisyColor('--bc')
},
display: false
},
y: {
type: 'linear',
title: {
display: true,
text: 'Angle [°]',
color: daisyColor('--bc'),
font: {
size: 16,
weight: 'bold'
}
},
position: 'left',
min: 0,
max: 10,
grid: { color: daisyColor('--bc', 10) },
ticks: { color: daisyColor('--bc') },
border: { color: daisyColor('--bc', 10) }
}
}
}
});
tempChart = new Chart(tempChartElement, {
type: 'line',
data: {
datasets: [
{
label: 'Barometer temperature',
borderColor: daisyColor('--s'),
backgroundColor: daisyColor('--s', 50),
borderWidth: 2,
data: $imu.bmp_temp,
yAxisID: 'y'
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
display: true
},
tooltip: {
mode: 'index',
intersect: false
}
},
elements: {
point: {
radius: 1
}
},
scales: {
x: {
grid: {
color: daisyColor('--bc', 10)
},
ticks: {
color: daisyColor('--bc')
},
display: false
},
y: {
type: 'linear',
title: {
display: true,
text: 'Temperature [C°]',
color: daisyColor('--bc'),
font: {
size: 16,
weight: 'bold'
}
},
position: 'left',
min: 0,
max: 10,
grid: { color: daisyColor('--bc', 10) },
ticks: { color: daisyColor('--bc') },
border: { color: daisyColor('--bc', 10) }
}
}
}
});
altitudeChart = new Chart(altitudeChartElement, {
type: 'line',
data: {
datasets: [
{
label: 'Altitude',
borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--p', 50),
borderWidth: 2,
data: $imu.altitude,
yAxisID: 'y'
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
display: true
},
tooltip: {
mode: 'index',
intersect: false
}
},
elements: {
point: {
radius: 1
}
},
scales: {
x: {
grid: {
color: daisyColor('--bc', 10)
},
ticks: {
color: daisyColor('--bc')
},
display: false
},
y: {
type: 'linear',
title: {
display: true,
text: 'Altitude [M]',
color: daisyColor('--bc'),
font: {
size: 16,
weight: 'bold'
}
},
position: 'left',
min: 0,
max: 10,
grid: { color: daisyColor('--bc', 10) },
ticks: { color: daisyColor('--bc') },
border: { color: daisyColor('--bc', 10) }
}
}
}
});
setInterval(() => {
updateData(), 200;
});
})
const initializeCharts = () => { onDestroy(() => {
const colors = getChartColors() socket.off('imu', handleImu);
const baseConfig = createBaseChartConfig(colors.background) })
angleChart = new Chart(angleChartElement, { const updateData = () => {
type: 'line', if ($features.imu) {
data: { angleChart.data.labels = $imu.x;
datasets: [ angleChart.data.datasets[0].data = $imu.x;
{ angleChart.data.datasets[1].data = $imu.y;
label: 'x', angleChart.data.datasets[2].data = $imu.z;
borderColor: colors.primary, angleChart.options.scales!.y!.min = Math.min(Math.min(...$imu.x), Math.min(...$imu.y), Math.min(...$imu.z)) - 1;
backgroundColor: colors.primary, angleChart.options.scales!.y!.max = Math.max(Math.max(...$imu.x), Math.max(...$imu.y), Math.max(...$imu.z)) + 1;
borderWidth: 2, angleChart.update('none');
data: $imu.x,
yAxisID: 'y'
},
{
label: 'y',
borderColor: colors.secondary,
backgroundColor: colors.secondary,
borderWidth: 2,
data: $imu.y,
yAxisID: 'y'
},
{
label: 'z',
borderColor: colors.accent,
backgroundColor: colors.accent,
borderWidth: 2,
data: $imu.z,
yAxisID: 'y'
}
]
},
options: {
...baseConfig,
scales: {
...baseConfig.scales,
y: {
...baseConfig.scales.y,
title: {
display: true,
text: 'Angle [°]',
color: colors.background,
font: { size: 16, weight: 'bold' }
}
}
} }
}
})
tempChart = new Chart(tempChartElement, { if ($features.bmp) {
type: 'line', tempChart.data.labels = $imu.bmp_temp;
data: { tempChart.data.datasets[0].data = $imu.bmp_temp;
datasets: [ tempChart.options.scales!.y!.min = Math.min(...$imu.bmp_temp) - 1;
{ tempChart.options.scales!.y!.max = Math.max(...$imu.bmp_temp) + 1;
label: 'Barometer temperature', tempChart.update('none');
borderColor: colors.secondary,
backgroundColor: colors.secondary, altitudeChart.data.labels = $imu.altitude;
borderWidth: 2, altitudeChart.data.datasets[0].data = $imu.altitude;
data: $imu.bmp_temp, altitudeChart.options.scales!.y!.min = Math.min(Math.min(...$imu.altitude)) - 1;
yAxisID: 'y' altitudeChart.options.scales!.y!.max = Math.max(Math.max(...$imu.altitude)) + 1;
} altitudeChart.update('none');
]
},
options: {
...baseConfig,
scales: {
...baseConfig.scales,
y: {
...baseConfig.scales.y,
title: {
display: true,
text: 'Temperature [C°]',
color: colors.background,
font: { size: 16, weight: 'bold' }
}
}
} }
}
})
altitudeChart = new Chart(altitudeChartElement, {
type: 'line',
data: {
datasets: [
{
label: 'Altitude',
borderColor: colors.primary,
backgroundColor: colors.primary,
borderWidth: 2,
data: $imu.altitude,
yAxisID: 'y'
}
]
},
options: {
...baseConfig,
scales: {
...baseConfig.scales,
y: {
...baseConfig.scales.y,
title: {
display: true,
text: 'Altitude [M]',
color: colors.background,
font: { size: 16, weight: 'bold' }
}
}
}
}
})
}
const updateChartData = (chart: Chart, data: number[], label: string) => {
chart.data.labels = data
chart.data.datasets[0].data = data
chart.options.scales!.y!.min = Math.min(...data) - 1
chart.options.scales!.y!.max = Math.max(...data) + 1
chart.update('none')
}
const updateData = () => {
if ($features.imu) {
angleChart.data.labels = $imu.x
angleChart.data.datasets[0].data = $imu.x
angleChart.data.datasets[1].data = $imu.y
angleChart.data.datasets[2].data = $imu.z
const allValues = [...$imu.x, ...$imu.y, ...$imu.z]
angleChart.options.scales!.y!.min = Math.min(...allValues) - 1
angleChart.options.scales!.y!.max = Math.max(...allValues) + 1
angleChart.update('none')
} }
if ($features.bmp) {
updateChartData(tempChart, $imu.bmp_temp, 'Temperature')
updateChartData(altitudeChart, $imu.altitude, 'Altitude')
}
}
onMount(() => {
socket.on(MessageTopic.imu, (data: IMU) => {
console.log(data)
imu.addData(data)
})
initializeCharts()
intervalId = setInterval(updateData, 200)
})
onDestroy(() => {
socket.off(MessageTopic.imu)
clearInterval(intervalId)
})
</script> </script>
<SettingsCard collapsible={false}> <SettingsCard collapsible={false}>
{#snippet icon()} {#snippet icon()}
<Rotate3d class="flex-shrink-0 mr-2 h-6 w-6 self-end" /> <Rotate3d class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet} {/snippet}
{#snippet title()} {#snippet title()}
<span>IMU</span> <span >IMU</span>
{/snippet} {/snippet}
{#if $features.imu}
{#if $features.imu} <div class="w-full overflow-x-auto">
<div class="w-full overflow-x-auto"> <div
<div class="flex w-full flex-col space-y-1 h-60"
class="flex w-full flex-col space-y-1 h-60" transition:slide|local={{ duration: 300, easing: cubicOut }}
transition:slide|local={{ duration: 300, easing: cubicOut }}> >
<canvas bind:this={angleChartElement}></canvas> <canvas bind:this={angleChartElement}></canvas>
</div> </div>
</div>
{/if}
{#if $features.bmp}
<div class="w-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-60"
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<canvas bind:this={tempChartElement}></canvas>
</div>
</div>
<div class="w-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-60"
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<canvas bind:this={altitudeChartElement}></canvas>
</div>
</div> </div>
{/if} {/if}
<!-- <IMUSetting /> -->
{#if $features.bmp}
<div class="w-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-60"
transition:slide|local={{ duration: 300, easing: cubicOut }}>
<canvas bind:this={tempChartElement}></canvas>
</div>
</div>
<div class="w-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-60"
transition:slide|local={{ duration: 300, easing: cubicOut }}>
<canvas bind:this={altitudeChartElement}></canvas>
</div>
</div>
{/if}
</SettingsCard> </SettingsCard>
app/src/routes/peripherals/servo/+page.svelte
+4 -7
View File
@@ -1,12 +1,9 @@
<script lang="ts"> <script lang="ts">
import Servos from './servos.svelte' import Servos from './servos.svelte';
import ServoTable from './ServoTable.svelte' import ServoTable from './ServoTable.svelte';
let servoId = $state(0)
let pwm = $state(306)
</script> </script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8"> <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
<Servos bind:servoId bind:pwm /> <Servos />
<ServoTable {servoId} {pwm} /> <ServoTable />
</div> </div>
app/src/routes/peripherals/servo/ServoTable.svelte
+66 -106
View File
@@ -1,113 +1,73 @@
<script lang="ts"> <script lang="ts">
import { api } from '$lib/api' import { api } from '$lib/api';
import { onMount } from 'svelte' import { onMount } from 'svelte';
import { RotateCw, RotateCcw } from '$lib/components/icons' interface Props {
interface Props { data?: any;
data?: any
servoId?: number
pwm?: number
}
let {
data = $bindable({
servos: []
}),
pwm = $bindable(306),
servoId = $bindable(0)
}: Props = $props()
const updateValue = (event: Event, index: number, key: string) => {
data.servos[index][key] = Number((event.target as HTMLInputElement).value)
}
const syncConfig = async () => {
await api.post('/api/servo/config', data)
}
const toggleDirection = async (index: number) => {
data.servos[index].direction = data.servos[index].direction === 1 ? -1 : 1
await syncConfig()
}
onMount(async () => {
const result = await api.get('/api/servo/config')
if (result.isOk()) {
data = result.inner
} }
})
const setCenterPWM = async () => { let { data = $bindable({
console.log('setCenterPWM', servoId, pwm) servos: []
data.servos[servoId]['center_pwm'] = pwm }) }: Props = $props();
await syncConfig()
} const updateValue = (event, index, key) => {
data.servos[index][key] = event.target.innerText;
};
const syncConfig = async () => {
await api.post('/api/servo/config', data);
};
onMount(async () => {
const result = await api.get('/api/servo/config');
if (result.isOk()) {
data = result.inner;
}
});
</script> </script>
<div>
<button class="btn btn-sm btn-primary" onclick={() => setCenterPWM()}>Set center pwm</button>
</div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table table-xs"> <table class="table table-xs">
<thead> <thead>
<tr> <tr>
<th>Servo</th> <th>Center PWM</th>
<th>Center PWM</th> <th>Center Angle</th>
<th>Center Angle</th> <th>Direction</th>
<th>Direction</th> <th>Conversion</th>
<th>Conversion</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {#each data.servos as servo, index}
{#each data.servos as servo, index} <tr>
<tr class="hover:bg-base-200"> <td
<td class="font-medium">Servo {index}</td> contenteditable="true"
<td> onblur={syncConfig}
<input oninput={event => updateValue(event, index, 'center_pwm')}
type="number" >
class="input input-sm input-bordered w-20" {servo.center_pwm}
value={servo.center_pwm} </td>
onblur={syncConfig} <td
oninput={event => updateValue(event, index, 'center_pwm')} contenteditable="true"
min="80" onblur={syncConfig}
max="600" /> oninput={event => updateValue(event, index, 'center_angle')}
</td> >
<td> {servo.center_angle}
<input </td>
type="number" <td
step="0.1" contenteditable="true"
class="input input-sm input-bordered w-20" onblur={syncConfig}
value={servo.center_angle} oninput={event => updateValue(event, index, 'direction')}
onblur={syncConfig} >
oninput={event => updateValue(event, index, 'center_angle')} {servo.direction}
min="-90" </td>
max="90" /> <td
</td> contenteditable="true"
<td> onblur={syncConfig}
<button oninput={event => updateValue(event, index, 'conversion')}
class="btn btn-sm btn-ghost" >
title="Toggle direction {servo.direction}" {servo.conversion}
onclick={() => toggleDirection(index)}> </td>
{#if servo.direction === 1} </tr>
<RotateCw class="w-4 h-4 text-green-500" /> {/each}
{:else} </tbody>
<RotateCcw class="w-4 h-4" /> </table>
{/if}
</button>
</td>
<td>
<input
type="number"
step="0.01"
class="input input-sm input-bordered w-20"
value={servo.conversion}
onblur={syncConfig}
oninput={event => updateValue(event, index, 'conversion')}
min="0"
max="10" />
</td>
</tr>
{/each}
</tbody>
</table>
</div> </div>
app/src/routes/peripherals/servo/servos.svelte
+63 -52
View File
@@ -1,64 +1,75 @@
<script lang="ts"> <script lang="ts">
import { socket } from '$lib/stores' import SettingsCard from '$lib/components/SettingsCard.svelte';
import { MessageTopic } from '$lib/types/models' import type { ServoConfiguration, Servo } from '$lib/types/models';
import { throttler as Throttler } from '$lib/utilities' import Spinner from '$lib/components/Spinner.svelte';
let { servoId = $bindable(0), pwm = $bindable(306) } = $props() import { socket } from '$lib/stores';
import { onDestroy, onMount } from 'svelte';
import { throttler as Throttler } from '$lib/utilities';
import { MotorOutline } from '$lib/components/icons';
let active = $state(false) let isLoading = false;
let allServos = $state(false) let active = $state(false);
const throttler = new Throttler() let servoId = $state(0);
const activateServo = () => { const throttler = new Throttler();
socket.sendEvent(MessageTopic.servoState, { active: 1 })
}
const deactivateServo = () => { const sweep = (event: any) => {
socket.sendEvent(MessageTopic.servoState, { active: 0 }) let channel = event.detail.channel;
} socket.sendEvent('servoConfiguration', { servos: [{ channel, sweep: true }] });
};
const updatePWM = () => { const activateServo = (event: any) => {
throttler.throttle(() => { socket.sendEvent('servoState', { active: 1 });
socket.sendEvent(MessageTopic.servoPWM, { servo_id: servoId, pwm }) };
}, 10)
}
const toggleMode = () => { const deactivateServo = (event: any) => {
servoId = allServos ? -1 : 0 socket.sendEvent('servoState', { active: 0 });
} };
let pwm = $state(306);
const updatePWM = () => {
throttler.throttle(() => {
socket.sendEvent('servoPWM', { servo_id: servoId, pwm });
}, 10);
};
</script> </script>
<div class="flex flex-col"> <SettingsCard collapsible={false}>
<h2 class="text-lg">General servo configuration</h2> {#snippet icon()}
<span>Servo</span> <MotorOutline class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
<span>{pwm}</span> {/snippet}
</div> {#snippet title()}
<input <span >Servo</span>
type="range" {/snippet}
min="80" {pwm}
max="600"
bind:value={pwm}
oninput={updatePWM}
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" />
<div class="flex flex-col">
<h2 class="text-lg">General servo configuration</h2>
<span>
<label for="mode">All servoes</label>
<input type="checkbox" class="toggle" bind:checked={allServos} onchange={toggleMode} />
</span>
<span>
<label for="active">Active</label>
<input <input
type="checkbox" type="range"
class="toggle" min="80"
bind:checked={active} max="600"
onchange={active ? activateServo : deactivateServo} /> bind:value={pwm}
</span> oninput={updatePWM}
<span class="flex items-center gap-2"> class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
<label for="servoId">Servo active {servoId}</label> />
<input type="range" min="0" max="11" step="1" bind:value={servoId} />
</span> {#if isLoading}
</div> <Spinner />
{:else}
<div class="flex flex-col">
<h2 class="text-lg">General servo configuration</h2>
<span class="flex items-center gap-2">
<label for="servoId">Servo active {servoId}</label>
<input type="range" min="0" max="11" step="1" bind:value={servoId} />
<input
type="checkbox"
class="toggle"
bind:checked={active}
onchange={active ? activateServo : deactivateServo}
/>
</span>
</div>
{/if}
</SettingsCard>
app/src/routes/system/filesystem/File.svelte
+8 -21
View File
@@ -1,24 +1,11 @@
<script lang="ts"> <script>
import { FileIcon, TrashIcon } from '$lib/components/icons' import { FileIcon } from '$lib/components/icons'
interface Props { let { name, selected } = $props()
name: string
selected: (name: string) => void
onDelete: (name: string) => void
}
let { name, selected, onDelete }: Props = $props()
</script> </script>
<div class="flex items-center pl-4 group hover:bg-gray-700 rounded py-1"> <!-- svelte-ignore a11y_interactive_supports_focus -->
<button class="flex items-center gap-2 flex-grow" onclick={() => selected(name)}> <!-- svelte-ignore a11y_click_events_have_key_events -->
<FileIcon class="w-4 h-4" /> <span role="button" class="flex pl-4 gap-2 items-center" onclick={selected}>
<span class="text-sm">{name}</span> <FileIcon />{name}
</button> </span>
<button
class="opacity-0 group-hover:opacity-100 p-1 hover:text-red-500"
onclick={() => onDelete(name)}>
<TrashIcon class="w-4 h-4" />
</button>
</div>
app/src/routes/system/filesystem/FileSystem.svelte
+52 -162
View File
@@ -1,172 +1,62 @@
<script lang="ts"> <script lang="ts">
import SettingsCard from '$lib/components/SettingsCard.svelte' import SettingsCard from "$lib/components/SettingsCard.svelte";
import Spinner from '$lib/components/Spinner.svelte' import Spinner from "$lib/components/Spinner.svelte";
import Folder from './Folder.svelte' import Folder from "./Folder.svelte";
import { api } from '$lib/api' import { api } from "$lib/api";
import type { Directory } from '$lib/types/models' import type { Directory } from "$lib/types/models";
import { FolderIcon, Add, FileIcon } from '$lib/components/icons' import { FolderIcon } from "$lib/components/icons";
import { modals } from 'svelte-modals'
import NewFolderDialog from './NewFolderDialog.svelte'
import NewFileDialog from './NewFileDialog.svelte'
let filename = $state('') let filename = $state('');
let content = $state('')
let isEditing = $state(false)
const getFiles = async () => { const getFiles = async () => {
const result = await api.get<Directory>('/api/files') const result = await api.get<Directory>('/api/files')
if (result.isOk()) { if (result.isOk()) {
return result.inner return result.inner;
}
return { root: {} }
};
const getContent = async (name: string) => {
if (!name) return '';
const result = await api.get(`/api/config/${name}`)
if (result.isOk()) {
return JSON.stringify(result.inner, null, 4);
}
return ''
} }
return { root: {} }
}
const getContent = async (name: string) => { const deleteFile = async (name: string) => {
if (!name) return '' const result = await api.post(`/api/files/delete`, { file: "/config/"+ name })
const result = await api.get(`/api/config/${name}`) if (result.isOk()) {
if (result.isOk()) { return result.inner;
content = JSON.stringify(result.inner, null, 4) }
return content return ''
} }
return ''
}
const saveContent = async () => { const updateSelected = async (event:any) => {
if (!filename) return filename = event.detail.name;
const result = await api.post('/api/files/edit', {
file: '/config/' + filename,
content
})
if (result.isOk()) {
isEditing = false
} }
}
const deleteFile = async (name: string) => {
if (!confirm(`Are you sure you want to delete ${name}?`)) return
const result = await api.post('/api/files/delete', { file: '/config/' + name })
if (result.isOk()) {
filename = ''
content = ''
}
}
const createFolder = async (folderName: string) => {
if (!folderName) return
const result = await api.post('/api/files/mkdir', {
path: '/config/' + folderName
})
if (result.isOk()) {
// Refresh the file list
await getFiles()
}
}
const updateSelected = async (name: string) => {
filename = name
isEditing = false
await getContent(name)
}
const openNewFolderDialog = () => {
modals.open(NewFolderDialog, {
onConfirm: createFolder
})
}
const createFile = async (fileName: string) => {
if (!fileName) return
const result = await api.post('/api/files/edit', {
file: '/config/' + fileName,
content: '{}' // Default empty JSON object
})
if (result.isOk()) {
// Refresh the file list and select the new file
await getFiles()
await updateSelected(fileName)
}
}
const openNewFileDialog = () => {
modals.open(NewFileDialog, {
onConfirm: createFile
})
}
</script> </script>
<SettingsCard collapsible={false}>
{#snippet icon()}
<FolderIcon class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet}
{#snippet title()}
<span >File System</span>
{/snippet}
<div class="w-full overflow-x-auto">
{#await getFiles()}
<Spinner />
{:then files}
<Folder name="/" files={files.root} expanded on:selected={updateSelected}/>
{/await}
<!-- <SettingsCard collapsible={false}> --> {#await getContent(filename)}
<!-- {#snippet icon()} --> <div>
<FolderIcon class="flex-shrink-0 mr-2 h-6 w-6 self-end" /> <Spinner />
<!-- {/snippet} </div>
{#snippet title()} --> {:then content}
<div class="flex justify-between items-center w-full gap-2"> <pre>{content}</pre>
<span>File System</span> {/await}
<div class="flex gap-2"> </div>
<button class="btn btn-sm btn-primary flex items-center gap-2" onclick={openNewFileDialog}> </SettingsCard>
<FileIcon class="w-4 h-4" />
New File
</button>
<button class="btn btn-sm btn-primary flex items-center gap-2" onclick={openNewFolderDialog}>
<Add class="w-4 h-4" />
New Folder
</button>
</div>
</div>
<!-- {/snippet} -->
<div class="flex flex-col md:flex-row gap-4 w-full">
<!-- File Tree -->
<div
class="w-full md:w-[300px] md:min-w-[300px] md:max-w-[300px] border-b md:border-b-0 md:border-r pb-4 md:pb-0 md:pr-4">
{#await getFiles()}
<Spinner />
{:then files}
<Folder
name="/"
files={files.root}
expanded
selected={updateSelected}
onDelete={deleteFile} />
{/await}
</div>
<!-- File Content -->
<div class="flex-1 min-w-0">
{#if filename}
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-2">
<h3 class="text-lg font-semibold truncate">{filename}</h3>
<div class="flex gap-2">
{#if isEditing}
<button class="btn btn-sm btn-primary" onclick={saveContent}>Save</button>
<button class="btn btn-sm btn-secondary" onclick={() => (isEditing = false)}>
Cancel
</button>
{:else}
<button class="btn btn-sm btn-primary" onclick={() => (isEditing = true)}>
Edit
</button>
<button class="btn btn-sm btn-danger" onclick={() => deleteFile(filename)}>
Delete
</button>
{/if}
</div>
</div>
{#await getContent(filename)}
<Spinner />
{:then _}
{#if isEditing}
<textarea
class="w-full h-[300px] sm:h-[500px] font-mono p-2 bg-gray-800 text-white"
bind:value={content}></textarea>
{:else}
<pre
class="bg-gray-800 p-4 rounded overflow-auto max-h-[300px] sm:max-h-[500px]">{content}</pre>
{/if}
{/await}
{:else}
<div class="text-center text-gray-500">Select a file to view its contents</div>
{/if}
</div>
</div>
<!-- </SettingsCard> -->
app/src/routes/system/filesystem/Folder.svelte
+37 -34
View File
@@ -1,44 +1,47 @@
<script lang="ts"> <script lang="ts">
import Folder from './Folder.svelte' import Folder from './Folder.svelte';
import File from './File.svelte' import File from './File.svelte';
import { FolderIcon, FolderOpenOutline } from '$lib/components/icons' import { createEventDispatcher } from 'svelte';
import { FolderIcon, FolderOpenOutline } from '$lib/components/icons';
interface Props { interface Props {
expanded?: boolean expanded?: boolean;
name: string name: any;
files: any files: any;
selected: (name: string) => void }
onDelete: (name: string) => void
}
let { expanded = $bindable(false), name, files, selected, onDelete }: Props = $props() let { expanded = $bindable(false), name, files }: Props = $props();
function toggle() { function toggle() {
expanded = !expanded expanded = !expanded;
} }
const dispatch = createEventDispatcher();
const updateSelected = async (event:any) => {
dispatch('selected', { name:event.detail.name });
}
</script> </script>
<div class="folder-item"> <button class="flex pl-2" onclick={toggle}>
<button class="flex items-center pl-2 hover:bg-gray-700 w-full rounded py-1" onclick={toggle}>
{#if expanded} {#if expanded}
<FolderOpenOutline class="w-5 h-5 mr-1" /> <FolderOpenOutline class="w-6 h-6" />
{:else} {:else}
<FolderIcon class="w-5 h-5 mr-1" /> <FolderIcon class="w-6 h-6" />
{/if} {/if}
<span class="text-sm">{name}</span> {name}
</button> </button>
{#if expanded} {#if expanded}
<ul class="ml-4 border-l border-gray-600 mt-1"> <ul class="ml-5 border-l border-slate-600">
{#each Object.entries(files) as [itemName, content]} {#each Object.entries(files) as [name, content]}
<li class="py-1"> <li class="p-1">
{#if typeof content === 'object'} {#if typeof content == 'object'}
<Folder name={itemName} files={content} {selected} {onDelete} /> <Folder {name} files={content} on:selected={updateSelected} />
{:else} {:else}
<File name={itemName} {selected} {onDelete} /> <File {name} on:selected={updateSelected}/>
{/if} {/if}
</li> </li>
{/each} {/each}
</ul> </ul>
{/if} {/if}
</div>
app/src/routes/system/filesystem/NewFileDialog.svelte
-44
View File
@@ -1,44 +0,0 @@
<script lang="ts">
import { focusTrap } from 'svelte-focus-trap'
import { fly } from 'svelte/transition'
import { exitBeforeEnter, modals, type ModalProps } from 'svelte-modals'
import { Cancel, Check } from '$lib/components/icons'
let { isOpen, onConfirm }: ModalProps = $props()
let fileName = $state('')
const handleCreate = () => {
if (!fileName) return
onConfirm(fileName)
modals.close()
}
</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">Create New File</h2>
<div class="divider my-2"></div>
<input
type="text"
class="input input-bordered w-full"
placeholder="File name"
bind:value={fileName} />
<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()}>
<Cancel class="mr-2 h-5 w-5" /><span>Cancel</span>
</button>
<button class="btn btn-primary inline-flex items-center" onclick={handleCreate}>
<Check class="mr-2 h-5 w-5" /><span>Create</span>
</button>
</div>
</div>
</div>
{/if}
app/src/routes/system/filesystem/NewFolderDialog.svelte
-44
View File
@@ -1,44 +0,0 @@
<script lang="ts">
import { focusTrap } from 'svelte-focus-trap'
import { fly } from 'svelte/transition'
import { exitBeforeEnter, modals, type ModalProps } from 'svelte-modals'
import { Cancel, Check } from '$lib/components/icons'
let { isOpen, onConfirm }: ModalProps = $props()
let folderName = $state('')
const handleCreate = () => {
if (!folderName) return
onConfirm(folderName)
modals.close()
}
</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">Create New Folder</h2>
<div class="divider my-2"></div>
<input
type="text"
class="input input-bordered w-full"
placeholder="Folder name"
bind:value={folderName} />
<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()}>
<Cancel class="mr-2 h-5 w-5" /><span>Cancel</span>
</button>
<button class="btn btn-primary inline-flex items-center" onclick={handleCreate}>
<Check class="mr-2 h-5 w-5" /><span>Create</span>
</button>
</div>
</div>
</div>
{/if}
app/src/routes/system/metrics/+page.svelte
+10 -2
View File
@@ -1,7 +1,15 @@
<script lang="ts"> <script lang="ts">
import SystemMetrics from './SystemMetrics.svelte'; import SystemMetrics from './SystemMetrics.svelte';
import { goto } from '$app/navigation';
import { useFeatureFlags } from '$lib/stores/featureFlags';
const features = useFeatureFlags();
if (!$features.analytics) {
goto('/');
}
</script> </script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8"> <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
<SystemMetrics /> <SystemMetrics />
</div> </div>
app/src/routes/system/metrics/SystemMetrics.svelte
+355 -351
View File
@@ -1,369 +1,373 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { page } from '$app/stores'; import { page } from '$app/stores';
import SettingsCard from '$lib/components/SettingsCard.svelte'; import SettingsCard from '$lib/components/SettingsCard.svelte';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { cubicOut } from 'svelte/easing'; import { cubicOut } from 'svelte/easing';
import { Chart, registerables } from 'chart.js'; import { Chart, registerables } from 'chart.js';
import { daisyColor } from '$lib/utilities'; import { daisyColor } from '$lib/utilities';
import { analytics } from '$lib/stores/analytics'; import { analytics } from '$lib/stores/analytics';
import { Metrics } from '$lib/components/icons'; import { Metrics } from '$lib/components/icons';
Chart.register(...registerables); Chart.register(...registerables);
let cpuChartElement: HTMLCanvasElement; let cpuChartElement: HTMLCanvasElement = $state();
let cpuChart: Chart; let cpuChart: Chart;
let heapChartElement: HTMLCanvasElement; let heapChartElement: HTMLCanvasElement = $state();
let heapChart: Chart; let heapChart: Chart;
let filesystemChartElement: HTMLCanvasElement; let filesystemChartElement: HTMLCanvasElement = $state();
let filesystemChart: Chart; let filesystemChart: Chart;
let temperatureChartElement: HTMLCanvasElement; let temperatureChartElement: HTMLCanvasElement = $state();
let temperatureChart: Chart; let temperatureChart: Chart;
onMount(() => { onMount(() => {
cpuChart = new Chart(cpuChartElement, { cpuChart = new Chart(cpuChartElement, {
type: 'line', type: 'line',
data: { data: {
labels: $analytics.cpu_usage, labels: $analytics.cpu_usage,
datasets: [ datasets: [
{ {
label: 'Cpu usage core 0', label: 'Cpu usage core 0',
borderColor: daisyColor('--color-primary'), borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--color-primary', 50), backgroundColor: daisyColor('--p', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.cpu0_usage, data: $analytics.cpu0_usage,
yAxisID: 'y', yAxisID: 'y'
}, },
{ {
label: 'Cpu usage core 1', label: 'Cpu usage core 1',
borderColor: daisyColor('--color-primary'), borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--color-primary', 50), backgroundColor: daisyColor('--p', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.cpu1_usage, data: $analytics.cpu1_usage,
yAxisID: 'y', yAxisID: 'y'
}, },
{ {
label: 'Cpu usage total', label: 'Cpu usage total',
borderColor: daisyColor('--color-secondary'), borderColor: daisyColor('--s'),
backgroundColor: daisyColor('--color-secondary', 50), backgroundColor: daisyColor('--s', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.cpu_usage, data: $analytics.cpu_usage,
yAxisID: 'y', yAxisID: 'y'
}, },
], ]
}, },
options: { options: {
maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
plugins: { plugins: {
legend: { legend: {
display: true, display: true
}, },
tooltip: { tooltip: {
mode: 'index', mode: 'index',
intersect: false, intersect: false
}, }
}, },
elements: { elements: {
point: { point: {
radius: 0, radius: 0
}, }
}, },
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--color-base-content', 10), color: daisyColor('--bc', 10)
}, },
ticks: { ticks: {
color: daisyColor('--color-base-content'), color: daisyColor('--bc')
}, },
display: false, display: false
}, },
y: { y: {
type: 'linear', type: 'linear',
title: { title: {
display: true, display: true,
text: 'Cpu usage [%]', text: 'Cpu usage [%]',
color: daisyColor('--color-base-content'), color: daisyColor('--bc'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold'
}, }
}, },
position: 'left', position: 'left',
min: 0, min: 0,
max: 100, max: 100,
grid: { color: daisyColor('--color-base-content', 10) }, grid: { color: daisyColor('--bc', 10) },
ticks: { ticks: {
color: daisyColor('--color-base-content'), color: daisyColor('--bc')
}, },
border: { color: daisyColor('--color-base-content', 10) }, border: { color: daisyColor('--bc', 10) }
}, }
}, }
}, }
}); });
heapChart = new Chart(heapChartElement, { heapChart = new Chart(heapChartElement, {
type: 'line', type: 'line',
data: { data: {
labels: $analytics.uptime, labels: $analytics.uptime,
datasets: [ datasets: [
{ {
label: 'Used Heap', label: 'Used Heap',
borderColor: daisyColor('--color-primary'), borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--color-primary', 50), backgroundColor: daisyColor('--p', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.used_heap, data: $analytics.used_heap,
fill: true, fill:true,
yAxisID: 'y', yAxisID: 'y'
}, }
], ]
}, },
options: { options: {
maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
plugins: { plugins: {
legend: { legend: {
display: true, display: true
}, },
tooltip: { tooltip: {
mode: 'index', mode: 'index',
intersect: false, intersect: false
}, }
}, },
elements: { elements: {
point: { point: {
radius: 0, radius: 0
}, }
}, },
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--color-base-content', 10), color: daisyColor('--bc', 10)
}, },
ticks: { ticks: {
color: daisyColor('--color-base-content'), color: daisyColor('--bc')
}, },
display: false, display: false
}, },
y: { y: {
type: 'linear', type: 'linear',
title: { title: {
display: true, display: true,
text: 'Heap [kb]', text: 'Heap [kb]',
color: daisyColor('--color-base-content'), color: daisyColor('--bc'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold'
}, }
}, },
position: 'left', position: 'left',
min: 0, min: 0,
max: Math.round($analytics.total_heap[0]), max: Math.round($analytics.total_heap[0]),
grid: { color: daisyColor('--color-base-content', 10) }, grid: { color: daisyColor('--bc', 10) },
ticks: { ticks: {
color: daisyColor('--color-base-content'), color: daisyColor('--bc')
}, },
border: { color: daisyColor('--color-base-content', 10) }, border: { color: daisyColor('--bc', 10) }
}, }
}, }
}, }
}); });
filesystemChart = new Chart(filesystemChartElement, { filesystemChart = new Chart(filesystemChartElement, {
type: 'line', type: 'line',
data: { data: {
labels: $analytics.uptime, labels: $analytics.uptime,
datasets: [ datasets: [
{ {
label: 'File System Used', label: 'File System Used',
borderColor: daisyColor('--color-primary'), borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--color-primary', 50), backgroundColor: daisyColor('--p', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.fs_used, data: $analytics.fs_used,
fill: true, fill:true,
yAxisID: 'y', yAxisID: 'y'
}, }
], ]
}, },
options: { options: {
maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
plugins: { plugins: {
legend: { legend: {
display: true, display: true
}, },
tooltip: { tooltip: {
mode: 'index', mode: 'index',
intersect: false, intersect: false
}, }
}, },
elements: { elements: {
point: { point: {
radius: 0, radius: 0
}, }
}, },
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--color-base-content', 10), color: daisyColor('--bc', 10)
}, },
ticks: { ticks: {
color: daisyColor('--color-base-content'), color: daisyColor('--bc')
}, },
display: false, display: false
}, },
y: { y: {
type: 'linear', type: 'linear',
title: { title: {
display: true, display: true,
text: 'File System [kb]', text: 'File System [kb]',
color: daisyColor('--color-base-content'), color: daisyColor('--bc'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold'
}, }
}, },
position: 'left', position: 'left',
min: 0, min: 0,
max: Math.round($analytics.fs_total[0]), max: Math.round($analytics.fs_total[0]),
grid: { color: daisyColor('--color-base-content', 10) }, grid: { color: daisyColor('--bc', 10) },
ticks: { ticks: {
color: daisyColor('--color-base-content'), color: daisyColor('--bc')
}, },
border: { color: daisyColor('--color-base-content', 10) }, border: { color: daisyColor('--bc', 10) }
}, }
}, }
}, }
}); });
temperatureChart = new Chart(temperatureChartElement, { temperatureChart = new Chart(temperatureChartElement, {
type: 'line', type: 'line',
data: { data: {
labels: $analytics.uptime, labels: $analytics.uptime,
datasets: [ datasets: [
{ {
label: 'Core Temperature', label: 'Core Temperature',
borderColor: daisyColor('--color-primary'), borderColor: daisyColor('--p'),
backgroundColor: daisyColor('--color-primary', 50), backgroundColor: daisyColor('--p', 50),
borderWidth: 2, borderWidth: 2,
data: $analytics.core_temp, data: $analytics.core_temp,
yAxisID: 'y', yAxisID: 'y'
}, }
], ]
}, },
options: { options: {
maintainAspectRatio: false, maintainAspectRatio: false,
responsive: true, responsive: true,
plugins: { plugins: {
legend: { legend: {
display: true, display: true
}, },
tooltip: { tooltip: {
mode: 'index', mode: 'index',
intersect: false, intersect: false
}, }
}, },
elements: { elements: {
point: { point: {
radius: 0, radius: 0
}, }
}, },
scales: { scales: {
x: { x: {
grid: { grid: {
color: daisyColor('--color-base-content', 10), color: daisyColor('--bc', 10)
}, },
ticks: { ticks: {
color: daisyColor('--color-base-content'), color: daisyColor('--bc')
}, },
display: false, display: false
}, },
y: { y: {
type: 'linear', type: 'linear',
title: { title: {
display: true, display: true,
text: 'Core Temperature [°C]', text: 'Core Temperature [°C]',
color: daisyColor('--color-base-content'), color: daisyColor('--bc'),
font: { font: {
size: 16, size: 16,
weight: 'bold', weight: 'bold'
}, }
}, },
position: 'left', position: 'left',
suggestedMin: 20, suggestedMin: 20,
suggestedMax: 100, suggestedMax: 100,
grid: { color: daisyColor('--color-base-content', 10) }, grid: { color: daisyColor('--bc', 10) },
ticks: { ticks: {
color: daisyColor('--color-base-content'), color: daisyColor('--bc')
}, },
border: { color: daisyColor('--color-base-content', 10) }, border: { color: daisyColor('--bc', 10) }
}, }
}, }
}, }
}); });
setInterval(updateData, 500); setInterval(updateData, 500);
}); });
function updateData() { function updateData() {
cpuChart.data.labels = $analytics.cpu_usage; cpuChart.data.labels = $analytics.cpu_usage;
cpuChart.data.datasets[0].data = $analytics.cpu0_usage; cpuChart.data.datasets[0].data = $analytics.cpu0_usage;
cpuChart.data.datasets[1].data = $analytics.cpu1_usage; cpuChart.data.datasets[1].data = $analytics.cpu1_usage;
cpuChart.data.datasets[2].data = $analytics.cpu_usage; cpuChart.data.datasets[2].data = $analytics.cpu_usage;
cpuChart.update('none'); cpuChart.update('none');
heapChart.data.labels = $analytics.uptime; heapChart.data.labels = $analytics.uptime;
heapChart.data.datasets[0].data = $analytics.used_heap; heapChart.data.datasets[0].data = $analytics.used_heap;
heapChart.options.scales!.y!.max = Math.ceil($analytics.total_heap[0]); heapChart.options.scales!.y!.max = Math.ceil($analytics.total_heap[0]);
heapChart.update('none'); heapChart.update('none');
filesystemChart.data.labels = $analytics.uptime; filesystemChart.data.labels = $analytics.uptime;
filesystemChart.data.datasets[0].data = $analytics.fs_used; filesystemChart.data.datasets[0].data = $analytics.fs_used;
heapChart.options.scales!.y!.max = Math.ceil($analytics.fs_total[0]); heapChart.options.scales!.y!.max = Math.ceil($analytics.fs_total[0]);
filesystemChart.update('none'); filesystemChart.update('none');
temperatureChart.data.labels = $analytics.uptime; temperatureChart.data.labels = $analytics.uptime;
temperatureChart.data.datasets[0].data = $analytics.core_temp; temperatureChart.data.datasets[0].data = $analytics.core_temp;
temperatureChart.update('none'); temperatureChart.update('none');
} }
</script> </script>
<SettingsCard collapsible={false}> <SettingsCard collapsible={false}>
{#snippet icon()} {#snippet icon()}
<Metrics class="lex-shrink-0 mr-2 h-6 w-6 self-end" /> <Metrics class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet} {/snippet}
{#snippet title()} {#snippet title()}
<span>System Metrics</span> <span >System Metrics</span>
{/snippet} {/snippet}
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
<div <div
class="flex w-full flex-col space-y-1 h-60" class="flex w-full flex-col space-y-1 h-60"
transition:slide|local={{ duration: 300, easing: cubicOut }}> transition:slide|local={{ duration: 300, easing: cubicOut }}
<canvas bind:this={cpuChartElement}></canvas> >
</div> <canvas bind:this={cpuChartElement}></canvas>
</div> </div>
</div>
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
<div <div
class="flex w-full flex-col space-y-1 h-60" class="flex w-full flex-col space-y-1 h-60"
transition:slide|local={{ duration: 300, easing: cubicOut }}> transition:slide|local={{ duration: 300, easing: cubicOut }}
<canvas bind:this={heapChartElement}></canvas> >
</div> <canvas bind:this={heapChartElement}></canvas>
</div> </div>
<div class="w-full overflow-x-auto"> </div>
<div <div class="w-full overflow-x-auto">
class="flex w-full flex-col space-y-1 h-52" <div
transition:slide|local={{ duration: 300, easing: cubicOut }}> class="flex w-full flex-col space-y-1 h-52"
<canvas bind:this={filesystemChartElement}></canvas> transition:slide|local={{ duration: 300, easing: cubicOut }}
</div> >
</div> <canvas bind:this={filesystemChartElement}></canvas>
<div class="w-full overflow-x-auto"> </div>
<div </div>
class="flex w-full flex-col space-y-1 h-52" <div class="w-full overflow-x-auto">
transition:slide|local={{ duration: 300, easing: cubicOut }}> <div
<canvas bind:this={temperatureChartElement}></canvas> class="flex w-full flex-col space-y-1 h-52"
</div> transition:slide|local={{ duration: 300, easing: cubicOut }}
</div> >
<canvas bind:this={temperatureChartElement}></canvas>
</div>
</div>
</SettingsCard> </SettingsCard>
app/src/routes/system/status/StatusItem.svelte
+15
View File
@@ -0,0 +1,15 @@
<script lang="ts">
const { icon, title, description } = $props()
const Icon = $derived(icon)
</script>
<div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
<div class="mask mask-hexagon bg-primary h-auto w-10 flex-none">
<Icon class="text-primary-content h-auto w-full scale-75" />
</div>
<div>
<div class="font-bold">{title}</div>
<div class="text-sm opacity-75">{description}</div>
</div>
</div>
app/src/routes/system/status/SystemStatus.svelte
+79 -85
View File
@@ -6,10 +6,12 @@
import Spinner from '$lib/components/Spinner.svelte' import Spinner from '$lib/components/Spinner.svelte'
import { slide } from 'svelte/transition' import { slide } from 'svelte/transition'
import { cubicOut } from 'svelte/easing' import { cubicOut } from 'svelte/easing'
import { type SystemInformation, type Analytics, MessageTopic } from '$lib/types/models'
import type { SystemInformation, Analytics } from '$lib/types/models'
import { socket } from '$lib/stores/socket' import { socket } from '$lib/stores/socket'
import { api } from '$lib/api' import { api } from '$lib/api'
import { convertSeconds } from '$lib/utilities' import { convertSeconds } from '$lib/utilities'
import { useFeatureFlags } from '$lib/stores/featureFlags' import { useFeatureFlags } from '$lib/stores/featureFlags'
import { import {
Cancel, Cancel,
@@ -29,12 +31,12 @@
Temperature, Temperature,
Stopwatch Stopwatch
} from '$lib/components/icons' } from '$lib/components/icons'
import StatusItem from '$lib/components/StatusItem.svelte' import StatusItem from './StatusItem.svelte'
import ActionButton from './ActionButton.svelte' import ActionButton from './ActionButton.svelte'
const features = useFeatureFlags() const features = useFeatureFlags()
let systemInformation: SystemInformation | null = $state(null) let systemInformation: SystemInformation = $state()
async function getSystemStatus() { async function getSystemStatus() {
const result = await api.get<SystemInformation>('/api/system/status') const result = await api.get<SystemInformation>('/api/system/status')
@@ -50,17 +52,12 @@
const postSleep = async () => await api.post('api/sleep') const postSleep = async () => await api.post('api/sleep')
onMount(() => socket.on(MessageTopic.analytics, handleSystemData)) onMount(() => socket.on('analytics', handleSystemData))
onDestroy(() => socket.off(MessageTopic.analytics, handleSystemData)) onDestroy(() => socket.off('analytics', handleSystemData))
const handleSystemData = (data: Analytics) => {
if (systemInformation) { const handleSystemData = (data: Analytics) =>
systemInformation = { (systemInformation = { ...systemInformation, ...data })
...systemInformation,
...(data as unknown as SystemInformation)
}
}
}
const postRestart = async () => await api.post('/api/system/restart') const postRestart = async () => await api.post('/api/system/restart')
@@ -149,92 +146,89 @@
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
{#await getSystemStatus()} {#await getSystemStatus()}
<Spinner /> <Spinner />
{:then} {:then nothing}
{#if systemInformation} <div
<div class="flex w-full flex-col space-y-1"
class="flex w-full flex-col space-y-1" transition:slide|local={{ duration: 300, easing: cubicOut }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}> <StatusItem
<StatusItem icon={CPU}
icon={CPU} title="Chip"
title="Chip" description={`${systemInformation.cpu_type} Rev ${systemInformation.cpu_rev}`} />
description={`${systemInformation.cpu_type} Rev ${systemInformation.cpu_rev}`} />
<StatusItem <StatusItem
icon={SDK} icon={SDK}
title="SDK Version" title="SDK Version"
description={`ESP-IDF ${systemInformation.sdk_version} / Arduino ${systemInformation.arduino_version}`} /> description={`ESP-IDF ${systemInformation.sdk_version} / Arduino ${systemInformation.arduino_version}`} />
<StatusItem <StatusItem
icon={CPP} icon={CPP}
title="Firmware Version" title="Firmware Version"
description={systemInformation.firmware_version} /> description={systemInformation.firmware_version} />
<StatusItem <StatusItem
icon={Speed} icon={Speed}
title="CPU Frequency" title="CPU Frequency"
description={`${systemInformation.cpu_freq_mhz} MHz ${ description={`${systemInformation.cpu_freq_mhz} MHz ${
systemInformation.cpu_cores == 2 ? 'Dual Core' : 'Single Core' systemInformation.cpu_cores == 2 ? 'Dual Core' : 'Single Core'
}`} /> }`} />
<StatusItem <StatusItem
icon={Heap} icon={Heap}
title="Heap (Free / Max Alloc)" title="Heap (Free / Max Alloc)"
description={`${systemInformation.free_heap} / ${systemInformation.max_alloc_heap} bytes`} /> description={`${systemInformation.free_heap} / ${systemInformation.max_alloc_heap} bytes`} />
<StatusItem <StatusItem
icon={Pyramid} icon={Pyramid}
title="PSRAM (Size / Free)" title="PSRAM (Size / Free)"
description={`${systemInformation.psram_size} / ${systemInformation.psram_size} bytes`} /> description={`${systemInformation.psram_size} / ${systemInformation.psram_size} bytes`} />
<StatusItem <StatusItem
icon={Sketch} icon={Sketch}
title="Sketch (Used / Free)" title="Sketch (Used / Free)"
description={`${( description={`${(
(systemInformation.sketch_size / systemInformation.free_sketch_space) * (systemInformation.sketch_size / systemInformation.free_sketch_space) *
100 100
).toFixed(1)} % of ).toFixed(1)} % of
${systemInformation.free_sketch_space / 1000000} MB used (${ ${systemInformation.free_sketch_space / 1000000} MB used (${
(systemInformation.free_sketch_space - systemInformation.sketch_size) / 1000000 (systemInformation.free_sketch_space - systemInformation.sketch_size) / 1000000
} MB free)`} /> } MB free)`} />
<StatusItem <StatusItem
icon={Flash} icon={Flash}
title="Flash Chip (Size / Speed)" title="Flash Chip (Size / Speed)"
description={`${systemInformation.flash_chip_size / 1000000} MB / ${ description={`${systemInformation.flash_chip_size / 1000000} MB / ${
systemInformation.flash_chip_speed / 1000000 systemInformation.flash_chip_speed / 1000000
} MHz`} /> } MHz`} />
<StatusItem <StatusItem
icon={Folder} icon={Folder}
title="File System (Used / Total)" title="File System (Used / Total)"
description={`${( description={`${((systemInformation.fs_used / systemInformation.fs_total) * 100).toFixed(
(systemInformation.fs_used / systemInformation.fs_total) * 1
100 )} % of ${systemInformation.fs_total / 1000000} MB used (${
).toFixed(1)} % of ${systemInformation.fs_total / 1000000} MB used (${ (systemInformation.fs_total - systemInformation.fs_used) / 1000000
(systemInformation.fs_total - systemInformation.fs_used) / 1000000 }
}
MB free)`} /> MB free)`} />
<StatusItem <StatusItem
icon={Temperature} icon={Temperature}
title="Core Temperature" title="Core Temperature"
description={`${ description={`${
systemInformation.core_temp == 53.33 ? systemInformation.core_temp == 53.33 ?
'NaN' 'NaN'
: systemInformation.core_temp.toFixed(2) + ' °C' : systemInformation.core_temp.toFixed(2) + ' °C'
}`} /> }`} />
<StatusItem <StatusItem
icon={Stopwatch} icon={Stopwatch}
title="Uptime" title="Uptime"
description={convertSeconds(systemInformation.uptime)} /> description={convertSeconds(systemInformation.uptime)} />
<StatusItem <StatusItem
icon={Power} icon={Power}
title="Reset Reason" title="Reset Reason"
description={systemInformation.cpu_reset_reason} /> description={systemInformation.cpu_reset_reason} />
</div> </div>
{/if}
{/await} {/await}
</div> </div>
@@ -242,7 +236,7 @@
{#each actionButtons as button} {#each actionButtons as button}
{#if button.condition === undefined || button.condition()} {#if button.condition === undefined || button.condition()}
<ActionButton <ActionButton
onclick={button.onClick} on:click={button.onClick}
icon={button.icon} icon={button.icon}
label={button.label} label={button.label}
type={button.type || 'primary'} /> type={button.type || 'primary'} />
app/src/routes/system/update/GithubFirmwareManager.svelte
+156 -145
View File
@@ -1,154 +1,165 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from '$app/state';
import { modals } from 'svelte-modals'; import { modals } from 'svelte-modals';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { cubicOut } from 'svelte/easing'; import { cubicOut } from 'svelte/easing';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import Spinner from '$lib/components/Spinner.svelte'; import Spinner from '$lib/components/Spinner.svelte';
import SettingsCard from '$lib/components/SettingsCard.svelte'; import SettingsCard from '$lib/components/SettingsCard.svelte';
import { compareVersions } from 'compare-versions'; import { compareVersions } from 'compare-versions';
import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte'; import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
import InfoDialog from '$lib/components/InfoDialog.svelte'; import InfoDialog from '$lib/components/InfoDialog.svelte';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { useFeatureFlags } from '$lib/stores'; import { useFeatureFlags } from '$lib/stores';
import { Error, Cancel, Check, CloudDown, Github, Prerelease } from '$lib/components/icons'; import { Error, Cancel, Check, CloudDown, Github, Prerelease } from '$lib/components/icons';
const features = useFeatureFlags(); const features = useFeatureFlags();
async function getGithubAPI() { async function getGithubAPI() {
const headers = { const headers = {
accept: 'application/vnd.github+json', accept: 'application/vnd.github+json',
'X-GitHub-Api-Version': '2022-11-28', 'X-GitHub-Api-Version': '2022-11-28'
}; };
const result = await api.get(`https://api.github.com/repos/${page.data.github}/releases`, { const result = await api.get(`https://api.github.com/repos/${page.data.github}/releases`, {
headers, headers
});
if (result.isErr()) {
console.error('Error:', result.inner);
return;
}
return result.inner as any;
}
async function postGithubDownload(url: string) {
const result = await api.post('/api/firmware/download', { download_url: url });
if (result.isErr()) {
console.error('Error:', result.inner);
return;
}
}
function confirmGithubUpdate(assets: any) {
let url = '';
// iterate over assets and find the correct one
for (let i = 0; i < assets.length; i++) {
// check if the asset is of type *.bin
if (
assets[i].name.includes('.bin') &&
assets[i].name.includes($features.firmware_built_target)
) {
url = assets[i].browser_download_url;
}
}
if (url === '') {
// if no asset was found, use the first one
modals.open(InfoDialog, {
title: 'No matching firmware found',
message:
'No matching firmware was found for the current device. Upload the firmware manually or build from sources.',
dismiss: { label: 'OK', icon: Check },
onDismiss: () => modals.close(),
});
return;
}
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(),
}); });
}, if (result.isErr()) {
}); console.error('Error:', result.inner);
} return;
}
return result.inner as any;
}
async function postGithubDownload(url: string) {
const result = await api.post('/api/firmware/download', { download_url: url });
if (result.isErr()) {
console.error('Error:', result.inner);
return;
}
}
function confirmGithubUpdate(assets: any) {
let url = '';
// iterate over assets and find the correct one
for (let i = 0; i < assets.length; i++) {
// check if the asset is of type *.bin
if (
assets[i].name.includes('.bin') &&
assets[i].name.includes($features.firmware_built_target)
) {
url = assets[i].browser_download_url;
}
}
if (url === '') {
// if no asset was found, use the first one
modals.open(InfoDialog, {
title: 'No matching firmware found',
message:
'No matching firmware was found for the current device. Upload the firmware manually or build from sources.',
dismiss: { label: 'OK', icon: Check },
onDismiss: () => modals.close()
});
return;
}
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> </script>
<SettingsCard collapsible={false}> <SettingsCard collapsible={false}>
{#snippet icon()} {#snippet icon()}
<Github class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" /> <Github class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
{/snippet} {/snippet}
{#snippet title()} {#snippet title()}
<span>Github Firmware Manager</span> <span>Github Firmware Manager</span>
{/snippet} {/snippet}
{#await getGithubAPI()} {#await getGithubAPI()}
<Spinner /> <Spinner />
{:then githubReleases} {:then githubReleases}
<div class="relative w-full overflow-visible"> <div class="relative w-full overflow-visible">
<div class="overflow-x-auto" transition:slide|local={{ duration: 300, easing: cubicOut }}> <div
<table class="table w-full table-auto"> class="overflow-x-auto"
<thead> transition:slide|local={{ duration: 300, easing: cubicOut }}
<tr class="font-bold"> >
<th align="left">Release</th> <table class="table w-full table-auto">
<th align="center" class="hidden sm:block">Release Date</th> <thead>
<th align="center">Experimental</th> <tr class="font-bold">
<th align="center">Install</th> <th align="left">Release</th>
</tr> <th align="center" class="hidden sm:block">Release Date</th>
</thead> <th align="center">Experimental</th>
<tbody> <th align="center">Install</th>
{#each githubReleases as release} </tr>
<tr </thead>
class={( <tbody>
compareVersions($features.firmware_version as string, release.tag_name) === 0 {#each githubReleases as release}
) ? <tr
'bg-primary text-primary-content' class={(
: 'bg-base-100 h-14'}> compareVersions(
<td align="left" class="text-base font-semibold"> $features.firmware_version,
<a release.tag_name
href={release.html_url} ) === 0
class="link link-hover" ) ?
target="_blank" 'bg-primary text-primary-content'
rel="noopener noreferrer">{release.name}</a : 'bg-base-100 h-14'}
></td> >
<td align="center" class="hidden min-h-full align-middle sm:block"> <td align="left" class="text-base font-semibold">
<div class="my-2"> <a
{new Intl.DateTimeFormat('en-GB', { href={release.html_url}
dateStyle: 'medium', class="link link-hover"
}).format(new Date(release.published_at))} target="_blank"
</div> rel="noopener noreferrer">{release.name}</a
</td> ></td
<td align="center"> >
{#if release.prerelease} <td align="center" class="hidden min-h-full align-middle sm:block">
<Prerelease class="text-accent h-5 w-5" /> <div class="my-2">
{/if} {new Intl.DateTimeFormat('en-GB', {
</td> dateStyle: 'medium'
<td align="center"> }).format(new Date(release.published_at))}
{#if compareVersions($features.firmware_version as string, release.tag_name) != 0} </div>
<button </td>
class="btn btn-ghost btn-circle btn-sm" <td align="center">
onclick={() => { {#if release.prerelease}
confirmGithubUpdate(release.assets); <Prerelease class="text-accent h-5 w-5" />
}}> {/if}
<CloudDown class="text-secondary h-6 w-6" /> </td>
</button> <td align="center">
{/if} {#if compareVersions($features.firmware_version, release.tag_name) != 0}
</td> <button
</tr> class="btn btn-ghost btn-circle btn-sm"
{/each} onclick={() => {
</tbody> confirmGithubUpdate(release.assets);
</table> }}
</div> >
</div> <CloudDown class="text-secondary h-6 w-6" />
{:catch error} </button>
<div class="alert alert-error shadow-lg"> {/if}
<Error class="h-6 w-6 shrink-0" /> </td>
<span>Please connect to a network with internet access to perform a firmware update.</span> </tr>
</div> {/each}
{/await} </tbody>
</table>
</div>
</div>
{:catch error}
<div class="alert alert-error shadow-lg">
<Error class="h-6 w-6 shrink-0" />
<span
>Please connect to a network with internet access to perform a firmware update.</span
>
</div>
{/await}
</SettingsCard> </SettingsCard>
app/src/routes/system/update/UploadFirmware.svelte
+47 -46
View File
@@ -1,56 +1,57 @@
<script lang="ts"> <script lang="ts">
import { modals } from 'svelte-modals'; import { modals } from 'svelte-modals';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import SettingsCard from '$lib/components/SettingsCard.svelte'; import SettingsCard from '$lib/components/SettingsCard.svelte';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { Cancel, OTA, Warning } from '$lib/components/icons'; import { Cancel, OTA, Warning } from '$lib/components/icons';
let files: FileList | undefined = $state(); let files: FileList = $state();
async function uploadBIN() { async function uploadBIN() {
const formData = new FormData(); const formData = new FormData();
formData.append('file', files![0]); formData.append('file', files[0]);
const result = await api.post('/api/firmware', formData); const result = await api.post('/api/firmware', formData);
if (result.isErr()) console.error('Error:', result.inner); if (result.isErr()) console.error('Error:', result.inner);
} }
function confirmBinUpload() { function confirmBinUpload() {
modals.open(ConfirmDialog, { modals.open(ConfirmDialog, {
title: 'Confirm Flashing the Device', title: 'Confirm Flashing the Device',
message: 'Are you sure you want to overwrite the existing firmware with a new one?', message: 'Are you sure you want to overwrite the existing firmware with a new one?',
labels: { labels: {
cancel: { label: 'Abort', icon: Cancel }, cancel: { label: 'Abort', icon: Cancel },
confirm: { label: 'Upload', icon: OTA }, confirm: { label: 'Upload', icon: OTA }
}, },
onConfirm: () => { onConfirm: () => {
modals.close(); modals.close();
uploadBIN(); uploadBIN();
}, }
}); });
} }
</script> </script>
<SettingsCard collapsible={false}> <SettingsCard collapsible={false}>
{#snippet icon()} {#snippet icon()}
<OTA class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" /> <OTA class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
{/snippet} {/snippet}
{#snippet title()} {#snippet title()}
<span>Upload Firmware</span> <span>Upload Firmware</span>
{/snippet} {/snippet}
<div class="alert alert-warning shadow-lg"> <div class="alert alert-warning shadow-lg">
<Warning class="h-6 w-6 shrink-0" /> <Warning class="h-6 w-6 shrink-0" />
<span <span
>Uploading a new firmware (.bin) file will replace the existing firmware. You may upload a >Uploading a new firmware (.bin) file will replace the existing firmware. You may upload
(.md5) file first to verify the uploaded firmware. a (.md5) file first to verify the uploaded firmware.
</span> </span>
</div> </div>
<input <input
type="file" type="file"
id="binFile" id="binFile"
class="file-input file-input-bordered file-input-secondary mt-4 w-full" class="file-input file-input-bordered file-input-secondary mt-4 w-full"
bind:files bind:files
accept=".bin,.md5" accept=".bin,.md5"
onchange={confirmBinUpload} /> onchange={confirmBinUpload}
/>
</SettingsCard> </SettingsCard>
app/src/routes/wifi/ap/Accesspoint.svelte
+409 -338
View File
@@ -1,365 +1,436 @@
<script lang="ts"> <script lang="ts">
import { preventDefault } from 'svelte/legacy'; import { preventDefault } from 'svelte/legacy';
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { cubicOut } from 'svelte/easing'; import { cubicOut } from 'svelte/easing';
import { PasswordInput } from '$lib/components/input'; import { PasswordInput } from '$lib/components/input';
import SettingsCard from '$lib/components/SettingsCard.svelte'; import SettingsCard from '$lib/components/SettingsCard.svelte';
import { notifications } from '$lib/components/toasts/notifications'; import { notifications } from '$lib/components/toasts/notifications';
import Spinner from '$lib/components/Spinner.svelte'; import Spinner from '$lib/components/Spinner.svelte';
import type { ApSettings, ApStatus } from '$lib/types/models'; import type { ApSettings, ApStatus } from '$lib/types/models';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { AP, Devices, Home, MAC } from '$lib/components/icons'; import { useFeatureFlags } from '$lib/stores';
import StatusItem from '$lib/components/StatusItem.svelte'; import { AP, Devices, Home, MAC } from '$lib/components/icons';
let apSettings: ApSettings | null = $state(null); const features = useFeatureFlags();
let apStatus: ApStatus | null = $state(null);
let formField: any = $state(); let apSettings: ApSettings = $state();
let apStatus: ApStatus = $state();
async function getAPStatus() { let formField: any = $state();
const result = await api.get<ApStatus>('/api/wifi/ap/status');
if (result.isErr()) {
console.error('Error:', result.inner);
return;
}
apStatus = result.inner;
return apStatus;
}
async function getAPSettings() { async function getAPStatus() {
const result = await api.get<ApSettings>('/api/wifi/ap/settings'); const result = await api.get<ApStatus>('/api/wifi/ap/status');
if (result.isErr()) { if (result.isErr()) {
console.error('Error:', result.inner); console.error('Error:', result.inner);
return; return;
} }
apSettings = result.inner; apStatus = result.inner;
return apSettings; return apStatus;
}
const interval = setInterval(async () => {
getAPStatus();
}, 5000);
onDestroy(() => clearInterval(interval));
onMount(getAPSettings);
let provisionMode = [
{
id: 0,
text: `Always`,
},
{
id: 1,
text: `When WiFi Disconnected`,
},
{
id: 2,
text: `Never`,
},
];
type Variant = 'success' | 'error' | 'primary' | 'info' | 'warning';
let apStatusVariant: Variant[] = ['success', 'error', 'warning'];
let apStatusDescription = ['Active', 'Inactive', 'Lingering'];
let formErrors = $state({
ssid: false,
channel: false,
max_clients: false,
local_ip: false,
gateway_ip: false,
subnet_mask: false,
});
async function postAPSettings(data: ApSettings) {
const result = await api.post<ApSettings>('/api/wifi/ap/settings', data);
if (result.isErr()) {
notifications.error('User not authorized.', 3000);
console.error('Error:', result.inner);
return;
}
notifications.success('Access Point settings updated.', 3000);
apSettings = result.inner;
}
function handleSubmitAP() {
if (!apSettings) return;
let valid = true;
// Validate SSID
if (apSettings.ssid.length < 3 || apSettings.ssid.length > 32) {
valid = false;
formErrors.ssid = true;
} else {
formErrors.ssid = false;
} }
// Validate Channel async function getAPSettings() {
let channel = Number(apSettings.channel); const result = await api.get<ApSettings>('/api/wifi/ap/settings');
if (1 > channel || channel > 13) { if (result.isErr()) {
valid = false; console.error('Error:', result.inner);
formErrors.channel = true; return;
} else { }
formErrors.channel = false; apSettings = result.inner;
return apSettings;
} }
// Validate max_clients const interval = setInterval(async () => {
let maxClients = Number(apSettings.max_clients); getAPStatus();
if (1 > maxClients || maxClients > 8) { }, 5000);
valid = false;
formErrors.max_clients = true; onDestroy(() => clearInterval(interval));
} else {
formErrors.max_clients = false; onMount(getAPSettings);
let provisionMode = [
{
id: 0,
text: `Always`
},
{
id: 1,
text: `When WiFi Disconnected`
},
{
id: 2,
text: `Never`
}
];
let apStatusDescription = [
{ bg_color: 'bg-success', text_color: 'text-success-content', description: 'Active' },
{ bg_color: 'bg-error', text_color: 'text-error-content', description: 'Inactive' },
{ bg_color: 'bg-warning', text_color: 'text-warning-content', description: 'Lingering' }
];
let formErrors = $state({
ssid: false,
channel: false,
max_clients: false,
local_ip: false,
gateway_ip: false,
subnet_mask: false
});
async function postAPSettings(data: ApSettings) {
const result = await api.post<ApSettings>('/api/wifi/ap/settings', data);
if (result.isErr()) {
notifications.error('User not authorized.', 3000);
console.error('Error:', result.inner);
return;
}
notifications.success('Access Point settings updated.', 3000);
apSettings = result.inner;
} }
// RegEx for IPv4 function handleSubmitAP() {
const regexExp = let valid = true;
/\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/;
// Validate gateway IP // Validate SSID
if (!regexExp.test(apSettings.gateway_ip)) { if (apSettings.ssid.length < 3 || apSettings.ssid.length > 32) {
valid = false; valid = false;
formErrors.gateway_ip = true; formErrors.ssid = true;
} else { } else {
formErrors.gateway_ip = false; formErrors.ssid = false;
} }
// Validate Subnet Mask // Validate Channel
if (!regexExp.test(apSettings.subnet_mask)) { let channel = Number(apSettings.channel);
valid = false; if (1 > channel || channel > 13) {
formErrors.subnet_mask = true; valid = false;
} else { formErrors.channel = true;
formErrors.subnet_mask = false; } else {
} formErrors.channel = false;
}
// Validate local IP // Validate max_clients
if (!regexExp.test(apSettings.local_ip)) { let maxClients = Number(apSettings.max_clients);
valid = false; if (1 > maxClients || maxClients > 8) {
formErrors.local_ip = true; valid = false;
} else { formErrors.max_clients = true;
formErrors.local_ip = false; } else {
} formErrors.max_clients = false;
}
// Submit JSON to REST API // RegEx for IPv4
if (valid) { const regexExp =
postAPSettings(apSettings); /\b(?:(?:2(?:[0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9])\.){3}(?:(?:2([0-4][0-9]|5[0-5])|[0-1]?[0-9]?[0-9]))\b/;
// Validate gateway IP
if (!regexExp.test(apSettings.gateway_ip)) {
valid = false;
formErrors.gateway_ip = true;
} else {
formErrors.gateway_ip = false;
}
// Validate Subnet Mask
if (!regexExp.test(apSettings.subnet_mask)) {
valid = false;
formErrors.subnet_mask = true;
} else {
formErrors.subnet_mask = false;
}
// Validate local IP
if (!regexExp.test(apSettings.local_ip)) {
valid = false;
formErrors.local_ip = true;
} else {
formErrors.local_ip = false;
}
// Submit JSON to REST API
if (valid) {
postAPSettings(apSettings);
}
} }
}
</script> </script>
<SettingsCard collapsible={false}> <SettingsCard collapsible={false}>
{#snippet icon()} {#snippet icon()}
<AP class="lex-shrink-0 mr-2 h-6 w-6 self-end" /> <AP class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet} {/snippet}
{#snippet title()} {#snippet title()}
<span>Access Point</span> <span >Access Point</span>
{/snippet} {/snippet}
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
{#await getAPStatus()} {#await getAPStatus()}
<Spinner /> <Spinner />
{:then} {:then nothing}
{#if apStatus} <div
<div class="flex w-full flex-col space-y-1"
class="flex w-full flex-col space-y-1" transition:slide|local={{ duration: 300, easing: cubicOut }}
transition:slide|local={{ duration: 300, easing: cubicOut }}> >
<StatusItem <div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
icon={AP} <div
title="Status" class="mask mask-hexagon h-auto w-10 {apStatusDescription[apStatus.status]
variant={apStatusVariant[apStatus.status]} .bg_color}"
description={apStatusDescription[apStatus.status]} /> >
<AP
class="h-auto w-full scale-75 {apStatusDescription[apStatus.status]
.text_color}"
/>
</div>
<div>
<div class="font-bold">Status</div>
<div class="text-sm opacity-75">
{apStatusDescription[apStatus.status].description}
</div>
</div>
</div>
<StatusItem icon={Home} title="IP Address" description={apStatus.ip_address} /> <div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
<div class="mask mask-hexagon bg-primary h-auto w-10">
<Home class="text-primary-content h-auto w-full scale-75" />
</div>
<div>
<div class="font-bold">IP Address</div>
<div class="text-sm opacity-75">
{apStatus.ip_address}
</div>
</div>
</div>
<StatusItem icon={MAC} title="MAC Address" description={apStatus.mac_address} /> <div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
<div class="mask mask-hexagon bg-primary h-auto w-10">
<MAC class="text-primary-content h-auto w-full scale-75" />
</div>
<div>
<div class="font-bold">MAC Address</div>
<div class="text-sm opacity-75">
{apStatus.mac_address}
</div>
</div>
</div>
<StatusItem icon={Devices} title="AP Clients" description={apStatus.station_num} /> <div class="rounded-box bg-base-100 flex items-center space-x-3 px-4 py-2">
</div> <div class="mask mask-hexagon bg-primary h-auto w-10">
{/if} <Devices class="text-primary-content h-auto w-full scale-75" />
{/await} </div>
</div> <div>
<div class="font-bold">AP Clients</div>
<div class="bg-base-200 relative grid w-full max-w-2xl self-center overflow-hidden"> <div class="text-sm opacity-75">
<div {apStatus.station_num}
class="min-h-16 flex w-full items-center justify-between space-x-3 p-0 text-xl font-medium"> </div>
Change AP Settings </div>
</div>
</div>
{/await}
</div> </div>
{#await getAPSettings()}
<Spinner /> <div class="bg-base-200 relative grid w-full max-w-2xl self-center overflow-hidden">
{:then}
{#if apSettings}
<div <div
class="flex flex-col gap-2 p-0" class="min-h-16 flex w-full items-center justify-between space-x-3 p-0 text-xl font-medium"
transition:slide|local={{ duration: 300, easing: cubicOut }}> >
<form Change AP Settings
class="grid w-full grid-cols-1 content-center gap-x-4 p-0s sm:grid-cols-2"
onsubmit={preventDefault(handleSubmitAP)}
novalidate
bind:this={formField}>
<div>
<label class="label" for="apmode">
<span class="label-text">Provide Access Point ...</span>
</label>
<select
class="select select-bordered w-full"
id="apmode"
bind:value={apSettings.provision_mode}>
{#each provisionMode as mode}
<option value={mode.id}>
{mode.text}
</option>
{/each}
</select>
</div>
<div>
<label class="label" for="ssid">
<span class="label-text text-md">SSID</span>
</label>
<input
type="text"
class="input input-bordered invalid:border-error w-full invalid:border-2 {(
formErrors.ssid
) ?
'border-error border-2'
: ''}"
bind:value={apSettings.ssid}
id="ssid"
min="2"
max="32"
required />
<label class="label" for="ssid">
<span class="label-text-alt text-error {formErrors.ssid ? '' : 'hidden'}"
>SSID must be between 2 and 32 characters long</span>
</label>
</div>
<div>
<label class="label" for="pwd">
<span class="label-text text-md">Password</span>
</label>
<PasswordInput bind:value={apSettings.password} id="pwd" />
</div>
<div>
<label class="label" for="channel">
<span class="label-text text-md">Preferred Channel</span>
</label>
<input
type="number"
min="1"
max="13"
class="input input-bordered invalid:border-error w-full invalid:border-2 {(
formErrors.channel
) ?
'border-error border-2'
: ''}"
bind:value={apSettings.channel}
id="channel"
required />
<label class="label" for="channel">
<span class="label-text-alt text-error {formErrors.channel ? '' : 'hidden'}"
>Must be channel 1 to 13</span>
</label>
</div>
<div>
<label class="label" for="clients">
<span class="label-text text-md">Max Clients</span>
</label>
<input
type="number"
min="1"
max="8"
class="input input-bordered invalid:border-error w-full invalid:border-2 {(
formErrors.max_clients
) ?
'border-error border-2'
: ''}"
bind:value={apSettings.max_clients}
id="clients"
required />
<label class="label" for="clients">
<span class="label-text-alt text-error {formErrors.max_clients ? '' : 'hidden'}"
>Maximum 8 clients allowed</span>
</label>
</div>
<div>
<label class="label" for="localIP">
<span class="label-text text-md">Local IP</span>
</label>
<input
type="text"
class="input input-bordered w-full {formErrors.local_ip ? 'border-error border-2'
: ''}"
minlength="7"
maxlength="15"
size="15"
bind:value={apSettings.local_ip}
id="localIP"
required />
<label class="label" for="localIP">
<span class="label-text-alt text-error {formErrors.local_ip ? '' : 'hidden'}"
>Must be a valid IPv4 address</span>
</label>
</div>
<div>
<label class="label" for="gateway">
<span class="label-text text-md">Gateway IP</span>
</label>
<input
type="text"
class="input input-bordered w-full {formErrors.gateway_ip ? 'border-error border-2'
: ''}"
minlength="7"
maxlength="15"
size="15"
bind:value={apSettings.gateway_ip}
id="gateway"
required />
<label class="label" for="gateway">
<span class="label-text-alt text-error {formErrors.gateway_ip ? '' : 'hidden'}"
>Must be a valid IPv4 address</span>
</label>
</div>
<div>
<label class="label" for="subnet">
<span class="label-text text-md">Subnet Mask</span>
</label>
<input
type="text"
class="input input-bordered w-full {formErrors.subnet_mask ? 'border-error border-2'
: ''}"
minlength="7"
maxlength="15"
size="15"
bind:value={apSettings.subnet_mask}
id="subnet"
required />
<label class="label" for="subnet">
<span class="label-text-alt text-error {formErrors.subnet_mask ? '' : 'hidden'}"
>Must be a valid IPv4 address</span>
</label>
</div>
<label class="label my-auto cursor-pointer justify-start gap-4">
<input
type="checkbox"
bind:checked={apSettings.ssid_hidden}
class="checkbox checkbox-primary" />
<span class="">Hide SSID</span>
</label>
<div class="place-self-end">
<button class="btn btn-primary" type="submit">Apply Settings</button>
</div>
</form>
</div> </div>
{/if} {#await getAPSettings()}
{/await} <Spinner />
</div> {:then nothing}
<div
class="flex flex-col gap-2 p-0"
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<form
class="grid w-full grid-cols-1 content-center gap-x-4 p-0s sm:grid-cols-2"
onsubmit={preventDefault(handleSubmitAP)}
novalidate
bind:this={formField}
>
<div>
<label class="label" for="apmode">
<span class="label-text">Provide Access Point ...</span>
</label>
<select
class="select select-bordered w-full"
id="apmode"
bind:value={apSettings.provision_mode}
>
{#each provisionMode as mode}
<option value={mode.id}>
{mode.text}
</option>
{/each}
</select>
</div>
<div>
<label class="label" for="ssid">
<span class="label-text text-md">SSID</span>
</label>
<input
type="text"
class="input input-bordered invalid:border-error w-full invalid:border-2 {(
formErrors.ssid
) ?
'border-error border-2'
: ''}"
bind:value={apSettings.ssid}
id="ssid"
min="2"
max="32"
required
/>
<label class="label" for="ssid">
<span
class="label-text-alt text-error {formErrors.ssid ? '' : 'hidden'}"
>SSID must be between 2 and 32 characters long</span
>
</label>
</div>
<div>
<label class="label" for="pwd">
<span class="label-text text-md">Password</span>
</label>
<PasswordInput bind:value={apSettings.password} id="pwd" />
</div>
<div>
<label class="label" for="channel">
<span class="label-text text-md">Preferred Channel</span>
</label>
<input
type="number"
min="1"
max="13"
class="input input-bordered invalid:border-error w-full invalid:border-2 {(
formErrors.channel
) ?
'border-error border-2'
: ''}"
bind:value={apSettings.channel}
id="channel"
required
/>
<label class="label" for="channel">
<span
class="label-text-alt text-error {formErrors.channel ? '' : (
'hidden'
)}">Must be channel 1 to 13</span
>
</label>
</div>
<div>
<label class="label" for="clients">
<span class="label-text text-md">Max Clients</span>
</label>
<input
type="number"
min="1"
max="8"
class="input input-bordered invalid:border-error w-full invalid:border-2 {(
formErrors.max_clients
) ?
'border-error border-2'
: ''}"
bind:value={apSettings.max_clients}
id="clients"
required
/>
<label class="label" for="clients">
<span
class="label-text-alt text-error {formErrors.max_clients ? '' : (
'hidden'
)}">Maximum 8 clients allowed</span
>
</label>
</div>
<div>
<label class="label" for="localIP">
<span class="label-text text-md">Local IP</span>
</label>
<input
type="text"
class="input input-bordered w-full {formErrors.local_ip ?
'border-error border-2'
: ''}"
minlength="7"
maxlength="15"
size="15"
bind:value={apSettings.local_ip}
id="localIP"
required
/>
<label class="label" for="localIP">
<span
class="label-text-alt text-error {formErrors.local_ip ? '' : (
'hidden'
)}">Must be a valid IPv4 address</span
>
</label>
</div>
<div>
<label class="label" for="gateway">
<span class="label-text text-md">Gateway IP</span>
</label>
<input
type="text"
class="input input-bordered w-full {formErrors.gateway_ip ?
'border-error border-2'
: ''}"
minlength="7"
maxlength="15"
size="15"
bind:value={apSettings.gateway_ip}
id="gateway"
required
/>
<label class="label" for="gateway">
<span
class="label-text-alt text-error {formErrors.gateway_ip ? '' : (
'hidden'
)}">Must be a valid IPv4 address</span
>
</label>
</div>
<div>
<label class="label" for="subnet">
<span class="label-text text-md">Subnet Mask</span>
</label>
<input
type="text"
class="input input-bordered w-full {formErrors.subnet_mask ?
'border-error border-2'
: ''}"
minlength="7"
maxlength="15"
size="15"
bind:value={apSettings.subnet_mask}
id="subnet"
required
/>
<label class="label" for="subnet">
<span
class="label-text-alt text-error {formErrors.subnet_mask ? '' : (
'hidden'
)}">Must be a valid IPv4 address</span
>
</label>
</div>
<label class="label my-auto cursor-pointer justify-start gap-4">
<input
type="checkbox"
bind:checked={apSettings.ssid_hidden}
class="checkbox checkbox-primary"
/>
<span class="">Hide SSID</span>
</label>
<div class="place-self-end">
<button class="btn btn-primary" type="submit">Apply Settings</button>
</div>
</form>
</div>
{/await}
</div>
</SettingsCard> </SettingsCard>
app/src/routes/wifi/mdns/+page.svelte
-7
View File
@@ -1,7 +0,0 @@
<script lang="ts">
import MDNS from './MDNS.svelte'
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
<MDNS />
</div>
app/src/routes/wifi/mdns/MDNS.svelte
-100
View File
@@ -1,100 +0,0 @@
<script lang="ts">
import { onMount } from 'svelte'
import { api } from '$lib/api'
import SettingsCard from '$lib/components/SettingsCard.svelte'
import { AP, Home, MAC, Devices } from '$lib/components/icons'
import Spinner from '$lib/components/Spinner.svelte'
import StatusItem from '$lib/components/StatusItem.svelte'
import { cubicOut } from 'svelte/easing'
import { slide } from 'svelte/transition'
import type { MDNSStatus, MDNSServiceItem, MDNSServiceQuery } from '$lib/types/models'
import { compareIp } from '$lib/utilities'
let mdnsStatus: MDNSStatus | undefined = $state()
let services: MDNSServiceItem[] = $state([])
let isLoading = $state(false)
const getMDNSStatus = async () => {
const result = await api.get<MDNSStatus>('/api/mdns/status')
if (result.isErr()) {
console.error('Error:', result.inner)
return
}
mdnsStatus = result.inner
}
const queryMDNSServices = async () => {
isLoading = true
const result = await api.post<MDNSServiceQuery>('/api/mdns/query', {
service: 'http',
protocol: 'tcp'
})
if (result.isErr()) {
console.error('Error:', result.inner)
return
}
services = result.inner.services.sort((a, b) => compareIp(a.ip, b.ip))
isLoading = false
}
onMount(async () => {
await getMDNSStatus()
await queryMDNSServices()
})
const triggerScan = async () => {
await queryMDNSServices()
}
</script>
<SettingsCard collapsible={false}>
{#snippet icon()}
<AP class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet}
{#snippet title()}
<span>MDNS</span>
{/snippet}
{#snippet right()}
<button class="btn btn-primary" onclick={triggerScan} disabled={isLoading}>
{#if isLoading}
<span class="loading loading-ring loading-xs"></span>
{:else}
Scan
{/if}
</button>
{/snippet}
<div class="w-full overflow-x-auto">
{#if mdnsStatus}
<div
class="flex w-full flex-col space-y-1"
transition:slide|local={{ duration: 300, easing: cubicOut }}>
<StatusItem icon={Home} title="IP Address" description={mdnsStatus.hostname} />
<StatusItem icon={MAC} title="Instance" description={mdnsStatus.instance} />
<StatusItem icon={Devices} title="Services" description={mdnsStatus.services.length} />
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Ip address</th>
<th>Port</th>
</tr>
</thead>
<tbody>
{#each services as service}
<tr>
<td><Devices class="h-6 w-6" /></td>
<td>{service.name}</td>
<td>{service.ip}</td>
<td>{service.port}</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
</div>
</SettingsCard>
app/src/routes/wifi/sta/Scan.svelte
+132 -116
View File
@@ -1,131 +1,147 @@
<script lang="ts"> <script lang="ts">
import { focusTrap } from 'svelte-focus-trap'; import { focusTrap } from 'svelte-focus-trap';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'; import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
import type { NetworkItem, NetworkList } from '$lib/types/models'; import type { NetworkItem, NetworkList } from '$lib/types/models';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { AP, Network, Reload, Cancel } from '$lib/components/icons'; import { AP, Network, Reload, Cancel } from '$lib/components/icons';
import { modals, exitBeforeEnter, type ModalProps } from 'svelte-modals'; import { modals, exitBeforeEnter } from 'svelte-modals';
let { isOpen, storeNetwork }: ModalProps = $props(); // provided by <Modals />
interface Props {
const encryptionType = [ isOpen: boolean;
'Open', storeNetwork: any;
'WEP',
'WPA PSK',
'WPA2 PSK',
'WPA WPA2 PSK',
'WPA2 Enterprise',
'WPA3 PSK',
'WPA2 WPA3 PSK',
'WAPI PSK'
]
let listOfNetworks: NetworkItem[] = $state([])
let scanActive = $state(false)
let pollingId: ReturnType<typeof setTimeout> | number
async function scanNetworks() {
scanActive = true
await api.get('/api/wifi/scan')
if ((await pollingResults()) == false) {
pollingId = setInterval(() => pollingResults(), 1000)
} }
return
}
async function pollingResults() { let { isOpen, storeNetwork }: Props = $props();
const result = await api.get<NetworkList>('/api/wifi/networks')
if (result.isErr()) {
console.error(`Error occurred while fetching: `, result.inner)
return false
}
let response = result.inner
listOfNetworks = response.networks
scanActive = false
if (listOfNetworks.length) {
clearInterval(pollingId)
pollingId = 0
}
return listOfNetworks.length
}
onMount(() => { const encryptionType = [
scanNetworks() 'Open',
}) 'WEP',
'WPA PSK',
'WPA2 PSK',
'WPA WPA2 PSK',
'WPA2 Enterprise',
'WPA3 PSK',
'WPA2 WPA3 PSK',
'WAPI PSK'
];
onDestroy(() => { let listOfNetworks: NetworkItem[] = $state([]);
if (pollingId) {
clearInterval(pollingId) let scanActive = $state(false);
pollingId = 0
let pollingId: number;
async function scanNetworks() {
scanActive = true;
await api.get('/api/wifi/scan');
if ((await pollingResults()) == false) {
pollingId = setInterval(() => pollingResults(), 1000);
}
return;
} }
})
async function pollingResults() {
const result = await api.get<NetworkList>('/api/wifi/networks');
if (result.isErr()) {
console.error(`Error occurred while fetching: `, result.inner);
return false;
}
let response = result.inner;
listOfNetworks = response.networks;
scanActive = false;
if (listOfNetworks.length) {
clearInterval(pollingId);
pollingId = 0;
}
return listOfNetworks.length;
}
onMount(() => {
scanNetworks();
});
onDestroy(() => {
if (pollingId) {
clearInterval(pollingId);
pollingId = 0;
}
});
</script> </script>
{#if isOpen} {#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 <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"> role="dialog"
<h2 class="text-base-content text-start text-2xl font-bold">Scan Networks</h2> class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
<div class="divider my-2"></div> transition:fly={{ y: 50 }}
<div class="overflow-y-auto"> use:exitBeforeEnter
{#if scanActive}<div class="bg-base-100 flex flex-col items-center justify-center p-6"> use:focusTrap
<AP class="text-secondary h-32 w-32 shrink animate-ping stroke-2" /> >
<p class="mt-8 text-2xl">Scanning ...</p> <div
</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"
{:else} >
<ul class="menu"> <h2 class="text-base-content text-start text-2xl font-bold">Scan Networks</h2>
{#each listOfNetworks as network, i} <div class="divider my-2"></div>
<li> <div class="overflow-y-auto">
<!-- svelte-ignore a11y_click_events_have_key_events --> {#if scanActive}<div
<div class="bg-base-100 flex flex-col items-center justify-center p-6"
class="bg-base-200 rounded-btn my-1 flex items-center space-x-3 hover:scale-[1.02] active:scale-[0.98]" >
onclick={() => { <AP class="text-secondary h-32 w-32 shrink animate-ping stroke-2" />
storeNetwork(network.ssid) <p class="mt-8 text-2xl">Scanning ...</p>
}}
role="button"
tabindex="0">
<div class="mask mask-hexagon bg-primary h-auto w-10 shrink-0">
<Network class="text-primary-content h-auto w-full scale-75" />
</div>
<div>
<div class="font-bold">{network.ssid}</div>
<div class="text-sm opacity-75">
Security: {encryptionType[network.encryption_type]}, Channel: {network.channel}
</div> </div>
</div> {:else}
<div class="grow"></div> <ul class="menu">
<RssiIndicator showDBm={true} rssi={network.rssi} /> {#each listOfNetworks as network, i}
</div> <li>
</li> <!-- svelte-ignore a11y_click_events_have_key_events -->
{/each} <div
</ul> class="bg-base-200 rounded-btn my-1 flex items-center space-x-3 hover:scale-[1.02] active:scale-[0.98]"
{/if} onclick={() => {
</div> storeNetwork(network.ssid);
<div class="divider my-2"></div> }}
<div class="flex flex-wrap justify-end gap-2"> role="button"
<button tabindex="0"
class="btn btn-primary inline-flex flex-none items-center" >
disabled={scanActive} <div class="mask mask-hexagon bg-primary h-auto w-10 shrink-0">
onclick={scanNetworks}> <Network
<Reload class="mr-2 h-5 w-5" /><span>Scan again</span> class="text-primary-content h-auto w-full scale-75"
</button> />
</div>
<div>
<div class="font-bold">{network.ssid}</div>
<div class="text-sm opacity-75">
Security: {encryptionType[network.encryption_type]},
Channel: {network.channel}
</div>
</div>
<div class="grow"></div>
<RssiIndicator showDBm={true} rssi={network.rssi} />
</div>
</li>
{/each}
</ul>
{/if}
</div>
<div class="divider my-2"></div>
<div class="flex flex-wrap justify-end gap-2">
<button
class="btn btn-primary inline-flex flex-none items-center"
disabled={scanActive}
onclick={scanNetworks}
>
<Reload class="mr-2 h-5 w-5" /><span>Scan again</span>
</button>
<div class="grow"></div> <div class="grow"></div>
<button <button
class="btn btn-warning text-warning-content inline-flex flex-none items-center" class="btn btn-warning text-warning-content inline-flex flex-none items-center"
onclick={() => modals.close()}> onclick={() => modals.close()}
<Cancel class="mr-2 h-5 w-5" /><span>Cancel</span> >
</button> <Cancel class="mr-2 h-5 w-5" /><span>Cancel</span>
</div> </button>
</div>
</div>
</div> </div>
</div>
{/if} {/if}
app/src/routes/wifi/sta/Wifi.svelte
+733 -584
View File
File diff suppressed because it is too large Load Diff
app/static/URDF.zip
BIN
View File
Binary file not shown.
app/static/URDF/femur.mtl
-5
View File
@@ -1,5 +0,0 @@
# WaveFront *.mtl file (generated by Autodesk ATF)
newmtl Plastic_-_Matte_(Black)
Kd 0.098039 0.098039 0.098039
app/static/URDF/femur.obj
-2106
View File
File diff suppressed because it is too large Load Diff
app/static/URDF/femur.stl
BIN
View File
Binary file not shown.
app/static/URDF/frame.mtl
-5
View File
@@ -1,5 +0,0 @@
# WaveFront *.mtl file (generated by Autodesk ATF)
newmtl Steel_-_Satin
Kd 0.627451 0.627451 0.627451
app/static/URDF/frame.obj
-43125
View File
File diff suppressed because it is too large Load Diff
app/static/URDF/frame.stl
BIN
View File
Binary file not shown.
app/static/URDF/lb shoulder.mtl
-14
View File
@@ -1,14 +0,0 @@
# WaveFront *.mtl file (generated by Autodesk ATF)
newmtl Opaque(28,28,28)
Kd 0.109804 0.109804 0.109804
newmtl Steel_-_Satin
Kd 0.627451 0.627451 0.627451
newmtl Opaque(0,0,255)
Kd 0.000000 0.000000 1.000000
newmtl Opaque(202,209,238)
Kd 0.792157 0.819608 0.933333
app/static/URDF/lb shoulder.obj
-36032
View File
File diff suppressed because it is too large Load Diff
app/static/URDF/lb shoulder.stl
BIN
View File
Binary file not shown.
app/static/URDF/lf shoulder.mtl
-14
View File
@@ -1,14 +0,0 @@
# WaveFront *.mtl file (generated by Autodesk ATF)
newmtl Opaque(28,28,28)
Kd 0.109804 0.109804 0.109804
newmtl Opaque(0,0,255)
Kd 0.000000 0.000000 1.000000
newmtl Opaque(202,209,238)
Kd 0.792157 0.819608 0.933333
newmtl Steel_-_Satin
Kd 0.627451 0.627451 0.627451
app/static/URDF/lf shoulder.obj
-36033
View File
File diff suppressed because it is too large Load Diff
app/static/URDF/lf shoulder.stl
BIN
View File
Binary file not shown.
app/static/URDF/rb shoulder.mtl
-14
View File
@@ -1,14 +0,0 @@
# WaveFront *.mtl file (generated by Autodesk ATF)
newmtl Opaque(28,28,28)
Kd 0.109804 0.109804 0.109804
newmtl Opaque(0,0,255)
Kd 0.000000 0.000000 1.000000
newmtl Opaque(202,209,238)
Kd 0.792157 0.819608 0.933333
newmtl Steel_-_Satin
Kd 0.627451 0.627451 0.627451
app/static/URDF/rb shoulder.obj
-36059
View File
File diff suppressed because it is too large Load Diff
app/static/URDF/rb shoulder.stl
BIN
View File
Binary file not shown.
app/static/URDF/rf shoulder.mtl
-14
View File
@@ -1,14 +0,0 @@
# WaveFront *.mtl file (generated by Autodesk ATF)
newmtl Opaque(28,28,28)
Kd 0.109804 0.109804 0.109804
newmtl Opaque(0,0,255)
Kd 0.000000 0.000000 1.000000
newmtl Opaque(202,209,238)
Kd 0.792157 0.819608 0.933333
newmtl Steel_-_Satin
Kd 0.627451 0.627451 0.627451
app/static/URDF/rf shoulder.obj
-36059
View File
File diff suppressed because it is too large Load Diff
app/static/URDF/rf shoulder.stl
BIN
View File
Binary file not shown.
app/static/URDF/shell.mtl
-5
View File
@@ -1,5 +0,0 @@
# WaveFront *.mtl file (generated by Autodesk ATF)
newmtl Steel_-_Satin
Kd 0.627451 0.627451 0.627451
app/static/URDF/shell.obj
-6804
View File
File diff suppressed because it is too large Load Diff
app/static/URDF/shell.stl
BIN
View File
Binary file not shown.
app/static/URDF/tibia.mtl
-14
View File
@@ -1,14 +0,0 @@
# WaveFront *.mtl file (generated by Autodesk ATF)
newmtl Stainless_Steel_-_Satin
Kd 0.796078 0.796078 0.796078
newmtl Steel_-_Satin
Kd 0.627451 0.627451 0.627451
newmtl Plastic_-_Matte_(Black)
Kd 0.098039 0.098039 0.098039
newmtl Rubber_-_Soft
Kd 0.152941 0.152941 0.152941
app/static/URDF/tibia.obj
-15354
View File
File diff suppressed because it is too large Load Diff
app/static/URDF/tibia.stl
BIN
View File
Binary file not shown.
app/static/yertle.URDF
-402
View File
@@ -1,402 +0,0 @@
<?xml version="1.0"?>
<robot name="Dog">
<material name="white">
<color rgba="1 1 1 1" />
</material>
<material name="black">
<color rgba="0 0 0 1" />
</material>
<material name="foot_color">
<color rgba="0 0.75 1 1" />
</material>
<link name="base_link">
<visual>
<geometry>
<mesh filename="package://URDF/frame.stl" />
</geometry>
<origin rpy="0 0 3.141" xyz="0 0 0.0" />
<material name="black" />
</visual>
<inertial>
<mass value="1.5" />
<inertia ixx="0" ixy="0" ixz="0" iyy="0" iyz="0" izz="0" />
</inertial>
</link>
<!-- shell -->
<link name="frame">
<visual>
<geometry>
<mesh filename="package://URDF/shell.stl" />
</geometry>
<origin rpy="0 0 3.141" xyz="0 0 0" />
<material name="white" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<mesh filename="package://URDF/shell.stl" />
</geometry>
<origin rpy="0 0 3.141" xyz="0 0 0.0" />
</collision>
</link>
<joint name="base_to_frame" type="fixed">
<parent link="base_link" />
<child link="frame" />
<origin xyz="0 0 0" />
</joint>
<!-- lf shoulder -->
<link name="lf_shoulder">
<visual>
<geometry>
<mesh filename="package://URDF/lf shoulder.stl" />
</geometry>
<origin rpy="3.141 3.141 0" xyz="0 0 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
</link>
<joint name="lf_shoulder" type="continuous">
<parent link="base_link" />
<child link="lf_shoulder" />
<origin xyz="0.090 0.037 0" />
<axis xyz="1 0 0" />
</joint>
<link name="lf_thigh">
<visual>
<geometry>
<mesh filename="package://URDF/femur.stl" />
</geometry>
<origin rpy="1.5708 0 1.5708" xyz="0 0 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
</link>
<joint name="lf_thigh" type="continuous">
<parent link="lf_shoulder" />
<child link="lf_thigh" />
<origin xyz="0.025 0.027 0 " />
<axis xyz="0 1 0" />
</joint>
<link name="lf_shin">
<visual>
<geometry>
<mesh filename="package://URDF/tibia.stl" />
</geometry>
<origin rpy="0.610865 0 -1.5708" xyz="0 0.008 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<mesh filename="package://URDF/tibia.stl" />
</geometry>
<origin rpy="0.610865 0 -1.5708" xyz="0 0.008 0" />
</collision>
</link>
<joint name="lf_shin" type="continuous">
<parent link="lf_thigh" />
<child link="lf_shin" />
<origin xyz="0 0 -0.130 " />
<axis xyz="0 1 0" />
</joint>
<link name="lf_toe">
<visual>
<geometry>
<sphere radius="0.005" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 0" />
<material name="foot_color" />
</visual>
<inertial>
<mass value="0.05" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<sphere radius="0.020" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 0" />
</collision>
</link>
<joint name="lf_toe" type="fixed">
<parent link="lf_shin" />
<child link="lf_toe" />
<origin xyz="0 0 -0.130" />
</joint>
<!-- rf shoulder -->
<link name="rf_shoulder">
<visual>
<geometry>
<mesh filename="package://URDF/rf shoulder.stl" />
</geometry>
<origin rpy="0 0 3.141" xyz="0 0 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
</link>
<joint name="rf_shoulder" type="continuous">
<parent link="base_link" />
<child link="rf_shoulder" />
<origin xyz="0.090 -0.040 0" />
<axis xyz="1 0 0" />
</joint>
<link name="rf_thigh">
<visual>
<geometry>
<mesh filename="package://URDF/femur.stl" />
</geometry>
<origin rpy="4.71239 3.141 1.5708" xyz="0 0 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
</link>
<joint name="rf_thigh" type="continuous">
<parent link="rf_shoulder" />
<child link="rf_thigh" />
<origin xyz="0.025 -0.027 0 " />
<axis xyz="0 1 0" />
</joint>
<link name="rf_shin">
<visual>
<geometry>
<mesh filename="package://URDF/tibia.stl" />
</geometry>
<origin rpy="0.610865 0 -1.5708" xyz="0 -0.0045 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<mesh filename="package://URDF/tibia.stl" />
</geometry>
<origin rpy="0.610865 0 -1.5708" xyz="0 -0.007 0" />
</collision>
</link>
<joint name="rf_shin" type="continuous">
<parent link="rf_thigh" />
<child link="rf_shin" />
<origin xyz="0 0 -0.130 " />
<axis xyz="0 1 0" />
</joint>
<link name="rf_toe">
<visual>
<geometry>
<sphere radius="0.005" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 0" />
<material name="foot_color" />
</visual>
<inertial>
<mass value="0.05" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<sphere radius="0.020" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 0" />
</collision>
</link>
<joint name="rf_toe" type="fixed">
<parent link="rf_shin" />
<child link="rf_toe" />
<origin xyz="0 0 -0.130" />
</joint>
<!-- lb shoulder -->
<link name="lb_shoulder">
<visual>
<geometry>
<mesh filename="package://URDF/lb shoulder.stl" />
</geometry>
<origin rpy="3.141 3.141 0" xyz="0 0 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
</link>
<joint name="lb_shoulder" type="continuous">
<parent link="base_link" />
<child link="lb_shoulder" />
<origin xyz="-0.081 0.038 0" />
<axis xyz="1 0 0" />
</joint>
<link name="lb_thigh">
<visual>
<geometry>
<mesh filename="package://URDF/femur.stl" />
</geometry>
<origin rpy="1.5708 0 1.5708" xyz="0 0 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
</link>
<joint name="lb_thigh" type="continuous">
<parent link="lb_shoulder" />
<child link="lb_thigh" />
<origin xyz="-0.043 0.027 0 " />
<axis xyz="0 1 0" />
</joint>
<link name="lb_shin">
<visual>
<geometry>
<mesh filename="package://URDF/tibia.stl" />
</geometry>
<origin rpy="0.610865 0 -1.5708" xyz="0 0.008 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<mesh filename="package://URDF/tibia.stl" />
</geometry>
<origin rpy="0.610865 0 -1.5708" xyz="0 0.008 0" />
</collision>
</link>
<joint name="lb_shin" type="continuous">
<parent link="lb_thigh" />
<child link="lb_shin" />
<origin xyz="0 0 -0.130 " />
<axis xyz="0 1 0" />
</joint>
<link name="lb_toe">
<visual>
<geometry>
<sphere radius="0.0005" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 0" />
<material name="foot_color" />
</visual>
<inertial>
<mass value="0.05" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<sphere radius="0.020" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 0" />
</collision>
</link>
<joint name="lb_toe" type="fixed">
<parent link="lb_shin" />
<child link="lb_toe" />
<origin xyz="0 0 -0.130" />
</joint>
<!-- rb arm -->
<link name="rb_shoulder">
<visual>
<geometry>
<mesh filename="package://URDF/rb shoulder.stl" />
</geometry>
<origin rpy="3.141 3.141 0" xyz="0 0 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
</link>
<joint name="rb_shoulder" type="continuous">
<parent link="base_link" />
<child link="rb_shoulder" />
<origin xyz="-0.081 -0.040 0" />
<axis xyz="1 0 0" />
</joint>
<link name="rb_thigh">
<visual>
<geometry>
<mesh filename="package://URDF/femur.stl" />
</geometry>
<origin rpy="4.71239 3.141 1.5708" xyz="0 0 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
</link>
<joint name="rb_thigh" type="continuous">
<parent link="rb_shoulder" />
<child link="rb_thigh" />
<origin xyz="-0.043 -0.027 0 " />
<axis xyz="0 1 0" />
</joint>
<link name="rb_shin">
<visual>
<geometry>
<mesh filename="package://URDF/tibia.stl" />
</geometry>
<origin rpy="0.610865 0 -1.5708" xyz="0 -0.0045 0" />
<material name="black" />
</visual>
<inertial>
<mass value="0.025" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<mesh filename="package://URDF/tibia.stl" />
</geometry>
<origin rpy="0.610865 0 -1.5708" xyz="0 -0.007 0" />
</collision>
</link>
<joint name="rb_shin" type="continuous">
<parent link="rb_thigh" />
<child link="rb_shin" />
<origin xyz="0 0 -0.130 " />
<axis xyz="0 1 0" />
</joint>
<link name="rb_toe">
<visual>
<geometry>
<sphere radius="0.0005" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 0" />
<material name="foot_color" />
</visual>
<inertial>
<mass value="0.05" />
<inertia ixx="0.4" ixy="0.4" ixz="0.4" iyy="0.4" iyz="0.4" izz="0.4" />
</inertial>
<collision>
<geometry>
<sphere radius="0.020" />
</geometry>
<origin rpy="0 0 0" xyz="0 0 0" />
</collision>
</link>
<joint name="rb_toe" type="fixed">
<parent link="rb_shin" />
<child link="rb_toe" />
<origin xyz="0 0 -0.130" />
</joint>
</robot>
app/svelte.config.js
+3 -6
View File
@@ -1,10 +1,10 @@
import adapter from '@sveltejs/adapter-static' import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
const basePath = process.env.BASE_PATH ?? ''
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
kit: { kit: {
@@ -14,10 +14,7 @@ const config = {
fallback: 'index.html', fallback: 'index.html',
precompress: false, precompress: false,
strict: true strict: true
}), })
paths: {
base: basePath
}
} }
} }
app/tests/integration/test.ts
+20 -7
View File
@@ -1,11 +1,24 @@
import { expect, test } from '@playwright/test' import { expect, test } from '@playwright/test';
test('has title', async ({ page }) => { test('has title', async ({ page }) => {
await page.goto('/') await page.goto('/');
await expect(page).toHaveTitle(/Spot micro controller/) await page.route('**/api/features', (route) =>
}) route.fulfill({
status: 200,
body: JSON.stringify({})
})
);
await expect(page).toHaveTitle(/Spot micro controller/);
});
test('index page has expected h1', async ({ page }) => { test('index page has expected h1', async ({ page }) => {
await page.goto('/') await page.goto('/');
await expect(page.getByRole('heading', { name: 'Spot micro controller' }).first()).toBeVisible() await page.route('**/api/features', (route) =>
}) route.fulfill({
status: 200,
body: JSON.stringify({})
})
);
await expect(page.getByRole('heading', { name: 'Spot micro controller' }).first()).toBeVisible();
});
app/vite-plugin-littlefs.ts
+25 -43
View File
@@ -1,49 +1,31 @@
import type { Plugin } from 'vite'; import type { UserConfig, Plugin } from 'vite';
export default function viteLittleFS(): Plugin[] { export default function viteLittleFS(): Plugin[] {
return [ return [
{ {
name: 'vite-plugin-littlefs', name: 'vite-plugin-littlefs',
enforce: 'post', enforce: 'post',
apply: 'build', apply: 'build',
async config(config) { async config(config, _configEnv) {
const output = config.build?.rollupOptions?.output; const { assetFileNames, chunkFileNames, entryFileNames } =
config.build?.rollupOptions?.output;
if (!output || !config.build?.rollupOptions) { // Handle Server-build + Client Assets
return; config.build.rollupOptions.output = {
} ...config.build?.rollupOptions?.output,
assetFileNames: assetFileNames.replace('.[hash]', '')
};
const outputOptions = Array.isArray(output) ? output[0] : output; // Handle Client-build
if (config.build?.rollupOptions?.output.chunkFileNames.includes('hash')) {
if (!outputOptions) { config.build.rollupOptions.output = {
return; ...config.build?.rollupOptions?.output,
} chunkFileNames: chunkFileNames.replace('.[hash]', ''),
entryFileNames: entryFileNames.replace('.[hash]', '')
const { assetFileNames, chunkFileNames, entryFileNames } = outputOptions; };
}
if (assetFileNames && typeof assetFileNames === 'string') { }
config.build.rollupOptions.output = { }
...outputOptions, ];
assetFileNames: assetFileNames.replace('.[hash]', ''),
};
}
if (
chunkFileNames &&
typeof chunkFileNames === 'string' &&
chunkFileNames.includes('hash')
) {
config.build.rollupOptions.output = {
...config.build.rollupOptions.output,
chunkFileNames: chunkFileNames.replace('.[hash]', ''),
...(entryFileNames &&
typeof entryFileNames === 'string' && {
entryFileNames: entryFileNames.replace('.[hash]', ''),
}),
};
}
},
},
];
} }
app/vite.config.ts
+3 -3
View File
@@ -5,10 +5,7 @@ import viteLittleFS from './vite-plugin-littlefs'
import EnvCaster from '@niku/vite-env-caster' import EnvCaster from '@niku/vite-env-caster'
import tailwindcss from '@tailwindcss/vite' import tailwindcss from '@tailwindcss/vite'
const basePath = process.env.BASE_PATH ?? ''
export default defineConfig({ export default defineConfig({
base: basePath,
plugins: [ plugins: [
tailwindcss(), tailwindcss(),
sveltekit(), sveltekit(),
@@ -18,6 +15,9 @@ export default defineConfig({
viteLittleFS(), viteLittleFS(),
EnvCaster() EnvCaster()
], ],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
},
server: { server: {
proxy: { proxy: {
'/api': { '/api': {
docs/1_components.md
+7 -7
View File
@@ -1,17 +1,17 @@
# Components # Components
Spot is comprised of a 3D-printed body, some hardware, and a list of electronic components. Spot is comprised of a 3D printed body, some hardware and list of electronic components.
## Hardware ## Hardware
Spot is 3D-printed and is a combination of different Spot Micro designs, with some minor modifications. Spot is 3D printed and is a combination of different Spot Micro designs, with some minor modification on top.
The original design was developed by KDY0523. The original design is developed by KDY0523.
- [robjk reinforced shoulder remix](https://www.thingiverse.com/thing:4937631) - [robjk reinforced shoulder remix](https://www.thingiverse.com/thing:4937631)
- [Kooba SpotMicroESP32 remix](https://www.thingiverse.com/thing:4559827) - [Kooba SpotMicroESP32 remix](https://www.thingiverse.com/thing:4559827)
- [KDY0532 original design](https://www.thingiverse.com/thing:3445283) - [KDY0532 original design](https://www.thingiverse.com/thing:3445283)
The 3D prints are assembled with some additional non-printable components: The 3D prints is assembled with some additional component:
- 84x M2x8 screws + M2 nuts - 84x M2x8 screws + M2 nuts
- 92x M3x8 screws + M3 nuts - 92x M3x8 screws + M3 nuts
@@ -20,7 +20,7 @@ The 3D prints are assembled with some additional non-printable components:
## Electronics ## Electronics
These are the electronics I used for mine, and they can easily be swapped to suit your Spot's needs. These are the electronics i used for mine and can easily be switched up to suit your Spot's needs.
| Component | Specification | Required | Recommendation | | Component | Specification | Required | Recommendation |
| ------------------------- | ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------- | | ------------------------- | ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
@@ -39,6 +39,6 @@ These are the electronics I used for mine, and they can easily be swapped to sui
| 7.6-8.4V Battery | Battery | No | Im using 4x 18650 in 2s2p configuration, but other people have 2s LiPos. | | 7.6-8.4V Battery | Battery | No | Im using 4x 18650 in 2s2p configuration, but other people have 2s LiPos. |
| 4x Servo extension cables | Servo extension cables | Yes | You can either buy them or make them with a couple or headers and some cable. | | 4x Servo extension cables | Servo extension cables | Yes | You can either buy them or make them with a couple or headers and some cable. |
I recommend getting an ESP32-S3 with a camera, allowing for more computation and imaging capabilities. I recommend getting a ESP32-S3 with a camera, allowing for more computation and imaging capabilities.
It means a more responsive robot as it's faster at doing sensor fusion, calculating kinematics and gait planning, and networking. It means a more responsive robot as its faster doing sensor fusion, calculating kinematic and gait planning, and networking.
docs/2_assembly.md
+5 -20
View File
@@ -1,6 +1,6 @@
# Assembly and calibration # Assembly and calibration
There are a number of great resources for the assembly of the Spot Micro. For this reason, I refer to these, as the steps are the same for this version: There exist a number of great resources for the assembly of the spot micro. For this reason I refer to these, as the steps are the same for this version:
- [Michael Kubina SpotMicroESP32 assembly](https://github.com/michaelkubina/SpotMicroESP32/tree/master/assembly) - [Michael Kubina SpotMicroESP32 assembly](https://github.com/michaelkubina/SpotMicroESP32/tree/master/assembly)
- [Spot Micro AI assembly](https://spotmicroai.readthedocs.io/en/latest/assembly/) - [Spot Micro AI assembly](https://spotmicroai.readthedocs.io/en/latest/assembly/)
@@ -9,7 +9,7 @@ There are a number of great resources for the assembly of the Spot Micro. For th
Discussion about [Calibration](https://github.com/runeharlyk/SpotMicroESP32-Leika/discussions/118) Discussion about [Calibration](https://github.com/runeharlyk/SpotMicroESP32-Leika/discussions/118)
Assuming the servos are connected to the PCA9685 and are powered on: Assuming the servos are connected to the PCA9685 and is powered on:
### Calibrate in servo frame ### Calibrate in servo frame
@@ -38,28 +38,13 @@ You now have the values for the servos.
### Calibration in body frame ### Calibration in body frame
They now have to be calibrated to the body frame. It is assumed they have the center PWM pointing straight down. They now has to calibrated to the body frame. It assumed they have the center pwm pointing straight down.
1. Navigate to `/controller` and click on "Calibrate". This will set the servo to the center pwm value. 1. Navigate to `/controller` and click on "Calibrate". This will set the servo to the center pwm value.
2. Navigate to `peripherals/servo` - Here you can set the servo angle offset. 2. Navigate to `peripherals/servo` - Here you can set the servo angle offset.
All the legs should be pointing down. If they are not, you have two options. 1. Physically move the servos to the correct position by unscrewing the servo horns. 2. Update the servo offset in the servo table. All the legs should be pointing down. If they are not you have to options. 1; Physically move the servos to the correct position by un screwing the servo horns. 2; Update the servo offset in the servo table.
## Circuit diagram ## Circuit diagram
![Electronics diagram](media/circuitschematic.png "Title") ![Electronics diagram](media/circuit.png "Title")
PCA9685 Servo PWM numbers to joint:
| PWM_0 | Front Left Shoulder |
|--------|------------------------------|
| PWM_1 | Front Left Upper-Limb |
| PWM_2 | Front Left Leg (Lower-Limb) |
| PWM_3 | Front Right Shoulder |
| PWM_4 | Front Right Upper-Limb |
| PWM_5 | Front Right Leg (Lower-Limb) |
| PWM_6 | Rear Left Shoulder |
| PWM_7 | Rear Left Upper-Limb |
| PWM_8 | Rear Left Leg (Lower-Limb) |
| PWM_9 | Rear Right Shoulder |
| PWM_10 | Rear Right Upper-Limb |
| PWM_11 | Rear Right Leg (Lower-limb) |

Some files were not shown because too many files have changed in this diff Show More