Wikitude

ImageResource Button is not always tappable. Why?

Hello! 

 

I am having an issue with a button click. When target image is recognized I display two drawables on screen. First drawable is VideoDrawable and second is ImageResource which is a button. The problem is that the button works only every other time. One time it is clickable and opens web browser. If I restart application and try again it is no longer clickable. Many of our users started to complain about this issue both on Android and iOS devices. I assumed that may be our green screen video somehow overlaps the button that that is why it is sometimes not clickable and started to use zOrder but it did not help. Visially video is always on the left and button is always on the right and they never visually overlap. However the button is not always clickable.  Below are a few code examples just to show how I handle button clicks, how I use zOrder and how I add drawables to my Trackable2DObject. May I ask for your advise WHY would the button is not always tappable? One time it works and if I restart application couple of times it does no longer work. Then restart application again and it start working again.  

 

 

 // THIS IS JUST TO SHOW THAT I USE zOrder

var my_video = new AR.VideoDrawable(video_url_inner, scaleLevel, {

                                                 offsetX: propertiesArr,

                                                 offsetY: propertiesArr,

zOrder:-1,

isTransparent:isVideoTransparent,

                                                 onLoaded: function videoLoaded() {

                                                  video_loaded= true;

                                                   video_inner.play(-1);

                                            }


}

 

 

// THIS IS HOW I CREATE BUTTON 

var seeMoreImagesButton = createWwwButtonFn(buttonImageUrl,buttonUrl, 0.2, {

                                                   offsetX: 0.2,

                                                   offsetY: -0.3,

  zOrder:5

                                                   });

 

// THIS IS HOW I ADD overlays

var myOverLayes = ;

myOverLayes = my_video;

myOverLayes = seeMoreImagesButton

myTrackable2DObject.drawables.addCamDrawable(myOverLays);

 

 

// THIS IS NOW I HANDLE BUTTON CLICK

function createWwwButtonFn(buttonImageUrl, url, size, options) {

    options.onClick = function() {

       AR.context.openInBrowser(url);

    };

 

   var imgButton = new AR.ImageResource(buttonImageUrl);

 

    return new AR.ImageDrawable(imgButton, size, options);

} 

I there!

This sounds very strange.
Could you please try using zOrder values >=0 and check if issue also occurs when adding a VideoDrawable in combination with the POI Sample code of the SDK Sample application?
Please also check if issue also occurs without Video-Drawble in scene.
 

Kind regards,
Andreas

Hi Andreas! 

Thank you fro your reply! I have tried using Button without Video Drawable and It works stable! Every time I restart the app the button can be tapped and works well. Unfortunetly using zOrder >0 did not make a difference. The button is assigned zOrder of 5 and VideoDrawable is assigned zOrder of 1. But still amost every other time I start my app and scan image that displayed Video drawable and the button, the button cannot be tapped. And every other time it works! And it happens on Android and iOS platform so I guess it has to to with Javascript. From your reply I reading that I am the only one who is having this issue... hmm. I have tried changing the order of drawables in the array but that did not help either.   

Hi Sergey,

That's strange indeed, we haven't heard from anyone else having this issue.

Is it possible to send us your entire project, so we can verify and debug the issue on one of our test devices? You can send it to forum@wikitude.com with the subject "ImageResource Button is not always tappable. Why?". That would help a lot to understand where this issue is coming from.

Thanks,

Martin