update index.js to use baseUrl

fixes #544

Makefile

@@ -9,49 +9,49 @@ web:
 	docker build --tag frigate-web --file docker/Dockerfile.web web/
 
 amd64_wheels:
-	docker build --tag blakeblackshear/frigate-wheels:1.0.0-amd64 --file docker/Dockerfile.wheels .
+	docker build --tag blakeblackshear/frigate-wheels:1.0.1-amd64 --file docker/Dockerfile.wheels .
 
 amd64_ffmpeg:
 	docker build --tag blakeblackshear/frigate-ffmpeg:1.1.0-amd64 --file docker/Dockerfile.ffmpeg.amd64 .
 
 amd64_frigate: version web
-	docker build --tag frigate-base --build-arg ARCH=amd64 --build-arg FFMPEG_VERSION=1.1.0 --build-arg WHEELS_VERSION=1.0.0 --file docker/Dockerfile.base .
+	docker build --tag frigate-base --build-arg ARCH=amd64 --build-arg FFMPEG_VERSION=1.1.0 --build-arg WHEELS_VERSION=1.0.1 --file docker/Dockerfile.base .
 	docker build --tag frigate --file docker/Dockerfile.amd64 .
 
 amd64_all: amd64_wheels amd64_ffmpeg amd64_frigate
 
 amd64nvidia_wheels:
-	docker build --tag blakeblackshear/frigate-wheels:1.0.0-amd64nvidia --file docker/Dockerfile.wheels .
+	docker build --tag blakeblackshear/frigate-wheels:1.0.1-amd64nvidia --file docker/Dockerfile.wheels .
 
 amd64nvidia_ffmpeg:
 	docker build --tag blakeblackshear/frigate-ffmpeg:1.0.0-amd64nvidia --file docker/Dockerfile.ffmpeg.amd64nvidia .
 
 amd64nvidia_frigate: version web
-	docker build --tag frigate-base --build-arg ARCH=amd64nvidia --build-arg FFMPEG_VERSION=1.0.0 --build-arg WHEELS_VERSION=1.0.0 --file docker/Dockerfile.base .
+	docker build --tag frigate-base --build-arg ARCH=amd64nvidia --build-arg FFMPEG_VERSION=1.0.0 --build-arg WHEELS_VERSION=1.0.1 --file docker/Dockerfile.base .
 	docker build --tag frigate --file docker/Dockerfile.amd64nvidia .
 
 amd64nvidia_all: amd64nvidia_wheels amd64nvidia_ffmpeg amd64nvidia_frigate
 
 aarch64_wheels:
-	docker build --tag blakeblackshear/frigate-wheels:1.0.0-aarch64 --file docker/Dockerfile.wheels .
+	docker build --tag blakeblackshear/frigate-wheels:1.0.1-aarch64 --file docker/Dockerfile.wheels .
 
 aarch64_ffmpeg:
 	docker build --tag blakeblackshear/frigate-ffmpeg:1.0.0-aarch64 --file docker/Dockerfile.ffmpeg.aarch64 .
 
 aarch64_frigate: version web
-	docker build --tag frigate-base --build-arg ARCH=aarch64 --build-arg FFMPEG_VERSION=1.0.0 --build-arg WHEELS_VERSION=1.0.0 --file docker/Dockerfile.base .
+	docker build --tag frigate-base --build-arg ARCH=aarch64 --build-arg FFMPEG_VERSION=1.0.0 --build-arg WHEELS_VERSION=1.0.1 --file docker/Dockerfile.base .
 	docker build --tag frigate --file docker/Dockerfile.aarch64 .
 
 armv7_all: armv7_wheels armv7_ffmpeg armv7_frigate
 
 armv7_wheels:
-	docker build --tag blakeblackshear/frigate-wheels:1.0.0-armv7 --file docker/Dockerfile.wheels .
+	docker build --tag blakeblackshear/frigate-wheels:1.0.1-armv7 --file docker/Dockerfile.wheels .
 
 armv7_ffmpeg:
 	docker build --tag blakeblackshear/frigate-ffmpeg:1.0.0-armv7 --file docker/Dockerfile.ffmpeg.armv7 .
 
 armv7_frigate: version web
-	docker build --tag frigate-base --build-arg ARCH=armv7 --build-arg FFMPEG_VERSION=1.0.0 --build-arg WHEELS_VERSION=1.0.0 --file docker/Dockerfile.base .
+	docker build --tag frigate-base --build-arg ARCH=armv7 --build-arg FFMPEG_VERSION=1.0.0 --build-arg WHEELS_VERSION=1.0.1 --file docker/Dockerfile.base .
 	docker build --tag frigate --file docker/Dockerfile.armv7 .
 
 armv7_all: armv7_wheels armv7_ffmpeg armv7_frigate

docker/Dockerfile.wheels

@@ -24,7 +24,8 @@ RUN pip3 install scikit-build
 
 RUN pip3 wheel --wheel-dir=/wheels \
     opencv-python-headless \
-    numpy \
+    # pinning due to issue in 1.19.5 https://github.com/numpy/numpy/issues/18131
+    numpy==1.19.4 \
     imutils \
     scipy \
     psutil \

docs/notification-examples.md

@@ -16,7 +16,7 @@ automation:
         data_template:
           message: "A {{trigger.payload_json['after']['label']}} has entered the yard."
           data:
-            image: "https://url.com/api/frigate/notifications/{{trigger.payload_json['after']['id']}}.jpg"
+            image: "https://url.com/api/frigate/notifications/{{trigger.payload_json['after']['id']}}/thumbnail.jpg"
             tag: "{{trigger.payload_json['after']['id']}}"
 
   - alias: When a person leaves a zone named yard

frigate/app.py

@@ -74,7 +74,7 @@ class FrigateApp():
                 'camera_fps': mp.Value('d', 0.0),
                 'skipped_fps': mp.Value('d', 0.0),
                 'process_fps': mp.Value('d', 0.0),
-                'detection_enabled': mp.Value('i', 1),
+                'detection_enabled': mp.Value('i', self.config.cameras[camera_name].detect.enabled),
                 'detection_fps': mp.Value('d', 0.0),
                 'detection_frame': mp.Value('d', 0.0),
                 'read_start': mp.Value('d', 0.0),
@@ -202,7 +202,7 @@ class FrigateApp():
             try:
                 self.init_config()
             except Exception as e:
-                logger.error(f"Error parsing config: {e}")
+                print(f"Error parsing config: {e}")
                 self.log_process.terminate()
                 sys.exit(1)
             self.set_environment_vars()

frigate/mqtt.py

@@ -15,7 +15,6 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
         logger.debug(f"on_clips_toggle: {message.topic} {payload}")
 
         camera_name = message.topic.split('/')[-3]
-        command = message.topic.split('/')[-1]
 
         clips_settings = config.cameras[camera_name].clips
 
@@ -30,16 +29,14 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
         else:
             logger.warning(f"Received unsupported value at {message.topic}: {payload}")
 
-        if command == "set":
-            state_topic = f"{message.topic[:-4]}/state"
-            client.publish(state_topic, payload, retain=True)
+        state_topic = f"{message.topic[:-4]}/state"
+        client.publish(state_topic, payload, retain=True)
 
     def on_snapshots_command(client, userdata, message):
         payload = message.payload.decode()
         logger.debug(f"on_snapshots_toggle: {message.topic} {payload}")
 
         camera_name = message.topic.split('/')[-3]
-        command = message.topic.split('/')[-1]
 
         snapshots_settings = config.cameras[camera_name].snapshots
 
@@ -54,16 +51,14 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
         else:
             logger.warning(f"Received unsupported value at {message.topic}: {payload}")
 
-        if command == "set":
-            state_topic = f"{message.topic[:-4]}/state"
-            client.publish(state_topic, payload, retain=True)
+        state_topic = f"{message.topic[:-4]}/state"
+        client.publish(state_topic, payload, retain=True)
     
     def on_detect_command(client, userdata, message):
         payload = message.payload.decode()
         logger.debug(f"on_detect_toggle: {message.topic} {payload}")
 
         camera_name = message.topic.split('/')[-3]
-        command = message.topic.split('/')[-1]
 
         detect_settings = config.cameras[camera_name].detect
 
@@ -80,9 +75,8 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
         else:
             logger.warning(f"Received unsupported value at {message.topic}: {payload}")
 
-        if command == "set":
-            state_topic = f"{message.topic[:-4]}/state"
-            client.publish(state_topic, payload, retain=True)
+        state_topic = f"{message.topic[:-4]}/state"
+        client.publish(state_topic, payload, retain=True)
 
     def on_connect(client, userdata, flags, rc):
         threading.current_thread().name = "mqtt"
@@ -105,9 +99,9 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
     
     # register callbacks
     for name in config.cameras.keys():
-        client.message_callback_add(f"{mqtt_config.topic_prefix}/{name}/clips/#", on_clips_command)
-        client.message_callback_add(f"{mqtt_config.topic_prefix}/{name}/snapshots/#", on_snapshots_command)
-        client.message_callback_add(f"{mqtt_config.topic_prefix}/{name}/detect/#", on_detect_command)
+        client.message_callback_add(f"{mqtt_config.topic_prefix}/{name}/clips/set", on_clips_command)
+        client.message_callback_add(f"{mqtt_config.topic_prefix}/{name}/snapshots/set", on_snapshots_command)
+        client.message_callback_add(f"{mqtt_config.topic_prefix}/{name}/detect/set", on_detect_command)
 
     if not mqtt_config.user is None:
         client.username_pw_set(mqtt_config.user, password=mqtt_config.password)
@@ -123,9 +117,9 @@ def create_mqtt_client(config: FrigateConfig, camera_metrics):
         client.publish(f"{mqtt_config.topic_prefix}/{name}/clips/state", 'ON' if config.cameras[name].clips.enabled else 'OFF', retain=True)
         client.publish(f"{mqtt_config.topic_prefix}/{name}/snapshots/state", 'ON' if config.cameras[name].clips.enabled else 'OFF', retain=True)
         client.publish(f"{mqtt_config.topic_prefix}/{name}/detect/state", 'ON' if config.cameras[name].clips.enabled else 'OFF', retain=True)
-        
-    client.subscribe(f"{mqtt_config.topic_prefix}/+/clips/#")
-    client.subscribe(f"{mqtt_config.topic_prefix}/+/snapshots/#")
-    client.subscribe(f"{mqtt_config.topic_prefix}/+/detect/#")
+
+    client.subscribe(f"{mqtt_config.topic_prefix}/+/clips/set")
+    client.subscribe(f"{mqtt_config.topic_prefix}/+/snapshots/set")
+    client.subscribe(f"{mqtt_config.topic_prefix}/+/detect/set")
 
     return client

nginx/nginx.conf

@@ -106,8 +106,14 @@ http {
         }
 
         location / {
-          root /opt/frigate/web;
-          try_files $uri $uri/ /index.html;
+            sub_filter 'href="/' 'href="$http_x_ingress_path/';
+            sub_filter 'url(/' 'url($http_x_ingress_path/';
+            sub_filter '"/js/' '"$http_x_ingress_path/js/';
+            sub_filter '<body>' '<body><script>window.baseUrl="$http_x_ingress_path";</script>';
+            sub_filter_types text/css application/javascript;
+            sub_filter_once off;
+            root /opt/frigate/web;
+            try_files $uri $uri/ /index.html;
         }
     }
 }

web/snowpack.config.js

@@ -21,6 +21,7 @@ module.exports = {
       },
     ],
   ],
+  routes: [{ match: 'routes', src: '.*', dest: '/index.html' }],
   packageOptions: {
     sourcemap: false,
   },

web/src/App.jsx

@@ -24,9 +24,9 @@ export default function App() {
     <div />
   ) : (
     <Config.Provider value={config}>
-      <div className="md:flex flex-col md:flex-row md:min-h-screen w-full bg-gray-100 dark:bg-gray-800 ">
+      <div className="md:flex flex-col md:flex-row md:min-h-screen w-full bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white">
         <Sidebar />
-        <div className="p-4">
+        <div className="p-4 min-w-0">
           <Router>
             <CameraMap path="/cameras/:camera/editor" />
             <Camera path="/cameras/:camera" />

web/src/Camera.jsx

@@ -1,4 +1,5 @@
 import { h } from 'preact';
+import Box from './components/Box';
 import Heading from './components/Heading';
 import Link from './components/Link';
 import Switch from './components/Switch';
@@ -32,45 +33,39 @@ export default function Camera({ camera, url }) {
   }
 
   return (
-    <div>
+    <div className="space-y-4">
       <Heading size="2xl">{camera}</Heading>
-      <img
-        width={cameraConfig.width}
-        height={cameraConfig.height}
-        key={searchParamsString}
-        src={`${apiHost}/api/${camera}?${searchParamsString}`}
-      />
-      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
+      <Box>
+        <img
+          width={cameraConfig.width}
+          height={cameraConfig.height}
+          key={searchParamsString}
+          src={`${apiHost}/api/${camera}?${searchParamsString}`}
+        />
+      </Box>
+
+      <Box className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
         <Switch checked={getBoolean('bbox')} id="bbox" label="Bounding box" onChange={handleSetOption} />
         <Switch checked={getBoolean('timestamp')} id="timestamp" label="Timestamp" onChange={handleSetOption} />
         <Switch checked={getBoolean('zones')} id="zones" label="Zones" onChange={handleSetOption} />
         <Switch checked={getBoolean('mask')} id="mask" label="Masks" onChange={handleSetOption} />
         <Switch checked={getBoolean('motion')} id="motion" label="Motion boxes" onChange={handleSetOption} />
         <Switch checked={getBoolean('regions')} id="regions" label="Regions" onChange={handleSetOption} />
-      </div>
-      <div>
+        <Link href={`/cameras/${camera}/editor`}>Mask & Zone creator</Link>
+      </Box>
+
+      <div className="space-y-4">
         <Heading size="sm">Tracked objects</Heading>
-        <ul className="flex flex-row flex-wrap space-x-4">
+        <div className="grid grid-cols-3 md:grid-cols-4 gap-4">
           {cameraConfig.objects.track.map((objectType) => {
             return (
-              <li key={objectType}>
-                <Link href={`/events?camera=${camera}&label=${objectType}`}>
-                  <span className="capitalize">{objectType}</span>
-                  <img src={`${apiHost}/api/${camera}/${objectType}/best.jpg?crop=1&h=150`} />
-                </Link>
-              </li>
+              <Box key={objectType} hover href={`/events?camera=${camera}&label=${objectType}`}>
+                <Heading size="sm">{objectType}</Heading>
+                <img src={`${apiHost}/api/${camera}/${objectType}/best.jpg?crop=1&h=150`} />
+              </Box>
             );
           })}
-        </ul>
-      </div>
-
-      <div>
-        <Heading size="sm">Options</Heading>
-        <ul>
-          <li>
-            <Link href={`/cameras/${camera}/editor`}>Mask & Zone creator</Link>
-          </li>
-        </ul>
+        </div>
       </div>
     </div>
   );

web/src/CameraMap.jsx

@@ -1,4 +1,5 @@
 import { h } from 'preact';
+import Box from './components/Box';
 import Button from './components/Button';
 import Heading from './components/Heading';
 import Switch from './components/Switch';
@@ -11,6 +12,7 @@ export default function CameraMasks({ camera, url }) {
   const apiHost = useContext(ApiHost);
   const imageRef = useRef(null);
   const [imageScale, setImageScale] = useState(1);
+  const [snap, setSnap] = useState(true);
 
   if (!(camera in config.cameras)) {
     return <div>{`No camera named ${camera}`}</div>;
@@ -203,23 +205,39 @@ ${Object.keys(objectMaskPoints)
   .join('\n')}`);
   }, [objectMaskPoints]);
 
+  const handleChangeSnap = useCallback(
+    (id, value) => {
+      setSnap(value);
+    },
+    [setSnap]
+  );
+
   return (
     <div class="flex-col space-y-4" style={`max-width: ${width}px`}>
       <Heading size="2xl">{camera} mask & zone creator</Heading>
-      <p>
-        This tool can help you create masks & zones for your {camera} camera. When done, copy each mask configuration
-        into your <code className="font-mono">config.yml</code> file restart your Frigate instance to save your changes.
-      </p>
-      <div className="relative">
-        <img ref={imageRef} width={width} height={height} src={`${apiHost}/api/${camera}/latest.jpg`} />
-        <EditableMask
-          onChange={handleUpdateEditable}
-          points={editing.subkey ? editing.set[editing.key][editing.subkey] : editing.set[editing.key]}
-          scale={imageScale}
-          width={width}
-          height={height}
-        />
-      </div>
+
+      <Box>
+        <p>
+          This tool can help you create masks & zones for your {camera} camera. When done, copy each mask configuration
+          into your <code className="font-mono">config.yml</code> file restart your Frigate instance to save your
+          changes.
+        </p>
+      </Box>
+
+      <Box className="space-y-4">
+        <div className="relative">
+          <img ref={imageRef} width={width} height={height} src={`${apiHost}/api/${camera}/latest.jpg`} />
+          <EditableMask
+            onChange={handleUpdateEditable}
+            points={editing.subkey ? editing.set[editing.key][editing.subkey] : editing.set[editing.key]}
+            scale={imageScale}
+            snap={snap}
+            width={width}
+            height={height}
+          />
+        </div>
+        <Switch checked={snap} label="Snap to edges" onChange={handleChangeSnap} />
+      </Box>
 
       <div class="flex-col space-y-4">
         <MaskValues
@@ -276,14 +294,25 @@ function objectYamlKeyPrefix(points, key, subkey) {
   return `        - `;
 }
 
-function EditableMask({ onChange, points, scale, width, height }) {
+const MaskInset = 20;
+
+function EditableMask({ onChange, points, scale, snap, width, height }) {
   if (!points) {
     return null;
   }
   const boundingRef = useRef(null);
 
   function boundedSize(value, maxValue) {
-    return Math.min(Math.max(0, Math.round(value)), maxValue);
+    const newValue = Math.min(Math.max(0, Math.round(value)), maxValue);
+    if (snap) {
+      if (newValue <= MaskInset) {
+        return 0;
+      } else if (maxValue - newValue <= MaskInset) {
+        return maxValue;
+      }
+    }
+
+    return newValue;
   }
 
   const handleMovePoint = useCallback(
@@ -291,35 +320,40 @@ function EditableMask({ onChange, points, scale, width, height }) {
       if (newX < 0 && newY < 0) {
         return;
       }
-      const x = boundedSize(newX / scale, width);
-      const y = boundedSize(newY / scale, height);
+      let x = boundedSize(newX / scale, width, snap);
+      let y = boundedSize(newY / scale, height, snap);
+
       const newPoints = [...points];
       newPoints[index] = [x, y];
       onChange(newPoints);
     },
-    [scale, points]
+    [scale, points, snap]
   );
 
   // Add a new point between the closest two other points
   const handleAddPoint = useCallback(
     (event) => {
       const { offsetX, offsetY } = event;
-      const scaledX = boundedSize(offsetX / scale, width);
-      const scaledY = boundedSize(offsetY / scale, height);
+      const scaledX = boundedSize((offsetX - MaskInset) / scale, width, snap);
+      const scaledY = boundedSize((offsetY - MaskInset) / scale, height, snap);
       const newPoint = [scaledX, scaledY];
-      const closest = points.reduce((a, b, i) => {
-        if (!a) {
-          return b;
-        }
-        return distance(a, newPoint) < distance(b, newPoint) ? a : b;
-      }, null);
-      const index = points.indexOf(closest);
+
+      let closest;
+      const { index } = points.reduce(
+        (result, point, i) => {
+          const nextPoint = points.length === i + 1 ? points[0] : points[i + 1];
+          const distance0 = Math.sqrt(Math.pow(point[0] - newPoint[0], 2) + Math.pow(point[1] - newPoint[1], 2));
+          const distance1 = Math.sqrt(Math.pow(point[0] - nextPoint[0], 2) + Math.pow(point[1] - nextPoint[1], 2));
+          const distance = distance0 + distance1;
+          return distance < result.distance ? { distance, index: i } : result;
+        },
+        { distance: Infinity, index: -1 }
+      );
       const newPoints = [...points];
       newPoints.splice(index, 0, newPoint);
-      console.log(points, newPoints);
       onChange(newPoints);
     },
-    [scale, points, onChange]
+    [scale, points, onChange, snap]
   );
 
   const handleRemovePoint = useCallback(
@@ -334,7 +368,7 @@ function EditableMask({ onChange, points, scale, width, height }) {
   const scaledPoints = useMemo(() => scalePolylinePoints(points, scale), [points, scale]);
 
   return (
-    <div onclick={handleAddPoint}>
+    <div className="absolute" style={`inset: -${MaskInset}px`}>
       {!scaledPoints
         ? null
         : scaledPoints.map(([x, y], i) => (
@@ -343,17 +377,12 @@ function EditableMask({ onChange, points, scale, width, height }) {
               index={i}
               onMove={handleMovePoint}
               onRemove={handleRemovePoint}
-              x={x}
-              y={y}
+              x={x + MaskInset}
+              y={y + MaskInset}
             />
           ))}
-      <svg
-        ref={boundingRef}
-        width="100%"
-        height="100%"
-        className="absolute"
-        style="top: 0; left: 0; right: 0; bottom: 0;"
-      >
+      <div className="absolute inset-0 right-0 bottom-0" onclick={handleAddPoint} ref={boundingRef} />
+      <svg width="100%" height="100%" className="absolute pointer-events-none" style={`inset: ${MaskInset}px`}>
         {!scaledPoints ? null : (
           <g>
             <polyline points={polylinePointsToPolyline(scaledPoints)} fill="rgba(244,0,0,0.5)" />
@@ -410,11 +439,7 @@ function MaskValues({
   );
 
   return (
-    <div
-      className="overflow-hidden rounded border-gray-500 border-solid border p-2"
-      onmouseover={handleMousein}
-      onmouseout={handleMouseout}
-    >
+    <Box className="overflow-hidden" onmouseover={handleMousein} onmouseout={handleMouseout}>
       <div class="flex space-x-4">
         <Heading className="flex-grow self-center" size="base">
           {title}
@@ -422,7 +447,7 @@ function MaskValues({
         <Button onClick={onCopy}>Copy</Button>
         <Button onClick={onCreate}>Add</Button>
       </div>
-      <pre class="overflow-hidden font-mono text-gray-900 dark:text-gray-100">
+      <pre class="relative overflow-auto font-mono text-gray-900 dark:text-gray-100 rounded bg-gray-100 dark:bg-gray-800 p-2">
         {yamlPrefix}
         {Object.keys(points).map((mainkey) => {
           if (isMulti) {
@@ -458,7 +483,7 @@ function MaskValues({
           }
         })}
       </pre>
-    </div>
+    </Box>
   );
 }
 
@@ -489,10 +514,6 @@ function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, handl
   );
 }
 
-function distance([x0, y0], [x1, y1]) {
-  return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
-}
-
 function getPolylinePoints(polyline) {
   if (!polyline) {
     return;
@@ -529,10 +550,13 @@ function PolyPoint({ boundingRef, index, x, y, onMove, onRemove }) {
 
   const handleDragOver = useCallback(
     (event) => {
-      if (event.target !== boundingRef.current && !boundingRef.current.contains(event.target)) {
+      if (
+        !boundingRef.current ||
+        (event.target !== boundingRef.current && !boundingRef.current.contains(event.target))
+      ) {
         return;
       }
-      onMove(index, event.layerX, event.layerY - PolyPointRadius);
+      onMove(index, event.layerX - PolyPointRadius * 2, event.layerY - PolyPointRadius * 2);
     },
     [onMove, index, boundingRef.current]
   );

web/src/Cameras.jsx

@@ -1,4 +1,5 @@
 import { h } from 'preact';
+import Box from './components/Box';
 import Events from './Events';
 import Heading from './components/Heading';
 import { route } from 'preact-router';
@@ -26,11 +27,12 @@ function Camera({ name }) {
   const href = `/cameras/${name}`;
 
   return (
-    <div className="bg-white dark:bg-gray-700 shadow-lg rounded-lg p-4  hover:bg-gray-300 hover:dark:bg-gray-500 dark:hover:text-gray-900">
-      <a className="dark:hover:text-gray-900" href={href}>
-        <Heading size="base">{name}</Heading>
-        <img className="w-full" src={`${apiHost}/api/${name}/latest.jpg`} />
-      </a>
-    </div>
+    <Box
+      className="bg-white dark:bg-gray-700 shadow-lg rounded-lg p-4 hover:bg-gray-300 hover:dark:bg-gray-500 dark:hover:text-gray-900 dark:hover:text-gray-900"
+      href={href}
+    >
+      <Heading size="base">{name}</Heading>
+      <img className="w-full" src={`${apiHost}/api/${name}/latest.jpg`} />
+    </Box>
   );
 }

web/src/Debug.jsx

@@ -1,16 +1,97 @@
 import { h } from 'preact';
-import { ApiHost } from './context';
-import { useContext, useEffect, useState } from 'preact/hooks';
+import Heading from './components/Heading';
+import Link from './components/Link';
+import { ApiHost, Config } from './context';
+import { Table, Tbody, Thead, Tr, Th, Td } from './components/Table';
+import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
 
 export default function Debug() {
   const apiHost = useContext(ApiHost);
-  const [config, setConfig] = useState({});
+  const config = useContext(Config);
+  const [stats, setStats] = useState({});
+  const [timeoutId, setTimeoutId] = useState(null);
 
-  useEffect(async () => {
-    const response = await fetch(`${apiHost}/api/stats`);
-    const data = response.ok ? await response.json() : {};
-    setConfig(data);
+  const fetchStats = useCallback(async () => {
+    const statsResponse = await fetch(`${apiHost}/api/stats`);
+    const stats = statsResponse.ok ? await statsResponse.json() : {};
+    setStats(stats);
+    setTimeoutId(setTimeout(fetchStats, 1000));
+  }, [setStats]);
+
+  useEffect(() => {
+    fetchStats();
   }, []);
 
-  return <pre>{JSON.stringify(config, null, 2)}</pre>;
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [timeoutId]);
+
+  const { detectors, detection_fps, service, ...cameras } = stats;
+  if (!service) {
+    return 'loading…';
+  }
+
+  const detectorNames = Object.keys(detectors);
+  const detectorDataKeys = Object.keys(detectors[detectorNames[0]]);
+
+  const cameraNames = Object.keys(cameras);
+  const cameraDataKeys = Object.keys(cameras[cameraNames[0]]);
+
+  return (
+    <div>
+      <Heading>
+        Debug <span className="text-sm">{service.version}</span>
+      </Heading>
+      <Table className="w-full">
+        <Thead>
+          <Tr>
+            <Th>detector</Th>
+            {detectorDataKeys.map((name) => (
+              <Th>{name.replace('_', ' ')}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {detectorNames.map((detector, i) => (
+            <Tr index={i}>
+              <Td>{detector}</Td>
+              {detectorDataKeys.map((name) => (
+                <Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+
+      <Table className="w-full">
+        <Thead>
+          <Tr>
+            <Th>camera</Th>
+            {cameraDataKeys.map((name) => (
+              <Th>{name.replace('_', ' ')}</Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {cameraNames.map((camera, i) => (
+            <Tr index={i}>
+              <Td>
+                <Link href={`/cameras/${camera}`}>{camera}</Link>
+              </Td>
+              {cameraDataKeys.map((name) => (
+                <Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+
+      <Heading size="sm">Config</Heading>
+      <pre className="font-mono overflow-y-scroll overflow-x-scroll max-h-96 rounded bg-white dark:bg-gray-900">
+        {JSON.stringify(config, null, 2)}
+      </pre>
+    </div>
+  );
 }

web/src/Event.jsx

@@ -1,6 +1,9 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import { ApiHost } from './context';
+import Box from './components/Box';
 import Heading from './components/Heading';
+import Link from './components/Link';
+import { Table, Thead, Tbody, Tfoot, Th, Tr, Td } from './components/Table';
 import { useContext, useEffect, useState } from 'preact/hooks';
 
 export default function Event({ eventId }) {
@@ -22,24 +25,66 @@ export default function Event({ eventId }) {
     );
   }
 
-  const datetime = new Date(data.start_time * 1000);
+  const startime = new Date(data.start_time * 1000);
+  const endtime = new Date(data.end_time * 1000);
 
   return (
-    <div>
+    <div className="space-y-4">
       <Heading>
-        {data.camera} {data.label} <span className="text-sm">{datetime.toLocaleString()}</span>
+        {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
       </Heading>
-      <img
-        src={`${apiHost}/clips/${data.camera}-${eventId}.jpg`}
-        alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
-      />
-      {data.has_clip ? (
-        <video className="w-96" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
-      ) : (
-        <p>No clip available</p>
-      )}
 
-      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <Box>
+        {data.has_clip ? (
+          <Fragment>
+            <Heading size="sm">Clip</Heading>
+            <video className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
+          </Fragment>
+        ) : (
+          <p>No clip available</p>
+        )}
+      </Box>
+
+      <Box>
+        <Heading size="sm">{data.has_snapshot ? 'Best image' : 'Thumbnail'}</Heading>
+        <img
+          src={
+            data.has_snapshot
+              ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
+              : `data:image/jpeg;base64,${data.thumbnail}`
+          }
+          alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
+        />
+      </Box>
+
+      <Table>
+        <Thead>
+          <Th>Key</Th>
+          <Th>Value</Th>
+        </Thead>
+        <Tbody>
+          <Tr>
+            <Td>Camera</Td>
+            <Td>
+              <Link href={`/cameras/${data.camera}`}>{data.camera}</Link>
+            </Td>
+          </Tr>
+          <Tr index={1}>
+            <Td>Timeframe</Td>
+            <Td>
+              {startime.toLocaleString()} – {endtime.toLocaleString()}
+            </Td>
+          </Tr>
+          <Tr>
+            <Td>Score</Td>
+            <Td>{(data.top_score * 100).toFixed(2)}%</Td>
+          </Tr>
+          <Tr index={1}>
+            <Td>Zones</Td>
+            <Td>{data.zones.join(', ')}</Td>
+          </Tr>
+        </Tbody>
+      </Table>
     </div>
   );
 }

web/src/Events.jsx

@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { ApiHost } from './context';
+import Box from './components/Box';
 import Heading from './components/Heading';
 import Link from './components/Link';
 import { route } from 'preact-router';
@@ -19,71 +20,82 @@ export default function Events({ url } = {}) {
     setEvents(data);
   }, [searchParamsString]);
 
+  const searchKeys = Array.from(searchParams.keys());
+
   return (
-    <div>
+    <div className="space-y-4">
       <Heading>Events</Heading>
-      <div className="flex flex-wrap space-x-2">
-        {Array.from(searchParams.keys()).map((filterKey) => (
-          <UnFilterable
-            paramName={filterKey}
-            searchParams={searchParamsString}
-            name={`${filterKey}: ${searchParams.get(filterKey)}`}
-          />
-        ))}
-      </div>
-      <Table>
-        <Thead>
-          <Tr>
-            <Th></Th>
-            <Th>Camera</Th>
-            <Th>Label</Th>
-            <Th>Score</Th>
-            <Th>Zones</Th>
-            <Th>Date</Th>
-            <Th>Start</Th>
-            <Th>End</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {events.map(
-            (
-              { camera, id, label, start_time: startTime, end_time: endTime, thumbnail, top_score: score, zones },
-              i
-            ) => {
-              const start = new Date(parseInt(startTime * 1000, 10));
-              const end = new Date(parseInt(endTime * 1000, 10));
-              return (
-                <Tr key={id} index={i}>
-                  <Td>
-                    <a href={`/events/${id}`}>
-                      <img className="w-32" src={`data:image/jpeg;base64,${thumbnail}`} />
-                    </a>
-                  </Td>
-                  <Td>
-                    <Filterable searchParams={searchParamsString} paramName="camera" name={camera} />
-                  </Td>
-                  <Td>
-                    <Filterable searchParams={searchParamsString} paramName="label" name={label} />
-                  </Td>
-                  <Td>{(score * 100).toFixed(2)}%</Td>
-                  <Td>
-                    <ul>
-                      {zones.map((zone) => (
-                        <li>
-                          <Filterable searchParams={searchParamsString} paramName="zone" name={zone} />
-                        </li>
-                      ))}
-                    </ul>
-                  </Td>
-                  <Td>{start.toLocaleDateString()}</Td>
-                  <Td>{start.toLocaleTimeString()}</Td>
-                  <Td>{end.toLocaleTimeString()}</Td>
-                </Tr>
-              );
-            }
-          )}
-        </Tbody>
-      </Table>
+
+      {searchKeys.length ? (
+        <Box>
+          <Heading size="sm">Filters</Heading>
+          <div className="flex flex-wrap space-x-2">
+            {searchKeys.map((filterKey) => (
+              <UnFilterable
+                paramName={filterKey}
+                searchParams={searchParamsString}
+                name={`${filterKey}: ${searchParams.get(filterKey)}`}
+              />
+            ))}
+          </div>
+        </Box>
+      ) : null}
+
+      <Box className="min-w-0 overflow-auto">
+        <Table>
+          <Thead>
+            <Tr>
+              <Th></Th>
+              <Th>Camera</Th>
+              <Th>Label</Th>
+              <Th>Score</Th>
+              <Th>Zones</Th>
+              <Th>Date</Th>
+              <Th>Start</Th>
+              <Th>End</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            {events.map(
+              (
+                { camera, id, label, start_time: startTime, end_time: endTime, thumbnail, top_score: score, zones },
+                i
+              ) => {
+                const start = new Date(parseInt(startTime * 1000, 10));
+                const end = new Date(parseInt(endTime * 1000, 10));
+                return (
+                  <Tr key={id} index={i}>
+                    <Td>
+                      <a href={`/events/${id}`}>
+                        <img className="w-32 max-w-none" src={`data:image/jpeg;base64,${thumbnail}`} />
+                      </a>
+                    </Td>
+                    <Td>
+                      <Filterable searchParams={searchParamsString} paramName="camera" name={camera} />
+                    </Td>
+                    <Td>
+                      <Filterable searchParams={searchParamsString} paramName="label" name={label} />
+                    </Td>
+                    <Td>{(score * 100).toFixed(2)}%</Td>
+                    <Td>
+                      <ul>
+                        {zones.map((zone) => (
+                          <li>
+                            <Filterable searchParams={searchParamsString} paramName="zone" name={zone} />
+                          </li>
+                        ))}
+                      </ul>
+                    </Td>
+                    <Td>{start.toLocaleDateString()}</Td>
+                    <Td>{start.toLocaleTimeString()}</Td>
+                    <Td>{end.toLocaleTimeString()}</Td>
+                  </Tr>
+                );
+              }
+            )}
+          </Tbody>
+        </Table>
+      </Box>
     </div>
   );
 }

web/src/components/Box.jsx

@@ -0,0 +1,16 @@
+import { h } from 'preact';
+
+export default function Box({ children, className = '', hover = false, href, ...props }) {
+  const Element = href ? 'a' : 'div';
+  return (
+    <Element
+      className={`bg-white dark:bg-gray-700 shadow-lg rounded-lg p-4 ${
+        hover ? 'hover:bg-gray-300 hover:dark:bg-gray-500 dark:hover:text-gray-900 dark:hover:text-gray-900' : ''
+      } ${className}`}
+      href={href}
+      {...props}
+    >
+      {children}
+    </Element>
+  );
+}

web/src/components/Button.jsx

@@ -2,12 +2,18 @@ import { h } from 'preact';
 
 const noop = () => {};
 
+const BUTTON_COLORS = {
+  blue: { normal: 'bg-blue-500', hover: 'hover:bg-blue-400' },
+  red: { normal: 'bg-red-500', hover: 'hover:bg-red-400' },
+  green: { normal: 'bg-green-500', hover: 'hover:bg-green-400' },
+};
+
 export default function Button({ children, className, color = 'blue', onClick, size, ...attrs }) {
   return (
     <div
       role="button"
       tabindex="0"
-      className={`rounded bg-${color}-500 text-white pl-4 pr-4 pt-2 pb-2 font-bold shadow hover:bg-${color}-400 hover:shadow-lg cursor-pointer ${className}`}
+      className={`rounded ${BUTTON_COLORS[color].normal} text-white pl-4 pr-4 pt-2 pb-2 font-bold shadow ${BUTTON_COLORS[color].hover} hover:shadow-lg cursor-pointer ${className}`}
       onClick={onClick || noop}
       {...attrs}
     >

web/src/components/Heading.jsx

@@ -1,9 +1,5 @@
 import { h } from 'preact';
 
 export default function Heading({ children, className = '', size = '2xl' }) {
-  return (
-    <h1 className={`font-semibold tracking-widest text-gray-900 uppercase dark:text-white text-${size} ${className}`}>
-      {children}
-    </h1>
-  );
+  return <h1 className={`font-semibold tracking-widest uppercase text-${size} ${className}`}>{children}</h1>;
 }

web/src/components/Link.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 
 export default function Link({ className, children, href, ...props }) {
   return (
-    <a className={`text-blue-500 hover:underline ${className}`} href={href} {...props}>
+    <a className={`text-blue-500 dark:text-blue-400 hover:underline ${className}`} href={href} {...props}>
       {children}
     </a>
   );

web/src/components/Switch.jsx

@@ -14,7 +14,11 @@ export default function Switch({ checked, label, id, onChange }) {
     <label for={id} className="flex items-center cursor-pointer">
       <div className="relative">
         <input id={id} type="checkbox" className="hidden" onChange={handleChange} checked={checked} />
-        <div className="toggle__line w-12 h-6 bg-gray-400 rounded-full shadow-inner" />
+        <div
+          className={`transition-colors toggle__line w-12 h-6 ${
+            !checked ? 'bg-gray-400' : 'bg-blue-400'
+          } rounded-full shadow-inner`}
+        />
         <div
           className="transition-transform absolute w-6 h-6 bg-white rounded-full shadow-md inset-y-0 left-0"
           style={checked ? 'transform: translateX(100%);' : 'transform: translateX(0%);'}

web/src/components/Table.jsx

@@ -1,29 +1,31 @@
 import { h } from 'preact';
 
-export function Table({ children }) {
-  return <table className="table-auto border-collapse text-gray-900 dark:text-gray-200">{children}</table>;
+export function Table({ children, className = '' }) {
+  return (
+    <table className={`table-auto border-collapse text-gray-900 dark:text-gray-200 ${className}`}>{children}</table>
+  );
 }
 
-export function Thead({ children }) {
-  return <thead className="">{children}</thead>;
+export function Thead({ children, className = '' }) {
+  return <thead className={`${className}`}>{children}</thead>;
 }
 
-export function Tbody({ children }) {
-  return <tbody className="">{children}</tbody>;
+export function Tbody({ children, className = '' }) {
+  return <tbody className={`${className}`}>{children}</tbody>;
 }
 
-export function Tfoot({ children }) {
-  return <tfoot className="">{children}</tfoot>;
+export function Tfoot({ children, className = '' }) {
+  return <tfoot className={`${className}`}>{children}</tfoot>;
 }
 
-export function Tr({ children, index }) {
-  return <tr className={`${index % 2 ? 'bg-gray-200 ' : ''}`}>{children}</tr>;
+export function Tr({ children, className = '', index }) {
+  return <tr className={`${index % 2 ? 'bg-gray-200 dark:bg-gray-700' : ''} ${className}`}>{children}</tr>;
 }
 
-export function Th({ children }) {
-  return <th className="border-b-2 border-gray-400 p-4 text-left">{children}</th>;
+export function Th({ children, className = '' }) {
+  return <th className={`border-b-2 border-gray-400 p-4 text-left ${className}`}>{children}</th>;
 }
 
-export function Td({ children }) {
-  return <td className="p-4">{children}</td>;
+export function Td({ children, className = '' }) {
+  return <td className={`p-4 ${className}`}>{children}</td>;
 }

web/src/context/index.js

@@ -2,4 +2,4 @@ import { createContext } from 'preact';
 
 export const Config = createContext({});
 
-export const ApiHost = createContext(import.meta.env.SNOWPACK_PUBLIC_API_HOST || '');
+export const ApiHost = createContext(import.meta.env.SNOWPACK_PUBLIC_API_HOST || window.baseUrl || '');