New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Emit events when a marker is found and lost, when using aframe's <a-marker> #303

Merged
merged 9 commits into from Sep 24, 2018
Copy path View file
@@ -1,6 +1,12 @@
# 1.6.1-dev

... nothing yet
## aframe-ar.js

- aframe-ar.js - `<a-marker>` elements will emit `markerFound` and `markerLost` events, if they have `emitevents='true'` set.

## Demos

- Created [an example](https://jeromeetienne.github.io/AR.js/aframe/examples/marker-events.html) that demonstrates emitting events when markers are found and lost, and registering the respective event listeners.

# 1.6.0

Copy path View file
@@ -27,6 +27,8 @@ Move the camera instead of using the usual "camera looking toward negative-z and
Handle multiple indepant markers in a single scene.
<!-- - [hatsune-minecraft.html](https://jeromeetienne.github.io/AR.js/aframe/examples/minecraft.html):
include a hatsune miku or minecraft avatar on the marker -->
- [marker-events.html](https://jeromeetienne.github.io/AR.js/aframe/examples/marker-events.html):
Emit events when markers are found and lost, and register the respective event listeners.

# artoolkit system

@@ -57,6 +59,7 @@ Here are the attributes for this entity
| url | url of the pattern - IIF type='pattern' | artoolkitmarker.patternUrl |
| value | value of the barcode - IIF type='barcode' | artoolkitmarker.barcodeValue |
| preset | parameters preset - ['hiro', 'kanji'] | artoolkitmarker.preset |
| emitevents | emits 'markerFound' and 'markerLost' events - ['true', 'false'] | - |


# \<a-marker-camera\>
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>
<!-- Register an aframe component that allows reacting to marker events -->
<script>
AFRAME.registerComponent('registerevents', {
init: function () {
var marker = this.el;
// Make the element emit events when found and when lost.
marker.setAttribute('emitevents', 'true');
marker.addEventListener('markerFound', function() {
var markerId = marker.id;
console.log('markerFound', markerId);
// TODO: Add your own code here to react to the marker being found.
});
marker.addEventListener('markerLost', function() {
var markerId = marker.id;
console.log('markerLost', markerId);
// TODO: Add your own code here to react to the marker being lost.
});
}
});
</script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - marker events example for a-frame
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
<a-scene embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
<!-- handle hiro marker -->
<!-- 'registerevents' will register event listeners for the marker when it is found and lost,
as defined in the inline script above -->
<a-marker preset='hiro' id='marker-hiro' registerevents>
</a-marker>

<!-- handle matrix marker -->
<!-- 'emitevents' will make the marker emit events when it is found and lost
but, since there are no registered listeners for these events, you will not see any effect.
You can register event listeners in your own custom component, defined similarly to
the 'registerevents' in the inline script above -->
<a-marker type='barcode' value='5' id='marker-barcode-5' emitevents='true'>
</a-marker>

<!-- add a simple camera -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Copy path View file
@@ -34,6 +34,12 @@ AFRAME.registerComponent('arjs-anchor', {
type: 'number',
default: 0.6,
},

This comment has been minimized.

@jeromeetienne

jeromeetienne Sep 24, 2018

Owner

(thanks a lot for your contributions @nikolaymihaylov, im making comments here but you dont have to do it. i can do the modification myself after the merge)

this seems harmless to emit the event. it is a rare event so no performance impact. we can remove this options for the sake of simplicity

// Whether to emit events when the element is found or lost.
emitevents: {
type: 'boolean',
default: false,
}
},
init: function () {
var _this = this
@@ -155,7 +161,16 @@ AFRAME.registerComponent('arjs-anchor', {
// honor visibility
//////////////////////////////////////////////////////////////////////////////
if( _this._arAnchor.parameters.changeMatrixMode === 'modelViewMatrix' ){
var wasVisible = _this.el.object3D.visible
_this.el.object3D.visible = this._arAnchor.object3d.visible

if( _this.data.emitevents ){
if( _this.el.object3D.visible && !wasVisible ){
_this.el.emit('markerFound')
}else if( !_this.el.object3D.visible && wasVisible ){
_this.el.emit('markerLost')
}
}

This comment has been minimized.

@jeromeetienne

jeromeetienne Sep 24, 2018

Owner

Nice standalone trick!

what about the 'cameraTransformMatrix' case tho ?

}else if( _this._arAnchor.parameters.changeMatrixMode === 'cameraTransformMatrix' ){
_this.el.sceneEl.object3D.visible = this._arAnchor.object3d.visible
}else console.assert(false)
@@ -212,6 +227,7 @@ AFRAME.registerPrimitive('a-marker', AFRAME.utils.extendDeep({}, AFRAME.primitiv
'preset': 'arjs-anchor.preset',
'minConfidence': 'arjs-anchor.minConfidence',
'markerhelpers': 'arjs-anchor.markerhelpers',
'emitevents': 'arjs-anchor.emitevents',

This comment has been minimized.

@jeromeetienne

jeromeetienne Sep 24, 2018

Owner

to be removed, as seen above


'hit-testing-renderDebug': 'arjs-hit-testing.renderDebug',
'hit-testing-enabled': 'arjs-hit-testing.enabled',
ProTip! Use n and p to navigate between commits in a pull request.