Rune Harlyk
86 lines
2.6 KiB
Svelte
86 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { ServoPWMData, ServoStateData } from '$lib/platform_shared/message'
|
|
import { socket } from '$lib/stores'
|
|
import { Throttler } from '$lib/utilities'
|
|
|
|
let { servoId = $bindable(0), pwm = $bindable(306) } = $props()
|
|
|
|
let active = $state(false)
|
|
|
|
let allServos = $state(false)
|
|
|
|
const throttler = new Throttler()
|
|
|
|
const activateServo = () => {
|
|
socket.emit(ServoStateData, ServoStateData.create({ active: true }))
|
|
}
|
|
|
|
const deactivateServo = () => {
|
|
socket.emit(ServoStateData, ServoStateData.create({ active: false }))
|
|
}
|
|
|
|
const updatePWM = () => {
|
|
throttler.throttle(() => {
|
|
socket.emit(ServoPWMData, ServoPWMData.create({ servoId: servoId, servoPwm: pwm }))
|
|
}, 10)
|
|
}
|
|
|
|
const toggleMode = () => {
|
|
servoId = allServos ? -1 : 0
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-6 p-4 bg-base-200 rounded-xl">
|
|
<div class="flex flex-col gap-2">
|
|
<h2 class="text-lg font-semibold">PWM Control</h2>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm opacity-70">PWM Value</span>
|
|
<span class="text-2xl font-mono font-bold text-primary">{pwm}</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min="80"
|
|
max="600"
|
|
bind:value={pwm}
|
|
oninput={updatePWM}
|
|
class="range range-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div class="divider my-0"></div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<h2 class="text-lg font-semibold">Servo Selection</h2>
|
|
<label class="flex items-center justify-between cursor-pointer">
|
|
<span>All servos</span>
|
|
<input
|
|
type="checkbox"
|
|
class="toggle toggle-primary"
|
|
bind:checked={allServos}
|
|
onchange={toggleMode}
|
|
/>
|
|
</label>
|
|
<label class="flex items-center justify-between cursor-pointer">
|
|
<span>Active</span>
|
|
<input
|
|
type="checkbox"
|
|
class="toggle toggle-success"
|
|
bind:checked={active}
|
|
onchange={active ? activateServo : deactivateServo}
|
|
/>
|
|
</label>
|
|
<label class="flex items-center justify-between">
|
|
<span>Servo {servoId}</span>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="11"
|
|
step="1"
|
|
bind:value={servoId}
|
|
class="range range-sm w-32"
|
|
disabled={allServos}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|