תמליל מתוך ההרצאה שהעברתי ב- HTML5 Fast forward.
אם ידעתם ואם לא ידעתם, כולנו נושאים ג'ירוסקופ אחד או יותר על הגוף שלנו. כך למשל אני נושא רוב שעות היום טלפון נייד ושעון יד חכם (של גרמין) שכוללים ג'ירוסקופ. מה זה ג'ירוסקופ אתם שואלים? מדובר במכשיר זעיר המכיל דיסקית אחת שמסתובבת ללא התנגדות. על פי חוקי התנועה של ניוטון (הראשון – חוק ההתמדה שאומר שגוף יתמיד בתנועתו כל עוד אין התנגדות) אם הגוף שבתוכו יש דיסקית כזו שזזה משנה את הזווית שלו ביחס לכדור הארץ, הדיסקית, תשאר בזווית המקורית לכדור הארץ שהיא היתה בה לפני התנועה. אם נמדוד את הזווית בין הדיסקית לגוף שהיא נמצאת בו, נוכל לדעת איך הגוף זז. במכשיר הטלפון שלנו אין דיסקיות זזות אלא ג'ירסקופ מסוג MEMS שזה שם לקבוצה שלמה של ג'ירוסקופים זולים, נפוצים מאוד שניתנים להדפסה על לוח. חלקם עובדים באמצעות גופים שזזים עם ויברציות וחלקם באופן אחר.
אחרי ההקדמה הזו, למה בדיוק זה מעניין אותנו? התשובה היא שכמעט כל מכשיר נייד ולעתים גם נייח שמציג את האתר שלנו יכול לתת לנו מידע רב ומעניין שהג'ירוסקופ מזרים לדפדפן. לא רק שקל מאוד לקבל את המידע הזה, קל מאוד להשתמש בו והכל בג'אווהסקריפט. באמצעות הג'ירוסקופ אני יכול לדעת מה זווית המכשיר ואת המהירות שלו. באופן מפתיע זה גם נתמך בצורה טובה על ידי כל הדפדפנים חוץ מספארי (כן, אפילו אקספלורר 11).
בואו ונציג דמו לפני הכל, הכנסו אל הקישור הזה עם הסלולרי שלכם כדי לראות את הדמו. למרות שניתן לצפות בו באמצעות המחשב, בנייד זה יותר פשוט. סירקו את הקוד הזה. אם אתם גולשים בכתבה הזו בנייד, פשוט תגללו קצת למטה אל הדמו שהכנתי ומוטמע בדף זה.
See the Pen Compass in HTML5 Demo by Ran Bar-Zik (@barzik) on CodePen.
אם הכל תקין, תוכלו לראות מצפן עם אלפא, בטא וגמא. בגדול, אם תזיזו את הנייד תוכלו לראות שהמספרים שלידם משתנים בכל תזוזה של המכשיר. מה המשמעות שלהם?
נתחיל באלפא – הוא בעצם התנועה האופקית של המכשיר (להניח את המכשיר על השולחן ולסובב אותו). כאשר 0 זה המכשיר ישר יחסית לצפון. כשאני מתכוון למכשיר אני מתכוון להיכן שהמקלדת נמצאת.
לפיכך:
אלפא 0 – צפון
אלפא 180 – דרום
אלפא 90 מערב
אלפא 270- מזרח
אותו הדבר עם בטא ועם גמא:
בטא – הזווית הקדמית של המכשיר (להציב את המכשיר על השולחן ולהזיז אותו כלפי). אפס כאשר הוא אופקי לחלוטין.
גמא – הזווית הצדדית של המכשיר (להניח את המכשיר על כף היד ולהזיז אותו מצד לצד). אפס כאשר הוא אופקי לחלוטין.
כמו שאני יכול לבדוק את זוית המכשיר ביחס לאדמה, אני יכול גם לבדוק את התאוצה של המכשיר ביחס לכדור הארץ. זה קצת יותר קשה לדמו כיוון שאני לא רוצה שתתחילו לרוץ פה או להזיז את המכשירים יותר מדי אבל שימו לב לזה:
See the Pen Device Motion Basic Example by Ran Bar-Zik (@barzik) on CodePen.
גם כאן יש לי 3 ארגומנטים – x הוא התאוצה ממזרח למערב, y הוא התאוצה מצפון לדרום ו-z מודד את התאוצ מלמעלה למטה. זה טיפה יותר מסובך כי תאוצה צריכה להתחשב גם במהירות הכבידה ולא כל המכשירים תומכים בזה. כאן השתמשתי במהירות הכוללת את מהירות הכבידה. גם כאן יש לי שלושה ארגומנטים:
x – מודד את המהירות מציר מזרח למערב (הצידה)
y – מודד את המהירות בציר צפון דרום (למעלה למטה)
z – מודד את המהירות בציר למעלה למטה. זה תמיד יהיה 9.81 ומשהו כי זה כוח הכבידה.
כל היחידות הן בג'י כאשר 9.81 הוא הוא ג'י אחד.
אז הבנו מה זה ג'ירוסקופ, הבנו איך זה עובד ומה זה עושה ואפילו ראינו דמו. בואו ונצלול קצת יותר לעומק הקוד. אל תצפו לברדק מיוחד.
כל ה-API עובד על אירועים בג'אווהסקריפט שקשורים לאובייקט ה-window שזמין לנו בדפדפן. יש לנו שני אירועים מרכזיים – הראשון הוא device orientation והוא מסביר לי על מיקום המכשיר ביחס לשושנת הרוחות ולזווית המסך. בעצם הוא נותן לי את האלפא, בטא והגמא שלי.
על מנת להאזין לאירוע, אנחנו צריכים לעשות משהו כזה:
window.addEventListener('deviceorientation', (eventData) => {
//eventData.alpha
//eventData.beta
//eventData.gamma
}, false);
בכל פעם שהג'ירוסקופ מזהה תנועה, האירוע הזה נורה. מה שמחייב אותנו להיות אקסטרה זהירים כיוון שבמכשירים ניידים יש לנו המון אירועים כאלו.
(אגב, ה-arrow function מומלץ פה כיוון שאין כאן bind או יצירה של this עצמאי).
בתוך האירוע יש לנו שלושה פרמטרים שאפשר להשתמש בהם – אלפא, בטא, גמא.
האירוע השני הוא device motion. שם יש לי יותר דברים מעניינים:
window.addEventListener('devicemotion', (eventData) => {
//eventData.accelerationIncludingGravity(x, y, z);
//eventData.acceleration(x, y, z);
//eventData.rotationRate(x, y, z);
}, false);
לצערי חלק מהדפדפנים לא תומכים ב-acceleration ולפיכך יותר בטוח להשתמש בתאוצה עם כבידה.
כמובן שכמו כל פיצ'ר מתקדם, אנחנו צריכים לבדוק אם הדפדפן תומך בכלל ב-API של הג'ירוסקופ. הבדיקה היא פשוטה למדי:
if (window.DeviceMotionEvent) {
}
if (window.DeviceOrientationEvent) {
}
אם אני רוצה לבדוק את הקוד שלי, ולא מתחשק לי להתחיל לבדוק אותו על מכשיר נייד ולהזיז אותו ממקום למקום, אני יכול לעשות סימולציה של event:
let event = new CustomEvent(‘deviceorientation’);
event.alpha = 10;
event.beta = 20;
event.gamma = 10;
window.dispatchEvent(event);
כמובו שחלק מכם יקפצו ויגידו – רגע, מה ההבדל בין זה לבין media query ב-CSS? ובכן, Media query מאפשר לי לכוון את תצוגת המסך לפי גודלו ב-x או ב-y. או בדיקה של אוריינטצית Landscape אבל הוא בוודאי לא מאפשר לי דיוק כזה.
דברים מעשיים שאפשר לעשות עם ה-API
חשוב לזכור שהספספיקציה של ה-API האלו עדיין ניתנת לשינוי, אבל היא כבר מספיק ותיקה על מנת שנוכל להשתמש בה. נשאלת השאלה – מה בדיוק אפשר לעשות איתה? מצפן זה מגניב אך לא מאוד שימושי לרוב האפליקציות. אבל יש לא מעט דברים שאפשר לעשות אם אנחנו יודעים את המיקום והמהירות במרחב. למשל, אם יש לי אתר שבו יש שיחות, אני יכול בקלות רבה להסתיר את הצ'אט הלוהט עם בר רפאלי במידה ואני מניח את הטלפון על השולחן. הנה הדוגמה. הכנסו לדוגמה עם הטלפון והחזיקו את הטלפון כאילו אתם מצ'וטטים, תוכלו לראות את הצ'אט הלוהט עם בר רפאלי. אם מישהו יגיע לחדר וירצה לראות מה אתם עושים – הניחו את הטלפון על השולחן. בבת אחת הצ'אט ישתנה לצ'אט לגיטימי לגמרי.
See the Pen deviceorientation example app by Ran Bar-Zik (@barzik) on CodePen.
זה גם יעבוד על כל אתר מפוקפק אחר. אני יכול להציע את הפיצ'ר הזה רק למשתמשים רשומים למשל.
אם יש לי אתר של ביקורת מסעדות, אני יכול לחוש שהמשתמש בנסיעה באמצעות בדיקת תאוצה ולהקפיץ לו חלון עם קישור מיידי ל-waze, או לבקש ממנו את הגיאו לוקיישן שלו רק אם הוא בנסיעה את המיקום שלו במקום לשגע אותו בבקשות שונות.