Fixes gh-16: updates renderer width/height on loading video sources.

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();

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>

src/renderer/styles.css

@@ -42,3 +42,7 @@ h1 {
 video {
     visibility: hidden;
 }
+
+canvas {
+    width: 100%;
+}

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;

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});