From fe5cc59872d1250e9ab894185cccf66227891cf8 Mon Sep 17 00:00:00 2001
From: Koushik Dutta <koushd@gmail.com>
Date: Sun, 30 Jul 2023 23:53:42 -0700
Subject: [PATCH] core: fix object detection svg layout

---
 plugins/core/package-lock.json                |  4 +--
 plugins/core/package.json                     |  2 +-
 .../core/ui/src/interfaces/CameraViewer.vue   | 30 ++++++++++++-------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/plugins/core/package-lock.json b/plugins/core/package-lock.json
index 6e06aa8fd..af9c1bc59 100644
--- a/plugins/core/package-lock.json
+++ b/plugins/core/package-lock.json
@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.130",
+   "version": "0.1.131",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.1.130",
+         "version": "0.1.131",
          "license": "Apache-2.0",
          "dependencies": {
             "@scrypted/common": "file:../../common",
diff --git a/plugins/core/package.json b/plugins/core/package.json
index 2c869cab9..b8b101484 100644
--- a/plugins/core/package.json
+++ b/plugins/core/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.130",
+   "version": "0.1.131",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",
diff --git a/plugins/core/ui/src/interfaces/CameraViewer.vue b/plugins/core/ui/src/interfaces/CameraViewer.vue
index 4596de7de..e391a4860 100644
--- a/plugins/core/ui/src/interfaces/CameraViewer.vue
+++ b/plugins/core/ui/src/interfaces/CameraViewer.vue
@@ -21,7 +21,7 @@
         -webkit-transform-style: preserve-3d;
       " playsinline autoplay></video>
 
-      <svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" ref="svg" style="
+      <svg width="100%" height="100%" preserveAspectRatio="none" ref="svg" style="
         top: 0;
         left: 0;
         position: absolute;
@@ -141,15 +141,23 @@ export default {
 
       let contents = "";
 
+      const toPercent=  (v, d) => {
+        return `${v / d * 100}%`;
+      }
+
       for (const detection of this.lastDetection.detections || []) {
         if (!detection.boundingBox) continue;
-        const svgScale = this.svgWidth / 1080;
-        const sw = 2 * svgScale;
         const s = "red";
-        const x = detection.boundingBox[0];
-        const y = detection.boundingBox[1];
-        const w = detection.boundingBox[2];
-        const h = detection.boundingBox[3];
+        let x = detection.boundingBox[0];
+        let y = detection.boundingBox[1];
+        let w = detection.boundingBox[2];
+        let h = detection.boundingBox[3];
+
+        x = toPercent(x, this.lastDetection?.inputDimensions?.[0] || 1920);
+        y = toPercent(y, this.lastDetection?.inputDimensions?.[1] || 1080);
+        w = toPercent(w, this.lastDetection?.inputDimensions?.[0] || 1920);
+        h = toPercent(h, this.lastDetection?.inputDimensions?.[1] || 1080);
+
         let t = ``;
         let toffset = 0;
         if (detection.score && detection.className !== 'motion') {
@@ -159,11 +167,11 @@ export default {
         const tname = detection.className + (detection.id ? `: ${detection.id}` : '')
         t += `<tspan x='${x}' dy='${toffset}em'>${tname}</tspan>`
 
-        const fs = 20 * svgScale;
+        const fs = 20;
 
-        const box = `<rect x="${x}" y="${y}" width="${w}" height="${h}" stroke="${s}" stroke-width="${sw}" fill="none" />
-        <text x="${x}" y="${y - 5}" font-size="${fs}" dx="0.05em" dy="0.05em" fill="black">${t}</text>
-        <text x="${x}" y="${y - 5}" font-size="${fs}" fill="white">${t}</text>
+        const box = `<rect x="${x}" y="${y}" width="${w}" height="${h}" stroke="${s}" stroke-width="2" fill="none" />
+        <text x="${x}" y="${y}" font-size="${fs}" dx="0.05em" dy="0.05em" fill="black">${t}</text>
+        <text x="${x}" y="${y}" font-size="${fs}" fill="white">${t}</text>
       `;
         contents += box;
       }