when the input BEGINS to load any required resources, ask for any permissions etc
when the input has successfully began
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
the input's current target vector, this could be different if smoothing is more than 0
setting this property or attribute will display the input's calibration
show the help modal, has priority over controls
the input's vector that is updated whenever there is new input data
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.
this attribute is used on the HTML node to denote it is the selected input and to begin initializing
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.
is it ok to initialize this input? no if it is already initializing or it was aborted mid-initialization
the current X position as mapped to the contentElement
the current Y position as mapped to the contentElement
this input has a cointrols panel
is the input currently in the phase of initializing itself?
has the input completed initialization and is currently in operation?
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.
lit-html
template result to render
node into which to render
overriding AbstractInputElement#_createEvent to provide extra details
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 a node into which to render.
when the input has stopped operation
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.
Hook to handle any changes whenever the contentElement has changed
Override which provides tracking of invalidated state.
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
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.
Current element properties
Changing element properties
Previous element properties
Default implementation always returns true.
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.
Current element properties
Changing element properties
Previous element properties
Default implementation always returns true.
apply smoothing to the current position, moving towards the _targetPosition according to smoothing
true if the position value changed
Returns an object of the project positions for every part
optionally provide a list of bodyPart keys to project, defaults to all
optionally project an Element to project coordinates too, defaults to target
Get the position of the body part projected into the coordinate space of the target element
the body part key to receive the position of
optionally provide an Element if you wish to use one other than the target
Override which sets up element rendering by calling* _createRoot
and _firstRendered
.
render a crosshair of the input's center calibration point
render the pose data to a canvas to show current tracked skeleton
Call to request the element to asynchronously re-render regardless of whether or not any property changes are pending.
<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.<acc-pose-input amplification="2" smoothing="0.5" part="nose"></acc-pose-input>