Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2e61cdc
Add 'emitevents' property to the arjs-anchor component, which emits e…
Jan 31, 2018
aeb14b7
Add an example for using 'markerFound' and 'markerLost' events.
Jan 31, 2018
0cc7498
Update aframe README to include information about a-marker's 'emiteve…
Jan 31, 2018
673ff5f
Update version to 1.5.2 and update the relevant files after re-build.
Jan 31, 2018
31e1b7d
Update CHANGELOG to reflect the changes in build 1.5.2.
Jan 31, 2018
3a31667
Merge remote-tracking branch 'upstream/dev' into dev
Jun 19, 2018
50e6aa6
Sync three AR.js build file with upstream/dev.
Jun 19, 2018
a3b90b5
Move markerFound and markerLost event changelog notes to the newest v…
Jun 19, 2018
7f54945
Merge remote-tracking branch 'upstream/dev' into 20180619-update-dev
Jul 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

Expand Down
3 changes: 3 additions & 0 deletions aframe/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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\>
Expand Down
53 changes: 53 additions & 0 deletions aframe/examples/marker-events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 16 additions & 0 deletions aframe/src/component-anchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ AFRAME.registerComponent('arjs-anchor', {
type: 'number',
default: 0.6,
},

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(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
Expand Down Expand Up @@ -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')
}
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
Expand Down Expand Up @@ -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',
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to be removed, as seen above


'hit-testing-renderDebug': 'arjs-hit-testing.renderDebug',
'hit-testing-enabled': 'arjs-hit-testing.enabled',
Expand Down