Arduino Uno: Bitmap Animation در ILI9341 TFT Touchscreen Shield Shield With Visuino: 12 مرحله (همراه با تصاویر)

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:57

سپرهای صفحه نمایش لمسی TFT مبتنی بر ILI9341 از محبوب ترین محافظ های کم هزینه برای آردوینو هستند. Visuino مدتی است از آنها پشتیبانی می کند ، اما من هرگز فرصتی برای نوشتن یک آموزش در مورد نحوه استفاده از آنها نداشتم. اخیراً اما تعداد کمی از افراد در مورد استفاده از صفحه نمایش با Visuino س askedال کردند ، بنابراین من تصمیم گرفتم که یک آموزش ایجاد کنم.

در این آموزش ، به شما نشان خواهم داد که چگونه می توان Shield را به آردوینو متصل کرد و آن را با Visuino برنامه ریزی کرد تا یک Bitmap را متحرک کند تا در صفحه نمایش حرکت کند.

مرحله 1: اجزاء

1. یک برد سازگار با Arduino Uno (ممکن است با Mega نیز کار کند ، اما من هنوز سپر را با آن آزمایش نکرده ام)
2. One ILI9341 2.4 "TFT Touchscreen Shield برای آردوینو

مرحله 2: ILI9341 TFT Touchscreen Shield Shield را به آردوینو وصل کنید

همانطور که در تصاویر نشان داده شده است TFT Shield را در بالای Arduino Uno وصل کنید

مرحله 3: Visuino را راه اندازی کرده و TFT Display Shield را اضافه کنید

برای شروع برنامه نویسی Arduino ، باید Arduino IDE را از اینجا نصب کنید:

اطمینان حاصل کنید که 1.6.7 یا بالاتر را نصب کرده اید ، در غیر این صورت این دستورالعمل کار نمی کند

Visuino: https://www.visuino.com نیز باید نصب شود.

1. Visuino را همانطور که در تصویر اول نشان داده شده است ، شروع کنید
2. روی دکمه "Arrow Down" جزء Arduino کلیک کنید تا منوی کشویی باز شود (تصویر 1)
3. از منو "Add Shields …" (تصویر 1) را انتخاب کنید.
4. در محاوره "Shields" ، دسته "Displays" را گسترش دهید و "TFT Color Touch Screen Display ILI9341 Shield" را انتخاب کنید ، سپس روی دکمه "+" کلیک کنید تا آن را اضافه کنید (تصویر 2)

مرحله 4: در Visuino: Draw Text Element را برای Text Shadow اضافه کنید

در مرحله بعد ما باید عناصر Graphics را برای نمایش متن و bitmap اضافه کنیم. ابتدا عنصر گرافیکی را برای ترسیم سایه متن اضافه می کنیم:

1. در Object Inspector ، روی دکمه "…" در کنار مقدار ویژگی "Elements" عنصر "TFT Display" کلیک کنید (تصویر 1)
2. در ویرایشگر Elements "Draw Text" را انتخاب کنید و سپس روی دکمه "+" (تصویر 2) کلیک کنید تا یکی اضافه شود (تصویر 3)
3. در Object Inspector مقدار ویژگی "Color" عنصر "Draw Text1" را روی "aclSilver" تنظیم کنید (تصویر 3)
4. در Object Inspector مقدار ویژگی "Size" عنصر "Draw Text1" را روی "4" تنظیم کنید (تصویر 4). این باعث بزرگتر شدن متن می شود
5. در Object Inspector مقدار ویژگی "Text" عنصر "Draw Text1" را روی "Visuino" تنظیم کنید (تصویر 5)
6. در Object Inspector مقدار ویژگی "X" عنصر "Draw Text1" را روی "43" تنظیم کنید (تصویر 6)
7. در Object Inspector مقدار ویژگی "Y" عنصر "Draw Text1" را روی "278" تنظیم کنید (تصویر 6)

مرحله 5: در Visuino: عنصر Draw Text را برای پیش زمینه متن اضافه کنید

اکنون ما عنصر گرافیکی را برای ترسیم متن اضافه می کنیم:

1. در ویرایشگر Elements "Draw Text" را انتخاب کنید و سپس روی دکمه "+" (تصویر 1) کلیک کنید تا مورد دوم اضافه شود (تصویر 2)
2. در Object Inspector مقدار ویژگی "Size" عنصر "Draw Text1" را روی "4" تنظیم کنید (تصویر 2)
3. در Object Inspector مقدار ویژگی "Text" عنصر "Draw Text1" را روی "Visuino" تنظیم کنید (تصویر 3)
4. در Object Inspector مقدار ویژگی "X" عنصر "Draw Text1" را روی "40" تنظیم کنید (تصویر 4)
5. در Object Inspector مقدار ویژگی "Y" عنصر "Draw Text1" را روی "275" تنظیم کنید (تصویر 4)

مرحله 6: در Visuino: عنصر Draw Bitmap را برای انیمیشن اضافه کنید

در مرحله بعد ، عنصر گرافیکی را برای ترسیم bitmap اضافه می کنیم:

1. در ویرایشگر Elements "Draw Bitmap" را انتخاب کنید و سپس روی دکمه "+" (تصویر 1) کلیک کنید تا یکی اضافه شود (تصویر 2)
2. در Object Inspector ، روی دکمه "…" در کنار مقدار ویژگی "Bitmap" عنصر "Draw Bitmap1" (تصویر 2) کلیک کنید تا "ویرایشگر Bitmap" باز شود (تصویر 3)
3. در "ویرایشگر Bitmap" روی دکمه "بارگذاری …" (تصویر 3) کلیک کنید تا گفتگوی باز کردن پرونده (تصویر 4) باز شود.
4. در File Open Dialog ، bitmap را برای ترسیم انتخاب کنید و روی دکمه "Open" (تصویر 4) کلیک کنید. اگر فایل خیلی بزرگ باشد ممکن است نتواند در حافظه آردوینو جا شود. اگر در هنگام کامپایل از خطای حافظه خارج شدید ، ممکن است لازم باشد یک نقشه بیت کوچکتر را انتخاب کنید
5. در "ویرایشگر Bitmap" روی "OK" کلیک کنید. دکمه (تصویر 5) را ببندید

مرحله 7: در Visuino: پین هایی را برای ویژگی های X و Y عنصر Draw Bitmap اضافه کنید

برای متحرک سازی Bitmap ، باید موقعیت X و Y آن را کنترل کنیم. برای این منظور ما پین هایی را برای خواص X و Y اضافه می کنیم:

1. در Object Inspector روی دکمه "Pin" در جلوی ویژگی "X" عنصر "Draw Bitmap1" (تصویر 1) کلیک کنید و "Integer SinkPin" (تصویر 2) را انتخاب کنید.
2. در Object Inspector روی دکمه "Pin" در جلوی ویژگی "Y" عنصر "Draw Bitmap1" (تصویر 3) کلیک کنید و "Integer SinkPin" (تصویر 4) را انتخاب کنید.

مرحله 8: در Visuino: 2 ژنراتور صحیح سینوسی اضافه کنید و اولین دستگاه را پیکربندی کنید

ما از 2 ژنراتور سینوسی صحیح برای تحریک حرکت bitmap استفاده خواهیم کرد:

1. در فیلتر جعبه ابزار کامپوننت "sine" را تایپ کرده و سپس م "لفه "Sine Integer Generator" (تصویر 1) را انتخاب کرده و دو مورد از آنها را در قسمت طراحی رها کنید.
2. در Object Inspector ، مقدار ویژگی "Amplitude" جزء SineIntegerGenerator1 را روی "96" تنظیم کنید (تصویر 2)
3. در Object Inspector ، مقدار ویژگی "Offset" جزء SineIntegerGenerator1 را روی "96" تنظیم کنید (تصویر 3)
4. در Object Inspector ، مقدار ویژگی "Frequency" جزء SineIntegerGenerator1 را روی "0.2" تنظیم کنید (تصویر 4)

مرحله 9: در Visuino: پیکربندی ژنراتور سینوس دوم و اتصال ژنراتورهای سینوس به پین های مختصات X و Y Bitmap

1. در Object Inspector ، مقدار ویژگی "Amplitude" جزء SineIntegerGenerator2 را روی "120" تنظیم کنید (تصویر 1)
2. در Object Inspector ، مقدار ویژگی "Offset" جزء SineIntegerGenerator2 را روی "120" تنظیم کنید (تصویر 2)
3. در Object Inspector ، مقدار ویژگی "Frequency" جزء SineIntegerGenerator2 را روی "0.03" تنظیم کنید (تصویر 3)
4. پین خروجی "Out" جزء SineIntegerGenerator1 را به پین ورودی "X" عنصر "Shields. TFT Sisplay. Elements. Draw Bitmap1" از مولفه آردوینو وصل کنید (تصویر 4)
5. پین خروجی "Out" جزء SineIntegerGenerator2 را به پین ورودی "Y" عنصر "Shields. TFT Display. Elements. Draw Bitmap1" از مولفه آردوینو وصل کنید (تصویر 5)

مرحله 10: در Visuino: افزودن و اتصال قطعات شروع و ساعت چند منبع

برای رندر کردن bitmap در هر زمان که موقعیت X و Y به روز می شود ، ما باید یک سیگنال ساعت را به عنصر "Draw Bitmap1" ارسال کنیم. برای ارسال فرمان پس از تغییر موقعیت ها ، به راهی برای همگام سازی رویدادها نیاز داریم. برای این منظور از مولفه Repeat برای تولید مداوم رویدادها و از Clock Multi Source برای تولید 2 رویداد به ترتیب استفاده می کنیم. اولین رویداد ، ژنراتورهای سینوس را برای به روزرسانی موقعیت X و Y تنظیم می کند ، و دومین مورد ساعت "Draw Bitmap1":

1. در کادر Filter جعبه ابزار کامپوننت عبارت "repeat" را تایپ کنید ، سپس م "لفه "Repeat" (تصویر 1) را انتخاب کرده و آن را در قسمت طراحی رها کنید (تصویر 2)
2. "multi" را در کادر Filter جعبه ابزار کامپوننت تایپ کنید ، سپس م "لفه "Clock Multi Source" (تصویر 2) را انتخاب کرده و آن را در قسمت طراحی قرار دهید (تصویر 3)
3. پین خروجی "Out" جزء Repeat1 را به پین ورودی "In" جزء ClockMultiSource1 وصل کنید (تصویر 3)
4. پین خروجی "Pin [0]" پین های "Out" مpلفه ClockMultiSource1 را به پین ورودی "In" جزء SineIntegerGenerator1 وصل کنید (تصویر 4)
5. پین خروجی "Pin [0]" پین های "Out" مcomلفه ClockMultiSource2 را به پین ورودی "In" جزء SineIntegerGenerator1 وصل کنید (تصویر 5)
6. پین خروجی "Pin [1]" پین ورودی "Clock" عنصر "Shields. TFT Display. Elements. Draw Bitmap1" از مولفه آردوینو را وصل کنید (تصویر 6)

مرحله 11: کد Arduino را ایجاد ، کامپایل و بارگذاری کنید

1. در Visuino ، F9 را فشار دهید یا روی دکمه نشان داده شده در تصویر 1 برای ایجاد کد Arduino کلیک کنید ، و Arduino IDE را باز کنید
2. در Arduino IDE ، روی دکمه Upload کلیک کنید تا کد را کامپایل و بارگذاری کنید (تصویر 2)

مرحله 12: و بازی…

تبریک می گویم! شما پروژه را تکمیل کرده اید.

تصاویر 2 ، 3 ، 4 و 5 و ویدئو پروژه متصل و فعال شده را نشان می دهد. همانطور که در ویدئو مشاهده می کنید ، Bitmap در اطراف سپر صفحه نمایش لمسی TFT مبتنی بر ILI9341 حرکت می کند.

در تصویر 1 می توانید نمودار Visuino کامل را مشاهده کنید. همچنین پروژه Visuino ، که من برای این Instructable ایجاد کرده ام ، و bitmap با لوگوی Visuino ضمیمه شده است. می توانید آن را در Visuino بارگیری و باز کنید: