Css transform image with deviceorientation


Hey there,

since i’ve tried to accomplish this with ng-cordovas deviceorientation and it didn’t worked, I switched over to HTML5…
so here’s the thing…

if I’m using this > http://www.html5rocks.com/en/tutorials/device/orientation/

I only get positiv values so I can’t really detect wether am tilting to the left or right.
So my image is always rotating to 1 side.

Here’s my controller.

.controller('DiagWinkelACtrl', function($scope,$state,$rootScope) {

$rootScope.deviceOrientationHandler = function(tiltLR, tiltFB, dir) {
	$scope.iDeg = Math.round(tiltFB);

    $scope.$apply(function () {
    	$scope.myDeg = $scope.iDeg + '°';

	if($scope.iDeg > 0) {
		$scope.ekDeg = 90 - $scope.iDeg;
	else {
		$scope.ekDeg = 90 + $scope.iDeg;

	$("img#daDreh").css('transform', 'rotate('+ $scope.ekDeg +'deg)').css('transition', '300ms linear all');

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
	window.addEventListener('deviceorientation', function(eventData) {
		// gamma is the left-to-right tilt in degrees, where right is positive
		var tiltLR = eventData.gamma;

		// beta is the front-to-back tilt in degrees, where front is positive
		var tiltFB = eventData.beta;

		// compass
		var dir = eventData.alpha;

		// call our orientation event handler
		$rootScope.deviceOrientationHandler(tiltLR, tiltFB, dir);
	  }, false);

this obv. doesn’t work because $scope.iDeg is always positive … any idea how I can do this?


if im using the rotate3d like they do

$('img#daDreh').css('transform', 'rotate('+ tiltLR +'deg) rotate3d(1,0,0, '+ (tiltFB*-1)+'deg)').css('transition', '300ms linear all');

the image does go left or right but I dont want it to be 3D


So what are you essentially trying to do? Have an image follow the device as you rotate it? ?


yes. But there are more issues to it…
because with the html5 version, the rotation values also change with the direction you holding the phone…
so its getting to messy.

I found a good example. ( https://github.com/mediaupstream/levelToolJS )
The left to right level tool is the thing that I need.

how can I achive this with ng-cordova?

I just want to be able to show the degree 0-90 ( left or right )
and an image follow with the rotation value.

my app looks like this:



I’ve created an example (sketch) on how it should work.

even tho, the phone is tilted to some degree back or forth… it should be 90° if its not tilted to the left or to the right.

What ever I do with the acceleration… the values changes depending on the degree the phone is titled back/forth…
it should be locked at 90° even if its lying flat on the table… dunno if I could explain this haha


Is there a simple way to get the device orientation in 2D?