🏎️ Updates servo controller to reflect rl angles

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

@@ -13,7 +13,7 @@
 <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"/>
+        Is inverted <input type="checkbox" bind:checked={servo.inverted} class="toggle"/>
     </div>
     <div>
         Middle position <input type="number" bind:value={servo.center_angle} class="input input-bordered input-sm max-w-xs"/>

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

@@ -3,100 +3,56 @@
 	import type { ServoConfiguration, Servo } from '$lib/models';
 	import MotorOutline from '~icons/mdi/motor-outline';
 	import ServoController from './servo.svelte';
-	import { api } from '$lib/api';
 	import Spinner from '$lib/components/Spinner.svelte';
+
 	import { socket } from '$lib/stores';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { throttler as Throttler } from '$lib/utilities';
 
-	let servo_config: ServoConfiguration;
-	let servos: Servo[];
-	let last_servo_config: ServoConfiguration;
+	let isLoading = false;
 
-	let isLoading = true;
+    let active = false
 
-	$: updateServoConfig(servo_config, servos);
+    let servoId = 0
 
-	const updateServoConfig = async (servo_config: ServoConfiguration, servos: Servo[]) => {
-		if (!servo_config) return;
-		const changes: { [key: string]: any } = {};
-		for (const key of Object.keys(servo_config)) {
-			if (key == 'servos') {
-				for (let i = 0; i < servo_config.servos.length; i++) {
-					for (const servo_key of Object.keys(servo_config.servos[i])) {
-						if (
-							JSON.stringify(servo_config.servos[i][servo_key as keyof Servo]) !==
-							JSON.stringify(last_servo_config.servos[i][servo_key as keyof Servo])
-						) {
-							if (!changes.servos) changes.servos = [];
-							if (!changes.servos[i]) changes.servos[i] = {};
-							changes.servos[i][servo_key as keyof Servo] =
-								servo_config.servos[i][servo_key as keyof Servo];
-							changes.servos[i].channel = servo_config.servos[i].channel;
-						}
-					}
-				}
-				continue;
-			}
-			if (
-				JSON.stringify(servo_config[key as keyof ServoConfiguration]) !==
-				JSON.stringify(last_servo_config[key as keyof ServoConfiguration])
-			) {
-				changes[key as keyof ServoConfiguration] = servo_config[key as keyof ServoConfiguration];
-			}
-		}
-
-		if (Object.keys(changes).length > 0) {
-			socket.sendEvent('servoConfiguration', changes);
-			last_servo_config = structuredClone(servo_config);
-		}
-	};
+    const throttler = new Throttler()
 
     const sweep = (event:any) => {
         let channel = event.detail.channel;
         socket.sendEvent('servoConfiguration', {servos:[{channel, sweep: true}]});
     };
 
-	onMount(() => {
-		socket.on('servoConfiguration', (data: ServoConfiguration) => {
-			isLoading = false;
-			servo_config = data;
-			servos = data.servos;
-			last_servo_config = structuredClone(data);
-		});
-	});
+    const activateServo = (event:any) => {
+        socket.sendEvent('servoState', {'active':1});
+    };
+
+    const deactivateServo = (event:any) => {
+        socket.sendEvent('servoState', {'active':0});
+    };
+
+    let pwm = 306;
+
+    const updatePWM = () => {
+        throttler.throttle(() => {
+            socket.sendEvent('servoPWM', {servo_id:servoId, pwm});
+        }, 10)
+    }
 </script>
 
 <SettingsCard collapsible={false}>
 	<MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
 	<span slot="title">Servo</span>
+    <input type="range" min="200" max="400" bind:value={pwm} on:input={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 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:checked={servo_config.is_active} class="toggle" />
-			</span>
-		</div>
-		<div class="divider"></div>
-		{#each servos as servo}
-			<ServoController bind:servo on:sweep={sweep} />
-			<div class="divider"></div>
-		{/each}
+            <span class="flex items-center gap-2">
+                <label for="servoId">Servo active{servoId}</label>
+                <input type="checkbox" class="toggle" bind:checked={active} on:change={active ? deactivateServo : activateServo}>
+            </span>
+        </div>
 	{/if}
 </SettingsCard>

app/src/routes/statusbar.svelte

@@ -13,6 +13,7 @@
     import MdiWeatherSunny from '~icons/mdi/weather-sunny';
     import MdiMoonAndStars from '~icons/mdi/moon-and-stars';
 	import { api } from '$lib/api';
+	import { mode, modes, socket } from '$lib/stores';
 
 	const postSleep = async () => await api.post('/api/sleep')
 
@@ -30,6 +31,10 @@
 			}
 		});
 	}
+
+    const deactivate = async () => {
+        mode.set(modes.indexOf('deactivated'));
+    }
 </script>
 
 <div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2">
@@ -40,6 +45,11 @@
 		>
 		<h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1>
 	</div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="indicator flex-none" on:click={deactivate}>
+		<Power class="h-7 w-7"/>
+	</div>
 	<div class="indicator flex-none">
 		<UpdateIndicator />
 	</div>