💄 Simplify calibration UX

app/src/routes/peripherals/servo/+page.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-    import Servos from './servos.svelte';
-    import ServoTable from './ServoTable.svelte';
+  import Servos from './servos.svelte'
+  import ServoTable from './ServoTable.svelte'
+
+  let servoId = $state(0)
+  let pwm = $state(306)
 </script>
 
 <div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
-    <Servos />
-    <ServoTable />
+  <Servos bind:servoId bind:pwm />
+  <ServoTable {servoId} {pwm} />
 </div>

app/src/routes/peripherals/servo/ServoTable.svelte

@@ -1,73 +1,113 @@
 <script lang="ts">
-    import { api } from '$lib/api';
-    import { onMount } from 'svelte';
-    interface Props {
-        data?: any;
+  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
     }
+  })
 
-    let { data = $bindable({
-        servos: []
-    }) }: Props = $props();
-
-    const updateValue = (event, index, key) => {
-        data.servos[index][key] = event.target.innerText;
-    };
-
-    const syncConfig = async () => {
-        await api.post('/api/servo/config', data);
-    };
-
-    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 class="overflow-x-auto">
-    <table class="table table-xs">
-        <thead>
-            <tr>
-                <th>Center PWM</th>
-                <th>Center Angle</th>
-                <th>Direction</th>
-                <th>Conversion</th>
-            </tr>
-        </thead>
-        <tbody>
-            {#each data.servos as servo, index}
-                <tr>
-                    <td
-                        contenteditable="true"
-                        onblur={syncConfig}
-                        oninput={event => updateValue(event, index, 'center_pwm')}
-                    >
-                        {servo.center_pwm}
-                    </td>
-                    <td
-                        contenteditable="true"
-                        onblur={syncConfig}
-                        oninput={event => updateValue(event, index, 'center_angle')}
-                    >
-                        {servo.center_angle}
-                    </td>
-                    <td
-                        contenteditable="true"
-                        onblur={syncConfig}
-                        oninput={event => updateValue(event, index, 'direction')}
-                    >
-                        {servo.direction}
-                    </td>
-                    <td
-                        contenteditable="true"
-                        onblur={syncConfig}
-                        oninput={event => updateValue(event, index, 'conversion')}
-                    >
-                        {servo.conversion}
-                    </td>
-                </tr>
-            {/each}
-        </tbody>
-    </table>
+<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>

app/src/routes/peripherals/servo/servos.svelte

@@ -1,38 +1,23 @@
 <script lang="ts">
-  import SettingsCard from '$lib/components/SettingsCard.svelte'
-  import type { ServoConfiguration, Servo } from '$lib/types/models'
-  import Spinner from '$lib/components/Spinner.svelte'
-
   import { socket } from '$lib/stores'
-  import { onDestroy, onMount } from 'svelte'
   import { throttler as Throttler } from '$lib/utilities'
-  import { MotorOutline } from '$lib/components/icons'
 
-  let isLoading = false
+  let { servoId = $bindable(0), pwm = $bindable(306) } = $props()
 
   let active = $state(false)
 
-  let servoId = $state(0)
-
   let allServos = $state(false)
 
   const throttler = new Throttler()
 
-  const sweep = (event: any) => {
-    let channel = event.detail.channel
-    socket.sendEvent('servoConfiguration', { servos: [{ channel, sweep: true }] })
-  }
-
-  const activateServo = (event: any) => {
+  const activateServo = () => {
     socket.sendEvent('servoState', { active: 1 })
   }
 
-  const deactivateServo = (event: any) => {
+  const deactivateServo = () => {
     socket.sendEvent('servoState', { active: 0 })
   }
 
-  let pwm = $state(306)
-
   const updatePWM = () => {
     throttler.throttle(() => {
       socket.sendEvent('servoPWM', { servo_id: servoId, pwm })
@@ -44,43 +29,35 @@
   }
 </script>
 
-<SettingsCard collapsible={false}>
-  {#snippet icon()}
-    <MotorOutline class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-  {/snippet}
-  {#snippet title()}
-    <span>Servo</span>
-  {/snippet}
-  {pwm}
-  <input
-    type="range"
-    min="80"
-    max="600"
-    bind:value={pwm}
-    oninput={updatePWM}
-    class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" />
+<div class="flex flex-col">
+  <h2 class="text-lg">General servo configuration</h2>
+  <span>Servo</span>
+  <span>{pwm}</span>
+</div>
+<input
+  type="range"
+  min="80"
+  max="600"
+  bind:value={pwm}
+  oninput={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>
-        <label for="mode">All servoes</label>
-        <input type="checkbox" class="toggle" bind:checked={allServos} onchange={toggleMode} />
-      </span>
-      <span>
-        <label for="active">Active</label>
-        <input
-          type="checkbox"
-          class="toggle"
-          bind:checked={active}
-          onchange={active ? activateServo : deactivateServo} />
-      </span>
-      <span class="flex items-center gap-2">
-        <label for="servoId">Servo active {servoId}</label>
-        <input type="range" min="0" max="11" step="1" bind:value={servoId} />
-      </span>
-    </div>
-  {/if}
-</SettingsCard>
+<div class="flex flex-col">
+  <h2 class="text-lg">General servo configuration</h2>
+  <span>
+    <label for="mode">All servoes</label>
+    <input type="checkbox" class="toggle" bind:checked={allServos} onchange={toggleMode} />
+  </span>
+  <span>
+    <label for="active">Active</label>
+    <input
+      type="checkbox"
+      class="toggle"
+      bind:checked={active}
+      onchange={active ? activateServo : deactivateServo} />
+  </span>
+  <span class="flex items-center gap-2">
+    <label for="servoId">Servo active {servoId}</label>
+    <input type="range" min="0" max="11" step="1" bind:value={servoId} />
+  </span>
+</div>