جهت گیری دستگاه & حرکت - جنبش

Pete LePage

رویدادهای حرکت و جهت گیری دستگاه دسترسی به شتاب سنج، ژیروسکوپ و قطب نما داخلی را در دستگاه های تلفن همراه فراهم می کند.

از این رویدادها می توان برای اهداف بسیاری استفاده کرد. در بازی، به عنوان مثال، برای کنترل جهت یا عمل یک شخصیت. هنگامی که با موقعیت جغرافیایی استفاده می شوند، می توانند به ایجاد ناوبری گام به گام دقیق تر یا ارائه اطلاعات در مورد یک مکان خاص کمک کنند.

خلاصه

• تشخیص دهید که کدام سمت دستگاه بالا است و دستگاه چگونه می چرخد.
• بیاموزید که چه زمانی و چگونه به رویدادهای حرکت و جهت گیری پاسخ دهید.

کدام پایان است؟

برای استفاده از داده هایی که جهت گیری دستگاه و رویدادهای حرکتی برمی گردند، درک مقادیر ارائه شده مهم است.

قاب مختصات زمین

چارچوب مختصات زمین، که با مقادیر X ، Y و Z توصیف شده است، بر اساس گرانش و جهت گیری مغناطیسی استاندارد تراز شده است.

قاب مختصات دستگاه

قاب مختصات دستگاه که با مقادیر x ، y و z توصیف شده است، بر اساس مرکز دستگاه تراز شده است.

در تلفن یا تبلت، جهت گیری دستگاه بر اساس جهت گیری معمولی صفحه نمایش است. برای گوشی‌ها و تبلت‌ها، بر اساس قرار گرفتن دستگاه در حالت عمودی است. برای رایانه های رومیزی یا لپ تاپ، جهت گیری نسبت به صفحه کلید در نظر گرفته می شود.

داده های چرخش

داده‌های چرخش به‌عنوان زاویه اویلر برگردانده می‌شوند که نشان‌دهنده تعداد درجه‌های اختلاف بین قاب مختصات دستگاه و قاب مختصات زمین است.

آلفا

چرخش حول محور z. مقدار alpha زمانی که بالای دستگاه مستقیماً به سمت شمال باشد 0 درجه است. با چرخاندن دستگاه در خلاف جهت عقربه های ساعت، مقدار alpha افزایش می یابد.

بتا

چرخش حول محور x زمانی که بالا و پایین دستگاه از سطح زمین فاصله داشته باشد، مقدار beta 0 درجه است. با انحراف بالای دستگاه به سمت سطح زمین، این مقدار افزایش می یابد.

گاما

چرخش حول محور y. زمانی که لبه های چپ و راست دستگاه از سطح زمین به یک اندازه فاصله داشته باشند، مقدار gamma 0 درجه است. با انحراف سمت راست به سمت سطح زمین، این مقدار افزایش می یابد.

جهت گیری دستگاه

رویداد جهت‌گیری دستگاه، داده‌های چرخش را برمی‌گرداند، که شامل میزان خم شدن دستگاه به جلو، پهلو به پهلو، و اگر تلفن یا لپ‌تاپ قطب‌نما داشته باشد، جهت دستگاه رو به رو است.

کم استفاده کنید. تست پشتیبانی رابط کاربری را در هر رویداد جهت‌گیری به‌روزرسانی نکنید. در عوض، با 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 بر حسب m/sec ² ارائه شده است. از تفاوت های بین پیاده سازی مرورگر آگاه باشید.

زمان استفاده از رویدادهای حرکتی دستگاه

چندین کاربرد برای رویدادهای حرکتی دستگاه وجود دارد. به عنوان مثال می توان به موارد زیر اشاره کرد:

• برای تازه کردن داده ها، اشاره را تکان دهید.
• در بازی ها، برای ایجاد پرش یا حرکت شخصیت ها.
• برای برنامه های سلامتی و تناسب اندام.

پشتیبانی را بررسی کنید و به رویدادها گوش دهید

برای گوش دادن به DeviceMotionEvent ، ابتدا بررسی کنید که آیا رویدادها در مرورگر پشتیبانی می‌شوند. سپس یک شنونده رویداد را به شی window ای که به رویدادهای devicemotion گوش می دهد متصل کنید.

if (window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout(stopJump, 3 * 1000);
}

رویدادهای حرکت دستگاه را مدیریت کنید

رویداد حرکت دستگاه در یک بازه زمانی منظم فعال می شود و داده های مربوط به چرخش (بر حسب درجه در ثانیه) و شتاب (بر حسب متر بر ثانیه ² ) دستگاه را در آن لحظه از زمان برمی گرداند. برخی از دستگاه‌ها سخت‌افزاری برای حذف اثر گرانش ندارند.

این رویداد چهار ویژگی را برمی‌گرداند، accelerationIncludingGravity ، acceleration ، که اثرات گرانش، rotationRate و interval را حذف می‌کند.

به عنوان مثال، بیایید نگاهی به تلفنی بیندازیم که روی یک میز صاف دراز کشیده و صفحه نمایش آن رو به بالا است.

برعکس، اگر گوشی را طوری نگه داشتید که صفحه نمایش عمود بر زمین بود و مستقیماً برای بیننده قابل مشاهده بود:

نمونه: محاسبه حداکثر شتاب یک جسم

یکی از راه‌های استفاده از رویدادهای حرکتی دستگاه، محاسبه حداکثر شتاب یک جسم است. به عنوان مثال، حداکثر شتاب یک فرد در حال پریدن چقدر است؟

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;
}

پس از ضربه زدن روی Go! دکمه، به کاربر گفته می شود که بپرد. در طول این مدت، صفحه مقادیر حداکثر (و حداقل) شتاب را ذخیره می کند و پس از پرش، حداکثر شتاب خود را به کاربر می گوید.

بازخورد