🦼 Adds servo calibration UI

app/src/routes/menu.svelte

@@ -7,6 +7,7 @@
     import Devices from '~icons/mdi/devices'
     import Camera from '~icons/mdi/camera-outline';
     import Rotate3d from '~icons/mdi/rotate-3d';
+    import MotorOutline from '~icons/mdi/motor-outline';
 	import Health from '~icons/mdi/stethoscope';
 	import Folder from '~icons/mdi/folder-outline';
 	import Update from '~icons/mdi/reload';
@@ -65,6 +66,12 @@
 					href: '/peripherals/camera',
 					feature: $page.data.features.camera,
 				},
+                {
+					title: 'Servo',
+					icon: MotorOutline,
+					href: '/peripherals/servo',
+					feature: true,
+				},
                 {
 					title: 'IMU',
 					icon: Rotate3d,

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Servos from './servos.svelte';
+</script>
+
+<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
+	<Servos />
+</div>

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

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+	return {
+		title: 'Servo'
+	};
+}) satisfies PageLoad;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { servo } from "$lib/models";
+    export let servo: servo;
+</script>
+
+<div>
+    <h2 class="text-lg">{ servo.name }</h2>
+    <div class="flex gap-2 items-center">
+        Is inverted <input type="checkbox" checked={servo.inverted} class="checkbox"/>
+    </div>
+    <div class="relative mb-6">
+        <label for="labels-range-input" class="sr-only">Labels range</label>
+        <input id="labels-range-input" type="range" value="1000" min="100" max="1500" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
+        <span class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6">Min ($100)</span>
+        <span class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">$500</span>
+        <span class="text-sm text-gray-500 dark:text-gray-400 absolute start-2/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">$1000</span>
+        <span class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">Max ($1500)</span>
+    </div>
+    <button class="btn btn-ghost rounded-btn">Sweep range</button>
+</div>

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import SettingsCard from "$lib/components/SettingsCard.svelte";
+	import type { servo } from "$lib/models";
+    import MotorOutline from '~icons/mdi/motor-outline';
+    import Servo from './servo.svelte';
+
+    let direction = 1
+    let angle = 0
+    let min_pwm = 1000
+    let max_pwm = 2000
+
+    let min_angle = 0
+    let max_angle = 0
+
+    let servos:servo[] = [
+        {
+            channel: 0,
+            name: "Front right hip",
+            direction: direction,
+            angle: angle,
+            min_pwm: min_pwm,
+            max_pwm: max_pwm,
+            min_angle: min_angle,
+            max_angle: max_angle,
+            center_angle: 0
+        }
+    ]
+
+</script>
+
+<SettingsCard collapsible={false}>
+    <MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    <span slot="title">Servo</span>
+
+    {#each servos as servo}
+        <Servo {servo} />
+        <div class="divider"></div> 
+    {/each}
+</SettingsCard>