Arduino Uno: الرسوم المتحركة النقطية على ILI9341 TFT Touchscreen Shield with Visuino: 12 Steps (with Pictures)

2025 مؤلف: John Day | [email protected]. آخر تعديل: 2025-01-13 06:56

تعتبر شاشات العرض التي تعمل باللمس من نوع TFT والتي تستند إلى ILI9341 دروع عرض منخفضة التكلفة شائعة الاستخدام في Arduino. لقد حظيت Visuino بدعمهم لفترة طويلة ، لكن لم تتح لي الفرصة مطلقًا لكتابة برنامج تعليمي حول كيفية استخدامها. في الآونة الأخيرة ، سأل عدد قليل من الأشخاص أسئلة حول استخدام شاشات العرض باستخدام Visuino ، لذلك قررت إجراء برنامج تعليمي.

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

الخطوة 1: المكونات

1. لوحة واحدة متوافقة مع Arduino Uno (قد تعمل مع Mega أيضًا ، لكنني لم أختبر الدرع بها حتى الآن)
2. واحد ILI9341 2.4 "TFT Touch Screen Shield لاردوينو

الخطوة 2: قم بتوصيل ILI9341 TFT Touchscreen Shield بـ Arduino

قم بتوصيل TFT Shield أعلى Arduino Uno كما هو موضح في الصور

الخطوة 3: ابدأ Visuino وأضف درع شاشة TFT

لبدء برمجة Arduino ، ستحتاج إلى تثبيت Arduino IDE من هنا:

تأكد من تثبيت 1.6.7 أو أعلى ، وإلا فلن يعمل هذا Instructable

يحتاج Visuino: https://www.visuino.com أيضًا إلى التثبيت.

1. ابدأ Visuino كما هو موضح في الصورة الأولى
2. انقر فوق الزر "Arrow Down" الخاص بمكون Arduino لفتح القائمة المنسدلة (الصورة 1)
3. من القائمة حدد "إضافة دروع …" (الصورة 1)
4. في مربع الحوار "Shields" ، قم بتوسيع فئة "Displays" ، وحدد "شاشة TFT Color Touch Screen Display ILI9341 Shield" ، ثم انقر فوق الزر "+" لإضافتها (الصورة 2)

الخطوة 4: في Visuino: أضف Draw Text Element لـ Text Shadow

بعد ذلك ، نحتاج إلى إضافة عناصر الرسومات لتقديم النص والصورة النقطية. أولاً سنضيف عنصر رسومي لرسم ظل النص:

1. في Object Inspector ، انقر فوق الزر "…" بجوار قيمة خاصية "Elements" لعنصر "TFT Display" (الصورة 1)
2. في محرر العناصر ، حدد "رسم نص" ، ثم انقر فوق الزر "+" (الصورة 2) لإضافة واحد (الصورة 3)
3. في مفتش الكائن ، اضبط قيمة خاصية "اللون" لعنصر "رسم النص 1" على "aclSilver" (الصورة 3)
4. في مفتش الكائن ، عيّن قيمة خاصية "الحجم" للعنصر "رسم النص 1" إلى "4" (الصورة 4). هذا يجعل النص أكبر
5. في مفتش الكائن ، اضبط قيمة خاصية "النص" لعنصر "رسم النص 1" على "Visuino" (الصورة 5)
6. في مفتش الكائن ، اضبط قيمة الخاصية "X" للعنصر "Draw Text1" على "43" (الصورة 6)
7. في مفتش الكائن ، اضبط قيمة الخاصية "Y" للعنصر "Draw Text1" على "278" (الصورة 6)

الخطوة 5: في Visuino: أضف Draw Text Element لمقدمة النص

سنقوم الآن بإضافة عنصر رسومي لرسم النص:

1. في محرر العناصر ، حدد "رسم نص" ، ثم انقر فوق الزر "+" (الصورة 1) لإضافة الزر الثاني (الصورة 2)
2. في مفتش الكائن ، اضبط قيمة خاصية "الحجم" للعنصر "رسم النص 1" على "4" (الصورة 2)
3. في مفتش الكائن ، اضبط قيمة خاصية "النص" لعنصر "رسم النص 1" على "Visuino" (الصورة 3)
4. في مفتش الكائن ، اضبط قيمة الخاصية "X" للعنصر "Draw Text1" على "40" (الصورة 4)
5. في مفتش الكائن ، اضبط قيمة الخاصية "Y" للعنصر "Draw Text1" على "275" (الصورة 4)

الخطوة 6: في Visuino: أضف Draw Bitmap Element للرسوم المتحركة

بعد ذلك سنضيف عنصر رسومي لرسم الصورة النقطية:

1. في محرر العناصر ، حدد "رسم صورة نقطية" ، ثم انقر فوق الزر "+" (الصورة 1) لإضافة واحدة (الصورة 2)
2. في Object Inspector ، انقر فوق الزر "…" بجوار قيمة الخاصية "Bitmap" للعنصر "Draw Bitmap1" (الصورة 2) لفتح "محرر الصور النقطية" (الصورة 3)
3. في "محرر الصور النقطية" ، انقر فوق الزر "تحميل …" (الصورة 3) لفتح مربع حوار فتح الملف (الصورة 4)
4. في مربع حوار فتح الملف ، حدد الصورة النقطية للرسم ، وانقر فوق الزر "فتح" (الصورة 4). إذا كان الملف كبيرًا جدًا ، فقد لا يكون قادرًا على احتوائه في ذاكرة Arduino. إذا خرجت من خطأ في الذاكرة أثناء التجميع ، فقد تحتاج إلى تحديد صورة نقطية أصغر
5. في "محرر الصور النقطية" انقر فوق "موافق". زر (صورة 5) لإغلاق مربع الحوار

الخطوة 7: في Visuino: أضف دبابيس لخصائص X و Y لعنصر رسم نقطي

لتحريك الصورة النقطية ، نحتاج إلى التحكم في موضعها X و Y. لهذا سنضيف دبابيس لخصائص X و Y:

1. في Object Inspector ، انقر فوق الزر "تثبيت" أمام خاصية "X" لعنصر "Draw Bitmap1" (الصورة 1) ، وحدد "Integer SinkPin" (الصورة 2)
2. في Object Inspector ، انقر فوق الزر "Pin" أمام خاصية "Y" لعنصر "Draw Bitmap1" (الصورة 3) ، وحدد "Integer SinkPin" (الصورة 4)

الخطوة 8: في Visuino: أضف مولدين جيبيين صحيحين ، وقم بتكوين الأول

سنستخدم مولدين جيبيين عدد صحيح لتحريك حركة الصورة النقطية:

1. اكتب "sine" في مربع Filter من Component Toolbox ثم حدد مكون "Sine Integer Generator" (الصورة 1) ، وقم بإسقاط اثنين منهم في منطقة التصميم
2. في عارض الكائنات ، عيّن قيمة خاصية "Amplitude" لمكون SineIntegerGenerator1 على "96" (الصورة 2)
3. في عارض الكائنات ، عيّن قيمة خاصية "الإزاحة" لمكون SineIntegerGenerator1 على "96" (الصورة 3)
4. في عارض الكائنات ، عيّن قيمة خاصية "التردد" لمكون SineIntegerGenerator1 على "0.2" (الصورة 4)

الخطوة 9: في Visuino: تكوين مولد الجيب الثاني ، وتوصيل مولدات الجيب بدبابيس تنسيق X و Y في الصورة النقطية

1. في Object Inspector ، عيّن قيمة خاصية "Amplitude" لمكون SineIntegerGenerator2 على "120" (الصورة 1)
2. في مفتش الكائنات ، اضبط قيمة خاصية "الإزاحة" لمكون SineIntegerGenerator2 على "120" (الصورة 2)
3. في Object Inspector ، عيّن قيمة خاصية "Frequency" لمكون SineIntegerGenerator2 على "0.03" (الصورة 3)
4. قم بتوصيل دبوس الإخراج "Out" لمكون SineIntegerGenerator1 بدبوس الإدخال "X" لعنصر "Shields. TFT Sisplay. Elements. Draw Bitmap1" لمكون Arduino (الصورة 4)
5. قم بتوصيل دبوس الإخراج "Out" لمكون SineIntegerGenerator2 بدبوس الإدخال "Y" الخاص بعنصر "Shields. TFT Display. Elements. Draw Bitmap1" لمكون Arduino (الصورة 5)

الخطوة 10: في Visuino: أضف مكونات Start و Clock متعددة المصادر وقم بتوصيلها

لتقديم الصورة النقطية في كل مرة يتم فيها تحديث الموضعين X و Y ، نحتاج إلى إرسال إشارة ساعة إلى عنصر "Draw Bitmap1". لإرسال الأمر بعد تغيير المواقف ، نحتاج إلى طريقة لمزامنة الأحداث. لهذا ، سنستخدم مكون Repeat لإنشاء أحداث باستمرار ، و Clock Multi Source لإنشاء حدثين متسلسلين. سيعمل الحدث الأول على تسجيل المولدات الجيبية لتحديث الموضعين X و Y ، بينما سيساهم الحدث الثاني في تسجيل "Draw Bitmap1":

1. اكتب "تكرار" في مربع التصفية في مربع أدوات المكونات ، ثم حدد مكون "تكرار" (الصورة 1) ، وقم بإفلاته في منطقة التصميم (الصورة 2)
2. اكتب "multi" في مربع Filter من Component Toolbox ، ثم حدد مكون "Clock Multi Source" (الصورة 2) ، وقم بإفلاته في منطقة التصميم (الصورة 3)
3. قم بتوصيل دبوس الإخراج "Out" لمكون Repeat1 بدبوس الإدخال "In" لمكون ClockMultiSource1 (الصورة 3)
4. قم بتوصيل دبوس الإخراج "Pin [0]" لدبابيس "Out" لمكون ClockMultiSource1 بمنفذ الإدخال "In" لمكون SineIntegerGenerator1 (الصورة 4)
5. قم بتوصيل دبوس الإخراج "Pin [0]" لدبابيس "Out" الخاصة بمكون ClockMultiSource2 بمنفذ الإدخال "In" لمكون SineIntegerGenerator1 (الصورة 5)
6. قم بتوصيل دبوس الإخراج "Pin [1]" من دبوس الإدخال "Clock" لعنصر "Shields. TFT Display. Elements. Draw Bitmap1" لمكون Arduino (الصورة 6)

الخطوة 11: إنشاء كود Arduino وترجمته وتحميله

1. في Visuino ، اضغط على F9 أو انقر فوق الزر الظاهر في الصورة 1 لإنشاء كود Arduino ، وافتح Arduino IDE
2. في Arduino IDE ، انقر فوق الزر تحميل ، لتجميع وتحميل الكود (الصورة 2)

الخطوة 12: والعب …

تهانينا! لقد أكملت المشروع.

تُظهر الصور 2 و 3 و 4 و 5 والفيديو المشروع المتصل والمزود بالطاقة. سترى الصورة النقطية تتحرك حول درع شاشة اللمس TFT المستند إلى ILI9341 كما يظهر في الفيديو.

في الصورة 1 ، يمكنك رؤية مخطط Visuino الكامل. مرفق أيضًا مشروع Visuino ، الذي قمت بإنشائه لهذا Instructable ، والصورة النقطية مع شعار Visuino. يمكنك تنزيله وفتحه في Visuino: