Arduino met touchscreen-display: 16 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:18

Wilt u meer gepersonaliseerde menu's en betere mens/machine-interfaces maken? Voor dergelijke projecten kunt u een Arduino en een Touch Screen Display gebruiken. Klinkt dit idee aantrekkelijk? Bekijk dan vandaag nog de video, waar ik je een assembly laat zien met een Mega Arduino en een Touch Screen Display. U zult zien hoe u de gewenste ontwerpen op het scherm kunt maken, en ook hoe u het schermgebied kunt bepalen om aan te raken en een specifieke opdracht te activeren. Ik benadruk dat ik ervoor heb gekozen om de Arduino Mega te gebruiken vanwege het aantal pinnen.

Daarom laat ik je vandaag kennismaken met het touchscreen, de grafische functies en hoe je het aanraakpunt op het scherm kunt pakken. Laten we ook een voorbeeld maken met alle elementen, zoals positionering, schrijven, vormen, kleuren en aanraking ontwerpen.

Stap 1: Arduino Mega 2560

Stap 2: TFT LCD-scherm 2,4"

Dit display dat we in ons project gebruiken, heeft een interessante functie: het heeft een SD-kaart. Het schrijven en lezen dat hiermee gepaard gaat, zal echter worden getoond in een andere video, die ik binnenkort zal produceren. Het doel van de les van vandaag is om specifiek in te gaan op de grafische en aanraakschermfuncties van dit scherm.

Kenmerken:

Schermafmeting: 2,4 inch

MicroSD-kaartsleuf

Kleuren-lcd: 65K

Bestuurder: ILI9325

Resolutie: 240 x 320

Touchscreen: 4-draads resistief touchscreen

Interface: 8 bit data, plus 4 stuurlijnen

Bedrijfsspanning: 3.3-5V

Afmetingen: 71 x 52 x 7 mm

Stap 3: Bibliotheken

Voeg de bibliotheken toe:

"Adafruit_GFX"

"SWTFT"

"Touch screen"

Klik op de links en download de bibliotheken.

Pak het bestand uit en plak het in de bibliothekenmap van de Arduino IDE.

C: / Programmabestanden (x86) / Arduino / bibliotheken

Opmerking

Voordat we ons programma starten, moeten we iets belangrijks aanpakken: de TOUCH-kalibratie.

Gebruik een eenvoudig programma om de aanraakpunten op het display te krijgen en sla de waarde van de punten (x, y) aan elk uiteinde op (geel gemarkeerd in de onderstaande afbeelding). Deze waarden zijn belangrijk voor het in kaart brengen van de aanraking met de grafische punten op het scherm.

#include //Leitura das coordenadas do touchvoid #define YP A1 // Y+ staat op Analog1 #define XM A2 // X- staat op Analog2 #define YM 7 // Y- staat op Digital7 #define XP 6 // X+ is op Digital6 //objeto para manipulacao dos toque toque la 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: "); Serieel.println(touchPoint.x); Serial.print("Y: "); Serieel.println(touchPoint.y); vertraging (1000); }

Stap 4: Functies

Laten we nu eens kijken naar enkele grafische functies die bibliotheken ons kunnen bieden.

1. drawPixel

De functie drawPixel is verantwoordelijk voor het schilderen van een enkel punt op het scherm op het gegeven punt.

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

2. drawLine

De functie drawLine is verantwoordelijk voor het tekenen van een lijn vanuit twee punten.

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

3. drawFastVLine

De functie drawFastVLine is verantwoordelijk voor het tekenen van een verticale lijn vanaf een punt en een hoogte.

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

4. drawFastHLin

De functie drawFastHLin is verantwoordelijk voor het tekenen van een horizontale lijn vanuit een punt en een breedte.

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

5. drawRect

De functie drawRect is verantwoordelijk voor het tekenen van een rechthoek op het scherm, langs een beginpunt, de hoogte en breedte ervan.

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

6. fillRect

De functie fillRect is hetzelfde als drawRect, maar de rechthoek wordt gevuld met de gegeven kleur.

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

7. drawRoundRect

De functie drawRoundRect is hetzelfde als drawRect, maar de rechthoek heeft afgeronde randen.

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

8. fillRoundRect

De functie fillRoundRect is hetzelfde als drawRoundRect, maar de rechthoek wordt gevuld met de gegeven kleur.

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

9. tekendriehoek

De drawTriangle-functie is verantwoordelijk voor het tekenen van een driehoek op het scherm, die het punt van de 3 hoekpunten passeert.

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

10. vuldriehoek

De functie fillTriangle is hetzelfde als drawTriangle, maar de driehoek wordt gevuld met de gegeven kleur.

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

11. tekenCirkel

De functie drawCircle is verantwoordelijk voor het tekenen van een cirkel vanuit een bronpunt en een straal.

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

12. vul cirkel

De fillCircle-functie is hetzelfde als drawCircle, maar de cirkel wordt gevuld met de gegeven kleur.

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

13. scherm vullen

De fillScreen-functie is verantwoordelijk voor het vullen van het scherm met een enkele kleur.

void fillScreen (uint16_t kleur);

14. setCursor

De functie setCursor is verantwoordelijk voor het positioneren van de cursor voor het schrijven naar een bepaald punt.

void setCursor (int16_t x, int16_t y);

15. tekstkleur instellen

De functie setTextColor is verantwoordelijk voor het toekennen van een kleur aan de te schrijven tekst. We hebben twee manieren om het te gebruiken:

void setTextColor (uint16_t c); // stelt de kleur van alleen schrijven invoid setTextColor (uint16_t c, uint16_t bg); // stel de schrijfkleur en achtergrondkleur in

16. tekstgrootte instellen

De functie setTextSize is verantwoordelijk voor het toewijzen van een grootte aan de tekst die zal worden geschreven.

void setTextSize (uint8_t s);

17. setTextWrap

De setTextWrap-functie is verantwoordelijk voor het doorbreken van de regel als deze de limiet van het scherm bereikt.

void setTextWrap (boolean w);

18. setRotatie

De setRotation-functie is verantwoordelijk voor het draaien van het scherm (liggend, staand).

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

Stap 5: Voorbeeld

We zullen een programma maken waarin we de meeste bronnen zullen gebruiken die het scherm ons biedt.

Laten we een paar strings in verschillende maten schrijven, drie geometrische figuren maken en de aanrakingsgebeurtenis erop opnemen, elke keer dat we een van de figuren aanraken, krijgen we de feedback van de figuurnaam er net onder.

Stap 6: Bibliotheken

Laten we eerst de bibliotheken definiëren die we zullen gebruiken.

#include //responsavel 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

Stap 7: Definieert

We zullen enkele macro's voor de pinnen definiëren, en ook de belangrijke waarden die we zullen gebruiken.

//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_TOUCH_X 120 #define_YEEDBACK_/MINTOvalUCH_YEEDBACK_ 10 #define MAXPRESSURE 1000

We gaan verder met de definitie van enkele macro's.

//Associa o nome das cores aos valores correspondentes#define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF //dados de criação do circuloradius const = int 30; const int circle_x = 240; const int circle_y = 125; //voor het manipuleren van gebeurtenissen op het gebied van TouchScreen ts = TouchScreen (XP, YP, XM, YM); //voor het bewerken van grafische afbeeldingen SWTFT tft;

Stap 8: Instellen

In de setup zullen we ons grafische besturingsobject initialiseren en de eerste configuraties maken.

void setup() { Serial.begin(9600); //reset of objeto da lib grafica tft.reset(); //initialize objeto controlador da lib graphic tft.begin(); vertraging (500); //rotaciona een tela para landscape tft.setRotation(1); //pinta a tela toda de preto tft.fillScreen(ZWART); //chama een função para iniciar nossas configurações initialSettings(); }

Stap 9: Loop

In de lus pikken we het punt op waarop we het scherm aanraken en kijken of de aanraking plaatsvond in een van de figuren.

void loop() {TSPoint touchPoint = ts.getPoint();//pega o touch (x, y, z=pressao) pinMode(XM, OUTPUT); pinMode (YP, UITGANG); //mapeia o ponto de touch para o (x, y) graphic // 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"); } //controleer geen triangulo else if(pointInsideTriangle(TSPoint(110, 150, 0), TSPoint(150, 100, 0), TSPoint(190, 150, 0), p)) {writeShape("Triangle"); } //controleer geen andere circulo if(pointInCircle(p)) {writeShape("Circle"); } } }

Stap 10: Controleer of we de cirkel aanraken

In deze stap behandelen we de scherminitialisatie en definiëren we de kleuren van de te tonen teksten.

/*Desenha na tela os elementos */ 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"); creëerRect(); createTriangle(); maakCirkel(); tft.setCursor(FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor(CYAAN); tft.setTextSize(TEXT_SIZE_L); tft.println("VORM: "); }

Stap 11: Functies voor het maken van geometrische vormen

We maken een rechthoek, een driehoek en een cirkel met de oorsprong die we bepalen.

//cria um retangulo com origem (x, y) = (10, 100)//breedte = 80 e hoogte = 50 void createRect() { tft.fillRect(10, 100, 80, 50, ROOD); tft.drawRect(10, 100, 80, 50, WIT); } //cria um triangulo com os hoekpunten: //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) en raio = 30 void createCircle() { tft.fillCircle(240, 125, 30, GREEN); tft.drawCircle(240, 125, 30, WIT); }

Stap 12: Controleer of we de rechthoek aanraken

Deze functie controleert of het punt binnen de rechthoek ligt.

//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) { retourneer waar; } } retourneer onwaar; }

Stap 13: Controleer of we de cirkel aanraken

Dit is hetzelfde als bij de cirkel.

//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 oa 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; } onwaar retourneren; }

Stap 14: Controleer of we de driehoek aanraken

Dezelfde controle van die van het punt vindt ook plaats binnen de driehoek.

// Bekijk de verificatie van de triangulo ABC// Bekijk de retorna TRUE senão retorna FALSE bool pointInsideTriangle(TSPoint a, TSPoint b, TSPoint c, TSPoint p){ float ABC = triangleArea(a, b, c); float ACP = driehoekArea(a, c, p); float ABP = driehoekGebied(a, b, p); float CPB = driehoekGebied(c, p, b); if(ABC == ACP+ABP+CPB){ retourneer waar; } onwaar retourneren; } // 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) * (door - ay))/2); }

Stap 15: Functie om de naam van het aangeraakte object af te drukken

Hier schrijven we op het scherm de naam van de geometrische figuur die wordt gebruikt.

// escreve na tela o nome da figura geometrisch que foi tocadavoid writeShape (string vorm) { 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: Bestanden

Download de bestanden:

INO

PDF