„Arduino“su jutikliniu ekranu: 16 žingsnių

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:48

Ar norėtumėte sukurti labiau suasmenintus meniu ir geresnes žmogaus ir mašinos sąsajas? Tokiems projektams galite naudoti „Arduino“ir jutiklinį ekraną. Ar ši idėja skamba viliojančiai? Jei taip, peržiūrėkite vaizdo įrašą šiandien, kur parodysiu surinkimą su „Mega Arduino“ir jutikliniu ekranu. Ekrane pamatysite, kaip sukurti norimus dizainus, taip pat kaip nustatyti ekrano sritį, kad būtų paliesta ir suaktyvinta konkreti komanda. Pabrėžiu, kad pasirinkau naudoti „Arduino Mega“dėl kaiščių kiekio.

Taigi šiandien aš supažindinsiu jus su jutiklinio ekrano ekranu, jo grafinėmis funkcijomis ir tuo, kaip patraukti jutiklinį tašką ekrane. Taip pat sukurkime pavyzdį, kuriame būtų visi elementai, pvz., Padėties nustatymas, rašymas, formų, spalvų ir prisilietimų projektavimas.

1 žingsnis: „Arduino Mega 2560“

2 žingsnis: 2,4 colio TFT LCD ekranas

Šis ekranas, kurį naudojame savo projekte, turi įdomią funkciją: jame yra SD kortelė. Tačiau su tuo susijęs rašymas ir skaitymas bus parodytas kitame vaizdo įraše, kurį netrukus pagaminsiu. Šios dienos pamokos tikslas yra konkrečiai atsižvelgti į šio ekrano grafines ir jutiklinio ekrano funkcijas.

Savybės:

Ekrano matmenys: 2,4 colio

„MicroSD“kortelės lizdas

Spalvotas LCD: 65K

Vairuotojas: ILI9325

Skiriamoji geba: 240 x 320

Jutiklinis ekranas: 4 laidų atsparus jutiklinis ekranas

Sąsaja: 8 bitų duomenys ir 4 valdymo linijos

Darbinė įtampa: 3.3-5V

Matmenys: 71 x 52 x 7 mm

3 žingsnis: bibliotekos

Pridėkite bibliotekas:

„Adafruit_GFX“

"SWTFT"

"Liečiamas ekranas"

Spustelėkite nuorodas ir atsisiųskite bibliotekas.

Išpakuokite failą ir įklijuokite jį į „Arduino IDE“bibliotekų aplanką.

C: / Programos failai (x86) / „Arduino“/ bibliotekos

Pastaba

Prieš pradėdami savo programą, turime išspręsti kažką svarbaus: TOUCH kalibravimą.

Naudodami paprastą programą, kad ekrane gautumėte lietimo taškus, išsaugokite taškų (x, y) vertę kiekviename gale (parodyta geltoname paveikslėlyje žemiau). Šios vertės yra svarbios norint priskirti prisilietimą prie grafinių ekrano taškų.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ yra Analog1 #define XM A2 // X- is on Analog2 #define YM 7 // Y- is on Digital7 #define XP 6 // X+ yra „Digital6 // 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); vėlavimas (1000); }

4 žingsnis: Funkcijos

Dabar pažvelkime į kai kurias grafines funkcijas, kurias mums gali pasiūlyti bibliotekos.

1. pieštiPikselis

„DrawPixel“funkcija yra atsakinga už vieno ekrano taško piešimą tam tikrame taške.

void drawPixel (int16_t x, int16_t ir, uint16_t spalva);

2. drawLine

„DrawLine“funkcija yra atsakinga už linijos nubrėžimą iš dviejų taškų.

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

3. drawFastVLine

Funkcija drawFastVLine yra atsakinga už vertikalios linijos piešimą iš taško ir aukščio.

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

4. drawFastHLine

Funkcija drawFastHLine yra atsakinga už horizontalios linijos piešimą iš taško ir pločio.

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

5. drawRect

„DrawRect“funkcija yra atsakinga už stačiakampio piešimą ekrane, praeinantį tašką, jo aukštį ir plotį.

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

6. fillRect

Funkcija fillRect yra tokia pati kaip drawRect, tačiau stačiakampis bus užpildytas nurodyta spalva.

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

7. drawRoundRect

„DrawRoundRect“funkcija yra tokia pati kaip „drawRect“, tačiau stačiakampis turi suapvalintus kraštus.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t spindulys, uint16_t spalva);

8. fillRoundRect

Funkcija fillRoundRect yra tokia pati kaip drawRoundRect, tačiau stačiakampis bus užpildytas nurodyta spalva.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t spindulys, uint16_t spalva);

9. pieštiTrikampis

„DrawTriangle“funkcija yra atsakinga už trikampio nupiešimą ekrane, perduodant 3 viršūnių tašką.

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

10. užpildytiTrikampis

Funkcija fillTriangle yra tokia pati kaip drawTriangle, tačiau trikampis bus užpildytas nurodyta spalva.

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

11. drawCircle

„DrawCircle“funkcija yra atsakinga už apskritimo piešimą iš šaltinio taško ir spindulio.

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

12. fillCircle

Funkcija fillCircle yra tokia pati kaip drawCircle, tačiau apskritimas bus užpildytas nurodyta spalva.

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

13. fillScreen

„FillScreen“funkcija yra atsakinga už ekrano užpildymą viena spalva.

void fillScreen (uint16_t spalva);

14. setCursor

Funkcija „setCursor“yra atsakinga už žymeklio išdėstymą rašant į tam tikrą tašką.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Funkcija setTextColor yra atsakinga už rašomo teksto spalvos priskyrimą. Turime du jo naudojimo būdus:

void setTextColor (uint16_t c); // nustato tik rašymo spalvą negalioja setTextColor (uint16_t c, uint16_t bg); // nustatyti rašymo spalvą ir fono spalvą

16. setTextSize

Funkcija setTextSize yra atsakinga už teksto, kuris bus parašytas, dydžio priskyrimą.

void setTextSize (uint8_t s);

17. setTextWrap

Funkcija setTextWrap yra atsakinga už linijos nutraukimą, jei ji pasiekia ekrano ribą.

void setTextWrap (loginis w);

18. setRotation

„SetRotation“funkcija yra atsakinga už ekrano sukimą (kraštovaizdžio, portreto).

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

5 žingsnis: pavyzdys

Mes sukursime programą, kurioje naudosime daugumą ekrano teikiamų išteklių.

Parašykime keletą skirtingų dydžių eilučių, sukurkime tris geometrines figūras ir paimkime ant jų prisilietimo įvykį, kiekvieną kartą, kai paliesime vieną iš figūrų, turėsime atsiliepimą apie figūros pavadinimą, esantį tiesiai po jais.

6 žingsnis: bibliotekos

Pirmiausia apibrėžkime bibliotekas, kurias naudosime.

#include // atsakymas į partiją gráfica

#include // atsakymas į pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#įtraukti „math.h“// skaičiuotinė potencija

7 žingsnis: apibrėžia

Mes apibrėžsime kai kurias kaiščių makrokomandas ir svarbias vertes, kurias naudosime.

// 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 // posositionamento dos text de de feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_TOUCHURE 120 min. 10 #apibrėžkite MAXPRESSURE 1000

Tęsiame kai kurių makrokomandų apibrėžimą.

// Associa o nome das cores aos valoresrespondentes #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define GELTONA 0xFFE0 #define BALTA 0xFFFF // dados de crius = Circle Circle const int ratas_x = 240; const int apskritimas_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;

8 veiksmas: sąranka

Sąrankoje inicijuosime savo grafinio valdymo objektą ir atliksime pirmąsias konfigūracijas.

void setup () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializa objeto controlador da lib grafica tft.begin (); vėlavimas (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 žingsnis: ciklas

Cikle mes paimsime tašką, kuriame paliesime ekraną, ir pamatysime, ar palietimas įvyko vienoje iš figūrų.

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 = žemėlapis (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = žemėlapis (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 ("Trikampis"); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Apskritimas"); }}}

10 veiksmas: patikrinkite, ar paliesime apskritimą

Šiame žingsnyje mes nagrinėjame ekrano inicijavimą ir apibrėžiame rodomų tekstų spalvas.

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

11 žingsnis: Geometrinių formų kūrimo funkcijos

Mes sukuriame stačiakampį, trikampį ir apskritimą su mūsų nustatytomis kilmėmis.

// cria um retangulo com origem (x, y) = (10, 100) // plotis = 80 e aukštis = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, BALTAS); } // cria um triangulo com os viršūnės: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, GELTONA); 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, GREEN); tft.drawCircle (240, 125, 30, BALTA); }

12 veiksmas: patikrinkite, ar neliesime stačiakampio

Ši funkcija patikrina, ar taškas yra stačiakampio viduje.

// 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 žingsnis: patikrinkite, ar paliesime apskritimą

Tai tas pats kaip su apskritimu.

// 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 (atstumas <= apskritimo spindulys) {return true; } return false; }

14 žingsnis: patikrinkite, ar paliesime trikampį

Tas pats taško patikrinimas taip pat atliekamas trikampyje.

// 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); plūdė AKR = triangleArea (a, c, p); plūdė ABP = triangleArea (a, b, p); plūdė CPB = triangleArea (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 -) kirvis) * (pagal - ay))/2); }

15 veiksmas: paliesto objekto pavadinimo spausdinimo funkcija

Čia ekrane užrašome naudojamos geometrinės figūros pavadinimą.

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

16 žingsnis: failai

Atsisiųskite failus:

AŠ NE

PDF