The Orientation API

INTRODUCTION

This section covers the HTML5 orientation API: a way to use angle measures provided by accelerometers from mobile devices or laptops such as MacBooks.

Beware: all examples must be run on a device with an orientation sensor and/or with an accelerometer. Furthermore, Chrome/Safari and Mozilla support these API, but Opera mobile doesn't yet at the time of writing.

You can "fake the orientation values" using the devtools of a desktop browser, if it provides a "mobile device emulation mode" (see the support table below, the columns for desktop versions of browsers are about the support for this emulation mode).

Here is a table that shows support for this API as of December 2015:

For an up to date version of this table: http://caniuse.com/#feat=deviceorientation

Notice that all major browsers support the API in their mobile version.

EXTERNAL RESOURCES:

W3C specification

Article on html5Rocks.com about device orientation

The coordinate system and Euler angles

The transformation from the Earth coordinate frame to the device coordinate frame uses the following system of rotations.

Rotations use the right-hand convention, such that positive rotation around an axis is clockwise when viewed along the positive direction of the axis. Starting with the two frames aligned, the rotations are applied in the following order:

FIRST EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS Z AXIS BY ALPHA DEGREES, WITH ALPHA IN [0, 360]

Device in the initial position, with Earth (XYZ) and
body (xyz) frames aligned.

Device rotated through angle alpha about z axis,
with previous locations of x and y axes shown as x0and y0.

SECOND EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS X AXIS BY BETADEGREES, WITH BETA IN [-180, 180]

Device in the initial position, with Earth (XYZ) and
body (xyz) frames aligned.

Device rotated through angle beta about new x axis,
with previous locations of y and z axes shown as y0and z0.

THIRD EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS Y AXIS BY GAMMA DEGREES, WITH GAMMA IN [-90, 90]

Device in the initial position, with Earth (XYZ) and
body (xyz) frames aligned.

Device rotated through angle gamma about new y axis,
with previous locations of x and z axes shown as x0 and z0.
Get the different angles using the JavaScript HTML5 orientation API

TYPICAL USE

The use of this API is very straightforward:
Let's see this with an example on JsBin. Try it with a smartphone, a tablet or a device with an accelerometer:

(If using a mobile device, it's better to open this URL in standalone mode, without the JsBin editor. Try this URL instead!

The above screenshot was taken with an ipad lying immobile on a desk. All the angle values are theoretically 0 when the device is laid flat, and it has not changed since the page loaded. Depending on the hardware, however, these values may change even if the device is stationary: a little sensitive sensor can report constantly changing values. This is why in the example we round the returned values with Math.round() at display time (see code).

If we change the orientation of the device here are the results:

Typical use / code from the above example:
1. ...
2. <h2>Device Orientation with HTML5</h2>
3. You need to be on a mobile device or use a laptop with accelerometer/orientation
4. device.
5. <p>
6. <div id="LR"></div>
7. <div id="FB"></div>
8. <div id="DIR"></div>
9. <script type="text/javascript">
10. if (window.DeviceOrientationEvent) {
11. console.log("DeviceOrientation is supported");
12. window.addEventListener('deviceorientation', function(eventData) {
13. // gamme is for left/right inclination
14. var LR = eventData.gamma;
15. // beta is for front/back inclination
16. var FB = eventData.beta;
17. // alpha is for orientation
18. var DIR = eventData.alpha;
19. // display values on screen
20. deviceOrientationHandler(LR, FB, DIR);
21. }, false);
22. } else {
23. alert("Device orientation not supported on your device or browser. Sorry.");
24. }
26. function deviceOrientationHandler(LR, FB, DIR) {
27. document.querySelector("#LR").innerHTML = "gamma : " + Math.round(LR);
28. document.querySelector("#FB").innerHTML = "beta : " + Math.round(FB);
29. document.querySelector("#DIR").innerHTML = "alpha : " + Math.round(DIR);
30. }
31. </script>
32. ...
ANOTHER EXAMPLE THAT SHOWS HOW TO ORIENT THE HTML5 LOGO USING THE ORIENTATION API + CSS3 3D ROTATIONS

This is just a variation of the previous example, try it at JsBin: if using a mobile device it's better to open it in standalone mode, use this URL instead:

Results on the ipad: the logo rotates when we change the ipad's orientation. This is a good "visual feedback" for an orientation controlled game...

This example as a Youtube video: http://www.youtube.com/watch?v=OrNLhOAGSdE

Code from the example:
1. ...
2. <h2>Device Orientation with HTML5</h2>
3. You need to be on a mobile device or use a laptop with accelerometer/orientation
4. device.
5. <p>
6. <div id="LR"></div>
7. <div id="FB"></div>
8. <div id="DIR"></div>
9. <img src="http://www.html5
10. rocks.com/en/tutorials/device/orientation/html5_logo.png" id="imgLogo"
11. class="logo">
12. <script type="text/javascript">
13. if (window.DeviceOrientationEvent) {
14. console.log("DeviceOrientation is supported");
15. window.addEventListener('deviceorientation', function(eventData) {
16. var LR = eventData.gamma;
17. var FB = eventData.beta;
18. var DIR = eventData.alpha;
19. deviceOrientationHandler(LR, FB, DIR);
20. }, false);
21. } else {
22. alert("Not supported on your device or browser. Sorry.");
23. }
25. function deviceOrientationHandler(LR, FB, DIR) {
26. // USE CSS3 rotations for rotating the HTML5 logo
27. //for webkit browser
28. document.getElementById("imgLogo").style.webkitTransform =
29. "rotate(" + LR + "deg) rotate3d(1,0,0, " + (FB * -1) + "deg)";
31. //for HTML5 standard-compliance
32. document.getElementById("imgLogo").style.transform =
33. "rotate(" + LR + "deg) rotate3d(1,0,0, " + (FB * -1) + "deg)";
35. document.querySelector("#LR").innerHTML = "gamma : " + Math.round(LR);
36. document.querySelector("#FB").innerHTML = "beta : " + Math.round(FB);
37. document.querySelector("#DIR").innerHTML = "alpha : " + Math.round(DIR);
38. }
39. </script>
40. ...
A SIMPLE LEVEL TOOL USING DEVICE ORIENTATION

This example works in FF, Chrome and IOS Safari. Created by Derek Anderson @ Media Upstream. Original source code available GitHub.

We adapted the source code so that you can tweak it in JsBin: for testing it using a mobile device, open it in standalone mode at this URL instead.

OTHER INTERESTING USES: MIX ORIENTATION API AND WEBSOCKETS

You can imagine the above example that sends the current orientation of the device to a server using WebSockets. The server in turn updates the logo and position on a PC screen. If multiple devices connect, they can chat together and take control of the 3D Logo.

This video shows one of the above examples slightly modified: the JavaScript code running in the Web page on the iPad sends in real time the device orientation using the Web Sockets API to a server that in turns sends the orientation to a client running on a desktop browser. In this way the tablet "controls" the HTML5 logo that is shown on the desktop browser:

Click on the image to see the YouTube video:

The Device Motion API

INTRODUCTION

This section presents an API rather similar in its use to the device orientation API from the previous chapters.

The deviceMotion API deals with accelerations instead of just orientations.

Use cases proposed by the specification are:
BASIC USAGE
1. function handleMotionEvent(event) {
3. var x = event.accelerationIncludingGravity.x;
4. var y = event.accelerationIncludingGravity.y;
5. var z = event.accelerationIncludingGravity.z;
7. // Process ...
8. }
10. window.addEventListener("devicemotion", handleMotionEvent, true);
The deviceMotion API is rather straightforward and is very similar to the orientation API except that it returns more than just the rotation information, it also returns acceleration information about the device current motion. The acceleration is in three parts: acceleration along the X axis, the Y axis and the Z axis. Each value is in meters per second squared (m/s^2). The acceleration is returned as an "acceleration event" that has two properties: accelerationIncludingGravity and acceleration, which excludes the effects of gravity. There are two different values because some devices might be able to exclude the effect of gravity if equipped with a gyroscope. Indeed there is acceleration due implicitly to gravity, see also this: Acceleration of Gravity on Earth...

So if the device doesn't have a gyroscope, the acceleration property will be null. In this case you have no choice but to use the accelerationIncludingGravity property. Note that all IOS devices so far have a gyroscope.

BASICS ABOUT ACCELERATION

The device motion event is a superset of the device orientation event; it returns data about the rotation information and also acceleration information about the device. The acceleration data is returned in three axes: x, y and z. These are measured in meters per second squared (m/s^2). Because some devices might not have the hardware to exclude the effect of gravity, the event returns two properties,accelerationIncludingGravity and acceleration. The latter excludes the effects of gravity (when this is the case, the acceleration data will be null).

Example of acceleration values

If a laptop is in its normal position with the screen facing up, the data returned would be (info taken from:http://www.html5rocks.com/en/tutorials/device/orientation):

A mobile phone rotated along the x-axis so the screen is perpendicular to its normal position would return:

Remember the coordinate system for a mobile phone:

Common steps

The principle of use is the same as for the orientation API:
Common processing with acceleration values

Test the value of the acceleration.z property: If > 0 then the device is facing up, otherwise it is facing down. This can be useful if you want to play heads or tails with your phone ;-)
1. // For example, if acceleration.z is > 0 then the phone is facing up
2. var facingUp = -1;
3. if (acceleration.z > 0) {
4. facingUp = +1;
5. }
Compute the angle corresponding to the Left / Right and Front / Back tilts. This example comes from:http://www.html5rocks.com/en/tutorials/device/orientation and uses the accelerationIncludingGravityproperty of the event.
1. function deviceMotionHandler(eventData) {
2. // Grab the acceleration including gravity from the results
3. var acceleration = eventData.accelerationIncludingGravity;
5. // Convert the value from acceleration to degrees
6. // acceleration.x|y is the acceleration according
7. // to gravity, we'll assume we're on Earth and divide
8. // by 9.81 (earth gravity) to get a percentage value,
9. // and then multiply that by 90 to convert to degrees.
10. var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
11. var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp);
13. // ... do something
14. }
Compute the vertical (direction of the sky) (this extract comes from a complete example further down this page)...
1. ...
2. var angle = Math.atan2(accel.y,accel.x);
4. var canvas = document.getElementById('myCanvas');
5. var ctx = canvas.getContext('2d');
7. ctx.moveTo(50,50);
8. // Draw sky direction in the canvas
9. ctx.lineTo(50-50*Math.cos(angle),50+50*Math.sin(angle));
10. ctx.stroke();
Use acceleration values to move a ball on the screen of a tablet when the tablet is tilted front / back or left / right (complete example later on)...
1. ...
3. ball.x += acceleration.x;
4. ball.y += acceleration.y;
6. ...
COMPLETE EXAMPLES

Move the HTML5 logo

Online example at JsBin, if using a mobile device, use this URL.

Code from this example:
1. <!doctype html>
2. <html>
4. <head></head>
6. <body>
7. <h2>Device Orientation with HTML5</h2>
8. You need to be on a mobile device or use a laptop with accelerometer/orientation
9. device.
10. <p>
11. <div id="rawAccel"></div>
12. <div id="tiltFB"></div>
13. <div id="tiltLR"></div>
14. <div id="upDown"></div>
15. <imgsrc="http://www.html5rocks.com/en/tutorials/device/orientation/html5_logo.png"id="imgLogo" class="logo">
16. <script type="text/javascript">
17. if (window.DeviceMotionEvent != undefined) {
18. console.log("DeviceMotion is supported");
20. window.addEventListener('devicemotion', function(eventData) {
21. // Grab the acceleration including gravity from the results
22. var acceleration = eventData.accelerationIncludingGravity;
23. // Display the raw acceleration data
24. var rawAcceleration = "[" + Math.round(acceleration.x) + ", " +Math.round(acceleration.y)
25. + ", " + Math.round(acceleration.z) + "]";
27. // Z is the acceleration in the Z axis, and if the device
28. // is facing up or down
29. var facingUp = -1;
30. if (acceleration.z > 0) {
31. facingUp = +1;
32. }
34. // Convert the value from acceleration to degrees
35. // acceleration.x|y is the acceleration according to gravity,
36. // we'll assume we're on Earth and divide
37. // by 9.81 (earth gravity) to get a percentage value,
38. // and then multiply that by 90 to convert to degrees.
39. var tiltLR = Math.round(((acceleration.x) / 9.81) * -90);
40. var tiltFB = Math.round(((acceleration.y + 9.81) / 9.81) * 90 *facingUp);
42. document.querySelector("#rawAccel").innerHTML =
43. "Raw acceleration" + rawAcceleration;
44. document.querySelector("#tiltFB").innerHTML =
45. "Tilt front/back : " + tiltFB;
46. document.querySelector("#tiltLR").innerHTML =
47. "Tilt left/right : " + tiltLR;
48. document.querySelector("#upDown").innerHTML =
49. "Face Up:Down : " + facingUp;
52. updateLogoOrientation(tiltLR, tiltFB);
53. }, false);
54. } else {
55. alert("Not supported on your device or browser. Sorry.");
56. }
58. function updateLogoOrientation(tiltLR, tiltFB) {
59. // USE CSS3 rotations for rotating the HTML5 logo
60. //for webkit browser
61. document.getElementById("imgLogo").style.webkitTransform =
62. "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB * -1) +"deg)";
64. //for HTML5 standard-compliance
65. document.getElementById("imgLogo").style.transform =
66. "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB * -1) +"deg)";
67. }
68. </script>
69. </body>
71. </html>
Interesting example that uses jQuery mobile

This example comes from: http://www.emanueleferonato.com/2011/09/05/playing-with-javascript-iphone-and-devicemotion-event-listener/

It shows how the X and Y acceleration values can be used for indicating the sky's direction (vertical), and how the Z acceleration is in fact an indicator for the face up / face down orientation of the device.

This example has been adapted and put on jsbin.com so that you can tweak it: http://jsbin.com/uyuqek/4/edit

Code from the example:
1. <html>
2. <head>
4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
5. <meta name="viewport" content="user-scalable=no, width=device-width" />
7. <link rel="stylesheet"
8. href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
10. <script type="text/javascript"
11. src = "http://code.jquery.com/jquery-1.6.2.min.js">
12. </script>
13. <script type="text/javascript"
14. src = "http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js">
15. </script>
17. <script type="text/javascript">
18. $(document).ready(function(){
19. window.addEventListener("devicemotion",onDeviceMotion,false);
20. });
22. function onDeviceMotion(event){
23. var ctx = document.getElementById("c").getContext("2d");
24. var accel = event.accelerationIncludingGravity;
25. $("#sliderX").val(Math.round(accel.x)).slider("refresh");
26. $("#sliderY").val(Math.round(accel.y)).slider("refresh");
27. $("#sliderZ").val(Math.round(accel.z)).slider("refresh");
28. // sky direction
29. var angle = Math.atan2(accel.y,accel.x)
30. ctx.clearRect(0,0,100,100);
31. ctx.beginPath();
32. ctx.arc(50,50,5,0,2*Math.PI,false);
33. ctx.moveTo(50,50);
34. // Draw sky direction
35. ctx.lineTo(50-50*Math.cos(angle),50+50*Math.sin(angle));
36. ctx.stroke();
37. }
38. </script>
40. </head>
41. <body>
43. <div data-role="page" id = "intropage">
45. <div data-role="header">
46. <h1>Accelerometer</h1>
47. </div>
49. <div data-role="content">
50. <label for="sliderX">X Acceleration (Roll)</label>
51. <input type="range" name="sliderX" id="sliderX"
52. value="0" min="-10" max="10" data-theme="a" />
54. <label for="sliderY">Y Acceleration (Pitch)</label>
55. <input type="range" name="sliderY" id="sliderY"
56. value="0" min="-10" max="10" data-theme="b" />
58. <label for="sliderZ">Z Acceleration (<strike>Yaw</strike>
59. Face up/down)
60. </label>
61. <input type="range" name="sliderZ" id="sliderZ"
62. value="0" min="-10" max="10" data-theme="c" />
63. </div>
65. <p style = "text-align:center">SKY direction:
66. follow this line:</p>
67. <div style = "text-align:center;margin-top:10px;">
69. <canvas id="c" width="100" height="100"></canvas>
70. </div>
72. </div>
74. </body>
75. </html>
MOVE A BALL ON THE SCREEN

Try this example at JsBin : if using a mobile device, use this URL instead!

Code from this example:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6. <meta name="viewport" content="width=device-width,
7. target-densityDpi=device-dpi,
8. initial-scale=1.0,
9. user-scalable=no,
10. maximum-scale=1.0">
11. <title>iOS 4.2 Device Accellerometer</title>
12. <style>
13. body {
14. font-family:Arial, Helvetica, sans-serif;
15. font-size: 14px;
16. }
17. #board {
18. position:absolute;
19. left:0px;
20. right:0px;
21. top:0px;
22. bottom:0px;
23. }
24. #ball {
25. position:absolute;
26. width: 60px;
27. height: 60px;
28. border-radius: 30px;
29. background-image: -webkit-gradient(radial, 45% 45%, 5, 60% 60%,
30. 40, from(red), color-stop(75%, black), to(rgba(255, 255,255, 0)));
31. -webkit-box-shadow: 3px 3px 5px #888;
32. }
33. </style>
34. <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
35. </script>
36. <script>
37. !window.jQuery && document.write('<script src="./js/jquery.min.js"><\/script>')
38. </script>
39. <script>
40. var offset;
41. var velocity;
42. var board;
43. var ball;
44. var interval;
46. $(document).ready(function() {
47. window.addEventListener("devicemotion", onDeviceMotion, false);
48. $('#timestamp').html(new Date().toString());
49. $('#status').html("Ready!");
51. velocity = {};
52. velocity.x = 0;
53. velocity.y = 0;
55. offset = {};
56. board = $('#board');
57. ball = $('#ball');
59. offset.left = (board.width() - ball.width()) / 2;
60. offset.top = (board.height() - ball.height()) / 2;
62. $('#ball').offset(offset);
63. interval = setInterval(updateBall, 25);
64. });
66. function onDeviceMotion(event) {
67. $('#timestamp').html(new Date().toString());
68. $('#status').html("Device Motion Event");
70. var eventDetails;
71. try {
72. var accel = event.accelerationIncludingGravity;
73. eventDetails = "accelerationIncludingGravity: {" +
74. "<br> x: " + accel.x +
75. "<br> y: " + accel.y +
76. "<br> z: " + accel.z +
77. "<br/>} <br/><br/>" +
78. "interval: " + event.interval;
79. updateVelocity(event);
80. } catch (e) {
81. eventDetails = e.toString();
82. }
84. $('#details').html(eventDetails);
85. }
87. var decay = .9;
88. var bounceDecay = .95;
89. var maxVelocity = 100;
91. function updateVelocity(event) {
92. velocity.x += event.accelerationIncludingGravity.x;
93. if (Math.abs(velocity.x) > maxVelocity) {
94. if (velocity.x > 0) velocity.x = maxVelocity;
95. else velocity.x = -maxVelocity;
96. }
98. velocity.y += event.accelerationIncludingGravity.y;
99. if (Math.abs(velocity.y) > maxVelocity) {
100. if (velocity.y > 0) velocity.y = maxVelocity;
101. else velocity.y = -maxVelocity;
102. }
103. }
105. function updateBall() {
106. if (offset.left <= -(ball.width() / 2)) {
107. velocity.x = Math.abs(velocity.x * bounceDecay);
108. } else if (offset.left >= (board.width() - (ball.width() / 2))) {
109. velocity.x = -Math.abs(velocity.x * bounceDecay);
110. } else {
111. velocity.x = parseInt(velocity.x);
112. velocity.x *= decay;
113. }
115. if (offset.top <= -(ball.height() / 2)) {
116. velocity.y = -Math.abs(velocity.y * bounceDecay);
117. } else if (offset.top >= (board.height() - (ball.height() / 2))) {
118. velocity.y = Math.abs(velocity.y * bounceDecay);
119. } else {
120. velocity.y = parseInt(velocity.y);
121. velocity.y *= decay;
122. }
124. offset.left += velocity.x;
125. offset.top -= velocity.y;
128. $('#ball').offset(offset);
129. }
130. </script>
131. </head>
133. <body>
134. <div id="timestamp"></div>
135. <div id="status"></div>
136. <div id="details"></div>
137. <div id="board">
138. <div id="ball"></div>
139. </div>spec: <a href="http://dev.w3.org/geo/api/spec-source-orientation.html" target="http://dev.w3.org/geo/api/spec-source-orientation.html">http://dev.w3.org/geo/api/spec-source-orientation.html</a>
141. </body>
143. </html>

EXTERNAL RESOURCES:

From the W3C specification: http://dev.w3.org/geo/api/spec-source-orientation.html#devicemotion
Article on html5Rocks.com about device orientation
Article on dev.opera.com about device motion and orientation

HTML5

Friday, April 8, 2016

HTML5 -The Orientation API

The Orientation API

INTRODUCTION

EXTERNAL RESOURCES:

The coordinate system and Euler angles

FIRST EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS Z AXIS BY `ALPHA` DEGREES, WITH `ALPHA` IN [0, 360]

SECOND EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS X AXIS BY `BETA`DEGREES, WITH `BETA` IN [-180, 180]

THIRD EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS Y AXIS BY `GAMMA` DEGREES, WITH `GAMMA` IN [-90, 90]

Get the different angles using the JavaScript HTML5 orientation API

TYPICAL USE

ANOTHER EXAMPLE THAT SHOWS HOW TO ORIENT THE HTML5 LOGO USING THE ORIENTATION API + CSS3 3D ROTATIONS

A SIMPLE LEVEL TOOL USING DEVICE ORIENTATION

OTHER INTERESTING USES: MIX ORIENTATION API AND WEBSOCKETS

The Device Motion API

INTRODUCTION

BASIC USAGE

BASICS ABOUT ACCELERATION

Example of acceleration values

Common steps

Common processing with acceleration values

COMPLETE EXAMPLES

Move the HTML5 logo

Interesting example that uses jQuery mobile

MOVE A BALL ON THE SCREEN

EXTERNAL RESOURCES:

No comments:

Post a Comment

Device in the initial position, with Earth (XYZ) and body (xyz) frames aligned.
Device rotated through angle alpha about z axis, with previous locations of x and y axes shown as x0and y0.

Device in the initial position, with Earth (XYZ) and body (xyz) frames aligned.
Device rotated through angle beta about new x axis, with previous locations of y and z axes shown as y0and z0.

Device in the initial position, with Earth (XYZ) and body (xyz) frames aligned.
Device rotated through angle gamma about new y axis, with previous locations of x and z axes shown as x0 and z0.

Friday, April 8, 2016

HTML5 -The Orientation API

The Orientation API

INTRODUCTION

EXTERNAL RESOURCES:

The coordinate system and Euler angles

FIRST EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS Z AXIS BY ALPHA DEGREES, WITH ALPHA IN [0, 360]

SECOND EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS X AXIS BY BETADEGREES, WITH BETA IN [-180, 180]

THIRD EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS Y AXIS BY GAMMA DEGREES, WITH GAMMA IN [-90, 90]

Get the different angles using the JavaScript HTML5 orientation API

TYPICAL USE

ANOTHER EXAMPLE THAT SHOWS HOW TO ORIENT THE HTML5 LOGO USING THE ORIENTATION API + CSS3 3D ROTATIONS

A SIMPLE LEVEL TOOL USING DEVICE ORIENTATION

OTHER INTERESTING USES: MIX ORIENTATION API AND WEBSOCKETS

The Device Motion API

INTRODUCTION

BASIC USAGE

BASICS ABOUT ACCELERATION

Example of acceleration values

Common steps

Common processing with acceleration values

COMPLETE EXAMPLES

Move the HTML5 logo

Interesting example that uses jQuery mobile

MOVE A BALL ON THE SCREEN

EXTERNAL RESOURCES:

No comments:

Post a Comment

FIRST EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS Z AXIS BY `ALPHA` DEGREES, WITH `ALPHA` IN [0, 360]

SECOND EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS X AXIS BY `BETA`DEGREES, WITH `BETA` IN [-180, 180]

THIRD EXAMPLE: ROTATE THE DEVICE FRAME AROUND ITS Y AXIS BY `GAMMA` DEGREES, WITH `GAMMA` IN [-90, 90]