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 @@

MovementOSC

:

- - -

0 people detected at 0 fps.

-

+
+

0 people detected at 0 fps.

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