כיוון המכשיר & תנועה

Pete LePage

אירועי תנועה וכיוון של המכשיר מספקים גישה למדדי ה-accelerometer, ה-gyroscope והמצפן המובנים במכשירים ניידים.

אפשר להשתמש באירועים האלה למטרות רבות. למשל, במשחקים, כדי לשלוט בכיוון או בפעולה של דמות. כשמשתמשים בהם בשילוב עם מיקום גיאוגרפי, הם יכולים לעזור ליצור מסלול ניווט מדויק יותר עם מסלול מפורט או לספק מידע על מיקום ספציפי.

סיכום

  • זיהוי הצד העליון של המכשיר ואופן הסיבוב שלו.
  • מתי ואיך מגיב לאירועי תנועה וכיוון.

איזה קצה למעלה?

כדי להשתמש בנתונים שמוחזרים על ידי אירועי התנועה והכיוון של המכשיר, חשוב להבין את הערכים שמוצגים.

מסגרת קואורדינטות של כדור הארץ

מסגרת הקואורדינטות של כדור הארץ, שמתוארת על ידי הערכים X,‏ Y ו-Z, מותאמת על סמך כוח הכבידה והכיוון המגנטי הרגיל.

מערכת קואורדינטות
X מייצג את הכיוון מזרח-מערב (כאשר מזרח הוא ערך חיובי).
Y מייצג את הכיוון צפון-דרום (כאשר צפון הוא ערך חיובי).
Z מייצג את הכיוון למעלה ולמטה, בניצב לאדמה (כאשר למעלה הוא חיובי).

מסגרת קואורדינטות של מכשיר

איור של מסגרת קואורדינטות של מכשיר
איור של מסגרת קואורדינטות של מכשיר

מסגרת הקואורדינטות של המכשיר, שמתוארת על ידי הערכים x,‏ y ו-z, מותאמת על סמך מרכז המכשיר.

מערכת קואורדינטות
X במישור המסך, ערכים חיוביים מימין.
Y במישור המסך, חיובי כלפי מעלה.
Z בניצב למסך או למקלדת, חיוביים נמשכים החוצה.

בטלפון או בטאבלט, הכיוון של המכשיר מבוסס על הכיוון הרגיל של המסך. בטלפונים ובטאבלטים, המצב הזה מתקבל כשהמכשיר במצב תצוגה לאורך. במחשבים ניידים או במחשבים שולחניים, הכיוון מוגדר ביחס למקלדת.

נתוני רוטציה

נתוני הסיבוב מוחזרים כזווית אוילר, שמייצגת את מספר מעלות ההפרש בין מסגרת הקואורדינטות של המכשיר לבין מסגרת הקואורדינטות של כדור הארץ.

אלפא

איור של אלפא במסגרת הקואורדינטות של המכשיר
איור של אלפא במסגרת הקואורדינטות של המכשיר

הסיבוב סביב ציר z. הערך של alpha הוא 0° כשהחלק העליון של המכשיר מצביע ישירות לצפון. ככל שמסובבים את המכשיר נגד כיוון השעון, הערך של alpha עולה.

בטא

איור של מסגרת קואורדינטות של מכשיר
איור של בטא במסגרת הקואורדינטות של המכשיר

הסיבוב סביב ציר ה-X. הערך של beta הוא 0° כשהחלק העליון והחלק התחתון של המכשיר נמצאים במרחק שווה מפני כדור הארץ. הערך עולה ככל שהחלק העליון של המכשיר נוטה לכיוון פני כדור הארץ.

גאמה

איור של מסגרת קואורדינטות של מכשיר
איור של ערך גמא במסגרת הקואורדינטות של המכשיר

הסיבוב סביב ציר ה-y. הערך של gamma הוא 0° כאשר הקצוות השמאלי והימיני של המכשיר נמצאים במרחק שווה מפני כדור הארץ. הערך עולה ככל שהצד הימני מוטה לכיוון פני השטח של כדור הארץ.

הכיוון שאליו פונה המכשיר

האירוע 'כיוון המכשיר' מחזיר נתוני סיבוב, כולל מידת ההטיה של המכשיר מקדימה לאחור, מצד לצד, ואם יש מצפן בטלפון או במחשב הנייד, גם את הכיוון שאליו המכשיר פונה.

מומלץ להשתמש בהם במשורה. בדיקת התמיכה. אין לעדכן את ממשק המשתמש בכל אירוע של כיוון, אלא לסנכרן עם requestAnimationFrame.

מתי כדאי להשתמש באירועים של כיוון המכשיר

יש כמה שימושים לאירועים של כיוון המכשיר. דוגמאות:

  • עדכון מפה כשהמשתמש זז.
  • שינויים עדינים בממשק המשתמש, למשל הוספת אפקטים של תזוזת רקע.
  • בשילוב עם מיקום גיאוגרפי, אפשר להשתמש בהם לניווט מפורט.

בדיקת התמיכה והאזנה לאירועים

כדי להאזין לאירועים מסוג DeviceOrientationEvent, קודם צריך לבדוק אם הדפדפן תומך באירועים האלה. לאחר מכן, מחברים אובייקט event listener לאובייקט window שמאזין לאירועים מסוג deviceorientation.

if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document.getElementById('doeSupported').innerText = 'Supported!';
}

טיפול באירועים של כיוון המכשיר

האירוע 'כיוון המכשיר' מופעל כשהמכשיר זז או כשכיוון המכשיר משתנה. הפונקציה מחזירה נתונים על ההבדל בין המכשיר במיקום הנוכחי שלו ביחס למסגרת הקואורדינטות של כדור הארץ.

בדרך כלל האירוע מחזיר שלושה מאפיינים: alpha,‏ beta ו-gamma. ב-Mobile Safari, הפרמטר הנוסף webkitCompassHeading מוחזר עם כיוון המצפן.

תנועה של המכשיר

האירוע 'כיוון המכשיר' מחזיר נתוני סיבוב, כולל מידת ההטיה של המכשיר מקדימה לאחור, מצד לצד, ואם יש מצפן בטלפון או במחשב הנייד, גם את הכיוון שאליו המכשיר פונה.

משתמשים בתנועת המכשיר כשצריך את התנועה הנוכחית של המכשיר. הערך של rotationRate מוצג ב-°/sec. הערכים של acceleration ו-accelerationWithGravity מוצגים ב-m/sec2. חשוב לזכור את ההבדלים בין הטמעות בדפדפנים.

מתי כדאי להשתמש באירועי תנועה של המכשיר

יש כמה שימושים לאירועי תנועה של המכשיר. דוגמאות:

  • מחליקים את המכשיר כדי לרענן את הנתונים.
  • במשחקים, כדי לגרום לדמויות לקפוץ או לזוז.
  • לאפליקציות בריאות וכושר.

בדיקת התמיכה והאזנה לאירועים

כדי להאזין ל-DeviceMotionEvent, קודם צריך לבדוק אם האירועים נתמכים בדפדפן. לאחר מכן, מחברים פונקציית event listener לאובייקט window כדי להאזין לאירועים מסוג devicemotion.

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

טיפול באירועי התנועה במכשיר

אירוע התנועה של המכשיר מופעל במרווחי זמן קבועים ומחזיר נתונים על הסיבוב (ב°/שנייה) ועל ההאצה (במ/שנייה2) של המכשיר, באותו רגע נתון. בחלק מהמכשירים אין את החומרה הדרושה כדי להחריג את השפעת כוח הכבידה.

האירוע מחזיר ארבע מאפיינים: accelerationIncludingGravity,‏ acceleration,‏ rotationRate ו-interval, לא כולל את ההשפעות של כוח הכבידה.

לדוגמה, נסתכל על טלפון ששוכב על שולחן שטוח כשהמסך שלו פונה למעלה.

מדינה סיבוב תאוצה (m/s2) תאוצה עם כוח הכבידה (m/s2)
לא זז [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]

לעומת זאת, אם הטלפון החזיק כך שהמסך היה אנכי לאדמה, והיה גלוי ישירות לצופה:

מדינה סיבוב תאוצה (m/s2) תאוצה עם כוח הכבידה (m/s2)
לא זז [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;
}

אחרי שמקישים על הלחצן 'קדימה', המשתמש מתבקש לקפוץ. במהלך הזמן הזה, הדף מאחסן את ערכי ההאצה המקסימליים (והמינימליים), ואחרי הקפיצה הוא מודיע למשתמש על ההאצה המקסימלית שלו.

משוב