henrik/followspot-psn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

looking better and better

Browse Source
This commit is contained in:
Tobias Haugeland
2025-03-06 15:22:21 +01:00
parent 7bd76c1d4a
commit 27eadaeca4
9 changed files with 91 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,7 +61,7 @@
<div class="flex h-screen items-center justify-center">
<div class="relative">
<img
src="/scene_drawing.png"
src="/revy25_scene_psn_tekst.png"
alt=""
bind:this={image}
class="max-w-screen max-h-screen"

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

@@ -75,7 +75,8 @@
onpointerup={onPointerUp}
onpointermove={onPointerMove}
style={`transform: translate(${vis_x}px, ${vis_y}px)`}
class="absolute flex h-32 w-32 touch-none select-none items-center justify-center rounded-full border-red-400 bg-red-400"
class={`absolute flex h-24 w-24 touch-none select-none items-center justify-center rounded-full
${selected === id ? 'bg-green-400 border-green-400' : 'bg-red-400 border-red-400'}`}
>
Tracker {id}
</div>

37
frontend/src/components/Slider.svelte
View File

@@ -30,16 +30,15 @@
);
};
let z_viz = $derived((trackers[selected].z * 2).toFixed(2))
let z_viz = $derived((trackers[selected].z).toFixed(2))
</script>
<div>
<label for="z">Z</label>
<div class="slider-container">
<input
type="range"
id="z"
min="0"
max="1"
max="4"
step="0.01"
oninput="{onchange}"
bind:value={trackers[selected].z}
@@ -48,12 +47,38 @@
</div>
<style>
.slider-container {
display: flex;
flex-direction: column;
align-items: center;
}
input {
writing-mode: vertical-lr;
direction: rtl;
appearance: slider-vertical;
width: 26px;
appearance: none;
width: 75px;
height: 50%;
vertical-align: bottom;
}
/* WebKit Browsers (Chrome, Safari, Edge) */
input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 50px; /* Larger size */
height: 50px;
background: red; /* Customize color */
margin-left: -22px; /* Center the thumb */
border-radius: 50%;
cursor: pointer;
}
input::-webkit-slider-runnable-track {
background: lightgray; /* Customize track */
width: 6px;
border-radius: 3px;
}
</style>

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

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