Arduino Uno: Visuino ile ILI9341 TFT Dokunmatik Ekran Kalkanı Üzerinde Bitmap Animasyonu: 12 Adım (Resimlerle)

2025 Yazar: John Day | [email protected]. Son düzenleme: 2025-01-23 15:14

ILI9341 tabanlı TFT Dokunmatik Ekran Kalkanları, Arduino için çok popüler düşük maliyetli Ekran Kalkanlarıdır. Visuino bir süredir onlara destek veriyor, ancak bunların nasıl kullanılacağına dair bir Eğitim yazma şansım hiç olmadı. Ancak son zamanlarda çok az kişi ekranları Visuino ile kullanma hakkında soru sordu, ben de bir eğitim hazırlamaya karar verdim.

Bu Eğitimde size Shield'i Arduino'ya bağlamanın ve Visuino ile bir Bitmap'i Ekranda hareket edecek şekilde canlandırmak için programlamanın ne kadar kolay olduğunu göstereceğim.

Adım 1: Bileşenler

1. Bir adet Arduino Uno uyumlu kart (Mega ile de çalışabilir, ancak henüz shield'ı onunla test etmedim)
2. Arduino için bir adet ILI9341 2.4" TFT Dokunmatik Ekran Kalkanı

Adım 2: ILI9341 TFT Dokunmatik Ekran Kalkanını Arduino'ya bağlayın

TFT Shield'i resimlerde gösterildiği gibi Arduino Uno'nun üstüne takın

Adım 3: Visuino'yu başlatın ve TFT Ekran Kalkanı ekleyin

Arduino'yu programlamaya başlamak için, Arduino IDE'yi buradan yüklemeniz gerekir:

1.6.7 veya üstünü yüklediğinizden emin olun, aksi takdirde bu Talimat çalışmayacaktır

Visuino: https://www.visuino.com'un da yüklenmesi gerekir.

1. Visuino'yu ilk resimde gösterildiği gibi başlatın
2. Açılır Menüyü açmak için Arduino bileşeninin "Aşağı Ok" düğmesine tıklayın (Resim 1)
3. Menüden "Kalkan Ekle…" seçeneğini seçin (Resim 1)
4. "Kalkanlar" iletişim kutusunda "Ekranlar" kategorisini genişletin ve "TFT Renkli Dokunmatik Ekran ILI9341 Kalkanı"nı seçin, ardından eklemek için "+" düğmesine tıklayın (Resim 2)

Adım 4: Visuino'da: Metin Gölgesi için Draw Text Element Ekle

Ardından, metin ve bitmap oluşturmak için Grafik öğeleri eklememiz gerekiyor. İlk önce metnin gölgesini çizmek için grafik elemanı ekleyeceğiz:

1. Object Inspector'da "TFT Display" Elementinin "Elements" özelliğinin değerinin yanındaki "…" butonuna tıklayın (Resim 1)
2. Elements editöründe “Draw Text” öğesini seçin ve ardından bir tane eklemek için "+" düğmesine (Resim 2) tıklayın (Resim 3)
3. Object Inspector'da "Draw Text1" öğesinin "Color" özelliğinin değerini "aclSilver" olarak ayarlayın (Resim 3)
4. Object Inspector'da "Draw Text1" öğesinin "Size" özelliğinin değerini "4" olarak ayarlayın (Resim 4). Bu, metni daha büyük hale getirir
5. Object Inspector'da "Draw Text1" öğesinin "Text" özelliğinin değerini "Visuino" olarak ayarlayın (Resim 5)
6. Object Inspector'da "Draw Text1" öğesinin "X" özelliğinin değerini "43" olarak ayarlayın (Resim 6)
7. Object Inspector'da "Draw Text1" öğesinin "Y" özelliğinin değerini "278" olarak ayarlayın (Resim 6)

Adım 5: Visuino'da: Metin Ön Planı için Çizim Metin Elemanı Ekleme

Şimdi metni çizmek için grafik öğesi ekleyeceğiz:

1. Elements editöründe “Draw Text” öğesini seçin ve ardından ikincisini eklemek için "+" düğmesine (Resim 1) tıklayın (Resim 2)
2. Object Inspector'da "Draw Text1" öğesinin "Size" özelliğinin değerini "4" olarak ayarlayın (Resim 2)
3. Object Inspector'da "Draw Text1" öğesinin "Text" özelliğinin değerini "Visuino" olarak ayarlayın (Resim 3)
4. Object Inspector'da "Draw Text1" öğesinin "X" özelliğinin değerini "40" olarak ayarlayın (Resim 4)
5. Object Inspector'da "Draw Text1" öğesinin "Y" özelliğinin değerini "275" olarak ayarlayın (Resim 4)

Adım 6: Visuino'da: Animasyon için Draw Bitmap Elementi Ekleyin

Ardından, bitmap'i çizmek için grafik öğesi ekleyeceğiz:

1. Elements editöründe “Draw Bitmap” öğesini seçin ve ardından bir tane eklemek için "+" düğmesine (Resim 1) tıklayın (Resim 2)
2. Object Inspector'da "Draw Bitmap1" Elementinin (Resim 2) "Bitmap" özelliğinin değerinin yanındaki "…" butonuna tıklayarak "Bitmap Editor"'ı açın (Resim 3)
3. "Bitmap Editor" da "Load…" düğmesine tıklayın (Resim 3) Dosya Açma İletişim Kutusunu açmak için (Resim 4)
4. Dosya Aç İletişim kutusunda çizilecek bitmap'i seçin ve "Aç" düğmesine tıklayın (Resim 4). Dosya çok büyükse Arduino belleğine sığmayabilir. Derleme sırasında bellek yetersiz hatası alırsanız, daha küçük bir bitmap seçmeniz gerekebilir.
5. "Bitmap Düzenleyicisi"nde "Tamam"ı tıklayın. iletişim kutusunu kapatmak için düğmesine (Resim 5)

Adım 7: Visuino'da: Draw Bitmap Elemanının X ve Y Özellikleri için Pinler Ekleyin

Bitmap'i canlandırmak için X ve Y konumunu kontrol etmemiz gerekiyor. Bunun için X ve Y özellikleri için pinler ekleyeceğiz:

1. Object Inspector'da "Draw Bitmap1" elementinin "X" özelliğinin önündeki "Pin" butonuna tıklayın (Resim 1) ve "Integer SinkPin"i seçin (Resim 2)
2. Object Inspector'da "Draw Bitmap1" elementinin "Y" özelliğinin önündeki "Pin" butonuna tıklayın (Resim 3) ve "Integer SinkPin"i seçin (Resim 4)

Adım 8: Visuino'da: 2 Tamsayı Sinüs Üreteci Ekle ve İlkini Konfigüre Et

Bitmap hareketini canlandırmak için 2 Tamsayı sinüs üreteci kullanacağız:

1. Component Toolbox'ın Filter kutusuna "sine" yazın ve ardından "Sine Integer Generator" bileşenini seçin (Resim 1) ve iki tanesini tasarım alanına bırakın
2. Object Inspector'da SineIntegerGenerator1 bileşeninin "Genlik" özelliğinin değerini "96" olarak ayarlayın (Resim 2)
3. Object Inspector'da SineIntegerGenerator1 bileşeninin "Offset" özelliğinin değerini "96" olarak ayarlayın (Resim 3)
4. Object Inspector'da SineIntegerGenerator1 bileşeninin "Frequency" özelliğinin değerini "0.2" olarak ayarlayın (Resim 4)

Adım 9: Visuino'da: İkinci Sinüs Üreticisini Konfigüre edin ve Sinüs Üreteçlerini Bitmap'in X ve Y Koordinat Pinlerine Bağlayın

1. Object Inspector'da SineIntegerGenerator2 bileşeninin "Amplitude" özelliğinin değerini "120" olarak ayarlayın (Resim 1)
2. Object Inspector'da SineIntegerGenerator2 bileşeninin "Offset" özelliğinin değerini "120" olarak ayarlayın (Resim 2)
3. Object Inspector'da SineIntegerGenerator2 bileşeninin "Frequency" özelliğinin değerini "0.03" olarak ayarlayın (Resim 3)
4. SineIntegerGenerator1 bileşeninin "Out" çıkış pinini Arduino bileşeninin "Shields. TFT Sisplay. Elements. Draw Bitmap1" öğesinin "X" giriş pinine bağlayın (Resim 4)
5. SineIntegerGenerator2 bileşeninin "Out" çıkış pinini Arduino bileşeninin "Shields. TFT Display. Elements. Draw Bitmap1" öğesinin "Y" giriş pinine bağlayın (Resim 5)

Adım 10: Visuino: Add and Connect Start ve Clock Multi Source Components

Bitmap'i X ve Y konumu her güncellendiğinde oluşturmak için "Draw Bitmap1" öğesine bir saat sinyali göndermemiz gerekir. Komutu pozisyonlar değiştirildikten sonra göndermek için olayları senkronize etmenin bir yoluna ihtiyacımız var. Bunun için sürekli olaylar oluşturmak için Tekrar bileşenini ve sırayla 2 olay oluşturmak için Saat Çoklu Kaynağını kullanacağız. İlk olay sinüs üreteçlerini X ve Y konumlarını güncellemek için saatleyecek ve ikincisi "Draw Bitmap1" i saatleyecektir:

1. Bileşen Araç Kutusunun Filtre kutusuna "tekrar" yazın, ardından "Tekrar" bileşenini seçin (Resim 1) ve tasarım alanına bırakın (Resim 2)
2. Component Toolbox'ın Filter kutusuna "multi" yazın, ardından "Clock Multi Source" bileşenini seçin (Resim 2) ve tasarım alanına bırakın (Resim 3)
3. Repeat1 bileşeninin "Out" çıkış pinini ClockMultiSource1 bileşeninin "In" giriş pinine bağlayın (Resim 3)
4. ClockMultiSource1 bileşeninin "Out" pinlerinin "Pin[0]" çıkış pinini SineIntegerGenerator1 bileşeninin "In" giriş pinine bağlayın (Resim 4)
5. ClockMultiSource2 bileşeninin "Out" pinlerinin "Pin[0]" çıkış pinini SineIntegerGenerator1 bileşeninin "In" giriş pinine bağlayın (Resim 5)
6. Arduino bileşeninin "Shields. TFT Display. Elements. Draw Bitmap1" elemanının "Clock" giriş pininin "Pin[1]" çıkış pinini bağlayın (Resim 6)

Adım 11: Arduino Kodunu Oluşturun, Derleyin ve Yükleyin

1. Visuino'da, Arduino kodunu oluşturmak için F9'a basın veya Resim 1'de gösterilen butona tıklayın ve Arduino IDE'yi açın
2. Arduino IDE'de, kodu derlemek ve yüklemek için Upload butonuna tıklayın (Resim 2)

Adım 12: Ve Oynat…

Tebrikler! Projeyi tamamladınız.

Resimler 2, 3, 4 ve 5 ve Video, bağlanan ve çalıştırılan projeyi göstermektedir. Videoda görüldüğü gibi Bitmap'in ILI9341 tabanlı TFT Dokunmatik Ekran Kalkanı etrafında hareket ettiğini göreceksiniz.

Resim 1'de tam Visuino diyagramını görebilirsiniz. Ayrıca bu Instructable için oluşturduğum Visuino projesi ve Visuino logolu bitmap de ekli. Visuino'da indirip açabilirsiniz: