adtile / full-tilt Goto Github PK
View Code? Open in Web Editor NEWLicense: Other
License: Other
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 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?
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
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;
}
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?
});
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
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.
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.
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?
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?
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.
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:
Best,
Nikos
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.
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:
It seems that the changes were rolled out a week ago (2016-04-25):
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!
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';
}
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.
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!
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?
Hello,
Are you planning to make a new release. So the new additions are available on Bower?
Cheers,
Doruk
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.