Arduino s zaslonom osjetljivim na dodir: 16 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:37

Želite li stvoriti prilagođenije 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 zaslonom osjetljivim na dodir. Vidjet ćete kako izraditi ž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 koristiti Arduino Mega zbog količine pinova.

Danas ću vam predstaviti zaslon osjetljiv na dodir, njegove grafičke funkcije i kako uhvatiti dodirnu točku na zaslonu. Izradimo i primjer koji sadrži sve elemente, poput pozicioniranja, pisanja, oblikovanja oblika, boja i dodira.

Korak 1: Arduino Mega 2560

Korak 2: TFT LCD štit 2.4"

Ovaj zaslon koji koristimo u svom projektu ima zanimljivu značajku: ima SD karticu. Međutim, pisanje i čitanje uključeni u ovo bit će prikazani u drugom videu, koji ću uskoro producirati. Cilj današnje lekcije je posebno se pozabaviti značajkama grafičkog zaslona i zaslona osjetljivog na dodir ovog zaslona.

Karakteristike:

Dimenzije ekrana: 2,4 inča

Utor za microSD karticu

LCD u boji: 65K

Upravljački program: ILI9325

Rezolucija: 240 x 320

Zaslon osjetljiv na dodir: 4-žični otporni zaslon osjetljiv 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: Knjižnice

Dodajte knjižnice:

"Adafruit_GFX"

"SWTFT"

"Ekran na dodir"

Pritisnite veze i preuzmite knjižnice.

Raspakirajte datoteku i zalijepite je u mapu knjižnica Arduino IDE -a.

C: / Programske datoteke (x86) / Arduino / knjižnice

Bilješka

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

Pomoću jednostavnog programa za dobivanje dodirnih točaka na zaslonu pohranite vrijednost točaka (x, y) na svakom kraju (označeno žutom bojom na donjoj slici). Ove su vrijednosti važne za preslikavanje dodira na grafičke točke na zaslonu.

#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 na 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 knjižnice mogu ponuditi.

1. drawPixel

Funkcija drawPixel odgovorna je za oslikavanje jedne točke na zaslonu u zadanoj točki.

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

2. drawLine

Funkcija drawLine odgovorna je za crtanje crte 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 crtanje okomite crte od točke i visine.

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

4. drawFastHLine

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

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

5. drawRect

Funkcija drawRect odgovorna je za iscrtavanje pravokutnika na ekranu, prolazeći početnu točku, njezinu visinu i širinu.

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

6. fillRect

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

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

7. drawRoundRect

Funkcija drawRoundRect ista je 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 ista je 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 crtanje trokuta na ekranu, prolazeći toč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 točke i radijusa.

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

12. fillCircle

Funkcija fillCircle ista je 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 zaslona jednom bojom.

void fillScreen (boja uint16_t);

14. setKursor

Funkcija setCursor odgovorna je za pozicioniranje kursora za pisanje na datu toč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 pisanjevoid 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 crte ako dosegne granicu zaslona.

void setTextWrap (boolean w);

18. setRotation

Funkcija setRotation odgovorna je za rotiranje zaslona (vodoravno, portretno).

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

Korak 5: Primjer

Izradit ć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: Knjižnice

Prvo definirajmo knjižnice koje ćemo koristiti.

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

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

#include // comunicação com o prikaz

#include // comunicação com o prikaz

#uključuje "math.h" // računska potencija

Korak 7: Definira

Definirat ćemo neke makronaredbe za pinove, a također 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) a 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 // definicija FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #def_FE_DE 10 #definirajte 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çusão do circulodo 30; const int krug_x = 240; const int krug_y = 125; // objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

Korak 8: Postavljanje

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

void setup () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializa objeto controlador da lib grafica tft.begin (); kašnjenje (500); // rotaciona a tela para landscape landscape tft.setRotation (1); // pinta a tela toda de preto tft.fillScreen (BLACK); // chama a função para iniciar nossas configurações initialSettings (); }

Korak 9: Petlja

U petlji ćemo pokupiti točku u kojoj dodirujemo zaslon 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 implica no X Receber o mapeamento de Y TSPoint p; p.x = karta (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = karta (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // provjerava se da nema toque foi suficiente if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// provjerava se tocou no retangulo 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 ("Triangle"); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Korak 10: Provjerite dodirujemo li krug

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

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (BIJELO); tft.setTextSize (TEXT_SIZE_S); tft.println ("PRISTUP"); 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 ("OBLIK:"); }

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.

// Funçã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 s 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 for 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 točke vrši se i unutar trokuta.

// Função que verifica se o ponto p esta dentro do triangulo ABC // Se estiver 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); plovak ABP = trokutArea (a, b, p); plivajući CPB = trokutasto područje (c, p, b); if (ABC == ACP+ABP+CPB) {return true; } return false; } // Função que izračunava površinu de um triangulo com base nos 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 ispisa naziva dotaknutog objekta

Ovdje na ekranu ispisujemo naziv geometrijskog lika koji 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:

INO

PDF