Arduino sa ekranom osjetljivim na dodir: 16 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:08

Želite li stvoriti personalizirane jelovnike i bolja sučelja čovjek/stroj? Za takve projekte možete koristiti Arduino i zaslon osjetljiv na dodir. Zvuči li ova ideja primamljivo? Ako je tako, pogledajte video danas, gdje ću vam pokazati sklop s Mega Arduinom i ekranom osjetljivim na dodir. Vidjet ćete kako napraviti željene dizajne na ekranu, kao i kako odrediti područje ekrana za dodir i aktiviranje određene naredbe. Naglašavam da sam se odlučio za korištenje Arduino Mega zbog količine pinova.

Danas ću vam predstaviti ekran osjetljiv na dodir, njegove grafičke funkcije i način hvatanja dodirne tačke na ekranu. Napravimo i primjer koji sadrži sve elemente, poput pozicioniranja, pisanja, dizajniranja oblika, boja i dodira.

Korak 1: Arduino Mega 2560

Korak 2: TFT LCD štit 2.4"

Ovaj ekran koji koristimo u svom projektu ima zanimljivu karakteristiku: ima SD karticu. Međutim, pisanje i čitanje uključeno u ovo bit će prikazano u drugom videu, koji ću uskoro producirati. Cilj današnje lekcije je da se konkretno pozabavimo grafičkim i dodirnim funkcijama ovog ekrana.

Karakteristike:

Dimenzije ekrana: 2,4 inča

Utor za microSD karticu

LCD u boji: 65K

Upravljački program: ILI9325

Rezolucija: 240 x 320

Ekran osetljiv na dodir: 4-žični otporni ekran osetljiv na dodir

Sučelje: 8 -bitni podaci, plus 4 kontrolne linije

Radni napon: 3.3-5V

Dimenzije: 71 x 52 x 7 mm

Korak 3: Biblioteke

Dodajte biblioteke:

"Adafruit_GFX"

"SWTFT"

"Ekran na dodir"

Kliknite na veze i preuzmite biblioteke.

Raspakirajte datoteku i zalijepite je u mapu biblioteke Arduino IDE -a.

C: / Programske datoteke (x86) / Arduino / biblioteke

Bilješka

Prije nego započnemo naš program, moramo se pozabaviti nečim važnim: TOUCH kalibracijom.

Koristeći jednostavan program za dobijanje dodirnih tačaka na ekranu, pohranite vrijednost tačaka (x, y) na svakom kraju (označeno žutom bojom na donjoj slici). Ove su vrijednosti važne za mapiranje dodira na grafičke točke na ekranu.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ je na Analog1 #define XM A2 // X- je na Analog2 #define YM 7 // Y- je na Digital7 #define XP 6 // X+ je na Digital6 // Objeto para manipulacao dos eventos de toque on tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); void setup () {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); kašnjenje (1000); }

Korak 4: Funkcije

Pogledajmo sada neke grafičke funkcije koje nam biblioteke mogu ponuditi.

1. drawPixel

Funkcija drawPixel odgovorna je za iscrtavanje jedne tačke na ekranu u datoj tački.

void drawPixel (int16_t x, int16_t i, uint16_t boja);

2. drawLine

Funkcija drawLine odgovorna je za crtanje linije iz dvije točke.

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

3. drawFastVLine

Funkcija drawFastVLine odgovorna je za iscrtavanje okomite linije od točke i visine.

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

4. drawFastHLine

Funkcija drawFastHLine odgovorna je za crtanje vodoravne linije od točke i širine.

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

5. drawRect

Funkcija drawRect je odgovorna za iscrtavanje pravokutnika na ekranu, prenošenje ishodišne tačke, njene visine i širine.

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

6. fillRect

Funkcija fillRect je ista kao drawRect, ali pravokutnik će biti ispunjen zadanom bojom.

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

7. drawRoundRect

Funkcija drawRoundRect je ista kao drawRect, ali pravokutnik će imati zaobljene rubove.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radijus, uint16_t boja);

8. fillRoundRect

Funkcija fillRoundRect je ista kao drawRoundRect, ali pravokutnik će biti ispunjen zadanom bojom.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radijus, uint16_t boja);

9. drawTriangle

Funkcija drawTriangle odgovorna je za iscrtavanje trokuta na ekranu, prolazeći tačku 3 vrha.

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

10. fillTriangle

Funkcija fillTriangle je ista kao drawTriangle, ali trokut će biti ispunjen zadanom bojom.

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

11. drawCircle

Funkcija drawCircle odgovorna je za crtanje kruga od izvorne tačke i radijusa.

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

12. fillCircle

Funkcija fillCircle je ista kao drawCircle, ali će krug biti ispunjen zadanom bojom.

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

13. fillScreen

Funkcija fillScreen odgovorna je za ispunjavanje ekrana jednom bojom.

void fillScreen (boja uint16_t);

14. setCursor

Funkcija setCursor je odgovorna za pozicioniranje kursora za pisanje na datu tačku.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Funkcija setTextColor odgovorna je za dodjeljivanje boje tekstu za pisanje. Imamo dva načina da ga koristimo:

void setTextColor (uint16_t c); // postavlja boju samo za pisanjevovo setTextColor (uint16_t c, uint16_t bg); // postavljanje boje pisanja i boje pozadine

16. setTextSize

Funkcija setTextSize odgovorna je za dodjelu veličine tekstu koji će biti napisan.

void setTextSize (uint8_t s);

17. setTextWrap

Funkcija setTextWrap odgovorna je za probijanje linije ako dosegne granicu ekrana.

void setTextWrap (boolean w);

18. setRotation

Funkcija setRotation je odgovorna za rotiranje ekrana (pejzaž, portret).

void setRotation (uint8_t r); // 0 (standardno), 1, 2, 3

Korak 5: Primjer

Napravit ćemo program u kojem ćemo koristiti većinu resursa koje nam zaslon pruža.

Napisimo neke nizove u različitim veličinama, stvorimo tri geometrijske figure i pokupimo dodirni događaj na njima, svaki put kad dodirnemo jednu od figura, imat ćemo povratnu informaciju o imenu figure odmah ispod njih.

Korak 6: Biblioteke

Prvo definirajmo biblioteke koje ćemo koristiti.

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

#include // responsável por pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#include "math.h" // kalkulatorna potencija

Korak 7: Definiše

Definirat ćemo neke makroe za pinove, kao i važne vrijednosti koje ćemo koristiti.

// Portas de leitura das coordenadas do touch #define YP A1 // Y+ #define XM A2 // X- #define YM 7 // Y- #define XP 6 // X+ // valores encontrados através da calibração do touch // faça um código simples para imprimir os valores (x, y) cada toque // então encontre os valores nas extremidades max/min (x, y) #define TS_MINX 130 #define TS_MINY 80 #define TS_MAXX 900 #define TS_MAXY 900 // tamanho dos textos #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 // pozicioniranje dosl. 10 #define MAXPRESSURE 1000

Nastavljamo s definicijom nekih makronaredbi.

// Associa o nome das cores aos valores korespondentes #define BLACK 0x0000 #define RED 0xF800 #define ZELENO 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criaçusoo do circuiot 30; const int krug_x = 240; const int krug_y = 125; // objekti za manipulaciju dosadašnjim događajima na tijelu TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objekat para manipulacao da parte grafica SWTFT tft;

Korak 8: Postavljanje

U postavljanju ćemo inicijalizirati naš grafički kontrolni objekt i napraviti prve konfiguracije.

void setup () {Serial.begin (9600); // reseta o objektu da lib grafica tft.reset (); // inicializa objeto controlador da lib grafica tft.begin (); kašnjenje (500); // rotacija tijela za pejzaž tft.setRotation (1); // pinta a tela toda de preto tft.fillScreen (BLACK); // funkcija za početne postavke konfiguracije initialSettings (); }

Korak 9: Petlja

U petlji ćemo pokupiti točku u kojoj dodirujemo ekran i vidjeti je li došlo do dodira na jednoj od slika.

void loop () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, OUTPUT); pinMode (YP, OUTPUT); // mapeia o ponto de touch para o (x, y) grafico // o fato de termos rotacionado a tela para landscape ne implicira X prijemnik o mapeamento de Y TSPoint p; p.x = mapa (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = mapa (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // provjerava se da nema toque foi suficente if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// provjerava se da li nema retangulo if (pointInRect (p)) {writeShape ("Rect"); } // provjerava se da li nema više trougla ako if (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("Triangle"); } // verifikuje se da se ne koristi cirkulacija osim if (pointInCircle (p)) {writeShape ("Circle"); }}}

Korak 10: Provjerite dodirujemo li krug

U ovom koraku bavimo se inicijalizacijom ekrana i definiramo boje tekstova za prikaz.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("PRISTUPI"); tft.setTextColor (ŽUTO); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (ZELENO); 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 ("SHAPE:"); }

Korak 11: Funkcije stvaranja geometrijskih oblika

Stvaramo pravokutnik, trokut i krug s ishodištem koje odredimo.

// cria um retangulo com origem (x, y) = (10, 100) // širina = 80 e visina = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, BIJELO); } // cria um triangulo com os vertices: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, ŽUTI); tft.drawTriangle (110, 150, 150, 100, 190, 150, BIJELO); } // 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, BIJELO); }

Korak 12: Provjerite dodirujemo li pravokutnik

Ova funkcija provjerava je li točka unutar pravokutnika.

// Funkão que verifica se o ponto está dentro do retângulobool pointInRect (TSPoint p) {// max/min X do retangulo if (px> = 10 && px <= 90) {// max/min Y do retangulo if (py = 100) {return true; }} return false; }

Korak 13: Provjerite dodirujemo li krug

Ovo je isto kao i sa krugom.

// distancia entre pontos D = raiz ((xb-xa)^2 + (yb-ya)^2) // vefifica se o ponto está dentro do circulo // se distancia do ponto pra origem do circulo za menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) {float distance = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); if (udaljenost <= kružni_radijus) {return true; } return false; }

Korak 14: Provjerite dodirujemo li trokut

Ista provjera tačke se dešava i unutar trougla.

// Funkão que verifica is o ponto p esta dentro to triangulo ABC // Sestiver dentro retorna TRUE senão retorna FALSE bool pointInsideTriangle (TSPoint a, TSPoint b, TSPoint c, TSPoint p) {float ABC = trougaoArea (a, b, c); float ACP = trougaoArea (a, c, p); float ABP = trougaoArea (a, b, p); float CPB = trougaona površina (c, p, b); if (ABC == ACP+ABP+CPB) {vrati true; } return false; } // Função que izračunava površinu sa umreženog trougla sa bazom pontos x, y float trougaoArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax)*(cy - ay) - (cx - sjekira) * (by - ay))/2); }

Korak 15: Funkcija ispisivanja naziva dodirnutog objekta

Ovdje na ekranu ispisujemo naziv geometrijske figure koja se koristi.

// escreve na tela o nome da figura geométrica que foi tocadavoid writeShape (Oblik niza) {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 (BIJELO); tft.println (oblik); }

Korak 16: Datoteke

Preuzmite datoteke:

JA NE

PDF