BluBerriSix - TFT TouchScreen / Arduino Dərsliyi: 12 addım (şəkillərlə)

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:46

2019, RIM Blackberry 850 -nin 20 illiyidir! Bu kiçik Kanada ixtirası dünyanın ünsiyyət tərzini dəyişdi. Çoxdan keçdi, amma mirası davam edir!

Bu təlimatda Uno/Mega üçün MCUfriend.com 2.4 TFT ekran qalxanından necə istifadə edəcəyinizi öyrənəcəksiniz. Qrafik obyektləri və mətni necə göstərəcəyinizi, toxunuşları necə alacağınızı və toxunma hadisələrində necə hərəkət edəcəyinizi öyrənəcəksiniz. ekran Adafruit və digər TFT qalxanlarına/ekranlarına çox bənzəyir. Buna görə də buradasınızsa, şouda qalın.

BluBerriSIX eskizimin sadələşdirilmiş 2 tətbiq versiyasını quracağıq.

Gəlin başlayaq!

Addım 1: BluBerriSIX - Baxış

BluBerriSIX proqramı altı funksiyalı TFT layihəsidir.

Bura daxildir:

Fənər

Saucy '7' tətbiqi (Sehrli '8' Topu kimi)

Bir Kalkulyator

SR-04 ultrasəs məsafə sensoru istifadə edərək bir Məsafə Ölçmə proqramı

HC-12 ötürücü ilə 1.5km-ə qədər real vaxtda məlumatların daxil olmasını təmin edən Temperatur və Rütubət proqramı

HC-12 istifadə edərək bir mesajlaşma proqramı.

Bu layihə 1100 kod kodunu aldı. Hələ də TFT ekranı və toxunma algılama anlayışlarını nümayiş etdirən olduqca sadə bir versiya quracağıq.

Addım 2: Nə lazımdır?

- Arduino Uno və ya Mega 2560

- MCUfriend 2.4 TFT qalxanı

Aşağıdakı kitabxanalar:

- Adafruit_GFX kitabxanası

- Adafruit Touchscreen kitabxanası

- MCUFRIEND_kbv kitabxanası

Bu kitabxanalar Arduino IDE daxilində Kitabxana Meneceri ilə quraşdırıla bilər.

Kitabxananı yükləmək üçün Sketch -> Kitabxanaya Daxil Et -> Kitabxanaları İdarə et … menyu seçiminə keçin.

'Axtarışı süz … İşiniz bitdikdə, bu ekrandan çıxın.

TFT qalxanını Uno/Mega -ya bağlayarkən, pinləri düzgün bir şəkildə düzəltdiyinizə əmin olmaq üçün çox diqqətli olun. İlk qalxanımı səhv düzəldib qovurdum. Ekranın öldüyünü başa düşməzdən əvvəl iki həftə ərzində doğru kitabxanalar axtarmağa çalışdım. EHTİYATLI OL

Addım 3: Layihəmiz

BluBerriSIX eskizinin daha sadə bir versiyasını quracağıq.

Olacaq, - bir sıçrayış ekranı

- iki düyməli əsas menyu ekranı

- Saucy 7 proqramı

- sadələşdirilmiş mətn daxiletmə proqramı

Bu ekranın sol alt hissəsindəki 'Ev' simgesini basaraq da əsas menyuya qayıda biləcəksiniz. Belə bir simvol yoxdursa, ekranınızın 'ev' bölgəsini təyin etməlisiniz. Bu təlimatda ekran toxunma bölgələrini necə təyin edəcəyinizi öyrənəcəksiniz.

Bu sadələşdirilmiş bir layihə olsa da, hələ uzun müddətdir. Hər bir əsas mərhələdə Arduino eskizlərinin versiyalarını verəcəyəm, istəsəniz yükləyə bilərsiniz.

Addım 4: Başlıq Kodu, Qlobal Dəyişənlər, Ekran Quraşdırması

Bütün layihə yüksək səviyyədə sənədləşdirilmişdir. Amma detallar bundan sonra gəlir.

Yeni bir Arduino layihəsinə başlayın və ona 'tft demo' və ya istədiyiniz başqa bir ad verin.

Yuxarıdakı ilk kod paneli, qlobal dəyişənləri təyin etdiyimizi göstərir. Həm ekranın ekran funksiyası, həm də ekranın toxunma aşkarlanması üçün istifadə etməyimiz lazım olan kitabxanalara əlavə edirik.

Analoq pinlərini də ekrana xas məqsədlərinə istinad edərək təyin edirik.

Tft obyektini (ekran) və ts obyektini (toxunma) müvafiq funksiyalarına istinad olaraq təyin edirik.

Rənglərin ekranda və mətn və qrafik obyektlərində göstərilməsini asanlaşdırmaq üçün bəzi 16 bitlik rəng sabitləri təyin edirik. Görünən rəngləri 16 bit hexadecimal dəyərlərinə çevirmək üçün Rəng Seçici və çeviricisi olan bir veb saytının bir URL olduğunu görəcəksiniz. Çox faydalı bir vasitədir.

İkinci kod panelində tətbiqə xas məqsədlərimiz üçün qlobal dəyişənləri təyin edirik.

CString, letter və letterX və letterY sətirləri və massivləri a) mətn giriş tətbiqindəki düymələrdəki hərfləri göstərmək və b) hər bir hərfin x və y koordinatları ilə toxunuşun x və y koordinatlarını uyğunlaşdırmaq üçün istifadə olunur. klaviatura. Eskizin həmin hissəsinə çatanda bu barədə daha çox məlumat əldə edəcəyik.

funcX , funcY və func əsas menyu ekranında hansı tətbiq düyməsinin basıldığını müəyyən etmək üçün işləyən və sonra müvafiq tətbiqin işə salınması üçün bu məlumatlardan istifadə edən seriallardır.

lastTouch və tThresh, ekrana çox uzun basaraq birdən çox toxunma almamağımız üçün toxunma üsullarında istifadə olunur. Bu barədə daha sonra.

Mod dəyişəni, hansı ekranın göstəriləcəyini və tMode dəyişəni istənilən vaxt hansı toxunma üsullarının istifadə olunacağını idarə edəcək.

Ayarlama üçün Serial.println () əmrlərindən istifadə etmək istəsək, setup () blokunda Serial kanalı açırıq. Serial Monitor ayıklama etmək istəməsəniz bu xəttə ehtiyacınız yoxdur.

Növbəti dörd sətir yalnız tft obyekti üçün quraşdırma kodudur.

Sonra ekranın istiqamətini Portret rejiminə qoyduq.

RandomSeed () əmri, sonradan Saucy 7 tətbiqinin istifadə etməsi üçün təsadüfi ədədlər generatorunu işə salır.

Nəhayət, sıçrayış ekranı metodunu çağırırıq.

Addım 5: Sızma Ekranı Yaratmaq və Ekranı Toxunma Xəritəçiliyinə Qarşı Anlamaq

İndi sıçrayış ekranını qurmağa başlayacağıq.

Ancaq əvvəlcə ekran və toxunma xəritələri üçün şəkilə baxın. Mənşəyinin fərqli yerlərdə olduğuna diqqət yetirin. Göstərmək üçün mənbə (0, 0) ekranın sol üst hissəsindədir (RESET düyməsi yuxarıda olduqda) və soldan sağa və yuxarıdan aşağıya doğru böyüyür.

Toxunma aşkarlanması üçün mənşəyi ekranın sol aşağı küncündədir və soldan sağa və aşağıdan yuxarıya doğru böyüyür.

EKRAN VƏ DOKUNMAT XARİTALAR AYRILIQ TƏYİN EDİLİR və fərqli qətnamələrə malikdir. Ekranın 240 -dan 320 -ə qədər bir qətnaməsi var və toxunuşun daha yaxından görəcəyiniz kimi daha yüksək bir qətnaməyə sahib olmasıdır.

Eskizinizin loop () {} metodunun altındakı bir sahəsinə gedin və biz splash () metod kodunu daxil edəcəyik.

Ekranı başlıq kodunda təyin etdiyimiz BEYAZ rənglə doldurmaq üçün fillScreen () əmrindən başlayırıq.

Sonra mətn ölçüsünü '5' olaraq təyin edirik. Bu nisbətən böyük bir əsas mətn ölçüsüdür. Mətn kursoru üçün x və y mövqeyini təyin edirik və mətn rəngini təyin edirik. Nəhayət, çap ("TFT") əmri, göstərilən ölçüdə mavi ölçülü '5' mətni çəkir.

Mətn ölçüsünü artırdıqca, personajların getdikcə daha sıx olduğunu görürsünüz. Buna görə də 5 -dən yuxarı qalxmağın faydası yoxdur. Bu təlimatın sonunda, tətbiqlərinizdə daha gözəl görünən bir mətn əldə etmək üçün bitmap şriftlərindən necə istifadə edəcəyinizi sizə göstərəcəyəm. Bitmap font dəstlərinin istifadəsi Arduino -da eskiz ölçülərinizi məhdudlaşdıracaq çoxlu yaddaş tutur

Sıçrayış ekranındakı digər iki mətn elementi üçün oxşar əmrləri təkrar edirik.

Nəhayət, tətbiqin əsas menyu ekranına keçməzdən əvvəl istifadəçiyə ekranın məzmununu oxumaq şansı vermək üçün 2,5 saniyə gecikdiririk.

Davam edin və bu eskizi Arduino -ya yükləyin. Sıçrayış ekranını göstərməlidir.

Addım 6: Dokunmatik Xəritəçəkmə Diaqnostik Aləti hazırlayın

ShowTouch () metodu, ekranın müxtəlif hissələrinin toxunma koordinatlarını əldə etməyə kömək etmək üçün çox faydalıdır. Düymələrinizin toxunma bölgələrini təyin etmək üçün bunu etməlisiniz.

Davam edin və əvvəllər etdiyiniz splash () metodunuzun altına bu üsulu daxil edin.

Bunun necə işlədiyini burada görə bilərsiniz.

If ifadəsi son toxunuşdan bəri kifayət qədər vaxt keçib -keçmədiyini müəyyən edir. Mövcud sistem vaxtı millis () alır və lastTouch vaxtını çıxarır. TThresh dəyərindən (200 millisaniyə) böyükdürsə, toxunuşu qəbul edir. Əks təqdirdə, təsadüfən çox toxunma hadisələrini görməyəcək.

Sonra getpoint () əmri toxunmanın x, y və z koordinatlarını alır. Z koordinatı toxunma təzyiqinin ölçüsüdür.

Təzyiq eskiz başlığında təyin etdiyimiz maksimum və minimum sabitlər içərisindədirsə, bu üsul əvvəlcə YP və XM sancaqlarını ÇIXIŞ vəziyyətinə gətirərək ekranı EKRAN rejiminə keçirəcək.

Daha sonra əvvəllər göstərilmiş ola biləcək koordinatları silmək üçün ağ düzbucaqlı çəkəcək.

Eskiz daha sonra şriftin ölçüsünü 2 ölçüyə, qara rəngə qoyur və ekranda x (p.x) və y (p.y) koordinatlarını göstərir. Daha sonra toxunma zonalarınızı öz eskizləriniz üçün proqramlaşdırmağa kömək etmək üçün bu yerləri qeyd edə bilərsiniz.

Metodun altındakı if ifadəsi, ekrandakı 'Ev' düyməsinə basıldığını yoxlayın. '<=' operatorları Ev düyməsinin genişliyinə və hündürlüyünə icazə verir. Göstərilən koordinatlar Ev düyməsinin x mərkəzi və y mərkəzi koordinatlarıdır. Basıldığı təqdirdə, rejim 0 olaraq təyin olunur ki, bu da nəticədə 'Əsas Menyu Ekranına Get' mənasını verəcəkdir. Bu barədə daha sonra.

Nəhayət, sonrakı toxunma hadisəsinə hazırlaşmaq üçün lastTouch -u cari sistem vaxtı millis () ilə yeniləyirik.

Zəhmət olmasa loop () blokuna gedin və showTouch () xəttini əlavə edin;

Bu anda eskizinizi yükləyin və sınayın. Sıçrayış ekranı çəkəcək və ekrana toxunmağa başlasanız, TOUCH x və y koordinatları ekranda görünəcək.

Davam etməzdən əvvəl iki vacib kod sətrini yenidən nəzərdən keçirək:

pinMode (YP, ÇIXIŞ); // TFT nəzarət pinlərini bərpa edin

pinMode (XM, ÇIXIŞ); // bir toxunuş aşkar edildikdən sonra göstərmək üçün

Ekranda bir şey göstərmək istədiyiniz zaman ekranı TOUCH rejimindən DISPLAY rejiminə keçirmək üçün bu iki əmri yerinə yetirməlisiniz. Əks halda, ekran əmrləriniz işləməyəcək.

İndiyə qədər yaxşı işlər! Bir ara verin!

Addım 7: Əsas Menyu Ekranını yaradın

İndi hər bir proqramı aktivləşdirmək üçün basa biləcəyiniz iki düymə ilə Əsas Menyu ekranımızı quracağıq. Bu üsul menuScreen () adlanır.

Ekranı DISPLAY rejiminə qoyaraq başlayırıq.

Sonra şriftin ölçüsünü, rəngini və mövqeyini təyin edirik və 'Əsas Menyu' mətnini çap edirik.

İndi düymələr olan iki düzbucaqlı çəkirik.

Bütün qrafik əmrləri oxşar quruluşa malikdir:

graphicShape (x koordinat, y koordinat, en, boy, RENK)

- x koordinat - düzbucaqlı obyektlər üçün yuxarı sol, dairələr üçün mərkəz

- y koordinat - düzbucaqlı obyektlər üçün yuxarı sol, dairələr üçün mərkəz

- eni - obyektin piksellərlə genişliyi

- COLOR - başlıqda təyin etdiyimiz bir rəng sabitidir

Nəhayət, Saucy 7 simvolu və QWERTY Mətn Giriş nişanı çəkmək üçün iki üsul çağırırıq. Bunlar ayrı metodlardır.

Draw7icon (0) metodu, topu çəkmək üçün y-ofset olan bir tamsayı parametri alır. Menyu ekranında və Saucy 7 tətbiq ekranında top çəkmək üçün eyni üsuldan istifadə edə biləcəyimiz üçün bunu edirik. Ofset, topun y koordinatını proqramlı olaraq yuxarı və ya aşağı tənzimləməyimizə imkan verir.

Draw7Ball (0) metodu draw7Icon (0) daxilindən çağırılır. Menyu ekranında və ya tətbiq ekranında çəkdiyimizdən asılı olaraq topun şaquli vəziyyətini tənzimləməyimizə imkan verən bir parametr də alır.

FillCircle () əmri 4 arqument götürür.

- dairənin mərkəzinin x koordinatı

- dairənin mərkəzinin koordinatı

- dairənin radiusu (piksellərlə)

- COLOR - başlıqda təyin etdiyimiz bir rəng sabitidir

Nəhayət, DrawTextIcon () metodu Mətn Giriş tətbiqinin simvolunu çəkmək üçün çağırılır.

Setupdakı splash () metodunu şərh edərək və menuScreen () əlavə edərək metodu işə salmağa cəhd edə bilərsiniz.

Eskizi Arduino -ya yükləyin və sınayın!

Addım 8: Saucy 7 Tətbiqi və Əsas Menyu Metodları

SevenScreen () metodu, topu çəkmək və sonra təlimatları göstərmək də daxil olmaqla tətbiqin ekranını çəkəcək.

SevenInstr () metodu ekranı əvvəlki cavablardan təmizləməklə yanaşı təlimatları da göstərir. Həm də 'Cavab' düyməsini çəkir.

Show7Response () metodu əvvəlki cavab metodunu ekrandan silmək, cizgi "düşünmək …" mesajını göstərmək və sonra təsadüfi seçilmiş cavab mesajını göstərməklə məşğul olur.

read7Touch () təsadüfi olaraq yaradılan mesajı istehsal etmək üçün bir toxunma hadisəsini gözləyən üsuldur. Toxunma kodu əvvəllər təsvir olunan showTouch () diaqnostik metoduna çox bənzəyir. Sadəlik üçün bu üsul, 'Cavab ver' düyməsinə toxunmaq kimi ekranın hər hansı bir yerində bir toxunuşu qəbul edəcək.

Metodun yuxarısında, bir toxunma hadisəsindən yarana biləcək mesajlar olan bir cavab sətirləri təyin edirik.

Ev düyməsinə basıldığı təqdirdə tətbiq sona çatacaq və əsas menyu ekranına qayıdacaq. Əks təqdirdə, metod 0 ilə 7 arasında (təsadüfi) təsadüfi bir ədəd yaradacaq və cavab mətni mesajı serialından show7Response () metoduna ötürəcəkdir.

Nəhayət, backToMenu () metodu Ev düyməsinə toxunmağı izləyir və idarəetməni əsas menyu ekranına qaytarır.

ReadMenuTouch () metodu, əsas menyu ekranında olduğunuzda bir toxunma hadisəsini izləyir. Toxunma aşkar edildikdə, x və y koordinatlarını toxunuşun x və y koordinatlarına uyğun olaraq funcX və funcY massivlərində görünən getFunc (x, y) metoduna keçir. Daha sonra seçilmiş tətbiq üçün func dizisindəki nömrəni qaytarır. '1' Saucy 7 və '2' mətn giriş tətbiqidir. Sonra rejimi tətbiqin yerinə yetirilməsi üçün həmin tətbiqin dəyərinə təyin edir.

Addım 9: Loop () Bloku

İndi müvafiq ekranı göstərmək və sonra hal -hazırda seçilmiş seçim əsasında uyğun toxunma metodlarını çağırmaq üçün loop () blok kodunu qurmağa başlayacağıq.

Döngü () metodu iki keçid () quruluşundan ibarətdir.

Üst keçid quruluşu, hansı seçimin seçildiyindən asılı olaraq uyğun ekranı göstərməyi idarə edir. Həm də cari seçilmiş seçim üçün işləməsi üçün uyğun toxunma metodu üçün tMode dəyərini təyin edir. Nəhayət, ekran dəyərinin sonsuz yenidən çəkilməməsi üçün rejim dəyərini 9 olaraq təyin edir.

Alt keçid quruluşu, tMode dəyəri ilə təmsil olunan istifadəçi tərəfindən seçilmiş tətbiq seçiminə əsasən hansı toxunma üsullarının icra edildiyini idarə edir.

Eskizi Arduino -ya yükləyin və Saucy 7 tətbiqini seçib istifadə edə bilməlisiniz.

Çox iş görmüsən! Bir ara verin:-)

Addım 10: Mətn Giriş Tətbiqi - Evdə uzanırıq

İndi mətn giriş tətbiqinin metodlarını birləşdirəcəyik.

makeKbd () klaviaturanı ekranda çəkir.

Altı doldurulmuş yuvarlaq düzbucaqlı çəkir və sonra hər bir "açar" ın üzərinə müvafiq hərfi basıb cString simindən düyməni basaraq ekranda yazdırır. FillRoundedRect () əmrindəki ikinci son parametrin hər bir küncün piksellərdəki radiusu olduğuna diqqət yetirin. Bu dəyər nə qədər yüksəkdirsə, künclər o qədər yuvarlaqlaşdırılır.

ReadKbdTouch () metodu digər toxunma aşkarlama üsullarına bənzəyir.

Ev düyməsində olmayan bir toxunuş aşkar edilərsə, x və y koordinatlarını ekrandakı x və y yerinə uyğun gələn xarakteri verən curChar (x, y) metoduna keçir. 'Yazılmış' mesajı daha sonra 'displayMsg (theChar) metodundan istifadə edərək ekranda göstərilir.

CurChar (x, y) metodu, readKbdTouch () -dən ötürülən x və y koordinatlarına yaxın olan bir uyğunluğu tapmaq üçün letterX və letterY dizilərini axtarır. Bir uyğunluq taparsa, müvafiq məktubu readKbdTouch metoduna qaytarır. TheChar dəyişənini bir boşluq simvolu üçün ASCII kodu olan 32 -yə başladığımızı unutmayın. İstifadəçi klaviaturadan uzaq bir sahəyə toxunarsa, mövcud olmayan simvolları göstərməməsi üçün bunu edirik.

DisplayMsg (theChar) metodu curChar (x, y) -dən qaytarılmış xarakteri alır və onu msg sətrinə əlavə edir. Daha sonra mesajı ekranda əks etdirir.

Nəhayət, mətn girişi tətbiq seçimini qəbul etmək üçün loop () blokunu yeniləyəcəyik.

TftDemo eskizini Arduino -ya yükləyin və tamamlanmış tətbiqdən istifadə edə biləsiniz.

Təbrik edirik! bir TFT toxunma ekranı tətbiqini qurdunuz! Günün qalan hissəsini istirahət edin!

Addım 11: Slick Getting! - Eskizinizdə Adafruit Bitmap Şriftlərindən istifadə

Standart tft font dəsti tamamdır. TFT eskizlərimizdə düzgün bitmapli şriftlərdən istifadə edə bilsək daha gözəldir.

İşin mənfi tərəfi odur ki, şrift dəstlərini Arduino yaddaşına yükləmək əhəmiyyətli yer tutur. Əslində, eskizinizi Arduinoya yükləməyəcək qədər çox şriftlə doldurmaq çox asandır.

Şriftlər artıq bu layihə üçün quraşdırdığınız Adafruit_GFX kitabxana qovluğunda mövcuddur. Şriftlərdən istifadə etmək üçün əla bir dərslik bu saytda.

Eskizinizin başlıq hissəsinə istifadə etmək istədiyiniz şriftin yazı tipi istinadını əlavə edin. Bu nümunə üçün FreeSerifBoldItalic18p7b şriftindən istifadə edəcəyik.

#daxil edin

Splash () metodunuzda tft.setTextSize () şərhini yazın; əmr.

Aşağıdakı əmri əlavə edin,

tft.setFont (& FreeSerifBoldItalic18pt7b);

İndi hər hansı bir print () əmrləri hazırda göstərilən şriftdən istifadə edəcək. Fərqli bir şriftə keçmək üçün, istifadə etmək istədiyiniz növbəti şriftlə başqa bir tft.setFont () əmrindən istifadə edərdiniz.

Şriftin standart tft şriftinə qayıtması üçün sadəcə tft.setFont () istifadə edin; parametri olmayan əmr.

Eskizi Arduino -ya yükləyin və ekranın mətni göstərmək üçün bitmap şriftindən istifadə etdiyini görəcəksiniz. Şrift daxil etdiyiniz zaman eskizin ölçüsünün əhəmiyyətli dərəcədə böyük olduğunu görəcəksiniz.

Addım 12: Son Düşüncələr

Əlinizdə olan bir çox digər qrafik obyekt əmrləri var. Bunlara daxildir:

tft.drawRect (x, y, en, boy, RENK);

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

Aşağıdakı nümunələr tft.color565 metodundan istifadə edərək rəngi qırmızı, yaşıl və mavi dəyərlərə əsaslanaraq təyin etməyə imkan verir. Eskizimizdə istifadə etdiyimiz sabit müəyyən edilmiş HEX rəng dəyərlərindən istifadə etmək üçün alternativ bir yoldur.

tft.drawRoundRect (x, y, en, hündürlük, radius, tft.color565 (255, 0, 0)); // bu qırmızı olardı

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // bu yaşıl olardı

tft.drawTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (0, 0, 255)); // mavi

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

Bu əmrlərlə oynayın və TFT layihələrinizə necə əlavə edə biləcəklərini araşdırın.

TFT ekran istifadə etməyi öyrənmək çətindir və bu ilk addımları öyrənmək üçün vaxt ayırdığınız üçün özünüzlə fəxr etməlisiniz.

TFT ekranları Arduino layihələrinizə cəlbedici və faydalı bir qrafik istifadəçi interfeysi əlavə edə bilər.

Bu dərslikdə çalışdığınız üçün təşəkkür edirik.

İndi çıxın və möcüzəli bir şey edin!