Matiss/Final-Year-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add motion detection controls and persistence

Browse Source
This commit is contained in:
Matiss Jurevics
2026-03-08 10:10:00 +00:00
parent 024d81c7ec
commit 3c2ea7fd75
3 changed files with 366 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
WebApp/src/routes/camera/+page.svelte
View File

@@ -3,18 +3,44 @@
import AppChrome from '$lib/sim/ui/AppChrome.svelte';
import { appController } from '$lib/app/controller';
import { appState } from '$lib/app/store';
import { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js';
import { Badge } from '$lib/components/ui/badge/index.js';
import { Button } from '$lib/components/ui/button/index.js';
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
import { Label } from '$lib/components/ui/label/index.js';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/components/ui/select/index.js';
let cameraVideoElement: HTMLVideoElement | null = null;
$effect(() => {
appController.setCameraVideoElement(cameraVideoElement);
});
const cameraInputItems = () =>
$appState.cameraInputDevices.map((cameraInput) => ({
value: cameraInput.id,
label: cameraInput.label
}));
const selectedCameraInputLabel = () =>
$appState.cameraInputDevices.find((cameraInput) => cameraInput.id === $appState.selectedCameraInputId)?.label ||
($appState.cameraInputDevices.length > 0 ? 'Choose camera input' : 'No camera inputs found');
const motionDetectionProfileItems = [
{ value: 'low_power', label: 'Low Power' },
{ value: 'balanced', label: 'Balanced' },
{ value: 'responsive', label: 'Responsive' }
];
const motionDetectionProfileLabel = () =>
motionDetectionProfileItems.find((item) => item.value === $appState.motionDetection.profile)?.label || 'Balanced';
</script>
<AppChrome pageKey="camera">
<section id="screen-home-camera" class="flex flex-col gap-6 max-w-7xl mx-auto h-full min-h-0">
<div class="flex-1 min-h-0 flex flex-col gap-6">
<div class="flex-[3] min-h-[260px] glass-card rounded-3xl overflow-hidden relative flex flex-col border border-white/10">
<Card class="glass-card relative flex min-h-[260px] flex-[3] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80">
<div id="cameraPreview" class="flex-1 bg-black relative flex items-center justify-center {$appState.isMotionActive ? 'bg-red-900/20' : ''}">
<video
id="cameraVideo"
@@ -24,43 +50,55 @@
muted
bind:this={cameraVideoElement}
></video>
<div
class="absolute top-4 left-4 z-20 flex items-center gap-2 px-3 py-1.5 rounded-full bg-black/50 backdrop-blur border border-white/10"
<Badge
variant="destructive"
class="absolute top-4 left-4 z-20 gap-2 rounded-full border border-white/10 bg-black/50 px-3 py-1.5 text-white backdrop-blur"
>
<span class="w-2.5 h-2.5 bg-red-500 rounded-full shadow-[0_0_8px_rgba(239,68,68,0.8)] animate-pulse"></span>
<span class="text-xs text-white font-medium tracking-wide">REC</span>
</div>
<span class="text-xs font-medium tracking-wide">REC</span>
</Badge>
</div>
<div
id="cameraOfflineOverlay"
class="absolute inset-0 bg-[#0a0a0c]/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center gap-4 {$appState.socketConnected ? 'hidden' : ''}"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
/>
</svg>
<p class="text-gray-400 font-medium tracking-wide">Camera Offline</p>
<button
<Alert class="w-full max-w-sm border-white/10 bg-[#141418]/90 text-center shadow-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
/>
</svg>
<AlertTitle class="justify-self-center text-base text-white">Camera Offline</AlertTitle>
<AlertDescription class="justify-self-center text-sm text-gray-400">
Reconnect this device to resume live monitoring.
</AlertDescription>
<div class="mt-2 flex justify-center">
<Button
id="cameraGoOnlineBtn"
class="btn btn-outline btn-success rounded-xl border-green-500/50 text-green-400 hover:bg-green-500/10 hover:border-green-400"
variant="outline"
class="rounded-xl border-green-500/50 text-green-400 hover:border-green-400 hover:bg-green-500/10"
onclick={() => appController.goOnline()}
>
Go Online
</button>
</Button>
</div>
</Alert>
</div>
</div>
</Card>
<div class="flex-[2] min-h-0 grid grid-cols-1 xl:grid-cols-[2fr_1fr] gap-6">
<div class="glass-card p-6 rounded-3xl border border-white/5 flex flex-col min-h-[220px] overflow-hidden">
<h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4 shrink-0">Logs</h3>
<div
<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80">
<CardHeader class="pb-2">
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Logs</CardTitle>
</CardHeader>
<CardContent class="flex-1">
<ScrollArea
id="cameraLogs"
class="flex-1 min-h-0 bg-black/40 rounded-xl p-4 text-xs font-mono text-gray-400 overflow-y-auto border border-white/5"
class="min-h-[220px] rounded-xl border border-white/5 bg-black/40 p-4 text-xs font-mono text-gray-400"
>
{#if $appState.activityLog.length === 0}
<div class="text-gray-600 italic">Awaiting connection...</div>
@@ -69,66 +107,157 @@
<div>[{new Date(log.createdAt).toLocaleTimeString()}] {log.type}: {log.message}</div>
{/each}
{/if}
</div>
</div>
</ScrollArea>
</CardContent>
</Card>
<div class="glass-card p-6 rounded-3xl border border-white/5 space-y-4 min-h-[220px]">
<h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider">Actions / Options</h3>
<div class="space-y-2">
<Card class="glass-card min-h-[220px] rounded-3xl border-white/10 bg-[#16161d]/80">
<CardHeader class="pb-2">
<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Actions / Options</CardTitle>
</CardHeader>
<CardContent class="space-y-4">
<div class="space-y-2">
<div class="flex items-center justify-between gap-2">
<label for="cameraInputSelect" class="text-[11px] text-gray-400 uppercase tracking-wider font-semibold">
<Label for="cameraInputSelect" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
Camera Input
</label>
<button
</Label>
<Button
id="refreshCameraInputsBtn"
class="btn btn-ghost btn-xs rounded-lg text-gray-400 hover:text-white"
variant="ghost"
size="xs"
class="rounded-lg text-gray-400 hover:text-white"
onclick={() => appController.refreshCameraInputs()}
>
Refresh
</button>
</Button>
</div>
<select
id="cameraInputSelect"
class="select select-sm w-full bg-black/40 border-white/10 text-gray-200 rounded-xl"
<Select
type="single"
value={$appState.selectedCameraInputId}
onchange={(event) => appController.selectCameraInput((event.currentTarget as HTMLSelectElement).value)}
items={cameraInputItems()}
onValueChange={(value) => appController.selectCameraInput(value)}
>
{#if $appState.cameraInputDevices.length === 0}
<option value="">No camera inputs found</option>
{:else}
<SelectTrigger
id="cameraInputSelect"
class="h-10 w-full rounded-xl border-white/10 bg-black/40 text-gray-200"
>
{selectedCameraInputLabel()}
</SelectTrigger>
<SelectContent>
{#each $appState.cameraInputDevices as cameraInput (cameraInput.id)}
<option value={cameraInput.id}>{cameraInput.label}</option>
<SelectItem value={cameraInput.id} label={cameraInput.label} />
{/each}
{/if}
</select>
</div>
<div class="space-y-3">
</SelectContent>
</Select>
</div>
<div class="rounded-2xl border border-white/10 bg-black/30 p-4 space-y-4">
<div class="flex items-start justify-between gap-3">
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Automatic Detection</p>
<p class="text-sm text-gray-200">
{$appState.motionDetection.enabled ? 'Armed for automatic motion events.' : 'Paused until manually armed.'}
</p>
<p class="text-xs text-gray-500">
Designed for a plugged-in browser kept in the foreground.
</p>
</div>
<Button
variant={$appState.motionDetection.enabled ? 'secondary' : 'outline'}
class="min-w-[112px] rounded-xl"
onclick={() => appController.setMotionDetectionEnabled(!$appState.motionDetection.enabled)}
>
{$appState.motionDetection.enabled ? 'Pause' : 'Arm'}
</Button>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between gap-2">
<Label for="motionDetectionProfile" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
Detection Profile
</Label>
<span class="text-[11px] uppercase tracking-wider text-gray-500">{$appState.motionDetection.state}</span>
</div>
<Select
type="single"
value={$appState.motionDetection.profile}
items={motionDetectionProfileItems}
onValueChange={(value) => appController.setMotionDetectionProfile(value)}
>
<SelectTrigger
id="motionDetectionProfile"
class="h-10 w-full rounded-xl border-white/10 bg-black/40 text-gray-200"
>
{motionDetectionProfileLabel()}
</SelectTrigger>
<SelectContent>
{#each motionDetectionProfileItems as item (item.value)}
<SelectItem value={item.value} label={item.label} />
{/each}
</SelectContent>
</Select>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
<p class="text-[10px] uppercase tracking-wider text-gray-500">Detector State</p>
<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.state}</p>
</div>
<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
<p class="text-[10px] uppercase tracking-wider text-gray-500">Motion Score</p>
<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.score.toFixed(3)}</p>
</div>
</div>
<div class="flex items-center justify-between gap-3 rounded-xl border border-white/5 bg-white/5 px-3 py-2">
<div>
<p class="text-xs font-medium text-gray-200">Show detector debug info</p>
<p class="text-[11px] text-gray-500">Useful while tuning thresholds and sample profiles.</p>
</div>
<button
type="button"
role="switch"
aria-checked={$appState.motionDetection.debug}
aria-label="Toggle motion detector debug info"
title="Toggle motion detector debug info"
class="inline-flex h-7 w-12 items-center rounded-full border border-white/10 p-1 transition-colors {$appState.motionDetection.debug ? 'bg-blue-500/80' : 'bg-white/10'}"
onclick={() => appController.setMotionDetectionDebug(!$appState.motionDetection.debug)}
>
<span
class="h-5 w-5 rounded-full bg-white transition-transform {$appState.motionDetection.debug ? 'translate-x-5' : 'translate-x-0'}"
></span>
</button>
</div>
</div>
<div class="space-y-3">
{#if !$appState.isMotionActive}
<button
<Button
id="startMotionBtn"
class="btn w-full justify-start h-14 rounded-xl bg-white/5 border-white/5 hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400 transition-all font-medium group"
variant="outline"
class="h-14 w-full justify-start rounded-xl border-white/5 bg-white/5 font-medium hover:border-red-500/30 hover:bg-red-500/10 hover:text-red-400"
onclick={() => appController.startMotion()}
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 group-hover:text-red-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
Simulate Motion Event
</button>
</Button>
{:else}
<button
<Button
id="endMotionBtn"
class="btn w-full justify-start h-14 rounded-xl bg-white/5 border-white/5 hover:bg-white/10 font-medium disabled:opacity-30"
variant="outline"
class="h-14 w-full justify-start rounded-xl border-white/5 bg-white/5 font-medium hover:bg-white/10 disabled:opacity-30"
onclick={() => appController.endMotion()}
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
</svg>
Stop Recording
</button>
</Button>
{/if}
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</section>