Wikitude

Links in snapped HTML no inline with display

Hello,

I am currently facing an issue with snapped HTMLDrawable:

When the HTMLDrawable is displayed on top of my images, everything works fine.

But then, when I try to snap the webpage on the display, I have to click over or above the links to access them.

I started from the wikitude sample code for xamarin.iOS, replaced the sample picture overlay with a simple HTMLDrawable showing google's page.

Added the snapArea and functions just like in the documentation, but the issue is here and I can't find any solution to fix this.

Could you please assist ?

I provided the zip containing the 1_ImageRecognition_1_ImageOnTarget folder I used to show the issue.

Best regards,

B. STEFANI

 

Hello Bastien

I would highly recommend that you try and achieve this without using HTMLDrawable. In any case, maybe this forum post could help you a bit.

Thanks

Hello,

I'm a bit surprised by your reply, what would be the other solution if we don't use HTMLDrawable to show external webpages ?

Does that means that snapping is not supposed to work with HTMLDrawable in wikitude ?

Best regards,

B. STEFANI

Hi Bastien,

Could you please provide further details on your specific use case and how you?re using the HTML drawable, so as to see if we can offer you another alternative? For example, could you also work with a button for opening the webpage? Generally as the HTMLDrawables may be handled/react/displayed differently on different devices and on iOS and Android, we recommend to use other augmentations.

Thanks

Hello,

Regarding HTML content, requierments from our client are simple:

He wants to see an image, augment it with an html page on top, and if we lose the image from field of vision, we display the webpage in the middle of the screen and the content should be still browsable.

I added all our js folder as attachment + one of the pictures

Other solution would be indeed to display each picture with an Image drawable but that would be clearly painful for us as the webpage our customer want to display is animated and for us it would mean to animate each picture independantly. So HTML Drawable is clearly our best bet for this.

Best regards,

B. STEFANI

HTMLDrawables are used for simple HTML-Widgets to like weather information, so that you can place pictures and format text easily, but is not recommended for rendering a whole website or animated content.

I strongly recommend using a AR.AnimatedImageDrawable instead and place this on top of the target-image. This spritesheet contains a button saying "Visit Website", which triggers a AR.context.openInBrowser to launch a new fullscreen website.

Although this is a bit different to your requirement it ensures smooth animations, sharp assets also on small devices and allows you to create a responsive website, independent from the AR experience.

Best regards,
Andreas

Hello,

I'm sorry but this as nothing to do with animated pages as they are working perfectly when target is in fov, issue is only when the content is snapped.

Btw, with google page it's exactly the same thing (please see my very first post), in fov every link is accessible correctly, when snapped you have to click over or above the links to activate thems.

We are indeed planning to migrate to ImageDrawables but this means redesigning the contents wasting 1 month of development, so if a simple workaround could exist that would be preferable.

Best regards,

B. STEFANI

Seems to be related to the screen coordinate handling.
Does it also occur in latest Wikitude SDK 5.2 on iOS and Android?
If so, you may define a div in the HTML and embed the page in an iFrame style instead of using snapToScreen by switching visibility of a div rather than enabling/disabling the snapToScreen mode.

Hope that helps,
Andreas

Hello again,

We were using 5.1.4, I just updated to 5.2 and it's even worst :D

The links are still not inline during snap plus a new thing : when I click on a link and safari opens, If I comes back to the app, the camera view is still when the app don't crash by itself...

We will fallback to 5.1.4 for now.

Best regards,

B. STEFANI

Hello,

We finally migreated to 5.2 as old version couldn't be used anymore as google play store rejects it as using old version of OpenSSL.

But the issue about detection of touch in snapped HTML content persist, so it's not solved with the new version.

Best regards,

B. STEFANI