Arduino z zaslonom na dotik: 16 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:07

Bi radi ustvarili bolj prilagojene menije in boljše vmesnike človek/stroj? Za take projekte lahko uporabite Arduino in zaslon na dotik. Ali se ta ideja sliši vabljivo? Če je tako, si oglejte videoposnetek danes, kjer vam bom pokazal sklop z Mega Arduinom in zaslonom na dotik. Na zaslonu boste videli, kako narediti želene oblike, in tudi, kako določiti območje zaslona, na katerega se dotaknete in aktivirate določen ukaz. Poudarjam, da sem se odločil za uporabo Arduino Mega zaradi količine zatičev.

Danes vam bom predstavil zaslon na dotik, njegove grafične funkcije in način, kako pritegniti dotično točko na zaslonu. Ustvarimo tudi primer, ki vsebuje vse elemente, kot so pozicioniranje, pisanje, oblikovanje oblik, barv in dotika.

1. korak: Arduino Mega 2560

Korak: TFT LCD ščit 2,4"

Ta zaslon, ki ga uporabljamo v našem projektu, ima zanimivo lastnost: ima kartico SD. Vendar bosta pisanje in branje, povezana s tem, prikazana v drugem videu, ki ga bom kmalu izdelal. Cilj današnje lekcije je posebej obravnavati grafične lastnosti in zaslone na dotik tega zaslona.

Značilnosti:

Mera zaslona: 2,4 palca

Reža za kartico MicroSD

Barvni LCD: 65K

Gonilnik: ILI9325

Ločljivost: 240 x 320

Zaslon na dotik: 4-žični uporen zaslon na dotik

Vmesnik: 8 -bitni podatki, plus 4 krmilne vrstice

Delovna napetost: 3,3-5V

Dimenzije: 71 x 52 x 7 mm

3. korak: Knjižnice

Dodajte knjižnice:

"Adafruit_GFX"

"SWTFT"

"Zaslon na dotik"

Kliknite na povezave in prenesite knjižnice.

Razpakirajte datoteko in jo prilepite v mapo knjižnice Arduino IDE.

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

Opomba

Preden začnemo s programom, se moramo lotiti nečesa pomembnega: umerjanja TOUCH.

Z enostavnim programom za prikaz dodirnih točk na zaslonu shranite vrednost točk (x, y) na vsakem koncu (označeno z rumeno na spodnji sliki). Te vrednosti so pomembne za preslikavo dotika na grafične 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 = Zaslon na dotik (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); zamuda (1000); }

4. korak: Funkcije

Zdaj pa poglejmo nekaj grafičnih funkcij, ki nam jih knjižnice lahko ponudijo.

1. drawPixel

Funkcija drawPixel je odgovorna za poslikavo ene točke na zaslonu v dani točki.

void drawPixel (int16_t x, int16_t in, barva uint16_t);

2. drawLine

Funkcija drawLine je odgovorna za risanje črte iz dveh točk.

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

3. drawFastVLine

Funkcija drawFastVLine je odgovorna za risanje navpične črte od točke in višine.

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

4. drawFastHLine

Funkcija drawFastHLine je odgovorna za risanje vodoravne črte iz točke in širine.

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

5. drawRect

Funkcija drawRect je odgovorna za risanje pravokotnika na zaslonu, mimo izvorne točke, njene višine in širine.

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

6. fillRect

Funkcija fillRect je enaka drawRect, vendar bo pravokotnik napolnjen z dano barvo.

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

7. drawRoundRect

Funkcija drawRoundRect je enaka drawRect, vendar ima pravokotnik zaobljene robove.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, polmer int16_t, barva uint16_t);

8. fillRoundRect

Funkcija fillRoundRect je enaka drawRoundRect, vendar bo pravokotnik napolnjen z dano barvo.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, polmer int16_t, barva uint16_t);

9. drawTriangle

Funkcija drawTriangle je odgovorna za risanje trikotnika na zaslonu, ki prehaja točko treh točk.

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

10. fillTriangle

Funkcija fillTriangle je enaka drawTriangle, vendar bo trikotnik napolnjen z dano barvo.

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

11. drawCircle

Funkcija drawCircle je odgovorna za risanje kroga od izvorne točke in polmera.

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

12. fillCircle

Funkcija fillCircle je enaka drawCircle, vendar bo krog napolnjen z dano barvo.

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

13. fillScreen

Funkcija fillScreen je odgovorna za polnjenje zaslona z eno samo barvo.

void fillScreen (barva uint16_t);

14. setCursor

Funkcija setCursor je odgovorna za postavitev kazalca za pisanje na določeno točko.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Funkcija setTextColor je odgovorna za dodelitev barve besedilu za pisanje. Uporabljamo ga na dva načina:

void setTextColor (uint16_t c); // nastavi barvo samo za pisanjevoid setTextColor (uint16_t c, uint16_t bg); // nastavimo barvo pisanja in barvo ozadja

16. setTextSize

Funkcija setTextSize je odgovorna za dodelitev velikosti besedilu, ki bo napisano.

void setTextSize (uint8_t s);

17. setTextWrap

Funkcija setTextWrap je odgovorna za prekinitev črte, če doseže mejo zaslona.

void setTextWrap (logično w);

18. setRotation

Za vrtenje zaslona (ležeče, pokončno) je odgovorna funkcija setRotation.

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

5. korak: Primer

Ustvarili bomo program, v katerem bomo uporabili večino virov, ki nam jih ponuja zaslon.

Zapišimo nekaj nizov v različnih velikostih, ustvarimo tri geometrijske figure in nanje poberemo dogodek dotika. Vsakič, ko se dotaknemo ene od številk, bomo imeli pod njimi povratne informacije o imenu figure.

6. korak: Knjižnice

Najprej opredelimo knjižnice, ki jih bomo uporabljali.

#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 display

#vključi "math.h" // računska potencia

7. korak: Določa

Določili bomo nekaj makrov za nožice in tudi pomembne vrednosti, ki jih bomo uporabili.

// 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 // posicionamento dos textos de feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #defEFE_DATE_FEEDB 10 #define MAXPRESSURE 1000

Nadaljujemo z opredelitvijo nekaterih makrov.

// Associa o nome das cores aos valores korespondentes #define BLACK 0x0000 #define RDEČA 0xF800 #define ZELENA 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criaçusoo do Circle 30; const int krog_x = 240; const int krog_y = 125; // objekt za manipulacijo dos dogodkov na točki na zaslonu TouchScreen ts = Zaslon na dotik (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

8. korak: Nastavitev

V nastavitvah bomo inicializirali naš grafični nadzorni objekt in naredili prve konfiguracije.

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

9. korak: Zanka

V zanki bomo izbrali točko, na kateri se dotaknemo zaslona, in videli, ali se je dotik zgodil na eni od številk.

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 = zemljevid (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = zemljevid (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // preveri, da ni nobenega toque foi suficiente if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// preveri, da se tocou no retangulo if (pointInRect (p)) {writeShape ("Rect"); } // preveri, da se ne pojavlja več triangulo drugače, če (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("Trikotnik"); } // preveri, da se ne kroži drugje if (pointInCircle (p)) {writeShape ("Circle"); }}}

10. korak: Preverite, ali se dotaknemo kroga

V tem koraku obravnavamo inicializacijo zaslona in določimo barve prikazanih besedil.

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

11. korak: Funkcije ustvarjanja geometrijskih oblik

Ustvarjamo pravokotnik, trikotnik in krog z izhodišči, ki jih določimo.

// cria um retangulo com origem (x, y) = (10, 100) // širina = 80 e višina = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, BELO); } // 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, RUMEN); tft.drawTriangle (110, 150, 150, 100, 190, 150, BELO); } // 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, BELO); }

12. korak: Preverite, ali se dotaknemo pravokotnika

Ta funkcija preveri, ali je točka v pravokotniku.

// 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; }

13. korak: Preverite, ali se dotaknemo kroga

To je enako kot pri krogu.

// 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 - krog_x, 2) + pow (py - krog_y, 2)); if (razdalja <= radijski_krog) {return true; } return false; }

14. korak: Preverite, ali se dotaknemo trikotnika

Enako preverjanje točke se zgodi tudi znotraj trikotnika.

// 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 = trikotnikArea (a, b, c); float ACP = trikotnikArea (a, c, p); plavajoči ABP = trikotnikArea (a, b, p); plavajoči CPB = trikotnikArea (c, p, b); če (ABC == ACP+ABP+CPB) {vrne true; } return false; } // Função que izračuna površino de um triangulo com base nos pontos x, y plavajoči trikotnikArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax)*(cy - ay) - (cx - sekira) * (po - ay))/2); }

Korak 15: Funkcija za tiskanje imena predmeta, ki se ga dotaknete

Tu na zaslon napišemo ime uporabljene geometrijske figure.

// escreve na tela o nome da figura geométrica que foi tocadavoid writeShape (String shape) {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 (BELO); tft.println (oblika); }

Korak: Datoteke

Prenesite datoteke:

JAZ NE

PDF