Skip to content

Instantly share code, notes, and snippets.

Created June 22, 2015 06:50
What would you like to do?
'use strict';
var KuduApp = require('./KuduApp');
var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var Routes = (
<Route handler={KuduApp}>
<Route name="/" handler={KuduApp}/>
var World = {
loaded: false,
init: function initFn() {
createOverlays: function createOverlaysFn() {
First an AR.ClientTracker needs to be created in order to start the
recognition engine. It is initialized with a URL specific to the target
collection. Optional parameters are passed as object in the last
argument. In this case a callback function for the onLoaded trigger is
set. Once the tracker is fully loaded the function worldLoaded() is
Important: If you replace the tracker file with your own, make sure to
change the target name accordingly.
Use a specific target name to respond only to a certain target or use a
wildcard to respond to any or a certain group of targets.
this.tracker = new AR.ClientTracker("assets/", {
onLoaded: function() {
React.render(<Handler/>, document.getElementById('content'));
The next step is to create the augmentation. In this example an image
resource is created and passed to the AR.ImageDrawable. A drawable is a
visual component that can be connected to an IR target
(AR.Trackable2DObject) or a geolocated object (AR.GeoObject). The
AR.ImageDrawable is initialized by the image and its size. Optional
parameters allow for position it relative to the recognized target.
/* Create overlay for page one */
var imgOne = new AR.ImageResource("assets/imageOne.png");
var overlayOne = new AR.ImageDrawable(imgOne, 1, {
offsetX: -0.15,
offsetY: 0
The last line combines everything by creating an AR.Trackable2DObject
with the previously created tracker, the name of the image target and
the drawable that should augment the recognized image.
Please note that in this case the target name is a wildcard.
Wildcards can be used to respond to any target defined in the target
collection. If you want to respond to a certain target only for a
particular AR.Trackable2DObject simply provide the target name as
specified in the target collection.
var pageOne = new AR.Trackable2DObject(this.tracker, "*", {
drawables: {
cam: overlayOne
Local Variables:
eval: (web-mode-set-content-type "jsx")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment