אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » ג'יירוסקופ API

ג'יירוסקופ API

רן בר-זיק אפריל 2, 2017 7:07 am אין תגובות

API ממש מגניב לבדיקת הזווית של המכשיר והתאוצה שלו. והדגמה מעניינת של מה שאפשר לעשות איתו.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

תמליל מתוך ההרצאה שהעברתי ב- HTML5 Fast forward.

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

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

http://codepen.io/barzik/full/WpbJWM/
http://codepen.io/barzik/full/WpbJWM/

See the Pen Compass in HTML5 Demo by Ran Bar-Zik (@barzik) on CodePen.

אם הכל תקין, תוכלו לראות מצפן עם אלפא, בטא וגמא. בגדול, אם תזיזו את הנייד תוכלו לראות שהמספרים שלידם משתנים בכל תזוזה של המכשיר. מה המשמעות שלהם?
נתחיל באלפא – הוא בעצם התנועה האופקית של המכשיר (להניח את המכשיר על השולחן ולסובב אותו). כאשר 0 זה המכשיר ישר יחסית לצפון. כשאני מתכוון למכשיר אני מתכוון להיכן שהמקלדת נמצאת.
לפיכך:
אלפא 0 – צפון
אלפא 180 – דרום
אלפא 90 מערב
אלפא 270- מזרח

אותו הדבר עם בטא ועם גמא:

בטא – הזווית הקדמית של המכשיר (להציב את המכשיר על השולחן ולהזיז אותו כלפי). אפס כאשר הוא אופקי לחלוטין.

גמא – הזווית הצדדית של המכשיר (להניח את המכשיר על כף היד ולהזיז אותו מצד לצד). אפס כאשר הוא אופקי לחלוטין.

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

http://codepen.io/barzik/full/dvPKdv/
http://codepen.io/barzik/full/dvPKdv/

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 האלו עדיין ניתנת לשינוי, אבל היא כבר מספיק ותיקה על מנת שנוכל להשתמש בה. נשאלת השאלה – מה בדיוק אפשר לעשות איתה? מצפן זה מגניב אך לא מאוד שימושי לרוב האפליקציות. אבל יש לא מעט דברים שאפשר לעשות אם אנחנו יודעים את המיקום והמהירות במרחב. למשל, אם יש לי אתר שבו יש שיחות, אני יכול בקלות רבה להסתיר את הצ'אט הלוהט עם בר רפאלי במידה ואני מניח את הטלפון על השולחן. הנה הדוגמה. הכנסו לדוגמה עם הטלפון והחזיקו את הטלפון כאילו אתם מצ'וטטים, תוכלו לראות את הצ'אט הלוהט עם בר רפאלי. אם מישהו יגיע לחדר וירצה לראות מה אתם עושים – הניחו את הטלפון על השולחן. בבת אחת הצ'אט ישתנה לצ'אט לגיטימי לגמרי.

http://codepen.io/barzik/full/jBEpBP/
http://codepen.io/barzik/full/jBEpBP/

See the Pen deviceorientation example app by Ran Bar-Zik (@barzik) on CodePen.

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

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
HTML 5

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד