ממשק משתמש אינטראקטיבי פשוט להוראה והערכה: 11 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:17

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

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

שלב 1: תכנות הממשק בעיבוד (התקנה)

הגדרנו את המשתנים שבהם ישתמשו, המיקום של כל החלקים כמערכים של x ו- y, וכן מערכים לתמונות של כל אחד מהחלקים לתפריט Teach (imgA) ו- Evaluate (img), מערך כדי לבדוק אם התשובות נכונות ומערכים עבור החלונות והמנעולים, שיקבעו אם העכבר נמצא מעל החלקים ואם הוא מנסה לאסוף אותם. לאחר מכן המשך לאתחל אותם ופתח את הנמל שממנו הממשק עומד לתקשר עם ה- Arduino.

שלב 2: תכנות הממשק בעיבוד (תפריט ראשי)

ראשית, התפריט הראשי הוא יציג שני לחצנים, וכאשר אחד מהם יילחץ, התוכנית תטעין את התפריט "ללמד" או את התפריט "הערך".

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

שלב 3: תכנות הממשק בעיבוד (תפריט "ללמד")

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

שלב 4: תכנות הממשק בעיבוד (תפריט "הערכה")

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

שלב 5: כאשר לוחצים על העכבר

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

שלב 6: כאשר העכבר נגרר

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

שלב 7: כשמשחררים את העכבר

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

שלב 8: תקשורת עם הארדואינו

אז עכשיו אם אתה לוחץ על הכפתור על הארדואינו, הוא בודק אם אתה שם את כל החלקים הנכונים במקום ואומר לך אם הוא נכון או לא נכון, ואז שולח "1" אם הוא נכון או "2" אם הוא טועה ל- ארדואינו.

שלב 9: הגדרת ה- Arduino (ערכה)

זו הייתה התוכנית ששימשה את הארדואינו, אך עם כפתור ארקייד, כך שהחוט הירוק של הכפתור יגיע למחבר התחתון בכפתור (COM) והחוט האדום יגיע לאחד האמצעי (NO). נגד 220Ω שימש ללדים, 1kΩ לכפתור.

שלב 10: תכנות הארדואינו

כעת, הוא מגדיר את הכפתור כ- INPUT על הפין הדיגיטלי 2 ואת הנורות כ- OUTPUT ב- 4, 6 ו- 8. לאחר מכן מגדיר את הפורט וקורא אותו, אם הוא מקבל "1" (תשובה נכונה) הוא ידליק את 3 נוריות אחת אחת, אם הוא מקבל "2" (תשובה לא נכונה) הוא היה מאיר רק אחת מהן. כמו כן, אם תלחץ על הכפתור, הוא ישלח "e" לממשק.

שלב 11: זה הכל, תהנה

להלן הקודים המשמשים לפרויקט זה: