תומס Reimers: מגניב. אז היי, כולם. קוראים לי תומס. אני TF וזה ARMAGHAN BEHLUM: armi. נחמד לראות אתכם. תומס Reimers: מגניב. אז אנחנו הולכים לדבר על Leap Motion היום. אז Leap Motion הוא מוצר ממש מגניב ש מאפשר לך אינטראקציה עם מחשב בצורה שונה. אז כל הרעיון מאחורי תנועת הקפיצה היא שאתה יכול להשתמש בידות שלך ל אינטראקציה עם המחשב. אז כאן יש לי משהו מוגדר. אני אדבר על זה בקצת. אבל הגרסה הבסיסית הוא שאתה יכול רואה שיש לי את הידיים שלי מול של המחשב שלי, וכשאני מזיז אותם, אתה מקבל אנלוגי במחשב ואתה יכול לנתח את זה. אתה יכול לעשות מחוות. אתה יכול להשתמש בידות שלך ל אינטראקציה עם המחשב בדרך חדשה ומעניינת. 

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

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

אבל דבר אחד שאתם יכולים לעשות החל מעכשיו עם Leap Motion הוא עבודה בJavaScript. יש קפיצת Motion API JavaScript ש אתם יכולים להשתמש ואנחנו מאוד, מאוד ממליץ לכם לבנות הפרויקטים שלך באמצעות ש. אז עם זה, תן לי לעבור בחזרה אותו לTomas לדבר על קפיצה Motion ו- JavaScript. תומס Reimers: מגניב. או שמא אתה רוצה להראות שלהם Visualizer הראשון? 

ARMAGHAN BEHLUM: אה, כן. כן. בואו נדבר עוד על Visualizer ש. 

תומס Reimers: אז על בסיסי ביותר רמה, כאשר אתה מקבל ראשון לLeap Motion אתה הולך לי תיבה זו. כאן, רוצה שאני אקח את השליטה? 

ARMAGHAN BEHLUM: כן, לך על זה. 

תומס Reimers: אז כאשר אתה הראשון להגיע לקפיצת Motion אתה הולך לי תיבה זו. יש לו מכשיר ש נראה משהו כזה. אתה מחבר אותו למחשב שלך, להתקין את מנהלי ההתקנים הדרושים, ואז זה יהיה בעצם יוקם. אז הדרך הקלה ביותר כדי למיין של עסקה עם Leap Motion הוא ייפתח בתכנית זו היא מתקינה בשם Leap Motion Visualizer. וVisualizer הוא, פשוטו כמשמעו, מה שאני מציג כאן. זה מאפשר לך לראות מתווה שלד של הידיים שלך. ומה Motion Leap מפרש אותם כ. אז Motion Leap משתמש במצלמה כדי למיין של מבט בידיים שלך ואז הוא מנסה לנחש מה הרכב שלד בסיסי שאתה רואה על המסך הוא. וזה מה שזה מראה לך. ARMAGHAN BEHLUM: בכל נקודה קטנה אחת ודבר שאתה רואה יש הנתונים שעומדים לרשותך בחורים כמו גם לשימוש. אז אתה רואה שזה הלכידה שתומס יש חמש אצבעות, כל אחד מ אצבעות שונות אלה זמינים גם עבורך כנתונים נקודות להשתמש בכל מה שיישום שאולי אתה רוצה. אם אתה רוצה לראות אם מישהו עושה את אגודלים אתה יכול לראות אם האצבעות שלהם מסתלסלים ואם הם אצבע אגודל מצביעה כלפי מעלה, או שבו פרק כף היד או כף היד שלהם היא וסוג כזה של דברים. תומס Reimers: מגניב. אז אתה יכול לראות כמה מחוותיו מבין טוב יותר מאחרים. זכור, שהוא מסתכל עליך יד במצלמה מהחלק התחתון, ולכן כאשר יש לך הידיים שלך כמו זה שהוא מבין אותם באופן מלא, אבל ברגע שאתה מתחיל לנסות ולעשות אגודלים למעלה, לפעמים זה קורא אותו, לפעמים זה יכול לנחש, אבל בכנות המצלמה פשוט לא יכולה לראות את האגודל. אז זה לא באמת בטוח מה קורה. רק כמה מגבלות שכדאי לזכור כאשר אתה מפתח עם זה. 

בכל אופן, כל כך לחזור לזה. Visualizer למעשה יש הרבה כלים שימושיים. אז Motion Leap הוא מתוכנת בצורה כזאת כי הם לא מצפים ממך ל אינטראקציה עם שנתוני התמונה. הם לא באמת מצפה ממך להבין מה שקורה מאחורי הקלעים. מה שהם עושים הוא לחשוף חבורה של ממשקי API עבורך כזה שאתה יכול אינטראקציה עם נתונים זה ישירות ללא הבנה מה קורה מתחת למכסת המנוע. 

אז אם פגעו H כאן בVisualizer תראה הרבה אפשרויות. החשוב אחד כאן אף הוא אם אתה מכה O ולאחר מכן פגע H, אתה תראה שזה מאפשר לך לצייר מחוות. אז מחווה, תראי היא שואבת חץ על פני. מחווה היא אחת הדרכים שבי Leap Motion סוג של מאפשר לך לקבל את הנתונים מבלי לעבד אותו. אז במקום צורך לי להבין את, אה, היד נעה, גם אם יש לי נקודת גישה, API יהיה סוג של רק יגיד לי, היי, הם עשו מחווה זו. אז אתה יכול לעשות מחוות חץ בסיסיות. אתה יכול לעשות מחוות המעגל. אתה יכול לעשות את ההקשה מחוות. ואתה יכול לעשות מחוות לחיצת מקש. כן. ודברים מסוג הזה. אז עכשיו שיש לנו סוג של ראיתי מה Leap Motion יכול לעשות, אתה יכול לראות את זה יכול לקרוא כל חבורה של מחוות. אני חושב שאני הולך ל להעביר אותו בחזרה לarmi והוא הולך לדבר על איך אתה מקבל באלה עם JavaScript, איך אתה אפילו להתחיל פרויקט עם זה. ואז נדבר על כמה מקומות מגניבים שאתה יכול ללכת עם זה. ARMAGHAN BEHLUM: כן. נשמע טוב. אז כן, הדבר הראשון שאנחנו רוצה אותך לעשות כמובן, אחרי שאתה מקבל את תנועת הקפיצה היא ל ללכת לleapmotion.com, להגדיר, להתקין הנהגים וכאלה. אחרי עושה את זה אתה יכול ללכת לוודא שהוא מחובר. אם אתה רואה במגש הקטן שלך Leap Motion סמל וזה ירוק, אז אתה יודע שאתה כל הסט. וכמובן לבדוק מה בדיוק תומס רק הראה לך עם מחוות ועושה את ברזי המסך, ו רזי מפתח, וסוג כזה של דברים. 

לאחר שלמרות שאנחנו, שוב, כמו שאמרתי, יש לנו גישה לכל אלה דברים בJavaScript, כמו גם. האידיאלי להגדיר ש אנו ממליצים לך בחורים הוא להיכנס לך ספריית vhost, מארח מקומי, ציבור במכשיר CS50 שלך. וכשאתה הולך לשם מה אתה רואה הוא קובץ HTML נקודת מדד. כעת, לאחר שנקודת המדד קובץ HTML או נקודת מדד קובץ PHP, לפי בסדר, מה אתה יכול לעשות אז הוא ללכת למערכת ההפעלה העיקרית שלך. ואם אתה הולך לכתובת ה- IP שמופיע בפינה הימנית התחתונה פינה של המכשיר שלך כאן, כפי שאתה יכול לראות, אז מה שקורה הוא לעבור לדף זה הפניה שקובץ HTML נקודת מדד. אז את כל הקוד שאתה יכול לשים ב שם מקבל שנשלח והוא שמיש כאן. 

תומס Reimers: אז זה גם רק חשוב להתייחסות שאם אתם באמת יודעים כיצד להגדיר את שרת בעצמך, או שאתה רוצה לשים את זה בכל העולם אינטרנט, אתה מוזמן לעשות מה ש. זכור כי אלו הם רק קבצי JavaScript וכל עיבוד Leap נעשה על הלקוח. אז זה לא ממש משנה שבו חיי השרת שלך כל עוד המחשב אתה צופה באתר ב התקין Leap Motion. ARMAGHAN BEHLUM: בהחלט. כמו שאמר תומס, כן, מה שעובד בשבילכם. זוהי רק אחת מההמלצות שלנו. עכשיו להתחיל להשתמש בקפיצה Motion מה היית עושה הוא היית לייבא JavaScript קובץ מLeap Motion. ואז משם מה ש אתה יכול לעשות הוא, עכשיו יש לי רק סעיף זה תג להגדיר עם תעודת זהות של טקסט. דברים שאנחנו ממליצים מגדירים את אפשרויות בקר לLeap Motion עם לאפשר מחוות להיות אמיתי. אז כברירת מחדל אלה מחוות שהראינו לך בחורים, המעגל, ו רז מפתח, וswipes, אלה אינם מוצגים ל אתם כברירת מחדל. אבל אנחנו מאוד ממליצים באמצעות אלה כך שאתה לא להמציא את הגלגל מחדש. לאפשר לאלה ל, עוברים אלה נכונים אפשרויות בקר לזנק נקודת לולאה ואתה מוכן ללכת. כי אז אתה רק צריך מוגדר פונקציה אנונימית שייקח ב מסגרת מLeap Motion ויש לו מסגרת שכל מידע שאתה הולך צריך. 

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

ולאחר מכן את הטענה השנייה היא פונקציה, זה כמו סוג של שיחה בחזרה שייקרא כל זמן כל מסגרת של Leap, לכן כל אוגרי קפיצת זמן ש יד המהלך שלך, יש לו מסגרת חדשה. והוא קורא בפונקציה זו עם אחד טענה, שהוא אובייקט המסגרת. ושאובייקט המסגרת מתאר המסגרת כמו קפיצה רואה את זה. ARMAGHAN BEHLUM: בדיוק. אז זה מכיל את כל שימושי פיסות של מידע שאנחנו מדברים עליו קודם לכן. בדיקת מחוות dot מסגרת הוא מערך של מחוות שתנועת הקפיצה נתפסה ידיים עושים במסגרת האחרונה. כך למשל, מה שאנחנו עושה כאן הוא שאנחנו בודקים, היי, קפיצה, שבמסגרת האחרונה עשתה אתה תופס את כל מחוות שעשיתי? ואם כן מה שנחליט לעשות הוא לחזר באמצעות מחוות אלה ולנסות ולקבל כמה שימושי מהם המידע. כל מחווה ייחודית זיהוי הקשורים אליו. יש להם סוגים. אתה יכול להסתכל שבאצבעות היו מעורבים במחוות על ידי בודק את דברים pointable זה. אז אם כאשר אתה עובר דברים API Leap Motion JavaScript, כשהם מזכירים pointables, הם על האצבעות האלה מדברים. ולאחר מכן את הידות, כמובן, כל יד האובייקט. 

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

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

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

כמו שאמרתי קודם לכן, pointables הם האצבעות. באותו רגע לא היה לנו שלנו ידיים מול Motion Leap אז זה רשום אפס, אבל זה איך אתה תתחיל לברר אולי כמה אצבעות על המסך. וזה סוג של מידע. תומס Reimers: וזכירה זה רק אובייקט. אז כל מה שניתן לגשת קצת כמו struct בג יש לך את האובייקט שם נקודה שם הרכוש. ולאחר מכן שביש לך מערכים ויש לך חפצים אחרים, אך יש לזכור שזה רק אובייקט. אין שום דבר מיוחד בגלל שאנחנו משתמשים בקפיצה. ARMAGHAN BEHLUM: כן. מגניב. האם עלינו לבדוק כמה דוגמאות JavaScript? 

תומס Reimers: אז זוכרים במהירות ש אמר שלמעשה Leap יכול לרוץ בכל אתר אינטרנט. LeapJS הוא רק שימש ללקוח. וכך לאורך כלקוח יש Leap Motion מצורף זה יעבוד. אז יש קפיצת Motion אנשי אתר שבו תוכל לשתף את דוגמאות שלהם דברים שהם עשו. אז אנחנו רק הולכים דרך כמה מהם כדי לראות מה אפשר לפני צלילה ליותר פרטים על איך זה אפשרי. אז ARMAGHAN BEHLUM: בוא נראה. תומס Reimers: עכשיו זה צריך לעבוד. ARMAGHAN BEHLUM: אז עכשיו לפני שראינו את דוגמא באמצעות אחדות שניתנה הידיים שלנו עם עורות גרפיים מרשימים למדי, אבל עכשיו אתה יכול לראות שאתה יכול לעשות אותו דבר בתוך דפדפן אינטרנט. כל זה בתוך Chrome רק באמצעות JavaScript. ולאחר מכן נחמד האחרות עניין הוא אם אתה רוצה לדעת איך הם עשו את זה, דוגמאות על JavaScript כוללים גם אפשרויות קוד ש אתה יכול לבדוק את ולאחר מכן לראות איך האדם הזה היה תופס ידיים וקודים וכאלה. 

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

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

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

כך, למשל, אני חושב שזה ב מקרה זה המחשב הנייד שלי ממש זה סוג של מה שהופך את תנועת הקפיצה. כן, יש לנו ללכת. אז אם אני לנקות את המחשב הנייד שלי מ מאחוריו היד להופיע די טובה. אז כן. יש ש. אז מה עוד עשה לנו להראות להם. תומס Reimers: אני חושב ש עכשיו תהיה הפעם כדי למיין של לצלול לתוך ובואו פשוט לעשות הדגמה לגמרי מאפס. זה הולך להיות ממש פשוט. בעיקרון מה שאנחנו הולכים כדי לנסות לעשות הוא להפוך אותו כך שכאשר אתה לסחוב את היד שלך, רקע הולך מתחיל כאדום, וכאשר אתה לסחוב את היד שלך, רקע הולך להפוך ירוק. בסדר? ממש פשוט. וזה בעצם רק הולך לעבור הרבה של המושגים מאחורי קפיצה, כך שנוכל להיכנס לאידיאולוגיה זו של איך Leap עובד וכיצד אנו יכולים לבנות דברים עם זה. ואז משם נמצא כנראה רק להראות לך Docs API ושבו אתה תוכל לקרוא עוד על זה. ואז אנחנו קוראים לזה יום. אז אתה רוצה קוד או אתה רוצה שאני קוד? ARMAGHAN BEHLUM: כן. ובכן, אני מניח שאנחנו יכולים לעבוד יחד על זה ולנסות 

תומס Reimers: כך יהיה לנו לעשות קצת קידוד זוג. ARMAGHAN BEHLUM: הנה. זה בדיוק מה שאני רציתי לבדוק. מגניב. כך למשל בפה, בואו נראה. בעוד אנו iterating באמצעות מחוות כבר, תומס Reimers: רוצה לעשות רק קובץ חדש לחלוטין? ARMAGHAN BEHLUM: קובץ חדש לחלוטין? כן, בטח. 

תומס Reimers: כן. 

ARMAGHAN BEHLUM: אז בואו נעשה את זה. 

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

ARMAGHAN BEHLUM: אופס. כותרת. 

תומס Reimers: כן. 

ARMAGHAN BEHLUM: הנה אנחנו. 

תומס Reimers: ו אז בואו נעשה את גוף. 

ARMAGHAN BEHLUM: המתן, בואו גם לוודא לייבא. תומס Reimers: אה, כמובן. שלי רע. אז תמיד לוודא שיש לך את הקפיצה תסריט אז זה תסריט שניתן לך על ידי Leap Motion אשר בעצם מאפשר דפדפן האינטרנט כדי להתחבר למכשיר במחשב של המשתמש. ולאחר מכן בזה אנחנו גם צריך גוף ובואו פשוט להפוך את הגוף להגיד שלום כל כך שאנחנו יכולים להראות לתלמידים כיצד להתחבר לזה חדש דף האינטרנט שהם עשו. ARMAGHAN BEHLUM: בטח. אז בואו פשוט לשים another-- 

תומס Reimers: היי, שלום עולם. אז דוגמא בסיסית מאוד. באמת רק הדגמה. 

ARMAGHAN BEHLUM: ואז כאן אנחנו יכול ללכת ל, שכינינו אותה הנקודה HTML יד, נכון? והו! אז אני תוהה מה לא בסדר עם זה עכשיו. בואו נוסיף הרשאות קריאה למסור HTML נקודה. תומס Reimers: האם אתה רוצה לעשות את זה במסוף הגדול כדי שנוכל פשוט להראות את זה על the-- 

ARMAGHAN BEHLUM: כן, זה הגיוני. בְּסֵדֶר. אז אני רק הוספתי הרשאות, אבל אם אנחנו היו לבדוק את הרשאות לפני ש היה רואה שבעצם יד נקודת HTML לא היה לי הרשאות קריאה ולכן אנחנו לא יכולים להבהיר את זה. אבל עכשיו, אם אנו עושים זאת, אנו רואים עולם שלום קטן ממש שם. 

תומס Reimers: אז בוא למעשה, כפי שכתב, שלום עולם, חשבתי על דרך אנחנו יכולים לשנות את זה. בואו נעשה את זה להגיד שלום עולם, ו ואז כשאתה מניף, זה אומר שלום. נכון? אז שלום, שלום. 

ARMAGHAN BEHLUM: בטח. 

תומס Reimers: זה נשמע די טוב. 

ARMAGHAN BEHLUM: זה נשמע לי טוב, גם. 

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

אז כפי שאתם זוכרים, jQuery מאפשר לך לשנות את התוכן. אז דבר אחד שאנחנו ייתכן שנרצה לכלול בזה הוא ספריית jQuery. ולאחר מכן להיות מסוגל לבחור מה אנחנו באמת הולכים לשנות את התוכן, זה הולך צריך ID או בכיתה, או משהו שאנחנו יכולים להשתמש כדי לבחור אותו. אז אנחנו פשוט אתן לו זיהוי מהיר של טקסט שינוי. ואז אתה רוצה לתפוס jQuery? ARMAGHAN BEHLUM: אז מה הראשון דבר עלינו לעשות רשימה אז עכשיו? תומס Reimers: בוא לתפוס jQuery? ARMAGHAN BEHLUM: בוא לתפוס jQuery, OK, מגניב. במקרה זה, אני הולך צריך actually-- שבו יהיה המקום הטוב ביותר לעשות את זה? 

תומס Reimers: jQuery, כך שאם אתה Google jQuery, jQuery פגע, הראשון ARMAGHAN BEHLUM: מאוד ראשון. תומס Reimers: או להורדה. זה בסדר גמור. הכה v1 להורדה וv2 בצד השמאל. אז אנחנו מתארים jQuery מ באינטרנט כמו שאתה בטח כבר עשה. לגלול למטה. מעלה, מעלה. 

ARMAGHAN BEHLUM: אה, כאן ועכשיו? תומס Reimers: או ש. כן. אז יש jQuery גרסה מתארחת מה שאומר שאתה לא באמת צריך להוריד אותו, אבל אתה יותר מ בברכה כדי להוריד אותו ולארח אותו בעצמך. ARMAGHAN BEHLUM: מגניב. אז עכשיו יש לנו jQuery. עכשיו מה הלאה על לעשות הרשימה שלנו. תומס Reimers: מדהים. אז הבא מה שאנחנו צריכים לעשות הוא שאנחנו באמת צריכים לתת עולם שלום p ID כדי שנוכל לשנות את זה, נכון? אז בואו לתת מושג, אני לא יודע, לשנות את הטקסט? ARMAGHAN BEHLUM: בוא פשוט לעשות את זה ככה, אני מניח. תומס Reimers: changeText, מגניב. ועכשיו בואו פשוט לרענן את העמוד. הפוך הכל עובד בטוח. אז בחזרה בדפדפן. מגניב. תמיד תזכורת טובה ש כאשר אתה בונה אתר אינטרנט, כנראה לרענן כל פעם שאתה מבצע כל שינוי משמעותי במידה מסוימת רק כי לפעמים אתה בטעות טיפת תג, או שאתה בטעות למחוק משהו, ואז אתה שובר משהו קטן, אבל אז כשאתה עושה שינוי גדול יותר אתה כמו, למה עשית השינוי הגדול הזה לכאורה לשבור את הדבר שאינו קשור. אז זה תמיד טוב כדי למיין של ללכת ולעשות בדיקות שפיות אלה. 

בכל מקרה, אז עכשיו בואו נעשה בדיקת השפיות אחרונה, הבוא ננסה לשנות טקסט ללא Leap Motion, בלי כלום, רק בדף זה יהיה העומס לשנות את העולם של שלום ל שלום באמצעות jQuery. אז אם אתה זוכר תחקירי jQuery פונקציה זו סימן דולר, כדי שנוכל להעביר בורר CSS ל, כלומר שינוי טקסט hashtag, ש בוחר את האלמנט עם זיהוי של טקסט שינוי. ואז אנחנו הולכים לקרוא את השיטה HTML על האובייקט שהוא חוזר עם טיעון של שלום מחרוזת, ש ישנה את הפריטים HTML כדי להיפרד. מדהים. זה נראה די מגניב. ועכשיו כשאנחנו לרענן הדף אנחנו הולכים לראות זה מייד משנה לשלום, נכון? כי זה לא לחכות לשום דבר. סוג של ברגע שזה תסריט מפעיל אותו משנה אותו לשלום. מגניב. 

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

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

תומס Reimers: מצוין. אז עכשיו אנחנו הולכים להתחיל להיכנס לזה דברים Leap שאנחנו מדברים עליו. אז armi, אתה רוצה לקחת את זה מכאן או? 

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

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

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

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

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

ARMAGHAN BEHLUM: נכון מאוד. תומס Reimers: אז ל סגנון C קלאסי כאן אנחנו בטח רוצים להשתמש ללולאה. ARMAGHAN BEHLUM: כאן אנחנו אז. החלטנו לחזר באמצעות מחוות. ובואו נראה. i בתוספת, בתוספת. ועכשיו, אם אנחנו אולי עשינו רק מחווה var שווה מחוות dot המסגרת אני סוגר, עכשיו יש לנו מחווה עצמו, שהוא רק אחד מופע יחיד של אובייקט מחווה לנו לעבוד עם בתוך זה ללולאה. בְּסֵדֶר. תומס Reimers: השפיות בואו לבדוק כאן שוב ורק לנחם dot להתחבר מחווה כדי לראות מה אנחנו מקבלים. 

ARMAGHAN BEHLUM: מחווה יומן נקודת קונסולה. dokie אוקי. ולרענן עוד פעם אחת. 

תומס Reimers: ובוא נסה לבצע מחווה. אתה תראה שחבורה של, כשהוא swipes, אתה מקבל חבורה של מחוות ב קונסולה ואם הוא מנסה לעשות מעגל, זה פשוט- 

ARMAGHAN BEHLUM: מעגלים רק ממש נחמדים. 

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

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

ואז זה כנראה המעגל האחרון ש, הו, כן, בסדר. אז לפעמים זה מראה לך מצב של עצירת תנועה וזה גם מראה לך מצב של החל מחווה חדשה כאשר היא מכירה בודאות ש שהתחלת מחווה חדשה. לדוגמא במקרה הזה. תומס Reimers: מגניב. ARMAGHAN BEHLUM: אז כן. ואז, בואו נראה. ניתן גם להבחין ב למרות שאנחנו עושים מעגל ומחווה יש סוג שדה שנקרא זה אומר לנו איזה סוג מחווה שהוא. אז שעשוי להיות שימושי עבורנו אתה מנסה לעשות את מה שאנחנו עושים. תומס Reimers: אז מעבר חזרה לJS, הדבר הראשון שעולה בדעתי גם, רק לקרוא את הקוד הזה הוא שיש אופטימיזציה קטנה, אשר הוא שאנחנו באמת לא צריך את זה אם מצב, נכון? כי אם מחוות dot המסגרת מנקדות אורך הוא אפס, כי ללולאה של לא הולך לרוץ בכל מקרה. אז אנחנו יכולים גם פשוט ללכת קדימה ולהיפטר מזה. שוב, בזמן שאתה כותב את קוד זה חשוב לחזור ולמיין של Refactor כפי שאתה מבין שאתה היה יכול לעשות משהו טוב יותר, או שיש עוד דרך לעשות את זה. אז עכשיו אנחנו רק הולכים לנקות את זה עד לנקות במהירות וגם את הקוד שלך. זה עניין גדול. 

ARMAGHAN BEHLUM: טוב סגנון הוא מאוד מוערך. 

תומס Reimers: אתה יכול תמיד לדעת מתי מישהו יש קוד שבו שם היה אמור להיות אם מצב ולאחר מכן הם הסירו אותו, אבל הם לא uncomment זה. זה מאוד ברור ו זה סוג של נראה מכוער. ARMAGHAN BEHLUM: אז מה הבא עלינו לעשות רשימה? תומס Reimers: אז עכשיו כמו שאמרנו, אני מניח שהדבר הראשון שאנחנו רוצים לעשות הוא לוודא שמחווה של ש למעשה לסחוב, נכון? 

ARMAGHAN BEHLUM: כן. 

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

ARMAGHAN BEHLUM: [לא ברור] מחווה סוג dot שווה שווה לסחוב. הנה אנחנו. 

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

כך תהיה לנו לחזור לכאן. אנחנו לרענן את הדף. ועכשיו משהו הפעם היחידה צריך נקודת הקונסולה להיות מחובר היא כאשר אנו לסחוב. ואנחנו מנסים לגנוב ואנחנו לא רואים שום דבר. נכון? אז זה בעצם בעיה גדולה. אנחנו לא רואים את מה שאנחנו צפויים. וניפוי שגיאות יכול להיות חלק גדול מזה. אז הדבר הראשון שאנחנו הולכים לומר הוא, בסדר, בואו לנחם את הנקודה יומנו אם מחווה מנקדות הקלד לסחוב שווה שווה. ARMAGHAN BEHLUM: כן, בואו נעשה את זה. תומס Reimers: אז אנחנו הולך לחזור לזה. נרענן. אנחנו לסחוב. ואנחנו הולכים לראות חבורה שלהם. OK. כך שברור שהבעיה הייתה עם מעמד dot מחווה שלנו. אז אם אנחנו פותחים את אחד מאלה שנציע ב להסתכל בחפצים ואנו רואים, טוב, זה להפסיק, אבל, הו, זה נקרא מדינה, לא מצב. אז אם אנחנו חוזרים ל הקוד שלנו אנו יכולים לומר אם לסחוב שווה שווה סוג dot מחווה ותחנה שווה מדינת dot מחווה שווה, אז לנחם את נקודת כניסתו. וכך לרענן. אנחנו לסחוב. ואנו רואים שעל כל לסחוב, אנחנו רק מקבל אחד, המהווה את סוף, וזה נהדר, נכון? זה מה שאנחנו רוצים. 

ARMAGHAN BEHLUM: כן. ואנחנו גם יכולים להבחין כי תעודות הזהות ל כל אחד ממחוות אלה הם נפרדים. אז כפי שאמר תומס בגלל שאנחנו המושך את מדינה אחת להפסיק את זה ש קיים בסוף לסחוב, אנחנו מקבל מחוות נפרדות בודדות מLeap Motion. גדול. 

תומס Reimers: בואו נלך קדימה ו רק לעשות את הדבר הסופי, שהוא, 

ARMAGHAN BEHLUM: להתראות. 

תומס Reimers: מדהים. ועכשיו בואו לבדוק את אתר האינטרנט שלנו. אחד 

ARMAGHAN BEHLUM: שני. אנחנו לא, כן, אנחנו לא קוראים לזה להתראות. גדול. 

תומס Reimers: לא, להתראות היא פונקציה אמיתית. 

ARMAGHAN BEHLUM: כן. בואו לעשות את זה. 

תומס Reimers: כאשר אנחנו לנופף לשלום, זה אומר שלום. 

ARMAGHAN BEHLUM: יש לנו נצחון. 

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

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

אם תלכו ובלבדוק את מחוות אלה, כמו גם כפי שאתה יכול לראות את זה הם ממדיות הוא בשלושה כיוונים, בעצם. אז לא רק להגביל את עצמך למסך 2D למרות שאולי אתה להיות באתר אינטרנט של 2D. אתה יכול לנסות ולחשוב איך משתמש אולי אינטראקציה עם האתר ב3D. תומס Reimers: בחלל 3D. ARMAGHAN BEHLUM: בדיוק. וכן. כך שאתה מקבל כיוונים, מהירויות, כל הביטים מגניבים האלה של מידע. 

תומס Reimers: ואם אתה לא מכיר את זה, זה הולך x, y, ואז z הוא הממד אחרון זה. רק משהו שאתה כנראה הם מכיר אם אתה כבר עסק ב3D לתאם מטוסים לפני. אם יש לך לא, זה אותו הדבר כמו 2D אחד מלבד יש ממד שלישי. אנחנו קוראים לזה z. וכל זה, סוג של רצון כיוון, שבה הוא הולך, position-- אני חושב שאולי זה אפילו לחשוף תאוצה, אני לא בטוח. 

ARMAGHAN BEHLUM: כן, אני מאמין. בהחלט יש לו מהירות. אני בעצם לא 100% בטוח לגבי ההאצה. 

תומס Reimers: זה עשוי להיות אופציה אתה יכול להעביר למשהו. אז עמדה ומהירות נחשפות בסוג של שלוש קואורדינטות אלה. אז x, y, z או x דלתא, y דלתא, z דלתא. אז עכשיו ראש בתיעוד זה developer.leapmotion.com ואז אתה יכול ללחוץ תיעוד. שוב, יש Leap Motion כל אלה APIs נפלא, אחד לJavaScript, אחד לC Sharp ואחדות, אחד ל C ++, אחד עבור Java, Python אחד ל, ואחד לג Objective אני אישית היה דוחף אותך לכיוון JavaScript או אם אתה רוצה ללמוד שפה חדשה, נסה Python. שני אלה שפות אני כבר עובד עם לפני והם באמת קל ללמוד ואתה כבר יודע JavaScript, ש עושה את זה מתחרה ממש טוב. 

מילה אחת של זהירות כאשר אתה נכנסת למסמכים. ודא שאתה על v2.0 Docs. כי אם אתה ב גרסה אחת, זה לא יעבוד. גם לגלרית הדוגמא. בילינו 30 דקות טובות מנסה debug Leap שלנו לפני שהבנו ש V1 לא עובד עם V2. אז רק לוודא שאתה על גרסת שתי. ואז אני אתן לו להראותך מסמכים. ARMAGHAN BEHLUM: כן. אז הנה סקירת API ולאחר מכן כמה פיסות של המידע שכבר אמרו לך. צף קטן ונחמד ידיים מעל Motion קפיצה. ותזכורת לחושבת על החלל ב3D. אחד האובייקטים קודם כל לחשוב על עם Leap Motion הם ידיים, כמובן. אנחנו ראינו מוכרים אלה על ידי Visualizer. ואז אולי יש לך ראה שזה מוכר חלק של שורש כף היד ו זרוע הקשורים אליו. תומס Reimers: אם אתה רוצה כדי למשוך את Visualizer. ARMAGHAN BEHLUM: כן, בואו נעשה את זה שוב. תומס Reimers: אתה יכול לראות, תמיד רק תזכורת טובה לראות סוג של, Visualizer מנסה להראות כל הנתונים שLeap רואה. אז אתה תראה שיש לנו סוג של ארבע נקודות אלה על ידי שורש כף היד ולאחר מכן פרק כף היד בפועל. וגם יש לך את הכדור הזה בכף היד. כל אלה הם נקודות מכיר במוכר על ידי הקפיצה. 

ARMAGHAN BEHLUM: בדיוק. וכך, עם שיד אובייקט יש כל מסגרת מערך יד כמו גם שבו אתה יכול גם לקבל השמאל ויד ימין. אתה יכול לקבל ש כיוון הידיים פונה עם נורמלי כיוון של כף היד, או כפי שהם קוראים לזה הכף הרגילה. מה עוד יש לנו? כמו כן, אנו, אופס. בואו ננסה ולגלול למטה בדרך זו. זרועות, האצבעות מיוצג על ידי האצבע מעמד, שהוא אובייקט pointable. אז כמו שאמרנו, ראיתי ש מערך של pointables לכל יד. אלה הם קטנים אצבעות לחשוב עליו. אז זה סקירה טובה ללכת דרך לנסות ולהבין. תומס Reimers: [לא ברור] האנטומיה את יד לשם. ARMAGHAN BEHLUM: כן, בדיוק. אז כן. יש הרבה של נתונים גולמיים ש Leap Motion לוקח גם במפרש בשבילך, אז זה נהדר הרעיון לעבור כאן ולנסות ולהבין איך יש Leap כבר הבנתי דברים בשבילך ואז מה מידע ש יש לי זמין משם. ואז משם אני ממליץ הולך לחלקו השמאלי זה כאן, אשר הולך, גם בעצם לא, הם אלה למעשה רק יותר דברים API על-- 

תומס Reimers: התייחסות API ב תחתון הוא בדרך כלל מקום טוב ללכת. אתם כנראה ראו את זה כש עשינו את Google Maps PSET. אבל ההתייחסות באמת רק עובר דרך כל של הפונקציות ופרמטרים זמין באובייקט אליך. 

ARMAGHAN BEHLUM: כן. לדוגמא, זה מה ש אני מחפש לפני. כאשר יש לנו ידנו יכול ללכת ולהבין איך Leap ממליץ לנו למצוא את יד. כמו שאמרתי קודם לכן, יש לנו מערך ידיים. גלו אם יש לנו את הידיים ו לאחר מכן נסה לתפוס ביד אחת כדי לקיים אינטראקציה עם בדרך זו. אז זה מה שאנחנו ממליץ בשבילכם. מחוות והדברים גם כן. תיעוד API זה הולך להיות כלי פנטסטי בשבילכם. האם יש לך המלצות אחרות? 

תומס Reimers: אני לא יודע. אני חושב שזה טוב לחברה. 

ARMAGHAN BEHLUM: כן, אני חושב שכן וכן. תרגיש חופשי לשלוח לנו דוא"ל ולקבל במגע על Leap Motion אם אתה נתקלת בבעיות אולי או זקוקים לכל המלצות. ואנחנו יכולים לנסות ולהבין דברים עם אתם גם כן. תודה לך. 

תומס Reimers: נהדר.