Rune Harlyk
118 lines
3.9 KiB
Svelte
118 lines
3.9 KiB
Svelte
<script lang="ts">
|
|
import { api } from '$lib/api'
|
|
import { onMount } from 'svelte'
|
|
import { RotateCw, RotateCcw } from '$lib/components/icons'
|
|
interface Props {
|
|
data?: any
|
|
servoId?: number
|
|
pwm?: number
|
|
}
|
|
|
|
let {
|
|
data = $bindable({
|
|
servos: []
|
|
}),
|
|
pwm = $bindable(306),
|
|
servoId = $bindable(0)
|
|
}: Props = $props()
|
|
|
|
const updateValue = (event: Event, index: number, key: string) => {
|
|
data.servos[index][key] = Number((event.target as HTMLInputElement).value)
|
|
}
|
|
|
|
const syncConfig = async () => {
|
|
await api.post('/api/servo/config', data)
|
|
}
|
|
|
|
const toggleDirection = async (index: number) => {
|
|
data.servos[index].direction = data.servos[index].direction === 1 ? -1 : 1
|
|
await syncConfig()
|
|
}
|
|
|
|
onMount(async () => {
|
|
const result = await api.get('/api/servo/config')
|
|
if (result.isOk()) {
|
|
data = result.inner
|
|
}
|
|
})
|
|
|
|
const setCenterPWM = async () => {
|
|
console.log('setCenterPWM', servoId, pwm)
|
|
data.servos[servoId]['center_pwm'] = pwm
|
|
await syncConfig()
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<button class="btn btn-sm btn-primary" onclick={() => setCenterPWM()}>Set center pwm</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-xs">
|
|
<thead>
|
|
<tr>
|
|
<th>Servo</th>
|
|
<th>Center PWM</th>
|
|
<th>Center Angle</th>
|
|
<th>Direction</th>
|
|
<th>Conversion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each data.servos as servo, index}
|
|
<tr class="hover:bg-base-200">
|
|
<td class="font-medium">Servo {index}</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
class="input input-sm input-bordered w-20"
|
|
value={servo.center_pwm}
|
|
onblur={syncConfig}
|
|
oninput={event => updateValue(event, index, 'center_pwm')}
|
|
min="80"
|
|
max="600"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
class="input input-sm input-bordered w-20"
|
|
value={servo.center_angle}
|
|
onblur={syncConfig}
|
|
oninput={event => updateValue(event, index, 'center_angle')}
|
|
min="-90"
|
|
max="90"
|
|
/>
|
|
</td>
|
|
<td>
|
|
<button
|
|
class="btn btn-sm btn-ghost"
|
|
title="Toggle direction {servo.direction}"
|
|
onclick={() => toggleDirection(index)}
|
|
>
|
|
{#if servo.direction === 1}
|
|
<RotateCw class="w-4 h-4 text-green-500" />
|
|
{:else}
|
|
<RotateCcw class="w-4 h-4" />
|
|
{/if}
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
class="input input-sm input-bordered w-20"
|
|
value={servo.conversion}
|
|
onblur={syncConfig}
|
|
oninput={event => updateValue(event, index, 'conversion')}
|
|
min="0"
|
|
max="10"
|
|
/>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|