henrik/followspot-psn-mirror
1
0
Fork 0
mirror of https://github.com/AbaTekNTNU/followspot-psn.git synced 2025-12-06 13:54:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Test

Browse Source
This commit is contained in:
Henrik Tøn Løvhaug
2024-12-02 17:02:44 +01:00
parent 742338f515
commit ffc15e4d52
7 changed files with 76 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
compose.yaml
View File

@@ -1,6 +1,4 @@
services:
followspot-psn:
build: .
ports:
- "8000:8000"
network_mode: host

2
frontend/package.json
View File

@@ -13,7 +13,7 @@
"@astrojs/svelte": "^6.0.2",
"@astrojs/tailwind": "^5.1.2",
"astro": "^4.16.16",
"svelte": "^5.2.12",
"svelte": "^5.4.0",
"tailwindcss": "^3.4.15",
"typescript": "^5.7.2"
},

66
frontend/pnpm-lock.yaml generated
View File

@@ -13,7 +13,7 @@ importers:
version: 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.4.1)(typescript@5.7.2)
'@astrojs/svelte':
specifier: ^6.0.2
version: 6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.2.12)(typescript@5.7.2)
version: 6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.4.0)(typescript@5.7.2)
'@astrojs/tailwind':
specifier: ^5.1.2
version: 5.1.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(tailwindcss@3.4.15)
@@ -21,8 +21,8 @@ importers:
specifier: ^4.16.16
version: 4.16.16(rollup@4.28.0)(typescript@5.7.2)
svelte:
specifier: ^5.2.12
version: 5.2.12
specifier: ^5.4.0
version: 5.4.0
tailwindcss:
specifier: ^3.4.15
version: 3.4.15
@@ -38,10 +38,10 @@ importers:
version: 0.14.1
prettier-plugin-svelte:
specifier: ^3.3.2
version: 3.3.2(prettier@3.4.1)(svelte@5.2.12)
version: 3.3.2(prettier@3.4.1)(svelte@5.4.0)
prettier-plugin-tailwindcss:
specifier: ^0.6.9
version: 0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12))(prettier@3.4.1)
version: 0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0))(prettier@3.4.1)
packages:
@@ -798,8 +798,8 @@ packages:
resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
engines: {node: '>=16'}
caniuse-lite@1.0.30001684:
resolution: {integrity: sha512-G1LRwLIQjBQoyq0ZJGqGIJUXzJ8irpbjHLpVRXDvBEScFJ9b17sgK6vlx0GAJFE21okD7zXl08rRRUfq6HdoEQ==}
caniuse-lite@1.0.30001685:
resolution: {integrity: sha512-e/kJN1EMyHQzgcMEEgoo+YTCO1NGCmIYHk5Qk8jT6AazWemS5QFKJ5ShCJlH3GZrNIdZofcNCEwZqbMjjKzmnA==}
ccount@2.0.1:
resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -1922,8 +1922,8 @@ packages:
svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
typescript: ^4.9.4 || ^5.0.0
svelte@5.2.12:
resolution: {integrity: sha512-lcrJVygO05nzQkgRLxaz3qd0kamyhujfpCxalzzKabJUueVrnpc0bhHgR2hUa/335XvOHO39wtc79C72g+5ftw==}
svelte@5.4.0:
resolution: {integrity: sha512-2I/mjD8cXDpKfdfUK+T6yo/OzugMXIm8lhyJUFM5F/gICMYnkl3C/+4cOSpia8TqpDsi6Qfm5+fdmBNMNmaf2g==}
engines: {node: '>=18'}
tailwindcss@3.4.15:
@@ -1967,8 +1967,8 @@ packages:
tslib@2.8.1:
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
type-fest@4.29.0:
resolution: {integrity: sha512-RPYt6dKyemXJe7I6oNstcH24myUGSReicxcHTvCLgzm4e0n8y05dGvcGB15/SoPRBmhlMthWQ9pvKyL81ko8nQ==}
type-fest@4.29.1:
resolution: {integrity: sha512-Y1zUveI92UYM/vo1EFlQSsNf74+hfKH+7saZJslF0Fw92FRaiTAnHPIvo9d7SLxXt/gAYqA4RXyDTioMQCCp0A==}
engines: {node: '>=16'}
typesafe-path@0.2.2:
@@ -2339,12 +2339,12 @@ snapshots:
dependencies:
prismjs: 1.29.0
'@astrojs/svelte@6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.2.12)(typescript@5.7.2)':
'@astrojs/svelte@6.0.2(astro@4.16.16(rollup@4.28.0)(typescript@5.7.2))(svelte@5.4.0)(typescript@5.7.2)':
dependencies:
'@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.2.12)(vite@5.4.11)
'@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.4.0)(vite@5.4.11)
astro: 4.16.16(rollup@4.28.0)(typescript@5.7.2)
svelte: 5.2.12
svelte2tsx: 0.7.28(svelte@5.2.12)(typescript@5.7.2)
svelte: 5.4.0
svelte2tsx: 0.7.28(svelte@5.4.0)(typescript@5.7.2)
typescript: 5.7.2
vite: 5.4.11
transitivePeerDependencies:
@@ -2808,23 +2808,23 @@ snapshots:
'@shikijs/vscode-textmate@9.3.0': {}
'@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11))(svelte@5.2.12)(vite@5.4.11)':
'@sveltejs/vite-plugin-svelte-inspector@3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11))(svelte@5.4.0)(vite@5.4.11)':
dependencies:
'@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.2.12)(vite@5.4.11)
'@sveltejs/vite-plugin-svelte': 4.0.2(svelte@5.4.0)(vite@5.4.11)
debug: 4.3.7
svelte: 5.2.12
svelte: 5.4.0
vite: 5.4.11
transitivePeerDependencies:
- supports-color
'@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11)':
'@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11)':
dependencies:
'@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.2.12)(vite@5.4.11))(svelte@5.2.12)(vite@5.4.11)
'@sveltejs/vite-plugin-svelte-inspector': 3.0.1(@sveltejs/vite-plugin-svelte@4.0.2(svelte@5.4.0)(vite@5.4.11))(svelte@5.4.0)(vite@5.4.11)
debug: 4.3.7
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.14
svelte: 5.2.12
svelte: 5.4.0
vite: 5.4.11
vitefu: 1.0.4(vite@5.4.11)
transitivePeerDependencies:
@@ -3055,7 +3055,7 @@ snapshots:
autoprefixer@10.4.20(postcss@8.4.49):
dependencies:
browserslist: 4.24.2
caniuse-lite: 1.0.30001684
caniuse-lite: 1.0.30001685
fraction.js: 4.3.7
normalize-range: 0.1.2
picocolors: 1.1.1
@@ -3079,7 +3079,7 @@ snapshots:
chalk: 5.3.0
cli-boxes: 3.0.0
string-width: 7.2.0
type-fest: 4.29.0
type-fest: 4.29.1
widest-line: 5.0.0
wrap-ansi: 9.0.0
@@ -3093,7 +3093,7 @@ snapshots:
browserslist@4.24.2:
dependencies:
caniuse-lite: 1.0.30001684
caniuse-lite: 1.0.30001685
electron-to-chromium: 1.5.67
node-releases: 2.0.18
update-browserslist-db: 1.1.1(browserslist@4.24.2)
@@ -3102,7 +3102,7 @@ snapshots:
camelcase@8.0.0: {}
caniuse-lite@1.0.30001684: {}
caniuse-lite@1.0.30001685: {}
ccount@2.0.1: {}
@@ -4108,17 +4108,17 @@ snapshots:
prettier: 3.4.1
sass-formatter: 0.7.9
prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12):
prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0):
dependencies:
prettier: 3.4.1
svelte: 5.2.12
svelte: 5.4.0
prettier-plugin-tailwindcss@0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.2.12))(prettier@3.4.1):
prettier-plugin-tailwindcss@0.6.9(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.3.2(prettier@3.4.1)(svelte@5.4.0))(prettier@3.4.1):
dependencies:
prettier: 3.4.1
optionalDependencies:
prettier-plugin-astro: 0.14.1
prettier-plugin-svelte: 3.3.2(prettier@3.4.1)(svelte@5.2.12)
prettier-plugin-svelte: 3.3.2(prettier@3.4.1)(svelte@5.4.0)
prettier@2.8.7:
optional: true
@@ -4421,14 +4421,14 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {}
svelte2tsx@0.7.28(svelte@5.2.12)(typescript@5.7.2):
svelte2tsx@0.7.28(svelte@5.4.0)(typescript@5.7.2):
dependencies:
dedent-js: 1.0.1
pascal-case: 3.1.2
svelte: 5.2.12
svelte: 5.4.0
typescript: 5.7.2
svelte@5.2.12:
svelte@5.4.0:
dependencies:
'@ampproject/remapping': 2.3.0
'@jridgewell/sourcemap-codec': 1.5.0
@@ -4497,7 +4497,7 @@ snapshots:
tslib@2.8.1: {}
type-fest@4.29.0: {}
type-fest@4.29.1: {}
typesafe-path@0.2.2: {}

BIN
frontend/public/scene_drawing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

15
frontend/src/components/Container.svelte
View File

@@ -5,9 +5,11 @@
let ws: WebSocket | null = $state(null);
let parent: HTMLElement | null = $state(null);
let trackers: TrackerData[] = $state([
{ id: 1, x: 0, y: 0 },
{ id: 2, x: 400, y: 40 },
{ id: 2, x: 0, y: 0 },
]);
onMount(() => {
@@ -19,6 +21,15 @@
});
</script>
<div bind:this={parent} class="relative border border-red-500">
<img src="/scene_drawing.png" alt="moradi" class="absolute" />
{#each trackers as tracker}
<Drag bind:id={tracker.id} bind:x={tracker.x} bind:y={tracker.y} {ws} />
<Drag
bind:id={tracker.id}
bind:x={tracker.x}
bind:y={tracker.y}
{ws}
{parent}
/>
{/each}
</div>

28
frontend/src/components/Drag.svelte
View File

@@ -4,6 +4,7 @@
x: number;
y: number;
ws: WebSocket | null;
parent: HTMLElement;
};
let {
@@ -11,19 +12,28 @@
x = $bindable(),
y = $bindable(),
ws = $bindable(),
parent,
}: Props = $props();
let element: HTMLElement;
let element: HTMLElement | null = $state(null);
let vis_x = $derived(
x + (parent?.clientWidth ?? 0) / 2 - (element?.clientWidth ?? 0) / 2,
);
let vis_y = $derived(
y + (parent?.clientHeight ?? 0) / 2 - (element?.clientHeight ?? 0) / 2,
);
let capturedPointerId: number | null = $state(null);
function onPointerDown(e: PointerEvent) {
element.setPointerCapture(e.pointerId);
element!.setPointerCapture(e.pointerId);
capturedPointerId = e.pointerId;
}
function onPointerUp(e: PointerEvent) {
capturedPointerId = null;
element.releasePointerCapture(e.pointerId);
element!.releasePointerCapture(e.pointerId);
}
function onPointerMove(e: PointerEvent) {
if (capturedPointerId != e.pointerId) return;
@@ -31,8 +41,14 @@
e.preventDefault();
e.stopPropagation();
x += e.movementX;
y += e.movementY;
x = Math.min(
parent.clientWidth / 2,
Math.max(-parent.clientWidth / 2, x + e.movementX),
);
y = Math.min(
parent.clientHeight / 2,
Math.max(-parent.clientHeight / 2, y + e.movementY),
);
if (ws) {
ws.send(
@@ -51,7 +67,7 @@
onpointerdown={onPointerDown}
onpointerup={onPointerUp}
onpointermove={onPointerMove}
style={`transform: translate(${x}px, ${y}px)`}
style={`transform: translate(${vis_x}px, ${vis_y}px)`}
class="absolute flex h-40 w-40 touch-none items-center justify-center rounded-full border-red-400 bg-red-400"
>
Tracker {id}

7
frontend/src/pages/index.astro
View File

@@ -7,10 +7,13 @@ import Container from "../components/Container.svelte";
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Astro</title>
</head>
<body class="h-dvh w-screen">
<body class="flex h-dvh w-screen items-center justify-center">
<Container client:load />
</body>
</html>