feat: add z posish

also osc shit

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>

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,
       }),
     );
   }

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>

frontend/src/utils/types.ts

@@ -2,4 +2,5 @@ export interface TrackerData {
   id: number;
   x: number;
   y: number;
+  z: number;
 }