88 lines
1.9 KiB
Svelte
88 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
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, 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);
|
|
|
|
const connect = () => {
|
|
if (ws) {
|
|
ws.close();
|
|
}
|
|
|
|
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;
|
|
console.log(trackers);
|
|
};
|
|
};
|
|
|
|
const resize = () => {
|
|
width = image?.getBoundingClientRect().width ?? 0;
|
|
height = image?.getBoundingClientRect().height ?? 0;
|
|
|
|
if (debounce) {
|
|
clearTimeout(debounce);
|
|
}
|
|
|
|
debounce = setTimeout(() => {
|
|
connect();
|
|
}, 200);
|
|
};
|
|
|
|
onMount(() => {
|
|
connect();
|
|
|
|
width = image?.getBoundingClientRect().width ?? 0;
|
|
height = image?.getBoundingClientRect().height ?? 0;
|
|
});
|
|
</script>
|
|
|
|
<svelte:window onresize={resize} />
|
|
<div class="flex h-screen items-center justify-center">
|
|
<div class="relative">
|
|
<img
|
|
src="/revy25_scene_psn_tekst.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>
|