BluBerriSix - آموزش TFT TouchScreen / Arduino: 12 مرحله (همراه با تصاویر)

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

2019 بیستمین سالگرد RIM Blackberry 850 است! این اختراع کوچک کانادایی شیوه ارتباطات جهان را تغییر داد. مدتهاست که گذشته است ، اما میراث آن همچنان ادامه دارد!

در این دستورالعمل ، نحوه استفاده از سپر صفحه نمایش TFT MCUfriend.com 2.4 برای Uno/Mega را خواهید آموخت. شما نحوه نمایش اشیاء گرافیکی و متن و نحوه دریافت لمس و عملکرد در رویدادهای لمسی را یاد خواهید گرفت. این صفحه نمایش بسیار شبیه به Adafruit و دیگر محافظ ها/صفحه های TFT است. بنابراین اگر اینجا هستید ، برای تماشای نمایش بمانید.

ما یک نسخه برنامه ساده شده 2 از طرح bluBerriSIX من ایجاد می کنیم.

بیایید شروع کنیم!

مرحله 1: BluBerriSIX - مرور کلی

برنامه bluBerriSIX یک پروژه TFT شش کاره است.

آن شامل:

یک چراغ قوه

یک برنامه 7 "(مانند یک توپ جادویی" 8 ")

یک ماشین حساب

یک برنامه اندازه گیری فاصله با استفاده از سنسور فاصله اولتراسونیک SR-04

یک برنامه دما و رطوبت که با استفاده از فرستنده گیرنده HC-12 ، ثبت بلادرنگ اطلاعات تا 1.5 کیلومتر را نیز انجام می دهد.

یک برنامه پیام کوتاه با استفاده از HC-12.

این پروژه 1100 خط کد گرفت. ما یک نسخه بسیار ساده تر خواهیم ساخت که هنوز مفاهیم صفحه نمایش TFT و حس لمسی را نشان می دهد.

مرحله 2: چه چیزی مورد نیاز است؟

- Arduino Uno یا Mega 2560

- یک سپر TFT 2.4 اینچی MCUfriend

کتابخانه های زیر:

- کتابخانه Adafruit_GFX

- کتابخانه صفحه لمسی Adafruit

- کتابخانه MCUFRIEND_kbv

این کتابخانه ها را می توان با مدیر کتابخانه در داخل Arduino IDE نصب کرد.

برای بارگیری کتابخانه ، به منوی Sketch -> Include Library -> Manage Libraries … بروید.

در قسمت "فیلتر کردن جستجوی خود …" ، چند کاراکتر اول نام کتابخانه را وارد کنید و سپس کتابخانه مناسب را انتخاب و نصب کنید. پس از اتمام کار ، کافی است راه خود را از این صفحه بازگردانید.

هنگام نصب سپر TFT بر روی Uno/Mega ، بسیار مراقب باشید تا مطمئن شوید که پین ها را به درستی چیده اید. من اولین سپر خود را اشتباه تنظیم کردم و آن را سرخ کردم. من دو هفته با ناامیدی فزاینده ای تلاش کردم تا کتابخانه های درست را پیدا کنم ، قبل از اینکه بفهمم صفحه نمایش آن مرده است. مراقب باش

مرحله 3: پروژه ما

ما نسخه ساده تری از طرح bluBerriSIX خواهیم ساخت.

خواهد داشت ،

- صفحه نمایش چلپ چلوپ

- صفحه اصلی منو با دو دکمه

- یک برنامه Saucy 7

- یک برنامه ساده برای وارد کردن متن

شما همچنین می توانید با فشار دادن نماد "صفحه اصلی" در سمت چپ پایین این صفحه نمایش خاص ، به منوی اصلی بازگردید. اگر چنین نمادی ندارید ، فقط باید منطقه ای از صفحه اصلی خود را تعیین کنید. در این آموزش با نحوه تعیین مناطق لمسی روی صفحه آشنا می شوید.

اگرچه این یک پروژه ساده است ، اما هنوز طولانی است. من نسخه های طرح های آردوینو را در هر مرحله اصلی ارائه می دهم تا در صورت تمایل آنها را بارگذاری کنید.

مرحله 4: کد سرصفحه ، متغیرهای جهانی ، تنظیم صفحه

کل پروژه بسیار مستند است. اما جزئیات در ادامه آمده است.

یک پروژه جدید آردوینو را شروع کنید و آن را "demo tft" یا هر نام دیگری که می خواهید بنامید.

اولین پنل کد بالا ، متغیرهای سراسری را به ما نشان می دهد. ما همچنین کتابخانه هایی را که باید برای عملکرد صفحه نمایش و تشخیص لمسی صفحه استفاده کنیم ، اضافه می کنیم.

ما همچنین پین های آنالوگ را با توجه به اهداف صفحه نمایش آنها تعریف می کنیم.

ما شیء tft (صفحه نمایش) و شی ts (لمس) را به عنوان مرجع توابع مربوطه تعریف می کنیم.

ما برخی از ثابت های رنگی 16 بیتی را تعریف می کنیم تا رندر رنگ ها برای صفحه و برای متن و اشیاء گرافیکی آسان شود. متوجه خواهید شد که یک آدرس اینترنتی برای یک وب سایت وجود دارد که دارای Color Picker و Converter برای تبدیل رنگهای قابل مشاهده به مقادیر شانزده شانزده بیتی آنها است. این یک ابزار بسیار مفید است.

در پنل کد دوم ، ما متغیرهای کلی را برای اهداف خاص برنامه خود تعریف می کنیم.

رشته ها و آرایه های cString ، حرف و حرف X و letterY برای الف) نمایش حروف روی دکمه های برنامه ورود متن و ب) مختصات x و y یک لمس با مختصات x و y هر حرف مربوطه در صفحه کلید. وقتی به آن بخش از طرح می رسیم ، در مورد این موضوع بیشتر توضیح دهید.

funcX ، funcY و func آرایه هایی هستند که تعیین می کنند کدام دکمه برنامه روی صفحه منوی اصلی فشار داده شده است و سپس از این اطلاعات برای راه اندازی برنامه مربوطه استفاده می کنند.

lastTouch و tThresh در روش های لمسی استفاده می شود تا مطمئن شویم که با فشار زیاد صفحه چند بار لمس نمی کنیم. بعداً در مورد آن بیشتر توضیح دهید.

متغیر حالت کنترل می کند که کدام صفحه نمایش داده می شود و متغیر tMode کنترل می کند که در هر زمان از کدام روش های لمسی استفاده می شود.

در بلوک setup () ، اگر بخواهیم از دستورات Serial.println () برای اشکال زدایی استفاده کنیم ، یک کانال Serial باز می کنیم. اگر مایل به انجام اشکال زدایی Serial Monitor نیستید ، به این خط نیاز ندارید.

چهار خط بعدی فقط کد راه اندازی برای شی tft است.

سپس جهت صفحه را روی حالت عمودی قرار می دهیم.

دستور randomSeed () فقط تولید کننده تعداد تصادفی را برای استفاده بعدی توسط برنامه Saucy 7 راه اندازی می کند.

در نهایت ما روش splash screen را می نامیم.

مرحله 5: ایجاد صفحه Spash و درک صفحه نمایش در مقابل نقشه برداری لمسی

ما اکنون شروع به ساختن صفحه نمایش spash می کنیم.

اما ابتدا ، لطفاً تصویر را برای صفحه نمایش و نقشه برداری لمس کنید. توجه داشته باشید که منشأ در مکان های مختلف است. برای نمایش ، منبع (0 ، 0) در سمت چپ بالای صفحه (هنگامی که دکمه RESET در بالا قرار دارد) قرار دارد و از چپ به راست و از بالا به پایین رشد می کند.

برای تشخیص لمس ، مبدأ در گوشه سمت چپ پایین صفحه قرار دارد و از چپ به راست و پایین به بالا رشد می کند.

بنابراین نقشه های DISPLAY و TOUCH به طور جداگانه تعریف می شوند و وضوح تصویر متفاوتی دارند. رزولوشن صفحه نمایش 240 در 320 است و همانطور که به زودی خواهید دید ، رزولوشن لمسی بسیار بالاتر است.

به منطقه ای از طرح خود در زیر حلقه () {} بروید و ما کد متد splash () را وارد می کنیم.

ما با انجام یک دستور fillScreen () شروع می کنیم تا صفحه را با رنگ سفید که در کد هدر تعریف کرده ایم پر کنیم.

سپس اندازه متن را روی "5" تنظیم می کنیم. این اندازه متن نسبتا بزرگ است. موقعیت x و y را برای مکان نما متن تنظیم می کنیم و رنگ متن را تنظیم می کنیم. در نهایت دستور print ("TFT") در واقع متن آبی رنگ "5" را در موقعیت مشخص شده ترسیم می کند.

با افزایش اندازه متن ، خواهید دید که شخصیت ها بیشتر و بیشتر درشت می شوند. بنابراین بالا رفتن از 5 احتمالاً مفید نیست. در پایان این آموزش ، من به شما نشان می دهم که چگونه از فونت های bitmap برای زیبا جلوه دادن متن در برنامه های خود استفاده کنید. معامله این است که استفاده از مجموعه فونت bitmap حافظه زیادی را در Arduino شما اشغال می کند که اندازه طرح های شما را محدود می کند

ما دستورات مشابه را برای دو مورد متن دیگر در صفحه نمایش splash تکرار می کنیم.

سرانجام ما 2.5 ثانیه تأخیر می اندازیم تا به کاربر فرصت دهیم تا قبل از حرکت برنامه به صفحه اصلی منو ، محتویات صفحه را بخواند.

پیش بروید و این طرح را در Arduino خود بارگذاری کنید. باید صفحه نمایش چلپ چلوپ را نشان دهد.

مرحله 6: ایجاد یک ابزار تشخیصی Touch Mapping

روش () showTouch برای کمک به شما در به دست آوردن مختصات لمسی قسمت های مختلف صفحه بسیار مفید است. برای تعیین مناطق لمسی دکمه ها باید این کار را انجام دهید.

پیش بروید و این روش را در زیر روش splash () قبلاً انجام شده وارد کنید.

در اینجا نحوه کار است.

دستور if تعیین می کند که آیا زمان کافی از آخرین لمس گذشته است یا خیر. زمان فعلی سیستم را میلیس () می گیرد و زمان lastTouch را کم می کند. اگر بیشتر از مقدار tThresh (200 میلی ثانیه) باشد ، لمس را می پذیرد. در غیر این صورت ، رویدادهای چند لمسی تصادفی را نادیده می گیرد.

بعد ، دستور getpoint () مختصات x ، y و z لمس را دریافت می کند. مختصات z اندازه گیری فشار لمسی است.

اگر فشار در حداکثر و حداقل ثابتی باشد که در سرصفحه طرح مشخص کردیم ، این روش ابتدا پین های YP و XM را به OUTPUT تغییر می دهد و صفحه را در حالت DISPLAY قرار می دهد.

در مرحله بعد یک مستطیل سفید ترسیم می کند تا هر مختصاتی را که قبلاً نمایش داده شده بود پاک کند.

سپس طرح فونت را روی اندازه 2 ، رنگ سیاه تنظیم می کند و مختصات x (p.x) و y (p.y) را روی صفحه نمایش می دهد. سپس می توانید این مکان ها را یادداشت کنید تا به شما در برنامه ریزی مناطق لمسی خود برای طرح های خود کمک کند.

دستور if در پایین روش بررسی کنید که آیا دکمه "Home" روی صفحه فشار داده شده است یا خیر. عملگرهای "<=" عرض و ارتفاع دکمه صفحه اصلی را مجاز می دانند. مختصات مشخص شده مختصات مرکز x و مرکز y دکمه صفحه اصلی است. اگر فشار داده شود ، حالت روی 0 تنظیم می شود که در نهایت به معنی "رفتن به صفحه اصلی منو" است. بعداً در مورد آن بیشتر توضیح دهید.

در نهایت ما lastTouch را به سیستم فعلی millis () به روز می کنیم تا برای یک رویداد لمسی بعدی آماده شویم.

لطفاً بلاک حلقه () را بروید و خط 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 Text Entry فراخوانی می کنیم. اینها روشهای جداگانه ای هستند.

روش draw7icon (0) یک پارامتر صحیح می گیرد که y-offset برای کشیدن توپ است. ما این کار را انجام می دهیم تا بتوانیم از همان روش برای کشیدن توپ در صفحه منو و روی صفحه برنامه Saucy 7 استفاده کنیم. offset فقط به ما امکان می دهد مختصات y توپ را به صورت برنامه نویسی بالا یا پایین تنظیم کنیم.

روش draw7Ball (0) از داخل draw7Icon (0) فراخوانی می شود. همچنین یک پارامتر لازم است که به ما امکان می دهد موقعیت عمودی توپ را بسته به اینکه در صفحه منو یا روی صفحه برنامه ترسیم کنیم ، تنظیم کنیم.

دستور fillCircle () 4 آرگومان می گیرد.

- مختصات x مرکز دایره

- y مختصات مرکز دایره

- شعاع دایره (در پیکسل)

- COLOR - ثابت رنگی که در هدر تعریف کردیم

در نهایت متد () drawTextIcon برای ترسیم نماد برای برنامه ورود متن فراخوانی می شود.

می توانید روش را با توضیح روش splash () در setup () و افزودن menuScreen () امتحان کنید.

طرح را در آردوینو خود بارگذاری کنید و آن را امتحان کنید!

مرحله 8: برنامه Saucy 7 و روشهای اصلی منو

روش هفت صفحه () صفحه را برای برنامه ترسیم می کند ، از جمله کشیدن توپ و سپس نمایش دستورالعمل ها.

روش heftInstr () دستورالعمل ها را نشان می دهد و صفحه را از پاسخ های قبلی پاک می کند. همچنین دکمه "Response" را ترسیم می کند.

روش show7Response () روش پاسخ قبلی را از روی صفحه پاک می کند ، پیام متحرک "تفکر …" را نشان می دهد و سپس پیام پاسخ تصادفی انتخاب شده را نمایش می دهد.

() read7Touch () روشی است که منتظر یک رویداد لمسی است تا پیام تصادفی تولید شود. کد لمسی بسیار شبیه به روش تشخیص () showTouch است که قبلاً توضیح داده شد. برای سادگی ، این روش یک لمس را در هر نقطه روی صفحه به عنوان لمس دکمه "پاسخ" قبول می کند.

در بالای روش ، ما یک آرایه پاسخ از رشته هایی را تعریف می کنیم که پیام هایی هستند که می توانند از یک رویداد لمسی تولید شوند.

اگر دکمه Home را فشار دهید ، برنامه خاتمه می یابد و به صفحه منوی اصلی بر می گردد. در غیر این صورت ، روش یک عدد تصادفی بین 0 تا 7 (اختصاصی) ایجاد می کند و پیام متنی مربوطه را از آرایه reply به متد show7Response () منتقل می کند.

در نهایت ، روش backToMenu () لمس دکمه Home را مشاهده می کند و کنترل را به صفحه منوی اصلی باز می گرداند.

متد 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 () مشابه سایر روشهای تشخیص لمس عمل می کند.

اگر لمسی تشخیص داده شود که روی دکمه Home نیست ، مختصات 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 را در Arduino خود بارگذاری کنید و باید بتوانید از برنامه تکمیل شده استفاده کنید.

تبریک می گویم! شما یک برنامه صفحه لمسی TFT ایجاد کرده اید! بقیه روز را مرخصی بگیرید!

مرحله 11: نرم و صاف شوید! - استفاده از فونت های Adafruit Bitmap در طرح خود

مجموعه استاندارد فونت tft مشکلی ندارد. اما بهتر است اگر بتوانیم از فونت های bitmapped مناسب در طرح های TFT خود استفاده کنیم.

نکته منفی این است که بارگذاری مجموعه های فونت در حافظه آردوینو فضای قابل توجهی را اشغال می کند. در واقع ، بسیار آسان است که طرح خود را با تعداد زیادی فونت پر کنید تا در Arduino بارگیری نشود.

فونت ها در داخل پوشه کتابخانه Adafruit_GFX موجود است که قبلاً برای این پروژه نصب کرده اید. یک آموزش عالی در مورد استفاده از فونت در این سایت وجود دارد.

در قسمت سربرگ طرح خود ، مرجع فونت را برای فونت مورد نظر خود اضافه کنید. ما برای این مثال از فونت FreeSerifBoldItalic18p7b استفاده می کنیم.

#عبارتند از

در روش splash () ، tft.setTextSize () را کامنت کنید. فرمان

دستور زیر را اضافه کنید ،

tft.setFont (& FreeSerifBoldItalic18pt7b) ؛

اکنون هرگونه دستور print () از فونت مشخص شده فعلی استفاده خواهد کرد. برای تغییر به فونت دیگر ، از دستور دیگر () tft.setFont با فونت بعدی که می خواهید استفاده کنید استفاده کنید.

برای تنظیم مجدد فونت به فونت استاندارد tft ، کافی است از یک tft.setFont () استفاده کنید؛ فرمان بدون پارامتر

طرح را در Arduino خود بارگذاری کنید و باید ببینید صفحه نمایش splash اکنون از فونت bitmap برای ارائه متن روی صفحه استفاده می کند. متوجه خواهید شد که اندازه طرح به طور قابل ملاحظه ای بزرگتر از این است که فونت را وارد کرده اید.

مرحله 12: اندیشه های نهایی

بسیاری از دستورات شی گرافیکی دیگر در دسترس شما هستند. آنها عبارتند از:

tft.drawRect (x ، y ، عرض ، ارتفاع ، رنگ) ؛

tft.drawLine (x1 ، y1 ، x2 ، y2 ، COLOR) ؛

مثالهای زیر از روش tft.color565 برای تعیین رنگ بر اساس مقادیر قرمز ، سبز و آبی استفاده می کنند. این یک روش جایگزین برای استفاده از مقادیر ثابت رنگ HEX است که در طرح خود استفاده کردیم.

tft.drawRoundRect (x ، y ، عرض ، ارتفاع ، شعاع ، tft.color565 (255 ، 0 ، 0)) ؛ // این قرمز می شود

tft.drawCircle (x ، y ، شعاع ، 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 شما اضافه کنند.

با تشکر از شما برای کار در این آموزش.

اکنون بیرون بروید و چیزی را شگفت انگیز کنید!