Rune Harlyk
59 lines
1.8 KiB
Svelte
59 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
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 Spinner from '$lib/components/Spinner.svelte';
|
|
|
|
import { socket } from '$lib/stores';
|
|
import { onDestroy, onMount } from 'svelte';
|
|
import { throttler as Throttler } from '$lib/utilities';
|
|
|
|
let isLoading = false;
|
|
|
|
let active = false
|
|
|
|
let servoId = 0
|
|
|
|
const throttler = new Throttler()
|
|
|
|
const sweep = (event:any) => {
|
|
let channel = event.detail.channel;
|
|
socket.sendEvent('servoConfiguration', {servos:[{channel, sweep: true}]});
|
|
};
|
|
|
|
const activateServo = (event:any) => {
|
|
socket.sendEvent('servoState', {'active':1});
|
|
};
|
|
|
|
const deactivateServo = (event:any) => {
|
|
socket.sendEvent('servoState', {'active':0});
|
|
};
|
|
|
|
let pwm = 306;
|
|
|
|
const updatePWM = () => {
|
|
throttler.throttle(() => {
|
|
socket.sendEvent('servoPWM', {servo_id:servoId, pwm});
|
|
}, 10)
|
|
}
|
|
</script>
|
|
|
|
<SettingsCard collapsible={false}>
|
|
<MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
|
|
<span slot="title">Servo</span>
|
|
<input type="range" min="200" max="400" bind:value={pwm} on:input={updatePWM} class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
|
|
|
{#if isLoading}
|
|
<Spinner />
|
|
{:else}
|
|
<div class="flex flex-col">
|
|
<h2 class="text-lg">General servo configuration</h2>
|
|
<span class="flex items-center gap-2">
|
|
<label for="servoId">Servo active{servoId}</label>
|
|
<input type="checkbox" class="toggle" bind:checked={active} on:change={active ? deactivateServo : activateServo}>
|
|
</span>
|
|
</div>
|
|
{/if}
|
|
</SettingsCard>
|