More sync

app2/src/lib/components/Visualization.svelte

@@ -3,7 +3,7 @@
 	import { BufferGeometry, Line, LineBasicMaterial, Vector3, type NormalBufferAttributes } from 'three';
 	import uzip from 'uzip';
 	import { model } from '$lib/stores';
-	import { footColor, isEmbeddedApp, location, toeWorldPositions } from '$lib/utilities';
+	import { footColor, isEmbeddedApp, toeWorldPositions } from '$lib/utilities';
 	import { fileService } from '$lib/services';
 	import { servoAngles, mpu, jointNames } from '$lib/stores';
 	import SceneBuilder from '$lib/sceneBuilder';
@@ -35,11 +35,14 @@
         await cacheModelFiles()
         await createScene();
         if (!isEmbeddedApp && panel) createPanel();
-        servoAngles.subscribe(angles => {
+        servoAngles.subscribe(updateAnglesFromStore)
-            modelTargetAngles = angles
-        })
 	});
     
+    const updateAnglesFromStore = (angles: number[]) => {
+        if (sceneManager.isDragging) return
+        modelTargetAngles = angles;
+    }
+
 	onDestroy(() => {
         canvas.remove()
         gui_panel?.destroy()
@@ -68,6 +71,7 @@
 
 	const updateAngles = (name: string, angle: number) => {
 		modelTargetAngles[$jointNames.indexOf(name)] = angle * (180 / Math.PI);
+        servoAngles.set(modelTargetAngles)
 	};
 
 	const createScene = async () => {

app2/src/lib/sceneBuilder.ts

@@ -73,6 +73,7 @@ export default class SceneBuilder {
 	public liveStreamTexture: CanvasTexture;
 	private fog: FogExp2;
 	private isLoaded: boolean = false;
+	public isDragging: boolean = false;
 	highlightMaterial: any;
 
 	constructor() {
@@ -292,8 +293,14 @@ export default class SceneBuilder {
 			this.setJointValue(joint.name, angle);
 			updateAngle(joint.name, angle);
 		};
-		dragControls.onDragStart = () => (this.controls.enabled = false);
+		dragControls.onDragStart = () => {
-		dragControls.onDragEnd = () => (this.controls.enabled = true);
+			this.controls.enabled = false;
+			this.isDragging = true;
+		};
+		dragControls.onDragEnd = () => {
+			this.controls.enabled = true;
+			this.isDragging = false;
+		};
 		dragControls.onHover = (joint: URDFMimicJoint) =>
 			this.highlightLinkGeometry(joint, false, highlightMaterial);
 		dragControls.onUnhover = (joint: URDFMimicJoint) =>

app2/src/routes/+layout.svelte

@@ -14,7 +14,8 @@
 	import Menu from './menu.svelte';
 	import Statusbar from './statusbar.svelte';
 	import Login from './login.svelte';
-	import { mode, outControllerData, servoAngles, socketData } from '$lib/stores';
+	import { get, type Writable } from 'svelte/store';
+	import { isConnected, mode, outControllerData, servoAngles, socketData } from '$lib/stores';
 	import { throttler } from '$lib/utilities';
 
 	export let data: LayoutData;
@@ -29,12 +30,18 @@
         connectToSocket()
         addPublisher(outControllerData)
         addPublisher(mode)
+        addPublisher(servoAngles as unknown as Writable<WebsocketOutData>, "angles")
 	});
 
     const connectToSocket = () => {
         const ws_token = $page.data.features.security ? '?access_token=' + $user.bearer_token : '';
 
 	    socket = new WebSocket('ws://' + $page.url.host + '/ws' + ws_token);
+        socket.onopen = (event) => isConnected.set(true);
+        socket.onclose = (event) => {
+            isConnected.set(false)
+            notifications.error('Websocket disconnected', 5000);
+        };
         socket.onmessage = ((event: MessageEvent) => {
             const message = JSON.parse(event.data);
             if (message.type === 'log') {

app2/src/routes/controller/+layout.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
 	import Controls from '$lib/components/Controls.svelte';
+	import { isConnected } from '$lib/stores';
 </script>
-
 <div>
+    {#if $isConnected}
         <Controls />
         <slot/>
+    {:else}
+        <div class="flex justify-center items-center">
+            <h2>Waiting for connection</h2>
+        </div>
+    {/if}
 </div>

esp32/src/ActuatorStateService.h

@@ -46,7 +46,7 @@ public:
             if (actuatorState.state[i] != array[i].as<int16_t>())
             {
                 actuatorState.state[i] = array[i];
-                changed = true;
+                //changed = true;
             }
         }
         return changed ? StateUpdateResult::CHANGED : StateUpdateResult::UNCHANGED;