Skip to content

Commit 4e799fe

Browse files
AmitMYAmitMY
committed
feat(pose-viewer): add interactive renderer
1 parent 0e60e31 commit 4e799fe

File tree

9 files changed

+323
-142
lines changed

9 files changed

+323
-142
lines changed

‎src/js/pose_viewer/package-lock.json

+129-17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/pose_viewer/package.json

+6-4
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,14 @@
2424
"prepare": "npm run build"
2525
},
2626
"dependencies": {
27-
"@stencil/core": "4.22.3",
28-
"pose-format": "1.6.0"
27+
"@stencil/core": "4.26.0",
28+
"pose-format": "1.6.0",
29+
"three": "0.173.0"
2930
},
3031
"license": "MIT",
3132
"devDependencies": {
32-
"rollup-plugin-node-polyfills": "0.2.1",
33-
"@types/node": "22.10.0"
33+
"@types/node": "22.13.4",
34+
"@types/three": "0.173.0",
35+
"rollup-plugin-node-polyfills": "0.2.1"
3436
}
3537
}

‎src/js/pose_viewer/src/components.d.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ export namespace Components {
2727
"play": () => Promise<void>;
2828
"playbackRate": number;
2929
"readyState": number;
30+
"renderer": 'canvas' | 'svg' | 'interactive';
3031
"src": string | Buffer;
31-
"svg": boolean;
3232
"syncMedia": (media: HTMLMediaElement) => Promise<void>;
3333
"thickness": number;
3434
"width": string;
@@ -91,8 +91,8 @@ declare namespace LocalJSX {
9191
"paused"?: boolean;
9292
"playbackRate"?: number;
9393
"readyState"?: number;
94+
"renderer"?: 'canvas' | 'svg' | 'interactive';
9495
"src"?: string | Buffer;
95-
"svg"?: boolean;
9696
"thickness"?: number;
9797
"width"?: string;
9898
}

‎src/js/pose_viewer/src/components/pose-viewer/pose-viewer.tsx

+19-6
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import type {Buffer} from "buffer";
77
import {PoseRenderer} from "./renderers/pose-renderer";
88
import {SVGPoseRenderer} from "./renderers/svg.pose-renderer";
99
import {CanvasPoseRenderer} from "./renderers/canvas.pose-renderer";
10+
import {InteractivePoseRenderer} from "./renderers/interactive.pose-renderer";
1011

1112
declare type ResizeObserver = any;
1213
declare var ResizeObserver: ResizeObserver;
1314

14-
1515
@Component({
1616
tag: 'pose-viewer',
1717
styleUrl: 'pose-viewer.css',
@@ -24,7 +24,7 @@ export class PoseViewer {
2424

2525
private lastSrc: string | Buffer;
2626
@Prop() src: string | Buffer; // Source URL for .pose file or path to a local file or Buffer
27-
@Prop() svg: boolean = false; // Render in an SVG instead of a canvas
27+
@Prop() renderer: 'canvas' | 'svg' | 'interactive' = 'canvas'; // Render in an SVG instead of a canvas
2828

2929
// Dimensions
3030
@Prop() width: string = null;
@@ -67,7 +67,7 @@ export class PoseViewer {
6767

6868
hasRendered = false;
6969

70-
renderer!: PoseRenderer;
70+
rendererInstance!: PoseRenderer;
7171

7272
media: HTMLMediaElement;
7373
pose: PoseModel;
@@ -77,7 +77,19 @@ export class PoseViewer {
7777
private loopInterval: any;
7878

7979
componentWillLoad() {
80-
this.renderer = this.svg ? new SVGPoseRenderer(this) : new CanvasPoseRenderer(this);
80+
switch (this.renderer) {
81+
case 'canvas':
82+
this.rendererInstance = new CanvasPoseRenderer(this);
83+
break;
84+
case 'svg':
85+
this.rendererInstance = new SVGPoseRenderer(this);
86+
break;
87+
case 'interactive':
88+
this.rendererInstance = new InteractivePoseRenderer(this);
89+
break;
90+
default:
91+
throw new Error('Invalid renderer');
92+
}
8193

8294
return this.srcChange();
8395
}
@@ -322,16 +334,17 @@ export class PoseViewer {
322334
return this.error.name !== "AbortError" ? this.error.message : "";
323335
}
324336

325-
if (!this.pose || isNaN(this.currentTime) || !this.renderer) {
337+
if (!this.pose || isNaN(this.currentTime) || !this.rendererInstance) {
326338
return "";
327339
}
328340

329341
const currentTime = this.currentTime > this.duration ? this.duration : this.currentTime;
330342

331343
const frameId = Math.floor(currentTime * this.pose.body.fps);
332344
const frame = this.pose.body.frames[frameId];
345+
console.log(frame);
333346

334-
const render = this.renderer.render(frame);
347+
const render = this.rendererInstance.render(frame);
335348
if (!this.hasRendered) {
336349
requestAnimationFrame(() => {
337350
this.hasRendered = true;

‎src/js/pose_viewer/src/components/pose-viewer/readme.md

+18-18
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,24 @@
77

88
## Properties
99

10-
| Property | Attribute | Description | Type | Default |
11-
| -------------- | --------------- | ----------- | ------------------ | ----------- |
12-
| `aspectRatio` | `aspect-ratio` | | `number` | `null` |
13-
| `autoplay` | `autoplay` | | `boolean` | `true` |
14-
| `background` | `background` | | `string` | `null` |
15-
| `currentTime` | `current-time` | | `number` | `NaN` |
16-
| `duration` | `duration` | | `number` | `NaN` |
17-
| `ended` | `ended` | | `boolean` | `false` |
18-
| `height` | `height` | | `string` | `null` |
19-
| `loop` | `loop` | | `boolean` | `false` |
20-
| `padding` | `padding` | | `string` | `null` |
21-
| `paused` | `paused` | | `boolean` | `true` |
22-
| `playbackRate` | `playback-rate` | | `number` | `1` |
23-
| `readyState` | `ready-state` | | `number` | `0` |
24-
| `src` | `src` | | `Buffer \| string` | `undefined` |
25-
| `svg` | `svg` | | `boolean` | `false` |
26-
| `thickness` | `thickness` | | `number` | `null` |
27-
| `width` | `width` | | `string` | `null` |
10+
| Property | Attribute | Description | Type | Default |
11+
| -------------- | --------------- | ----------- | ------------------------------------ | ----------- |
12+
| `aspectRatio` | `aspect-ratio` | | `number` | `null` |
13+
| `autoplay` | `autoplay` | | `boolean` | `true` |
14+
| `background` | `background` | | `string` | `null` |
15+
| `currentTime` | `current-time` | | `number` | `NaN` |
16+
| `duration` | `duration` | | `number` | `NaN` |
17+
| `ended` | `ended` | | `boolean` | `false` |
18+
| `height` | `height` | | `string` | `null` |
19+
| `loop` | `loop` | | `boolean` | `false` |
20+
| `padding` | `padding` | | `string` | `null` |
21+
| `paused` | `paused` | | `boolean` | `true` |
22+
| `playbackRate` | `playback-rate` | | `number` | `1` |
23+
| `readyState` | `ready-state` | | `number` | `0` |
24+
| `renderer` | `renderer` | | `"canvas" \| "interactive" \| "svg"` | `'canvas'` |
25+
| `src` | `src` | | `Buffer \| string` | `undefined` |
26+
| `thickness` | `thickness` | | `number` | `null` |
27+
| `width` | `width` | | `string` | `null` |
2828

2929

3030
## Events

0 commit comments

Comments
 (0)