Dokunmatik Ekranlı Arduino: 16 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:20

Daha kişiselleştirilmiş menüler ve daha iyi insan/makine arayüzleri oluşturmak ister misiniz? Bu tür projeler için Arduino ve Dokunmatik Ekran kullanabilirsiniz. Bu fikir cazip geliyor mu? Eğer öyleyse, bugün size Mega Arduino ve Dokunmatik Ekranlı bir montaj göstereceğim videoyu izleyin. Ekranda istediğiniz tasarımları nasıl yapacağınızı ve ayrıca dokunmak ve belirli bir komutu etkinleştirmek için ekran bölgesini nasıl belirleyeceğinizi göreceksiniz. Arduino Mega'yı pin sayısından dolayı kullanmayı tercih ettiğimi vurguluyorum.

Bugün size Dokunmatik Ekranı, grafik işlevlerini ve ekrandaki temas noktasının nasıl alınacağını tanıtacağım. Konumlandırma, yazma, şekil tasarlama, renkler, dokunma gibi tüm öğeleri içeren bir örnek de oluşturalım.

Adım 1: Arduino Mega 2560

Adım 2: TFT LCD Shield 2.4"

Projemizde kullandığımız bu ekranın ilginç bir özelliği var: SD karta sahip olması. Ancak bununla ilgili yazma ve okuma, yakında hazırlayacağım başka bir videoda gösterilecektir. Bugünkü dersin amacı, bu ekranın grafik ve dokunmatik ekran özelliklerini özel olarak ele almaktır.

Özellikler:

Ekran Boyutu: 2,4 inç

MicroSD kart yuvası

Renkli LCD: 65K

Sürücü: ILI9325

Çözünürlük: 240 x 320

Dokunmatik ekran: 4 kablolu dirençli dokunmatik ekran

Arayüz: 8 bit veri, artı 4 kontrol hattı

Çalışma voltajı: 3.3-5V

Boyutlar: 71 x 52 x 7 mm

3. Adım: Kitaplıklar

Kitaplıkları ekleyin:

"Adafruit_GFX"

"SWTFT"

"Dokunmatik ekran"

Bağlantılara tıklayın ve kütüphaneleri indirin.

Dosyayı açın ve Arduino IDE'nin kitaplıklar klasörüne yapıştırın.

C: / Program Dosyaları (x86) / Arduino / kitaplıklar

Not

Programımıza başlamadan önce önemli bir konuya değinmemiz gerekiyor: TOUCH kalibrasyonu.

Ekrandaki temas noktalarını almak için basit bir program kullanarak, her iki uçtaki (x, y) noktalarının değerini kaydedin (aşağıdaki şekilde sarı ile vurgulanmıştır). Bu değerler, dokunmayı ekrandaki grafik noktalara eşlemek için önemlidir.

#include //Dokunma noktalarına da izin ver #define YP A1 // Y+ Analog1'de #define XM A2 // X- Analog2'de #define YM 7 // Y- Digital7'de #define XP 6 // X+ Digital6'da //Dokunmatik Ekran ts = Dokunmatik Ekran(XP, YP, XM, YM); geçersiz kurulum() { Serial.begin(9600); } void loop() { TSPoint touchPoint = ts.getPoint();//pega o touch (x, y, z=pressao) Serial.print("X: "); Serial.println(touchPoint.x); Serial.print("Y:"); Serial.println(touchPoint.y); gecikme(1000); }

Adım 4: Fonksiyonlar

Şimdi kütüphanelerin bize sunabileceği bazı grafiksel fonksiyonlara bir göz atalım.

1. çizPiksel

DrawPixel işlevi, verilen noktada ekranda tek bir noktayı boyamaktan sorumludur.

void drawPixel (int16_t x, int16_t ve uint16_t color);

2. çizgi çizmek

drawLine işlevi, iki noktadan bir çizgi çizmekten sorumludur.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);

3. Hızlı VLine çizin

DrawFastVLine işlevi, bir noktadan ve yükseklikten dikey bir çizgi çizmekten sorumludur.

void drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t color);

4. Hızlı Hline çizin

drawFastHLine işlevi, bir noktadan ve genişlikten yatay bir çizgi çizmekten sorumludur.

void drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t color);

5. Beraberlik

DrawRect işlevi, ekranda bir dikdörtgen çizmekten, bir başlangıç noktasını, yüksekliğini ve genişliğini geçmekten sorumludur.

void drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

6. Doldurma

fillRect işlevi, drawRect ile aynıdır, ancak dikdörtgen verilen renkle doldurulacaktır.

void fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

7. beraberlikRoundRect

drawRoundRect işlevi, drawRect ile aynıdır, ancak dikdörtgenin kenarları yuvarlatılmış olacaktır.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t yarıçapı, uint16_t renk);

8. DoldurYuvarlakRect

fillRoundRect işlevi, drawRoundRect ile aynıdır, ancak dikdörtgen verilen renkle doldurulacaktır.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t yarıçap, uint16_t renk);

9. çizÜçgen

DrawTriangle işlevi, 3 köşenin noktasını geçerek ekranda bir üçgen çizmekten sorumludur.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t renk);

10. DoldurÜçgen

fillTriangle işlevi, drawTriangle işleviyle aynıdır, ancak üçgen verilen renkle doldurulacaktır.

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t renk);

11. Çember çiz

drawCircle işlevi, bir kaynak noktasından ve bir yarıçaptan bir daire çizmekten sorumludur.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

12. Doldur Çember

fillCircle işlevi, drawCircle ile aynıdır, ancak daire verilen renkle doldurulacaktır.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

13. Doldurma Ekranı

FillScreen işlevi, ekranı tek bir renkle doldurmaktan sorumludur.

void fillScreen (uint16_t color);

14. setİmleç

setCursor işlevi, imleci belirli bir noktaya yazmak üzere konumlandırmaktan sorumludur.

geçersiz setCursor (int16_t x, int16_t y);

15. setMetinRenk

setTextColor işlevi, yazılacak metne bir renk atamaktan sorumludur. Bunu kullanmanın iki yolu var:

geçersiz setTextColor (uint16_t c); // onlyvoid setTextColor yazma rengini ayarlar (uint16_t c, uint16_t bg); // yazı rengini ve arka plan rengini ayarla

16. setTextSize

setTextSize işlevi, yazılacak metne bir boyut atamaktan sorumludur.

geçersiz setTextSize (uint8_t s);

17. setTextWrap

setTextWrap işlevi, ekranın sınırına ulaştığında satırın kırılmasından sorumludur.

geçersiz setTextWrap (boole w);

18. setDöndürme

setRotation işlevi ekranın döndürülmesinden sorumludur (manzara, portre).

geçersiz setRotation (uint8_t r); // 0 (standart), 1, 2, 3

Adım 5: Örnek

Ekranın bize sağladığı kaynakların çoğunu kullanacağımız bir program oluşturacağız.

Farklı boyutlarda bazı dizeler yazalım, üç geometrik şekil oluşturalım ve üzerlerindeki dokunma olayını alalım, şekillerden birine her dokunduğumuzda hemen altındaki şekil adının geri bildirimini alacağız.

Adım 6: Kitaplıklar

Öncelikle kullanacağımız kütüphaneleri tanımlayalım.

#include //responsável pela parte gráfica

#include ///cevaplar pegar os toques na tela

#include //comunicação com o ekranı

#include // comunicação com o ekranı

#include "math.h" // hesap potensi

7. Adım: Tanımlar

Pinler için bazı makrolar ve ayrıca kullanacağımız önemli değerler tanımlayacağız.

//Dokunma noktalarına da izin verin#YP A1 tanımlayın // Y+ #XM A2 tanımlayın // X- #YM 7 tanımlayın // Y- #XP tanımlayın 6 // X+ //Dokunmaya değer katarlar // Öne Çıkan basit öğeler, geçerlilik değerlerinin (x, y) bir cada toque // encontre os valores nas ekstremidades maks/min (x, y) #define TS_MINX 130 #define TS_MINY 80 #define TS_MAXX 900 #define TS_MAX // tamanho dos textos #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 //metinlerin geri bildirim konumunun belirlenmesi #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_TOUCH_X 120'ye basın 10 #define MAXPRESSURE 1000

Bazı makroların tanımıyla devam ediyoruz.

//Associa o nome das cores aos valores muhabirleri#define BLACK 0x0000 #define KIRMIZI 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define SARI 0xFFE0 #define WHITE 0xFFFF //dados de criação do circulo const = 30 daire; const int daire_x = 240; const int daire_y = 125; //Dokunmatik Ekranlar = Dokunmatik Ekran(XP, YP, XM, YM); // SWTFT tft grafiğinin bir parçası olarak manipüle etmek için nesne;

Adım 8: Kurulum

Kurulumda, grafik kontrol nesnemizi başlatacağız ve ilk konfigürasyonları yapacağız.

geçersiz kurulum() { Serial.begin(9600); //grafik grafik nesnesini sıfırlama veya sıfırlama tft.reset(); // grafik çizimi için kontrol nesnesi tft.begin(); gecikme(500); //rotaciona bir tele para yatay tft.setRotation(1); // bir tela toda de preto tft.fillScreen(SİYAH); //başlangıçtaki yapılandırmaların yapılandırılması için bir função chama initialSettings(); }

Adım 9: Döngü

Döngüde ekrana dokunduğumuz noktayı alacağız ve dokunmanın şekillerden birinde olup olmadığına bakacağız.

void loop() { TSPoint touchPoint = ts.getPoint();//pega o touch (x, y, z=pressao) pinMode(XM, OUTPUT); pinMode(YP, ÇIKIŞ); //mapeia o ponto de touch para o (x, y) grafico // o fato de termos rotacionado bir tele para peyzaj implica no X receber o mapeamento de Y TSPoint p; p.x = harita(touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = harita(touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // eğer (touchPoint.z > MINPRESSURE && touchPoint.z < MAXPRESSURE) { //düzenleme yapılmaz if(pointInRect(p)) { writeShape("Rect"); } //verifica se tocou no triangulo else if(pointInsideTriangle(TSPoint(110, 150, 0), TSPoint(150, 100, 0), TSPoint(190, 150, 0), p)) { writeShape("Üçgen"); } //verifica se tocou no circulo else if(pointInCircle(p)) { writeShape("Daire"); } } }

Adım 10: Çembere Dokunduğumuzu Kontrol Edin

Bu adımda ekran başlatma ile ilgileniyoruz ve görüntülenecek metinlerin renklerini tanımlıyoruz.

/*Öğeleri geliştirme */ void initialSettings() { tft.setTextColor(WHITE); tft.setTextSize(TEXT_SIZE_S); tft.println("ACESSE"); tft.setTextColor(SARI); tft.setTextSize(TEXT_SIZE_M); tft.println("MEU BLOG"); tft.setTextColor(YEŞİL); tft.setTextSize(TEXT_SIZE_L); tft.println("FERNANDOK. COM"); createRect(); createTriangle(); createCircle(); tft.setCursor(FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor(CYAN); tft.setTextSize(TEXT_SIZE_L); tft.println("ŞEKİL: "); }

Adım 11: Geometrik Şekiller Oluşturma İşlevleri

Kökleri belirlediğimiz bir dikdörtgen, bir üçgen ve bir daire oluşturuyoruz.

//cria um retangulo com origem (x, y) = (10, 100)//width = 80 e yükseklik = 50 void createRect() { tft.fillRect(10, 100, 80, 50, RED); tft.drawRect(10, 100, 80, 50, BEYAZ); } //cria um triangulo ortak köşeler: //A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle() { tft.fillTriangle(110, 150, 150, 100, 190, 150, SARI); tft.drawTriangle(110, 150, 150, 100, 190, 150, BEYAZ); } //cria um circulo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle() { tft.fillCircle(240, 125, 30, GREEN); tft.drawCircle(240, 125, 30, BEYAZ); }

Adım 12: Dikdörtgene Dokunduğumuzu Kontrol Edin

Bu fonksiyon, noktanın dikdörtgenin içinde olup olmadığını kontrol eder.

//Ponto'yu kontrol etmek için kontrol edin pointInRect(TSPoint p) { //max/min X do retangulo if(px >= 10 && px <= 90) { //max/min Y do retangulo if(py) = 100) { true döndür; } } false döndür; }

Adım 13: Çembere Dokunduğumuzu Kontrol Edin

Bu daire ile aynıdır.

//distancia entre pontos D = raiz((xb-xa)^2 + (yb-ya)^2)//vefifica se o ponto está dentro do circulo //se a distancia do ponto pra origem do circulo for menor ou igual ao raio, en iyi dentro bool pointInCircle(TSPoint p) { kayan mesafe = sqrt(pow(px - daire_x, 2) + pow(py - daire_y, 2)); if(mesafe <= daire_yarıçapı) { dönüş doğru; } false döndür; }

Adım 14: Üçgene Dokunduğumuzu Kontrol Edin

Noktanın aynı kontrolü üçgen içinde de gerçekleşir.

// İşlemleri doğrulayan ABC// Üçgenleri kontrol et TRUE senão retorna YANLIŞ bool pointInsideTriangle(TSPoint a, TSPoint b, TSPoint c, TSPoint p){ float ABC = üçgenArea(a, b, c); float ACP = üçgenAlan(a, c, p); float ABP = üçgenAlan(a, b, p); float CPB = üçgenAlan(c, p, b); if(ABC == ACP+ABP+CPB){ true döndür; } false döndür; } // İşlevsel bir hesapla bir alan de um triangulo com temel nos pontos x, y float üçgenArea(TSPoint a, TSPoint b, TSPoint c){ return fabs(((bx - ax)*(cy - ay) - (cx - balta) * (tarafından - ay))/2); }

Adım 15: Dokunulan Nesnenin Adını Yazdırma İşlevi

Burada kullanılan geometrik şeklin adını ekrana yazıyoruz.

//biçimsel bir geometrik düzene girmeden önce yazmaShape(Dize şekli) { tft.fillRect(FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y, 170, 30, BLACK); tft.setCursor(FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y); tft.setTextSize(TEXT_SIZE_G); tft.setTextColor(BEYAZ); tft.println(şekil); }

Adım 16: Dosyalar

Dosyaları indirin:

BEN HAYIR

PDF