Use HTML5 to shake mobile phones.

At the Baidu Developer Conference, I introduced another important feature of HTML5, deviceorientation. It encapsulates the underlying direction sensors and motion sensors in advanced mode and provides DOM Event support. This feature includes two types of events:

1. deviceorientation: encapsulates the event of the direction sensor data to obtain the direction data in the mobile phone's static state, such as the angle, orientation, and orientation of the mobile phone.

2. devicemotion: events that encapsulate motion sensor data can be used to obtain Motion Acceleration and other data in the mobile phone's motion status.

Using it, we can easily implement interesting functions such as gravity sensing and compass, which will be very useful on mobile phones. For example, the gravity sensor ball in opera H5 is implemented by listening to the deviceorientation event of the deviceorientation API.

 

In fact, it can also help us implement a very common and fashionable function in a mobile app on the webpage: Shake the mobile phone.

I first saw this feature in photoshake. Later, many, large, and small applications included this feature.

 

Photoshake: Shake the photo

If you have developed Android or IOS, you may be familiar with such functions. However, we will implement this function for the first time on the web.

Let's get started!

Devicemotionevent (device motion event) returns information about the device's acceleration and rotation. The acceleration data will contain three axes: X, Y, and Z (as shown in the diagram, the X axis horizontally runs through the mobile phone screen or notebook keyboard, and the Y axis vertically runs through the mobile phone screen or notebook keyboard, Z axis perpendicular to the mobile phone screen or laptop keyboard ). Because some devices may not have hardware to eliminate the impact of gravity, this event will return two attributes, accelerationincludinggravity (acceleration containing gravity) and acceleration (acceleration), which exclude the impact of gravity.

For deviceorientation, there is a detailed introduction Article "this end up: Using device orientation" on html5rocks, which is of great reference value.

Let's first listen to motion sensing events.

 

[HTML]View plaincopyprint?

1. If (window. devicemotionevent ){
2. Window. addeventlistener ('deviceid', devicemotionhandler, false );
3. }

If (window. devicemotionevent) {<br/> window. addeventlistener ('devicemotion', devicemotionhandler, false); <br/>}

 

Then obtain the acceleration of gravity.

 

[HTML]View plaincopyprint?

1. Function devicemotionhandler (eventdata ){
2. VaR acceleration = eventdata. accelerationincludinggravity;
3. }

Function devicemotionhandler (eventdata) {<br/> var acceleration = eventdata. accelerationincludinggravity; <br/>}

 

The following describes how users shake their mobile phones. The main considerations are as follows:

1. Most users shake mobile phones in one direction;

2. When shaking, the acceleration data in the three directions must change;

3. We cannot misjudge the normal motion of a mobile phone. Think about it. If your mobile phone is placed in your trouser pocket, it will also change the acceleration data when walking.

To sum up, we should calculate the acceleration in three directions, measure them at intervals, evaluate their change rate in a fixed period of time, and determine a threshold for it to trigger the action.

We need to define several variables to record the data of X, Y, and Z axes and the last trigger time. The core method implementation code is as follows:

 

[HTML]View plaincopyprint?

1. VaR shake_threshold = xxx;
2. VaR last_update = 0;
3. VaR X, Y, Z, last_x, last_y, last_z;
5. Function devicemotionhandler (eventdata ){
6. VaR acceleration = eventdata. accelerationincludinggravity;
8. VaR curtime = newdate (). gettime ();
10. If (curtime-lastupdate) & gt; 100 ){
12. VaR difftime = curtime-last_update;
13. Last_update = curtime;
15. X = acceleration. X;
16. Y = acceleration. Y;
17. Z = acceleration. Z;
19. VaR speed = math. Abs (x + y + Z-last_x-last_y-last_z)/difftime x 10000;
21. If (speed> shake_threshold ){
22. Alert ("shaked! ");
23. }
24. Last_x = X;
25. Last_y = y;
26. Last_z = z;
27. }
28. }

VaR shake_threshold = xxx; <br/> var last_update = 0; <br/> var X, Y, Z, last_x, last_y, last_z; </P> <p> function devicemotionhandler (eventdata) {<br/> var acceleration = eventdata. accelerationincludinggravity; </P> <p> var curtime = newdate (). gettime (); </P> <p> If (curtime-lastupdate)> 100) {</P> <p> var difftime = curtime-last_update; <br/> last_update = curtime; </P> <p> X = acceleration. x; <br/> Y = Acceleration. y; <br/> Z = acceleration. z; </P> <p> var speed = math. ABS (x + y + Z-last_x-last_y-last_z)/difftime * 10000; </P> <p> If (speed> shake_threshold) {<br/> alert ("shaked! "); <Br/>}< br/> last_x = x; <br/> last_y = y; <br/> last_z = z; <br/>}< br/>}

 

As a result, we have completed the mobile phone shake function, isn't it very simple? You can view the demo through the link below (Please open it in a browser that supports deviceorientation on your mobile phone, for example, opera HTML5 experience edition ).