# Plugin: faceClick
![](https://media0.giphy.com/media/Iv2aSMS0QTy2P5JNCX/giphy.gif)
- Activate a face morph to click
- Customize which face morph to use
- Tags:
['browser']
Models: Jeeliz Weboji
Activate:
handsfree.plugin.faceClick.enable()
Tags:
['browser']
About: This plugin is used in combination with the facePointer to help you click on things on the screen with a face gesture.
You can customize which handsfree.data.weboji.morphs[]
to use and how activated that morph needs to be to register the click. The click triggers a MouseEvent
on the element underneath the pointer with the following options:
new MouseEvent('click', {
bubbles: true,
cancelable: true,
clientX: data.pointer.x,
clientY: data.pointer.y
})
# Config
# During instantiation
const handsfree = new Handsfree({
weboji: true,
plugin: {
faceClick: {
// Morphs to watch for and their required confidences
morphs: {
// Smile right when it's at least 25% actitvated
0: 0.25,
// Smile left when it's at least 25% actitvated
1: 0.25
}
}
}
})
# After instantiation
// Let's only use the right smile
delete handsfree.plugin.faceClick.config.moprhs[1]
// Let's require it to be 50% activated
handsfree.plugin.faceClick.config.moprhs[0] = .5
# Full plugin code
/**
* Click on things with a gesture
*/
export default {
models: 'weboji',
enabled: false,
tags: ['browser'],
config: {
// How often in milliseconds to trigger clicks
throttle: 50,
// Max number of frames to keep down
maxMouseDownedFrames: 1,
// Morphs to watch for and their required confidences
morphs: {
0: 0.25,
1: 0.25
}
},
// Number of frames mouse has been downed
mouseDowned: 0,
// Is the mouse up?
mouseUp: false,
// Whether one of the morph confidences have been met
thresholdMet: false,
// The last held {x, y}, used to calculate move delta
lastHeld: {x: 0, y: 0},
// Original target under mousedown
$origTarget: null,
/**
* Detect click state and trigger a real click event
*/
onFrame ({weboji}) {
// Detect if the threshold for clicking is met with specific morphs
this.thresholdMet = false
let event = ''
Object.keys(this.config.morphs).forEach((key) => {
const morph = +this.config.morphs[key]
if (morph > 0 && weboji.morphs[key] >= morph) this.thresholdMet = true
})
// Click/release and add body classes
if (this.thresholdMet) {
this.mouseDowned++
document.body.classList.add('handsfree-clicked')
} else {
this.mouseUp = this.mouseDowned
this.mouseDowned = 0
document.body.classList.remove('handsfree-clicked')
}
// Set the state
if (
this.mouseDowned > 0 &&
this.mouseDowned <= this.config.maxMouseDownedFrames
)
event = weboji.pointer.state = 'mousedown'
else if (this.mouseDowned > this.config.maxMouseDownedFrames)
event = weboji.pointer.state = 'mousedrag'
else if (this.mouseUp)
event = weboji.pointer.state = 'mouseup'
else
event = 'mousemove'
// Actually click something (or focus it)
const $el = document.elementFromPoint(weboji.pointer.x, weboji.pointer.y)
if ($el && event === 'mousedown') {
this.$origTarget = $el
}
if ($el) {
const eventOpts = {
view: window,
button: 0,
bubbles: true,
cancelable: true,
clientX: weboji.pointer.x,
clientY: weboji.pointer.y,
// Only used when the mouse is captured in full screen mode
movementX: weboji.pointer.x - this.lastHeld.x,
movementY: weboji.pointer.y - this.lastHeld.y
}
$el.dispatchEvent(new MouseEvent(event, eventOpts))
// Focus
if (weboji.pointer.state === 'mousedown' && ['INPUT', 'TEXTAREA', 'BUTTON', 'A'].includes($el.nodeName))
$el.focus()
// Click
if (weboji.pointer.state === 'mouseup' && $el === this.$origTarget) {
$el.dispatchEvent(new MouseEvent('click', eventOpts))
}
weboji.pointer.$target = $el
}
this.lastHeld = weboji.pointer
}
}
← 🔌 Plugin facePointer →