UI - Web AR not responsive?

General Discussion
#1

Hi everyone,

I’m working on a Web AR project right now and experince an issue with the UI.
As said in the UI Coordinate Systems Tutorial, I set my Image Relative to “z.screen”.
That works fine if I test in the Zapworks App, but if I test it in multiple browsers the placement of the image varies.
If I open the project via QR Code in Chrome (on Android with my Samsung Galaxy S5), the placement of the Logo is different from when I open it in Safari on IOS.

Screenshoots
Screenshoots1920×750 202 KB

With the toolbar activated on Web AR, the bar on the bottom in Safari even halfed blocked the Image.
I could fix that by deactivating the Zapworks toolbar. But the placement of the image is still different depending on the Browser I use.

Is there any way to fix this problem, so that the UI is relative to the Browser and considers the bars or is there anything I’m missing with the UI placement?

Thanks in advance for any help.

#2

Hey if anyone else has the same problem.
A teammate of mine was able to fix the problem by creating 4 groups, two relative to Z.screenLeft (one placed on the upper left corner and one placed on the lower left corner) and two relative to Z.screenRight (one placed on the upper right corner and one placed on the lower right corner).

She placed the Logo inside the group relative to Z.screenRight placed on the lower right.
The Logo is relative to all four groups.

I hope this helps anyone who has a simular problem.

2 Likes