Arduino met aanraakskerm: 16 stappe

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:27

Wil u meer persoonlike spyskaarte en beter mens/masjien -koppelvlakke skep? Vir sulke projekte kan u 'n Arduino en 'n aanraakskerm gebruik. Klink hierdie idee aanloklik? As dit so is, kyk vandag na die video, waar ek u 'n vergadering met 'n Mega Arduino en 'n aanraakskerm sal wys. U sal sien hoe u die ontwerpe wat u wil op die skerm maak, en hoe u die skermgebied bepaal om 'n spesifieke opdrag aan te raak en te aktiveer. Ek beklemtoon dat ek gekies het om die Arduino Mega te gebruik vanweë die hoeveelheid penne.

Dus, vandag stel ek u kennis met die aanraakskerm, sy grafiese funksies en hoe u die raakpunt op die skerm kan gryp. Laat ons ook 'n voorbeeld skep wat al die elemente bevat, soos posisionering, skryf, vorms, kleure en aanraking ontwerp.

Stap 1: Arduino Mega 2560

Stap 2: TFT LCD -skerm 2,4"

Hierdie skerm wat ons in ons projek gebruik, het 'n interessante kenmerk: dit het 'n SD -kaart. Die skryf en lees wat hierby betrokke is, sal egter in 'n ander video verskyn, wat ek binnekort sal produseer. Die doel van vandag se les is om spesifiek aandag te gee aan die grafiese en aanraakskermkenmerke van hierdie skerm.

Eienskappe:

Skermafmeting: 2,4 duim

MicroSD -kaartgleuf

Kleur LCD: 65K

Bestuurder: ILI9325

Resolusie: 240 x 320

Raakskerm: 4-draad weerstandbiedende raakskerm

Koppelvlak: 8 bis data, plus 4 bedieningslyne

Bedryfspanning: 3.3-5V

Afmetings: 71 x 52 x 7 mm

Stap 3: Biblioteke

Voeg die biblioteke by:

"Adafruit_GFX"

"SWTFT"

"Raakskerm"

Klik op die skakels en laai die biblioteke af.

Pak die lêer uit en plak dit in die biblioteekmap van die Arduino IDE.

C: / Programlêers (x86) / Arduino / biblioteke

Let op

Voordat ons met ons program begin, moet ons iets belangrik aanpak: die TOUCH -kalibrasie.

Stoor die waarde van die punte (x, y) aan elke kant (met geel gemerk in die onderstaande figuur) met 'n eenvoudige program om die raakpunte op die skerm te kry. Hierdie waardes is belangrik vir die kartering van die aanraking met die grafiese punte op die skerm.

#include // Portas de leitura das coordenadas do touchvoid #definieer YP A1 // Y+ is op Analog1 #definieer XM A2 // X- is op Analog2 #definieer YM 7 // Y- is op Digital7 #definieer XP 6 // X+ is op Digital6 // objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); ongeldige opstelling () {Serial.begin (9600); } leemte -lus () {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); vertraging (1000); }

Stap 4: Funksies

Kom ons kyk na 'n paar grafiese funksies wat biblioteke ons kan bied.

1. tekenPixel

Die drawPixel -funksie is verantwoordelik vir die skilder van 'n enkele punt op die skerm op die gegewe punt.

void drawPixel (int16_t x, int16_t en, uint16_t kleur);

2. treklyn

Die drawLine -funksie is verantwoordelik om 'n lyn uit twee punte te trek.

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

3. drawFastVLine

Die drawFastVLine -funksie is verantwoordelik vir die trek van 'n vertikale lyn vanaf 'n punt en hoogte.

leegte drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t kleur);

4. drawFastHLine

Die drawFastHLine -funksie is verantwoordelik vir die trek van 'n horisontale lyn vanaf 'n punt en 'n breedte.

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

5. drawRect

Die drawRect -funksie is verantwoordelik om 'n reghoek op die skerm te teken, 'n punt van oorsprong, hoogte en breedte te verbygaan.

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

6. fillRect

Die fillRect -funksie is dieselfde as drawRect, maar die reghoek word met die gegewe kleur gevul.

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

7. drawRoundRect

Die drawRoundRect -funksie is dieselfde as drawRect, maar die reghoek het afgeronde rande.

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

8. fillRoundRect

Die fillRoundRect -funksie is dieselfde as drawRoundRect, maar die reghoek word met die gegewe kleur gevul.

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

9. trekDriehoek

Die drawTriangle -funksie is verantwoordelik om 'n driehoek op die skerm te teken en die punt van die drie hoekpunte te verbygaan.

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

10. fillTriangle

Die fillTriangle -funksie is dieselfde as drawTriangle, maar die driehoek word met die gegewe kleur gevul.

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

11. trekCirkel

Die drawCircle -funksie is verantwoordelik vir die teken van 'n sirkel vanaf 'n bronpunt en 'n radius.

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

12. fillCircle

Die fillCircle -funksie is dieselfde as drawCircle, maar die sirkel word met die gegewe kleur gevul.

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

13. fillScreen

Die fillScreen -funksie is verantwoordelik om die skerm met 'n enkele kleur te vul.

void fillScreen (uint16_t kleur);

14. setCursor

Die setCursor -funksie is verantwoordelik vir die posisionering van die wyser vir skryf na 'n gegewe punt.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Die setTextColor -funksie is verantwoordelik vir die toewysing van 'n kleur aan die teks wat geskryf moet word. Ons het twee maniere om dit te gebruik:

void setTextColor (uint16_t c); // stel slegs die kleur van die skryf in, ongeldig setTextColor (uint16_t c, uint16_t bg); // stel die skryfkleur en agtergrondkleur in

16. setTextSize

Die setTextSize -funksie is verantwoordelik vir die toewysing van 'n grootte aan die teks wat geskryf sal word.

void setTextSize (uint8_t s);

17. setTextWrap

Die setTextWrap -funksie is verantwoordelik om die lyn te breek as dit die limiet van die skerm bereik.

void setTextWrap (booleaanse w);

18. setRotation

Die setRotation -funksie is verantwoordelik vir die draai van die skerm (landskap, portret).

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

Stap 5: Voorbeeld

Ons sal 'n program opstel waarin ons die meeste hulpbronne wat die skerm bied, sal gebruik.

Kom ons skryf 'n paar snare in verskillende groottes, skep drie meetkundige figure en neem die aanraakgebeurtenis daarop, elke keer as ons aan een van die figure raak, kry ons die terugvoer van die figuurnaam net daaronder.

Stap 6: Biblioteke

Laat ons eers die biblioteke definieer wat ons sal gebruik.

#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

#sluit "wiskunde.h" // sakrekenaar in

Stap 7: Definieer

Ons sal 'n paar makros vir die penne definieer, en ook die belangrike waardes wat ons sal gebruik.

// Portas de leitura das coordenadas do touch #definieer 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 // Lêergrootte dos textos # define TEXT_SIZE_L 3 # define TEXT_SIZE_M 2 # define TEXT_SIZE_S 1 // posicionamento dos textos de terugvoer # define FEEDBACK_LABEL_X 10 # define FEEDBACK_LABEL_Y 200 # define FEEDBACK_TOUCH_X 120 # define FEEDBACK_TOUCH_Y 200 // valores para detectar n pressão doen toque # define MINPRESSURE 10 #definieer MAXPRESSURE 1000

Ons gaan voort met die definisie van sommige makros.

// Associa o nome das cores aos valores correspondentes #definieer SWART 0x0000 #define ROOI 0xF800 #define GROEN 0x07E0 #definieer CYAN 0x07FF #definieer GEEL 0xFFE0 #definieer WIT 0xFFFF // dados de criação do sirkulo const_circo; const int sirkel_x = 240; const int circle_y = 125; // objeto para manipulacao dos eventos de toque with tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

Stap 8: Opstel

In die opset sal ons ons grafiese beheervoorwerp initialiseer en die eerste konfigurasies maak.

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

Stap 9: Lus

In die lus, sal ons die punt opneem waarop ons die skerm raak, en kyk of die aanraking in een van die figure voorkom.

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 = kaart (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = kaart (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"); }}}

Stap 10: Kyk of ons die sirkel raak

In hierdie stap behandel ons die inisialisering van die skerm en definieer die kleure van die tekste wat vertoon moet word.

/ *Verwys na elemente */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (GEEL); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (GROEN); 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 ("VORM:"); }

Stap 11: Funksies om geometriese vorms te skep

Ons skep 'n reghoek, 'n driehoek en 'n sirkel met die oorsprong wat ons bepaal.

// 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, WIT); } // cria um triangulo com os hoekpunte: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, GEEL); tft.drawTriangle (110, 150, 150, 100, 190, 150, WIT); } // cria um circulo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, GROEN); tft.drawCircle (240, 125, 30, WIT); }

Stap 12: Kyk of ons die reghoek raak

Hierdie funksie kyk of die punt binne die reghoek is.

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

Stap 13: Kyk of ons die sirkel raak

Dit is dieselfde as met die sirkel.

// 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 (afstand <= circle_radius) {return true; } vals terugkeer; }

Stap 14: Kyk of ons die driehoek raak

Dieselfde kontrole van die van die punt vind ook binne die driehoek plaas.

// 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); dryf ACP = driehoekAarea (a, c, p); dryf ABP = driehoekarea (a, b, p); vlot CPB = driehoekAarea (c, p, b); as (ABC == ACP+ABP+CPB) {opgawe waar; } vals terugkeer; } // 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 - byl) * (deur - ay))/2); }

Stap 15: Funksie om die naam van die aangeraakte voorwerp te druk

Hier skryf ons op die skerm die naam van die meetkundige figuur wat gebruik word.

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

Stap 16: lêers

Laai die lêers af:

EK NEE

PDF