🎩 Adds lots of magic

app/src/lib/models.ts

@@ -170,20 +170,23 @@ export type CameraSettings = {
 	hmirror: boolean;
 };
 
-export type servo = {
-	channel: number;
-	name: string;
-	inverted: boolean;
-	angle: number;
-	center_angle: number;
-	// min_pwm: number;
-	// max_pwm: number;
-	// min_angle: number;
-	// max_angle: number;
-};
-
 export type File = number;
 
 export interface Directory {
 	[key: string]: File | Directory;
-}
+}
+
+export type Servo = {
+	name: string;
+	channel: number;
+	inverted: boolean;
+	angle: number;
+	center_angle: number;
+};
+
+export type ServoConfiguration = {
+	is_active: boolean;
+	servo_pwm_frequency: number;
+	servo_oscillator_frequency: number;
+	servos: Servo[];
+};

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import type { servo } from "$lib/models";
-    export let servo: servo;
+    import type { Servo } from "$lib/models";
+    export let servo: Servo;
 </script>
 
 <div>

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

@@ -1,39 +1,51 @@
 <script lang="ts">
 	import SettingsCard from "$lib/components/SettingsCard.svelte";
-	import type { servo } from "$lib/models";
+	import type { ServoConfiguration } from "$lib/models";
     import MotorOutline from '~icons/mdi/motor-outline';
     import Servo from './servo.svelte';
+	import { api } from "$lib/api";
+	import Spinner from "$lib/components/Spinner.svelte";
 
-    let direction = 1
-    let angle = 0
-    let min_pwm = 1000
-    let max_pwm = 2000
+    let servo_config: ServoConfiguration
 
-    let min_angle = 0
-    let max_angle = 0
+    $: updateServoConfig(servo_config)
 
-    let servos:servo[] = [
-        {
-            channel: 0,
-            name: "Front right hip",
-            inverted: false,
-            angle: angle,
-            min_pwm: min_pwm,
-            max_pwm: max_pwm,
-            min_angle: min_angle,
-            max_angle: max_angle,
-            center_angle: 0
+    const updateServoConfig = async (servo_config: ServoConfiguration) => {
+        let result = await api.post('/api/servo/configuration', servo_config)
+    }
+
+    const getServoConfig = async () => {
+        let result = await api.get<ServoConfiguration>('/api/servo/configuration')
+        if (result.isOk()) {
+            servo_config = result.inner
+            return result.inner
         }
-    ]
-
+    }
 </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} />
+    {#await getServoConfig() }
+        <Spinner />
+    {:then _}
+        <div class="flex flex-col">
+            <h2 class="text-lg">General servo configuration</h2>
+            <span class="mb-1 flex justify-between items-center">
+                Servo Oscillator Frequency <input type="number" bind:value={servo_config.servo_oscillator_frequency} class="input input-bordered input-sm max-w-xs"/>
+            </span>
+            <span class="flex justify-between items-center mb-1">
+                Servo PWM Frequency <input type="number" bind:value={servo_config.servo_pwm_frequency} class="input input-bordered input-sm max-w-xs"/>
+            </span>
+            <span class="flex justify-between items-center gap-1">
+               Is active <input type="checkbox" bind:value={servo_config.is_active} class="toggle"/>
+           </span>
+        </div>
         <div class="divider"></div> 
-    {/each}
+        {#each servo_config.servos as servo}
+            <Servo {servo} />
+            <div class="divider"></div> 
+        {/each}
+    {/await}
 </SettingsCard>

app/src/routes/system/filesystem/FileSystem.svelte

@@ -9,7 +9,7 @@
     let filename = '';
 
     const getFiles = async () => {
-        const result = await api.get<Directory>('/api/files/list')
+        const result = await api.get<Directory>('/api/files')
         if (result.isOk()) {
             return result.inner;
         }