Merge pull request #303 from nikolaymihaylov/dev

Emit events when a marker is found and lost, when using aframe's <a-marker>
jeromeetienne · Sep 24, 2018 · 3f39bfb · 3f39bfb
2 parents fefefb2 + 7f54945
commit 3f39bfb
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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
 

diff --git a/aframe/README.md b/aframe/README.md
@@ -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\>

diff --git a/aframe/examples/marker-events.html b/aframe/examples/marker-events.html
@@ -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>
diff --git a/aframe/src/component-anchor.js b/aframe/src/component-anchor.js
@@ -34,6 +34,12 @@ AFRAME.registerComponent('arjs-anchor', {
 			type: 'number',
 			default: 0.6,
 		},
+
+		// 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')
+				}
+			}
 		}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',
 
 		'hit-testing-renderDebug': 'arjs-hit-testing.renderDebug',
 		'hit-testing-enabled': 'arjs-hit-testing.enabled',