Wikitude

To display another image on onclick() event of an overlaid image.

Hi,

Need to know the possibility of displaying an image which clicking an already overlaid image.

 

Regards,

KiranKumar MP.

Hi,

Yes, that is possible. You can use the onClick function of the initial ImageDrawable, and then create a new ImageDrawable when the click is executed. Something like this:

var imageDrawable1 = new AR.ImageDrawable(imageResource, {

    onClick : function(){

        //create a new ImageDrawable

        new AR.ImageDrawable(...);

    }

});

Best,

Martin

Martin,

Thanks for the response.

I'll let you know whether i'm able to make it done or not.

 

Martin,

 

I'm unable to get the change in the overlaid image.

Below is the code snippet what i've actually tried.

var overlayOne = new AR.ImageDrawable(imgOne, 1, {

offsetX: -0.15,

offsetY: 0,

onClick:function(){

new AR.ImageDrawable(imgTwo, 1, {

offsetX: -0.15,

offsetY: 0

});

}

});

 

So can you please help in getting  the desired result.

 

Regards,

Kiran.

Hi Kiran,

Now you've created the ImageDrawable, but you don't have it linked yet to a GeoObject or Trackable2DObject. For the ImageDrawable to show up on the screen, you need to add the Drawable to a GeoObject or Trackable2DObject.

Refer to how you've actually linked overlayOne to a GeoObject or Trackable2DObject, and do the same with the new ImageDrawable in the onClick function.

Best,

Martin

 

Martin,

I got it.

Thanks a lot

Hi Martin and Kiran,

Did you display another image on onClick() event of an overlaid image?

I tried with code below but still not display:

var overlayBehind2 = new AR.ImageDrawable(imgBehind, 0.18, {
offsetX: 0.43,
offsetY: -0.11,
onClick: function(){
var imgZoom = new AR.ImageResource("assets/zoom.png");
var overlayZoom = new AR.ImageDrawable(imgZoom, 0.5, {
offsetX: 0,
offsetY: 0
});
var qZoom = new AR.Trackable2DObject(this.tracker, "behind", {
drawables: {
cam: overlayZoom
}
});
}
});

Could you help me fix this code to display another image, please?

Thanks.

Hi there!

Not sure if I get it right.. but

* In case you want to "click through" and image so also the onClick of the image behind is fired: let your onClick function return false
* In case you want to replace augmentation once it is clicked: have a look at the add- and removeCamDrawable
* In case you want to switch between to images when user clicks it you may also set "enabled = false | true" to hide/show it
* In case you want to enlarge an augmentation when user presses it: use scale parameter

Hope that helps.
 

Kind regards,
Andreas

Hi,

I need to refresh image from url, how I can do it?

Thanks.

Pierre

 

 

Please have a look at

AR.ImageResource and AR.ImageDrawable.
You may update the image augmentation by destroying the old one and creating a new one attached to same AR.Trackable2dObject (modify camDrawables for that purpouse).

Hope that helps.

Best regards,
Andreas

 

 

 

 

Ok,

but If I need refresh onclick on page15  with the same url.

 

num="15";
var overlay15 = new AR.ImageDrawable(new AR.ImageResource('http:/......./'+num), 1, { offsetX: 0, offsetY: 0});
var page15 = new AR.Trackable2DObject(this.tracker, num, {drawables: {cam: } });



 

in that case you can use wildcard * to create a single Trackable2DObject and use onEnterFieldOfVision in order to find out the name of the target that was recognized (first param). You may then update camDrawables accordingly.

Best regards