Arduino érintőképernyős kijelzővel: 16 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Szeretne személyre szabottabb menüket és jobb ember/gép interfészeket létrehozni? Az ilyen projektekhez használhat Arduino és érintőképernyős kijelzőt. Csábítóan hangzik ez az ötlet? Ha igen, nézze meg a mai videót, ahol megmutatok egy szerelést Mega Arduino és érintőképernyős kijelzővel. Látni fogja, hogyan készítheti el a kívánt terveket a képernyőn, valamint azt is, hogyan határozza meg a képernyőterületet egy adott parancs megérintéséhez és aktiválásához. Hangsúlyozom, hogy a csapok száma miatt az Arduino Mega használatát választottam.

Tehát ma bemutatom az érintőképernyős kijelzőt, annak grafikus funkcióit, valamint azt, hogyan ragadhatja meg az érintési pontot a képernyőn. Hozzon létre egy példát is, amely tartalmazza az összes elemet, például a pozicionálást, az írást, az alakzatok, a színek és az érintés tervezését.

1. lépés: Arduino Mega 2560

2. lépés: 2,4 hüvelykes TFT LCD pajzs

Ez a kijelző, amelyet a projektünkben használunk, érdekes tulajdonsággal rendelkezik: SD -kártyával rendelkezik. Az ezzel kapcsolatos írást és olvasást azonban egy másik videó is bemutatja, amelyet hamarosan elkészítek. A mai lecke célja, hogy kifejezetten foglalkozzon a kijelző grafikus és érintőképernyős jellemzőivel.

Jellemzők:

Képernyőméret: 2,4 hüvelyk

MicroSD kártyahely

Színes LCD: 65K

Illesztőprogram: ILI9325

Felbontás: 240 x 320

Érintőképernyő: 4 vezetékes rezisztív érintőképernyő

Interfész: 8 bites adat, plusz 4 vezérlővonal

Üzemi feszültség: 3.3-5V

Méretek: 71 x 52 x 7 mm

3. lépés: Könyvtárak

Adja hozzá a könyvtárakat:

"Adafruit_GFX"

"SWTFT"

"Érintőkijelző"

Kattintson a linkekre, és töltse le a könyvtárakat.

Csomagolja ki a fájlt, és illessze be az Arduino IDE könyvtárak mappájába.

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

jegyzet

Mielőtt elkezdenénk programunkat, foglalkoznunk kell egy fontos dologgal: a TOUCH kalibrálással.

Egy egyszerű program segítségével tárolja az érintési pontokat a kijelzőn, és tárolja a pontok értékét (x, y) mindkét végén (sárgával kiemelve az alábbi ábrán). Ezek az értékek fontosak az érintésnek a képernyő grafikus pontjaihoz való hozzárendeléséhez.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ be van kapcsolva az Analog1 #define XM A2 // X- is on Analog2 #define YM 7 // Y- is on Digital7 #define XP 6 // X+ is on 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); késleltetés (1000); }

4. lépés: Funkciók

Most nézzünk meg néhány grafikus funkciót, amelyet a könyvtárak kínálhatnak nekünk.

1. drawPixel

A drawPixel funkció feladata egyetlen pont festése a képernyőn az adott ponton.

void drawPixel (int16_t x, int16_t és, uint16_t szín);

2. drawLine

A drawLine függvény felelős egy vonal két pontból történő megrajzolásáért.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t szín);

3. drawFastVLine

A drawFastVLine függvény egy függőleges vonal rajzolásáért felelős egy pontból és egy magasságból.

void drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t szín);

4. drawFastHLine

A drawFastHLine függvény felelős egy vízszintes vonal rajzolásáért egy pontból és szélességből.

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

5. drawRect

A drawRect funkció feladata egy téglalap rajzolása a képernyőre, amely áthalad a kiindulási ponton, annak magasságán és szélességén.

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

6. fillRect

A fillRect függvény megegyezik a drawRect funkcióval, de a téglalap a megadott színnel lesz kitöltve.

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

7. drawRoundRect

A drawRoundRect függvény megegyezik a drawRect funkcióval, de a téglalapnak lekerekített élei lesznek.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t sugár, uint16_t szín);

8. fillRoundRect

A fillRoundRect függvény megegyezik a drawRoundRect funkcióval, de a téglalap a megadott színnel lesz kitöltve.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t sugár, uint16_t szín);

9. felhívniHáromszög

A drawTriangle függvény feladata egy háromszög rajzolása a képernyőre, áthaladva a 3 csúcs pontján.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t szín);

10. fillTriangle

A fillTriangle függvény megegyezik a drawTriangle funkcióval, de a háromszög a megadott színnel lesz kitöltve.

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t szín);

11. drawCircle

A drawCircle függvény feladata egy kör rajzolása egy forráspontból és egy sugárból.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t szín);

12. fillCircle

A fillCircle függvény megegyezik a drawCircle funkcióval, de a kör a megadott színnel lesz kitöltve.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t szín);

13. fillScreen

A fillScreen funkció felelős a képernyő egyetlen színnel történő kitöltéséért.

void fillScreen (uint16_t szín);

14. setCursor

A setCursor függvény feladata a kurzor pozícionálása egy adott pontba való íráshoz.

void setCursor (int16_t x, int16_t y);

15. setTextColor

A setTextColor függvény felelős az írandó szöveg színének hozzárendeléséért. Kétféle módon használhatjuk:

void setTextColor (uint16_t c); // csak az írás színét állítja be érvénytelen setTextColor (uint16_t c, uint16_t bg); // állítsa be az írás színét és a háttérszínt

16. setTextSize

A setTextSize függvény felelős az írandó szöveg méretének hozzárendeléséért.

void setTextSize (uint8_t s);

17. setTextWrap

A setTextWrap funkció felelős a vonal megszakításáért, ha eléri a képernyő határát.

void setTextWrap (boolean w);

18. setRotation

A setRotation funkció felelős a képernyő elforgatásáért (fekvő, álló).

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

5. lépés: Példa

Létrehozunk egy programot, amelyben a kijelző által biztosított erőforrások nagy részét használjuk fel.

Írjunk néhány karakterláncot különböző méretben, készítsünk három geometriai alakzatot, és vegyük fel rájuk az érintési eseményt, valahányszor megérintjük az egyik figurát, közvetlenül az alatta lévő visszajelzést kapjuk.

6. lépés: Könyvtárak

Először határozzuk meg a használni kívánt könyvtárakat.

#include // responseável pela parte gráfica

#include // responseavel por pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#include "math.h" // számítási potenciál

7. lépés: Meghatározza

Meghatározunk néhány makrót a csapokhoz, valamint a fontos értékeket, amelyeket használni fogunk.

// 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 #define FEEDBACK_TOUCHURE PRESS 120 10 #define MAXPRESSURE 1000

Folytatjuk néhány makró meghatározását.

// Associa o nome das cores aos valoresrespondentes #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define SÁRGA 0xFFE0 #define WHITE 0xFFFF // dados de cruloçia Circo const int kör_x = 240; const int kör_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. lépés: Beállítás

A beállítás során inicializáljuk a grafikus vezérlő objektumunkat, és elvégezzük az első konfigurációkat.

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

9. lépés: Hurok

A ciklusban felvesszük azt a pontot, ahol megérintjük a képernyőt, és megnézzük, hogy az érintés megtörtént -e az egyik ábrán.

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 = térkép (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = térkép (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 ("Háromszög"); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Kör"); }}}

10. lépés: Ellenőrizze, hogy megérintjük -e a kört

Ebben a lépésben a képernyő inicializálásával foglalkozunk, és meghatározzuk a megjelenítendő szövegek színeit.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("HOZZÁFÉRÉS"); tft.setTextColor (SÁRGA); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (ZÖLD); 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. lépés: Geometriai alakzatok létrehozásának funkciói

Téglalapot, háromszöget és kört hozunk létre az általunk meghatározott eredetekkel.

// cria um retangulo com origem (x, y) = (10, 100) // szélesség = 80 e magasság = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, FEHÉR); } // cria um triangulo com os csúcsok: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, SÁRGA); tft.drawTriangle (110, 150, 150, 100, 190, 150, FEHÉR); } // 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, FEHÉR); }

12. lépés: Ellenőrizze, hogy megérintjük -e a téglalapot

Ez a funkció ellenőrzi, hogy a pont a téglalapon belül van -e.

// 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. lépés: Ellenőrizze, hogy megérintjük -e a kört

Ez ugyanaz, mint a körrel.

// 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 (távolság <= kör_sugár) {return true; } return false; }

14. lépés: Ellenőrizze, hogy megérintjük -e a háromszöget

Ugyanaz a pontellenőrzés történik a háromszögön belül is.

// 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); úszó ABP = triangleArea (a, b, p); úszó 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 pontos x, y float triangleArea (TSPoint a, TSPoint b, TSPoint c) {return fabs ((((bx - ax)*(cy - ay) - (cx -) ax) * (by - ay))/2); }

15. lépés: Funkció az érintett objektum nevének nyomtatásához

Itt a képernyőre írjuk a használt geometriai ábra nevét.

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

16. lépés: Fájlok

Töltse le a fájlokat:

ÉN NEM

PDF