تتيح أحداث حركة الجهاز واتجاهه الوصول إلى مقياس التسارع والجيروسكوب والبوصلة المضمّنة في الأجهزة الجوّالة.
يمكن استخدام هذه الأحداث لأغراض عديدة، في الألعاب مثلاً، للتحكّم في اتجاه أو حركة شخصية ما. عند استخدامها مع تحديد الموقع الجغرافي، يمكن أن تساعد في إنشاء اتجاهات مفصّلة أكثر دقة أو تقديم معلومات حول موقع جغرافي معيّن.
ملخّص
- رصد أي جانب من الجهاز يتجه للأعلى وكيفية تدوير الجهاز
- تعرَّف على حالات الاستجابة لأحداث الحركة والاتجاه وكيفية الاستجابة لها.
أي طرف هو الأعلى؟
لاستخدام البيانات التي تعرضها أحداث اتجاه الجهاز وحركته، من المهم فهم القيم المقدَّمة.
إطار إحداثيات الأرض
يتم محاذاة إطار إحداثيات الأرض، الموضَّح بالقيم X وY وZ،
استنادًا إلى الجاذبية والاتجاه المغناطيسي العادي.
| نظام الإحداثيات | |
|---|---|
X |
يمثّل الاتجاه من الشرق إلى الغرب (حيث يكون الشرق موجبًا). |
Y |
تمثّل الاتجاه بين الشمال والجنوب (حيث يكون الشمال موجبًا). |
Z |
يمثّل الاتجاه من الأعلى إلى الأسفل، بشكل عمودي على الأرض (حيث يكون الاتجاه للأعلى موجبًا). |
إطار إحداثيات الجهاز
يتم محاذاة إطار إحداثيات الجهاز، الموضَّح بالقيم x وy وz،
استنادًا إلى مركز الجهاز.
| نظام الإحداثيات | |
|---|---|
X |
في مستوى الشاشة، تكون القيمة موجبة إلى اليمين. |
Y |
في مستوى الشاشة، تكون القيمة موجبة باتجاه الأعلى. |
Z |
عمودي على الشاشة أو لوحة المفاتيح، ويمتد بشكل إيجابي بعيدًا. |
على الهاتف أو الجهاز اللوحي، يعتمد اتجاه الجهاز على الاتجاه المعتاد للشاشة. بالنسبة للهواتف والأجهزة اللوحية، يعتمد ذلك على كون الجهاز في وضع "بورتريه". بالنسبة إلى أجهزة الكمبيوتر المكتبية أو المحمولة، يتم تحديد الاتجاه بالنسبة إلى لوحة المفاتيح.
بيانات التدوير
يتم عرض بيانات التدوير على شكل زاوية أويلر، وتمثّل عدد درجات الاختلاف بين إطار إحداثيات الجهاز وإطار إحداثيات الأرض.
إصدار أولي
تمثّل هذه السمة الدوران حول المحور z. تكون قيمة alpha هي 0 درجة عندما يكون الجزء العلوي من
الجهاز موجَّهًا نحو الشمال مباشرةً. عند تدوير الجهاز عكس اتجاه عقارب الساعة،
تزداد قيمة alpha.
إصدار تجريبي
تمثّل هذه السمة الدوران حول المحور x. تكون قيمة beta هي 0 درجة عندما يكون الجزء العلوي والسفلي من الجهاز على مسافة متساوية من سطح الأرض. وتزداد القيمة كلما تم إمالة الجزء العلوي من الجهاز نحو سطح الأرض.
Gamma
تمثّل هذه السمة الدوران حول المحور ص. تكون قيمة gamma هي 0 درجة عندما تكون الحافتان اليسرى واليمنى للجهاز على مسافة متساوية من سطح الأرض. وتزداد القيمة كلما مال الجانب الأيمن نحو سطح الأرض.
اتجاه الجهاز
يعرض حدث اتجاه الجهاز بيانات التدوير، والتي تتضمن مقدار ميل الجهاز من الأمام إلى الخلف، ومن جانب إلى آخر، وإذا كان الهاتف أو الكمبيوتر المحمول يحتوي على بوصلة، الاتجاه الذي يواجهه الجهاز.
يُنصح باستخدام هذه الفئة باعتدال.
اختبِر مدى توفّر الميزة.
لا تعدِّل واجهة المستخدم في كل حدث اتجاه، بل يمكنك المزامنة مع requestAnimationFrame.
حالات استخدام أحداث اتجاه الجهاز
هناك عدة استخدامات لأحداث اتجاه الجهاز. تشمل الأمثلة ما يلي:
- تعديل الخريطة أثناء تحرّك المستخدم
- تعديلات طفيفة على واجهة المستخدم، مثل إضافة تأثيرات اختلاف المنظر
- ويمكن استخدامها مع ميزة تحديد الموقع الجغرافي للحصول على اتجاهات مفصّلة.
التحقّق من توفّر الدعم والاستماع إلى الأحداث
للاستماع إلى DeviceOrientationEvent، تحقَّق أولاً مما إذا كان المتصفّح متوافقًا مع الأحداث. بعد ذلك، أضِف متتبِّع أحداث إلى العنصر window الذي يتتبّع أحداث deviceorientation.
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', deviceOrientationHandler, false);
document.getElementById('doeSupported').innerText = 'Supported!';
}
التعامل مع أحداث اتجاه الجهاز
يتم تنشيط حدث اتجاه الجهاز عندما يتحرك الجهاز أو يغير اتجاهه. وتعرض هذه الواجهة بيانات حول الفرق بين الجهاز في موضعه الحالي بالنسبة إلى إطار الإحداثيات الأرضية.
يعرض الحدث عادةً ثلاث سمات: alpha وbeta وgamma. في متصفّح Safari على الأجهزة الجوّالة، يتم عرض مَعلمة إضافية
webkitCompassHeading
مع اتجاه البوصلة.
حركة الجهاز
يعرض حدث اتجاه الجهاز بيانات التدوير، والتي تتضمن مقدار ميل الجهاز من الأمام إلى الخلف، ومن جانب إلى آخر، وإذا كان الهاتف أو الكمبيوتر المحمول يحتوي على بوصلة، الاتجاه الذي يواجهه الجهاز.
استخدِم حركة الجهاز عندما تكون الحركة الحالية للجهاز مطلوبة.
يتم توفير rotationRate بالدرجة في الثانية.
يتم توفير acceleration وaccelerationWithGravity بالمتر في الثانية2.
يُرجى الانتباه إلى الاختلافات بين عمليات التنفيذ في المتصفّحات.
حالات استخدام أحداث حركة الجهاز
هناك عدة استخدامات لأحداث حركة الجهاز. تشمل الأمثلة ما يلي:
- إيماءة تحريك الجهاز بسرعة لتحديث البيانات.
- في الألعاب، لجعل الشخصيات تقفز أو تتحرك.
- للتطبيقات المتعلّقة بالصحة واللياقة البدنية:
التحقّق من توفّر الدعم والاستماع إلى الأحداث
للاستماع إلى DeviceMotionEvent، تحقَّق أولاً لمعرفة ما إذا كانت الأحداث
متوافقة مع المتصفّح. بعد ذلك، أضِف متتبِّع أحداث إلى العنصر window
الذي يتتبّع أحداث devicemotion.
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler);
setTimeout(stopJump, 3 * 1000);
}
التعامل مع أحداث حركة الجهاز
يتم تنشيط حدث حركة الجهاز على فترات منتظمة ويعرض بيانات حول الدوران (بالدرجة/الثانية) والتسارع (بالمتر/الثانية2) للجهاز في تلك اللحظة. لا تحتوي بعض الأجهزة على الأجهزة لاستبعاد تأثير الجاذبية.
يعرض الحدث أربع سمات، وهي
accelerationIncludingGravity
وacceleration، التي تستبعد تأثيرات
الجاذبية، وrotationRate وinterval.
على سبيل المثال، لنلقِ نظرة على هاتف موضوع على طاولة مسطّحة، مع توجيه شاشته للأعلى.
| ولاية | تدوير | التسارع (م/ث2) | التسارع مع الجاذبية (متر/ثانية2) |
|---|---|---|---|
| لا يتحرّك | [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] |
في المقابل، إذا تم حمل الهاتف بحيث تكون الشاشة عمودية على الأرض، وكانت مرئية مباشرة للمشاهد:
| ولاية | تدوير | التسارع (م/ث2) | التسارع مع الجاذبية (متر/ثانية2) |
|---|---|---|---|
| لا يتحرّك | [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] | [5, 5, 0] | [5, 14.81, 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;
}
بعد النقر على زر "انطلاق"، يُطلب من المستخدم القفز. خلال ذلك الوقت، تخزّن الصفحة قيم التسارع القصوى (والدنيا)، وبعد القفزة، تخبر المستخدم بأقصى تسارع له.