رویدادهای جهت و حرکت دستگاه امکان دسترسی به شتاب‌سنج، ژیروسکوپ، و قطب‌نمای داخلی را در دستگاه‌های همراه فراهم می‌کند.
از این رویدادها می‌توان برای اهداف زیادی استفاده کرد؛ برای مثال، در بازی، برای کنترل جهت یا کنش یک شخصیت. وقتی از این حسگرها به‌همراه مکان‌یابی جغرافیایی استفاده شود، می‌توانند به ایجاد ناوبری گام‌به‌گام دقیق‌تر یا ارائه اطلاعات درباره مکانی خاص کمک کنند.
خلاصه
- تشخیص اینکه کدام طرف دستگاه بالا است و دستگاه چگونه می‌چرخد.
- با زمان و نحوه پاسخ دادن به رویدادهای حرکت و جهت آشنا شوید.
کدام طرف بالا است؟
برای استفاده از داده‌هایی که رویدادهای جهت و حرکت دستگاه برمی‌گردانند، مهم است که مقادیر ارائه‌شده را درک کنید.
قاب مختصات زمین
قاب مختصات زمین، که با مقادیر X، Y، و Z توصیف می‌شود،
براساس گرانش و جهت مغناطیسی استاندارد تراز می‌شود.
| سیستم مختصات | |
|---|---|
X |
جهت شرق-غرب را نشان می‌دهد (که شرق مثبت است). |
Y |
جهت شمال-جنوب را نشان می‌دهد (که شمال مثبت است). |
Z |
جهت بالا-پایین را نشان می‌دهد، عمود بر زمین (که بالا مثبت است). |
قاب مختصات دستگاه
قاب مختصات دستگاه، که با مقادیر x، y، و z توصیف می‌شود، براساس مرکز دستگاه تراز می‌شود.
| سیستم مختصات | |
|---|---|
X |
در صفحه نمایشگر، مثبت به‌سمت راست. |
Y |
در صفحه نمایش، مثبت به‌سمت بالا. |
Z |
عمود بر صفحه‌نمایش یا صفحه‌کلید، با گسترش مثبت به سمت بیرون. |
در تلفن یا رایانه لوحی، جهت دستگاه براساس جهت معمول صفحه‌نمایش است. برای تلفن‌ها و رایانه‌های لوحی، این مورد براساس قرار داشتن دستگاه در حالت عمودی است. برای رایانه‌های رومیزی یا رایانه‌های کیفی، جهت نسبت به صفحه‌کلید درنظر گرفته می‌شود.
داده‌های چرخش
داده‌های چرخش به‌صورت زاویه اویلر برگردانده می‌شود، که نشان‌دهنده تعداد درجات تفاوت بین قاب مختصات دستگاه و قاب مختصات زمین است.
آلفا
چرخش حول محور z. وقتی بالای دستگاه مستقیماً به‌سمت شمال باشد، مقدار alpha برابر با ۰ درجه است. وقتی دستگاه پادساعتگرد می‌چرخد،
مقدار alpha افزایش می‌یابد.
بتا
چرخش حول محور x. وقتی بالا و پایین دستگاه فاصله یکسانی از سطح زمین داشته باشند، مقدار beta برابر با ۰ درجه است. با کج شدن بالای دستگاه به‌سمت سطح زمین، مقدار
افزایش می‌یابد.
گاما
چرخش حول محور y. وقتی لبه‌های چپ و راست دستگاه فاصله یکسانی از سطح زمین داشته باشند، مقدار gamma برابر با ۰ درجه است. با کج شدن سمت راست به‌سمت سطح زمین، مقدار
افزایش می‌یابد.
جهت دستگاه
رویداد جهت دستگاه داده‌های چرخش را برمی‌گرداند، که شامل میزان خم شدن دستگاه از جلو به عقب، از پهلو به پهلو، و اگر تلفن یا رایانه کیفی قطب‌نما داشته باشد، جهتی که دستگاه رو به آن است می‌شود.
به‌ندرت استفاده کنید.
آزمایش برای پشتیبانی.
رابط کاربری را در هر رویداد جهت به‌روز نکنید؛ درعوض، با requestAnimationFrame همگام‌سازی کنید.
چه زمانی از رویدادهای جهت دستگاه استفاده کنیم
رویدادهای جهت دستگاه کاربردهای متعددی دارند. نمونه‌ها شامل موارد زیر است:
- به‌روزرسانی نقشه با حرکت کاربر.
- تغییرات جزئی در واسط کاربر، برای مثال، افزودن جلوه‌های اختلاف منظر.
- در ترکیب با موقعیت جغرافیایی، می‌تواند برای ناوبری گام‌به‌گام استفاده شود.
بررسی پشتیبانی و گوش دادن به رویدادها
برای گوش دادن به DeviceOrientationEvent، ابتدا بررسی کنید که آیا مرورگر از رویدادها پشتیبانی می‌کند یا نه. سپس، یک شنونده رویداد را به شیء window که به رویدادهای deviceorientation گوش می‌دهد، متصل کنید.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
رسیدگی به رویدادهای جهت دستگاه
رویداد جهت دستگاه زمانی فعال می‌شود که دستگاه حرکت کند یا جهت آن تغییر کند. این حسگر داده‌هایی درباره تفاوت بین دستگاه در موقعیت فعلی‌اش نسبت‌به قاب مختصات زمین برمی‌گرداند.
این رویداد معمولاً سه ویژگی را برمی‌گرداند: alpha،
beta، و gamma. در Mobile Safari، پارامتر دیگری
webkitCompassHeading
با جهت قطب‌نما برگردانده می‌شود.
حرکت دستگاه
رویداد جهت دستگاه داده‌های چرخش را برمی‌گرداند، که شامل میزان خم شدن دستگاه از جلو به عقب، از پهلو به پهلو، و اگر تلفن یا رایانه کیفی قطب‌نما داشته باشد، جهتی که دستگاه رو به آن است می‌شود.
از حرکت دستگاه برای زمانی که حرکت فعلی دستگاه موردنیاز است استفاده کنید.
rotationRate برحسب درجه/ثانیه ارائه می‌شود.
acceleration و accelerationWithGravity برحسب متر/ثانیه۲ ارائه می‌شوند.
از تفاوت‌های بین پیاده‌سازی‌های مرورگر آگاه باشید.
چه زمانی از رویدادهای حرکتی دستگاه استفاده کنیم
رویدادهای حرکت دستگاه کاربردهای مختلفی دارد. نمونه‌ها شامل موارد زیر است:
- برای بازآوری داده‌ها، اشاره تکان دادن را انجام دهید.
- در بازی‌ها، برای اینکه شخصیت‌ها بپرند یا حرکت کنند.
- برای برنامه‌های سلامتی و تناسب اندام.
بررسی پشتیبانی و گوش دادن به رویدادها
برای گوش دادن به DeviceMotionEvent، ابتدا بررسی کنید که آیا رویدادها در مرورگر پشتیبانی می‌شوند یا نه. سپس یک شنونده رویداد را به شیء window که به رویدادهای devicemotion گوش می‌دهد، متصل کنید.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
مدیریت رویدادهای حرکتی دستگاه
رویداد حرکت دستگاه در فواصل زمانی منظم فعال می‌شود و داده‌های مربوط به چرخش (برحسب درجه/ثانیه) و شتاب (برحسب متر/ثانیه۲) دستگاه را در آن لحظه برمی‌گرداند. برخی‌از دستگاه‌ها سخت‌افزار لازم برای مستثنی کردن اثر جاذبه را ندارند.
این رویداد چهار ویژگی را برمی‌گرداند:
accelerationIncludingGravity،
acceleration که اثرات
جاذبه را مستثنی می‌کند، rotationRate، و interval.
برای مثال، بیایید به تلفنی نگاه کنیم که روی میز صافی قرار دارد و صفحه‌نمایش آن رو به بالا است.
| ایالت | چرخش | شتاب (متر بر مجذور ثانیه) | شتاب با گرانش (متر بر مجذور ثانیه) |
|---|---|---|---|
| حرکت نمی‌کند | [0, 0, 0] | [0, 0, 0] | [0, 0, 9.8] |
| درحال حرکت به‌سمت آسمان | [0, 0, 0] | [0, 0, 5] | [0, 0, 14.81] |
| فقط به راست حرکت می‌کند | [0, 0, 0] | [3, 0, 0] | [3, 0, 9.81] |
| حرکت به بالا و سمت راست | [0, 0, 0] | [5, 0, 5] | [5, 0, 14.81] |
برعکس، اگر تلفن طوری نگه داشته شود که صفحه‌نمایش عمود بر زمین باشد و مستقیماً برای بیننده قابل‌مشاهده باشد:
| ایالت | چرخش | شتاب (متر بر مجذور ثانیه) | شتاب با گرانش (متر بر مجذور ثانیه) |
|---|---|---|---|
| حرکت نمی‌کند | [0, 0, 0] | [0, 0, 0] | [0, 9.81, 0] |
| درحال حرکت به‌سمت آسمان | [0, 0, 0] | [0, 5, 0] | [0, 14.81, 0] |
| فقط به راست حرکت می‌کند | [0, 0, 0] | [3, 0, 0] | [3, 9.81, 0] |
| حرکت به بالا و سمت راست | [0, 0, 0] | [۵, ۵, ۰] | [۵، ۱۴.۸۱، ۰] |
نمونه: محاسبه حداکثر شتاب جسم
یکی از راه‌های استفاده از رویدادهای حرکت دستگاه، محاسبه حداکثر شتاب یک شیء است. برای مثال، حداکثر شتاب فردی که می‌پرد چقدر است؟
if (evt.acceleration.x > jumpMax.x) {
jumpMax.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
jumpMax.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
jumpMax.z = evt.acceleration.z;
}
پس‌از ضربه زدن روی دکمه «برو!»، به کاربر گفته می‌شود که بپرد. درطول آن مدت، صفحه حداکثر (و حداقل) مقادیر شتاب را ذخیره می‌کند و پس‌از پرش، حداکثر شتاب را به کاربر می‌گوید.