Arduino con display touch screen: 16 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Ti piacerebbe creare menu più personalizzati e migliori interfacce uomo/macchina? Per tali progetti, puoi utilizzare un Arduino e un display touch screen. Questa idea sembra allettante? Se è così, guarda il video di oggi, dove ti mostrerò un assemblaggio con un Mega Arduino e un display Touch Screen. Vedrai come realizzare i disegni che desideri sullo schermo e anche come determinare la regione dello schermo da toccare e attivare un comando specifico. Sottolineo che ho scelto di utilizzare Arduino Mega per la sua quantità di pin.

Quindi oggi ti presenterò il display Touch Screen, le sue funzioni grafiche e come afferrare il punto di tocco sullo schermo. Creiamo anche un esempio contenente tutti gli elementi, come posizionamento, scrittura, disegno di forme, colori e tocco.

Passaggio 1: Arduino Mega 2560

Passaggio 2: schermo LCD TFT da 2,4"

Questo display che usiamo nel nostro progetto ha una caratteristica interessante: ha una scheda SD. Tuttavia, la scrittura e la lettura coinvolte in questo verranno mostrate in un altro video, che produrrò presto. L'obiettivo della lezione di oggi è quello di affrontare in modo specifico le caratteristiche grafiche e touch screen di questo display.

Caratteristiche:

Dimensione dello schermo: 2,4 pollici

Slot per scheda MicroSD

LCD a colori: 65K

Driver: ILI9325

Risoluzione: 240 x 320

Touchscreen: touchscreen resistivo a 4 fili

Interfaccia: dati a 8 bit, più 4 linee di controllo

Tensione di esercizio: 3,3-5 V

Dimensioni: 71 x 52 x 7 mm

Passaggio 3: biblioteche

Aggiungi le librerie:

"Adafruit_GFX"

"SWTFT"

"Touch screen"

Clicca sui link e scarica le librerie.

Decomprimi il file e incollalo nella cartella delle librerie dell'IDE di Arduino.

C: / Programmi (x86) / Arduino / librerie

Nota

Prima di iniziare il nostro programma, dobbiamo affrontare qualcosa di importante: la calibrazione TOUCH.

Utilizzando un semplice programma per ottenere i punti di tocco sul display, memorizzare il valore dei punti (x, y) ad ogni estremità (evidenziati in giallo nella figura sottostante). Questi valori sono importanti per mappare il tocco sui punti grafici sullo schermo.

#include //Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ è su Analog1 #define XM A2 // X- è su Analog2 #define YM 7 // Y- è su Digital7 #define XP 6 // X+ is on Digital6 //oggetto per manipolare gli eventi su questa 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); ritardo(1000); }

Passaggio 4: funzioni

Diamo ora uno sguardo ad alcune funzioni grafiche che le librerie possono offrirci.

1. disegnarePixel

La funzione drawPixel è responsabile della pittura di un singolo punto sullo schermo in un dato punto.

void drawPixel (int16_t x, int16_t e, uint16_t color);

2. DisegnaLinea

La funzione drawLine è responsabile del disegno di una linea da due punti.

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

3. drawFastVLine

La funzione drawFastVLine è responsabile del disegno di una linea verticale da un punto e un'altezza.

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

4. Disegna FastHLine

La funzione drawFastHLine è responsabile del disegno di una linea orizzontale da un punto e una larghezza.

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

5. disegna Rett

La funzione drawRect è responsabile del disegno di un rettangolo sullo schermo, passando per un punto di origine, la sua altezza e larghezza.

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

6. fillRect

La funzione fillRect è la stessa di drawRect, ma il rettangolo verrà riempito con il colore specificato.

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

7. DrawRoundRect

La funzione drawRoundRect è la stessa di drawRect, ma il rettangolo avrà i bordi arrotondati.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t raggio, uint16_t colore);

8. fillRoundRect

La funzione fillRoundRect è la stessa di drawRoundRect, ma il rettangolo verrà riempito con il colore specificato.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t raggio, uint16_t colore);

9. disegna un triangolo

La funzione drawTriangle è responsabile del disegno di un triangolo sullo schermo, passando per il punto dei 3 vertici.

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

10. fillTriangolo

La funzione fillTriangle è la stessa di drawTriangle, ma il triangolo verrà riempito con il colore specificato.

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

11. disegnareCerchio

La funzione drawCircle è responsabile del disegno di un cerchio da un punto sorgente e da un raggio.

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

12. fillCircle

La funzione fillCircle è la stessa di drawCircle, ma il cerchio verrà riempito con il colore specificato.

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

13. riempimento dello schermo

La funzione fillScreen è responsabile del riempimento dello schermo con un singolo colore.

void fillScreen (uint16_t color);

14. impostaCursore

La funzione setCursor è responsabile del posizionamento del cursore per la scrittura in un determinato punto.

void setCursor (int16_t x, int16_t y);

15. setTextColor

La funzione setTextColor è responsabile dell'assegnazione di un colore al testo da scrivere. Abbiamo due modi per usarlo:

void setTextColor (uint16_t c); // imposta il colore di scrittura onlyvoid setTextColor (uint16_t c, uint16_t bg); // imposta il colore di scrittura e il colore di sfondo

16. setTextSize

La funzione setTextSize è responsabile dell'assegnazione di una dimensione al testo che verrà scritto.

void setTextSize (uint8_t s);

17. setTextWrap

La funzione setTextWrap è responsabile dell'interruzione della riga se raggiunge il limite dello schermo.

void setTextWrap (booleano w);

18. setRotation

La funzione setRotation è responsabile della rotazione dello schermo (orizzontale, verticale).

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

Passaggio 5: esempio

Creeremo un programma in cui utilizzeremo la maggior parte delle risorse che il display ci fornisce.

Scriviamo alcune stringhe di diverse dimensioni, creiamo tre figure geometriche e raccogliamo l'evento tocco su di esse, ogni volta che tocchiamo una delle figure, avremo il feedback del nome della figura appena sotto di esse.

Passaggio 6: biblioteche

Per prima cosa definiamo le librerie che utilizzeremo.

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

#include //responsável por pegar os toques na tela

#include //comunicazione con display

#include //comunicazione con display

#include "math.h" //potenza calcolata

Passaggio 7: definizione

Definiremo alcune macro per i pin e anche i valori importanti che utilizzeremo.

//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 attravé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 values 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_TOUCH_TOUCH_X 120 #define pressa_TOUCH_X 120 #define FEEDBACK valore_X 120 #define FEEDBACK 10 #definire PRESSIONE MASSIMA 1000

Continuiamo con la definizione di alcune macro.

//Associa o nome das cores aos valores corrispondenti#define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF //dados de criação do circulo const int circle_radius = 30; const int circle_x = 240; const int circle_y = 125; //Oggetto per la manipolazione di eventi su tela TouchScreen ts = TouchScreen(XP, YP, XM, YM); //objeto para manipulacao da parte grafica SWTFT tft;

Passaggio 8: configurazione

Nel setup inizializzeremo il nostro oggetto di controllo grafico ed effettueremo le prime configurazioni.

void setup() { Serial.begin(9600); //reseta o objeto da lib grafica tft.reset(); //inicializa objeto controlador da lib grafica tft.begin(); ritardo (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(); }

Passaggio 9: ciclo

Nel ciclo, prenderemo il punto in cui tocchiamo lo schermo e vedremo se il tocco si è verificato in una delle figure.

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

Passaggio 10: controlla se tocchiamo il cerchio

In questo passaggio ci occupiamo dell'inizializzazione dello schermo e definiamo i colori dei testi da visualizzare.

/*Desenha na tela os elementis */ void initialSettings() { tft.setTextColor(WHITE); tft.setTextSize(TEXT_SIZE_S); tft.println("ACESSO"); tft.setTextColor(GIALLO); tft.setTextSize(TEXT_SIZE_M); tft.println("MEU BLOG"); tft.setTextColor(VERDE); tft.setTextSize(TEXT_SIZE_L); tft.println("FERNANDOK. COM"); createRect(); createTriangolo(); createCircle(); tft.setCursor(FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor(CIANO); tft.setTextSize(TEXT_SIZE_L); tft.println("FORMA: "); }

Passaggio 11: funzioni di creazione di forme geometriche

Creiamo un rettangolo, un triangolo e un cerchio con le origini che determiniamo.

//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, BIANCO); } //cria um triangulo com os vertici: //A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle() { tft.fillTriangle(110, 150, 150, 100, 190, 150, GIALLO); tft.drawTriangle(110, 150, 150, 100, 190, 150, BIANCO); } //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, BIANCO); }

Passaggio 12: controlla se tocchiamo il rettangolo

Questa funzione controlla se il punto è all'interno del rettangolo.

//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) { restituisce vero; } } restituisce falso; }

Passaggio 13: controlla se tocchiamo il cerchio

Questo è lo stesso del cerchio.

//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(distanza <= circle_radius) { return true; } restituisce falso; }

Passaggio 14: controlla se tocchiamo il triangolo

Lo stesso controllo di quello del punto avviene anche all'interno del triangolo.

// Função que verifica se o ponto p esta dentro do triangulo ABC// Se estater 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 = triangoloArea(a, c, p); float ABP = triangoloArea(a, b, p); float CPB = triangoloArea(c, p, b); if(ABC == ACP+ABP+CPB){ return true; } restituisce falso; } // 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) * (di - ay))/2); }

Passaggio 15: funzione per stampare il nome dell'oggetto toccato

Qui scriviamo sullo schermo il nome della figura geometrica che viene utilizzata.

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

Passaggio 16: file

Scarica i file:

IO NO

PDF