Arduino Sa Pagpapakita ng Touch Screen: 16 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Nais mo bang lumikha ng mas isinapersonal na mga menu at mas mahusay na mga interface ng tao / makina? Para sa mga nasabing proyekto, maaari kang gumamit ng isang Arduino at isang Touch Screen Display. Mukha bang nakakaakit ang ideyang ito? Kung gayon, suriin ang video ngayon, kung saan ipapakita ko sa iyo ang isang pagpupulong na may isang Mega Arduino at isang Touch Screen Display. Makikita mo kung paano gawin ang mga disenyo na gusto mo sa screen, at kung paano din matukoy ang rehiyon ng screen upang hawakan at buhayin ang isang tukoy na utos. Binibigyang diin ko na pinili kong gamitin ang Arduino Mega dahil sa dami ng mga pin nito.

Kaya ngayon, ipakikilala kita sa display ng Touch Screen, mga graphic function, at kung paano makukuha ang touch point sa screen. Lumikha din tayo ng isang halimbawa na naglalaman ng lahat ng mga elemento, tulad ng pagpoposisyon, pagsulat, pagdidisenyo ng mga hugis, kulay, at ugnayan.

Hakbang 1: Arduino Mega 2560

Hakbang 2: TFT LCD Shield 2.4"

Ang display na ginagamit namin sa aming proyekto ay may kagiliw-giliw na tampok: mayroon itong SD card. Gayunpaman, ang pagsulat at pagbabasa na kasangkot dito ay ipapakita sa isa pang video, na malapit na akong gumawa. Ang layunin ng aralin ngayon ay upang partikular na matugunan ang mga tampok na graphic at touch screen ng display na ito.

Mga Katangian:

Dimensyon ng Screen: 2.4 pulgada

Puwang ng microSD card

Kulay ng LCD: 65K

Driver: ILI9325

Resolusyon: 240 x 320

Touchscreen: 4-wire resistive touchscreen

Interface: 8 bit data, kasama ang 4 na linya ng kontrol

Operating boltahe: 3.3-5V

Mga Dimensyon: 71 x 52 x 7mm

Hakbang 3: Mga Aklatan

Idagdag ang mga aklatan:

"Adafruit_GFX"

"SWTFT"

"Touch screen"

Mag-click sa mga link at i-download ang mga aklatan.

I-zip ang file at i-paste ito sa folder ng mga aklatan ng Arduino IDE.

C: / Program Files (x86) / Arduino / aklatan

Tandaan

Bago namin simulan ang aming programa, kailangan naming tugunan ang isang bagay na mahalaga: ang pagkakalibrate ng TOUCH.

Gamit ang isang simpleng programa upang makuha ang mga touch point sa display, itabi ang halaga ng mga puntos (x, y) sa bawat dulo (naka-highlight sa dilaw sa pigura sa ibaba). Ang mga halagang ito ay mahalaga para sa pagmamapa ng ugnayan sa mga graphic point sa screen.

#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 + ay nasa 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); pagkaantala (1000); }

Hakbang 4: Mga Pag-andar

Tingnan natin ngayon ang ilang mga graphic na pag-andar na maaring mag-alok sa amin ng mga aklatan.

1. drawPixel

Ang paggana ng drawPixel ay responsable para sa pagpipinta ng isang solong punto sa screen sa ibinigay na punto.

walang bisa drawPixel (int16_t x, int16_t at, uint16_t na kulay);

2. drawLine

Ang paggana ng drawLine ay responsable para sa pagguhit ng isang linya mula sa dalawang puntos.

walang bisa drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t na kulay);

3. drawFastVLine

Ang paggana ng drawFastVLine ay responsable para sa pagguhit ng isang patayong linya mula sa isang punto at taas.

walang bisa drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t na kulay);

4. drawFastHLine

Ang paggana ng drawFastHLine ay responsable para sa pagguhit ng isang pahalang na linya mula sa isang punto at isang lapad.

walang bisa drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t na kulay);

5. drawRect

Ang paggana ng drawRect ay responsable para sa pagguhit ng isang rektanggulo sa screen, pagdaan ng isang punto ng pinagmulan, ang taas at lapad nito.

walang bisa drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t na kulay);

6. punan angRect

Ang pag-andar ng fillRect ay kapareho ng drawRect, ngunit ang parihaba ay mapupuno ng ibinigay na kulay.

walang bisa ang fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t na kulay);

7. drawRoundRect

Ang paggana ng drawRoundRect ay kapareho ng drawRect, ngunit ang rektanggulo ay magkakaroon ng bilugan na mga gilid.

walang bisa drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);

8. punanRoundRect

Ang pag-andar ng fillRoundRect ay kapareho ng drawRoundRect, ngunit ang parihaba ay mapupuno ng ibinigay na kulay.

walang bisa ang fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t na kulay);

9. iguhitTriangle

Ang paggana ng drawTriangle ay responsable para sa pagguhit ng isang tatsulok sa screen, na ipinapasa ang punto ng 3 mga vertex.

walang bisa ang drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t na kulay);

10. punanTriangle

Ang pag-andar ng fillTriangle ay kapareho ng drawTriangle, ngunit ang tatsulok ay mapunan ng ibinigay na kulay.

walang bisa ang fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t na kulay);

11. iguhitCircle

Ang paggana ng drawCircle ay responsable para sa pagguhit ng isang bilog mula sa isang mapagkukunang punto at isang radius.

walang bisa drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t na kulay);

12. punanCircle

Ang pagpapaandar ng fillCircle ay kapareho ng drawCircle, ngunit ang bilog ay mapupuno ng ibinigay na kulay.

walang bisa ang fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t na kulay);

13. punan ang Screen

Ang function ng fillScreen ay responsable para sa pagpuno sa screen ng isang solong kulay.

walang bisa ang fillScreen (kulay uint16_t);

14. setCursor

Ang pagpapaandar ng setCursor ay responsable para sa pagpoposisyon ng cursor para sa pagsusulat sa isang naibigay na punto.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Ang pagpapaandar ng setTextColor ay responsable para sa pagtatalaga ng isang kulay sa teksto na isusulat. Mayroon kaming dalawang paraan upang magamit ito:

void setTextColor (uint16_t c); // nagtatakda ng kulay ng pagsulat lamang iwas setTextColor (uint16_t c, uint16_t bg); // itakda ang kulay ng pagsulat at kulay ng background

16. setTextSize

Ang pagpapaandar ng setTextSize ay responsable para sa pagtatalaga ng isang sukat sa teksto na isusulat.

void setTextSize (uint8_t s);

17. setTextWrap

Ang pagpapaandar ng setTextWrap ay responsable para sa paglabag sa linya kung umabot ito sa limitasyon ng screen.

void setTextWrap (boolean w);

18. setRotation

Ang pagpapaandar ng setRotation ay responsable para sa pag-ikot ng screen (landscape, portrait).

walang bisa setRotation (uint8_t r); // 0 (pamantayan), 1, 2, 3

Hakbang 5: Halimbawa

Lilikha kami ng isang programa kung saan gagamitin namin ang karamihan ng mga mapagkukunan na ibinibigay sa amin ng display.

Sumulat tayo ng ilang mga string sa iba't ibang laki, lumikha ng tatlong mga geometric na numero, at kunin ang kaganapan ng ugnayan sa kanila, sa tuwing hinahawakan namin ang isa sa mga numero, magkakaroon kami ng feedback ng pangalan ng figure sa ibaba lamang nila.

Hakbang 6: Mga Aklatan

Tukuyin muna natin ang mga library na gagamitin natin.

#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

# isama ang "matematika.h" // calculular potencia

Hakbang 7: Tumutukoy

Tutukuyin namin ang ilang mga macros para sa mga pin, at pati na rin ang mahahalagang halaga na gagamitin namin.

// 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 // pinasimple ng faça um código para sa 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 // Laki dos textos #define TEXT_SIZE_L 3 # tukuyin TEXT_SIZE_M 2 # tukuyin TEXT_SIZE_S 1 // posicionamento dos textos de feedback #define FEEDBACK_LABEL_X 10 # tukuyin FEEDBACK_LABEL_Y 200 # tukuyin FEEDBACK_TOUCH_X 120 # tukuyin FEEDBACK_TOUCH_Y 200 // valores para detectar isang Pressao gawin toque #define MINPRESSURE 10 # tukuyin ang MAXPRESSURE 1000

Nagpapatuloy kami sa kahulugan ng ilang mga macros.

// Associa o nome das cores aos valores correspondentes # tukuyin ang BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criação do circus const int 30; const int circle_x = 240; Const int circle_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;

Hakbang 8: Pag-setup

Sa pag-set up, isasimulan namin ang aming graphic control object at gagawin ang unang mga pagsasaayos.

void setup () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializa objeto controlador da lib grafica tft.begin (); pagkaantala (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 (); }

Hakbang 9: Mag-loop

Sa loop, kukunin namin ang point kung saan hinawakan namin ang screen, at tingnan kung naganap ang pagpindot sa isa sa mga figure.

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 = mapa (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = mapa (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifica se a pressão no toque foi suf sapat kung (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"); }}}

Hakbang 10: Suriin Kung Hinawakan Namin ang Circle

Sa hakbang na ito makitungo kami sa pagsisimula ng screen at tukuyin ang mga kulay ng mga teksto na ipapakita.

/ * Desenha na tela os elementos * / void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (DILAW); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (GREEN); 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 ("HUWAG:"); }

Hakbang 11: Mga Pag-andar ng Paglikha ng Mga Geometric na Hugis

Lumilikha kami ng isang rektanggulo, isang tatsulok, at isang bilog na may mga pinagmulan na tinutukoy namin.

// cria um retangulo com Origem (x, y) = (10, 100) // width = 80 e taas = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, WHITE); } // cria um triangulo com os vertices: // A = (110, 150); B = (150, 100); C = (190, 150) walang bisa ang createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, DILAW); tft.drawTriangle (110, 150, 150, 100, 190, 150, PUTI); } // 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, WHITE); }

Hakbang 12: Suriin Kung Hinawakan Namin ang Parihaba

Sinusuri ng pagpapaandar na ito kung ang punto ay nasa loob ng rektanggulo.

// 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) {bumalik totoo; }} bumalik na hindi totoo; }

Hakbang 13: Suriin Kung Hinawakan Namin ang Circle

Ito ay katulad ng sa bilog.

// 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)); kung (distansya <= circle_radius) {bumalik totoo; } bumalik na hindi totoo; }

Hakbang 14: Suriin Kung Hinawakan namin ang Triangle

Ang parehong tseke ng na ng point ay nangyayari rin sa loob ng tatsulok.

// 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 = triangleArea (a, c, p); float ABP = triangleArea (a, b, p); float CPB = triangleArea (c, p, b); kung (ABC == ACP + ABP + CPB) {bumalik totoo; } bumalik na hindi totoo; } // Função que calculula 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 - palakol) * (ni - ay)) / 2); }

Hakbang 15: Pag-andar upang I-print ang Pangalan ng Bagay na Na-touch

Isusulat namin sa screen ang pangalan ng ginamit na geometric figure.

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

Hakbang 16: Mga File

I-download ang mga file:

INO

PDF