اتجاه الجهاز والحركة

توفّر أحداث حركة الجهاز واتجاهه إمكانية الوصول إلى أدوات قياس السرعة والجيروسكوب والبوصلة المدمجة في الأجهزة الجوّالة.

يمكن استخدام هذه الأحداث لأغراض متعددة، مثل التحكّم في اتجاه أو سلوك شخصية في الألعاب. وعند استخدامها مع ميزة رصد الموقع الجغرافي، يمكن أن تساعد في إنشاء ميزة التنقّل بالاتّباع الدقيق للخطوات أو تقديم معلومات عن موقع جغرافي معيّن.

  • رصد الجهة العلوية من الجهاز واتجاه دورانه
  • تعرَّف على حالات الاستجابة لأحداث الحركة والاتجاه وكيفية الاستجابة لها.

أيّهما الجهة العلوية؟

لاستخدام البيانات التي يعرضها حدثا اتجاه الجهاز والحركة، من المهم فهم القيم المقدَّمة.

إطار إحداثيات الأرض

يتمّ محاذاة إطار إحداثيات الأرض، الموضّح بالقيم X وY وZ، استنادًا إلى الجاذبية والاتجاه المغناطيسي العادي.

نظام الإحداثيات
X يمثّل الاتجاه من الشرق إلى الغرب (حيث يكون الشرق موجبًا).
Y يمثّل الاتجاه من الشمال إلى الجنوب (حيث يكون الشمال موجبًا).
Z يمثّل الاتجاه للأعلى أو للأسفل، عموديًا على الأرض (حيث يكون الاتجاه للأعلى موجبًا).

إطار إحداثيات الجهاز

رسم توضيحي لإطار إحداثيات الجهاز
صورة توضيحية لإطار إحداثيات الجهاز

يتمّ محاذاة إطار إحداثيات الجهاز، الموضّح بالقيم x وy وz، استنادًا إلى مركز الجهاز.

نظام الإحداثيات
X في مستوى الشاشة، تكون موجبة إلى اليمين.
Y في مستوى الشاشة، تكون القيمة موجبة باتجاه الأعلى.
Z عمودي على الشاشة أو لوحة المفاتيح، موجب يمتد بعيدًا.

على الهاتف أو الجهاز اللوحي، يستند اتجاه الجهاز إلى اتجاه الشاشة المعتاد. بالنسبة إلى الهواتف والأجهزة اللوحية، يستند ذلك إلى وضع الجهاز عموديًا. بالنسبة إلى أجهزة الكمبيوتر المكتبي أو المحمول، يتم تحديد الاتجاه بالاستناد إلى لوحة المفاتيح.

بيانات التناوب

يتم عرض بيانات الدوران على شكل زاوية أويلر، التي تمثّل عدد درجات الفرق بين إطار إحداثيات الجهاز وإطار إحداثيات الأرض.

إصدار أولي

صورة توضيحية لقيمة ألفا في إطار إحداثيات الجهاز
صورة توضيحية لقيمة ألفا في إطار إحداثيات الجهاز

الدوران حول محور z تكون قيمة alpha هي 0° عندما يكون الجزء العلوي من الجهاز موجهًا نحو الشمال مباشرةً. عند تدوير الجهاز عكس عقارب الساعة، تزداد قيمة alpha.

إصدار تجريبي

صورة توضيحية لإطار إحداثيات الجهاز
صورة توضيحية للإصدار التجريبي في إطار إحداثيات الجهاز

الدوران حول محور x تكون قيمة beta هي 0° عندما يكون الجزء العلوي والسفلي من الجهاز على مسافة متساوية من سطح الأرض. تزداد القيمة عندما يتم إمالة الجزء العلوي من الجهاز باتجاه سطح الأرض.

غاما

صورة توضيحية لإطار إحداثيات الجهاز
صورة توضيحية لمعيار جاما في إطار إحداثيات الجهاز

الدوران حول المحور الصادي تكون قيمة 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 بالمتر في الثانية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;
}

بعد النقر على زر "ابدأ"، يُطلب من المستخدم القفز. خلال هذه الفترة، تخزِّن المحاولة القصوى (والدنيا) لقيم التسارع، وبعد القفزة، تُعلم المستخدم بأقصى تسارع.

ملاحظات