» » Mobile phone gravity and direction sensing applications by HTML5 - shaking effect

 

Mobile phone gravity and direction sensing applications by HTML5 - shaking effect

Author: bamboo06 on 9-04-2015, 22:47, views: 3809

4
HTML5 has an important feature: DeviceOrientation, it is the underlying direction and motion sensors were advanced packaging, it allows us to easily achieve interesting features gravity sensor, compass and so on. This article will tell you with examples using HTML5 motion and direction of gravity sensors to achieve the phone a shake effect.

DeviceOrientation has two events:
1, deviceOrientation: encapsulates the incident direction of the sensor data, you can still get the direction of the data on the phone state, such as mobile phones which angle, position, orientation and so on.
2, deviceMotion: encapsulates the event the motion sensor data, you can get the sports movement acceleration phone state and other data.

HTML
There is a div # hand, to place a hand in the picture on the page, div # result is used to display the results of information after shaking.
<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div> 

We can use CSS3 to enhance the results page, use the -webkit-animation animation dynamic effects of hand picture details, please download the source code view.

javascript
"Shake" the action that is "within a certain period of time the device a certain distance," so shaking acquired by devicemotion monitoring equipment x, y, z-axis values of the rate of change within a certain time frame, that is to determine whether the device has carried out shaking. In order to prevent the normal movement of miscarriage of justice, the rate of change needs to set an appropriate threshold.
Judgment means shaking HTML5 code we use already packaged shake.js, Project address is: https: //github.com/alexgibson/shake.js.
<script src="shake.js"></script> 

First instantiate Shake, then start listening device movement, movement monitoring equipment, callback listener result: shakeEventDidOccur.
window.onload = function() {
    var myShakeEvent = new Shake({
        threshold: 15
    });

    myShakeEvent.start();

    window.addEventListener('shake', shakeEventDidOccur, false);

    function shakeEventDidOccur () {
		var result = document.getElementById("result");
		result.className = "result";
		var arr = ['Thinkpad Notebook','Iphone6 Plus','Great dinner','Football'];
		var num = Math.floor(Math.random()*4);
		result.innerHTML = "Congratulations, you get "+arr[num]+"!";
		setTimeout(function(){
            result.className = "result result-show";
        }, 1000);
    }
};

Here, the function shake Event Did Occur () can be customized, in this case the result is returned after shaking displayed on the page, see the DEMO demonstration.

Category: Javascript / Mobile / HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
26 April 2017 01:36

bismilahallah

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This sensing is very good and I’ve been using it for my mobile as well. I read about it from http://www.ninjaessays.org/, and the method is working very good and you should also try it. It’s efficient.

<
  • 0 Comments
  • 0 Articles
25 July 2017 14:54

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
it's really nice and meanful. it's really cool blog. Linking is very useful thing.you have really helped lots of people who visit blog and provide them usefull information. Questions

<
  • 0 Comments
  • 0 Articles
15 November 2017 03:31

Agustin james

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
HTML5 has security features which are much capable to be improved. I was reading the edu birdie review and I got to know in just how many ways could it be done. So I hope it's worked upon as soon as possible.

<
  • 0 Comments
  • 0 Articles
4 March 2018 23:42

Henry

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
If you ever thought that HTML can be used only for websites, think again. Given the latest technological advancements, HTML is successfully used in mobile applications and the motion sensor is perhaps the best example in this regard. Technology made some improvements for the rf directional coupler as well, delivering a more reliable and effective product on the market, which is slowly becoming an important addition in any home or company.

Information
Comment on the news site is possible only within (days) days from the date of publication.