This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Fredrik Ampler
Posted Feb 09 - Read on Facebook

HI! I'm experimenting with device sensor feedback and ran into a problem: how do I detect device rotation when the mobile is held up vertically? I'm using https://github.com/joshmtucker/OrientationEvents and can't figure out how to map from horizontal rotation to vertical rotation.
I want the same feedback as seen in the video when the mobile is held up. Any ideas?

14 Comments

Jonas Treub

I have that logic in the VRComponent. It changes the device alpha, beta and gamma value into a heading, elevation and tilt. You can find the code inside the component. I am planning to extract that logic so it can be more useful for projects like this. https://github.com/jonastreub/VRComponent/blob/master/VRComponent.coffee#L453

Fredrik Ampler

Thanks, Jonas Treub! That's a chunk of math/referencing that's a little bit beyond me, I'm afraid... I guess the variable I'm looking for is "tilt" and the math behind is as expressed in [tilt = Math.acos(-xrC / cH) * Math.sign(yrC)]?

Jonas Treub

You could use the VRComponent and make it invisible meanwhile listening for orientation updates. The orientationDidChange event returns tilt data.

Fredrik Ampler

Aha! That sounds great. Could you just give me an example of how to use the module, something like setting up the listener and assigning a layer's position using the tilt variable [layerA.x = tilt]?

Jonas Treub

It was the heading you were looking for btw

Jonas Treub

in the browser you can use left and right arrow keys to move around

Fredrik Ampler

Wow, Jonas, that was great! I'll look into the code tonight and try to change from Roll to Tilt - it's supposed to scroll when the phone is waved, not moved in a circle around you (see vid above). Great help, you rock!

Jonas Treub

Ah. Then you probably need accelerometer data. You can't get that using the VRComponent. I am planning to create a deviceOrientationManager which will make this kind of data a lot simpler to handle.

Fredrik Ampler

Oh? I thought it would be possible to combine the roll/ pitch vectors and calculate the vertical component? Isn't it a matter of transposing from one vector system to another?

Jonas Treub

Ah. Vertical rotation is the elevation. Thought you meant the wave movement of the hand

Fredrik Ampler

This is where my math is gone... :)

Jonas Treub

The VRComponent returns the elevation value. No math necessary

Fredrik Ampler

AHA! You are totally and entirely awsum! Thanks, that did it!

Read the entire post on Facebook