Css transform image with deviceorientation

ionic-v1
1

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?

2

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

3

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

1 Like
4

@mhartington
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:

image
Bildschirmfoto 2015-07-03 um 13.56.33.png369×610 27.3 KB

5

@mhartington

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

image
example.jpg1515×1212 86.7 KB

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

6

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