From 62a656cfda20f5e579beb5cc39716714633aceb7 Mon Sep 17 00:00:00 2001
From: Tobias Haugeland <tobias.haugeland@gmail.com>
Date: Fri, 31 Jan 2025 15:47:24 +0100
Subject: [PATCH] feat: add z posish

also osc shit
---
 backend/psn_server.py                    | 18 +++++---
 frontend/src/components/Container.svelte | 51 +++++++++++---------
 frontend/src/components/Drag.svelte      |  6 +++
 frontend/src/components/Slider.svelte    | 59 ++++++++++++++++++++++++
 frontend/src/utils/types.ts              |  1 +
 5 files changed, 108 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/Slider.svelte

diff --git a/backend/psn_server.py b/backend/psn_server.py
index 55e7b26..0fd1175 100644
--- a/backend/psn_server.py
+++ b/backend/psn_server.py
@@ -25,23 +25,26 @@ class TrackerData:
     id: int
     x: float
     y: float
+    z: 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):
+    def pic_to_scene_coords_3d(x, y, z) -> tuple[float, float, float]:
         scene_width = 8.0
         scene_depth = 6.3
-        tracker_height = 0.8 + 1.5 # Scene height + height of person
+        scene_height = 0.8
+        person_height = 1.5
 
         x_val = x * scene_width - (scene_width / 2)
         y_val = y * scene_depth
-        return x_val, y_val, tracker_height
+        z_val = scene_height + person_height
+        return x_val, y_val, z_val
 
     def to_tracker(self):
         tracker = psn.Tracker(self.id, f"Tracker {self.id}")
-        x, y, z = self.pic_to_scene_coords(self.x, self.y)
+        x, y, z = self.pic_to_scene_coords_3d(self.x, self.y, self.z)
         tracker.set_pos(psn.Float3(x, y, z))
         return tracker
 
@@ -87,6 +90,7 @@ async def handle_websocket(request):
         async for msg in ws:
             if msg.type == web.WSMsgType.TEXT:
                 # Each message is a single tracker object
+                logging.debug(f"Received ws update: {msg.data}")
                 update_tracker(msg.data, request.app)
                 await update_all_clients(request.app, ws)
 
@@ -133,7 +137,9 @@ async def background_tasks(app: web.Application):
 
 
 def filter_handler(address, *args) -> None:
-    logging.debug(f"{address}: {args}")
+    tracker_id = int(address.split("/")[-1])
+    x, y, z = args
+    logging.debug(f"id: {tracker_id} | x: {x}, y: {y}, z: {z}")
 
 async def receive_osc_data(app):
     dispatcher = Dispatcher()
@@ -157,7 +163,7 @@ def create_app():
     app["sock"] = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
 
     for i in range(NUM_TRACKERS):
-        app["trackers"][i] = TrackerData(i, 0, 0)
+        app["trackers"][i] = TrackerData(i, 0, 0, 0)
 
     app.on_shutdown.append(on_shutdown)
     app.cleanup_ctx.append(background_tasks)
diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte
index ec47afa..2d2054a 100644
--- a/frontend/src/components/Container.svelte
+++ b/frontend/src/components/Container.svelte
@@ -2,17 +2,19 @@
   import { onMount } from "svelte";
   import type { TrackerData } from "../utils/types";
   import Drag from "./Drag.svelte";
+  import Slider from "./Slider.svelte";
 
   let ws: WebSocket | null = $state(null);
   let image: HTMLImageElement | null = $state(null);
 
   let trackers: TrackerData[] = $state([
-    { id: 1, x: 0, y: 0 },
-    { id: 2, x: 0, y: 0 },
+    { id: 1, x: 0, y: 0, z: 0 },
+    { id: 2, x: 0, y: 0, z: 0 },
   ]);
 
   let width = $state(0);
   let height = $state(0);
+  let selected = $state(0);
 
   let debounce: number | null = $state(null);
 
@@ -30,6 +32,7 @@
         tracker.y *= height;
       }
       trackers = data;
+      console.log(trackers);
     };
   };
 
@@ -55,24 +58,30 @@
 </script>
 
 <svelte:window onresize={resize} />
-<div class="relative">
-  <img
-    src="/scene_drawing.png"
-    alt=""
-    bind:this={image}
-    class="max-w-screen max-h-screen"
-    onload={resize}
-  />
-  <div class="absolute inset-0 border border-red-500">
-    {#each trackers as tracker}
-      <Drag
-        bind:id={tracker.id}
-        bind:x={tracker.x}
-        bind:y={tracker.y}
-        bind:width
-        bind:height
-        {ws}
-      />
-    {/each}
+<div class="flex h-screen items-center justify-center">
+  <div class="relative">
+    <img
+      src="/scene_drawing.png"
+      alt=""
+      bind:this={image}
+      class="max-w-screen max-h-screen"
+      onload={resize}
+    />
+    <div class="absolute inset-0 border border-red-500">
+      {#each trackers as tracker}
+        <Drag
+          bind:id={tracker.id}
+          bind:x={tracker.x}
+          bind:y={tracker.y}
+          bind:z={tracker.z}
+          bind:width
+          bind:height
+          bind:selected
+          {ws}
+        />
+      {/each}
+    </div>
   </div>
+
+  <Slider bind:trackers {ws} bind:height bind:width bind:selected />
 </div>
diff --git a/frontend/src/components/Drag.svelte b/frontend/src/components/Drag.svelte
index 5ea1260..331db35 100644
--- a/frontend/src/components/Drag.svelte
+++ b/frontend/src/components/Drag.svelte
@@ -3,18 +3,22 @@
     id: number;
     x: number;
     y: number;
+    z: number;
     width: number;
     height: number;
     ws: WebSocket | null;
+    selected: number;
   };
 
   let {
     id = $bindable(),
     x = $bindable(),
     y = $bindable(),
+    z = $bindable(),
     ws = $bindable(),
     width = $bindable(),
     height = $bindable(),
+    selected = $bindable(),
   }: Props = $props();
 
   let element: HTMLElement;
@@ -33,6 +37,7 @@
 
   function onPointerDown(e: PointerEvent) {
     element!.setPointerCapture(e.pointerId);
+    selected = id;
     capturedPointerId = e.pointerId;
   }
   function onPointerUp(e: PointerEvent) {
@@ -58,6 +63,7 @@
         id: id,
         x: x_send,
         y: y_send,
+        z: z,
       }),
     );
   }
diff --git a/frontend/src/components/Slider.svelte b/frontend/src/components/Slider.svelte
new file mode 100644
index 0000000..fb5eca0
--- /dev/null
+++ b/frontend/src/components/Slider.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { TrackerData } from "$lib/utils/types";
+
+  type Props = {
+    selected: number;
+    trackers: TrackerData[];
+    ws: WebSocket | null;
+    width: number;
+    height: number;
+  };
+
+  let {
+    selected = $bindable(),
+    trackers = $bindable(),
+    ws,
+    width = $bindable(),
+    height = $bindable(),
+  }: Props = $props();
+
+  const onchange = () => {
+    const x_send = trackers[selected].x / width;
+    const y_send = trackers[selected].y / height;
+    ws?.send(
+      JSON.stringify({
+        id: trackers[selected].id,
+        x: x_send,
+        y: y_send,
+        z: trackers[selected].z,
+      }),
+    );
+  };
+
+  let z_viz = $derived((trackers[selected].z * 2).toFixed(2))
+</script>
+
+<div>
+  <label for="z">Z</label>
+  <input
+    type="range"
+    id="z"
+    min="0"
+    max="1"
+    step="0.01"
+    oninput="{onchange}"
+    bind:value={trackers[selected].z}
+  />
+  <output for="z">{z_viz} m</output>
+</div>
+
+<style>
+  input {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    appearance: slider-vertical;
+    width: 26px;
+    height: 50%;
+    vertical-align: bottom;
+  }
+</style>
diff --git a/frontend/src/utils/types.ts b/frontend/src/utils/types.ts
index 66e130b..7e5a6fb 100644
--- a/frontend/src/utils/types.ts
+++ b/frontend/src/utils/types.ts
@@ -2,4 +2,5 @@ export interface TrackerData {
   id: number;
   x: number;
   y: number;
+  z: number;
 }