use 0 to 1 as coordinates, not working properly

backend/psn_server.py

@@ -22,10 +22,23 @@ class TrackerData:
     x: float
     y: float
 
+    # Convert from internal coordinates to actual scene coordinates
+    # Internal representation is float values from 0 to 1 for x and y
+    # Thus we need to know the max size and aspect ratio of the scene
+    # x is the width of the scene, y is the depth, z is the height
+    def pic_to_scene_coords(x, y):
+        scene_width = 8.0
+        scene_depth = 6.3
+        tracker_height = 0.8 + 1.5 # Scene height + height of person
+
+        x_val = x * scene_width - (scene_width / 2)
+        y_val = y * scene_depth
+        return x_val, y_val, tracker_height
+
     def to_tracker(self):
         tracker = psn.Tracker(self.id, f"Tracker {self.id}")
-        x, y = pic_to_scene_coords(self.x, self.y)
-        tracker.set_pos(psn.Float3(x, y, 0))
+        x, y, z = self.pic_to_scene_coords(self.x, self.y)
+        tracker.set_pos(psn.Float3(x, y, z))
         return tracker
 
 
@@ -49,10 +62,6 @@ def get_elapsed_time_ms():
     return get_time_ms() - START_TIME
 
 
-def pic_to_scene_coords(x, y):
-    return x / 200, -y / 200
-
-
 async def update_all_clients(app: web.Application, ws: web.WebSocketResponse = None):
     for ws_send in app["ws_clients"]:
         if ws_send == ws:

frontend/src/components/Container.svelte

@@ -23,6 +23,10 @@
     ws = new WebSocket("/ws");
     ws.onmessage = (event) => {
       const data = JSON.parse(event.data);
+      for (const tracker of data) {
+        tracker.x *= width
+        tracker.y *= height
+        }
       trackers = data;
     };
 

frontend/src/components/Drag.svelte

@@ -19,15 +19,15 @@
 
   let element: HTMLElement;
 
-  let vis_x = $state(0);
+  // let vis_x = $state(0);
 
-  let vis_y = $state(0);
+  // let vis_y = $state(0);
 
-  $effect(() => {
-    vis_x = x + width / 2 - (element.clientWidth ?? 0) / 2;
+  // $effect(() => {
+  //   vis_x = x + width / 2 - (element.clientWidth ?? 0) / 2;
 
-    vis_y = y + height / 2 - (element.clientHeight ?? 0) / 2;
-  });
+  //   vis_y = y + height / 2 - (element.clientHeight ?? 0) / 2;
+  // });
 
   let capturedPointerId: number | null = $state(null);
 
@@ -45,14 +45,19 @@
     e.preventDefault();
     e.stopPropagation();
 
-    x = Math.min(width / 2, Math.max(-width / 2, x + e.movementX));
-    y = Math.min(height / 2, Math.max(-height / 2, y + e.movementY));
+    // x = Math.min(width / 2, Math.max(-width / 2, x + e.movementX));
+    // y = Math.min(height / 2, Math.max(-height / 2, y + e.movementY));
 
+    x = Math.min(width, Math.max(0, x + e.movementX));
+    y = Math.min(height, Math.max(0, y + e.movementY));
+
+    const x_send = x / width;
+    const y_send = y / height;
     ws?.send(
       JSON.stringify({
         id,
-        x,
-        y,
+        x_send,
+        y_send,
       }),
     );
   }
@@ -63,7 +68,7 @@
   onpointerdown={onPointerDown}
   onpointerup={onPointerUp}
   onpointermove={onPointerMove}
-  style={`transform: translate(${vis_x}px, ${vis_y}px)`}
+  style={`transform: translate(${x}px, ${y}px)`}
   class="absolute flex h-40 w-40 touch-none select-none items-center justify-center rounded-full border-red-400 bg-red-400"
 >
   Tracker {id}