From 4da929a6de0d2c2ccf24c623c802fce88b0b7fc9 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Fri, 2 Jan 2026 23:07:44 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Moves=20throttling=20to=20?=
 =?UTF-8?q?socket=20out?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/Visualization.svelte   | 26 ++++++++-----------
 app/src/lib/utilities/buffer-utilities.ts     |  2 +-
 app/src/routes/+layout.svelte                 | 19 +++++++++++---
 app/src/routes/controller/Controls.svelte     | 24 +++--------------
 .../routes/peripherals/servo/servos.svelte    |  2 +-
 app/tests/unit/throttler.spec.ts              |  6 ++---
 6 files changed, 34 insertions(+), 45 deletions(-)

diff --git a/app/src/lib/components/Visualization.svelte b/app/src/lib/components/Visualization.svelte
index d252c7f..5d1a6f1 100644
--- a/app/src/lib/components/Visualization.svelte
+++ b/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))),
-            100
-        )
+        servoAnglesOut.set(modelTargetAngles.map(num => Math.round(num)))
     }
 
     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],
-            ly: controlData[1],
-            rx: controlData[2],
-            ry: controlData[3],
-            h: controlData[4],
-            s: controlData[5],
-            s1: controlData[6]
+            lx: controlData.left.x,
+            ly: controlData.left.y,
+            rx: controlData.right.x,
+            ry: controlData.right.y,
+            h: controlData.height,
+            s: controlData.speed,
+            s1: controlData.s1
         }
 
         let planner = planners[get(mode)]
diff --git a/app/src/lib/utilities/buffer-utilities.ts b/app/src/lib/utilities/buffer-utilities.ts
index 039349d..8e8cef9 100644
--- a/app/src/lib/utilities/buffer-utilities.ts
+++ b/app/src/lib/utilities/buffer-utilities.ts
@@ -1,4 +1,4 @@
-export class throttler {
+export class Throttler {
     private _throttlePause: boolean
     constructor() {
         this._throttlePause = false
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index efe2843..1525959 100644
--- a/app/src/routes/+layout.svelte
+++ b/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))
-        kinematicData.subscribe(data => socket.sendEvent(MessageTopic.position, data))
+        servoAnglesOut.subscribe(data =>
+            throttler.throttle(() => socket.sendEvent(MessageTopic.angles, data), 100)
+        )
+        kinematicData.subscribe(data =>
+            throttler.throttle(() => socket.sendEvent(MessageTopic.position, data), 100)
+        )
     })
 
     onDestroy(() => {
diff --git a/app/src/routes/controller/Controls.svelte b/app/src/routes/controller/Controls.svelte
index 19a651b..4f6f6af 100644
--- a/app/src/routes/controller/Controls.svelte
+++ b/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) => {
diff --git a/app/src/routes/peripherals/servo/servos.svelte b/app/src/routes/peripherals/servo/servos.svelte
index 40f0349..421747e 100644
--- a/app/src/routes/peripherals/servo/servos.svelte
+++ b/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()
 
diff --git a/app/tests/unit/throttler.spec.ts b/app/tests/unit/throttler.spec.ts
index c4962cd..ed4d685 100644
--- a/app/tests/unit/throttler.spec.ts
+++ b/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()
     })