From 65367279ce13432d7d1a405460f895e827adaa14 Mon Sep 17 00:00:00 2001
From: Colin Clark <colinbdclark@gmail.com>
Date: Sat, 16 Nov 2024 14:27:37 -0500
Subject: [PATCH] Fixes gh-16: updates renderer width/height on loading video
 sources.

---
 src/renderer/detect.js              | 5 ++++-
 src/renderer/index.html             | 9 +++++----
 src/renderer/styles.css             | 4 ++++
 src/renderer/video-pose-renderer.js | 8 ++++----
 src/test/node-osc-listener.js       | 2 ++
 5 files changed, 19 insertions(+), 9 deletions(-)
 mode change 100644 => 100755 src/test/node-osc-listener.js

diff --git a/src/renderer/detect.js b/src/renderer/detect.js
index 05f45c8..36a9e9f 100644
--- a/src/renderer/detect.js
+++ b/src/renderer/detect.js
@@ -8,6 +8,8 @@ import { VideoPoseRenderer } from "./video-pose-renderer.js";
 import { TextField } from "./text-field.js";
 import { NumberField } from "./number-field.js";
 
+let videoPoseRenderer;
+
 let modelSelector = new ModelSelector(document.getElementById("modelSelector"));
 async function selectModel(id) {
     modelSelector.selectedModel = modelSelector.options[id];
@@ -31,11 +33,12 @@ let cameraVideo = new CameraVideo(document.getElementById("camera"));
 async function selectDevice(id) {
     cameraVideo.id = id;
     await cameraVideo.update();
+    videoPoseRenderer.update();
 }
 deviceSelector.select.bind(selectDevice);
 await cameraVideo.ready();
 
-let videoPoseRenderer = new VideoPoseRenderer(
+videoPoseRenderer = new VideoPoseRenderer(
     document.getElementById("points"), cameraVideo.container);
 let fpsDisplay = new FPSDisplay(document.getElementById("fps"), 2.5);
 let poseInfoRenderer = new PoseInfoRenderer();
diff --git a/src/renderer/index.html b/src/renderer/index.html
index ea85bbc..5b768b3 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -26,10 +26,11 @@ <h1>MovementOSC</h1>
           <input type="text" value="127.0.0.1" id="ip" />:
           <input type="text" value="7500" id="port" />
       </p>
-      <canvas id="points"></canvas>
-      <video id="camera" width="640"></video>
-      <p><span id="poses">0</span> <span id="posesString">people</span> detected at <span id="fps">0</span> fps.</p>
-      <p></p>
+      <div id="video-area">
+        <p><span id="poses">0</span> <span id="posesString">people</span> detected at <span id="fps">0</span> fps.</p>
+        <canvas id="points"></canvas>
+        <video id="camera"></video>
+      </div>
     </div>
   </body>
 </html>
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 8a5e33c..64a596e 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -42,3 +42,7 @@ h1 {
 video {
     visibility: hidden;
 }
+
+canvas {
+    width: 100%;
+}
diff --git a/src/renderer/video-pose-renderer.js b/src/renderer/video-pose-renderer.js
index bf7ab2a..f762f5e 100644
--- a/src/renderer/video-pose-renderer.js
+++ b/src/renderer/video-pose-renderer.js
@@ -6,13 +6,13 @@ export class VideoPoseRenderer {
         this.pointColor = "yellow";
         this.outlineColor = "white";
         this.pointSize = 7;
-        this.h = this.video.offsetHeight;
-        this.w = this.video.offsetWidth;
         this.ctx = this.container.getContext("2d");
-        this.setup();
+        this.update();
     }
 
-    setup() {
+    update() {
+        this.h = this.video.offsetHeight;
+        this.w = this.video.offsetWidth;
         this.container.setAttribute("height", this.h);
         this.container.setAttribute("width", this.w);
         this.ctx.fillStyle = this.pointColor;
diff --git a/src/test/node-osc-listener.js b/src/test/node-osc-listener.js
old mode 100644
new mode 100755
index dd3b7ed..de38954
--- a/src/test/node-osc-listener.js
+++ b/src/test/node-osc-listener.js
@@ -1,3 +1,5 @@
+#!/usr/bin/env node
+
 const osc = require("osc");
 
 let udpPort = new osc.UDPPort({localPort: 7500});