📷 Adds camera service

app/src/routes/menu.svelte

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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}