jQuery device orientation range converting to percentage between 0 and 100

Question

I'm trying to control an HTML element by using the gyroscope in my smartphone. I managed to extract the gyroscope's values (Alpha, Beta and Gamma) but can't manage to translate it in such a way it's able to manipulate objects the way I'd like to.

The starting position of the device is in landscape mode, right in front of the user; just like a flatscreen television. The device will be inserted in a Google Cardboard viewer.

The attached image explains what I am trying to achieve.

1. An objects "Left" percentage in CSS.
2. Device orientation while rotating head from left to right

I can't seem to find a way to "convert" the range of the rotaion movement to a percentage value between 0 and 100%.

For example:

• If I look slightly left, the Alpha value is around 22/23 and the left percentage should be around 25.
• If I look slightly right, the Alpha value is around 338/337 and the left percentage should be around 75.

Could you guys help me out?

Best regards,

Peter

Answer 1

You got this a bit wrong, check for more details here: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

• The DeviceOrientationEvent.alpha value represents the motion of the device around the z axis, represented in degrees with values ranging from 0 to 360.
• The DeviceOrientationEvent.beta value represents the motion of the device around the x axis, represented in degrees with values ranging from -180 to 180. This represents a front to back motion of the device.
• The DeviceOrientationEvent.gamma value represents the motion of the device around the y axis, represented in degrees with values ranging from -90 to 90. This represents a left to right motion of the device.

est-west and north-south position, notice z is not represented in x y axis

• x - beta: Represents the axis from West to East
• y - gamma: Represents the axis from South to North
• z - alpha: Represents the axis perpendicular to the ground

Going forward with CSS props:

• x - beta: Represents top property
• y - gamma: Represents left property
• z - alpha: not necessary usable in a 2d css but you can use it for zoom or angle to a 2d shape, div or image.

For left property, you should use gamma device orientation, here is a nice example (masonry level gama) where left css prop in percent is used to position the level point.

try form here on mobile: https://jsfiddle.net/f7tdrb87/

percentage computation:

function precentageIn180(value)
{
    var percent =  ((value * 100) / 180).toFixed(0);
  return percent;
}

and the interval [-90, 90] transposed into [0, 180] where 0 == 0% and 180 == 100%, so then event.gamma + 90 is used all the time;

var point   = document.querySelector('.point');
var masonryLevel = document.querySelector('.masonry-level-gama');
var log = document.querySelector('.log');

var maxY = masonryLevel.clientWidth - point.clientWidth;

function precentageIn180(value)
{
	var percent =  ((value * 100) / 180).toFixed(0);
  return percent;
}

function handleOrientation(event) {
  var y = event.gamma; // In degree in the range [-90,90]
  log.innerHTML = "gamma: " + y + "\n";
  //value on gama is [-90, 90] => but we want to have between [0, 180], to be possiblle to compute 100% of 180
  y += 90;
  var percent = precentageIn180(y);
  log.innerHTML += "gamma percent: " + percent + "\n";
  point.style.left = (percent + "%");
}



window.addEventListener('deviceorientation', handleOrientation);

.masonry-level-gama {
  position: relative;
  width : 190px;
  height: 40px;
  border: 1px solid #CCC;
  border-radius: 10px;
}

.point {
  position: absolute;
  top   : 10px;
  left  : 50%;
  margin-left: -10px;
  width : 20px;
  height: 20px;
  background: blue;
  border-radius: 100%;
}

<div class="masonry-level-gama">
  <div class="point"></div>
</div>
<pre class="log"></pre>