🍡 Adds sweeping for servo
This commit is contained in:
Rune Harlyk
@@ -1,10 +1,12 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const;
|
||||
type SocketEvent = (typeof socketEvents)[number];
|
||||
|
||||
function createWebSocket() {
|
||||
let listeners = new Map<string, Set<(data?: unknown) => void>>();
|
||||
const { subscribe, set } = writable(false);
|
||||
const socketEvents = ['open', 'close', 'error', 'message', 'unresponsive'] as const;
|
||||
type SocketEvent = (typeof socketEvents)[number];
|
||||
const reconnectTimeoutTime = 5000;
|
||||
let unresponsiveTimeoutId: number;
|
||||
let reconnectTimeoutId: number;
|
||||
let ws: WebSocket;
|
||||
@@ -21,7 +23,7 @@ function createWebSocket() {
|
||||
clearTimeout(unresponsiveTimeoutId);
|
||||
clearTimeout(reconnectTimeoutId);
|
||||
listeners.get(reason)?.forEach((listener) => listener(event));
|
||||
reconnectTimeoutId = setTimeout(connect, 1000);
|
||||
reconnectTimeoutId = setTimeout(connect, reconnectTimeoutTime);
|
||||
}
|
||||
|
||||
function connect() {
|
||||
@@ -74,7 +76,7 @@ function createWebSocket() {
|
||||
|
||||
function resetUnresponsiveCheck() {
|
||||
clearTimeout(unresponsiveTimeoutId);
|
||||
unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), 2000);
|
||||
unresponsiveTimeoutId = setTimeout(() => disconnect('unresponsive'), reconnectTimeoutTime);
|
||||
}
|
||||
|
||||
function send(msg: unknown) {
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
<script lang="ts">
|
||||
import type { Servo } from "$lib/models";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
export let servo: Servo;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const sweep = () => {
|
||||
dispatch('sweep', {channel: servo.channel});
|
||||
};
|
||||
</script>
|
||||
|
||||
<div>
|
||||
@@ -19,5 +26,5 @@
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">90</span>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">180</span>
|
||||
</div>
|
||||
<button class="btn btn-neutral btn-sm">Sweep range</button>
|
||||
<button class="btn btn-neutral btn-sm" on:click={sweep}>Sweep range</button>
|
||||
</div>
|
||||
@@ -1,51 +1,102 @@
|
||||
<script lang="ts">
|
||||
import SettingsCard from "$lib/components/SettingsCard.svelte";
|
||||
import type { ServoConfiguration } from "$lib/models";
|
||||
import MotorOutline from '~icons/mdi/motor-outline';
|
||||
import Servo from './servo.svelte';
|
||||
import { api } from "$lib/api";
|
||||
import Spinner from "$lib/components/Spinner.svelte";
|
||||
import SettingsCard from '$lib/components/SettingsCard.svelte';
|
||||
import type { ServoConfiguration, Servo } from '$lib/models';
|
||||
import MotorOutline from '~icons/mdi/motor-outline';
|
||||
import ServoController from './servo.svelte';
|
||||
import { api } from '$lib/api';
|
||||
import Spinner from '$lib/components/Spinner.svelte';
|
||||
import { socket } from '$lib/stores';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let servo_config: ServoConfiguration
|
||||
let servo_config: ServoConfiguration;
|
||||
let servos: Servo[];
|
||||
let last_servo_config: ServoConfiguration;
|
||||
|
||||
$: updateServoConfig(servo_config)
|
||||
let isLoading = true;
|
||||
|
||||
const updateServoConfig = async (servo_config: ServoConfiguration) => {
|
||||
let result = await api.post('/api/servo/configuration', servo_config)
|
||||
}
|
||||
$: updateServoConfig(servo_config, servos);
|
||||
|
||||
const getServoConfig = async () => {
|
||||
let result = await api.get<ServoConfiguration>('/api/servo/configuration')
|
||||
if (result.isOk()) {
|
||||
servo_config = result.inner
|
||||
return result.inner
|
||||
}
|
||||
}
|
||||
const updateServoConfig = async (servo_config: ServoConfiguration, servos: Servo[]) => {
|
||||
if (!servo_config) return;
|
||||
const changes: { [key: string]: any } = {};
|
||||
for (const key of Object.keys(servo_config)) {
|
||||
if (key == 'servos') {
|
||||
for (let i = 0; i < servo_config.servos.length; i++) {
|
||||
for (const servo_key of Object.keys(servo_config.servos[i])) {
|
||||
if (
|
||||
JSON.stringify(servo_config.servos[i][servo_key as keyof Servo]) !==
|
||||
JSON.stringify(last_servo_config.servos[i][servo_key as keyof Servo])
|
||||
) {
|
||||
if (!changes.servos) changes.servos = [];
|
||||
if (!changes.servos[i]) changes.servos[i] = {};
|
||||
changes.servos[i][servo_key as keyof Servo] =
|
||||
servo_config.servos[i][servo_key as keyof Servo];
|
||||
changes.servos[i].channel = servo_config.servos[i].channel;
|
||||
}
|
||||
}
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (
|
||||
JSON.stringify(servo_config[key as keyof ServoConfiguration]) !==
|
||||
JSON.stringify(last_servo_config[key as keyof ServoConfiguration])
|
||||
) {
|
||||
changes[key as keyof ServoConfiguration] = servo_config[key as keyof ServoConfiguration];
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(changes).length > 0) {
|
||||
socket.sendEvent('servoConfiguration', changes);
|
||||
last_servo_config = structuredClone(servo_config);
|
||||
}
|
||||
};
|
||||
|
||||
const sweep = (event:any) => {
|
||||
let channel = event.detail.channel;
|
||||
socket.sendEvent('servoConfiguration', {servos:[{channel, sweep: true}]});
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
socket.on('servoConfiguration', (data: ServoConfiguration) => {
|
||||
isLoading = false;
|
||||
servo_config = data;
|
||||
servos = data.servos;
|
||||
last_servo_config = structuredClone(data);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<SettingsCard collapsible={false}>
|
||||
<MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
||||
<span slot="title">Servo</span>
|
||||
<MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
||||
<span slot="title">Servo</span>
|
||||
|
||||
{#await getServoConfig() }
|
||||
<Spinner />
|
||||
{:then _}
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-lg">General servo configuration</h2>
|
||||
<span class="mb-1 flex justify-between items-center">
|
||||
Servo Oscillator Frequency <input type="number" bind:value={servo_config.servo_oscillator_frequency} class="input input-bordered input-sm max-w-xs"/>
|
||||
</span>
|
||||
<span class="flex justify-between items-center mb-1">
|
||||
Servo PWM Frequency <input type="number" bind:value={servo_config.servo_pwm_frequency} class="input input-bordered input-sm max-w-xs"/>
|
||||
</span>
|
||||
<span class="flex justify-between items-center gap-1">
|
||||
Is active <input type="checkbox" bind:value={servo_config.is_active} class="toggle"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
{#each servo_config.servos as servo}
|
||||
<Servo {servo} />
|
||||
<div class="divider"></div>
|
||||
{/each}
|
||||
{/await}
|
||||
</SettingsCard>
|
||||
{#if isLoading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-lg">General servo configuration</h2>
|
||||
<span class="mb-1 flex justify-between items-center">
|
||||
Servo Oscillator Frequency <input
|
||||
type="number"
|
||||
bind:value={servo_config.servo_oscillator_frequency}
|
||||
class="input input-bordered input-sm max-w-xs"
|
||||
/>
|
||||
</span>
|
||||
<span class="flex justify-between items-center mb-1">
|
||||
Servo PWM Frequency <input
|
||||
type="number"
|
||||
bind:value={servo_config.servo_pwm_frequency}
|
||||
class="input input-bordered input-sm max-w-xs"
|
||||
/>
|
||||
</span>
|
||||
<span class="flex justify-between items-center gap-1">
|
||||
Is active <input type="checkbox" bind:checked={servo_config.is_active} class="toggle" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
{#each servos as servo}
|
||||
<ServoController bind:servo on:sweep={sweep} />
|
||||
<div class="divider"></div>
|
||||
{/each}
|
||||
{/if}
|
||||
</SettingsCard>
|
||||
|
||||
Reference in New Issue
Block a user