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

🎨 format

Browse Source
This commit is contained in:
Rune Harlyk
2025-10-11 10:42:32 +02:00
parent 4d51b9f556
commit 91a7b170fe
139 changed files with 6645 additions and 6317 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/.eslintrc.cjs
+1 -1
View File
@@ -28,4 +28,4 @@ module.exports = {
}
}
]
};
}
app/.prettierrc
+1 -1
View File
@@ -1,7 +1,7 @@
{
"useTabs": false,
"singleQuote": true,
"tabWidth": 2,
"tabWidth": 4,
"trailingComma": "none",
"arrowParens": "avoid",
"experimentalTernaries": true,
app/.vscode/extensions.json
Vendored
+5 -1
View File
@@ -1,3 +1,7 @@
{
"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"]
"recommendations": [
"svelte.svelte-vscode",
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode"
]
}
app/env.d.ts
Vendored
+4 -4
View File
@@ -1,8 +1,8 @@
declare module "app-env" {
declare module 'app-env' {
interface ENV {
VITE_USE_HOST_NAME: boolean;
VITE_USE_HOST_NAME: boolean
}
const appEnv: ENV;
export default appEnv;
const appEnv: ENV
export default appEnv
}
app/playwright.config.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import type { PlaywrightTestConfig } from '@playwright/test'
const config: PlaywrightTestConfig = {
webServer: {
@@ -7,6 +7,6 @@ const config: PlaywrightTestConfig = {
},
testDir: 'tests/integration',
testMatch: /(.+\.)?(test|spec)\.[jt]s/
};
}
export default config;
export default config
app/src/app.css
+8
View File
@@ -23,6 +23,14 @@
--base-content: oklch(0.3 0.012 256);
}
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
#nipple_0_0,
#nipple_1_1 {
z-index: 10 !important;
app/src/app.d.ts
Vendored
+1 -1
View File
@@ -10,4 +10,4 @@ declare global {
}
}
export {};
export {}
app/src/app.html
+4 -1
View File
@@ -3,7 +3,10 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/logo512.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
%sveltekit.head%
app/src/index.test.ts
-7
View File
@@ -1,7 +0,0 @@
import { describe, it, expect } from 'vitest';
describe('sum test', () => {
it('adds 1 + 2 to equal 3', () => {
expect(1 + 2).toBe(3);
});
});
app/src/lib/api.ts
+24 -25
View File
@@ -1,22 +1,22 @@
import { get } from 'svelte/store';
import { Err, Ok, type Result } from './utilities';
import { location } from './stores';
import { get } from 'svelte/store'
import { Err, Ok, type Result } from './utilities'
import { location } from './stores'
export namespace api {
export function get<TResponse>(endpoint: string, params?: RequestInit) {
return sendRequest<TResponse>(endpoint, 'GET', null, params);
return sendRequest<TResponse>(endpoint, 'GET', null, params)
}
export function post<TResponse>(endpoint: string, data?: unknown) {
return sendRequest<TResponse>(endpoint, 'POST', data);
return sendRequest<TResponse>(endpoint, 'POST', data)
}
export function put<TResponse>(endpoint: string, data?: unknown) {
return sendRequest<TResponse>(endpoint, 'PUT', data);
return sendRequest<TResponse>(endpoint, 'PUT', data)
}
export function remove<TResponse>(endpoint: string) {
return sendRequest<TResponse>(endpoint, 'DELETE');
return sendRequest<TResponse>(endpoint, 'DELETE')
}
}
@@ -26,8 +26,8 @@ async function sendRequest<TResponse>(
data?: unknown,
params?: RequestInit
): Promise<Result<TResponse, Error>> {
endpoint = resolveUrl(endpoint);
const body = data !== null && typeof data !== 'undefined' ? JSON.stringify(data) : undefined;
endpoint = resolveUrl(endpoint)
const body = data !== null && typeof data !== 'undefined' ? JSON.stringify(data) : undefined
const request = {
...params,
@@ -38,43 +38,42 @@ async function sendRequest<TResponse>(
Authorization: 'Basic',
'Content-Type': 'application/json'
}
};
}
let response;
let response
try {
response = await fetch(endpoint, request);
response = await fetch(endpoint, request)
} catch (error) {
return Err.new(new Error(), 'An error has occurred');
return Err.new(new Error(), 'An error has occurred')
}
const isResponseOk = response.status >= 200 && response.status < 400;
const isResponseOk = response.status >= 200 && response.status < 400
if (!isResponseOk) {
if (response.status === 401) {
return Err.new(new ApiError(response), 'User was not authorized');
return Err.new(new ApiError(response), 'User was not authorized')
}
return Err.new(new ApiError(response), 'An error has occurred');
return Err.new(new ApiError(response), 'An error has occurred')
}
const contentType =
response.headers.get('Content-Type') ?? response.headers.get('Content-Type');
const contentType = response.headers.get('Content-Type') ?? response.headers.get('Content-Type')
if (contentType && contentType.includes('application/json')) {
const data = await response.json();
return Ok.new(data as TResponse);
const data = await response.json()
return Ok.new(data as TResponse)
} else {
// Handle empty object as response
return Ok.new(null as TResponse);
return Ok.new(null as TResponse)
}
}
function resolveUrl(url: string): string {
if (url.startsWith('http') || !get(location)) return url;
const protocol = window.location.protocol;
return `${protocol}//${get(location)}${url.startsWith('/') ? '' : '/'}${url}`;
if (url.startsWith('http') || !get(location)) return url
const protocol = window.location.protocol
return `${protocol}//${get(location)}${url.startsWith('/') ? '' : '/'}${url}`
}
export class ApiError extends Error {
constructor(public readonly response: Response) {
super(`${response.status}`);
super(`${response.status}`)
}
}
app/src/lib/components/Collapsible.svelte
+7 -7
View File
@@ -1,18 +1,18 @@
<script lang="ts">
import { slide } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
import { Down } from './icons';
import { slide } from 'svelte/transition'
import { cubicOut } from 'svelte/easing'
import { Down } from './icons'
function openCollapsible() {
open = !open;
open = !open
if (open) {
opened();
opened()
} else {
closed();
closed()
}
}
let { icon, title, children, open, opened, closed, class: klass } = $props();
let { icon, title, children, open, opened, closed, class: klass } = $props()
</script>
<div class="{klass} relative grid w-full max-w-2xl self-center overflow-hidden">
app/src/lib/components/ConfirmDialog.svelte
+8 -3
View File
@@ -23,15 +23,20 @@
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
transition:fly={{ y: 50 }}
use:exitBeforeEnter
use:focusTrap>
use:focusTrap
>
<div
class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
>
<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
<div class="divider my-2"></div>
<p class="text-base-content mb-1 text-start">{message}</p>
<div class="divider my-2"></div>
<div class="flex justify-end gap-2">
<button class="btn btn-error inline-flex items-center" onclick={() => modals.close()}>
<button
class="btn btn-error inline-flex items-center"
onclick={() => modals.close()}
>
<labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
</button>
<button class="btn btn-primary inline-flex items-center" onclick={onConfirm}>
app/src/lib/components/GithubUpdateDialog.svelte
+30 -30
View File
@@ -1,61 +1,61 @@
<script lang="ts">
import { focusTrap } from 'svelte-focus-trap';
import { fly } from 'svelte/transition';
import { telemetry } from '$lib/stores/telemetry';
import { Cancel } from './icons';
import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals';
import { focusTrap } from 'svelte-focus-trap'
import { fly } from 'svelte/transition'
import { telemetry } from '$lib/stores/telemetry'
import { Cancel } from './icons'
import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals'
// provided by <Modals />
interface Props {
isOpen: boolean;
isOpen: boolean
}
let { isOpen }: Props = $props();
let { isOpen }: Props = $props()
let updating = $state(true);
let updating = $state(true)
let progress = $state(0);
let progress = $state(0)
$effect(() => {
if ($telemetry.download_ota.status == 'progress') {
progress = $telemetry.download_ota.progress;
progress = $telemetry.download_ota.progress
}
});
})
$effect(() => {
if ($telemetry.download_ota.status == 'error') {
updating = false;
updating = false
}
});
})
let message = $state('Preparing ...');
let message = $state('Preparing ...')
$effect(() => {
if ($telemetry.download_ota.status == 'progress') {
message = 'Downloading ...';
message = 'Downloading ...'
} else if ($telemetry.download_ota.status == 'error') {
message = $telemetry.download_ota.error;
message = $telemetry.download_ota.error
} else if ($telemetry.download_ota.status == 'finished') {
message = 'Restarting ...';
progress = 0;
message = 'Restarting ...'
progress = 0
// Reload page after 5 sec
setTimeout(() => {
modals.closeAll();
location.reload();
}, 5000);
modals.closeAll()
location.reload()
}, 5000)
}
});
})
onBeforeClose(() => {
if (updating) {
// prevents modal from closing
return false;
return false
} else {
$telemetry.download_ota.status = 'idle';
$telemetry.download_ota.error = '';
$telemetry.download_ota.progress = 0;
return true;
$telemetry.download_ota.status = 'idle'
$telemetry.download_ota.error = ''
$telemetry.download_ota.progress = 0
return true
}
});
})
</script>
{#if isOpen}
@@ -89,8 +89,8 @@
class="btn btn-warning text-warning-content inline-flex flex-none items-center"
disabled={updating}
onclick={() => {
modals.closeAll();
location.reload();
modals.closeAll()
location.reload()
}}
>
<Cancel class="mr-2 h-5 w-5" /><span>Close</span></button
app/src/lib/components/InfoDialog.svelte
+13 -10
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import { focusTrap } from 'svelte-focus-trap';
import { fly } from 'svelte/transition';
import { Check } from './icons';
import { exitBeforeEnter, type ModalProps } from 'svelte-modals';
import { focusTrap } from 'svelte-focus-trap'
import { fly } from 'svelte/transition'
import { Check } from './icons'
import { exitBeforeEnter, type ModalProps } from 'svelte-modals'
let {
isOpen,
@@ -10,9 +10,9 @@
message,
onDismiss,
labels = {
dismiss: { label: 'Dismiss', icon: Check },
},
}: ModalProps = $props();
dismiss: { label: 'Dismiss', icon: Check }
}
}: ModalProps = $props()
</script>
{#if isOpen}
@@ -21,9 +21,11 @@
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
transition:fly={{ y: 50 }}
use:exitBeforeEnter
use:focusTrap>
use:focusTrap
>
<div
class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg"
>
<h2 class="text-base-content text-start text-2xl font-bold">{title}</h2>
<div class="divider my-2"></div>
<p class="text-base-content mb-1 text-start">{message}</p>
@@ -31,7 +33,8 @@
<div class="flex justify-end gap-2">
<button
class="btn btn-warning text-warning-content inline-flex items-center"
onclick={onDismiss}>
onclick={onDismiss}
>
<labels.dismiss.icon class="mr-2 h-5 w-5" /><span>{labels.dismiss.label}</span>
</button>
</div>
app/src/lib/components/OrientationIndicator.svelte
+39 -39
View File
@@ -1,15 +1,15 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import * as THREE from 'three';
import { imu } from '$lib/stores/imu';
import SceneBuilder from '$lib/sceneBuilder';
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
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()
@@ -18,59 +18,59 @@
.addOrbitControls(1, 10, false)
.addAmbientLight({ color: 0x404040, intensity: 0.5 })
.addDirectionalLight({ color: 0xffffff, intensity: 3, x: 10, y: 20, z: 7 })
.fillParent();
.fillParent()
const geometry = new THREE.BoxGeometry(1, 1, 1);
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);
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;
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);
});
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();
};
sceneBuilder.startRenderLoop()
}
const updateOrientation = () => {
if (!cube) return;
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;
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();
});
initThreeJS()
})
onDestroy(() => {
sceneBuilder?.renderer?.dispose();
});
sceneBuilder?.renderer?.dispose()
})
$effect(() => {
if ($imu) {
updateOrientation();
updateOrientation()
}
});
})
</script>
<div class="h-60 w-60 border-2 border-base-300 rounded-md">
app/src/lib/components/SettingsCard.svelte
+25 -9
View File
@@ -11,14 +11,23 @@
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,
right
}: Props = $props()
</script>
{#if collapsible}
<div
class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
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">
class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
>
<span class="inline-flex items-baseline">
{@render icon?.()}
{@render title?.()}
@@ -27,26 +36,33 @@
class="btn btn-circle btn-ghost btn-sm"
onclick={() => {
open = !open
}}>
}}
>
<Down
class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open ?
class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {(
open
) ?
'rotate-180'
: ''}" />
: ''}"
/>
</button>
</div>
{#if open}
<div
class="flex flex-col gap-2 p-4 pt-0"
transition:slide|local={{ duration: 300, easing: cubicOut }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
{@render children?.()}
</div>
{/if}
</div>
{:else}
<div
class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg">
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">
class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
>
<span class="inline-flex items-baseline">
{@render icon?.()}
{@render title?.()}
app/src/lib/components/Spinner.svelte
+1 -2
View File
@@ -1,6 +1,5 @@
<script lang="ts">
import { Loader } from "./icons";
import { Loader } from './icons'
</script>
<div class="flex h-full w-full flex-col items-center justify-center p-6">
app/src/lib/components/Stream.svelte
+4 -4
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import { location } from '$lib/stores';
import { onDestroy } from 'svelte'
import { location } from '$lib/stores'
let source = $state(`${$location}/api/camera/stream`);
let source = $state(`${$location}/api/camera/stream`)
onDestroy(() => (source = '#'));
onDestroy(() => (source = '#'))
</script>
<div class="w-full h-full">
app/src/lib/components/Toast.svelte
+10 -8
View File
@@ -1,22 +1,24 @@
<script>
import { flip } from 'svelte/animate';
import { fly } from 'svelte/transition';
import { notifications } from '$lib/components/toasts/notifications';
import { error, info, success, warning } from './icons';
import { flip } from 'svelte/animate'
import { fly } from 'svelte/transition'
import { notifications } from '$lib/components/toasts/notifications'
import { error, info, success, warning } from './icons'
/** @type {{theme?: any, icon?: any}} */
let { theme = {
let {
theme = {
error: 'alert-error',
success: 'alert-success',
warning: 'alert-warning',
info: 'alert-info'
}, icon = {
},
icon = {
error: error,
success: success,
warning: warning,
info: info
} } = $props();
}
} = $props()
</script>
<div class="toast toast-end mr-4">
app/src/lib/components/Visualization.svelte
+9 -2
View File
@@ -166,7 +166,10 @@
const updateAngles = (name: string, angle: number) => {
modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
Throttler.throttle(() => servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num))), 100)
Throttler.throttle(
() => servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num))),
100
)
}
const createScene = async () => {
@@ -242,7 +245,11 @@
robot.position.z = smooth(robot.position.z, -settings.xm, 0.1)
robot.position.x = smooth(robot.position.x, -settings.zm, 0.1)
robot.rotation.z = smooth(robot.rotation.z, degToRad(-settings.phi + $mpu.heading + 90), 0.1)
robot.rotation.z = smooth(
robot.rotation.z,
degToRad(-settings.phi + $mpu.heading + 90),
0.1
)
robot.rotation.y = smooth(robot.rotation.y, degToRad(settings.omega), 0.1)
robot.rotation.x = smooth(robot.rotation.x, degToRad(settings.psi - 90), 0.1)
}
app/src/lib/components/input/InputPassword.svelte
+8 -8
View File
@@ -1,19 +1,19 @@
<script lang="ts">
import { MdiEyeOffOutline, MdiEyeOutline } from "../icons";
import { MdiEyeOffOutline, MdiEyeOutline } from '../icons'
interface Props {
show?: boolean;
value?: string;
id?: string;
show?: boolean
value?: string
id?: string
}
let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props();
let { show = $bindable(false), value = $bindable(''), id = '' }: Props = $props()
let type = $derived(show ? 'text' : 'password');
let type = $derived(show ? 'text' : 'password')
const handleInput = (e: any) => value = e.target.value
const handleInput = (e: any) => (value = e.target.value)
const togglePassword = () => show = !show
const togglePassword = () => (show = !show)
</script>
<label class="input input-bordered flex items-center gap-2">
app/src/lib/components/input/VerticalSlider.svelte
+2 -1
View File
@@ -24,7 +24,8 @@
{max}
{step}
bind:value
{...rest} />
{...rest}
/>
<style>
input[type='range']::-webkit-slider-runnable-track {
app/src/lib/components/input/index.ts
+2 -2
View File
@@ -1,2 +1,2 @@
export { default as PasswordInput } from './InputPassword.svelte';
export { default as VerticalSlider } from './VerticalSlider.svelte';
export { default as PasswordInput } from './InputPassword.svelte'
export { default as VerticalSlider } from './VerticalSlider.svelte'
app/src/lib/components/layout/Widget.svelte
+2 -2
View File
@@ -1,9 +1,9 @@
<script lang="ts">
interface Props {
children?: import('svelte').Snippet;
children?: import('svelte').Snippet
}
let { children }: Props = $props();
let { children }: Props = $props()
</script>
<div class="box-border overflow-hidden flex-1">
app/src/lib/components/layout/WidgetContainer.svelte
+10 -9
View File
@@ -1,17 +1,17 @@
<script lang="ts">
import WidgetContainer from './WidgetContainer.svelte';
import WidgetContainer from './WidgetContainer.svelte'
import {
WidgetComponents,
type WidgetContainerConfig,
isWidgetConfig,
} from '$lib/stores/application';
import Widget from './Widget.svelte';
isWidgetConfig
} from '$lib/stores/application'
import Widget from './Widget.svelte'
interface Props {
container: WidgetContainerConfig;
container: WidgetContainerConfig
}
let { container }: Props = $props();
let { container }: Props = $props()
</script>
<div class="w-full h-full flex flex-col overflow-hidden">
@@ -19,7 +19,8 @@
class="flex w-full h-full"
class:flex-row={container.layout === 'column'}
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>
{#if isWidgetConfig(widget)}
@@ -32,8 +33,8 @@
{#if index !== container.widgets.length - 1}
<div
class="divider bg-base-300 m-0"
class:divider-horizontal={container.layout === 'column'}>
</div>
class:divider-horizontal={container.layout === 'column'}
></div>
{/if}
{/each}
</div>
app/src/lib/components/menu/GithubButton.svelte
+3 -3
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import { Github } from "../icons";
import { Github } from '../icons'
interface Props {
github: any;
github: any
}
let { github }: Props = $props();
let { github }: Props = $props()
</script>
{#if github.active}
app/src/lib/components/menu/LogoButton.svelte
+3 -6
View File
@@ -1,14 +1,11 @@
<script>
import logo from '$lib/assets/logo512.png';
import logo from '$lib/assets/logo512.png'
/** @type {{appName: any}} */
let { appName } = $props();
let { appName } = $props()
</script>
<a
href="/"
class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]"
>
<a href="/" class="rounded-box mb-4 flex items-center hover:scale-[1.02] active:scale-[0.98]">
<img src={logo} alt="Logo" class="h-12 w-12" />
<h1 class="px-4 text-2xl font-bold">{appName}</h1>
</a>
app/src/lib/components/menu/Menu.svelte
+6 -2
View File
@@ -145,7 +145,10 @@
title: 'Firmware Update',
icon: Update,
href: withBase('/system/update'),
feature: $features.ota || $features.upload_firmware || $features.download_firmware
feature:
$features.ota ||
$features.upload_firmware ||
$features.download_firmware
}
]
}
@@ -181,7 +184,8 @@
{menuItems}
select={updateMenu}
class="grow flex-nowrap overflow-y-auto overflow-x-hidden"
level="0" />
level="0"
/>
<div class="divider my-0"></div>
app/src/lib/components/menu/MenuList.svelte
+8 -2
View File
@@ -27,7 +27,12 @@
{menuItem.title}
</summary>
<div class="pl-4">
<MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
<MenuList
menuItems={menuItem.submenu}
level={level + 1}
{select}
class={klass}
/>
</div>
</details>
{:else}
@@ -37,7 +42,8 @@
class:bg-base-100={menuItem.active}
class:text-lg={level === 0}
class:text-md={level === 1}
onclick={() => selectMenuItem(menuItem.title)}>
onclick={() => selectMenuItem(menuItem.title)}
>
<menuItem.icon class="h-6 w-6" />
{menuItem.title}
</a>
app/src/lib/components/statusbar/FullscreenButton.svelte
+3 -3
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import { isFullscreen, toggleFullscreen } from '$lib/stores';
import { MdiFullscreenExit, MdiFullscreen } from '../icons';
import { isFullscreen, toggleFullscreen } from '$lib/stores'
import { MdiFullscreenExit, MdiFullscreen } from '../icons'
const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen);
const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen)
</script>
<button onclick={toggleFullscreen}>
app/src/lib/components/statusbar/RSSIIndicator.svelte
+12 -12
View File
@@ -1,26 +1,26 @@
<script lang="ts">
import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from "../icons";
import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from '../icons'
interface Props {
showDBm?: boolean;
rssi?: number;
showDBm?: boolean
rssi?: number
}
let { showDBm = false, rssi = 0 }: Props = $props();
let { showDBm = false, rssi = 0 }: Props = $props()
const getWiFiIcon = () => {
if (rssi === 0) return WifiOff;
if (rssi >= -55) return WiFi;
if (rssi >= -75) return WiFi2;
if (rssi >= -85) return WiFi1;
return WiFi0;
};
if (rssi === 0) return WifiOff
if (rssi >= -55) return WiFi
if (rssi >= -75) return WiFi2
if (rssi >= -85) return WiFi1
return WiFi0
}
const SvelteComponent = $derived(getWiFiIcon());
const SvelteComponent = $derived(getWiFiIcon())
</script>
<div class="indicator">
<div class="tooltip tooltip-left" data-tip={rssi + " dBm"}>
<div class="tooltip tooltip-left" data-tip={rssi + ' dBm'}>
{#if showDBm}
<span class="indicator-item indicator-start badge badge-accent badge-outline badge-xs">
{rssi} dBm
app/src/lib/components/statusbar/SleepButton.svelte
+11 -11
View File
@@ -1,13 +1,13 @@
<script lang="ts">
import { useFeatureFlags } from '$lib/stores';
import { modals } from 'svelte-modals';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import { api } from '$lib/api';
import { Cancel, Power } from '../icons';
import { useFeatureFlags } from '$lib/stores'
import { modals } from 'svelte-modals'
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
import { api } from '$lib/api'
import { Cancel, Power } from '../icons'
const features = useFeatureFlags();
const features = useFeatureFlags()
const postSleep = async () => await api.post('/api/system/sleep');
const postSleep = async () => await api.post('/api/system/sleep')
const confirmSleep = () => {
modals.open(ConfirmDialog, {
@@ -18,11 +18,11 @@
confirm: { label: 'Switch Off', icon: Power }
},
onConfirm: () => {
modals.close();
postSleep();
modals.close()
postSleep()
}
})
}
});
};
</script>
{#if $features.sleep}
app/src/lib/components/statusbar/StopButton.svelte
+3 -4
View File
@@ -1,10 +1,9 @@
<script lang="ts">
import { mode, modes } from "$lib/stores";
import { mode, modes } from '$lib/stores'
const deactivate = async () => {
mode.set(modes.indexOf('deactivated'));
};
mode.set(modes.indexOf('deactivated'))
}
</script>
<button onclick={deactivate} class="bg-error text-white btn rounded-none">STOP</button>
app/src/lib/components/statusbar/ThemeButton.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { MdiWeatherSunny, MdiMoonAndStars } from "../icons";
import { MdiWeatherSunny, MdiMoonAndStars } from '../icons'
</script>
<label class="swap swap-rotate">
app/src/lib/components/statusbar/TopBar.svelte
+2 -2
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import {Hamburger} from '../icons'
import { Hamburger } from '../icons'
</script>
<div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
<div class="flex gap-2 p-2">
<a href="/">
<Hamburger class="h-8 w-8"/>
<Hamburger class="h-8 w-8" />
</a>
</div>
</div>
app/src/lib/components/statusbar/UpdateIndicator.svelte
+4 -2
View File
@@ -98,9 +98,11 @@
<div class="indicator flex-none">
<button
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">
class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"
>
{firmwareVersion}
</span>
<Firmware class="h-7 w-7" />
app/src/lib/components/statusbar/ViewSelector.svelte
+3 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { selectedView, views } from "$lib/stores/application";
import Selector from "../widget/Selector.svelte";
import { selectedView, views } from '$lib/stores/application'
import Selector from '../widget/Selector.svelte'
</script>
<Selector bind:selectedOption={$selectedView} options={$views.map((v) => v.name)} />
<Selector bind:selectedOption={$selectedView} options={$views.map(v => v.name)} />
app/src/lib/components/toasts/Toast.svelte
+10 -8
View File
@@ -1,22 +1,24 @@
<script>
import { flip } from 'svelte/animate';
import { fly } from 'svelte/transition';
import { notifications } from '$lib/components/toasts/notifications';
import { error, info, success, warning } from '../icons';
import { flip } from 'svelte/animate'
import { fly } from 'svelte/transition'
import { notifications } from '$lib/components/toasts/notifications'
import { error, info, success, warning } from '../icons'
/** @type {{theme?: any, icon?: any}} */
let { theme = {
let {
theme = {
error: 'alert-error',
success: 'alert-success',
warning: 'alert-warning',
info: 'alert-info'
}, icon = {
},
icon = {
error: error,
success: success,
warning: warning,
info: info
} } = $props();
}
} = $props()
</script>
<div class="toast toast-end mr-4 z-20">
app/src/lib/components/widget/ChartWidget.svelte
+37 -36
View File
@@ -1,22 +1,22 @@
<script lang="ts">
import { daisyColor } from '$lib/utilities';
import { Chart, registerables } from 'chart.js';
import { onMount } from 'svelte';
import { cubicOut } from 'svelte/easing';
import { slide } from 'svelte/transition';
import { daisyColor } from '$lib/utilities'
import { Chart, registerables } from 'chart.js'
import { onMount } from 'svelte'
import { cubicOut } from 'svelte/easing'
import { slide } from 'svelte/transition'
let chartElement: HTMLCanvasElement;
let chart: Chart;
let chartElement: HTMLCanvasElement
let chart: Chart
interface Props {
label: any;
data: number[];
title: any;
label: any
data: number[]
title: any
}
let { label, data, title }: Props = $props();
let { label, data, title }: Props = $props()
Chart.register(...registerables);
Chart.register(...registerables)
onMount(() => {
chart = new Chart(chartElement, {
@@ -30,36 +30,36 @@
backgroundColor: daisyColor('--p', 50),
borderWidth: 2,
data,
yAxisID: 'y',
},
],
yAxisID: 'y'
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: {
display: true,
display: true
},
tooltip: {
mode: 'index',
intersect: false,
},
intersect: false
}
},
elements: {
point: {
radius: 0,
},
radius: 0
}
},
scales: {
x: {
grid: {
color: daisyColor('--bc', 10),
color: daisyColor('--bc', 10)
},
ticks: {
color: daisyColor('--bc'),
color: daisyColor('--bc')
},
display: false,
display: false
},
y: {
type: 'linear',
@@ -69,33 +69,34 @@
color: daisyColor('--bc'),
font: {
size: 16,
weight: 'bold',
},
weight: 'bold'
}
},
position: 'left',
min: 0,
max: 100,
grid: { color: daisyColor('--bc', 10) },
ticks: {
color: daisyColor('--bc'),
color: daisyColor('--bc')
},
border: { color: daisyColor('--bc', 10) },
},
},
},
});
border: { color: daisyColor('--bc', 10) }
}
}
}
})
setInterval(() => {
chart.data.labels = data;
chart.data.datasets[0].data = data;
}, 500);
});
chart.data.labels = data
chart.data.datasets[0].data = data
}, 500)
})
</script>
<div class="w-full h-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-60"
transition:slide|local={{ duration: 300, easing: cubicOut }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<canvas bind:this={chartElement}></canvas>
</div>
</div>
app/src/lib/components/widget/Selector.svelte
+7 -6
View File
@@ -1,18 +1,19 @@
<script lang="ts">
interface Props {
options?: string[];
selectedOption?: string;
change?: () => void;
[key: string]: any;
options?: string[]
selectedOption?: string
change?: () => void
[key: string]: any
}
let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props();
let { options = [], selectedOption = $bindable(''), ...rest }: Props = $props()
</script>
<select
bind:value={selectedOption}
{...rest}
class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}">
class="select select-bordered select-sm lg:select-md max-w-xs {rest.class || ''}"
>
{#each options as option}
<option value={option}>{option}</option>
{/each}
app/src/lib/kinematic.ts
+11 -4
View File
@@ -101,11 +101,17 @@ export default class Kinematic {
pz = bz - mz
const lx =
this.invMountRot[0][0] * px + this.invMountRot[0][1] * py + this.invMountRot[0][2] * pz
this.invMountRot[0][0] * px +
this.invMountRot[0][1] * py +
this.invMountRot[0][2] * pz
const ly =
this.invMountRot[1][0] * px + this.invMountRot[1][1] * py + this.invMountRot[1][2] * pz
this.invMountRot[1][0] * px +
this.invMountRot[1][1] * py +
this.invMountRot[1][2] * pz
const lz =
this.invMountRot[2][0] * px + this.invMountRot[2][1] * py + this.invMountRot[2][2] * pz
this.invMountRot[2][0] * px +
this.invMountRot[2][1] * py +
this.invMountRot[2][2] * pz
const xLocal = i % 2 === 1 ? -lx : lx
return this.legIK(xLocal, ly, lz)
@@ -118,7 +124,8 @@ export default class Kinematic {
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)
(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]
app/src/lib/services/file-service.ts
+31 -32
View File
@@ -1,54 +1,53 @@
import { Result } from '$lib/utilities/result';
import { browser } from '$app/environment';
import { Result } from '$lib/utilities/result'
import { browser } from '$app/environment'
class FileService {
private dbPromise: Promise<Result<IDBDatabase, string>> | null = browser
? this.openDatabase()
: null;
private dbPromise: Promise<Result<IDBDatabase, string>> | null =
browser ? this.openDatabase() : null
private async openDatabase(): Promise<Result<IDBDatabase, string>> {
return new Promise((resolve) => {
const request = indexedDB.open('fileStorageDB', 1);
return new Promise(resolve => {
const request = indexedDB.open('fileStorageDB', 1)
request.onupgradeneeded = () => {
request.result.createObjectStore('files');
};
request.onsuccess = () => resolve(Result.ok(request.result));
request.onerror = () => resolve(Result.err('Error opening database'));
});
request.result.createObjectStore('files')
}
request.onsuccess = () => resolve(Result.ok(request.result))
request.onerror = () => resolve(Result.err('Error opening database'))
})
}
private async getStore(mode: IDBTransactionMode): Promise<Result<IDBObjectStore, string>> {
if (!browser || !this.dbPromise)
return Result.err('Not running in browser or DB not initialized');
const dbResult = await this.dbPromise;
if (dbResult.isErr()) return Result.err('Database not initialized');
const store = dbResult.inner.transaction('files', mode).objectStore('files');
return Result.ok(store);
return Result.err('Not running in browser or DB not initialized')
const dbResult = await this.dbPromise
if (dbResult.isErr()) return Result.err('Database not initialized')
const store = dbResult.inner.transaction('files', mode).objectStore('files')
return Result.ok(store)
}
public async saveFile(key: string, file: Uint8Array): Promise<Result<IDBValidKey, string>> {
const storeResult = await this.getStore('readwrite');
if (storeResult.isErr()) return Result.err('Failed to access store');
const storeResult = await this.getStore('readwrite')
if (storeResult.isErr()) return Result.err('Failed to access store')
return new Promise((resolve) => {
const request = storeResult.inner.put(file, key);
request.onsuccess = () => resolve(Result.ok(request.result));
request.onerror = () => resolve(Result.err('Failed to save file'));
});
return new Promise(resolve => {
const request = storeResult.inner.put(file, key)
request.onsuccess = () => resolve(Result.ok(request.result))
request.onerror = () => resolve(Result.err('Failed to save file'))
})
}
public async getFile(key: string): Promise<Result<Uint8Array | undefined, string>> {
const storeResult = await this.getStore('readonly');
if (storeResult.isErr()) return Result.err('Failed to access store');
const storeResult = await this.getStore('readonly')
if (storeResult.isErr()) return Result.err('Failed to access store')
return new Promise((resolve) => {
const request = storeResult.inner.get(key);
return new Promise(resolve => {
const request = storeResult.inner.get(key)
request.onsuccess = () =>
resolve(request.result ? Result.ok(request.result) : Result.err('File not found'));
request.onerror = () => resolve(Result.err('Failed to retrieve file'));
});
resolve(request.result ? Result.ok(request.result) : Result.err('File not found'))
request.onerror = () => resolve(Result.err('Failed to retrieve file'))
})
}
}
export default browser ? new FileService() : null;
export default browser ? new FileService() : null
app/src/lib/services/index.ts
+2 -2
View File
@@ -1,2 +1,2 @@
export { default as fileService } from './file-service';
export { default as resultService } from './result-service';
export { default as fileService } from './file-service'
export { default as resultService } from './result-service'
app/src/lib/services/result-service.ts
+10 -10
View File
@@ -1,19 +1,19 @@
import { errorLogs, latestErrorLog } from '$lib/stores';
import type { Result } from '$lib/utilities';
import { errorLogs, latestErrorLog } from '$lib/stores'
import type { Result } from '$lib/utilities'
class ResultService {
public handleResult(result: Result<unknown, string>, tag?: string) {
if (result.isErr()) {
const errorLogEntry = { tag, message: result.inner, exception: result.exception };
latestErrorLog.set(errorLogEntry);
errorLogs.update((entries) => {
entries.push(errorLogEntry);
return entries;
});
const errorLogEntry = { tag, message: result.inner, exception: result.exception }
latestErrorLog.set(errorLogEntry)
errorLogs.update(entries => {
entries.push(errorLogEntry)
return entries
})
}
return result;
return result
}
}
export default new ResultService();
export default new ResultService()
app/src/lib/stores/analytics.ts
+31 -17
View File
@@ -1,5 +1,5 @@
import { type Analytics } from '$lib/types/models';
import { writable } from 'svelte/store';
import { type Analytics } from '$lib/types/models'
import { writable } from 'svelte/store'
let analytics_data = {
uptime: <number[]>[],
@@ -14,20 +14,22 @@ let analytics_data = {
cpu0_usage: <number[]>[],
cpu1_usage: <number[]>[],
cpu_usage: <number[]>[]
};
}
const maxAnalyticsData = 100;
const maxAnalyticsData = 100
function createAnalytics() {
const { subscribe, update } = writable(analytics_data);
const { subscribe, update } = writable(analytics_data)
return {
subscribe,
addData: (content: Analytics) => {
update((analytics_data) => ({
update(analytics_data => ({
...analytics_data,
uptime: [...analytics_data.uptime, content.uptime].slice(-maxAnalyticsData),
free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(-maxAnalyticsData),
free_heap: [...analytics_data.free_heap, content.free_heap / 1000].slice(
-maxAnalyticsData
),
total_heap: [...analytics_data.total_heap, content.total_heap / 1000].slice(
-maxAnalyticsData
),
@@ -35,21 +37,33 @@ function createAnalytics() {
...analytics_data.used_heap,
(content.total_heap - content.free_heap) / 1000
].slice(-maxAnalyticsData),
min_free_heap: [...analytics_data.min_free_heap, content.min_free_heap / 1000].slice(
min_free_heap: [
...analytics_data.min_free_heap,
content.min_free_heap / 1000
].slice(-maxAnalyticsData),
max_alloc_heap: [
...analytics_data.max_alloc_heap,
content.max_alloc_heap / 1000
].slice(-maxAnalyticsData),
fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(
-maxAnalyticsData
),
max_alloc_heap: [...analytics_data.max_alloc_heap, content.max_alloc_heap / 1000].slice(
fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(
-maxAnalyticsData
),
core_temp: [...analytics_data.core_temp, content.core_temp].slice(
-maxAnalyticsData
),
cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(
-maxAnalyticsData
),
cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(
-maxAnalyticsData
),
fs_used: [...analytics_data.fs_used, content.fs_used / 1000].slice(-maxAnalyticsData),
fs_total: [...analytics_data.fs_total, content.fs_total / 1000].slice(-maxAnalyticsData),
core_temp: [...analytics_data.core_temp, content.core_temp].slice(-maxAnalyticsData),
cpu0_usage: [...analytics_data.cpu0_usage, content.cpu0_usage].slice(-maxAnalyticsData),
cpu1_usage: [...analytics_data.cpu1_usage, content.cpu1_usage].slice(-maxAnalyticsData),
cpu_usage: [...analytics_data.cpu_usage, content.cpu_usage].slice(-maxAnalyticsData)
}));
}))
}
}
};
}
export const analytics = createAnalytics();
export const analytics = createAnalytics()
app/src/lib/stores/application.ts
+19 -19
View File
@@ -1,36 +1,36 @@
import { persistentStore } from '$lib/utilities';
import { get, type Writable } from 'svelte/store';
import { persistentStore } from '$lib/utilities'
import { get, type Writable } from 'svelte/store'
import Visualization from '$lib/components/Visualization.svelte';
import Stream from '$lib/components/Stream.svelte';
import ChartWidget from '$lib/components/widget/ChartWidget.svelte';
import Visualization from '$lib/components/Visualization.svelte'
import Stream from '$lib/components/Stream.svelte'
import ChartWidget from '$lib/components/widget/ChartWidget.svelte'
export interface WidgetConfig {
id: string | number;
component: keyof typeof WidgetComponents;
props?: Record<string, any>;
id: string | number
component: keyof typeof WidgetComponents
props?: Record<string, any>
}
export interface WidgetContainerConfig {
id: string | number;
layout?: 'row' | 'column' | 'wrap';
header?: string;
widgets: Array<WidgetConfig | WidgetContainerConfig>;
id: string | number
layout?: 'row' | 'column' | 'wrap'
header?: string
widgets: Array<WidgetConfig | WidgetContainerConfig>
}
export const isWidgetConfig = (
widget: WidgetConfig | WidgetContainerConfig
): widget is WidgetConfig => 'component' in widget;
): widget is WidgetConfig => 'component' in widget
export const WidgetComponents = {
Visualization,
Stream,
ChartWidget
};
}
interface View {
name: string;
content: WidgetContainerConfig;
name: string
content: WidgetContainerConfig
}
const defaultViews: View[] = [
@@ -60,8 +60,8 @@ const defaultViews: View[] = [
]
}
}
];
]
export const views: Writable<View[]> = persistentStore('views', defaultViews);
export const views: Writable<View[]> = persistentStore('views', defaultViews)
export const selectedView = persistentStore('selected_view', get(views)[0].name);
export const selectedView = persistentStore('selected_view', get(views)[0].name)
app/src/lib/stores/fullscreen.ts
+10 -10
View File
@@ -1,24 +1,24 @@
import { writable } from 'svelte/store';
import { writable } from 'svelte/store'
export const isFullscreen = writable(false);
export const isFullscreen = writable(false)
export function toggleFullscreen() {
isFullscreen.update((state) => {
!state ? document.documentElement.requestFullscreen() : document.exitFullscreen();
return !state;
});
isFullscreen.update(state => {
!state ? document.documentElement.requestFullscreen() : document.exitFullscreen()
return !state
})
}
export function enterFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
isFullscreen.set(true);
document.documentElement.requestFullscreen()
isFullscreen.set(true)
}
}
export function exitFullscreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
isFullscreen.set(false);
document.exitFullscreen()
isFullscreen.set(false)
}
}
app/src/lib/stores/imu.ts
+12 -12
View File
@@ -1,7 +1,7 @@
import { writable } from 'svelte/store';
import type { IMU } from '$lib/types/models';
import { writable } from 'svelte/store'
import type { IMU } from '$lib/types/models'
const maxIMUData = 100;
const maxIMUData = 100
export const imu = (() => {
const { subscribe, update } = writable({
@@ -12,16 +12,16 @@ export const imu = (() => {
altitude: [] as number[],
pressure: [] as number[],
bmp_temp: [] as number[]
});
})
const addData = (content: IMU) => {
update(data => {
(Object.keys(content) as (keyof IMU)[]).forEach(key => {
data[key] = [...data[key], content[key]].slice(-maxIMUData);
});
return data;
});
};
;(Object.keys(content) as (keyof IMU)[]).forEach(key => {
data[key] = [...data[key], content[key]].slice(-maxIMUData)
})
return data
})
}
return { subscribe, addData };
})();
return { subscribe, addData }
})()
app/src/lib/stores/index.ts
+9 -9
View File
@@ -1,9 +1,9 @@
export * from './socket-store';
export * from './logging-store';
export * from './model-store';
export * from './socket';
export * from './fullscreen';
export * from './telemetry';
export * from './analytics';
export * from './featureFlags';
export * from './location-store';
export * from './socket-store'
export * from './logging-store'
export * from './model-store'
export * from './socket'
export * from './fullscreen'
export * from './telemetry'
export * from './analytics'
export * from './featureFlags'
export * from './location-store'
app/src/lib/stores/location-store.ts
+4 -4
View File
@@ -1,5 +1,5 @@
import { persistentStore } from '$lib/utilities';
import { writable } from 'svelte/store';
import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public';
import { persistentStore } from '$lib/utilities'
import { writable } from 'svelte/store'
import { PUBLIC_VITE_USE_HOST_NAME } from '$env/static/public'
export const location = PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '');
export const location = PUBLIC_VITE_USE_HOST_NAME ? writable('') : persistentStore('location', '')
app/src/lib/stores/logging-store.ts
+6 -6
View File
@@ -1,11 +1,11 @@
import { writable, type Writable } from 'svelte/store';
import { writable, type Writable } from 'svelte/store'
export interface errorLog {
message: unknown;
tag?: string;
exception?: unknown;
message: unknown
tag?: string
exception?: unknown
}
export const latestErrorLog: Writable<errorLog> = writable();
export const latestErrorLog: Writable<errorLog> = writable()
export const errorLogs: Writable<errorLog[]> = writable([]);
export const errorLogs: Writable<errorLog[]> = writable([])
app/src/lib/stores/socket-store.ts
+13 -13
View File
@@ -1,22 +1,22 @@
import { writable, type Writable } from 'svelte/store';
import { type angles } from '$lib/types/models';
import { writable, type Writable } from 'svelte/store'
import { type angles } from '$lib/types/models'
export const servoAnglesOut: Writable<number[]> = writable([
0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
]);
])
export const servoAngles: Writable<number[]> = writable([
0, 45, -90, 0, 45, -90, 0, 45, -90, 0, 45, -90
]);
export const logs = writable([] as string[]);
export const mpu = writable({ heading: 0 });
export const sonar = writable([0, 0]);
export const distances = writable({});
])
export const logs = writable([] as string[])
export const mpu = writable({ heading: 0 })
export const sonar = writable([0, 0])
export const distances = writable({})
export interface socketDataCollection {
angles: Writable<angles>;
logs: Writable<string[]>;
mpu: Writable<unknown>;
distances: Writable<unknown>;
angles: Writable<angles>
logs: Writable<string[]>
mpu: Writable<unknown>
distances: Writable<unknown>
}
export const socketData = {
@@ -24,4 +24,4 @@ export const socketData = {
logs,
mpu,
distances
};
}
app/src/lib/stores/socket.ts
+82 -82
View File
@@ -1,135 +1,135 @@
import { writable } from 'svelte/store';
import { encode, decode } from '@msgpack/msgpack';
import { writable } from 'svelte/store'
import { encode, decode } from '@msgpack/msgpack'
const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const;
type SocketEvent = (typeof socketEvents)[number];
const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const
type SocketEvent = (typeof socketEvents)[number]
type SocketMessage = [number, string?, unknown?];
type SocketMessage = [number, string?, unknown?]
let useBinary = false;
let useBinary = false
const decodeMessage = (data: string | ArrayBuffer): SocketMessage | null => {
useBinary = data instanceof ArrayBuffer;
useBinary = data instanceof ArrayBuffer
try {
if (useBinary) {
return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage;
return decode(new Uint8Array(data as ArrayBuffer)) as SocketMessage
}
return JSON.parse(data as string);
return JSON.parse(data as string)
} catch (error) {
console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`);
console.error(`Could not decode data: ${new Uint8Array(data as ArrayBuffer)} - ${error}`)
}
return null;
};
return null
}
const encodeMessage = (data: unknown) => {
try {
return useBinary ? encode(data) : JSON.stringify(data);
return useBinary ? encode(data) : JSON.stringify(data)
} catch (error) {
console.error(`Could not encode data: ${data} - ${error}`);
console.error(`Could not encode data: ${data} - ${error}`)
}
};
}
function createWebSocket() {
const listeners = new Map<string, Set<(data?: unknown) => void>>();
const { subscribe, set } = writable(false);
const reconnectTimeoutTime = 5000;
let unresponsiveTimeoutId: ReturnType<typeof setTimeout>;
let reconnectTimeoutId: ReturnType<typeof setTimeout>;
let ws: WebSocket;
let socketUrl: string | URL;
const listeners = new Map<string, Set<(data?: unknown) => void>>()
const { subscribe, set } = writable(false)
const reconnectTimeoutTime = 5000
let unresponsiveTimeoutId: ReturnType<typeof setTimeout>
let reconnectTimeoutId: ReturnType<typeof setTimeout>
let ws: WebSocket
let socketUrl: string | URL
function init(url: string | URL) {
socketUrl = url;
connect();
socketUrl = url
connect()
}
function disconnect(reason: SocketEvent, event?: Event) {
ws.close();
set(false);
clearTimeout(unresponsiveTimeoutId);
clearTimeout(reconnectTimeoutId);
listeners.get(reason)?.forEach(listener => listener(event));
reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime);
ws.close()
set(false)
clearTimeout(unresponsiveTimeoutId)
clearTimeout(reconnectTimeoutId)
listeners.get(reason)?.forEach(listener => listener(event))
reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime)
}
function connect() {
ws = new WebSocket(socketUrl);
ws.binaryType = 'arraybuffer';
ws = new WebSocket(socketUrl)
ws.binaryType = 'arraybuffer'
ws.onopen = ev => {
ping();
useBinary = true;
ping();
set(true);
clearTimeout(reconnectTimeoutId);
listeners.get('open')?.forEach(listener => listener(ev));
ping()
useBinary = true
ping()
set(true)
clearTimeout(reconnectTimeoutId)
listeners.get('open')?.forEach(listener => listener(ev))
for (const event of listeners.keys()) {
if (socketEvents.includes(event as SocketEvent)) continue;
subscribeToEvent(event);
if (socketEvents.includes(event as SocketEvent)) continue
subscribeToEvent(event)
}
}
};
ws.onmessage = frame => {
resetUnresponsiveCheck();
const message = decodeMessage(frame.data);
if (!message) return;
const [, event, payload = undefined] = message;
if (event) listeners.get(event)?.forEach(listener => listener(payload));
};
ws.onerror = ev => disconnect('error', ev);
ws.onclose = ev => disconnect('close', ev);
resetUnresponsiveCheck()
const message = decodeMessage(frame.data)
if (!message) return
const [, event, payload = undefined] = message
if (event) listeners.get(event)?.forEach(listener => listener(payload))
}
ws.onerror = ev => disconnect('error', ev)
ws.onclose = ev => disconnect('close', ev)
}
function unsubscribe(event: string, listener?: (data: unknown) => void) {
const eventListeners = listeners.get(event);
if (!eventListeners) return;
const eventListeners = listeners.get(event)
if (!eventListeners) return
if (!eventListeners.size) {
unsubscribeToEvent(event);
unsubscribeToEvent(event)
}
if (listener) {
eventListeners?.delete(listener);
eventListeners?.delete(listener)
} else {
listeners.delete(event);
listeners.delete(event)
}
}
function resetUnresponsiveCheck() {
clearTimeout(unresponsiveTimeoutId);
unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime);
clearTimeout(unresponsiveTimeoutId)
unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime)
}
function sendEvent(event: string, data: unknown) {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
send([2, event, data]);
if (!ws || ws.readyState !== WebSocket.OPEN) return
send([2, event, data])
}
function unsubscribeToEvent(event: string) {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
send([1, event]);
if (!ws || ws.readyState !== WebSocket.OPEN) return
send([1, event])
}
function subscribeToEvent(event: string) {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
send([0, event]);
if (!ws || ws.readyState !== WebSocket.OPEN) return
send([0, event])
}
function send(data: unknown) {
if (!ws || ws.readyState !== WebSocket.OPEN) return;
const serialized = encodeMessage(data);
if (!ws || ws.readyState !== WebSocket.OPEN) return
const serialized = encodeMessage(data)
if (!serialized) {
console.error('Could not serialize data:', data);
return;
console.error('Could not serialize data:', data)
return
}
ws.send(serialized);
ws.send(serialized)
}
function ping() {
const serialized = encodeMessage([4]);
const serialized = encodeMessage([4])
if (!serialized) {
console.error('Could not serialize message');
return;
console.error('Could not serialize message')
return
}
ws.send(serialized);
ws.send(serialized)
}
return {
@@ -137,24 +137,24 @@ function createWebSocket() {
sendEvent,
init,
on: <T>(event: string, listener: (data: T) => void): (() => void) => {
let eventListeners = listeners.get(event);
let eventListeners = listeners.get(event)
if (!eventListeners) {
if (!socketEvents.includes(event as SocketEvent)) {
subscribeToEvent(event);
subscribeToEvent(event)
}
eventListeners = new Set();
listeners.set(event, eventListeners);
eventListeners = new Set()
listeners.set(event, eventListeners)
}
eventListeners.add(listener as (data: unknown) => void);
eventListeners.add(listener as (data: unknown) => void)
return () => {
unsubscribe(event, listener as (data: unknown) => void);
};
unsubscribe(event, listener as (data: unknown) => void)
}
},
off: <T>(event: string, listener?: (data: T) => void) => {
unsubscribe(event, listener as (data: unknown) => void);
},
};
unsubscribe(event, listener as (data: unknown) => void)
}
}
}
export const socket = createWebSocket();
export const socket = createWebSocket()
app/src/lib/stores/telemetry.ts
+8 -8
View File
@@ -1,5 +1,5 @@
import type { DownloadOTA } from '$lib/types/models';
import { writable } from 'svelte/store';
import type { DownloadOTA } from '$lib/types/models'
import { writable } from 'svelte/store'
let telemetry_data = {
rssi: {
@@ -10,10 +10,10 @@ let telemetry_data = {
progress: 0,
error: ''
}
};
}
function createTelemetry() {
const { subscribe, set, update } = writable(telemetry_data);
const { subscribe, set, update } = writable(telemetry_data)
return {
subscribe,
@@ -21,15 +21,15 @@ function createTelemetry() {
update(telemetry_data => ({
...telemetry_data,
rssi: { rssi: data }
}));
}))
},
setDownloadOTA: (data: DownloadOTA) => {
update(telemetry_data => ({
...telemetry_data,
download_ota: { status: data.status, progress: data.progress, error: data.error }
}));
}))
}
}
};
}
export const telemetry = createTelemetry();
export const telemetry = createTelemetry()
app/src/lib/types/mathutils.d.ts
Vendored
+15 -15
View File
@@ -1,17 +1,17 @@
declare module 'three/src/math/MathUtils' {
export function generateUUID(): string;
export function clamp(value: number, min: number, max: number): number;
export function euclideanModulo(n: number, m: number): number;
export function mapLinear(x: number, a1: number, a2: number, b1: number, b2: number): number;
export function lerp(x: number, y: number, t: number): number;
export function smoothstep(x: number, min: number, max: number): number;
export function smootherstep(x: number, min: number, max: number): number;
export function randInt(low: number, high: number): number;
export function randFloat(low: number, high: number): number;
export function randFloatSpread(range: number): number;
export function degToRad(degrees: number): number;
export function radToDeg(radians: number): number;
export function isPowerOfTwo(value: number): boolean;
export function ceilPowerOfTwo(value: number): number;
export function floorPowerOfTwo(value: number): number;
export function generateUUID(): string
export function clamp(value: number, min: number, max: number): number
export function euclideanModulo(n: number, m: number): number
export function mapLinear(x: number, a1: number, a2: number, b1: number, b2: number): number
export function lerp(x: number, y: number, t: number): number
export function smoothstep(x: number, min: number, max: number): number
export function smootherstep(x: number, min: number, max: number): number
export function randInt(low: number, high: number): number
export function randFloat(low: number, high: number): number
export function randFloatSpread(range: number): number
export function degToRad(degrees: number): number
export function radToDeg(radians: number): number
export function isPowerOfTwo(value: number): boolean
export function ceilPowerOfTwo(value: number): number
export function floorPowerOfTwo(value: number): number
}
app/src/lib/types/uzip.d.ts
Vendored
+9 -9
View File
@@ -1,14 +1,14 @@
declare module 'uzip' {
interface UZIP {
parse(data: Uint8Array | ArrayBuffer): any;
compress(data: any): Uint8Array | ArrayBuffer;
compressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer;
decompress(data: Uint8Array | ArrayBuffer): any;
decompressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer;
encode(data: any): Uint8Array | ArrayBuffer;
decode(data: Uint8Array | ArrayBuffer): any;
parse(data: Uint8Array | ArrayBuffer): any
compress(data: any): Uint8Array | ArrayBuffer
compressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
decompress(data: Uint8Array | ArrayBuffer): any
decompressRaw(data: Uint8Array | ArrayBuffer): Uint8Array | ArrayBuffer
encode(data: any): Uint8Array | ArrayBuffer
decode(data: Uint8Array | ArrayBuffer): any
}
const uzip: UZIP;
export default uzip;
const uzip: UZIP
export default uzip
}
app/src/lib/utilities/buffer-utilities.ts
+8 -8
View File
@@ -1,15 +1,15 @@
export class throttler {
private _throttlePause: boolean;
private _throttlePause: boolean
constructor() {
this._throttlePause = false;
this._throttlePause = false
}
throttle = (callback: Function, time: number) => {
if (this._throttlePause) return;
if (this._throttlePause) return
this._throttlePause = true;
this._throttlePause = true
setTimeout(() => {
callback();
this._throttlePause = false;
}, time);
};
callback()
this._throttlePause = false
}, time)
}
}
app/src/lib/utilities/color-utilities.ts
+5 -5
View File
@@ -1,6 +1,6 @@
export const daisyColor = (name: string, opacity: number = 100) => {
const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
if (opacity >= 100) return color;
const alpha = Math.min(Math.max(opacity, 0), 100) / 100;
return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`;
};
const color = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
if (opacity >= 100) return color
const alpha = Math.min(Math.max(opacity, 0), 100) / 100
return `${color.replace(/(\/\s*\d+(\.\d+)?\))|\)$/, '')} / ${alpha})`
}
app/src/lib/utilities/index.ts
+9 -9
View File
@@ -1,9 +1,9 @@
export * from './result';
export * from './string-utilities';
export * from './svelte-utilities';
export * from './math-utilities';
export * from './buffer-utilities';
export * from './model-utilities';
export * from './position-utilities';
export * from './string-utilities';
export * from './color-utilities';
export * from './result'
export * from './string-utilities'
export * from './svelte-utilities'
export * from './math-utilities'
export * from './buffer-utilities'
export * from './model-utilities'
export * from './position-utilities'
export * from './string-utilities'
export * from './color-utilities'
app/src/lib/utilities/math-utilities.ts
+13 -13
View File
@@ -1,18 +1,18 @@
export const toUint8 = (number: number, min: number, max: number) => {
number = Math.max(min, Math.min(max, number));
let scaled = ((number - min) / (max - min)) * 255;
return Math.round(scaled) & 0xff;
};
number = Math.max(min, Math.min(max, number))
let scaled = ((number - min) / (max - min)) * 255
return Math.round(scaled) & 0xff
}
export const toInt8 = (number: number, min: number, max: number) => {
number = Math.max(min, Math.min(max, number));
let scaled = ((number - min) / (max - min)) * 255 - 128;
return Math.max(-128, Math.min(127, Math.round(scaled))) | 0;
};
number = Math.max(min, Math.min(max, number))
let scaled = ((number - min) / (max - min)) * 255 - 128
return Math.max(-128, Math.min(127, Math.round(scaled))) | 0
}
export const fromInt8 = (int8: number, min: number, max: number) => {
int8 = Math.max(-128, Math.min(127, int8));
const scaled = (int8 + 128) / 255;
const number = scaled * (max - min) + min;
return number;
};
int8 = Math.max(-128, Math.min(127, int8))
const scaled = (int8 + 128) / 255
const number = scaled * (max - min) + min
return number
}
app/src/lib/utilities/model-utilities.ts
+2 -1
View File
@@ -36,7 +36,8 @@ export const loadModel = async (url: string): Promise<Result<[URDFRobot, string[
const urdfLoader = new URDFLoader()
urdfLoader.workingPath = LoaderUtils.extractUrlBase(url)
let xml = url.endsWith('.xacro') ? await loadXacro(url) : await fetch(url).then(res => res.text())
let xml =
url.endsWith('.xacro') ? await loadXacro(url) : await fetch(url).then(res => res.text())
if (typeof xml === 'string') {
xml = new window.DOMParser().parseFromString(xml, 'text/xml')
app/src/lib/utilities/position-utilities.ts
+35 -33
View File
@@ -1,30 +1,32 @@
class SunCalculator {
calculateSunElevation(lat: number = 55, lon: number = 12) {
const now = new Date();
const JD = this.getJulianDate(now);
const solarDec = this.getSolarDeclination(JD);
const solarTime = this.getSolarTime(now, lon);
const now = new Date()
const JD = this.getJulianDate(now)
const solarDec = this.getSolarDeclination(JD)
const solarTime = this.getSolarTime(now, lon)
const hourAngle = (solarTime - 12) * 15;
const hourAngle = (solarTime - 12) * 15
const elevation = Math.asin(
Math.sin(this.degToRad(lat)) * Math.sin(solarDec) +
Math.cos(this.degToRad(lat)) * Math.cos(solarDec) * Math.cos(this.degToRad(hourAngle))
);
Math.cos(this.degToRad(lat)) *
Math.cos(solarDec) *
Math.cos(this.degToRad(hourAngle))
)
return this.radToDeg(elevation);
return this.radToDeg(elevation)
}
getJulianDate(date: Date) {
const Y = date.getUTCFullYear();
const M = date.getUTCMonth() + 1;
const Y = date.getUTCFullYear()
const M = date.getUTCMonth() + 1
const D =
date.getUTCDate() +
date.getUTCHours() / 24 +
date.getUTCMinutes() / 1440 +
date.getUTCSeconds() / 86400;
const A = Math.floor((14 - M) / 12);
const Y1 = Y + 4800 - A;
const M1 = M + 12 * A - 3;
date.getUTCSeconds() / 86400
const A = Math.floor((14 - M) / 12)
const Y1 = Y + 4800 - A
const M1 = M + 12 * A - 3
return (
D +
Math.floor((153 * M1 + 2) / 5) +
@@ -33,33 +35,33 @@ class SunCalculator {
Math.floor(Y1 / 100) +
Math.floor(Y1 / 400) -
32045
);
)
}
getSolarDeclination(JulianDate: number) {
const n = JulianDate - 2451545;
const L = (280.46 + 0.9856474 * n) % 360;
const g = this.degToRad((357.528 + 0.9856003 * n) % 360);
const lambda = this.degToRad(L + 1.915 * Math.sin(g) + 0.02 * Math.sin(2 * g));
return Math.asin(Math.sin(lambda) * Math.sin(this.degToRad(23.44)));
const n = JulianDate - 2451545
const L = (280.46 + 0.9856474 * n) % 360
const g = this.degToRad((357.528 + 0.9856003 * n) % 360)
const lambda = this.degToRad(L + 1.915 * Math.sin(g) + 0.02 * Math.sin(2 * g))
return Math.asin(Math.sin(lambda) * Math.sin(this.degToRad(23.44)))
}
getSolarTime(date: Date, lon: number) {
const EoT = this.getEquationOfTime(date);
const offset = date.getTimezoneOffset() / 60;
const standardMeridian = Math.round(lon / 15) * 15;
const EoT = this.getEquationOfTime(date)
const offset = date.getTimezoneOffset() / 60
const standardMeridian = Math.round(lon / 15) * 15
const solarTime =
date.getUTCHours() +
(date.getUTCMinutes() + (4 * (standardMeridian - lon) + EoT)) / 60 -
offset;
return (solarTime + 24) % 24;
offset
return (solarTime + 24) % 24
}
getEquationOfTime(date: Date) {
const JD = this.getJulianDate(date);
const n = JD - 2451545;
const g = this.degToRad((357.528 + 0.9856003 * n) % 360);
const q = this.degToRad((280.46 + 0.9856474 * n) % 360);
const JD = this.getJulianDate(date)
const n = JD - 2451545
const g = this.degToRad((357.528 + 0.9856003 * n) % 360)
const q = this.degToRad((280.46 + 0.9856474 * n) % 360)
return (
4 *
this.radToDeg(
@@ -69,16 +71,16 @@ class SunCalculator {
0.014615 * Math.cos(2 * q) -
0.040849 * Math.sin(2 * g)
)
);
)
}
degToRad(deg: number) {
return deg * (Math.PI / 180);
return deg * (Math.PI / 180)
}
radToDeg(rad: number) {
return rad * (180 / Math.PI);
return rad * (180 / Math.PI)
}
}
export const sunCalculator = new SunCalculator();
export const sunCalculator = new SunCalculator()
app/src/lib/utilities/result/err.ts
+9 -9
View File
@@ -1,18 +1,18 @@
export class Err<T, U> {
#inner: T;
#exception?: U;
#inner: T
#exception?: U
constructor(inner: T, exception?: U) {
this.#inner = inner;
this.#exception = exception;
this.#inner = inner
this.#exception = exception
}
get inner(): T {
return this.#inner;
return this.#inner
}
get exception(): U | undefined {
return this.#exception;
return this.#exception
}
/**
@@ -20,7 +20,7 @@ export class Err<T, U> {
* @returns `true` if `Ok`; `false` if `Err`
*/
isOk(): false {
return false;
return false
}
/**
@@ -28,7 +28,7 @@ export class Err<T, U> {
* @returns `true` if `Err`; `false` if `Ok`
*/
isErr(): this is Err<T, U> {
return true;
return true
}
/**
@@ -37,6 +37,6 @@ export class Err<T, U> {
* @returns `Err(inner)`
*/
static new<E, F>(inner: E, exception: F): Err<E, F> {
return new Err<E, F>(inner, exception);
return new Err<E, F>(inner, exception)
}
}
app/src/lib/utilities/result/index.ts
+3 -3
View File
@@ -1,3 +1,3 @@
export * from './err';
export * from './ok';
export * from './result';
export * from './err'
export * from './ok'
export * from './result'
app/src/lib/utilities/result/ok.ts
+7 -7
View File
@@ -1,12 +1,12 @@
export class Ok<T> {
#inner: T;
#inner: T
constructor(inner: T) {
this.#inner = inner;
this.#inner = inner
}
get inner(): T {
return this.#inner;
return this.#inner
}
/**
@@ -14,7 +14,7 @@ export class Ok<T> {
* @returns `true` if `Ok`; `false` if `Err`
*/
isOk(): this is Ok<T> {
return true;
return true
}
/**
@@ -22,7 +22,7 @@ export class Ok<T> {
* @returns `true` if `Err`; `false` if `Ok`
*/
isErr(): false {
return false;
return false
}
/**
@@ -31,7 +31,7 @@ export class Ok<T> {
* @returns `Ok(inner)`
*/
static new<T>(inner: T): Ok<T> {
return new Ok<T>(inner);
return new Ok<T>(inner)
}
/**
@@ -39,6 +39,6 @@ export class Ok<T> {
* @returns `Ok(void)`
*/
static void(): Ok<void> {
return new Ok(undefined);
return new Ok(undefined)
}
}
app/src/lib/utilities/result/result.ts
+5 -5
View File
@@ -1,20 +1,20 @@
import { Err } from './err';
import { Ok } from './ok';
import { Err } from './err'
import { Ok } from './ok'
export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>;
export type Result<T = unknown, E = unknown, F = unknown> = Ok<T> | Err<E, F>
export namespace Result {
/**
* @returns `Ok<T>`
*/
export function ok<T = unknown>(value: T) {
return Ok.new(value);
return Ok.new(value)
}
/**
* @returns `Err<E, F>`
*/
export function err<E = unknown, F = unknown>(error: E, exception?: F) {
return Err.new(error, exception);
return Err.new(error, exception)
}
}
app/src/lib/utilities/svelte-utilities.ts
+10 -10
View File
@@ -1,16 +1,16 @@
import { writable } from 'svelte/store';
import { browser } from '$app/environment';
import { writable } from 'svelte/store'
import { browser } from '$app/environment'
export const persistentStore = <T>(key: string, initialValue: T) => {
const savedValue = browser ? localStorage.getItem(key) : null;
const data: T = savedValue !== null ? JSON.parse(savedValue) : initialValue;
const store = writable<T>();
const savedValue = browser ? localStorage.getItem(key) : null
const data: T = savedValue !== null ? JSON.parse(savedValue) : initialValue
const store = writable<T>()
store.subscribe(value => {
if (browser) localStorage.setItem(key, JSON.stringify(value));
});
if (browser) localStorage.setItem(key, JSON.stringify(value))
})
store.set(data);
store.set(data)
return store;
};
return store
}
app/src/routes/+layout.svelte
+2 -2
View File
@@ -121,8 +121,8 @@
<div
class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
transition:fade
onclick={modals.closeAll}>
</div>
onclick={modals.closeAll}
></div>
{/snippet}
</Modals>
app/src/routes/+layout.ts
+3 -1
View File
@@ -7,7 +7,9 @@ const registerFetchIntercept = async () => {
window.fetch = async (resource, config) => {
const url = resource instanceof Request ? resource.url : resource.toString()
const file = await fileService?.getFile(url)
return file?.isOk() ? new Response(file.inner) : originalFetch(resource, config)
return file?.isOk() && file.inner ?
new Response(new Uint8Array(file.inner))
: originalFetch(resource, config)
}
}
app/src/routes/+page.svelte
+3 -1
View File
@@ -21,7 +21,9 @@
<div class="card-body w-80">
<h2 class="card-title text-center text-2xl">Begin you journey</h2>
<p class="py-6 text-center"></p>
<a class="btn btn-primary" href={$socket ? '/controller' : '/connection'}> Add Robot Dog </a>
<a class="btn btn-primary" href={$socket ? '/controller' : '/connection'}>
Add Robot Dog
</a>
</div>
</div>
</div>
app/src/routes/connection/+page.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import Connection from './Connection.svelte';
import Connection from './Connection.svelte'
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
app/src/routes/connection/+page.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import type { PageLoad } from './$types';
import type { PageLoad } from './$types'
export const load = (async () => {
return {
title: 'Connection'
};
}) satisfies PageLoad;
}
}) satisfies PageLoad
app/src/routes/connection/Connection.svelte
+6 -6
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import SettingsCard from '$lib/components/SettingsCard.svelte';
import { WiFi } from '$lib/components/icons';
import { location, socket } from '$lib/stores';
import SettingsCard from '$lib/components/SettingsCard.svelte'
import { WiFi } from '$lib/components/icons'
import { location, socket } from '$lib/stores'
const update = () => {
const ws = $location ? $location : window.location.host;
socket.init(`ws://${ws}/api/ws/events`);
};
const ws = $location ? $location : window.location.host
socket.init(`ws://${ws}/api/ws/events`)
}
</script>
<SettingsCard collapsible={false}>
app/src/routes/controller/+page.ts
+2 -2
View File
@@ -1,3 +1,3 @@
export const load = async () => {
return { title: 'Controller' };
};
return { title: 'Controller' }
}
app/src/routes/controller/Controls.svelte
+15 -7
View File
@@ -135,22 +135,27 @@
<div class="flex justify-center w-full"></div>
</div>
<div class="absolute bottom-0 z-10 flex items-end">
<div class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl">
<div
class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl"
>
<VerticalSlider
min={0}
max={1}
step={0.01}
oninput={(e: Event) => handleRange(e, 'height')} />
oninput={(e: Event) => handleRange(e, 'height')}
/>
<label for="height">Ht</label>
</div>
<div
class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden">
class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden"
>
<div class="join">
{#each modes as modeValue}
<button
class="btn join-item"
class:btn-primary={$mode === modes.indexOf(modeValue)}
onclick={() => changeMode(modeValue)}>
onclick={() => changeMode(modeValue)}
>
{capitalize(modeValue)}
</button>
{/each}
@@ -163,7 +168,8 @@
<button
class="btn join-item btn-sm"
class:btn-secondary={$walkGait === gaitValue}
onclick={() => changeWalkGait(gaitValue)}>
onclick={() => changeWalkGait(gaitValue)}
>
{walkGaitLabels[gaitValue]}
</button>
{/if}
@@ -180,7 +186,8 @@
step="0.01"
max="1"
oninput={e => handleRange(e, 's1')}
class="range range-sm range-primary" />
class="range range-sm range-primary"
/>
</div>
<div>
<label for="speed">Speed</label>
@@ -191,7 +198,8 @@
step="0.01"
max="1"
oninput={e => handleRange(e, 'speed')}
class="range range-sm range-primary" />
class="range range-sm range-primary"
/>
</div>
</div>
{/if}
app/src/routes/peripherals/+page.ts
+5 -5
View File
@@ -1,7 +1,7 @@
import type { PageLoad } from './$types';
import { goto } from '$app/navigation';
import type { PageLoad } from './$types'
import { goto } from '$app/navigation'
export const load = (async () => {
goto('/');
return;
}) satisfies PageLoad;
goto('/')
return
}) satisfies PageLoad
app/src/routes/peripherals/camera/+page.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import Camera from './Camera.svelte';
import Camera from './Camera.svelte'
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
app/src/routes/peripherals/camera/+page.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import type { PageLoad } from './$types';
import type { PageLoad } from './$types'
export const load = (async () => {
return {
title: 'Camera'
};
}) satisfies PageLoad;
}
}) satisfies PageLoad
app/src/routes/peripherals/camera/Camera.svelte
+5 -5
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import SettingsCard from "$lib/components/SettingsCard.svelte";
import CameraSetting from './CameraSetting.svelte';
import Stream from '$lib/components/Stream.svelte';
import { Camera } from "$lib/components/icons";
import SettingsCard from '$lib/components/SettingsCard.svelte'
import CameraSetting from './CameraSetting.svelte'
import Stream from '$lib/components/Stream.svelte'
import { Camera } from '$lib/components/icons'
</script>
<SettingsCard collapsible={false}>
@@ -10,7 +10,7 @@
<Camera class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
{/snippet}
{#snippet title()}
<span >Camera</span>
<span>Camera</span>
{/snippet}
<Stream />
<CameraSetting />
app/src/routes/peripherals/camera/CameraSetting.svelte
+36 -13
View File
@@ -1,13 +1,13 @@
<script lang="ts">
import { api } from '$lib/api';
import Spinner from '$lib/components/Spinner.svelte';
import type { CameraSettings } from '$lib/types/models';
let settings:CameraSettings = $state()
import { api } from '$lib/api'
import Spinner from '$lib/components/Spinner.svelte'
import type { CameraSettings } from '$lib/types/models'
let settings: CameraSettings = $state()
const getCameraSettings = async () => {
const result = await api.get<CameraSettings>('/api/camera/settings')
if (result.isErr()){
console.error("An error occurred", result.inner);
if (result.isErr()) {
console.error('An error occurred', result.inner)
return
}
settings = result.inner
@@ -15,8 +15,8 @@
const updateCameraSettings = async () => {
const result = await api.post<CameraSettings>('/api/camera/settings', settings)
if (result.isErr()){
console.error("An error occurred", result.inner);
if (result.isErr()) {
console.error('An error occurred', result.inner)
return
}
settings = result.inner
@@ -27,21 +27,41 @@
<Spinner />
{:then _}
<div class="flex flex-col gap-1">
<button class="btn btn-primary" type="button" onclick={updateCameraSettings}>Update camera settings</button>
<button class="btn btn-primary" type="button" onclick={updateCameraSettings}
>Update camera settings</button
>
<label for="brightness">
Brightness {settings.brightness}
<input type="range" min="-2" max="2" class="range range-xs" bind:value={settings.brightness}/>
<input
type="range"
min="-2"
max="2"
class="range range-xs"
bind:value={settings.brightness}
/>
</label>
<label for="contrast">
Contrast {settings.contrast}
<input type="range" min="-2" max="2" class="range range-xs" bind:value={settings.contrast}/>
<input
type="range"
min="-2"
max="2"
class="range range-xs"
bind:value={settings.contrast}
/>
</label>
<label for="framesize">
FrameSize {settings.framesize}
<input type="range" min="0" max="10" class="range range-xs" bind:value={settings.framesize}/>
<input
type="range"
min="0"
max="10"
class="range range-xs"
bind:value={settings.framesize}
/>
</label>
<label class="cursor-pointer flex items-center justify-between">
@@ -56,7 +76,10 @@
<label for="special_effect" class="flex items-center">
<span class="basis-1/2">Special Effect</span>
<select class="select select-bordered select-sm w-full max-w-xs" bind:value={settings.special_effect}>
<select
class="select select-bordered select-sm w-full max-w-xs"
bind:value={settings.special_effect}
>
<option value={0}>No effect</option>
<option value={1}>Negative</option>
<option value={2}>Grayscale</option>
app/src/routes/peripherals/i2c/i2cSetting.svelte
+13 -5
View File
@@ -56,7 +56,8 @@
max="48"
title="SDA pin number (0-48)"
disabled={!isEditing}
bind:value={settings.sda} />
bind:value={settings.sda}
/>
</label>
<label for="scl" class="input validator">
SCL
@@ -70,7 +71,8 @@
max="48"
title="SCL pin number (0-48)"
disabled={!isEditing}
bind:value={settings.scl} />
bind:value={settings.scl}
/>
</label>
<label class="input validator" for="frequency">
Frequency
@@ -83,14 +85,20 @@
max="430000"
title="I2C frequency in Hz"
disabled={!isEditing}
bind:value={settings.frequency} />
bind:value={settings.frequency}
/>
</label>
<div>
<button class="btn btn-outline btn-primary" onclick={() => (isEditing = !isEditing)}>
<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>
<button class="btn btn-outline btn-primary" onclick={handleSave}
>Save</button
>
{/if}
</div>
</div>
app/src/routes/peripherals/imu/+page.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import IMU from './imu.svelte';
import IMU from './imu.svelte'
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
app/src/routes/peripherals/imu/+page.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import type { PageLoad } from './$types';
import type { PageLoad } from './$types'
export const load = (async () => {
return {
title: 'IMU'
};
}) satisfies PageLoad;
}
}) satisfies PageLoad
app/src/routes/peripherals/imu/imu.svelte
+6 -3
View File
@@ -228,7 +228,8 @@
<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 }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<canvas bind:this={angleChartElement}></canvas>
</div>
</div>
@@ -238,14 +239,16 @@
<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 }}>
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 }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<canvas bind:this={altitudeChartElement}></canvas>
</div>
</div>
app/src/routes/peripherals/servo/+page.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import type { PageLoad } from './$types';
import type { PageLoad } from './$types'
export const load = (async () => {
return {
title: 'Servo'
};
}) satisfies PageLoad;
}
}) satisfies PageLoad
app/src/routes/peripherals/servo/ServoTable.svelte
+8 -4
View File
@@ -70,7 +70,8 @@
onblur={syncConfig}
oninput={event => updateValue(event, index, 'center_pwm')}
min="80"
max="600" />
max="600"
/>
</td>
<td>
<input
@@ -81,13 +82,15 @@
onblur={syncConfig}
oninput={event => updateValue(event, index, 'center_angle')}
min="-90"
max="90" />
max="90"
/>
</td>
<td>
<button
class="btn btn-sm btn-ghost"
title="Toggle direction {servo.direction}"
onclick={() => toggleDirection(index)}>
onclick={() => toggleDirection(index)}
>
{#if servo.direction === 1}
<RotateCw class="w-4 h-4 text-green-500" />
{:else}
@@ -104,7 +107,8 @@
onblur={syncConfig}
oninput={event => updateValue(event, index, 'conversion')}
min="0"
max="10" />
max="10"
/>
</td>
</tr>
{/each}
app/src/routes/peripherals/servo/servos.svelte
+4 -2
View File
@@ -41,7 +41,8 @@
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" />
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>
@@ -55,7 +56,8 @@
type="checkbox"
class="toggle"
bind:checked={active}
onchange={active ? activateServo : deactivateServo} />
onchange={active ? activateServo : deactivateServo}
/>
</span>
<span class="flex items-center gap-2">
<label for="servoId">Servo active {servoId}</label>
app/src/routes/system/+page.ts
+5 -5
View File
@@ -1,7 +1,7 @@
import type { PageLoad } from './$types';
import { goto } from '$app/navigation';
import type { PageLoad } from './$types'
import { goto } from '$app/navigation'
export const load = (async () => {
goto('/');
return;
}) satisfies PageLoad;
goto('/')
return
}) satisfies PageLoad
app/src/routes/system/filesystem/File.svelte
+2 -1
View File
@@ -18,7 +18,8 @@
<button
class="opacity-0 group-hover:opacity-100 p-1 hover:text-red-500"
onclick={() => onDelete(name)}>
onclick={() => onDelete(name)}
>
<TrashIcon class="w-4 h-4" />
</button>
</div>
app/src/routes/system/filesystem/FileSystem.svelte
+17 -6
View File
@@ -106,7 +106,10 @@
<FileIcon class="w-4 h-4" />
New File
</button>
<button class="btn btn-sm btn-primary flex items-center gap-2" onclick={openNewFolderDialog}>
<button
class="btn btn-sm btn-primary flex items-center gap-2"
onclick={openNewFolderDialog}
>
<Add class="w-4 h-4" />
New Folder
</button>
@@ -117,7 +120,8 @@
<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">
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}
@@ -126,19 +130,25 @@
files={files.root}
expanded
selected={updateSelected}
onDelete={deleteFile} />
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">
<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)}>
<button
class="btn btn-sm btn-secondary"
onclick={() => (isEditing = false)}
>
Cancel
</button>
{:else}
@@ -158,7 +168,8 @@
{#if isEditing}
<textarea
class="w-full h-[300px] sm:h-[500px] font-mono p-2 bg-gray-800 text-white"
bind:value={content}></textarea>
bind:value={content}
></textarea>
{:else}
<pre
class="bg-gray-800 p-4 rounded overflow-auto max-h-[300px] sm:max-h-[500px]">{content}</pre>
app/src/routes/system/filesystem/NewFileDialog.svelte
+10 -4
View File
@@ -20,19 +20,25 @@
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
transition:fly={{ y: 50 }}
use:exitBeforeEnter
use:focusTrap>
use:focusTrap
>
<div
class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
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} />
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()}>
<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}>
app/src/routes/system/filesystem/NewFolderDialog.svelte
+10 -4
View File
@@ -20,19 +20,25 @@
class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
transition:fly={{ y: 50 }}
use:exitBeforeEnter
use:focusTrap>
use:focusTrap
>
<div
class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
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} />
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()}>
<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}>
app/src/routes/system/metrics/+page.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import SystemMetrics from './SystemMetrics.svelte';
import SystemMetrics from './SystemMetrics.svelte'
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
app/src/routes/system/metrics/+page.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import type { PageLoad } from './$types';
import type { PageLoad } from './$types'
export const load = (async () => {
return { title: 'System Metrics' };
}) satisfies PageLoad;
return { title: 'System Metrics' }
}) satisfies PageLoad
app/src/routes/system/metrics/SystemMetrics.svelte
+6 -3
View File
@@ -250,21 +250,24 @@
<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 }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<canvas bind:this={heapChartElement}></canvas>
</div>
</div>
<div class="w-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-52"
transition:slide|local={{ duration: 300, easing: cubicOut }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<canvas bind:this={filesystemChartElement}></canvas>
</div>
</div>
<div class="w-full overflow-x-auto">
<div
class="flex w-full flex-col space-y-1 h-52"
transition:slide|local={{ duration: 300, easing: cubicOut }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<canvas bind:this={temperatureChartElement}></canvas>
</div>
</div>
app/src/routes/system/status/SystemStatus.svelte
+28 -14
View File
@@ -153,38 +153,45 @@
{#if systemInformation}
<div
class="flex w-full flex-col space-y-1"
transition:slide|local={{ duration: 300, easing: cubicOut }}>
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<StatusItem
icon={CPU}
title="Chip"
description={`${systemInformation.cpu_type} Rev ${systemInformation.cpu_rev}`} />
description={`${systemInformation.cpu_type} Rev ${systemInformation.cpu_rev}`}
/>
<StatusItem
icon={SDK}
title="SDK Version"
description={`ESP-IDF ${systemInformation.sdk_version} / Arduino ${systemInformation.arduino_version}`} />
description={`ESP-IDF ${systemInformation.sdk_version} / Arduino ${systemInformation.arduino_version}`}
/>
<StatusItem
icon={CPP}
title="Firmware Version"
description={systemInformation.firmware_version} />
description={systemInformation.firmware_version}
/>
<StatusItem
icon={Speed}
title="CPU Frequency"
description={`${systemInformation.cpu_freq_mhz} MHz ${
systemInformation.cpu_cores == 2 ? 'Dual Core' : 'Single Core'
}`} />
}`}
/>
<StatusItem
icon={Heap}
title="Heap (Free / Max Alloc)"
description={`${systemInformation.free_heap} / ${systemInformation.max_alloc_heap} bytes`} />
description={`${systemInformation.free_heap} / ${systemInformation.max_alloc_heap} bytes`}
/>
<StatusItem
icon={Pyramid}
title="PSRAM (Size / Free)"
description={`${systemInformation.psram_size} / ${systemInformation.psram_size} bytes`} />
description={`${systemInformation.psram_size} / ${systemInformation.psram_size} bytes`}
/>
<StatusItem
icon={Sketch}
@@ -195,14 +202,16 @@
).toFixed(1)} % of
${systemInformation.free_sketch_space / 1000000} MB used (${
(systemInformation.free_sketch_space - systemInformation.sketch_size) / 1000000
} MB free)`} />
} MB free)`}
/>
<StatusItem
icon={Flash}
title="Flash Chip (Size / Speed)"
description={`${systemInformation.flash_chip_size / 1000000} MB / ${
systemInformation.flash_chip_speed / 1000000
} MHz`} />
} MHz`}
/>
<StatusItem
icon={Folder}
@@ -213,7 +222,8 @@
).toFixed(1)} % of ${systemInformation.fs_total / 1000000} MB used (${
(systemInformation.fs_total - systemInformation.fs_used) / 1000000
}
MB free)`} />
MB free)`}
/>
<StatusItem
icon={Temperature}
@@ -222,17 +232,20 @@
systemInformation.core_temp == 53.33 ?
'NaN'
: systemInformation.core_temp.toFixed(2) + ' °C'
}`} />
}`}
/>
<StatusItem
icon={Stopwatch}
title="Uptime"
description={convertSeconds(systemInformation.uptime)} />
description={convertSeconds(systemInformation.uptime)}
/>
<StatusItem
icon={Power}
title="Reset Reason"
description={systemInformation.cpu_reset_reason} />
description={systemInformation.cpu_reset_reason}
/>
</div>
{/if}
{/await}
@@ -245,7 +258,8 @@
onclick={button.onClick}
icon={button.icon}
label={button.label}
type={button.type || 'primary'} />
type={button.type || 'primary'}
/>
{/if}
{/each}
</div>
app/src/routes/system/update/+page.svelte
+4 -4
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import UploadFirmware from './UploadFirmware.svelte';
import GithubFirmwareManager from './GithubFirmwareManager.svelte';
import { useFeatureFlags } from '$lib/stores';
import UploadFirmware from './UploadFirmware.svelte'
import GithubFirmwareManager from './GithubFirmwareManager.svelte'
import { useFeatureFlags } from '$lib/stores'
const features = useFeatureFlags();
const features = useFeatureFlags()
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
app/src/routes/system/update/+page.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import type { PageLoad } from './$types';
import type { PageLoad } from './$types'
export const load = (async () => {
return { title: 'Firmware Update' };
}) satisfies PageLoad;
return { title: 'Firmware Update' }
}) satisfies PageLoad
app/src/routes/system/update/GithubFirmwareManager.svelte
+56 -45
View File
@@ -1,46 +1,46 @@
<script lang="ts">
import { page } from '$app/state';
import { modals } from 'svelte-modals';
import { slide } from 'svelte/transition';
import { cubicOut } from 'svelte/easing';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import Spinner from '$lib/components/Spinner.svelte';
import SettingsCard from '$lib/components/SettingsCard.svelte';
import { page } from '$app/state'
import { modals } from 'svelte-modals'
import { slide } from 'svelte/transition'
import { cubicOut } from 'svelte/easing'
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
import Spinner from '$lib/components/Spinner.svelte'
import SettingsCard from '$lib/components/SettingsCard.svelte'
import { compareVersions } from 'compare-versions';
import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte';
import InfoDialog from '$lib/components/InfoDialog.svelte';
import { api } from '$lib/api';
import { useFeatureFlags } from '$lib/stores';
import { Error, Cancel, Check, CloudDown, Github, Prerelease } from '$lib/components/icons';
import { compareVersions } from 'compare-versions'
import GithubUpdateDialog from '$lib/components/GithubUpdateDialog.svelte'
import InfoDialog from '$lib/components/InfoDialog.svelte'
import { api } from '$lib/api'
import { useFeatureFlags } from '$lib/stores'
import { Error, Cancel, Check, CloudDown, Github, Prerelease } from '$lib/components/icons'
const features = useFeatureFlags();
const features = useFeatureFlags()
async function getGithubAPI() {
const headers = {
accept: 'application/vnd.github+json',
'X-GitHub-Api-Version': '2022-11-28',
};
const result = await api.get(`https://api.github.com/repos/${page.data.github}/releases`, {
headers,
});
if (result.isErr()) {
console.error('Error:', result.inner);
return;
'X-GitHub-Api-Version': '2022-11-28'
}
return result.inner as any;
const result = await api.get(`https://api.github.com/repos/${page.data.github}/releases`, {
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 });
const result = await api.post('/api/firmware/download', { download_url: url })
if (result.isErr()) {
console.error('Error:', result.inner);
return;
console.error('Error:', result.inner)
return
}
}
function confirmGithubUpdate(assets: any) {
let url = '';
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
@@ -48,7 +48,7 @@
assets[i].name.includes('.bin') &&
assets[i].name.includes($features.firmware_built_target)
) {
url = assets[i].browser_download_url;
url = assets[i].browser_download_url
}
}
if (url === '') {
@@ -58,9 +58,9 @@
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;
onDismiss: () => modals.close()
})
return
}
modals.open(ConfirmDialog, {
@@ -68,15 +68,15 @@
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 },
confirm: { label: 'Update', icon: CloudDown }
},
onConfirm: () => {
postGithubDownload(url);
postGithubDownload(url)
modals.open(GithubUpdateDialog, {
onConfirm: () => modals.closeAll(),
});
},
});
onConfirm: () => modals.closeAll()
})
}
})
}
</script>
@@ -91,7 +91,10 @@
<Spinner />
{:then githubReleases}
<div class="relative w-full overflow-visible">
<div class="overflow-x-auto" transition:slide|local={{ duration: 300, easing: cubicOut }}>
<div
class="overflow-x-auto"
transition:slide|local={{ duration: 300, easing: cubicOut }}
>
<table class="table w-full table-auto">
<thead>
<tr class="font-bold">
@@ -105,21 +108,26 @@
{#each githubReleases as release}
<tr
class={(
compareVersions($features.firmware_version as string, release.tag_name) === 0
compareVersions(
$features.firmware_version as string,
release.tag_name
) === 0
) ?
'bg-primary text-primary-content'
: 'bg-base-100 h-14'}>
: 'bg-base-100 h-14'}
>
<td align="left" class="text-base font-semibold">
<a
href={release.html_url}
class="link link-hover"
target="_blank"
rel="noopener noreferrer">{release.name}</a
></td>
></td
>
<td align="center" class="hidden min-h-full align-middle sm:block">
<div class="my-2">
{new Intl.DateTimeFormat('en-GB', {
dateStyle: 'medium',
dateStyle: 'medium'
}).format(new Date(release.published_at))}
</div>
</td>
@@ -133,8 +141,9 @@
<button
class="btn btn-ghost btn-circle btn-sm"
onclick={() => {
confirmGithubUpdate(release.assets);
}}>
confirmGithubUpdate(release.assets)
}}
>
<CloudDown class="text-secondary h-6 w-6" />
</button>
{/if}
@@ -148,7 +157,9 @@
{: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>
<span
>Please connect to a network with internet access to perform a firmware update.</span
>
</div>
{/await}
</SettingsCard>
app/src/routes/system/update/UploadFirmware.svelte
+19 -18
View File
@@ -1,18 +1,18 @@
<script lang="ts">
import { modals } from 'svelte-modals';
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
import SettingsCard from '$lib/components/SettingsCard.svelte';
import { modals } from 'svelte-modals'
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
import SettingsCard from '$lib/components/SettingsCard.svelte'
import { api } from '$lib/api';
import { Cancel, OTA, Warning } from '$lib/components/icons';
import { api } from '$lib/api'
import { Cancel, OTA, Warning } from '$lib/components/icons'
let files: FileList | undefined = $state();
let files: FileList | undefined = $state()
async function uploadBIN() {
const formData = new FormData();
formData.append('file', files![0]);
const result = await api.post('/api/firmware', formData);
if (result.isErr()) console.error('Error:', result.inner);
const formData = new FormData()
formData.append('file', files![0])
const result = await api.post('/api/firmware', formData)
if (result.isErr()) console.error('Error:', result.inner)
}
function confirmBinUpload() {
@@ -21,13 +21,13 @@
message: 'Are you sure you want to overwrite the existing firmware with a new one?',
labels: {
cancel: { label: 'Abort', icon: Cancel },
confirm: { label: 'Upload', icon: OTA },
confirm: { label: 'Upload', icon: OTA }
},
onConfirm: () => {
modals.close();
uploadBIN();
},
});
modals.close()
uploadBIN()
}
})
}
</script>
@@ -41,8 +41,8 @@
<div class="alert alert-warning shadow-lg">
<Warning class="h-6 w-6 shrink-0" />
<span
>Uploading a new firmware (.bin) file will replace the existing firmware. You may upload a
(.md5) file first to verify the uploaded firmware.
>Uploading a new firmware (.bin) file will replace the existing firmware. You may upload
a (.md5) file first to verify the uploaded firmware.
</span>
</div>
@@ -52,5 +52,6 @@
class="file-input file-input-bordered file-input-secondary mt-4 w-full"
bind:files
accept=".bin,.md5"
onchange={confirmBinUpload} />
onchange={confirmBinUpload}
/>
</SettingsCard>

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