BluBerriSix - מסך מגע TFT / Arduino: 12 שלבים (עם תמונות)

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

2019 הוא יום השנה ה -20 ל- RIM Blackberry 850! ההמצאה הקנדית הקטנה הזו שינתה את הדרך שבה העולם מתקשר. היא חלפה מזמן, אך מורשתה ממשיכה!

במדריך זה תלמד כיצד להשתמש במגן תצוגת TFT 2.4 אינץ 'של MCUfriend.com עבור ה- Uno/Mega. תלמד כיצד להציג אובייקטים וטקסט גרפיים וכיצד לקבל נגיעות ולפעול על אירועי המגע. זה המסך דומה מאוד ל- Adafruit ולמגנים/מסכי TFT אחרים. אז אם אתה כאן, הישאר לתוכנית.

נבנה גרסת 2 אפליקציות פשוטה של הסקיצה שלי של bluBerriSIX.

בואו נתחיל!

שלב 1: BluBerriSIX - סקירה כללית

אפליקציית bluBerriSIX היא פרויקט TFT בעל שישה פונקציות.

זה כולל:

פנס

אפליקציית Saucy '7' (כמו כדור '8' מג'יק)

מחשבון

אפליקציית מדידת מרחק באמצעות חיישן המרחק הקולי SR-04

אפליקציית טמפרטורה ולחות שעושה רישום נתונים בזמן אמת עד 1.5 ק מ עם משדר HC-12

אפליקציית הודעות טקסט באמצעות HC-12.

הפרויקט הזה לקח 1100 שורות קוד. נבנה גרסה פשוטה בהרבה שעדיין מדגימה תצוגות TFT ומושגי חישת מגע.

שלב 2: מה נחוץ?

- אונו Arduino או מגה 2560

- מגן TFT 2.4 אינץ 'MCUfriend

הספריות הבאות:

- ספריית Adafruit_GFX

- ספריית מסך מגע של Adafruit

- ספריית MCUFRIEND_kbv

ניתן להתקין ספריות אלה עם מנהל הספרייה בתוך Arduino IDE.

כדי לטעון ספרייה, עבור לאפשרות התפריט Sketch -> Include Library -> Manage Libraries….

בשדה 'סנן את החיפוש שלך …', הזן את התווים הראשונים של שם החוברת ולאחר מכן בחר והתקן את הספרייה המתאימה. כשתסיים, פשוט תחזור מהמסך הזה.

בעת הרכבה של מגן ה- TFT ב- Uno/Mega, היזהר מאוד כדי לוודא שאתה מסדר את הסיכות בצורה נכונה. יישרתי לא נכון את המגן הראשון שלי וטיגנתי אותו. ביליתי שבועיים של תסכול גובר בניסיון למצוא ספריות נכונות לפני שהבנתי שהמסך מת. הזהר

שלב 3: הפרויקט שלנו

נבנה גרסה פשוטה יותר של הסקיצה של bluBerriSIX.

יהיה לזה, - מסך התזה

- מסך תפריט ראשי עם שני לחצנים

- אפליקציה של Saucy 7

- אפליקציית הזנת טקסט פשוטה יותר

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

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

שלב 4: קוד כותרת, משתנים גלובליים, הגדרת מסך

הפרויקט כולו מתועד מאוד. אבל הפרטים הבאים.

התחל פרויקט חדש של Arduino וקרא לו 'tft demo' או כל שם אחר שתרצה.

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

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

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

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

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

מחרוזות ומערכים cString, letter ו- letterX ו- letterY משמשים לא) להציג את האותיות בכפתורים לאפליקציית הזנת הטקסט וב) להתאים את קואורדינטות x ו- y של מגע עם קואורדינטות x ו- y של כל אות בהתאמה המקלדת. עוד על כך כשנגיע לאותו קטע של המערכון.

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

LastTouch ו- tThresh משמשים בשיטות המגע כדי לוודא שלא נגיע למספר נגיעות מלחיצה ארוכה מדי על המסך. עוד על כך בהמשך.

משתנה המצב ישלוט איזה מסך יוצג ומשתנה tMode ישלוט באילו שיטות מגע משמשות בכל זמן נתון.

בגוש ההתקנה (), אנו פותחים ערוץ סידורי אם נרצה להשתמש בפקודות Serial.println () לצורך איתור באגים. אינך זקוק לשורה זו אם אינך מעוניין לבצע איתור באגים של צג סידורי.

ארבע השורות הבאות הן רק קוד התקנה לאובייקט tft.

לאחר מכן הגדרנו את כיוון המסך למצב דיוקן.

הפקודה randomSeed () רק מפעילה את מחולל המספרים האקראיים לשימוש מאוחר יותר על ידי אפליקציית Saucy 7.

לבסוף אנו קוראים לשיטת מסך ההתזה.

שלב 5: בניית מסך האשפה והבנת מיפוי תצוגה מול מגע

כעת נתחיל בבניית מסך האשפה.

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

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

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

עבור לאזור של הסקיצה שלך מתחת לשיטת הלולאה () {} ונזין את קוד שיטת splash ().

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

לאחר מכן הגדרנו את גודל הטקסט ל- '5'. זהו גודל טקסט בסיסי יחסית גדול. הגדרנו את המיקום x ו- y עבור סמן הטקסט ואנו קובעים את צבע הטקסט. לבסוף פקודת ההדפסה ("TFT") למעשה מציירת את הטקסט הכחול בגודל '5' במיקום שצוין.

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

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

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

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

שלב 6: הכנת כלי אבחון למיפוי מגע

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

קדימה, הזן שיטה זו מתחת לשיטת splash () שנעשתה בעבר.

ככה זה עובד.

הצהרת ה- if קובעת אם עבר זמן מספיק מאז המגע האחרון. זה לוקח את זמן המערכת הנוכחי באלפיות השנייה () ומחסיר את זמן ה- Touch האחרון. אם הוא גדול מערך tThresh (200 אלפיות השנייה), הוא מקבל את המגע. אחרת, זה יתעלם מאירועים מרובי מגע מקריים.

לאחר מכן, הפקודה getpoint () מקבלת את קואורדינטות x, y ו- z של המגע. קואורדינטת z היא מדד ללחץ המגע.

אם הלחץ נמצא בתוך קבועי המקסימום והדקה שהגדרנו בכותרת הסקיצה, השיטה תחילה תשנה את סיכות YP ו- XM בחזרה ל- OUTPUT, ותכניס את המסך למצב DISPLAY.

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

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

הצהרת ה- if בתחתית השיטה בודקת אם נלחץ על כפתור 'הבית' במסך. האופרטורים '<=' מאפשרים את הרוחב והגובה של כפתור הבית. הקואורדינטות שצוין הן קואורדינטות מרכז x ומרכז y של כפתור הבית. אם לוחצים עליו, המצב מוגדר ל- 0 מה שאומר בסופו של דבר 'עבור למסך התפריט הראשי'. עוד על כך בהמשך.

לבסוף אנו מעדכנים את LastTouch לזמן המערכת הנוכחי מילי () כדי להתכונן לאירוע מגע מאוחר יותר.

אנא עבור כעת לחסום הלולאה () והוסף את השורה showTouch ();

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

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

pinMode (YP, OUTPUT); // לשחזר את סיכות השליטה ב- TFT

pinMode (XM, OUTPUT); // לתצוגה לאחר זיהוי מגע

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

כל הכבוד עד כה! קח הפסקה!

שלב 7: בנה את מסך התפריט הראשי

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

אנו מתחילים בהכנסת המסך למצב DISPLAY.

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

כעת אנו מציירים שני מלבנים שהם הכפתורים.

לכל הפקודות הגרפיות יש מבנה דומה:

graphicShape (קואורדינטות x, קואורדינטות y, רוחב, גובה, צבע)

- קואורדינטות x - שמאל למעלה לאובייקטים מלבניים, מרכז לעיגולים

קואורדינטות y - שמאל למעלה לאובייקטים מלבניים, מרכז לעיגולים

- רוחב - רוחב האובייקט בפיקסלים

- COLOR - קבוע צבע שהגדרנו בכותרת

לבסוף אנו קוראים לשתי שיטות לצייר את סמל Saucy 7 ואת סמל כניסת הטקסט QWERTY. אלה שיטות נפרדות.

שיטת draw7icon (0) לוקחת פרמטר שלם שהוא הקיזוז y עבור ציור הכדור. אנו עושים זאת על מנת שנוכל להשתמש באותה שיטה לציור הכדור במסך התפריט ובמסך האפליקציה Saucy 7. הקיזוז פשוט מאפשר לנו להתאים באופן מתכנת את קואורדינטת ה- y של הכדור למעלה או למטה.

שיטת draw7Ball (0) נקראת מתוך draw7Icon (0). הוא גם דורש פרמטר המאפשר לנו להתאים את המיקום האנכי של הכדור בהתאם אם נצייר אותו במסך התפריט או במסך האפליקציה.

הפקודה fillCircle () לוקחת 4 ארגומנטים.

- קואורדינטות x של מרכז המעגל

- קואורדינטת y של מרכז המעגל

- רדיוס המעגל (בפיקסלים)

- COLOR - קבוע צבע שהגדרנו בכותרת

לבסוף נקראת שיטת drawTextIcon () לצייר את הסמל של אפליקציית הזנת הטקסט.

תוכל לנסות להריץ את השיטה על ידי התייחסות לשיטת splash () בהגדרה () והוספת תפריט Screen ().

העלה את המערכון לארדואינו שלך ונסה אותו!

שלב 8: האפליקציה Saucy 7 ושיטות התפריט הראשי

שיטת SevenScreen () תצייר את המסך לאפליקציה, כולל ציור הכדור ולאחר מכן הצגת ההוראות.

שיטת SevenInstr () מציגה את ההוראות, כמו גם ניקוי המסך מתגובות קודמות. הוא מצייר גם את כפתור 'תגובה'.

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

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

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

אם תלחץ על כפתור הבית, הוא יסיים את האפליקציה ויחזור למסך התפריט הראשי. אחרת, השיטה תיצור מספר אקראי בין 0 ל- 7 (בלעדי) ותעביר את הודעת הטקסט המתאימה ממערך התגובה לשיטת show7Response ().

לבסוף, שיטת backToMenu () צופה בלחיצת כפתור הבית ומחזירה את השליטה למסך התפריט הראשי.

שיטת readMenuTouch () עוקבת אחר אירוע מגע כאשר אתה נמצא במסך התפריט הראשי. כאשר מזוהה מגע, הוא מעביר את קואורדינטות x ו- y לשיטת getFunc (x, y) המסתכלת במערכי funcX ו- funcY כך שיתאימו לקואורדינטות x ו- y של המגע. לאחר מכן הוא מחזיר את המספר ממערך func לאפליקציה שנבחרה. '1' הוא Saucy 7 ו- '2' היא אפליקציית הזנת הטקסט. לאחר מכן הוא מגדיר את המצב לערך של אותה אפליקציה כך שהאפליקציה תבוצע.

שלב 9: בלוק הלולאה ()

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

שיטת הלולאה () מורכבת משני מבני מתג ().

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

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

טען את הסקיצה לתוך Arduino שלך ואתה אמור להיות מסוגל לבחור ולהשתמש באפליקציית Saucy 7.

עשית הרבה עבודה! קח הפסקה:-)

שלב 10: אפליקציית הזנת הטקסט - אנחנו במתח הבית

כעת נשלב את השיטות של אפליקציית הזנת הטקסט.

makeKbd () מצייר את המקלדת על המסך.

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

שיטת readKbdTouch () פועלת בדומה לשיטות אחרות לזיהוי מגע.

אם מתגלה מגע שאינו בכפתור הבית, הוא מעביר את קואורדינטות x ו- y לשיטת curChar (x, y) המחזירה את התו המתאים למיקום ה- x וה- y על המסך. ההודעה ש'הקלדה 'מוצגת לאחר מכן על המסך בשיטת' displayMsg (theChar).

שיטת curChar (x, y) מחפשת בין מערכי letterX ו- letterY כדי למצוא התאמה הקרובה לקואורדינטות x ו- y שהועברו מ- readKbdTouch (). אם הוא מוצא התאמה, הוא מחזיר את האות המתאימה לשיטת readKbdTouch. שים לב שנאתחל את משתנה theChar ל- 32 שהוא קוד ASCII עבור תו רווח . אנו עושים זאת כך שאם המשתמש יגע באזור הרחק מהמקלדת, הוא לא יציג תווים שאינם זמינים.

שיטת displayMsg (theChar) לוקחת את התו המוחזר מ- curChar (x, y) ומוסיפה אותו למחרוזת msg. לאחר מכן הוא מציג את ההודעה על המסך.

לבסוף, נעדכן את בלוק הלולאה () כדי לקבל את בחירת האפליקציה להזנת טקסט.

העלה את סקיצת tftDemo לארדואינו שלך ותוכל להשתמש באפליקציה שהושלמה.

מזל טוב! בנית אפליקציית מסך מגע TFT! קח את שאר היום חופש!

שלב 11: מקבל חלקלק! - שימוש בגופני מפת סיביות של Adafruit בסקיצה שלך

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

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

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

באזור הכותרת של הסקיצה שלך, הוסף את הפניה לגופן שבו ברצונך להשתמש. נשתמש בגופן FreeSerifBoldItalic18p7b לדוגמה זו.

#לִכלוֹל

בשיטת splash () שלך, הגיב על tft.setTextSize (); פקודה.

הוסף את הפקודה הבאה,

tft.setFont (& FreeSerifBoldItalic18pt7b);

כעת כל פקודת הדפסה () תשתמש בגופן שצוין כרגע. כדי לעבור לגופן אחר, היית משתמש בפקודה tft.setFont () אחרת עם הגופן הבא שתרצה להשתמש בו.

כדי להחזיר את הגופן לגופן tft הרגיל, פשוט השתמש ב- tft.setFont (); פקודה ללא פרמטר.

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

שלב 12: מחשבות אחרונות

קיימות פקודות רבות אחרות של אובייקטים גרפיים לרשותך. הם כוללים:

tft.drawRect (x, y, רוחב, גובה, COLOR);

tft.drawLine (x1, y1, x2, y2, COLOR);

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

tft.drawRoundRect (x, y, רוחב, גובה, רדיוס, tft.color565 (255, 0, 0)); // זה יהיה אדום

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // זה יהיה ירוק

tft.drawTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (0, 0, 255)); // כחול

tft.fillTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (255, 0, 0);

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

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

מסכי TFT יכולים להוסיף היבט ממשק משתמש גרפי אטרקטיבי ושימושי לפרויקטים שלך ב- Arduino.

תודה על העבודה על הדרכה זו.

עכשיו צא החוצה והפוך משהו למופלא!