Arduino Uno: Bitmap Animation ILI9341 TFT Touchscreen Display Shield With Visuino: 12 ნაბიჯი (სურათებით)

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:20

ILI9341 დაფუძნებული TFT სენსორული ეკრანის ფარები არის ძალიან პოპულარული დაბალი ღირებულების ჩვენების ფარები Arduino– სთვის. Visuino– ს მათ დიდი ხანია აქვს მხარდაჭერა, მაგრამ მე არასოდეს მქონია შანსი დავწერო გაკვეთილი, თუ როგორ გამოვიყენო ისინი. ცოტა ხნის წინ თუმცა რამდენიმე ადამიანმა დაუსვა შეკითხვები Visuino– სთან დისპლეის გამოყენების შესახებ, ამიტომ გადავწყვიტე გავაკეთო სამეურვეო პროგრამა.

ამ გაკვეთილზე მე გაჩვენებთ თუ რამდენად ადვილია ფარის დაკავშირება არდუინოსთან და პროგრამირება Visuino– სთან ერთად ბიტმაპის ანიმაციისთვის, რათა ის ეკრანზე გადაადგილდეს.

ნაბიჯი 1: კომპონენტები

1. ერთი Arduino Uno თავსებადი დაფა (შეიძლება მეგასთანაც იმუშაოს, მაგრამ მე ჯერ არ გამომიცდია ფარი)
2. ერთი ILI9341 2.4 დიუმიანი TFT სენსორული ფარი არდუინოსთვის

ნაბიჯი 2: შეაერთეთ ILI9341 TFT სენსორული ეკრანის ფარი Arduino– სთან

შეაერთეთ TFT ფარი Arduino Uno– ს თავზე, როგორც ეს მოცემულია სურათებში

ნაბიჯი 3: დაიწყეთ Visuino და დაამატეთ TFT ჩვენების ფარი

Arduino– ს პროგრამირების დასაწყებად, თქვენ დაგჭირდებათ Arduino IDE დაინსტალირებული აქედან:

დარწმუნდით, რომ დააინსტალირეთ 1.6.7 ან უფრო მაღალი, წინააღმდეგ შემთხვევაში ეს ინსტრუქცია არ იმუშავებს

Visuino: https://www.visuino.com ასევე უნდა იყოს დაინსტალირებული.

1. დაიწყეთ Visuino, როგორც ეს ნაჩვენებია პირველ სურათზე
2. დააწკაპუნეთ Arduino კომპონენტის "ისარი ქვემოთ" ღილაკზე ჩამოსაშლელი მენიუს გასახსნელად (სურათი 1)
3. მენიუდან აირჩიეთ "ფარის დამატება …" (სურათი 1)
4. "ფარები" დიალოგში გააფართოვეთ "მონიტორები" კატეგორია და შეარჩიეთ "TFT ფერადი სენსორული ეკრანი ILI9341 Shield", შემდეგ დააჭირეთ ღილაკს "+" მის დასამატებლად (სურათი 2)

ნაბიჯი 4: Visuino– ში: დაამატეთ Draw Text Element ტექსტის ჩრდილისთვის

შემდეგ ჩვენ უნდა დავამატოთ გრაფიკული ელემენტები ტექსტისა და ბიტმაპის რენდერაციისთვის. პირველ რიგში ჩვენ დავამატებთ გრაფიკულ ელემენტს ტექსტის ჩრდილის დასახატად:

1. ობიექტის ინსპექტორში დააწკაპუნეთ ღილაკზე "…" "TFT ჩვენების" ელემენტის "ელემენტები" მნიშვნელობის გვერდით (სურათი 1)
2. ელემენტების რედაქტორში აირჩიეთ "ტექსტის დახაზვა" და შემდეგ დააჭირეთ ღილაკს "+" (სურათი 2), რომ დაამატოთ ერთი (სურათი 3)
3. ობიექტის ინსპექტორმა დააყენა "ფერი" თვისების მნიშვნელობა "Draw Text1" ელემენტზე "aclSilver" (სურათი 3)
4. ობიექტის ინსპექტორში დააყენეთ "Draw Text1" ელემენტის "ზომა" თვისების მნიშვნელობა "4" (სურათი 4). ეს ტექსტს უფრო დიდს ხდის
5. ობიექტის ინსპექტორში დააყენეთ "ტექსტის დახაზვის" ელემენტის "ტექსტის" თვისება "ვიზუინოზე" (სურათი 5)
6. ობიექტის ინსპექტორმა დაადგინა "X" ტექსტის ელემენტის "X" თვისების მნიშვნელობა "43" (სურათი 6)
7. ობიექტის ინსპექტორმა დააყენა "D" Text1 ელემენტის "Y" თვისების მნიშვნელობა "278" (სურათი 6)

ნაბიჯი 5: Visuino– ში: ტექსტის წინა პლანზე დაამატეთ Draw Text Element

ახლა ჩვენ დავამატებთ გრაფიკულ ელემენტს ტექსტის დასახატად:

1. ელემენტების რედაქტორში აირჩიეთ "ტექსტის დახაზვა" და შემდეგ დააჭირეთ ღილაკს "+" (სურათი 1), რომ დაამატოთ მეორე (სურათი 2)
2. ობიექტის ინსპექტორში დააყენეთ "Draw Text1" ელემენტის "ზომა" თვისება "4" (სურათი 2)
3. ობიექტის ინსპექტორში დააყენეთ "ტექსტის დახატვის" ელემენტის "ტექსტის" თვისება "ვიზუინოზე" (სურათი 3)
4. ობიექტის ინსპექტორში დააყენეთ "X" ტექსტის ელემენტის "X" თვისების მნიშვნელობა "40" (სურათი 4)
5. ობიექტის ინსპექტორმა დაადგინა "დახაზეთ ტექსტი 1" ელემენტის "Y" თვისება "275" (სურათი 4)

ნაბიჯი 6: Visuino– ში: დაამატეთ Draw Bitmap ელემენტი ანიმაციისთვის

შემდეგ ჩვენ დავამატებთ გრაფიკულ ელემენტს ბიტმაპის დასახატად:

1. ელემენტების რედაქტორში აირჩიეთ "დახაზეთ Bitmap" და შემდეგ დააჭირეთ ღილაკს "+" (სურათი 1), რომ დაამატოთ ერთი (სურათი 2)
2. ობიექტის ინსპექტორში დააწკაპუნეთ ღილაკზე "…" "Bitmap1" ელემენტის "Bitmap" თვისების მნიშვნელობის გვერდით (სურათი 2) "Bitmap Editor" - ის გასახსნელად (სურათი 3)
3. "Bitmap რედაქტორში" დააწკაპუნეთ ღილაკზე "ჩატვირთვა …" (სურათი 3) ფაილის გახსნის დიალოგის გასახსნელად (სურათი 4)
4. ფაილის გახსნის დიალოგში შეარჩიეთ ბიტმაპი, რომლის დასახატად და დააჭირეთ ღილაკს "გახსნა" (სურათი 4). თუ ფაილი ძალიან დიდია, ის შეიძლება ვერ მოთავსდეს Arduino მეხსიერებაში. თუ შედგენისას გამოხვალთ მეხსიერების შეცდომებიდან, შეიძლება დაგჭირდეთ პატარა ბიტმაპის არჩევა
5. "Bitmap რედაქტორში" დააჭირეთ ღილაკს "OK". ღილაკი (სურათი 5) დიალოგის დახურვისთვის

ნაბიჯი 7: Visuino– ში: დაამატეთ ქინძისთავები Draw Bitmap ელემენტის X და Y თვისებებისათვის

ბიტმაპის ანიმაციისთვის, ჩვენ უნდა გავაკონტროლოთ მისი X და Y პოზიცია. ამისათვის ჩვენ დავამატებთ ქინძისთავებს X და Y თვისებებისათვის:

1. ობიექტის ინსპექტორში დააწკაპუნეთ "Pin" ღილაკზე "X" თვისების წინ "Draw Bitmap1" ელემენტის (სურათი 1) და აირჩიეთ "Integer SinkPin" (სურათი 2)
2. ობიექტის ინსპექტორში დააწკაპუნეთ ღილაკზე "Pin" "Y" Bitmap1 ელემენტის "Y" თვისების წინ (სურათი 3) და აირჩიეთ "Integer SinkPin" (სურათი 4)

ნაბიჯი 8: Visuino– ში: დაამატეთ 2 მთლიანი სინუს გენერატორი და დააკონფიგურირეთ პირველი

ჩვენ ვიყენებთ 2 მთლიანი სინუს გენერატორს ბიტმაპის მოძრაობის გასაცოცხლებლად:

1. აკრიფეთ "sine" კომპონენტის ხელსაწყოს ყუთის ფილტრაციის ყუთში, შემდეგ შეარჩიეთ "Sine Integer Generator" კომპონენტი (სურათი 1) და ორი მათგანი ჩააგდეთ დიზაინის არეში
2. ობიექტის ინსპექტორში დააყენეთ SineIntegerGenerator1 კომპონენტის "ამპლიტუდის" თვისება "96" (სურათი 2)
3. ობიექტის ინსპექტორში დააყენეთ SineIntegerGenerator1 კომპონენტის "Offset" თვისება "96" (სურათი 3)
4. ობიექტის ინსპექტორში დააყენეთ SineIntegerGenerator1 კომპონენტის "სიხშირის" თვისება "0.2" (სურათი 4)

ნაბიჯი 9: Visuino– ში: დააკონფიგურირეთ მეორე სინუსის გენერატორი და შეაერთეთ სინუს გენერატორები Bitmap– ის X და Y კოორდინატებთან

1. ობიექტის ინსპექტორში დააყენეთ SineIntegerGenerator2 კომპონენტის "ამპლიტუდის" თვისება "120" (სურათი 1)
2. ობიექტის ინსპექტორში დააყენეთ SineIntegerGenerator2 კომპონენტის "Offset" თვისება "120" (სურათი 2)
3. ობიექტის ინსპექტორში დააყენეთ SineIntegerGenerator2 კომპონენტის "სიხშირის" თვისება "0.03" (სურათი 3)
4. შეაერთეთ SineIntegerGenerator1 კომპონენტის "Out" გამომავალი პინი Arduino კომპონენტის "Shields. TFT Sisplay. Elements. Draw Bitmap1" ელემენტთან (სურათი 4)
5. შეაერთეთ SineIntegerGenerator2 კომპონენტის "Out" გამომავალი პინი Arduino კომპონენტის "Shields. TFT Display. Elements. Draw Bitmap1" ელემენტთან (სურათი 5)

ნაბიჯი 10: Visuino– ში: დაამატეთ და დააკავშირეთ საწყისი და საათის მრავალწყაროს კომპონენტები

იმისათვის, რომ ვიზუალურად გადავიღოთ ყოველ ჯერზე X და Y პოზიციის განახლება, ჩვენ უნდა გავაგზავნოთ საათის სიგნალი "Draw Bitmap1" ელემენტზე. პოზიციის შეცვლის შემდეგ ბრძანების გასაგზავნად, ჩვენ გვჭირდება გზა მოვლენების სინქრონიზაციისთვის. ამისათვის ჩვენ გამოვიყენებთ გამეორების კომპონენტს მოვლენების განუწყვეტლივ გენერირებისთვის, ხოლო საათის მრავალ წყაროს თანმიმდევრობით 2 მოვლენის შესაქმნელად. პირველი ღონისძიება დაახამხამებს სინუს გენერატორებს X და Y პოზიციების განახლებისთვის, ხოლო მეორე დააწკაპუნებს "დახაზეთ Bitmap1":

1. აკრიფეთ "გამეორება" კომპონენტის ხელსაწყოს ყუთის ფილტრაციის ყუთში, შემდეგ შეარჩიეთ "გამეორება" კომპონენტი (სურათი 1) და ჩააგდეთ ის დიზაინის არეალში (სურათი 2)
2. აკრიფეთ "multi" კომპონენტის ხელსაწყოს ყუთის ფილტრაციის ყუთში, შემდეგ შეარჩიეთ კომპონენტი "Clock Multi Source" (სურათი 2) და ჩააგდეთ იგი დიზაინის არეში (სურათი 3)
3. შეაერთეთ Repeat1 კომპონენტის "Out" გამომავალი პინი ClockMultiSource1 კომპონენტის "In" შეყვანის პინთან (სურათი 3)
4. შეაერთეთ ClockMultiSource1 კომპონენტის "Out" ქინძისთავების "Pin [0]" გამომავალი პინი SineIntegerGenerator1 კომპონენტის "In" შესასვლელთან (სურათი 4)
5. შეაერთეთ ClockMultiSource2 კომპონენტის "Out" ქინძისთავების "Pin [0]" გამომავალი პინი SineIntegerGenerator1 კომპონენტის "In" შესასვლელთან (სურათი 5)
6. შეაერთეთ Arrowino კომპონენტის "Shields. TFT Display. Elements. Draw Bitmap1" ელემენტის "საათის" შეყვანის pin "სურათი 6"

ნაბიჯი 11: შექმენით, შეადგინეთ და ატვირთეთ არდუინოს კოდი

1. Visuino– ში დააჭირეთ F9 ან დააწკაპუნეთ სურათზე ნაჩვენები ღილაკზე Arduino კოდის შესაქმნელად და გახსენით Arduino IDE
2. Arduino IDE– ში დააწკაპუნეთ ღილაკზე „ატვირთვა“, რათა შეადგინოთ და ატვირთოთ კოდი (სურათი 2)

ნაბიჯი 12: და ითამაშე …

გილოცავთ! თქვენ დაასრულეთ პროექტი.

სურათები 2, 3, 4 და 5 და ვიდეო აჩვენებს დაკავშირებულ და გაძლიერებულ პროექტს. თქვენ დაინახავთ, რომ Bitmap მოძრაობს ILI9341 დაფუძნებული TFT სენსორული ეკრანის ფარის გარშემო, როგორც ჩანს ვიდეოში.

სურათზე 1 თქვენ შეგიძლიათ ნახოთ Visuino– ს სრული დიაგრამა. ასევე ერთვის Visuino პროექტი, რომელიც მე შევქმენი ამ Instructable– ისთვის და bitmap Visuino– ს ლოგოთი. შეგიძლიათ გადმოწეროთ და გახსნათ Visuino– ში: