Options
All
  • Public
  • Public/Protected
  • All
Menu

<acc-pose-input> element easily adds PoseNet based tracking for controlling the cursor position on a webpage with a chosen body part of the user. For example with a couple lines of code, a user's nose can be used to control a webpage.

example

<acc-pose-input amplification="2" smoothing="0.5" part="nose"></acc-pose-input>

Hierarchy

Index

Constructors

constructor

Events

Protected _dispatchInitializing

  • _dispatchInitializing(): void

Protected _dispatchReady

  • _dispatchReady(): void

Protected _dispatchTick

  • _dispatchTick(): void
  • when the input has performed any new effort, even if there is no new input found. i.e. webcam updated but no face was found, this still triggers

    Returns void

Properties

Protected _estimating

_estimating: boolean

Protected _input

_input: PoseNet

Protected _lastFoundPosition

_lastFoundPosition: [number, number] = [-1, -1]

the input's current target vector, this could be different if smoothing is more than 0

Protected _lastFoundTargetPosition

_lastFoundTargetPosition: [number, number] = [0, 0]

Protected _loop

_loop: Animitter = animitter()

Protected _wasAborted

_wasAborted: boolean = false

Protected _webcamCanvas

_webcamCanvas: WebcamCanvas = new WebcamCanvas()

amplification

amplification: number = 1

contentSelector

contentSelector: string = ""

controls

controls: boolean = false

setting this property or attribute will display the input's calibration

disableClamp

disableClamp: boolean = false

help

help: boolean = false

show the help modal, has priority over controls

imageScaleFactor

imageScaleFactor: number = 0.33

inputType

inputType: InputType = "pose"

keypointEase

keypointEase: number = 0.5

label

label: string = "Body"

multiplier

multiplier: MobileNetMultiplier = 1.01

part

part: string = "nose"

pose

pose: posenet.Pose

position

position: [number, number] = [-1, -1]

the input's vector that is updated whenever there is new input data

preamplifiedTargetPosition

preamplifiedTargetPosition: vec2 = [0, 0]

renderComplete

renderComplete: Promise<boolean>

Returns a promise which resolves after the element next renders. The promise resolves to true if the element rendered and false if the element did not render. This is useful when users (e.g. tests) need to react to the rendered state of the element after a change is made. This can also be useful in event handlers if it is desireable to wait to send an event until after rendering. If possible implement the _didRender method to directly respond to rendering within the rendering lifecycle.

selected

selected: boolean = false

this attribute is used on the HTML node to denote it is the selected input and to begin initializing

smoothing

smoothing: number = 0

a higher smoothing value (0-1) results in a slower and smoother interpolation towards the current position. This creates less jitter from an input but a high value can make the input feel slow.

sourceCenter

sourceCenter: vec2

target

target: string = ""

targetPosition

targetPosition: [number, number] = [0, 0]

Accessors

canInitialize

  • get canInitialize(): boolean
  • is it ok to initialize this input? no if it is already initializing or it was aborted mid-initialization

    Returns boolean

canvas

  • get canvas(): HTMLCanvasElement
  • Returns HTMLCanvasElement

contentElement

  • get contentElement(): HTMLElement | null
  • set contentElement(element: HTMLElement | null): void

contentX

  • get contentX(): number
  • the current X position as mapped to the contentElement

    Returns number

contentY

  • get contentY(): number
  • the current Y position as mapped to the contentElement

    Returns number

hasControls

  • get hasControls(): boolean

isInitializing

  • get isInitializing(): boolean
  • is the input currently in the phase of initializing itself?

    Returns boolean

isReady

  • get isReady(): boolean
  • has the input completed initialization and is currently in operation?

    Returns boolean

Methods

Protected _applyRender

  • _applyRender(result: TemplateResult, node: Element | DocumentFragment): void
  • Renders the given lit-html template result into the given node. Implement to customize the way rendering is applied. This is should not typically be needed and is provided for advanced use cases.

    Parameters

    • result: TemplateResult

      lit-html template result to render

    • node: Element | DocumentFragment

      node into which to render

    Returns void

Protected _createEvent

  • _createEvent(type: string, bubbles?: boolean, composed?: boolean): ACCInputEvent
  • overriding AbstractInputElement#_createEvent to provide extra details

    Parameters

    • type: string
    • Default value bubbles: boolean = true
    • Default value composed: boolean = true

    Returns ACCInputEvent

Protected _createRoot

  • _createRoot(): Element | DocumentFragment
  • Implement to customize where the element's template is rendered by returning an element into which to render. By default this creates a shadowRoot for the element. To render into the element's childNodes, return this.

    Returns Element | DocumentFragment

    Returns a node into which to render.

_didRender

  • _didRender(props: any, changed: any, prev: any): void
  • Parameters

    • props: any
    • changed: any
    • prev: any

    Returns void

Protected _dispatchChange

  • _dispatchChange(): void

Protected _dispatchError

  • _dispatchError(error: Error): void

Protected _dispatchStop

  • _dispatchStop(): void

_firstRendered

  • _firstRendered(): void
  • Called after the element DOM is rendered for the first time. Implement to perform tasks after first rendering like capturing a reference to a static node which must be directly manipulated. This should not be commonly needed. For tasks which should be performed before first render, use the element constructor.

    Returns void

_flushProperties

  • _flushProperties(): void
  • Returns void

Protected _handleContentElementChanged

  • _handleContentElementChanged(contentElement: HTMLElement, previous: HTMLElement): void
  • Hook to handle any changes whenever the contentElement has changed

    Parameters

    • contentElement: HTMLElement
    • previous: HTMLElement

    Returns void

Protected _handleNewFrame

  • _handleNewFrame(): void
  • Returns void

Protected _handleStop

  • _handleStop(): void
  • Returns void

_invalidateProperties

  • _invalidateProperties(): void
  • Override which provides tracking of invalidated state.

    Returns void

_propertiesChanged

  • _propertiesChanged(props: any, changed: any, prev: any): void

_render

  • _render(__namedParameters: object): TemplateResult
  • Parameters

    • __namedParameters: object
      • amplification: any
      • controls: any
      • help: any
      • imageScaleFactor: any
      • part: any
      • smoothing: any

    Returns TemplateResult

Protected _shouldDispatchInput

  • _shouldDispatchInput(): boolean
  • should an 'input' event be dispatched as well on this tick this method exists so you can override in other inputs to consider other variables

    Returns boolean

_shouldPropertiesChange

  • _shouldPropertiesChange(_props: object, _changedProps: object, _prevProps: object): boolean
  • Override which returns the value of _shouldRender which users should implement to control rendering. If this method returns false, _propertiesChanged will not be called and no rendering will occur even if property values change or requestRender is called.

    Parameters

    • _props: object

      Current element properties

    • _changedProps: object

      Changing element properties

    • _prevProps: object

      Previous element properties

    Returns boolean

    Default implementation always returns true.

_shouldPropertyChange

  • _shouldPropertyChange(property: string, value: any, old: any): boolean
  • Parameters

    • property: string
    • value: any
    • old: any

    Returns boolean

Protected _shouldRender

  • _shouldRender(_props: object, _changedProps: object, _prevProps: object): boolean
  • Implement to control if rendering should occur when property values change or requestRender is called. By default, this method always returns true, but this can be customized as an optimization to avoid rendering work when changes occur which should not be rendered.

    Parameters

    • _props: object

      Current element properties

    • _changedProps: object

      Changing element properties

    • _prevProps: object

      Previous element properties

    Returns boolean

    Default implementation always returns true.

Protected _stepTowardsTarget

  • _stepTowardsTarget(): boolean
  • apply smoothing to the current position, moving towards the _targetPosition according to smoothing

    Returns boolean

    true if the position value changed

Protected _updatePose

  • _updatePose(): Promise<void>
  • Returns Promise<void>

computePartPosition

  • computePartPosition(part: string, result?: vec2): vec2
  • Parameters

    • part: string
    • Default value result: vec2 = [NaN,NaN]

    Returns vec2

connectedCallback

  • connectedCallback(): void
  • Returns void

dispatchEvent

getAllPositionsProjected

  • getAllPositionsProjected(keypoints?: string[], targetElement?: Element): any
  • Returns an object of the project positions for every part

    Parameters

    • Default value keypoints: string[] = keypointParts

      optionally provide a list of bodyPart keys to project, defaults to all

    • Default value targetElement: Element = this.contentElement

      optionally project an Element to project coordinates too, defaults to target

    Returns any

getPartPosition

  • getPartPosition(part: string, result?: vec2): vec2
  • Parameters

    • part: string
    • Default value result: vec2 = [NaN, NaN]

    Returns vec2

getPartPositionNormalized

  • getPartPositionNormalized(part: string, result?: vec2): vec2
  • Parameters

    • part: string
    • Default value result: vec2 = [NaN, NaN]

    Returns vec2

getPartPositionProjected

  • getPartPositionProjected(part: string, targetElement?: Element): vec2
  • Get the position of the body part projected into the coordinate space of the target element

    Parameters

    • part: string

      the body part key to receive the position of

    • Default value targetElement: Element = this.contentElement

      optionally provide an Element if you wish to use one other than the target

    Returns vec2

initialize

  • initialize(): Promise<void>

projectPosition

  • projectPosition(position: vec2, targetElement?: Element): vec2
  • Project (mutate) a position from source (webcam) coordinates to an elements coordinates

    Parameters

    • position: vec2

      a vector in source (webcam) coordinates

    • Default value targetElement: Element = this.contentElement

      optionally provide an Element to project to other than target element

    Returns vec2

ready

  • ready(): void
  • Override which sets up element rendering by calling* _createRoot and _firstRendered.

    Returns void

renderCenter

  • renderCenter(ctx: CanvasRenderingContext2D, style?: string, lineWidth?: number, radius?: number, crossLength?: number): void
  • render a crosshair of the input's center calibration point

    Parameters

    • ctx: CanvasRenderingContext2D
    • Default value style: string = "black"
    • Default value lineWidth: number = 3
    • Default value radius: number = 16
    • Default value crossLength: number = 8

    Returns void

renderCursor

  • renderCursor(ctx: CanvasRenderingContext2D, style?: string): void
  • Parameters

    • ctx: CanvasRenderingContext2D
    • Default value style: string = "blue"

    Returns void

renderInputData

  • renderInputData(ctx: CanvasRenderingContext2D, style?: string, radius?: number): void
  • render the pose data to a canvas to show current tracked skeleton

    Parameters

    • ctx: CanvasRenderingContext2D
    • Default value style: string = "rgba(96,96,96, 0.85)"
    • Default value radius: number = 4

    Returns void

requestRender

  • requestRender(): void
  • Call to request the element to asynchronously re-render regardless of whether or not any property changes are pending.

    Returns void

resetCenter

  • resetCenter(): void
  • Returns void

setCenterToCurrentPosition

  • setCenterToCurrentPosition(): void
  • Returns void

setPosition

  • setPosition(__namedParameters: [number, number]): void

setTargetPosition

  • setTargetPosition(__namedParameters: [number, number]): void

stop

  • stop(): void