การจับการเคลื่อนไหว(Event Motion) ของโทรศัพท์มือถือ (Smart Phone)

Devil Coding, Javascript

การจับการเครื่อนไหวหรือที่เรียกว่า Event Motion  ของโทรศัพท์มือถือมีมานานแล้ว  (แต่ผมเพิ่งรู้ไม่นานมานี้  ตกเทรนไปหลายขุมเลย ฮ่าๆ)  แต่ส่วนใหญ่นิยมใช้ในการทำ Application  บน  IOS หรือ Android ซะมากกว่า    แต่จริงๆแล้วใน Website ที่เปิดในมือถือแล้วใช้ Browser ในการอ่านก็สามารถทำได้

ซึ่งปัจจุบันก็มีหลายที่เช่นกันที่ได้เริ่มทำออกมาเป็นรูปร่าง  ในแบบต่างๆ  ซึ่งวิธีการก็ไม่ได้ซับซ้อนอะไรเพียงแค่มีการใช้  Event หลักๆ  2  Event  คือ
1.  deviceorientation  จะทำงานเมื่อมีการเปลี่ยนแกนโดยการหมุน  สามารถเขียนทดสอบได้ดังนี้

window.addEventListener('deviceorientation', function(event) {
  var alpha = event.alpha;
  var beta = event.beta;
  var gamma = event.gamma;
  // Do something
}, false);

2.  devicemotion  จะทำงานเมื่อมีการเคลื่อนไหว  สามารถเขียนทดสอบได้ดังนี้

window.addEventListener('devicemotion', function(event) {
  var x = event.acceleration.x;
  var y = event.acceleration.y;
  var z = event.acceleration.z;
 
  var ralpha = event.rotationRate.alpha;
  var rbeta = event.rotationRate.beta;
  var rgamma = event.rotationRate.gamma;
 
  var interval = event.interval;
});

Simple :  http://uptoyou.life/other/test/mobile_motion.php (แสดงผลเฉพาะใน Smart phone หรือ Tab เท่านั่นนะครับ)

เราสามารถนำวิธีเหล่านี้ไปประยุกค์ใช้ทำสิ่งต่างๆได้มากมายโดยการเขียนเพียงแค่  Javascript ไม่จำเป็นต้องเขียน Application  เช่นเวปเข็มทิศ

<DOCTYPE html>
<html>
  <head>
    <style>
      #compass{
        width:100%;
        transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
      }
    </style>
    <script>
      function init() {
        var compass = document.getElementById('compass');
        if(window.DeviceOrientationEvent) {
 
          window.addEventListener('deviceorientation', function(event) {
                var alpha;
                //Check for iOS property
                if(event.webkitCompassHeading) {
                  alpha = event.webkitCompassHeading;
                  //Rotation is reversed for iOS
                  compass.style.WebkitTransform = 'rotate(-' + alpha + 'deg)';
                }
                //non iOS
                else {
                  alpha = event.alpha;
                  webkitAlpha = alpha;
                  if(!window.chrome) {
                    //Assume Android stock (this is crude, but good enough for our example) and apply offset
                    webkitAlpha = alpha-270;
                  }
                }
 
                compass.style.Transform = 'rotate(' + alpha + 'deg)';
                compass.style.WebkitTransform = 'rotate('+ webkitAlpha + 'deg)';
                //Rotation is reversed for FF
                compass.style.MozTransform = 'rotate(-' + alpha + 'deg)'; 
              }, false);
        }
      }
    </script>
  </head>
  <body onload="init()">
    <div id="compassContainer">
      <img src="compass.jpg" id="compass"/>
    </div>
  </body>
</html>

Simple : http://uptoyou.life/other/test/mobile_motion_pin.php (แสดงผลเฉพาะใน Smart phone หรือ Tab เท่านั่นนะครับ)

เท่านี้ก็สามารถเพิ่มลุกเล่นต่างๆให้กับงานและแนวคิดใหม่ๆของเราได้แล้วนะครับ  ขอให้สนุกกับการใช้งานนะครับ ^^

อ้างอิง  : https://mobiforge.com/design-development/html5-mobile-web-device-orientation-events