מדריך - PhotoBooth 1

אפליקצית תא צילום (photo booth)

היום תבנו אפליקציה ובה נשתמש במצלמה ונצלם תמונות.

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

עקבו אחרי ההוראות במסך זה ובצעו אותן ב-MIT App Inventor. נסו לבצע כל הנחיה בעצמכם, אם אתן לא בטוחות איך - לחצו על החץ משמאל להנחיה על מנת לקבל הוראות מפורטות יותר.

כך תראה האפליקציה:

מסך הקוד

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

ראשית נגדיר כי לחיצה על הכפתור מפעילה את המצלמה, נגרור את בלוק when TakePictureButton.Click ולתוכו נגרור את Camera1.TakePicture. הבלוק יראה כך:

לטובת כך נשתמש במשתנה גלובלי (global variable) שיזכור עבורנו מהו המשטח הבא שעלינו לשנות, מבין ארבעת המשטחים הקיימים.

מתוך קטגורית Built-in נבחר ב-variables (משתנים) ונבחר את בלוק “initialize global name to".

נשנה את השם name ל-canvasNum.

מתוך קטגורית Math (מתמטיקה) נבחרי את בלוק "0" ונחבר אותו לשקע של הבלוק של המשתנה החדש באופן הבא:

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

נוסיף את ה-procedure: מקטגורית ה-built-in נבחר ב-procedures ואז to procedure do.

במקום procedure נכתוב setPictureToCanvas, שיהיה שם התהליך. נלחץ על גלגל השיניים ובחלון שנפתח נגרור את input: x לתוך הצד הימני בו כתוב inputs. לתהליך יתווסף קלט בו נוכל להשתמש, נשנה את שמו של x להיות image.

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

בתוך התהליך, נבדוק מה הערך של המשתנה הגלובלי canvasNum.

אם הוא שווה ל-1, נשים את התמונה שצולמה בתור הרקע של Canvas1.

אם הוא שווה ל-2, נשים את התמונה ב-Canvas2, וכן הלאה.

לשם כך נשתמש בבלוק 'אם-אז-אחרת' (if-then-else).

נגרור את הבלוק מתוך קטגורית ה-control לתוך ה-procedure שיצרנו. נלחץ על גלגל השיניים ונגדיר שיהיו בתנאי 4 חלקים באמצעות גרירת else if משמאל לחלק הימני 3 פעמים.

נמלא את חלק ה'אם' (if) כך:

נגרור מקטגוריית ה-Math בלוק של שיוויון ונחבר אותו לשקע של ה-if.

בחלקו השמאלי נשים מספר מקטגוריית Math, ובחלקו הימני נשים את הערך של get global canvasNum, שנקח מקטגוריות ה-variables.

נמלא את חלק ה'אז' (then) כך:

נגרור בלוק set canvas1.BackgroundImage to ונחבר לשקע של ה-then.

ממשתנה ה-image שקיבלנו נקח את get image ונחבר אותם.

באותו אופן נמלא את כל שאר התנאים. שימו לב: ניתן ללחוץ בלחצן ימני על בלוק ולבחור באפשרות duplicate על מנת לשכפל אותו. אז נותר רק למקם אותו ולשנות את המספר ואת ה-Canvas שאנחנו משנים.

כעת נרצה להגדיר מספר פעולות שיקרו ברגע שצולמה תמונה חדשה.

נגדיל את הערך של canvasNum ב-1, אלא אם הערך הוא 4 ואז נשנה אותו ל-1.
נגדיר שהתהליך setPictureToCanvas שיצרנו יופעל ונעביר לו את התמונה החדשה.

ראשית נגרור בלוק מסוג when Camera1.AfterPicture, ובתוכו נגדיר את הפעולות האלו.

הבלוקים יראו כך בסופו של דבר:

כל הכבוד, סיימת את אפליקציה התמונות!

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

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

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