Rune Harlyk
106 lines
3.2 KiB
Svelte
106 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import { api } from '$lib/api'
|
|
import Spinner from '$lib/components/Spinner.svelte'
|
|
import type { CameraSettings } from '$lib/types/models'
|
|
let settings: CameraSettings = $state({
|
|
brightness: 0,
|
|
contrast: 0,
|
|
framesize: 0,
|
|
vflip: false,
|
|
hmirror: false,
|
|
special_effect: 0,
|
|
quality: 0,
|
|
saturation: 0,
|
|
sharpness: 0,
|
|
denoise: 0,
|
|
wb_mode: 0
|
|
})
|
|
|
|
const getCameraSettings = async () => {
|
|
const result = await api.get<CameraSettings>('/api/camera/settings')
|
|
if (result.isErr()) {
|
|
console.error('An error occurred', result.inner)
|
|
return
|
|
}
|
|
settings = result.inner
|
|
}
|
|
|
|
const updateCameraSettings = async () => {
|
|
const result = await api.post<CameraSettings>('/api/camera/settings', settings)
|
|
if (result.isErr()) {
|
|
console.error('An error occurred', result.inner)
|
|
return
|
|
}
|
|
settings = result.inner
|
|
}
|
|
</script>
|
|
|
|
{#await getCameraSettings()}
|
|
<Spinner />
|
|
{:then}
|
|
<div class="flex flex-col gap-1">
|
|
<button class="btn btn-primary" type="button" onclick={updateCameraSettings}
|
|
>Update camera settings</button
|
|
>
|
|
|
|
<label for="brightness">
|
|
Brightness {settings.brightness}
|
|
<input
|
|
type="range"
|
|
min="-2"
|
|
max="2"
|
|
class="range range-xs"
|
|
bind:value={settings.brightness}
|
|
/>
|
|
</label>
|
|
|
|
<label for="contrast">
|
|
Contrast {settings.contrast}
|
|
<input
|
|
type="range"
|
|
min="-2"
|
|
max="2"
|
|
class="range range-xs"
|
|
bind:value={settings.contrast}
|
|
/>
|
|
</label>
|
|
|
|
<label for="framesize">
|
|
FrameSize {settings.framesize}
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="10"
|
|
class="range range-xs"
|
|
bind:value={settings.framesize}
|
|
/>
|
|
</label>
|
|
|
|
<label class="cursor-pointer flex items-center justify-between">
|
|
Vertical flip
|
|
<input type="checkbox" class="toggle" bind:checked={settings.vflip} />
|
|
</label>
|
|
|
|
<label class="cursor-pointer flex items-center justify-between">
|
|
Horizontal flip
|
|
<input type="checkbox" class="toggle" bind:checked={settings.hmirror} />
|
|
</label>
|
|
|
|
<label for="special_effect" class="flex items-center">
|
|
<span class="basis-1/2">Special Effect</span>
|
|
<select
|
|
class="select select-bordered select-sm w-full max-w-xs"
|
|
bind:value={settings.special_effect}
|
|
>
|
|
<option value={0}>No effect</option>
|
|
<option value={1}>Negative</option>
|
|
<option value={2}>Grayscale</option>
|
|
<option value={3}>Red tint</option>
|
|
<option value={4}>Green tint</option>
|
|
<option value={5}>Blue tint</option>
|
|
<option value={6}>Sepia</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
{/await}
|