♻️ Moves throttling to socket out

app/src/lib/components/Visualization.svelte

@@ -14,7 +14,7 @@
         kinematicData,
         mode,
         model,
-        outControllerData,
+        input,
         servoAnglesOut,
         servoAngles,
         mpu,
@@ -23,7 +23,7 @@
         walkGait,
         walkGaitToMode
     } from '$lib/stores'
-    import { populateModelCache, throttler, getToeWorldPositions } from '$lib/utilities'
+    import { populateModelCache, getToeWorldPositions } from '$lib/utilities'
     import SceneBuilder from '$lib/sceneBuilder'
     import { lerp, degToRad } from 'three/src/math/MathUtils'
     import { GUI } from 'three/addons/libs/lil-gui.module.min.js'
@@ -55,7 +55,6 @@
     let currentModelAngles: number[] = new Array(12).fill(0)
     let modelTargetAngles: number[] = new Array(12).fill(0)
     let gui_panel: GUI
-    let Throttler = new throttler()
 
     let target: Object3D<Object3DEventMap>
 
@@ -169,10 +168,7 @@
 
     const updateAngles = (name: string, angle: number) => {
         modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI)
-        Throttler.throttle(
+        servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num)))
-            () => servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num))),
-            100
-        )
     }
 
     const createScene = async () => {
@@ -275,15 +271,15 @@
 
     const update_gait = () => {
         if (sceneManager.isDragging || !settings['Internal kinematic']) return
-        const controlData = get(outControllerData)
+        const controlData = get(input)
         const data = {
-            lx: controlData[0],
+            lx: controlData.left.x,
-            ly: controlData[1],
+            ly: controlData.left.y,
-            rx: controlData[2],
+            rx: controlData.right.x,
-            ry: controlData[3],
+            ry: controlData.right.y,
-            h: controlData[4],
+            h: controlData.height,
-            s: controlData[5],
+            s: controlData.speed,
-            s1: controlData[6]
+            s1: controlData.s1
         }
 
         let planner = planners[get(mode)]

app/src/lib/utilities/buffer-utilities.ts

@@ -1,4 +1,4 @@
-export class throttler {
+export class Throttler {
     private _throttlePause: boolean
     constructor() {
         this._throttlePause = false

app/src/routes/+layout.svelte

@@ -14,7 +14,7 @@
         ModesEnum,
         kinematicData,
         mode,
-        outControllerData,
+        input,
         servoAngles,
         servoAnglesOut,
         socket,
@@ -24,6 +24,7 @@
     } from '$lib/stores'
     import { type Analytics, type DownloadOTA } from '$lib/types/models'
     import { MessageTopic } from '$lib/types/models'
+    import { Throttler } from '$lib/utilities'
 
     interface Props {
         children?: import('svelte').Snippet
@@ -32,6 +33,7 @@
     let { children }: Props = $props()
 
     const features = useFeatureFlags()
+    const throttler = new Throttler()
 
     onMount(async () => {
         const ws = $apiLocation ? $apiLocation : window.location.host
@@ -39,11 +41,20 @@
 
         addEventListeners()
 
-        outControllerData.subscribe(data => socket.sendEvent(MessageTopic.input, data))
+        input.subscribe(data =>
+            socket.sendEvent(
+                MessageTopic.input,
+                throttler.throttle(() => Object.values(data), 40)
+            )
+        )
         mode.subscribe(data => socket.sendEvent(MessageTopic.mode, data))
         walkGait.subscribe(data => socket.sendEvent(MessageTopic.gait, data))
-        servoAnglesOut.subscribe(data => socket.sendEvent(MessageTopic.angles, data))
+        servoAnglesOut.subscribe(data =>
-        kinematicData.subscribe(data => socket.sendEvent(MessageTopic.position, data))
+            throttler.throttle(() => socket.sendEvent(MessageTopic.angles, data), 100)
+        )
+        kinematicData.subscribe(data =>
+            throttler.throttle(() => socket.sendEvent(MessageTopic.position, data), 100)
+        )
     })
 
     onDestroy(() => {

app/src/routes/controller/Controls.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
     import nipplejs from 'nipplejs'
     import { onMount } from 'svelte'
-    import { capitalize, throttler } from '$lib/utilities'
+    import { capitalize } from '$lib/utilities'
     import {
         input,
-        outControllerData,
         mode,
         modes,
         type Modes,
@@ -18,11 +17,9 @@
     import { gamepadAxes, gamepadButtonsEdges, hasGamepad } from '$lib/stores/gamepad'
     import { notifications } from '$lib/components/toasts/notifications'
 
-    let throttle = new throttler()
     let left: nipplejs.JoystickManager
     let right: nipplejs.JoystickManager
 
-    let throttle_timing = 40
     let data = new Array(7)
 
     $effect(() => {
@@ -46,12 +43,12 @@
         if (b[3]?.justPressed) mode.set(0)
         if (b[12]?.justPressed)
             input.update(inputData => {
-                inputData['height'] = Math.min(inputData.height + 0.1, 1)
+                inputData.height = Math.min(inputData.height + 0.1, 1)
                 return inputData
             })
         if (b[13]?.justPressed)
             input.update(inputData => {
-                inputData['height'] = Math.min(inputData.height - 0.1, 1)
+                inputData.height = Math.min(inputData.height - 0.1, 1)
                 return inputData
             })
     })
@@ -84,19 +81,6 @@
             inputData[key] = data
             return inputData
         })
-        throttle.throttle(updateData, throttle_timing)
-    }
-
-    const updateData = () => {
-        data[0] = $input.left.x
-        data[1] = $input.left.y
-        data[2] = $input.right.x
-        data[3] = $input.right.y
-        data[4] = $input.height
-        data[5] = $input.speed
-        data[6] = $input.s1
-
-        outControllerData.set(data)
     }
 
     const handleKeyup = (event: KeyboardEvent) => {
@@ -110,7 +94,6 @@
             if (event.key === 'ArrowRight') data.right.x = down ? -1 : 0
             return data
         })
-        throttle.throttle(updateData, throttle_timing)
     }
 
     const handleRange = (event: Event, key: 'speed' | 'height' | 's1') => {
@@ -120,7 +103,6 @@
             inputData[key] = value
             return inputData
         })
-        throttle.throttle(updateData, throttle_timing)
     }
 
     const changeMode = (modeValue: Modes) => {

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { socket } from '$lib/stores'
     import { MessageTopic } from '$lib/types/models'
-    import { throttler as Throttler } from '$lib/utilities'
+    import { Throttler } from '$lib/utilities'
 
     let { servoId = $bindable(0), pwm = $bindable(306) } = $props()
 

app/tests/unit/throttler.spec.ts

@@ -1,13 +1,13 @@
 import { describe, it, expect, beforeEach, afterEach, vitest } from 'vitest'
-import { throttler } from '../../src/lib/utilities/buffer-utilities'
+import { Throttler } from '../../src/lib/utilities/buffer-utilities'
 
 describe('throttler', () => {
-    let throttleInstance: throttler
+    let throttleInstance: Throttler
     let callback: () => void
 
     beforeEach(() => {
         vitest.useFakeTimers()
-        throttleInstance = new throttler()
+        throttleInstance = new Throttler()
         callback = vitest.fn()
     })