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

📷 Adds camera service

Browse Source
This commit is contained in:
Rune Harlyk
2024-05-08 23:36:35 +02:00
committed by Rune Harlyk
parent b7ae17f3bf
commit c0fa16dd71
15 changed files with 646 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/lib/models.ts
+15 -1
View File
@@ -154,4 +154,18 @@ export type MQTTSettings = {
client_id: string;
keep_alive: number;
clean_session: boolean;
};
};
export type CameraSettings = {
framesize: number;
quality: number;
brightness: number;
contrast: number;
saturation: number;
sharpness: number;
denoise: number;
special_effect: number;
wb_mode: number;
vflip: boolean;
hmirror: boolean;
};
app/src/routes/menu.svelte
+15
View File
@@ -4,6 +4,8 @@
import Users from '~icons/mdi/users';
import Settings from '~icons/mdi/settings';
import MdiController from '~icons/mdi/controller';
import Devices from '~icons/mdi/devices'
import Camera from '~icons/mdi/camera-outline';
import Health from '~icons/mdi/stethoscope';
import Folder from '~icons/mdi/folder-outline';
import Update from '~icons/mdi/reload';
@@ -51,6 +53,19 @@
href: '/controller',
feature: true,
},
{
title: 'Peripherals',
icon: Devices,
feature: true,
submenu: [
{
title: 'Camera',
icon: Camera,
href: '/peripherals/camera',
feature: $page.data.features.camera,
}
]
},
{
title: 'Connections',
icon: Remote,
app/src/routes/peripherals/+page.ts
+7
View File
@@ -0,0 +1,7 @@
import type { PageLoad } from './$types';
import { goto } from '$app/navigation';
export const load = (async () => {
goto('/');
return;
}) satisfies PageLoad;
app/src/routes/peripherals/camera/+page.svelte
+7
View File
@@ -0,0 +1,7 @@
<script lang="ts">
import Camera from './Camera.svelte';
</script>
<div class="mx-0 my-1 flex flex-col space-y-4 sm:mx-8 sm:my-8">
<Camera />
</div>
app/src/routes/peripherals/camera/+page.ts
+7
View File
@@ -0,0 +1,7 @@
import type { PageLoad } from './$types';
export const load = (async () => {
return {
title: 'Camera'
};
}) satisfies PageLoad;
app/src/routes/peripherals/camera/Camera.svelte
+67
View File
@@ -0,0 +1,67 @@
<script lang="ts">
import { user } from '$lib/stores/user';
import SettingsCard from "$lib/components/SettingsCard.svelte";
import Camera from '~icons/mdi/camera-outline'
import VideoCamera from '~icons/mdi/videocam-outline'
import Reload from '~icons/mdi/reload'
import Record from '~icons/mdi/radio-button-unchecked'
import Recording from '~icons/mdi/radio-button-checked'
import Spinner from '$lib/components/Spinner.svelte';
import CameraSetting from './CameraSetting.svelte';
import { onDestroy, onMount } from 'svelte';
const ws_token = `?access_token=${$user.bearer_token}`
let stillId = 0
let recording = false
let videoMode = false
const takeStill = () => stillId += 1
const toggleMode = () => {
videoMode = !videoMode
}
let timer:number
onMount(() => {
timer = setInterval(takeStill, 1000)
})
onDestroy(() => {
clearInterval(timer)
})
</script>
<SettingsCard collapsible={false}>
<Camera slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
<span slot="title">Camera</span>
<img src={"/api/camera/still"+ ws_token + "key=" + stillId} alt="Live-stream" class="w-full rounded-lg shadow-lg" />
<CameraSetting />
<div>
<!-- <div class="relative">
<div class="-top-12 absolute flex justify-center w-full">
<label class="swap">
<input type="checkbox" bind:value={recording} />
<div class="swap-on"><Recording class="h-10 w-10" /></div>
<div class="swap-off"><Record class="h-10 w-10" /></div>
</label>
</div>
<div class="flex justify-center">
<div class="flex justify-center gap-4 p-2 rounded-xl bg-opacity-50 bg-slate-600 mt-2">
<button class="btn-outline" class:btn-primary={!videoMode} on:click={toggleMode}><Camera class="h-5 w-5" /></button>
<button class="btn-outline" class:btn-primary={ videoMode} on:click={toggleMode}><VideoCamera class="h-5 w-5" /></button>
</div>
</div>
</div> -->
</div>
<!-- <button class="btn btn-primary inline-flex items-center" on:click={takeStill}>
<Reload class="mr-2 h-5 w-5" />
<span>Reload</span>
</button> -->
</SettingsCard>
app/src/routes/peripherals/camera/CameraSetting.svelte
+70
View File
@@ -0,0 +1,70 @@
<script lang="ts">
import { api } from '$lib/api';
import Spinner from '$lib/components/Spinner.svelte';
import type { CameraSettings } from '$lib/models';
let settings:CameraSettings
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" on:click={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}