Arduino mit Touchscreen-Display - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:20

Möchten Sie personalisiertere Menüs und bessere Mensch-Maschine-Schnittstellen erstellen? Für solche Projekte können Sie ein Arduino und ein Touchscreen-Display verwenden. Klingt diese Idee verlockend? Dann schauen Sie sich heute das Video an, in dem ich Ihnen eine Baugruppe mit einem Mega Arduino und einem Touchscreen-Display zeige. Sie werden sehen, wie Sie die gewünschten Designs auf dem Bildschirm erstellen und wie Sie den Bildschirmbereich zum Berühren bestimmen und einen bestimmten Befehl aktivieren. Ich betone, dass ich mich aufgrund der Anzahl der Pins für den Arduino Mega entschieden habe.

Heute stelle ich Ihnen das Touchscreen-Display, seine grafischen Funktionen und das Erfassen des Berührungspunkts auf dem Bildschirm vor. Lassen Sie uns auch ein Beispiel erstellen, das alle Elemente enthält, z. B. Positionierung, Schreiben, Gestalten, Farben und Berührung.

Schritt 1: Arduino Mega 2560

Schritt 2: TFT-LCD-Schild 2,4"

Dieses Display, das wir in unserem Projekt verwenden, hat ein interessantes Feature: Es verfügt über eine SD-Karte. Das damit verbundene Schreiben und Lesen wird jedoch in einem anderen Video gezeigt, das ich demnächst produzieren werde. Das Ziel der heutigen Lektion besteht darin, sich speziell mit den Grafik- und Touchscreen-Funktionen dieses Displays zu befassen.

Eigenschaften:

Bildschirmgröße: 2,4 Zoll

MicroSD-Kartensteckplatz

Farb-LCD: 65K

Treiber: ILI9325

Auflösung: 240 x 320

Touchscreen: 4-Draht-resistiver Touchscreen

Schnittstelle: 8 Bit Daten, plus 4 Steuerleitungen

Betriebsspannung: 3,3-5V

Abmessungen: 71 x 52 x 7 mm

Schritt 3: Bibliotheken

Fügen Sie die Bibliotheken hinzu:

"Adafruit_GFX"

"SWTFT"

"Touchscreen"

Klicken Sie auf die Links und laden Sie die Bibliotheken herunter.

Entpacken Sie die Datei und fügen Sie sie in den Bibliotheksordner der Arduino IDE ein.

C: / Programmdateien (x86) / Arduino / Bibliotheken

Notiz

Bevor wir unser Programm starten, müssen wir uns mit etwas Wichtigem befassen: der TOUCH-Kalibrierung.

Verwenden Sie ein einfaches Programm, um die Berührungspunkte auf dem Display zu erhalten, und speichern Sie den Wert der Punkte (x, y) an jedem Ende (in der Abbildung unten gelb hervorgehoben). Diese Werte sind wichtig, um die Berührung den grafischen Punkten auf dem Bildschirm zuzuordnen.

#include //Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ ist auf Analog1 #define XM A2 // X- ist auf Analog2 #define YM 7 // Y- ist auf Digital7 #define XP 6 // X+ ist auf Digital6 //objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen(XP, YP, XM, YM); Void setup () { Serial.begin (9600); aufrechtzuerhalten. Void Schleife () { 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); Verzögerung (1000); }

Schritt 4: Funktionen

Werfen wir nun einen Blick auf einige grafische Funktionen, die uns Bibliotheken bieten können.

1. Pixel zeichnen

Die drawPixel-Funktion ist dafür verantwortlich, einen einzelnen Punkt auf dem Bildschirm an der angegebenen Stelle zu malen.

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

2. Linie zeichnen

Die Funktion drawLine ist für das Zeichnen einer Linie aus zwei Punkten verantwortlich.

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

3. drawFastVLine

Die Funktion drawFastVLine ist für das Zeichnen einer vertikalen Linie von einem Punkt und einer Höhe verantwortlich.

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

4. drawFastHLine

Die Funktion drawFastHLine ist dafür verantwortlich, eine horizontale Linie aus einem Punkt und einer Breite zu zeichnen.

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

5. DrawRect

Die drawRect-Funktion ist dafür verantwortlich, ein Rechteck auf dem Bildschirm zu zeichnen, das einen Ursprungspunkt, seine Höhe und Breite passiert.

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

6. fillRect

Die Funktion fillRect ist dieselbe wie drawRect, aber das Rechteck wird mit der angegebenen Farbe gefüllt.

void fillRect (int16_t x, int16_t y, int16_t w, int16_th, uint16_t Farbe);

7. DrawRoundRect

Die drawRoundRect-Funktion ist die gleiche wie drawRect, aber das Rechteck hat abgerundete Kanten.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_th, int16_t radius, uint16_t color);

8. FillRoundRect

Die Funktion fillRoundRect ist dieselbe wie drawRoundRect, aber das Rechteck wird mit der angegebenen Farbe gefüllt.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_th, int16_t Radius, uint16_t Farbe);

9. DrawDreieck

Die drawTriangle-Funktion ist dafür verantwortlich, ein Dreieck auf dem Bildschirm zu zeichnen, das den Punkt der 3 Eckpunkte passiert.

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

10. fillTriangle

Die Funktion fillTriangle ist dieselbe wie drawTriangle, aber das Dreieck wird mit der angegebenen Farbe gefüllt.

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

11. Kreis zeichnen

Die Funktion drawCircle ist dafür verantwortlich, einen Kreis aus einem Quellpunkt und einem Radius zu zeichnen.

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

12. fillCircle

Die Funktion fillCircle ist dieselbe wie drawCircle, aber der Kreis wird mit der angegebenen Farbe gefüllt.

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

13. fillScreen

Die Funktion fillScreen ist dafür verantwortlich, den Bildschirm mit einer einzigen Farbe zu füllen.

void fillScreen (uint16_t color);

14. setCursor

Die Funktion setCursor ist für die Positionierung des Cursors zum Schreiben an einen bestimmten Punkt verantwortlich.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Die Funktion setTextColor ist dafür zuständig, dem zu schreibenden Text eine Farbe zuzuweisen. Wir haben zwei Möglichkeiten, es zu verwenden:

void setTextColor (uint16_tc); // setzt die Schriftfarbe onlyvoid setTextColor (uint16_t c, uint16_t bg); // Schreibfarbe und Hintergrundfarbe einstellen

16. setTextSize

Die Funktion setTextSize ist dafür verantwortlich, dem zu schreibenden Text eine Größe zuzuweisen.

void setTextSize (uint8_t s);

17. setTextWrap

Die Funktion setTextWrap ist dafür verantwortlich, die Zeile zu umbrechen, wenn sie die Bildschirmgrenze erreicht.

void setTextWrap (boolesches w);

18. SetRotation

Die Funktion setRotation ist für das Drehen des Bildschirms (Querformat, Hochformat) zuständig.

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

Schritt 5: Beispiel

Wir werden ein Programm erstellen, in dem wir die meisten Ressourcen verwenden, die uns das Display zur Verfügung stellt.

Schreiben wir einige Zeichenfolgen in verschiedenen Größen, erstellen Sie drei geometrische Figuren und nehmen Sie das Berührungsereignis darauf auf. Jedes Mal, wenn wir eine der Figuren berühren, haben wir das Feedback des Figurennamens direkt darunter.

Schritt 6: Bibliotheken

Zuerst definieren wir die Bibliotheken, die wir verwenden werden.

#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" //kalkulatorische Potenzien

Schritt 7: Definiert

Wir werden einige Makros für die Pins definieren und auch die wichtigen Werte, die wir verwenden werden.

//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_TOUCH_X 120 #define_Y 200 //define drücke FEEDBACK_Define PRESSE für FEEDBACK_definepress 10 #define HÖCHSTDRUCK 1000

Wir fahren mit der Definition einiger Makros fort.

//Associa o nome das cores aos valores correctentes#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 = 30 int circle_radius const int circle_x = 240; const int circle_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;

Schritt 8: Einrichtung

Im Setup werden wir unser grafisches Kontrollobjekt initialisieren und die ersten Konfigurationen vornehmen.

Void setup () { Serial.begin (9600); //reseta oder objeto da lib grafica tft.reset(); //inicializa objeto controlador da lib grafica tft.begin(); Verzögerung (500); //rotaciona a tela para landscape tft.setRotation(1); // Pinta a tela toda de preto tft.fillScreen (BLACK); //einen Função für iniciar nossas configurações initialSettings(); }

Schritt 9: Schleife

In der Schleife nehmen wir den Punkt auf, an dem wir den Bildschirm berühren, und sehen, ob die Berührung in einer der Figuren aufgetreten ist.

Void loop () { TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, OUTPUT); pinMode (YP, AUSGANG); //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 foi suficiente if (touchPoint.z > MINPRESSURE && touchPoint.z < MAXPRESSURE) { //Verifica se tocou no retangulo if(pointInRect(p)) { writeShape("Rect"); aufrechtzuerhalten.; aufrechtzuerhalten. // Verifica se tocou no circulo else if (pointInCircle (p)) { writeShape ("Circle"); } } }

Schritt 10: Überprüfen Sie, ob wir den Kreis berühren

In diesem Schritt beschäftigen wir uns mit der Bildschirminitialisierung und definieren die Farben der anzuzeigenden Texte.

/*Desenha na tela os elementos */ void initialSettings() { tft.setTextColor(WHITE); tft.setTextSize(TEXT_SIZE_S); tft.println("ACESSE"); tft.setTextColor(GELB); tft.setTextSize(TEXT_SIZE_M); tft.println("MEU-BLOG"); tft.setTextColor(GRÜN); 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("FORM: "); }

Schritt 11: Funktionen zum Erstellen von geometrischen Formen

Wir erstellen ein Rechteck, ein Dreieck und einen Kreis mit den von uns festgelegten Ursprüngen.

// cria um retangulo com origem (x, y) = (10, 100) // Breite = 80 e Höhe = 50 void createRect () { tft.fillRect (10, 100, 80, 50, RED); tft.drawRect(10, 100, 80, 50, WEISS); } //cria um triangulo com os vertices: //A = (110, 150); B = (150, 100); C = (190, 150) Void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, GELB); tft.drawTriangle(110, 150, 150, 100, 190, 150, WEISS); aufrechtzuerhalten. aufrechtzuerhalten. tft.drawCircle(240, 125, 30, WEISS); }

Schritt 12: Überprüfen Sie, ob wir das Rechteck berühren

Diese Funktion prüft, ob der Punkt innerhalb des Rechtecks liegt.

//Função que verifica se o ponto está dentro do retângulobool pointInRect(TSPoint p) { //max/min X retangulo if(px >= 10 && px <= 90) { //max/min Y retangulo if(py = 100) { true zurückgeben; } } falsch zurückgeben; }

Schritt 13: Überprüfen Sie, ob wir den Kreis berühren

Dies ist das gleiche wie beim Kreis.

//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 für 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(distanz <= circle_radius) { return true; } falsch zurückgeben; }

Schritt 14: Überprüfen Sie, ob wir das Dreieck berühren

Die gleiche Prüfung des Punktes findet auch innerhalb des Dreiecks statt.

// 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 = DreieckArea(a, c, p); float ABP = DreieckArea(a, b, p); Float CPB = DreieckArea(c, p, b); if(ABC == ACP+ABP+CPB){ true zurückgeben; } falsch zurückgeben; } // 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) * (von - ay))/2); }

Schritt 15: Funktion zum Drucken des Namens des berührten Objekts

Hier schreiben wir auf dem Bildschirm den Namen der verwendeten geometrischen Figur.

// escreve na tela oder nome da figura geometrica 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(WEISS); tft.println (Form); }

Schritt 16: Dateien

Laden Sie die Dateien herunter:

INO

PDF