Mobil HTML5 rázás esemény

Posted by | · · · | Webstar Works | Nincs hozzászólás a(z) Mobil HTML5 rázás esemény bejegyzéshez

Korábban is írtam már az interaktív EPUB3 fejlesztésről HTML5/JavaScript/CSS3 alapokon. Az előző bejegyzésemmel ellentétben, most nem egy hibáról, hanem egy megoldásról írok.

“Shake dat… device”

download (1)
Hogyan lehet, és el lehet-e egyáltalán kapni egy mobil készülék megrázásának esemémnyét? Egzakt megoldásra nem találtam, kizárólag az eszköz elforgatásának, döntésének kezeléséről volt dokumentáció. Ezek adták az ötletet a következő megoldásra, amely alkalmas arra, hogy kezelje a rázás eseményét. A mozgás minimális (ez a minimum megadható) érzékelési küszöbét meghaladva az általunk megadott akciók, animációk hajtódnak végre. Ez a megoldás iOS és Android eszközökön is tökéletesen működik a HTML5 képes böngészőkben:

if(window.DeviceOrientationEvent){
   var threshold = 40; //finom hangolható
   var last_state = {
      gamma: 0,
      beta: 0,
      alpha: 0
   };

   var onOrientationChange = function(event){
      var state = {
         gamma: event.gamma,
         beta: event.beta,
         alpha: event.alpha
      };
      var diff = Math.abs(state.gamma - last_state.gamma)
                  + Math.abs(state.beta - last_state.beta)
                  + Math.abs(state.alpha - last_state.alpha);
      if(diff >= threshold){
         /*
         Itt csinálhatunk valamit
         ha az eszköz jobban meg lett rázva mint a küszöb érték
         */
         console.log('Megráztak!');
      }
      last_state = state;
   };

   window.addEventListener('deviceorientation', onOrientationChange, false);
}
else{
   //Itt kezelhetjük a mobil eszközzel nem rendelkező felhasználókat
}

Kipróbálható demo itt érhető el.

Annyi megjegyzendő, hogy mindez megvalósítható a window.DeviceMotionEvent segítségével is,  ami gyorsulási adatokat szolgáltat és így ésszerű választás lenne (mert a rázás gyakorlatilag gyorsulás változás), DE ez az esemény-típus a tesztelt Android eszközökön nem támogatott, ellentétben a window.DeviceOrientationEvent típussal, így átalakítottam a megoldást az utóbbi használatára.


No Comments

Leave a comment