Rune Harlyk
87 lines
2.0 KiB
Svelte
87 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { jointNames } from '../../lib/stores';
|
|
|
|
type Servo = {
|
|
id: number;
|
|
name: string;
|
|
minPWM: number;
|
|
maxPWM: number;
|
|
pwmFor180: number;
|
|
};
|
|
|
|
let servos: Servo[] = [];
|
|
|
|
onMount(() => {
|
|
jointNames.subscribe((data) => {
|
|
servos = data.map((name: string, i: number) => {
|
|
return {
|
|
id: i,
|
|
name,
|
|
minPWM: 0,
|
|
maxPWM: 0,
|
|
pwmFor180: 0
|
|
};
|
|
});
|
|
});
|
|
});
|
|
|
|
let selectedServo: number | null = null;
|
|
|
|
function updateServoValue(index: number, field: keyof Servo, value: number): void {
|
|
servos[index] = { ...servos[index], [field]: value };
|
|
}
|
|
|
|
const formatServo = (servo: Servo) => {
|
|
const string = servo.name;
|
|
const name = string.charAt(0).toUpperCase() + string.split('_').join(' ').slice(1);
|
|
return `${servo.id} ${name}`;
|
|
};
|
|
</script>
|
|
|
|
<div>
|
|
<div class="servo-selector">
|
|
<label for="servo-select">Select Servo:</label>
|
|
<select id="servo-select" class="bg-zinc-800" bind:value={selectedServo}>
|
|
{#each servos as servo}
|
|
<option value={servo.id}>{formatServo(servo)}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
{#if selectedServo !== null}
|
|
<div class="mt-5">
|
|
<h2>Servo {formatServo(servos[selectedServo])} Calibration</h2>
|
|
<label for="minPWM">Min PWM:</label>
|
|
<input
|
|
type="number"
|
|
id="minPWM"
|
|
class="bg-zinc-800"
|
|
value={servos[selectedServo].minPWM}
|
|
on:blur={(event) =>
|
|
updateServoValue(selectedServo ?? 0, 'minPWM', Number(event.target?.value))}
|
|
/>
|
|
|
|
<label for="maxPWM">Max PWM:</label>
|
|
<input
|
|
type="number"
|
|
id="maxPWM"
|
|
class="bg-zinc-800"
|
|
value={servos[selectedServo].maxPWM}
|
|
on:blur={(event) =>
|
|
updateServoValue(selectedServo ?? 0, 'maxPWM', Number(event.target?.value))}
|
|
/>
|
|
|
|
<label for="pwmFor180">PWM for 180°:</label>
|
|
<input
|
|
type="number"
|
|
id="pwmFor180"
|
|
class="bg-zinc-800"
|
|
value={servos[selectedServo].pwmFor180}
|
|
on:blur={(event) =>
|
|
updateServoValue(selectedServo ?? 0, 'pwmFor180', Number(event.target?.value))}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
</div>
|