Wikitude

overlaying 2D drawable image for corresponding target images

Hello,

 

I have multiple target images in wtc file. And based on image recognition i have to display corresponding drawable.

For example, If in the wtc file i have stored alphabetical image "APPLE" upon recognition i want to display image of an apple. But I have several other target images as well, all i want is based on recognition i should be able to overlay corresponding 2D drawable.

Here is piece of code i am trying to use. Please help.

   var getTargetName=new Array();

  var arr=;

var i=0;

for(var i=0;i<9;i++)

 {

   getTargetName= new AR.Trackable2DObject(this.tracker, arr, {

 drawables: {

cam:

},

onEnterFieldOfVision:function(targetName)

 {

 targetValue=targetName;

if (video.playing) {

video.resume();

}

 

//alert("assets/"+targetName+".png");

 

 },onExitFieldOfVision: function onExitFieldOfVisionFn() {

if (video.playing) {

video.pause();

}

 

 }

 });

 }

Please have a look at the Multiple Targets Experience in the SDK Samples Application which provides source code and documentation of your scenario.

Best regards,
Andreas

Hello,

I have many target images and according to solution given in muliple target experience i have create a new Trackable2DObject for every target image in the target collection library.

And that is not a feasible solution, as the number of target image is very large in my case.

Can you suggest an alternative where i can deal with multiple target images using only Trackable2Dobject?

Code snippet that i have posted above works fine partially for multiple target images and i have used Trackable2Dobject only once.

Please suggest me a dynamic approach so that irrespective of any number of target images in the target collection code should work appropriately.

Thanks,

Manish

You may also define a Trackable2DObject and use wildcard ("*") as targetName to receive the targetName of the recognized image in onEnterFieldOfVision and use add- and removeCamDrawables to update the augmentations accorningly. You can even load resources only when the right image was recognized.
Do not forget to properly detroy the 'old' augmentations (incl. possible animations) before creating the new ones to save memory.

Best regards

 var arr=;

 

 

   var getTargetName= new AR.Trackable2DObject(this.tracker, "*", {

 

onEnterFieldOfVision:function(targetName)

 {

 var img=new AR.ImageResource("assets/Intel.png");

 var overlayImage=new AR.ImageDrawable(img, 1, {

offsetX: -0.15,

offsetY: 0,

});

 alert(targetName);

 var drawables=getTargetName.drawables.cam;

 drawables.push(overlayImage);

 drawables.push(pageOneButton);

 drawables.push(video);

 getTargetName.drawables.cam=drawables;

 targetValue=targetName;

if (video.playing) {

video.resume();

}

 

//alert("assets/"+targetName+".png");

 

 },onExitFieldOfVision: function onExitFieldOfVisionFn() {

if (video.playing) {

video.pause();

}

 

 }

 });

 

I am doing as per your suggestion. 

I am trying to display 3 drawables a 2d image, a 2D label and a video drawables togather for each of the target image.But I am facing following problem.

1). As you see inside onEnterFieldOFVision i am adding drawables to the cam property.

     I am trying to define one of the drawable "overlayImage" in this case inside the onEnterFieldOfVision function. However it doesn't work.

   Can you explain why is this not working?

 

Logically what i am trying to do?

Answer: for example,the name of target image stored in target collector is let say "test". I am overlaying an image which is stored in assets folder with same name i.e. "test.png".

             Hence, for each of the target image i have stored a drawable image with same name in assets folder. My requirement is that when image recognition happens i have to somehow get 

             the target image name and pass it to Image drawable object (in above code you can see i am doing it inside onEnterFieldOfVision) which will overlay a 2D drawable with same name 

             which is present in assets folder.

 

 Hope i have made the point clear, please suggest me on this.

 

 

As written in my last post and highlighed in the documentation of drawables.cam do not directly modify the array but use add- and removeCamDrawables instead.

Also ensure to properly destroy old assets and implement a smart way to load and recycle assets, e.g. reuse camDrawables in case they are the same as in last positive recognition but properly detroy() the outdated ones otherwise. You may even implement an asset-cache so you can reuse assets of previously loaded X augmentations. 

I hope you understand that implementation highly depends on your usecase and I cannot provide source-code suited especially for your scenario.

Best regards

Hello,

I have tried all the way to destroy assets that are outdated. But once
asset is destroyed it is not reloaded again eventhough i am using
addCamDrawable function in onEnterFieldOFVision function. Can you
please suggest while dealing with multiple images on which object
shall i call the destroy function as well as where should be destroy
method called for appropriate result. Right now i am calling the
destroy method on camDrawables in the onExitFieldOfVision function but
this is not working for me. Please suggest as after following your
instruction also I am not getting the correct result.
Old assets are either not removed if i am calling removeCamDrawables
or if it is once destroyed using destroy method it is not reloaded in
the onEnterFieldOFVision section.

Regards,
Manish

Hello,

 

Can anyone reply on my ongoing queries. Please suggest where exactly i need to call the destroy function. As i am calling it in onExitFieldOfVision and it's not working.

If possible please suggest me a way for caching the assets properly.

 

Thanks,

Manish

You enquiry is similar to that one.

For proper deletion/destruction of augmentations you have to:

* remove the augmentations from camDrawables via the mentioned functions of an AR.Trackable2dObject
* call .destroy() of AR.ImageDrawables, AR.ImageResources, AR.VideoDrawables etc. incl. related animation.
* remove them from any list/array to keep your stati clean to do not have 'dead objects' in your code (there is no reference counter garbage collection in place)

If you later on want to use the assets again you have to recreate from scratch, reusing the 'dead references' does not work.

Hope that helps