Arduino kosketusnäytöllä: 16 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:03

Haluatko luoda henkilökohtaisempia valikoita ja parempia käyttöliittymiä? Tällaisissa projekteissa voit käyttää Arduinoa ja kosketusnäyttöä. Kuulostaako tämä ajatus houkuttelevalta? Jos näin on, katso video tänään, jossa näytän sinulle kokoonpanon, jossa on Mega Arduino ja kosketusnäyttö. Näet kuinka haluat tehdä haluamasi mallit näytöllä ja kuinka määrität näytön alueen koskettamaan ja aktivoimaan tietyn komennon. Korostan, että valitsin käyttää Arduino Megaa sen nastojen määrän vuoksi.

Joten tänään esittelen sinulle kosketusnäytön, sen graafiset toiminnot ja kuinka tarttua kosketuskohtaan näytöllä. Luodaan myös esimerkki, joka sisältää kaikki elementit, kuten paikannuksen, kirjoittamisen, muotojen, värien ja kosketuksen suunnittelun.

Vaihe 1: Arduino Mega 2560

Vaihe 2: TFT -LCD -suoja 2,4"

Tässä projektissamme käyttämässä näytössä on mielenkiintoinen ominaisuus: siinä on SD -kortti. Tähän liittyvä kirjoittaminen ja lukeminen esitetään kuitenkin toisessa videossa, jonka tuotan pian. Tämän päivän oppitunnin tavoitteena on käsitellä erityisesti tämän näytön graafisia ja kosketusnäyttöominaisuuksia.

Ominaisuudet:

Näytön koko: 2,4 tuumaa

MicroSD -korttipaikka

Värillinen LCD: 65K

Kuljettaja: ILI9325

Tarkkuus: 240 x 320

Kosketusnäyttö: 4-johtiminen resistiivinen kosketusnäyttö

Liitäntä: 8 -bittinen data ja 4 ohjauslinjaa

Käyttöjännite: 3.3-5V

Mitat: 71 x 52 x 7 mm

Vaihe 3: Kirjastot

Lisää kirjastot:

"Adafruit_GFX"

"SWTFT"

"Kosketusnäyttö"

Napsauta linkkejä ja lataa kirjastot.

Pura tiedosto ja liitä se Arduino IDE: n kirjastojen kansioon.

C: / Ohjelmatiedostot (x86) / Arduino / kirjastot

Huomautus

Ennen kuin aloitamme ohjelman, meidän on käsiteltävä jotain tärkeää: TOUCH -kalibrointi.

Tallenna pisteiden arvo (x, y) kumpaankin päähän yksinkertaisella ohjelmalla saadaksesi kosketuspisteet näyttöön (korostettu keltaisella alla olevassa kuvassa). Nämä arvot ovat tärkeitä kosketuksen kartoittamiseksi näytön graafisiin pisteisiin.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ on käytössä Analog1 #define XM A2 // X- on Analog2 #define YM 7 // Y- on Digital7 #define XP 6 // X+ is on Digital6 // on mahdollista manipuloida tapahtumia tapahtumien aikana TouchScreen ts = Kosketusnäyttö (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:"); Sarja.println (touchPoint.x); Serial.print ("Y:"); Sarja.println (touchPoint.y); viive (1000); }

Vaihe 4: Toiminnot

Katsotaanpa nyt joitain graafisia toimintoja, joita kirjastot voivat tarjota meille.

1. drawPixel

DrawPixel -toiminto on vastuussa yhden pisteen maalaamisesta ruudulle tietyssä kohdassa.

void drawPixel (int16_t x, int16_t ja, uint16_t väri);

2. drawLine

DrawLine -toiminto vastaa suoran piirtämisestä kahdesta pisteestä.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t väri);

3. drawFastVLine

DrawFastVLine -toiminto vastaa pystysuoran viivan piirtämisestä pisteestä ja korkeudesta.

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

4. drawFastHLine

DrawFastHLine -toiminto vastaa vaakasuoran viivan piirtämisestä pisteestä ja leveydestä.

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

5. drawRect

DrawRect -toiminto vastaa suorakulmion piirtämisestä näytölle, lähtöpisteen, sen korkeuden ja leveyden ohittamisesta.

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

6. fillRect

FillRect -toiminto on sama kuin drawRect, mutta suorakulmio täytetään annetulla värillä.

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

7. drawRoundRect

DrawRoundRect -toiminto on sama kuin drawRect, mutta suorakulmion reunat ovat pyöristetyt.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t säde, uint16_t väri);

8. fillRoundRect

FillRoundRect -toiminto on sama kuin drawRoundRect, mutta suorakulmio täytetään annetulla värillä.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t säde, uint16_t väri);

9. piirtokolmio

DrawTriangle -toiminto on vastuussa kolmion piirtämisestä näytölle, joka kulkee kolmen kärjen pisteen ohi.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t väri);

10. fillTriangle

FillTriangle -toiminto on sama kuin drawTriangle, mutta kolmio täytetään annetulla värillä.

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 -toiminto vastaa ympyrän piirtämisestä lähdepisteestä ja säteestä.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t väri);

12. fillCircle

FillCircle -toiminto on sama kuin drawCircle, mutta ympyrä täytetään annetulla värillä.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t väri);

13. fillScreen

FillScreen -toiminto vastaa näytön täyttämisestä yhdellä värillä.

tyhjä fillScreen (uint16_t väri);

14. setCursor

SetCursor -toiminto vastaa kohdistimen sijoittamisesta tiettyyn pisteeseen kirjoittamista varten.

void setCursor (int16_t x, int16_t y);

15. setTextColor

SetTextColor -toiminto vastaa värin määrittämisestä kirjoitettavaan tekstiin. Meillä on kaksi tapaa käyttää sitä:

void setTextColor (uint16_t c); // määrittää vain kirjoittamisen värinvoid setTextColor (uint16_t c, uint16_t bg); // aseta kirjoitusväri ja taustaväri

16. setTextSize

SetTextSize -toiminto on vastuussa koon määrittämisestä kirjoitettavalle tekstille.

void setTextSize (uint8_t s);

17. setTextWrap

SetTextWrap -toiminto on vastuussa rivin katkaisemisesta, jos se saavuttaa näytön rajan.

void setTextWrap (boolean w);

18. setRotation

SetRotation -toiminto on vastuussa näytön kääntämisestä (vaaka, pysty).

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

Vaihe 5: Esimerkki

Luomme ohjelman, jossa käytämme suurimman osan näytön tarjoamista resursseista.

Kirjoitetaan joitakin erikokoisia merkkijonoja, luodaan kolme geometrista hahmoa ja poimitaan niiden kosketustapahtuma. Joka kerta, kun kosketamme yhtä hahmoista, saamme palautteen kuvan nimestä juuri niiden alapuolella.

Vaihe 6: Kirjastot

Määritellään ensin käytettävät kirjastot.

#include // vastaus pela parte gráfica

#include // vastaus pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#Sisällytä "math.h" // laskennallinen teho

Vaihe 7: Määrittelee

Määritämme joitakin makrot nastoille ja myös tärkeät arvot, joita käytämme.

// Portas de leitura das coordenadas do touch #define YP A1 // Y+ #define XM A2 // X- #define YM 7 // Y- #define XP 6 // X+ // valorescontrados 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 #define FEEDBACK_CO 10 #define MAXPRESSURE 1000

Jatkamme joidenkin makrojen määrittelemistä.

// Associa o nome das cores aos valoresrespondentes #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define KELTAINEN 0xFFE0 #define WHITE 0xFFFF // dados de crulo 30 const int ympyrä_x = 240; const int ympyrä_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;

Vaihe 8: Asennus

Asetuksissa alustamme graafisen ohjausobjektimme ja teemme ensimmäiset kokoonpanot.

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

Vaihe 9: Silmukka

Silmukassa keräämme kohdan, jossa kosketamme näyttöä, ja katsomme, tapahtuiko kosketus jossakin luvussa.

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 = kartta (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = kartta (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 ("Kolmio"); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Vaihe 10: Tarkista, kosketammeko ympyrää

Tässä vaiheessa käsittelemme näytön alustuksen ja määritämme näytettävien tekstien värit.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (VALKOINEN); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (KELTAINEN); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (VIHREÄ); 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 ("MUOTO:"); }

Vaihe 11: Geometristen muotojen luomistoiminnot

Luomme suorakulmion, kolmion ja ympyrän määrittämillämme aloilla.

// cria um retangulo com origem (x, y) = (10, 100) // width = 80 e height = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, VALKOINEN); } // 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, KELTAINEN); tft.drawTriangle (110, 150, 150, 100, 190, 150, VALKOINEN); } // 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, VALKOINEN); }

Vaihe 12: Tarkista, kosketammeko suorakulmiota

Tämä toiminto tarkistaa, onko piste suorakulmion sisällä.

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

Vaihe 13: Tarkista, kosketammeko ympyrää

Tämä on sama kuin ympyrän kanssa.

// 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 menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) {float distance = sqrt (pow (px - circle_x, 2) + pow (py - ympyrä_y, 2)); if (etäisyys <= ympyrän_säde) {return true; } return false; }

Vaihe 14: Tarkista, kosketammeko kolmioa

Sama tarkistus pisteestä tapahtuu myös kolmion sisällä.

// 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 = kolmioalue (a, c, p); kelluva ABP = kolmioalue (a, b, p); kelluva CPB = kolmioalue (c, p, b); if (ABC == ACP+ABP+CPB) {return true; } return false; } // Função que calcula a area de um triangulo com base nos täps x, y float triangleArea (TSPoint a, TSPoint b, TSPoint c) {return fabs ((((bx - ax)*(cy - ay) - (cx -) kirves) * (by - ay))/2); }

Vaihe 15: Toiminto kosketetun objektin nimen tulostamiseksi

Tässä kirjoitetaan näytölle käytetyn geometrisen kuvan nimi.

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

Vaihe 16: Tiedostot

Lataa tiedostot:

INO

PDF