Arduino med berøringsskærm: 16 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:29

Kunne du tænke dig at oprette mere personlige menuer og bedre mennesker/maskine -grænseflader? Til sådanne projekter kan du bruge en Arduino og en berøringsskærm. Lyder denne idé lokkende? Hvis ja, så tjek videoen i dag, hvor jeg vil vise dig en samling med en Mega Arduino og en berøringsskærm. Du vil se, hvordan du laver de designs, du ønsker på skærmen, og også hvordan du bestemmer skærmområdet, der skal berøres og aktiveres en bestemt kommando. Jeg understreger, at jeg valgte at bruge Arduino Mega på grund af dens mængde stifter.

Så i dag vil jeg præsentere dig for berøringsskærmen, dens grafiske funktioner og hvordan du griber berøringspunktet på skærmen. Lad os også oprette et eksempel, der indeholder alle elementerne, såsom positionering, skrivning, design af former, farver og berøring.

Trin 1: Arduino Mega 2560

Trin 2: TFT LCD -skærm 2,4"

Dette display, som vi bruger i vores projekt, har en interessant funktion: det har et SD -kort. Imidlertid vil skrivning og læsning involveret i dette blive vist i en anden video, som jeg snart vil producere. Formålet med dagens lektion er specifikt at tage fat på de grafiske funktioner og berøringsskærmens funktioner på dette display.

Egenskaber:

Skærmstørrelse: 2,4 tommer

MicroSD -kortplads

Farve LCD: 65K

Driver: ILI9325

Opløsning: 240 x 320

Berøringsskærm: 4-leder resistiv berøringsskærm

Grænseflade: 8 bit data plus 4 kontrollinjer

Driftsspænding: 3,3-5V

Dimensioner: 71 x 52 x 7 mm

Trin 3: Biblioteker

Tilføj bibliotekerne:

"Adafruit_GFX"

"SWTFT"

"Berøringsskærm"

Klik på linkene og download bibliotekerne.

Pak filen ud, og indsæt den i biblioteksmappen i Arduino IDE.

C: / Programfiler (x86) / Arduino / biblioteker

Bemærk

Inden vi starter vores program, skal vi tage fat på noget vigtigt: TOUCH -kalibreringen.

Brug et simpelt program til at få berøringspunkterne på displayet, og gem værdien af punkterne (x, y) i hver ende (markeret med gult i nedenstående figur). Disse værdier er vigtige for at kortlægge berøringen til de grafiske punkter på skærmen.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ is on Analog1 #define XM A2 // X- is on Analog2 #define YM 7 // Y- is on Digital7 #define XP 6 // X+ er på Digital6 // objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); ugyldig opsætning () {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); forsinkelse (1000); }

Trin 4: Funktioner

Lad os nu se på nogle grafiske funktioner, som biblioteker kan tilbyde os.

1. drawPixel

DrawPixel -funktionen er ansvarlig for at male et enkelt punkt på skærmen på det givne punkt.

void drawPixel (int16_t x, int16_t og, uint16_t farve);

2. drawLine

DrawLine -funktionen er ansvarlig for at tegne en linje fra to punkter.

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

3. drawFastVLine

DrawFastVLine -funktionen er ansvarlig for at tegne en lodret linje fra et punkt og en højde.

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

4. drawFastHLine

DrawFastHLine -funktionen er ansvarlig for at tegne en vandret linje fra et punkt og en bredde.

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

5. drawRect

DrawRect -funktionen er ansvarlig for at tegne et rektangel på skærmen, passere et oprindelsespunkt, dets højde og bredde.

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

6. fillRect

FillRect -funktionen er den samme som drawRect, men rektanglet udfyldes med den givne farve.

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

7. drawRoundRect

DrawRoundRect -funktionen er den samme som drawRect, men rektanglet vil have afrundede kanter.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t farve);

8. fillRoundRect

FillRoundRect -funktionen er den samme som drawRoundRect, men rektanglet udfyldes med den givne farve.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t farve);

9. drawTriangle

DrawTriangle -funktionen er ansvarlig for at tegne en trekant på skærmen og passere punktet på de 3 hjørner.

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

10. fillTriangle

FillTriangle -funktionen er den samme som drawTriangle, men trekanten udfyldes med den givne farve.

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

11. drawCircle

DrawCircle -funktionen er ansvarlig for at tegne en cirkel fra et kildepunkt og en radius.

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

12. fillCircle

FillCircle -funktionen er den samme som drawCircle, men cirklen udfyldes med den givne farve.

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

13. fillScreen

FillScreen -funktionen er ansvarlig for at fylde skærmen med en enkelt farve.

void fillScreen (uint16_t farve);

14. setCursor

SetCursor -funktionen er ansvarlig for at placere markøren til skrivning til et givet punkt.

void setCursor (int16_t x, int16_t y);

15. setTextColor

SetTextColor -funktionen er ansvarlig for at tildele en farve til den tekst, der skal skrives. Vi har to måder at bruge det på:

void setTextColor (uint16_t c); // indstiller kun skrivefarven ugyldig setTextColor (uint16_t c, uint16_t bg); // indstil skrivefarve og baggrundsfarve

16. setTextSize

SetTextSize -funktionen er ansvarlig for at tildele en størrelse til den tekst, der skal skrives.

void setTextSize (uint8_t s);

17. setTextWrap

SetTextWrap -funktionen er ansvarlig for at bryde linjen, hvis den når skærmens grænse.

void setTextWrap (boolsk w);

18. setRotation

SetRotation -funktionen er ansvarlig for at rotere skærmen (liggende, portræt).

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

Trin 5: Eksempel

Vi opretter et program, hvor vi vil bruge de fleste ressourcer, som displayet giver os.

Lad os skrive nogle strenge i forskellige størrelser, oprette tre geometriske figurer og hente berøringshændelsen på dem, hver gang vi rører ved en af figurerne, får vi feedback på figurnavnet lige under dem.

Trin 6: Biblioteker

Lad os først definere de biblioteker, vi vil bruge.

#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

#omfatter "matematik.h" // beregnet potentiale

Trin 7: Definerer

Vi vil definere nogle makroer til benene, og også de vigtige værdier, som vi vil bruge.

// 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 tilbagemelding #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_TOUCH_X 120 #define FEEDBACK_TOUCH_Y 200 // valores para detectar en pressão gøre toque #define MINPRESSURE 10 #define MAXPRESSURE 1000

Vi fortsætter med definitionen af nogle makroer.

// Associa o nome das cores aos valores correspondentes #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define GUL 0xFFE0 #define WHITE 0xFFFF // dados de criação do cirkulo const_ cirkel; const int cirkel_x = 240; const int circle_y = 125; // objeto para manipulacao dos eventos de toque and tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

Trin 8: Opsætning

I opsætningen vil vi initialisere vores grafiske kontrolobjekt og foretage de første konfigurationer.

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

Trin 9: Sløjfe

I løkken vil vi opfange det punkt, hvor vi rører ved skærmen, og se om berøringen fandt sted i en af figurerne.

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 = map (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = map (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifica se a pressão no toque foi suficiente if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verifica 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"); }}}

Trin 10: Kontroller, om vi rører ved cirklen

I dette trin behandler vi skærminitialisering og definerer farverne på de tekster, der skal vises.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (GUL); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOGG"); tft.setTextColor (GRØN); 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:"); }

Trin 11: Funktioner ved oprettelse af geometriske former

Vi opretter et rektangel, en trekant og en cirkel med den oprindelse, vi bestemmer.

// cria um retangulo com origem (x, y) = (10, 100) // bredde = 80 e højde = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, HVID); } // cria um triangulo com os hjørner: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, GUL); tft.drawTriangle (110, 150, 150, 100, 190, 150, WHITE); } // cria um circulo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, GRØN); tft.drawCircle (240, 125, 30, HVID); }

Trin 12: Kontroller, om vi rører rektanglet

Denne funktion kontrollerer, om punktet er inde i rektanglet.

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

Trin 13: Kontroller, om vi rører ved cirklen

Dette er det samme som med cirklen.

// 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, ele está dentro bool pointInCircle (TSPoint p) {float distance = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); if (distance <= circle_radius) {return true; } returner falsk; }

Trin 14: Kontroller, om vi rører trekanten

Den samme kontrol af punktets sker også inden for trekanten.

// 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 = triangleArea (a, b, c); float ACP = trekantArea (a, c, p); float ABP = trekantArea (a, b, p); flyde CPB = trekantArea (c, p, b); hvis (ABC == ACP+ABP+CPB) {return true; } returner falsk; } // Função que calcula a area de um triangulo com base nos pontos x, y float triangleArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax)*(cy - ay) - (cx - ax) * (ved - ay))/2); }

Trin 15: Funktion til at udskrive navnet på det berørte objekt

Her skriver vi på skærmen navnet på den geometriske figur, der bruges.

// 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 (HVID); tft.println (form); }

Trin 16: Filer

Download filerne:

INO

PDF