Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🕹️ Fixes vertical range input

Browse Source
This commit is contained in:
Rune Harlyk
2025-03-07 21:42:38 +01:00
parent d14446d09e
commit 37f9238c55
2 changed files with 156 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/lib/components/input/VerticalSlider.svelte
+7 -7
View File
@@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
interface Props { interface Props {
min?: number; min?: number
max?: number; max?: number
step?: number; step?: number
value?: any; value?: any
oninput?: any
} }
let { let {
@@ -12,7 +13,7 @@
step = 1, step = 1,
value = $bindable((max - min) / 2), value = $bindable((max - min) / 2),
...rest ...rest
}: Props = $props(); }: Props = $props()
</script> </script>
<input <input
@@ -23,8 +24,7 @@
{max} {max}
{step} {step}
bind:value bind:value
{...rest} {...rest} />
/>
<style> <style>
input[type='range']::-webkit-slider-runnable-track { input[type='range']::-webkit-slider-runnable-track {
app/src/routes/controller/Controls.svelte
+66 -61
View File
@@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import nipplejs from 'nipplejs'; import nipplejs from 'nipplejs'
import { onMount } from 'svelte'; import { onMount } from 'svelte'
import { capitalize, throttler, toInt8 } from '$lib/utilities'; import { capitalize, throttler, toInt8 } from '$lib/utilities'
import { input, outControllerData, mode, modes, type Modes, ModesEnum } from '$lib/stores'; import { input, outControllerData, mode, modes, type Modes, ModesEnum } from '$lib/stores'
import type { vector } from '$lib/types/models'; import type { vector } from '$lib/types/models'
import { VerticalSlider } from '$lib/components/input'; import { VerticalSlider } from '$lib/components/input'
let throttle = new throttler(); let throttle = new throttler()
let left: nipplejs.JoystickManager; let left: nipplejs.JoystickManager
let right: nipplejs.JoystickManager; let right: nipplejs.JoystickManager
let throttle_timing = 40; let throttle_timing = 40
let data = new Array(8); let data = new Array(8)
onMount(() => { onMount(() => {
left = nipplejs.create({ left = nipplejs.create({
@@ -20,7 +20,7 @@
dynamicPage: true, dynamicPage: true,
mode: 'static', mode: 'static',
restOpacity: 1 restOpacity: 1
}); })
right = nipplejs.create({ right = nipplejs.create({
zone: document.getElementById('right') as HTMLElement, zone: document.getElementById('right') as HTMLElement,
@@ -28,60 +28,60 @@
dynamicPage: true, dynamicPage: true,
mode: 'static', mode: 'static',
restOpacity: 1 restOpacity: 1
}); })
left.on('move', (_, data) => handleJoyMove('left', data.vector)); left.on('move', (_, data) => handleJoyMove('left', data.vector))
left.on('end', (_, __) => handleJoyMove('left', { x: 0, y: 0 })); left.on('end', (_, __) => handleJoyMove('left', { x: 0, y: 0 }))
right.on('move', (_, data) => handleJoyMove('right', data.vector)); right.on('move', (_, data) => handleJoyMove('right', data.vector))
right.on('end', (_, __) => handleJoyMove('right', { x: 0, y: 0 })); right.on('end', (_, __) => handleJoyMove('right', { x: 0, y: 0 }))
}); })
const handleJoyMove = (key: 'left' | 'right', data: vector) => { const handleJoyMove = (key: 'left' | 'right', data: vector) => {
input.update((inputData) => { input.update(inputData => {
inputData[key] = data; inputData[key] = data
return inputData; return inputData
}); })
throttle.throttle(updateData, throttle_timing); throttle.throttle(updateData, throttle_timing)
}; }
const updateData = () => { const updateData = () => {
data[0] = 0; data[0] = 0
data[1] = toInt8($input.left.x, -1, 1); data[1] = toInt8($input.left.x, -1, 1)
data[2] = toInt8($input.left.y, -1, 1); data[2] = toInt8($input.left.y, -1, 1)
data[3] = toInt8($input.right.x, -1, 1); data[3] = toInt8($input.right.x, -1, 1)
data[4] = toInt8($input.right.y, -1, 1); data[4] = toInt8($input.right.y, -1, 1)
data[5] = toInt8($input.height, 0, 100); data[5] = toInt8($input.height, 0, 100)
data[6] = toInt8($input.speed, 0, 100); data[6] = toInt8($input.speed, 0, 100)
data[7] = toInt8($input.s1, 0, 100); data[7] = toInt8($input.s1, 0, 100)
outControllerData.set(data); outControllerData.set(data)
}; }
const handleKeyup = (event: KeyboardEvent) => { const handleKeyup = (event: KeyboardEvent) => {
const down = event.type === 'keydown'; const down = event.type === 'keydown'
input.update((data) => { input.update(data => {
if (event.key === 'w') data.left.y = down ? -1 : 0; if (event.key === 'w') data.left.y = down ? -1 : 0
if (event.key === 'a') data.left.x = down ? -1 : 0; if (event.key === 'a') data.left.x = down ? -1 : 0
if (event.key === 's') data.left.y = down ? 1 : 0; if (event.key === 's') data.left.y = down ? 1 : 0
if (event.key === 'd') data.left.x = down ? 1 : 0; if (event.key === 'd') data.left.x = down ? 1 : 0
return data; return data
}); })
throttle.throttle(updateData, throttle_timing); throttle.throttle(updateData, throttle_timing)
}; }
const handleRange = (event: Event, key: 'speed' | 'height' | 's1') => { const handleRange = (event: Event, key: 'speed' | 'height' | 's1') => {
const value: number = event.target?.value; const value: number = event.target?.value
input.update((inputData) => { input.update(inputData => {
inputData[key] = value; inputData[key] = value
return inputData; return inputData
}); })
throttle.throttle(updateData, throttle_timing); throttle.throttle(updateData, throttle_timing)
}; }
const changeMode = (modeValue: Modes) => { const changeMode = (modeValue: Modes) => {
mode.set(modes.indexOf(modeValue)); mode.set(modes.indexOf(modeValue))
}; }
</script> </script>
<div class="absolute top-0 left-0 w-screen h-screen"> <div class="absolute top-0 left-0 w-screen h-screen">
@@ -103,17 +103,17 @@
</div> </div>
<div class="absolute bottom-0 z-10 flex items-end"> <div class="absolute bottom-0 z-10 flex items-end">
<div class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl"> <div class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl">
<VerticalSlider min={0} max={100} on:input={(e) => handleRange(e, 'height')} /> <VerticalSlider min={0} max={100} oninput={(e: Event) => handleRange(e, 'height')} />
<label for="height">Ht</label> <label for="height">Ht</label>
</div> </div>
<div class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden"> <div
class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3 portrait:hidden">
<div class="join"> <div class="join">
{#each modes as modeValue} {#each modes as modeValue}
<button <button
class="btn join-item" class="btn join-item"
class:btn-primary={$mode === modes.indexOf(modeValue)} class:btn-primary={$mode === modes.indexOf(modeValue)}
onclick={() => changeMode(modeValue)} onclick={() => changeMode(modeValue)}>
>
{capitalize(modeValue)} {capitalize(modeValue)}
</button> </button>
{/each} {/each}
@@ -128,13 +128,18 @@
name="s1" name="s1"
min="0" min="0"
max="100" max="100"
oninput={(e) => handleRange(e, 's1')} oninput={e => handleRange(e, 's1')}
class="range range-sm range-primary" class="range range-sm range-primary" />
/>
</div> </div>
<div> <div>
<label for="speed">Speed</label> <label for="speed">Speed</label>
<input type="range" name="speed" min="0" max="100" oninput={(e) => handleRange(e, 'speed')} class="range range-sm range-primary" /> <input
type="range"
name="speed"
min="0"
max="100"
oninput={e => handleRange(e, 'speed')}
class="range range-sm range-primary" />
</div> </div>
</div> </div>
{/if} {/if}