Wikitude

Multiple IR not working

Hello;

 

I am trying to edit the 99_Demo_1_IR and Geo to allow for a radar and multiple IR but I cannot get the second IR to work.

 

I have based my code on the multiple IR example, but am not sure why I can not get this working.

 

CODE

/*

    The Wikitude SDK allows you to combine geobased AR with image recognition to create a seamless experience for users.

*/

IrAndGeo = {};

 

IrAndGeo.markerNames = ;

IrAndGeo.stores = ;

IrAndGeo.markerAnimations = ;

IrAndGeo.error = false;

IrAndGeo.receivedLocation = false;

 

IrAndGeo.res = {};

 

IrAndGeo.setupScene = function(lat, lon, alt) {

    // create 8 random markers with different marker names

    for (var i = 0; i < 8; i++) {

        var objLat = lat + ((Math.random() - 0.5) / 1000);

        var objLon = lon + ((Math.random() - 0.5) / 1000);

        IrAndGeo.createMarker(objLat, objLon, IrAndGeo.markerNames);

    }

 

    // create appearing animation

    IrAndGeo.showMarkersAnimation = new AR.AnimationGroup('parallel', IrAndGeo.markerAnimations);

};

 

IrAndGeo.createMarker = function(lat, lon, name) {

    // create an AR.GeoLocation from the latitude/longitude function parameters

    var loc = new AR.GeoLocation(lat, lon);

 

// show radar & set click-listener

PoiRadar.show();

$('#radarContainer').unbind('click');

$("#radarContainer").click(PoiRadar.clickedRadar);

 

    // create an AR.ImageDrawable for the marker

    var imageDrawable = new AR.ImageDrawable(IrAndGeo.res.marker, 2, {

        scale: 0.5,

        onClick: function() {

            alert("clicked");

        }

    });

 

    // create marker animations and store it in the markerAnimations-array 

    IrAndGeo.markerAnimations.push(new AR.PropertyAnimation(imageDrawable, 'scale', 0.0, 1.0, 1000, {

        type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_BOUNCE

    }));

    // create a AR.GeoObject with the marker, disable it by setting the enabled-flag to 'false' and store it in the stores-array

    IrAndGeo.stores.push(new AR.GeoObject(loc, {

        drawables: {

            cam: imageDrawable

        },

        enabled: false

    }));

};

 

IrAndGeo.showStores = function() {

    // display all GeoObjects by setting the enabled-flag to 'true'

    IrAndGeo.stores.forEach(function(x, idx) {

        x.enabled = true;

    });

 

    // nicely animate appearing of markers

    IrAndGeo.showMarkersAnimation.start();

 

    // set the info-text for the HTML message element and show it

    document.getElementById("messageElement").innerHTML = "Look around for stores nearby!";

    document.getElementById("messageElement").style.display = "block";

};

 

IrAndGeo.hidePOIs = function() {

    // disable all GeoObjects and reset to 0 size

    IrAndGeo.stores.forEach(function(obj, idx) {

        obj.enabled = false;

        obj.drawables.cam.scale = 0.0;

    });

    // hide the HTML message element

    document.getElementById("messageElement").style.display = "none";

};

 

IrAndGeo.showdetail = function() {

    IrAndGeo.hidePOIs();

    IrAndGeo.menuDrawables.forEach(function(obj, idx) {

        obj.enabled = false;

    });

    IrAndGeo.detailDrawable.enabled = true;

};

 

IrAndGeo.showdetail2 = function() {

    IrAndGeo.hidePOIs();

    IrAndGeo.menu2Drawables.forEach(function(obj, idx) {

        obj.enabled = false;

    });

    IrAndGeo.detail2Drawable.enabled = true;

};

 

IrAndGeo.hidedetail = function() {

    IrAndGeo.detailDrawable.enabled = false;

    IrAndGeo.menuDrawables.forEach(function(obj, idx) {

        obj.enabled = true;

    });

};

 

IrAndGeo.hidedetail2 = function() {

    IrAndGeo.detail2Drawable.enabled = false;

    IrAndGeo.menu2Drawables.forEach(function(obj, idx) {

        obj.enabled = true;

    });

};

 

IrAndGeo.showWeb = function() {

    IrAndGeo.hidePOIs();

    AR.context.openInBrowser("http://www.wikitude.com");

};

 

IrAndGeo.loadingStepDone = function() {

    if (!IrAndGeo.error && IrAndGeo.res.buttonStores.isLoaded() && IrAndGeo.res.buttonWeb.isLoaded() && IrAndGeo.res.indicator.isLoaded() && IrAndGeo.res.marker.isLoaded() && IrAndGeo.receivedLocation && IrAndGeo.tracker && IrAndGeo.tracker.isLoaded()) {

        //everything is loaded

        var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";

        var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";

        document.getElementById('messageElement').innerHTML =

            "<div" + cssDivLeft + ">Synapse Online</div>"; 

 

        // Remove Scan target message after 5 sec.

        setTimeout(function() {

            document.getElementById("messageElement").style.display = "none";

        }, 5000);

    }

};

 

// function for displaying a loading error in the HTML message element

IrAndGeo.errorLoading = function() {

    document.getElementById("messageElement").innerHTML = "Unable to Synapse";

    IrAndGeo.error = true;

};

 

IrAndGeo.initIr = function() {

    // Create the tracker to recognize the shop ad

    var trackerDataSetPath = "assets/test2.wtc";

    IrAndGeo.tracker = new AR.Tracker(trackerDataSetPath, {

        onLoaded: IrAndGeo.loadingStepDone,

        onError: IrAndGeo.errorLoading

    });

 

    // Create drawables to display on the recognized image

    var indicator = new AR.ImageDrawable(IrAndGeo.res.indicator, 0.50, {

        onClick: IrAndGeo.showdetail,

        offsetX: 0.1,

        offsetY: 0.4

    });

    var buttonWeb = new AR.ImageDrawable(IrAndGeo.res.buttonWeb, 0.15, {

        onClick: IrAndGeo.showWeb,

        offsetX: 0.175,

        offsetY: -0.525

    });

    var buttonStores = new AR.ImageDrawable(IrAndGeo.res.buttonStores, 0.15, {

        onClick: IrAndGeo.showStores,

        offsetX: -0.1,

        offsetY: -0.275

    });

 

    var indicator2 = new AR.ImageDrawable(IrAndGeo.res.indicator2, 0.50, {

        onClick: IrAndGeo.showdetail2,

        offsetX: 0.1,

        offsetY: 0.4

    });

 

    IrAndGeo.menuDrawables = ;

    IrAndGeo.detailDrawable = new AR.ImageDrawable(IrAndGeo.res.detail, 0.60, {

        enabled: false,

        onClick: IrAndGeo.hidedetail

    });

 

    IrAndGeo.menu2Drawables = ;

    IrAndGeo.detail2Drawable = new AR.ImageDrawable(IrAndGeo.res.detail2, 0.60, {

        enabled: false,

        onClick: IrAndGeo.hidedetail2

    });

 

    // Create the object by defining the tracker, target name and its drawables

    var trackable2DObject = new AR.Trackable2DObject(IrAndGeo.tracker, "IR", {

        drawables: {

            cam:

        }

    });

 

    var imageTwo = new AR.Trackable2DObject(IRAndGeo.tracker, "IR2", {

drawables: {

   cam:

}

    });

 

};

 

// this function is called as soon as we receive GPS data 

AR.context.onLocationChanged = function(latitude, longitude, altitude, accuracy) {

    // in order not to receive any further location updates the onLocationChanged trigger is set to null

    AR.context.onLocationChanged = null;

    // flag to store that a location was received

    IrAndGeo.receivedLocation = true;

    // initialize the scene

    IrAndGeo.setupScene(latitude, longitude, altitude);

    IrAndGeo.loadingStepDone();

};

 

// Create the image resources that are used for the marker and the buttons

IrAndGeo.res.marker = new AR.ImageResource("assets/POI_Marker.png", {

    onLoaded: IrAndGeo.loadingStepDone,

    onError: IrAndGeo.errorLoading

});

IrAndGeo.res.buttonWeb = new AR.ImageResource("assets/YourShop_OpenWebsite.png", {

    onLoaded: IrAndGeo.loadingStepDone,

    onError: IrAndGeo.errorLoading

});

IrAndGeo.res.buttonStores = new AR.ImageResource("assets/YourShop_FindShops.png", {

    onLoaded: IrAndGeo.loadingStepDone,

    onError: IrAndGeo.errorLoading

});

IrAndGeo.res.indicator = new AR.ImageResource("assets/indicator1.png", {

    onLoaded: IrAndGeo.loadingStepDone,

    onError: IrAndGeo.errorLoading

});

IrAndGeo.res.indicator2 = new AR.ImageResource("assets/indicator2.png", {

    onLoaded: IrAndGeo.loadingStepDone,

    onError: IrAndGeo.errorLoading

});

IrAndGeo.res.detail = new AR.ImageResource("assets/detail.png", {

    onLoaded: IrAndGeo.loadingStepDone,

    onError: IrAndGeo.errorLoading

});

IrAndGeo.res.detail2 = new AR.ImageResource("assets/detail2.png", {

    onLoaded: IrAndGeo.loadingStepDone,

    onError: IrAndGeo.errorLoading

});

 

IrAndGeo.initIr();

 

IrAndGeo.loadingStepDone();

 

I cannot get any of the AR objects to show against "IR2" (imageTwo),  trackable2DObject works fine.

 

Any help welcome, thanks in advance;

 

Andy

Hi Andy,

What wtc file are you using? The wtc file needs to contain all targets that you want to track. Maybe the second target is not in the wtc file, or the ID you are using to reference the target is wrong.

Best,

Martin

Thanks for the reply - I am pretty sure my wrt file is correct with both images in the target build.

 

I have tested my code above using the multi-image example from the SDK (magazine.wrt / pageone and pageTwo images) and get the same result: The first image is recognised and AR elements displayed, the second image does nothing which leads me to think its my code within the .js file that is at fault.

I seem to have 2 problems I think:

If I set my code as below then I get no AR on either image (IR or IR2)

    var trackable2DObject = new AR.Trackable2DObject(IrAndGeo.tracker, "IR", {

        drawables: {

// cam:

  cam:

           

        }

    });

 

which leads me to think I have a problem with the indicator2 and detail2Drawable.

 

If I set IR2 to show the cam elements from IR then I get nothing - so I dont think IR2 is being recognised either.

 

Im pretty confused when you combine this with the SDK example .wrt - pageTwo image wasnt working correctly.

 

Any help welcome

 

 

Like so many of these things... the devil is in the detail - I had put the wrong name for the tracker against image 2

 

    // Create the object by defining the tracker, target name and its drawables

    var trackable2DObject = new AR.Trackable2DObject(IrAndGeo.tracker, "IR", {

        drawables: {

            cam:

        }

    });

 

    var imageTwo = new AR.Trackable2DObject(IRAndGeo.tracker, "IR2", {

drawables: {

   cam:

}

    });

 

Once I renamed the tracker to IrAndGeo everything worked.

Hi Andy,

Good to hear you got it working!

Best,

Martin