BluBerriSix - برنامج تعليمي لشاشة TFT TouchScreen / Arduino: 12 خطوة (مع صور)

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:39

2019 هو الذكرى السنوية العشرين لجهاز RIM Blackberry 850! غير هذا الاختراع الكندي الصغير الطريقة التي يتواصل بها العالم. لقد مضى وقت طويل ، لكن إرثه يستمر!

في هذا الدليل ، ستتعلم كيفية استخدام MCUfriend.com 2.4 درع شاشة TFT لـ Uno / Mega. ستتعلم كيفية عرض الكائنات الرسومية والنصوص وكيفية تلقي اللمسات والتصرف على أحداث اللمس. هذا الشاشة تشبه إلى حد بعيد Adafruit وغيرها من الدروع / الشاشات TFT ، لذا إذا كنت هنا ، فانتظر للعرض.

سنقوم ببناء نسخة مبسطة من تطبيقين من رسم bluBerriSIX الخاص بي.

هيا بنا نبدأ!

الخطوة 1: BluBerriSIX - نظرة عامة

تطبيق bluBerriSIX هو مشروع TFT سداسي الوظائف.

ويشمل:

كشاف

تطبيق Saucy '7' (مثل Magic '8' Ball)

آلة حاسبة

تطبيق قياس المسافة باستخدام مستشعر المسافة بالموجات فوق الصوتية SR-04

تطبيق درجة الحرارة والرطوبة الذي يقوم أيضًا بتسجيل البيانات في الوقت الفعلي لمسافة تصل إلى 1.5 كيلومتر باستخدام جهاز الإرسال والاستقبال HC-12

تطبيق رسائل نصية باستخدام HC-12.

استغرق هذا المشروع 1100 سطر من التعليمات البرمجية. سنقوم ببناء إصدار أبسط إلى حد كبير لا يزال يعرض مفاهيم شاشة TFT واستشعار اللمس.

الخطوة الثانية: ما المطلوب؟

- Arduino Uno أو Mega 2560

- درع MCUfriend مقاس 2.4 بوصة بتقنية TFT

المكتبات التالية:

- مكتبة Adafruit_GFX

- مكتبة Adafruit Touchscreen

- مكتبة MCUFRIEND_kbv

يمكن تثبيت هذه المكتبات باستخدام Library Manager داخل Arduino IDE.

لتحميل مكتبة ، انتقل إلى خيار القائمة Sketch -> Include Library -> Manage Libraries….

في حقل "تصفية البحث …" ، أدخل الأحرف القليلة الأولى من اسم المكتبة ثم حدد المكتبة المناسبة وقم بتثبيتها. عند الانتهاء ، عد للخروج من هذه الشاشة.

عند تركيب درع TFT على Uno / Mega ، كن حذرًا جدًا للتأكد من محاذاة المسامير بشكل صحيح. أنا أخطأت في محاذاة درعتي الأولى وقليتها. لقد أمضيت أسبوعين من الإحباط المتزايد في محاولة للعثور على المكتبات الصحيحة قبل أن أدرك أن الشاشة قد ماتت. كن حذرا

الخطوة الثالثة: مشروعنا

سنقوم ببناء نسخة أبسط من رسم bluBerriSIX.

سوف يكون ،

- شاشة البداية

- شاشة قائمة رئيسية بها زرين

- تطبيق Saucy 7

- تطبيق إدخال نص مبسط

ستتمكن أيضًا من العودة إلى القائمة الرئيسية بالضغط على أيقونة "الصفحة الرئيسية" في الجزء السفلي الأيسر من هذه الشاشة المعينة. إذا لم يكن لديك مثل هذا الرمز ، فكل ما عليك فعله هو تحديد المنطقة "الرئيسية" في شاشتك. ستتعلم كيفية تحديد مناطق لمس الشاشة في هذا البرنامج التعليمي.

على الرغم من أن هذا مشروع مبسط ، إلا أنه لا يزال طويلاً نوعًا ما. سأقدم نسخًا من رسومات Arduino في كل مرحلة رئيسية حتى تتمكن من تحميلها إذا كنت ترغب في ذلك.

الخطوة 4: رمز العنوان ، المتغيرات العامة ، إعداد الشاشة

المشروع بأكمله موثق للغاية. لكن التفاصيل تتبع.

ابدأ مشروع Arduino جديدًا وأطلق عليه اسم "tft demo" أو أي اسم آخر تريده.

توضح لنا لوحة الكود الأولى أعلاه تحديد المتغيرات العالمية. نضيف أيضًا إلى المكتبات التي سنحتاج إلى استخدامها لكل من وظيفة عرض الشاشة والكشف باللمس للشاشة.

نحدد أيضًا الدبابيس التناظرية بالإشارة إلى الأغراض الخاصة بالشاشة.

نحدد كائن tft (العرض) وكائن ts (اللمس) كمراجع لوظائف كل منهما.

نحدد بعض ثوابت الألوان ذات 16 بت لتسهيل عرض ألوان الشاشة وكائنات النص والرسومات. ستلاحظ وجود عنوان URL لموقع ويب يحتوي على Color Picker ومحول لتحويل الألوان المرئية إلى قيمها السداسية العشرية ذات 16 بت. إنها أداة مفيدة للغاية.

في لوحة الكود الثانية ، نحدد المتغيرات العامة لأغراضنا الخاصة بالتطبيق.

تُستخدم السلاسل والمصفوفات cString و letter و letter X و letter Y من أجل أ) عرض الأحرف على الأزرار الخاصة بتطبيق إدخال النص و ب) مطابقة إحداثيات x و y للمسة مع إحداثيات x و y لكل حرف ذي صلة على لوحة المفاتيح. المزيد عن هذا عندما نصل إلى هذا القسم من الرسم التخطيطي.

funcX و funcY و func عبارة عن مصفوفات تعمل على تحديد زر التطبيق الذي تم الضغط عليه على شاشة القائمة الرئيسية ثم استخدام هذه المعلومات لتشغيل التطبيق المعني.

يتم استخدام lastTouch و tThresh في طرق اللمس للتأكد من عدم حصولنا على لمسات متعددة من الضغط على الشاشة لفترة طويلة. المزيد عن ذلك لاحقًا.

سيتحكم متغير الوضع في الشاشة التي يتم عرضها وسيتحكم متغير tMode في طرق اللمس التي يتم استخدامها في أي وقت.

في كتلة الإعداد () ، نفتح قناة تسلسلية إذا أردنا استخدام أوامر Serial.println () لتصحيح الأخطاء. لا تحتاج إلى هذا الخط إذا كنت لا ترغب في إجراء تصحيح أخطاء Serial Monitor.

الأسطر الأربعة التالية هي مجرد رمز إعداد لكائن tft.

بعد ذلك ، قمنا بتعيين اتجاه الشاشة إلى الوضع الرأسي.

يبدأ الأمر randomSeed () فقط في إنشاء مولد الأرقام العشوائية لاستخدامه لاحقًا بواسطة تطبيق Saucy 7.

أخيرًا نسمي طريقة شاشة البداية.

الخطوة 5: إنشاء شاشة Spash وفهم الشاشة مقابل رسم الخرائط باللمس

سنبدأ الآن في بناء شاشة Spash.

لكن أولاً ، يرجى إلقاء نظرة على الصورة لتعيين الشاشة واللمس. لاحظ أن الأصول في مواقع مختلفة. للعرض ، يكون الأصل (0 ، 0) في أعلى يسار الشاشة (عندما يكون زر إعادة الضبط في الأعلى) وينمو من اليسار إلى اليمين ومن أعلى إلى أسفل.

بالنسبة لاكتشاف اللمس ، يكون الأصل في الزاوية اليسرى السفلية من الشاشة وينمو من اليسار إلى اليمين ومن الأسفل إلى الأعلى.

لذلك يتم تحديد خرائط العرض واللمس بشكل منفصل ولها دقة مختلفة. تبلغ دقة الشاشة 240 × 320 ويتمتع اللمس بدقة أعلى بكثير كما سترى قريبًا.

انتقل إلى منطقة من الرسم الخاص بك أسفل طريقة الحلقة () {} وسنقوم بإدخال كود طريقة splash ().

نبدأ بتنفيذ أمر fillScreen () لملء الشاشة باللون الأبيض الذي حددناه في كود العنوان.

ثم قمنا بتعيين حجم النص على "5". هذا حجم نص أساسي كبير نسبيًا. قمنا بتعيين الموضعين x و y لمؤشر النص وقمنا بتعيين لون النص. أخيرًا ، يقوم الأمر print ("TFT") برسم النص الأزرق بحجم "5" في الموضع المحدد.

كلما زادت حجم النص ، ستلاحظ أن الأحرف أصبحت مكتنزة أكثر فأكثر. لذا ربما لا يكون تجاوز 5 أمرًا مفيدًا. في نهاية هذا البرنامج التعليمي ، سأوضح لك كيفية استخدام الخطوط النقطية للحصول على نص أجمل في تطبيقاتك ، والمقايضة هي أن استخدام مجموعات الخطوط النقطية يستهلك الكثير من الذاكرة في Arduino مما سيحد من أحجام الرسومات الخاصة بك

نكرر أوامر مماثلة للعنصرين النصيين الآخرين على شاشة البداية.

أخيرًا ، نتأخر لمدة 2.5 ثانية لمنح المستخدم فرصة لقراءة محتويات الشاشة قبل أن ينتقل التطبيق إلى شاشة القائمة الرئيسية.

انطلق وقم بتحميل هذا الرسم التخطيطي على Arduino الخاص بك. يجب أن تعرض شاشة البداية.

الخطوة 6: عمل أداة تشخيص رسم الخرائط باللمس

طريقة showTouch () مفيدة جدًا لمساعدتك في الحصول على إحداثيات اللمس لأجزاء مختلفة من الشاشة. ستحتاج إلى القيام بذلك لتحديد مناطق اللمس لأزرارك.

استمر وأدخل هذه الطريقة أسفل طريقة splash () التي قمت بها مسبقًا.

وإليك كيف يعمل.

تحدد عبارة if ما إذا كان قد مر وقت كافٍ منذ اللمسة الأخيرة. يستغرق وقت النظام الحالي بالمللي () ويطرح آخر لمسة. إذا كانت أكبر من قيمة tThresh (200 مللي ثانية) ، فإنها تقبل اللمس. وإلا فإنه سيتجاهل أحداث اللمس المتعدد العرضية.

بعد ذلك ، يحصل الأمر getpoint () على إحداثيات اللمس x و y و z. الإحداثي z هو مقياس ضغط اللمس.

إذا كان الضغط ضمن الثوابت القصوى والدقيقة التي حددناها في رأس الرسم ، فستقوم الطريقة أولاً بتغيير دبابيس YP و XM مرة أخرى إلى OUTPUT ، مما يضع الشاشة في وضع DISPLAY.

بعد ذلك ، سيرسم مستطيلًا أبيض لمحو أي إحداثيات قد تكون معروضة مسبقًا.

ثم يضبط الرسم الخط على الحجم 2 ، اللون الأسود ويعرض إحداثيات x (p.x) و y (p.y) على الشاشة. يمكنك بعد ذلك تدوين هذه المواقع لمساعدتك في برمجة مناطق اللمس الخاصة بك للرسومات الخاصة بك.

تحقق عبارة if في الجزء السفلي من الطريقة لمعرفة ما إذا تم الضغط على زر "الصفحة الرئيسية" على الشاشة. تسمح عوامل التشغيل "<=" بعرض وارتفاع زر الصفحة الرئيسية. الإحداثيات المحددة هي إحداثيات x-center و y-center لزر Home. إذا تم الضغط عليه ، يتم تعيين الوضع على 0 والذي سيعني في النهاية "الانتقال إلى شاشة القائمة الرئيسية". المزيد عن ذلك لاحقًا.

أخيرًا ، نقوم بتحديث lastTouch إلى وقت النظام الحالي بالمللي () للاستعداد لحدث اللمس اللاحق.

يرجى الآن الانتقال إلى كتلة الحلقة () وإضافة السطر showTouch () ؛

في هذه المرحلة ، قم بتحميل الرسم الخاص بك وجربه. سيتم رسم شاشة البداية وإذا بدأت في لمس الشاشة ، فسيتم عرض إحداثيات TOUCH x و y على الشاشة.

قبل المضي قدمًا ، دعنا نعيد النظر في سطرين مهمين من التعليمات البرمجية:

pinMode (YP ، الإخراج) ؛ // استعادة دبابيس التحكم TFT

pinMode (XM ، الإخراج) ؛ // للعرض بعد اكتشاف اللمس

في أي وقت تريد فيه عرض شيء ما على الشاشة ، يجب عليك تنفيذ هذين الأمرين لتغيير الشاشة من وضع اللمس إلى وضع العرض. خلاف ذلك ، لن تعمل أوامر العرض الخاصة بك.

أحسنت صنعًا حتى الآن! خذ استراحة!

الخطوة 7: إنشاء شاشة القائمة الرئيسية

سنقوم الآن ببناء شاشة القائمة الرئيسية الخاصة بنا باستخدام زرين يمكنك الضغط عليهما لتنشيط كل تطبيق. هذه الطريقة تسمى menuScreen ().

نبدأ بوضع الشاشة في وضع العرض.

ثم نقوم بتعيين حجم الخط ولونه وموضعه وطباعة نص "القائمة الرئيسية".

نرسم الآن مستطيلين هما الأزرار.

جميع أوامر الرسومات لها هيكل مماثل:

الشكل البياني (إحداثيات س ، إحداثيات ص ، عرض ، ارتفاع ، لون)

- إحداثيات س - أعلى اليسار للأشياء المستطيلة ، مركز الدوائر

- إحداثي ص - أعلى اليسار للأشياء المستطيلة ، مركز الدوائر

- العرض - عرض الكائن بالبكسل

- اللون - ثابت اللون الذي حددناه في العنوان

أخيرًا ، نطلق على طريقتين لرسم أيقونة Saucy 7 وأيقونة QWERTY Text Entry. هذه طرق منفصلة.

تأخذ طريقة draw7icon (0) معامل عدد صحيح وهو إزاحة y لرسم الكرة. نقوم بذلك حتى نتمكن من استخدام نفس الطريقة لرسم الكرة على شاشة القائمة وعلى شاشة تطبيق Saucy 7. تسمح لنا الإزاحة فقط بضبط إحداثيات y للكرة بشكل برمجي لأعلى أو لأسفل.

يتم استدعاء طريقة draw7Ball (0) من داخل draw7Icon (0). يتطلب الأمر أيضًا معلمة تسمح لنا بضبط الوضع الرأسي للكرة اعتمادًا على ما إذا كنا نرسمها على شاشة القائمة أو على شاشة التطبيق.

يأخذ الأمر fillCircle () 4 وسيطات.

- إحداثيات س لمركز الدائرة

- إحداثي ص لمركز الدائرة

- نصف قطر الدائرة (بالبكسل)

- اللون - ثابت اللون الذي حددناه في العنوان

أخيرًا ، تم استدعاء طريقة drawTextIcon () لرسم أيقونة تطبيق إدخال النص.

يمكنك محاولة تشغيل الطريقة عن طريق التعليق على طريقة splash () في الإعداد () وإضافة menuScreen ().

قم بتحميل المخطط على Arduino الخاص بك وجربه!

الخطوة 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: تطبيق إدخال النص - نحن في Home Stretch

سنقوم الآن بدمج طرق تطبيق إدخال النص.

يقوم makeKbd () برسم لوحة المفاتيح على الشاشة.

يرسم ستة مستطيلات مستديرة الشكل معبأة ثم يقوم بتراكب الحرف المناسب على كل "مفتاح" عن طريق الحصول على الحرف من سلسلة cString التي تطبعها على الشاشة فوق المفتاح. لاحظ أن المعلمة الأخيرة الثانية في أمر fillRoundedRect () هي نصف قطر كل زاوية بالبكسل. كلما زادت هذه القيمة ، زادت تقريب الزوايا.

تعمل طريقة readKbdTouch () بطريقة مشابهة لطرق اكتشاف اللمس الأخرى.

إذا تم اكتشاف لمسة ليست على زر الصفحة الرئيسية ، فإنها تمرر إحداثيات x و y إلى طريقة curChar (x ، y) التي تُعيد الحرف الذي يتوافق مع موقع x و y على الشاشة. ثم يتم عرض الرسالة التي تم "كتابتها" على الشاشة باستخدام طريقة "displayMsg (theChar).

تبحث طريقة curChar (x، y) في مصفوفتي letterX و letterY لمحاولة العثور على تطابق قريب من إحداثيات x و y التي تم تمريرها من readKbdTouch (). إذا وجد تطابقًا ، فإنه يعيد الحرف المقابل إلى طريقة readKbdTouch. لاحظ أننا قمنا بتهيئة متغير Char إلى 32 وهو رمز ASCII لحرف مسافة ، ''. نقوم بذلك بحيث إذا لمس المستخدم منطقة بعيدة عن لوحة المفاتيح ، فلن يعرض الأحرف غير المتوفرة.

تأخذ طريقة displayMsg (theChar) الحرف الذي تم إرجاعه من curChar (x، y) وإلحاقه بسلسلة msg. ثم يعرض الرسالة على الشاشة.

أخيرًا ، سنقوم بتحديث كتلة الحلقة () لقبول اختيار تطبيق إدخال النص.

قم بتحميل رسم tftDemo على Arduino الخاص بك ويجب أن تكون قادرًا على استخدام التطبيق المكتمل.

تهانينا! لقد قمت بإنشاء تطبيق شاشة تعمل باللمس TFT! خذ بقية اليوم إجازة!

الخطوة 11: الحصول على بقعة! - استخدام خطوط Adafruit Bitmap في رسمك التخطيطي

مجموعة خطوط tft القياسية على ما يرام. ولكن من الأجمل أن نتمكن من استخدام الخطوط النقطية المناسبة في رسومات TFT الخاصة بنا.

الجانب السلبي هو أن يتم تعيين خط التحميل في ذاكرة Arduino يشغل مساحة كبيرة. في الواقع ، من السهل جدًا ملء الرسم الخاص بك بالعديد من الخطوط التي لن يتم تحميلها في Arduino.

تتوفر الخطوط داخل مجلد مكتبة Adafruit_GFX الذي قمت بتثبيته بالفعل لهذا المشروع. يوجد برنامج تعليمي ممتاز حول استخدام الخطوط في هذا الموقع.

في منطقة رأس الرسم الخاص بك ، أضف مرجع الخط للخط الذي ترغب في استخدامه. سنستخدم الخط FreeSerifBoldItalic18p7b لهذا المثال.

#يشمل

في طريقة splash () الخاصة بك ، قم بالتعليق على tft.setTextSize () ؛ أمر.

أضف الأمر التالي ،

tft.setFont (& FreeSerifBoldItalic18pt7b) ،

الآن ستستخدم أي أوامر print () الخط المحدد حاليًا. للتغيير إلى خط مختلف ، يمكنك استخدام أمر tft.setFont () آخر مع الخط التالي الذي تريد استخدامه.

لإعادة الخط إلى الخط القياسي tft ، ما عليك سوى استخدام tft.setFont () ؛ أمر بدون معلمة.

قم بتحميل المخطط على Arduino الخاص بك وسترى شاشة البداية تستخدم الآن الخط النقطي لعرض النص على الشاشة. ستلاحظ أن حجم الرسم التخطيطي أكبر بكثير الآن بعد أن قمت بتضمين خط.

الخطوة 12: الأفكار النهائية

هناك العديد من أوامر الكائن الرسومي الأخرى المتاحة لك. يشملوا:

tft.drawRect (س ، ص ، عرض ، ارتفاع ، لون) ؛

tft.drawLine (x1 ، y1 ، x2 ، y2 ، اللون) ؛

تستخدم الأمثلة التالية الأسلوب 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 الخاصة بك.

شكرا للعمل من خلال هذا البرنامج التعليمي.

انطلق الآن واجعل شيئًا رائعًا!