Wikitude

snapToScreen aspect ratio

Hello

I'm having an issue where snapToScreen looks fine when in portrait orientation, but vertically squished when in landscape. Do you guys have any examples/thoughts on accounting for the aspect ratio when using snapToScreen?

Please have a look at the official samples for snapToScreen, e.g. Videos in snapToScreen or 3DModels.
Note that aspect ratio changes due to orientation changes are handled internally and may not work properly when modifiying snapContainer-div manually (using e.g. jQuery).

Please let me know if you encounter same issue in official samples - otherwise please check your code and debug your webview.

Best regards

Thanks Andreas

I reviewed those samples again and I noticed there's a point about adjusting the div container on rotation using CSS. However, the container div I'm using is 100% width and height so it should not need any adjusting. 

Here's a better description of what I'm doing. I have a a video drawable and a series of image drawables that act as buttons. I also have an absolutely positioned button in my HTML layer that acts as a toggle for snapToScreen. When I toggle the snapToScreen button I'm looping through my drawables and scaling them down so they fit within my snap container, if I toggle the snapToScreen off, I again adjust the scale of the drawables back to normal. This all works fine.

The issue I'm having is that when in landscape, regardless of whether or not I started in landscape or rotated to landscape from portrait, all the drawables are squished vertically when snapToScreen is enabled. Is there anything I can do trigger the adjustment in the aspect ratio? When manually changing the scale of a drawable is there any way to specify an aspect ratio?

Ensure to your snapContainer div is always squared, otherwise you'll get this distortion effect.
Change backgroundColor in CSS for easy testing.

Hope tht helps

I figured out my issue and I'm posting it here incase anyone else runs across this. I had my video tilted at a 45 degree angle from the marker for aesthetic reasons. My mistake was not realizing this would transfer over to its properties while being snapped. So while I was adjusting the scale and x/y factors, I wasn't resetting the tilt which caused it to look squished.

In short, if you're snapping something to the screen, make sure you zero out the rotations.