Arduino με οθόνη αφής: 16 βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:37

Θα θέλατε να δημιουργήσετε πιο εξατομικευμένα μενού και καλύτερες διεπαφές ανθρώπου/μηχανής; Για τέτοια έργα, μπορείτε να χρησιμοποιήσετε ένα Arduino και μια οθόνη αφής. Ακούγεται δελεαστική αυτή η ιδέα; Αν ναι, δείτε το βίντεο σήμερα, όπου θα σας δείξω μια διάταξη με Mega Arduino και οθόνη αφής. Θα δείτε πώς να κάνετε τα σχέδια που θέλετε στην οθόνη, καθώς και πώς να καθορίσετε την περιοχή της οθόνης για να αγγίξετε και να ενεργοποιήσετε μια συγκεκριμένη εντολή. Τονίζω ότι επέλεξα να χρησιμοποιήσω το Arduino Mega λόγω της ποσότητας των καρφιτσών του.

Σήμερα λοιπόν, θα σας παρουσιάσω την οθόνη αφής, τις γραφικές της λειτουργίες και πώς να πιάσετε το σημείο αφής στην οθόνη. Ας δημιουργήσουμε επίσης ένα παράδειγμα που περιέχει όλα τα στοιχεία, όπως η τοποθέτηση, η γραφή, ο σχεδιασμός σχημάτων, χρωμάτων και αφής.

Βήμα 1: Arduino Mega 2560

Βήμα 2: TFT LCD Shield 2,4"

Αυτή η οθόνη που χρησιμοποιούμε στο έργο μας έχει ένα ενδιαφέρον χαρακτηριστικό: έχει κάρτα SD. Ωστόσο, η γραφή και η ανάγνωση που εμπλέκονται σε αυτό θα εμφανιστούν σε ένα άλλο βίντεο, το οποίο σύντομα θα παράγω. Ο στόχος του σημερινού μαθήματος είναι να αντιμετωπίσει συγκεκριμένα τα χαρακτηριστικά γραφικών και οθονών αφής αυτής της οθόνης.

Χαρακτηριστικά:

Διάσταση οθόνης: 2,4 ίντσες

Υποδοχή κάρτας MicroSD

Έγχρωμη LCD: 65K

Πρόγραμμα οδήγησης: ILI9325

Ανάλυση: 240 x 320

Οθόνη αφής: 4-καλωδιακή οθόνη αφής με αντίσταση

Διεπαφή: δεδομένα 8 bit, συν 4 γραμμές ελέγχου

Τάση λειτουργίας: 3,3-5V

Διαστάσεις: 71 x 52 x 7mm

Βήμα 3: Βιβλιοθήκες

Προσθέστε τις βιβλιοθήκες:

"Adafruit_GFX"

"SWTFT"

"Οθόνη αφής"

Κάντε κλικ στους συνδέσμους και κατεβάστε τις βιβλιοθήκες.

Αποσυμπιέστε το αρχείο και επικολλήστε το στο φάκελο βιβλιοθηκών του Arduino IDE.

C: / Αρχεία προγράμματος (x86) / Arduino / βιβλιοθήκες

Σημείωση

Πριν ξεκινήσουμε το πρόγραμμά μας, πρέπει να αντιμετωπίσουμε κάτι σημαντικό: τη βαθμονόμηση TOUCH.

Χρησιμοποιώντας ένα απλό πρόγραμμα για να δείτε τα σημεία αφής στην οθόνη, αποθηκεύστε την τιμή των σημείων (x, y) σε κάθε άκρο (επισημαίνεται με κίτρινο χρώμα στο παρακάτω σχήμα). Αυτές οι τιμές είναι σημαντικές για τη χαρτογράφηση της αφής στα γραφικά σημεία της οθόνης.

#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+ είναι σε Digital6 // objeto para manipulacao dos eventos de toque na tela TouchScreen ts = Οθόνη αφής (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); καθυστέρηση (1000)? }

Βήμα 4: Λειτουργίες

Τώρα ας ρίξουμε μια ματιά σε μερικές γραφικές λειτουργίες που μπορούν να μας προσφέρουν οι βιβλιοθήκες.

1. drawPixel

Η λειτουργία drawPixel είναι υπεύθυνη για τη ζωγραφική ενός μόνο σημείου στην οθόνη στο δεδομένο σημείο.

void drawPixel (χρώμα int16_t x, int16_t και, uint16_t χρώμα);

2. drawLine

Η συνάρτηση drawLine είναι υπεύθυνη για τη χάραξη μιας γραμμής από δύο σημεία.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t χρώμα);

3. drawFastVLine

Η συνάρτηση drawFastVLine είναι υπεύθυνη για την κατάρτιση κάθετης γραμμής από ένα σημείο και ένα ύψος.

void drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t χρώμα);

4. drawFastHLine

Η συνάρτηση drawFastHLine είναι υπεύθυνη για την κατάρτιση μιας οριζόντιας γραμμής από ένα σημείο και ένα πλάτος.

void drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t χρώμα);

5. drawRect

Η συνάρτηση drawRect είναι υπεύθυνη για τη σχεδίαση ενός ορθογωνίου στην οθόνη, περνώντας ένα σημείο προέλευσης, το ύψος και το πλάτος του.

void drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t χρώμα);

6. fillRect

Η συνάρτηση fillRect είναι η ίδια με το drawRect, αλλά το ορθογώνιο θα γεμίσει με το δεδομένο χρώμα.

void fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t χρώμα);

7. drawRoundRect

Η συνάρτηση drawRoundRect είναι η ίδια με την drawRect, αλλά το ορθογώνιο θα έχει στρογγυλεμένες άκρες.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, ακτίνα int16_t, χρώμα uint16_t);

8. fillRoundRect

Η συνάρτηση fillRoundRect είναι η ίδια με την drawRoundRect, αλλά το ορθογώνιο θα γεμίσει με το δεδομένο χρώμα.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, ακτίνα int16_t, χρώμα uint16_t);

9. drawTriangle

Η συνάρτηση drawTriangle είναι υπεύθυνη για τη σχεδίαση ενός τριγώνου στην οθόνη, περνώντας το σημείο των 3 κορυφών.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t χρώμα);

10. fillTriangle

Η συνάρτηση fillTriangle είναι η ίδια με το drawTriangle, αλλά το τρίγωνο θα γεμίσει με το δεδομένο χρώμα.

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t χρώμα);

11. drawCircle

Η συνάρτηση drawCircle είναι υπεύθυνη για τη σχεδίαση ενός κύκλου από ένα σημείο πηγής και μια ακτίνα.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t χρώμα);

12. fillCircle

Η λειτουργία FillCircle είναι η ίδια με το drawCircle, αλλά ο κύκλος θα γεμίσει με το δεδομένο χρώμα.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t χρώμα);

13. fillScreen

Η λειτουργία FillScreen είναι υπεύθυνη για την πλήρωση της οθόνης με ένα μόνο χρώμα.

void fillScreen (χρώμα uint16_t);

14. setCursor

Η συνάρτηση setCursor είναι υπεύθυνη για τη θέση του δρομέα για εγγραφή σε ένα δεδομένο σημείο.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Η συνάρτηση setTextColor είναι υπεύθυνη για την εκχώρηση χρώματος στο κείμενο που πρόκειται να γραφτεί. Έχουμε δύο τρόπους να το χρησιμοποιήσουμε:

void setTextColor (uint16_t c); // ορίζει το χρώμα γραφής onlyvoid setTextColor (uint16_t c, uint16_t bg); // ορίστε το χρώμα γραφής και το χρώμα φόντου

16. setTextSize

Η συνάρτηση setTextSize είναι υπεύθυνη για την εκχώρηση μεγέθους στο κείμενο που θα γραφτεί.

void setTextSize (uint8_t s);

17. setTextWrap

Η λειτουργία setTextWrap είναι υπεύθυνη για το σπάσιμο της γραμμής εάν φτάσει το όριο της οθόνης.

void setTextWrap (boolean w)?

18. setRotation

Η λειτουργία setRotation είναι υπεύθυνη για την περιστροφή της οθόνης (οριζόντιο, πορτραίτο).

void setRotation (uint8_t r); // 0 (στάνταρ), 1, 2, 3

Βήμα 5: Παράδειγμα

Θα δημιουργήσουμε ένα πρόγραμμα στο οποίο θα χρησιμοποιήσουμε τους περισσότερους πόρους που μας παρέχει η οθόνη.

Ας γράψουμε μερικές συμβολοσειρές σε διαφορετικά μεγέθη, δημιουργήστε τρεις γεωμετρικές φιγούρες και επιλέξτε το συμβάν αφής, κάθε φορά που αγγίζουμε ένα από τα σχήματα, θα έχουμε την ανατροφοδότηση του ονόματος του σχήματος ακριβώς κάτω από αυτά.

Βήμα 6: Βιβλιοθήκες

Αρχικά ας ορίσουμε τις βιβλιοθήκες που θα χρησιμοποιήσουμε.

#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

#include "math.h" // calcular potencia

Βήμα 7: Ορίζει

Θα ορίσουμε ορισμένες μακροεντολές για τις καρφίτσες, καθώς και τις σημαντικές τιμές που θα χρησιμοποιήσουμε.

// 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 ανάδρασης #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_TOUCH_X 120 #define FEEDBACK_TOUCH_Y 200 // Valores para detectar ένα pressão κάνει τόκα MINPRESSURE #define 10 #define MAXPRESSURE 1000

Συνεχίζουμε με τον ορισμό ορισμένων μακροεντολών.

// Associa o nome das cores aos valoresrespondentes #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFo // dados de criaç; const int circle_x = 240; const int circle_y = 125; // Αντικείμενο για τη διαχείριση των γεγονότων που θέλετε να χρησιμοποιήσετε στην οθόνη TouchScreen ts = Οθόνη αφής (XP, YP, XM, YM). // objeto para manipulacao da parte grafica SWTFT tft;

Βήμα 8: Ρύθμιση

Στη ρύθμιση, θα προετοιμάσουμε το αντικείμενο ελέγχου γραφικών και θα κάνουμε τις πρώτες διαμορφώσεις.

void setup () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializa objeto controlador da lib grafica tft.begin (); καθυστέρηση (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: Βρόχος

Στο βρόχο, θα σηκώσουμε το σημείο στο οποίο αγγίζουμε την οθόνη και θα δούμε αν το άγγιγμα συνέβη σε ένα από τα σχήματα.

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 = χάρτης (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = χάρτης (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 ("Τρίγωνο") ? } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Βήμα 10: Ελέγξτε αν αγγίζουμε τον κύκλο

Σε αυτό το βήμα ασχολούμαστε με την προετοιμασία της οθόνης και καθορίζουμε τα χρώματα των κειμένων που θα εμφανιστούν.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (ΚΙΤΡΙΝΟ); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (ΠΡΑΣΙΝΟ); 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: Λειτουργίες δημιουργίας γεωμετρικών σχημάτων

Δημιουργούμε ένα ορθογώνιο, ένα τρίγωνο και έναν κύκλο με τις αρχές που καθορίζουμε.

// 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, ΛΕΥΚΟ); } // cria um triangulo com os vertices: // A = (110, 150); Β = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, YELLOW); tft.drawTriangle (110, 150, 150, 100, 190, 150, ΛΕΥΚΟ) } // 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, ΛΕΥΚΟ); }

Βήμα 12: Ελέγξτε αν αγγίζουμε το ορθογώνιο

Αυτή η συνάρτηση ελέγχει αν το σημείο βρίσκεται μέσα στο ορθογώνιο.

// 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: Ελέγξτε αν αγγίζουμε τον κύκλο

Αυτό είναι το ίδιο με τον κύκλο.

// 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)); εάν (απόσταση <= κύκλος_αυθός) {επιστροφή true? } επιστροφή false; }

Βήμα 14: Ελέγξτε αν αγγίζουμε το τρίγωνο

Ο ίδιος έλεγχος αυτού του σημείου συμβαίνει και μέσα στο τρίγωνο.

// 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); float ABP = triangleArea (a, b, p); float CPB = triangleArea (c, p, b); if (ABC == ACP+ABP+CPB) {return true? } επιστροφή 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: Λειτουργία εκτύπωσης του ονόματος του αντικειμένου που αγγίχθηκε

Εδώ γράφουμε στην οθόνη το όνομα του γεωμετρικού σχήματος που χρησιμοποιείται.

// 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 (ΛΕΥΚΟ); tft.println (σχήμα); }

Βήμα 16: Αρχεία

Κατεβάστε τα αρχεία:

ΕΓΩ ΔΕΝ

PDF