Web UI¶

Cang serves a browser-based UI for browsing and reviewing archived camera snapshots.

Accessing the UI¶

Open http://<host>:<port>/days in a browser (default: http://localhost:8080/days).

If authentication is configured in [web], navigating to any page will redirect to a login form at /login. Enter your username and password — the form works with password managers. A Log out link appears in the header while you are logged in.

Views¶

Home calendar (`/days`)¶

A live snapshot strip sits at the top of the page — one card per camera showing its most recent snapshot, refreshed automatically every 30 seconds. Cameras without any snapshots yet display a placeholder with the camera name. The strip uses a responsive grid.

Below the strip, a two-month calendar grid (the previous month on the left, the current month on the right). Each day that has recorded footage shows the number of journeys and the total snapshot count, and links to the day view. Days without footage show only the date number. Use the ◀ / ▶ buttons to navigate to earlier or later months.

Motion events are detected independently per camera; events on different cameras that follow each other within a short time window are chained into a single journey (see Journeys below).

On narrow screens the two months stack vertically.

Day view (`/days/YYYY-MM-DD`)¶

The page heading shows the day of the week alongside the date — for example Thursday · 2026-07-11.

Shows all motion events for the day as a grid of tiles. Each event tile shows the camera name, start time, snapshot count, and a thumbnail preview of the event. Clicking an event opens the snapshot scrubber filtered to that event's time window.

A Browse all snapshots link at the bottom opens the full-day scrubber.

Journeys¶

A real movement often crosses several cameras — through the gate, up the driveway, into the carpark. Cang chains per-camera events whose gaps fall within a short time window (configurable via [events] journey_gap_seconds, default 180 s) into a single journey, so one crossing appears as one card in the day view instead of a scatter of unrelated tiles.

A journey card shows the first segment's thumbnail plus its segments in order as chips (camera and start time) — for example gate 10:04:00 → back drive 10:04:47 → carpark 10:05:31. Single-camera events look exactly as before and open the snapshot scrubber as usual.

Clicking a journey card opens the snapshot scrubber in journey mode (/days/YYYY-MM-DD/snapshots?journey=<anchor>), playing the journey's snapshots in chronological order with exactly the same controls as the event viewer — play/pause with speed selection, filmstrip thumbnails, the scrub slider, and keyboard navigation. The camera selector is hidden (the journey defines its own camera walk); the header shows the current camera and time above each frame (back drive · 10:04:47 · 3 / 12), updating live as playback hops between cameras, and blue ticks on the scrub track mark where each new camera segment begins.

The calendar badge counts journeys, so "3e" means three movements happened that day, however many cameras they crossed.

Journey chaining is time-based, so a few limits apply: two objects moving within the join window can merge into one journey; an object that dwells out of camera view longer than the window (a car parking, then leaving much later) splits into separate journeys; a crossing spanning midnight appears as two journeys, one per day.

Snapshot scrubber¶

The day-level snapshot view (/days/YYYY-MM-DD/snapshots) provides a per-camera browsing interface for reviewing large numbers of still images:

Camera selector — switch between configured cameras without leaving the page. Defaults to the first camera alphabetically.
Time scrubber — a slider representing the full day. Each tick is a snapshot; dragging shows the image for the closest timestamp. Dots above the track show motion-event positions at a glance.
Filmstrip — 10 adjacent thumbnails below the main image provide spatial context. Click any thumbnail to jump to that frame.
Play/Pause — auto-advance through snapshots. Speed selector offers 1×, 2×, 5×, and 10× playback rates.
Keyboard shortcuts — Left/Right arrows step frame by frame, Space toggles play/pause, Home/End jump to first/last snapshot.

A sticky header is shown at the top of every page. It displays the Cang icon, the application name, a short tagline, and navigation links — All days returns to the home calendar, and Log out ends the current session (only shown when authentication is enabled). The header remains visible while scrolling.