adtile / full-tilt Goto Github PK

I'm using the emulator in Chrome but for example

I don't see that on my iPhone. Is that a bug in Chrome or in Full-Tilt or?

Hi,

I have the following code in my web-app (Its a basic compass app):

var promise = FULLTILT.getDeviceOrientation({'type': 'world'});
promise.then(function(orientationControl) {
    orientationControl.listen(function() {
        var screenAdjustedEvent = orientationControl.getScreenAdjustedEuler();
        var heading = screenAdjustedEvent.alpha;
    });
});

What I am noticing is that for the first few seconds, the heading value is inaccurate. It moves around a few different values before becoming stable. I am guessing this is whilst the device is calibrating.

Is there a way I can detect when this has finished calibrating i.e. ready?

At the moment, I am just waiting a few seconds before doing my processing but i'm hoping there is something more accurate than that?

I am testing on Safari iOS 8.1 btw.

Thanks

intro.js
var M_PI = Math.PI;
var M_PI_2 = M_PI / 2;
var M_2_PI = 2 * M_PI;
...
var SCREEN_ROTATION_0 = 0,
SCREEN_ROTATION_90 = M_PI_2,
SCREEN_ROTATION_180 = M_PI,
SCREEN_ROTATION_270 = M_2_PI / 3,
SCREEN_ROTATION_MINUS_90 = - M_PI_2;

SCREEN_ROTATION_270 = M_2_PI / 3, // Error -> M_2_PI - M_PI_2

360 / 3 = 120 (not 270)

I would love to use this library but my implementation requires that the javascript and the image being panned over both be loaded inside of an iframe. Is it possible to still capture the events and data necessary to make this work in that context. I have not had a lot of luck so far.

Thanks!

Hi

I am experiencing an issue : I get wrong alpha values (with deviceOrientation) when the device is perpendicular to the horizon.
You can test it on your "box2d" demo.
Start the demo while holding the device perpendicular to the horizon with beta around 90, and then orient down, and up.
While you are slowly orienting the device up and down, when you are approaching the perpendicular position (your start position) alpha goes completely crazy and the red square is moving to the left and right, although you are only orienting the device up and down.

I can reproduce this behaviour on an iPad 3 (iOS7) and a Nexus 5 (Android 4.4.4), in both portrait an landscape orientations.

I really need a library like the one you are building cause I am going nuts with all the differences in the gyro behaviour between all the OS, devices, browsers ... So if I can test anything for you, just ask me.

To easily try out the bundled examples or use the device orientation emulator (doe) it would be great if the examples would be available live somewhere. I'd suggest setting up Github pages (result) and deploy automatically using Travis CI (code).

In Chrome on Android 4.4.2 when you rotate the phone from portrait to landscape, after the browser has resized the scene is tilted on a 45degree angle.

In Chrome on iOS 8 after the re-orientation from portrait to landscape, the x and y seem to have swapped (or not updated) and the view is titled to the original angle from portrait.

This might not be a great explanation.. but is there any tips for handling re-orientation?

The VR demo works beautifully in portrait mode, but when I rotate my device into landscape mode, everything gets all confused. How can I make things work for landscape mode? I tried messing with the worldQuat but didn't have much luck. Got any tips?

Currently there is running a SensorCheck to determine the support for an event on the device. The SensorCheck is checking if the return object from the event exists or not.

I have seen before that in some device+browser combinations there is partial support. In this case the event will return the object but some of the values will be missing. So although SensorCheck will resolve, some of the values will not be available.

For example on some Android devices, the DeviceMotion event will return an object with the AccelerationIncludingGarvity values but not the RotationRate values.

Do you have a plan to add a check for availability. Something like:

var promise = new FULLTILT.getDeviceMotion();
var deviceMotion;

promise.then(function(controller) {
    deviceMotion = controller;
    deviceMotion.isAvailable('rotationRate');  // Like this?
});

Hi there and congrats for your library,

I have noticed that sometimes the FullTilt reported beta values (Euler) are hoping around the horizon level (90º). In the vr_test demo while the camera is super smooth the reported beta values usually hop around the horizon level (never hitting 90º). I wonder how it's possible that the camera pitch movement is super smooth while the Euler beta value hops? I'm not sure this is a bug but in my application I need a consistent pitch value around the horizon.

I also noticed the following:

1. I may have to reload the page in order for the issue to emerge. At first load its possible that the beta values are just fine around the horizon. Also some devices pinpoint the issue more clearly.
2. When locking the device orientation in portrait mode and turning the device in landscape mode the alpha, beta, gamma values behave more smoothly, the pitch is correctly reported at the horizon level and the orientation values do not interfere with each other. The only issue in this case is that the magnetic north is offset by 90º.

Best,
Nikos

Hello,
Are you planning to make a new release. So the new additions are available on Bower?
Cheers,
Doruk

Hi,

Do you have any idea how to do this? Currently I have something like this:

if ((newBeta > 5 && newBeta < 85) && (newGamma > -40 && newGamma < 40)) {
absoluteP.innerHTML = 'portrait';
} else if ((newBeta > -40 && newBeta < 40) && (newGamma > -85 && newGamma < -5) || ((newBeta > -40 && newBeta < 40) && (newGamma > 5 && newGamma < 85))) {
absoluteP.innerHTML = 'landscape';
}

Chrome’s devtools are able to emulate device orientation on a desktop computer that lacks orientation hardware, which is very handy for development. However, this is not possible if you use the recommended FULLTILT.getDeviceOrientation( [options] ) and FULLTILT.getDeviceMotion( [options] ) functions, because they will just report that “Device{Orientation,Motion} is not supported”.

You could use the new FULLTILT.Device{Orientation,Motion}( [options] ) constructors directly for this case, but the down-side is that those constructors return objects directly, while the .get* methods return Promises, so switching to the constructors for development isn’t really practical because of the flow control differences.

It would be great if it was easier to make use of Chrome’s devtools.

I'm running into issues with Chrome on my Nexus 5. Often I refresh the page and the init promise rejects (no device orientation supported).

I'm wondering if an option just to always succeed would be good. It would work for me a least.

Float32Array is not supported in IE9 and older versions. Typed Arrays are not supported in said versions generally speaking. I know that this repository is supposed to detect device orientation + motion, but when it sits on a web page, it still gets executed on IE9 and older.

This is the problematic line: https://github.com/adtile/Full-Tilt/blob/master/dist/fulltilt.js#L426

On iOS the alpha value can drift pretty dramatically. This seems to be less a function of time, and more a function of how much the phone is moved while listening to the device orientation event i.e. the more that the phone is moved, the more the alpha drifts and not the more time passes the more the alpha drifts.

This happens on both Safari and Chrome for iOS.

Since the raw values are affected by the same problem, it seems to be an issue with the underlying deviceorientation event on iOS browsers, but perhaps there is a way to compensate for it during the normalization process.

The WebGL VR demo works fine when I'm holding my phone in the portrait orientation, but when I hold it in horizontal orientation (such as to be used with Google Cardboard or the likes), the orientation is inverted when looking above the horizon. Looking below the horizon has the orientation as expected. The phone's auto rotate feature is turned off.

Tested this on Samsung Galaxy S6 with Firefox Beta.

I'm interested in using this for a VR project, and would be happy to help with a patch. Any idea why this is happening?

LICENSE.txt has been changed to say "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License: http://creativecommons.org/licenses/by-nc/4.0/." in the commit "Clean up README" fab0a72.

Do you realise that the NonCommercial clause makes the new versions of your library proprietary, as opposed to the previous MIT license which was open source? Many projects (such as my employer) won't be able to use new versions of your library anymore, as the projects are open source. I hope you can still reconsider this license change.

On my Android phone, in both Firefox and Chrome, my compass (euler.alpha) is often off by 90 or 180 degrees. This seems to depend on the orientation at which I hold my phone when I open my browser.

How can I compensate for this?

Hi there,

First thank you, you're doing great!

I'm trying to create a controller on mobile for a desktop based experience.

My objective is basically to deduce directions from accelerometer values so if we're tilting the phone left, right, front or back we can move accordingly on the desktop.

Most of the time, it works well. But sometimes, my devices returns miscalibrated values.

It's actually related to screenOrientationAngle returning 0. If I trigger manually an orientation change by moving the device to portrait and move back to landscape, the value gets fixed (something like 90 or 270 is now returned) and the adjustment is right.

I know that those values are based on natives window.screen.orientation or window.screen.orientation.angle and that it's not directly related to Fulltilt.

Do you have an idea of how I could fix it?

I hope I was clear enough!

See: https://developers.google.com/web/updates/2016/03/device-orientation-changes?hl=en

The deviceorientation event in Chrome has changed from 'world' (absolute coordinates) to 'game' (relative coordinates) matching Safari.

DeviceOrientation.js likely needs to be updated. Two options:

1. Switch support for Chrome 5.0 to the 'game' processing. Or,
2. Use the new deviceorientationabsolute event in Chrome 5.0 and continue to use 'world' processing.

It seems that the changes were rolled out a week ago (2016-04-25):

https://en.wikipedia.org/wiki/Google_Chrome_release_history

d.ts:

declare module FULLTILT {
	class DeviceOrientation {
		ALPHA:number;
		BETA:number;
		GAMMA:number;
		constructor(options?:any);
		start(callback?:Function):void;
		stop():void;
		listen(callback?:Function):void;
		isAvailable(attribute:number):boolean;
		isAbsolute():boolean;
		getFixedFrameQuaternion():Quaternion;
		getScreenAdjustedQuaternion():Quaternion;
		getFixedFrameMatrix():RotationMatrix;
		getScreenAdjustedMatrix():RotationMatrix;
		getFixedFrameEuler():Euler;
		getScreenAdjustedEuler():Euler;
		getLastRawEventData():DeviceOrientationEvent;
	}
	class DeviceMotion {
		ACCELERATION_X:number;
		ACCELERATION_Y:number;
		ACCELERATION_Z:number;
		ACCELERATION_INCLUDING_GRAVITY_X:number;
		ACCELERATION_INCLUDING_GRAVITY_Y:number;
		ACCELERATION_INCLUDING_GRAVITY_Z:number;
		ROTATION_RATE_ALPHA:number;
		ROTATION_RATE_BETA:number;
		ROTATION_RATE_GAMMA:number;
		constructor(options?:any);
		start(callback?:Function):void;
		stop():void;
		listen(callback?:Function):void;
		isAvailable(attribute:number):boolean;
		getScreenAdjustedAcceleration():number;
		getScreenAdjustedAccelerationIncludingGravity():number;
		getScreenAdjustedRotationRate():number;
		getLastRawEventData():DeviceOrientationEvent;
	}
	class Quaternion {
		constructor(x?:number, y?:number, z?:number, w?:number);
		set(x?:number, y?:number, z?:number, w?:number):Quaternion
		copy(quaternion:Quaternion):Quaternion;
		setFromEuler(euler:Euler):Quaternion;
		setFromRotationMatrix(matrix:RotationMatrix):Quaternion;
		multiply(quaternion:Quaternion):Quaternion;
		rotateX(radians:number):Quaternion;
		rotateY(radians:number):Quaternion;
		rotateZ(radians:number):Quaternion;
	}
	class RotationMatrix {
		elements:Array<number>;
		constructor(m11?:number, m12?:number, m13?:number, m21?:number, m22?:number, m23?:number, m31?:number, m32?:number, m33?:number);
		set(m11:number, m12:number, m13:number, m21:number, m22:number, m23:number, m31:number, m32:number, m33:number):RotationMatrix;
		copy(matrix:RotationMatrix):RotationMatrix;
		setFromEuler(euler:Euler):RotationMatrix;
		setFromQuaternion(quaternion:Quaternion):RotationMatrix;
		multiply(matrix:RotationMatrix):RotationMatrix;
		rotateX(radians:number):RotationMatrix;
		rotateY(radians:number):RotationMatrix;
		rotateZ(radians:number):RotationMatrix;
	}
	class Euler {
		alpha:number;
		gamma:number;
		beta:number;
		constructor(alpha?:number, beta?:number, gamma?:number);
		set(alpha:number, beta:number, gamma:number):Euler;
		copy(euler:Euler):Euler;
		setFromQuaternion(quaternion:Quaternion):Euler;
		setFromRotationMatrix(matrix:RotationMatrix):Euler;
		rotateX(radians:number):Euler;
		rotateY(radians:number):Euler;
		rotateZ(radians:number):Euler;
	}
	function getDeviceOrientation(options?:any):any;
	function getDeviceMotion(options?:any):any;
}

Hi,

What is the Licence for this project? LICENSE.txt states it's Creative Commons Attribution-NonCommercial 4.0 International Licence while the licensing comment in the top of fulltilt.js states that it's MIT.

Thanks.