Keypoints

Locate object vertices (human articulations, vehicle parts, etc).

Try our demo below !

The demo shows how to easily embed and customize a keypoint annotation element in a web-based application.
To create a skeleton, enter creation mode, and click skeleton vertices.

Easily write your own annotation application in Javascript using the graph element:

Copy to Clipboard

import {html, LitElement} from 'lit-element';
import '@pixano/graphics-2d';
import { demoStyles,
  fullscreen,
  createPencil,
  pointer,
  zoomIn,
  zoomOut } from '@pixano/core/lib/style';

class MyDemo extends LitElement {
  static get styles() {
    return demoStyles;
  }

static get properties() {
    return {
      image: { type: String }
    };
  }

get rightPanel() {
    return html`
    <div class="right-panel">
        <p class="icon" title="Fullscreen" style="position: absolute;" @click=${this.fullScreen}>${fullscreen}</p>
        <div class="icons">
          <p class="icon" title="Edit" @click=${() => this.element.mode = 'edit'}>${pointer}</p>
          <p class="icon" title="Add graph" @click=${() => this.element.mode = 'create'}>${createPencil}</p>
          <p class="icon" title="Zoom in" @click=${() => this.element.viewControls.zoomIn()}>${zoomIn}</p>
          <p class="icon" title="Zoom out" @click=${() => this.element.viewControls.zoomOut()}>${zoomOut}</p>
        </div>
      </div>
    `;
  }

render() {
    return html`
        <main>
          <pxn-graph  enableOutsideDrawing
                      image=${this.image}
                      @create=${this.onCreate}
                      @update=${this.onUpdate}
                      @selection=${this.onSelection}
                      mode=${this.mode}>
          </pxn-graph>
          ${this.rightPanel}
        </main>`;
  }

firstUpdated() {
    this.element.settings.radius = 3;
    this.element.settings.edges = [[0,1],[1,2]];
    this.element.settings.vertexNames = ["t1","t2","t3"];
  }

get element() {
    return this.shadowRoot.querySelector('pxn-graph');
  }
}

customElements.define('my-demo', MyDemo);

Browse the complete code on GitHub

Third party