Arduino med berøringsskjerm: 16 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:24

Vil du lage mer personlige menyer og bedre grensesnitt mellom mennesker og maskiner? For slike prosjekter kan du bruke en Arduino og en berøringsskjerm. Høres denne ideen fristende ut? I så fall, sjekk ut videoen i dag, hvor jeg vil vise deg en samling med en Mega Arduino og en berøringsskjerm. Du vil se hvordan du lager designene du vil ha på skjermen, og også hvordan du bestemmer skjermområdet for å berøre og aktivere en bestemt kommando. Jeg understreker at jeg valgte å bruke Arduino Mega på grunn av mengden pins.

Så i dag vil jeg introdusere deg for berøringsskjermen, dens grafiske funksjoner og hvordan du tar tak i berøringspunktet på skjermen. La oss også lage et eksempel som inneholder alle elementene, for eksempel posisjonering, skriving, design av former, farger og berøring.

Trinn 1: Arduino Mega 2560

Trinn 2: TFT LCD -skjerm 2,4"

Denne skjermen som vi bruker i prosjektet vårt har en interessant funksjon: den har et SD -kort. Imidlertid vil skriving og lesing involvert i dette bli vist i en annen video, som jeg snart vil produsere. Målet med dagens leksjon er å spesifikt ta for seg de grafiske og berøringsskjermfunksjonene i denne skjermen.

Kjennetegn:

Skjermdimensjon: 2,4 tommer

MicroSD -kortspor

Farge LCD: 65K

Driver: ILI9325

Oppløsning: 240 x 320

Berøringsskjerm: 4-leder resistiv berøringsskjerm

Grensesnitt: 8 -biters data, pluss 4 kontrollinjer

Driftsspenning: 3,3-5V

Dimensjoner: 71 x 52 x 7 mm

Trinn 3: Biblioteker

Legg til bibliotekene:

"Adafruit_GFX"

"SWTFT"

"Touch-skjerm"

Klikk på koblingene og last ned bibliotekene.

Pakk ut filen og lim den inn i bibliotekmappen i Arduino IDE.

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

Merk

Før vi starter programmet, må vi ta opp noe viktig: TOUCH -kalibreringen.

Ved å bruke et enkelt program for å få berøringspunktene på displayet, lagrer du verdien av punktene (x, y) i hver ende (markert med gult i figuren nedenfor). Disse verdiene er viktige for å kartlegge berøringen til de grafiske punktene på skjermen.

#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 oppsett () {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); }

Trinn 4: Funksjoner

La oss nå se på noen grafiske funksjoner som bibliotekene kan tilby oss.

1. drawPixel

DrawPixel -funksjonen er ansvarlig for å male et enkelt punkt på skjermen på det gitte punktet.

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

2. drawLine

DrawLine -funksjonen er ansvarlig for å 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 -funksjonen er ansvarlig for å tegne en vertikal linje fra et punkt og en høyde.

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

4. drawFastHLine

DrawFastHLine -funksjonen er ansvarlig for å tegne en horisontal linje fra et punkt og en bredde.

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

5. drawRect

DrawRect -funksjonen er ansvarlig for å tegne et rektangel på skjermen, passere et opprinnelsespunkt, dets høyde og bredde.

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

6. fillRect

FillRect -funksjonen er den samme som drawRect, men rektangelet fylles med den angitte fargen.

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

7. drawRoundRect

DrawRoundRect -funksjonen er den samme som drawRect, men rektangelet vil ha avrundede kanter.

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

8. fillRoundRect

FillRoundRect -funksjonen er den samme som drawRoundRect, men rektangelet fylles med den angitte fargen.

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

9. drawTriangle

DrawTriangle -funksjonen er ansvarlig for å tegne en trekant på skjermen, og passere punktet til de tre hjørnene.

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

10. fillTriangle

FillTriangle -funksjonen er den samme som drawTriangle, men trekanten fylles med den angitte fargen.

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 -funksjonen er ansvarlig for å tegne en sirkel fra et kildepunkt og en radius.

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

12. fillCircle

FillCircle -funksjonen er den samme som drawCircle, men sirkelen fylles med den angitte fargen.

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

13. fillScreen

FillScreen -funksjonen er ansvarlig for å fylle skjermen med en farge.

void fillScreen (uint16_t farge);

14. setCursor

SetCursor -funksjonen er ansvarlig for å plassere markøren for å skrive til et gitt punkt.

void setCursor (int16_t x, int16_t y);

15. setTextColor

SetTextColor -funksjonen er ansvarlig for å tildele en farge til teksten som skal skrives. Vi har to måter å bruke det på:

void setTextColor (uint16_t c); // angir skrivefargen bare ugyldig setTextColor (uint16_t c, uint16_t bg); // angi skrivefarge og bakgrunnsfarge

16. setTextSize

SetTextSize -funksjonen er ansvarlig for å tilordne en størrelse til teksten som skal skrives.

void setTextSize (uint8_t s);

17. setTextWrap

SetTextWrap -funksjonen er ansvarlig for å bryte linjen hvis den når skjermgrensen.

void setTextWrap (boolsk w);

18. setRotation

SetRotation -funksjonen er ansvarlig for å rotere skjermen (liggende, stående).

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

Trinn 5: Eksempel

Vi vil lage et program der vi vil bruke de fleste ressursene som displayet gir oss.

La oss skrive noen strenger i forskjellige størrelser, lage tre geometriske figurer og plukke opp berøringshendelsen på dem. Hver gang vi berører en av figurene, får vi tilbakemeldingen på figurnavnet like under dem.

Trinn 6: Biblioteker

La oss først definere bibliotekene vi skal bruke.

#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

#inkludere "math.h" // calcular potencia

Trinn 7: Definerer

Vi vil definere noen makroer for pinnene, og også viktige verdier som vi vil bruke.

// 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 #defineFEED_FEED_FEER_DO_FEER_DO_FEER_DO_FEAR_TILBAKE_TILBAKE_TILBUD_TILBUD_TILBUD_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBUD_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBAKE_TILBUD_TILBAKE_TILBUD_TILBUD_TILBUD_TILBUD_TILBAKE 10 #define MAXPRESSURE 1000

Vi fortsetter med definisjonen av noen 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 sirkulo const_ sirkel; const int sirkel_x = 240; const int sirkel_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;

Trinn 8: Oppsett

I oppsettet vil vi initialisere vårt grafiske kontrollobjekt og gjøre de første konfigurasjonene.

ugyldig oppsett () {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 (SVART); // chama a função para iniciar nossas configurações initialSettings (); }

Trinn 9: Sløyfe

I løkken vil vi plukke opp punktet der vi berører skjermen, og se om berøringen skjedde i en av figurene.

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"); }}}

Trinn 10: Sjekk om vi berører sirkelen

I dette trinnet tar vi for oss initialisering av skjermen og definerer fargene på tekstene som 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ØNN); 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:"); }

Trinn 11: Funksjoner for å lage geometriske former

Vi lager et rektangel, en trekant og en sirkel med opprinnelsen vi bestemmer.

// cria um retangulo com origem (x, y) = (10, 100) // bredde = 80 e høyde = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, HVIT); } // 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ØNN); tft.drawCircle (240, 125, 30, WHITE); }

Trinn 12: Sjekk om vi berører rektangelet

Denne funksjonen sjekker om punktet er inne i rektangelet.

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

Trinn 13: Sjekk om vi berører sirkelen

Dette er det samme som med sirkelen.

// 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 (avstand <= circle_radius) {return true; } returner false; }

Trinn 14: Sjekk om vi berører trekanten

Den samme kontrollen av punktet skjer også i 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); flyte ACP = triangelområde (a, c, p); flyte ABP = triangelområde (a, b, p); flyte CPB = triangelområde (c, p, b); if (ABC == ACP+ABP+CPB) {return true; } returner false; } // 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) * (by - ay))/2); }

Trinn 15: Funksjon for å skrive ut navnet på objektet som berøres

Her skriver vi på skjermen navnet på den geometriske figuren som brukes.

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

Trinn 16: Filer

Last ned filene:

INO

PDF