diff --git a/backend/psn_server.py b/backend/psn_server.py index 9eb8415..93abb54 100644 --- a/backend/psn_server.py +++ b/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: diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte index a65f6be..8d5f4c0 100644 --- a/frontend/src/components/Container.svelte +++ b/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; }; diff --git a/frontend/src/components/Drag.svelte b/frontend/src/components/Drag.svelte index da3c57f..ffc957f 100644 --- a/frontend/src/components/Drag.svelte +++ b/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}