Arduino z ekranem dotykowym: 16 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:31

Czy chciałbyś stworzyć bardziej spersonalizowane menu i lepsze interfejsy człowiek/maszyna? Do takich projektów można użyć Arduino i wyświetlacza dotykowego. Czy ten pomysł brzmi zachęcająco? Jeśli tak, obejrzyj dzisiaj film, na którym pokażę Ci montaż z Mega Arduino i wyświetlaczem dotykowym. Zobaczysz, jak tworzyć projekty, które chcesz na ekranie, a także jak określić obszar ekranu do dotknięcia i aktywować określone polecenie. Podkreślam, że wybrałem Arduino Mega ze względu na ilość pinów.

Dlatego dzisiaj przedstawię ekran dotykowy, jego funkcje graficzne oraz sposób uchwycenia punktu dotykowego na ekranie. Stwórzmy również przykład zawierający wszystkie elementy, takie jak pozycjonowanie, pisanie, projektowanie kształtów, kolorów i dotyku.

Krok 1: Arduino Mega 2560

Krok 2: Ekran TFT LCD 2,4"

Ten wyświetlacz, którego używamy w naszym projekcie, ma ciekawą funkcję: posiada kartę SD. Jednak pisanie i czytanie związane z tym zostanie pokazane w innym filmie, który wkrótce wyprodukuję. Celem dzisiejszej lekcji jest szczegółowe omówienie funkcji graficznych i ekranu dotykowego tego wyświetlacza.

Charakterystyka:

Wymiar ekranu: 2,4 cala

Gniazdo kart microSD

Kolorowy wyświetlacz LCD: 65K

Sterownik: ILI9325

Rozdzielczość: 240 x 320

Ekran dotykowy: 4-przewodowy rezystancyjny ekran dotykowy

Interfejs: 8 bitów danych plus 4 linie sterujące

Napięcie robocze: 3,3-5 V

Wymiary: 71x52x7mm

Krok 3: Biblioteki

Dodaj biblioteki:

„Adaowoc_GFX”

"SWTFT"

"Ekran dotykowy"

Kliknij na linki i pobierz biblioteki.

Rozpakuj plik i wklej go do folderu bibliotek Arduino IDE.

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

Notatka

Zanim zaczniemy nasz program, musimy zająć się czymś ważnym: kalibracją TOUCH.

Używając prostego programu, aby uzyskać punkty dotykowe na wyświetlaczu, zapisz wartości punktów (x, y) na każdym końcu (podświetlone na żółto na poniższym rysunku). Wartości te są ważne dla odwzorowania dotyku na punkty graficzne na ekranie.

#include //Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ jest na Analog1 #define XM A2 // X- jest na Analog2 #define YM 7 // Y- jest na Digital7 #define XP 6 // X+ jest na Digital6 //objeto para manipulacao dos eventos de toque on 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("T: "); Serial.println(touchPoint.y); opóźnienie (1000); }

Krok 4: Funkcje

Przyjrzyjmy się teraz niektórym funkcjom graficznym, które mogą nam zaoferować biblioteki.

1. DrawPixel

Funkcja drawPixel odpowiada za namalowanie pojedynczego punktu na ekranie w danym punkcie.

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

2. narysuj linię

Funkcja drawLine odpowiada za narysowanie linii z dwóch punktów.

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

3. DrawFastVLine

Funkcja drawFastVLine odpowiada za narysowanie pionowej linii od punktu i wysokości.

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

4. DrawFastHLine

Funkcja drawFastHLine odpowiada za narysowanie poziomej linii od punktu i szerokości.

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

5. DrawRect

Funkcja drawRect odpowiada za narysowanie prostokąta na ekranie z podaniem punktu początkowego, jego wysokości i szerokości.

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

6. wypełnićRect

Funkcja fillRect jest taka sama jak drawRect, ale prostokąt zostanie wypełniony podanym kolorem.

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

7. DrawRoundRect

Funkcja drawRoundRect jest taka sama jak drawRect, ale prostokąt będzie miał zaokrąglone krawędzie.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t promień, uint16_t kolor);

8. WypełnijRoundRect

Funkcja fillRoundRect jest taka sama jak drawRoundRect, ale prostokąt zostanie wypełniony podanym kolorem.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);

9. narysuj trójkąt

Funkcja drawTriangle odpowiada za narysowanie trójkąta na ekranie, przechodzącego przez punkt trzech wierzchołków.

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

10. Wypełnij trójkąt

Funkcja fillTriangle jest taka sama jak drawTriangle, ale trójkąt zostanie wypełniony podanym kolorem.

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

11. narysujOkrąg

Funkcja drawCircle odpowiada za narysowanie okręgu z punktu źródłowego i promienia.

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

12. Wypełnij Okrąg

Funkcja fillCircle jest taka sama jak drawCircle, ale okrąg zostanie wypełniony podanym kolorem.

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

13. Wypełnij ekran

Funkcja fillScreen odpowiada za wypełnienie ekranu jednym kolorem.

void fillScreen (kolor uint16_t);

14. ustaw Kursor

Funkcja setCursor odpowiada za ustawienie kursora do zapisu do danego punktu.

void setCursor (int16_t x, int16_t y);

15. ustaw kolor tekstu

Funkcja setTextColor odpowiada za przypisanie koloru do pisanego tekstu. Mamy na to dwa sposoby:

void setTextColor (uint16_t c); // ustawia kolor pisania tylkovoid setTextColor (uint16_t c, uint16_t bg); // ustaw kolor pisania i kolor tła

16. ustawRozmiarTekstu

Funkcja setTextSize odpowiada za przypisanie rozmiaru do tekstu, który zostanie napisany.

void setTextSize (uint8_t s);

17. ustaw TextWrap

Funkcja setTextWrap odpowiada za złamanie linii, jeśli osiągnie ona granicę ekranu.

void setTextWrap (boolean w);

18. ustaw obrót

Funkcja setRotation odpowiada za obracanie ekranu (krajobraz, portret).

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

Krok 5: Przykład

Stworzymy program, w którym wykorzystamy większość zasobów, jakie udostępnia nam wyświetlacz.

Napiszmy kilka ciągów w różnych rozmiarach, utwórzmy trzy figury geometryczne i wybierzmy na nich zdarzenie dotyku, za każdym razem, gdy dotkniemy jednej z figur, otrzymamy informację zwrotną dotyczącą nazwy figury tuż pod nimi.

Krok 6: Biblioteki

Najpierw zdefiniujmy biblioteki, z których będziemy korzystać.

#include //responsável pela parte grafica

#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

Krok 7: Definiuje

Zdefiniujemy kilka makr dla pinów, a także ważne wartości, których będziemy używać.

//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_XEd ? 10 #zdefiniuj MAKS. CIŚNIENIE 1000

Kontynuujemy definicję niektórych makr.

//Associa o nome das cores aos valores korespondentes#define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF //dados de criaçãost = w circulo; const int circle_x = 240; const int okrąg_y = 125; //objekt para manipulacji zdarzeniami na ekranie dotykowym ts = TouchScreen(XP, YP, XM, YM); //objekt do manipulacji częściami graficznymi SWTFT tft;

Krok 8: Konfiguracja

W konfiguracji zainicjujemy nasz graficzny obiekt kontrolny i dokonamy pierwszych konfiguracji.

void setup() { Serial.begin(9600); //resetuj obiekt z biblioteki graficznej tft.reset(); //zainicjuj kontrolę obiektu tft.begin(); opóźnienie (500); //obróć tekst na temat krajobrazu tft.setRotation(1); //pinta a tela toda de preto tft.fillScreen(BLACK); //chama a função para iniciar nossas configurações initialSettings(); }

Krok 9: Pętla

W pętli wybierzemy punkt, w którym dotykamy ekranu i zobaczymy, czy dotyk wystąpił na jednej z figur.

void loop() { TSPoint touchPoint = ts.getPoint();//pega o touch (x, y, z=pressao) pinMode(XM, OUTPUT); pinMode(YP, WYJŚCIE); //mapeia o ponto de touch para o (x, y) grafico // o fato de termos rotacionado a tela para landscape implica no X receber o mapemento de Y TSPoint p; p.x = mapa(touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = mapa(touchPoint.x, TS_MINX, TS_MAXX, 240, 0); //Zweryfikuj, że nie masz odpowiedniego ustawienia if (touchPoint.z > MINPRESSURE && touchPoint.z < MAXPRESSURE) { //Sprawdź, czy nie ma retangulo if(pointInRect(p)) { writeShape("Rect"); } //Sprawdź, czy nie ma trójkąta w innym przypadku if(pointInsideTriangle(TSPoint(110, 150, 0), TSPoint(150, 100, 0), TSPoint(190, 150, 0), p)) { writeShape("Triangle"); } //sprawdź, czy nie ma żadnego circulo else if(pointInCircle(p)) { writeShape("Okrąg"); } } }

Krok 10: Sprawdź, czy dotykamy kręgu

W tym kroku zajmujemy się inicjalizacją ekranu i określamy kolory wyświetlanych tekstów.

/*Wyłącz informacje o elementach */ void InitialSettings() { tft.setTextColor(WHITE); tft.setTextSize(TEXT_SIZE_S); tft.println("DOSTĘP"); tft.setTextColor(ŻÓŁTY); tft.setTextSize(TEXT_SIZE_M); tft.println("MEU BLOG"); tft.setTextColor(ZIELONY); tft.setTextSize(TEXT_SIZE_L); tft.println("FERNANDOK. COM"); utwórzRect(); utwórzTrójkąt(); utwórzOkrąg(); tft.setCursor(FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor(CYAN); tft.setTextSize(TEXT_SIZE_L); tft.println("KSZTAŁT: "); }

Krok 11: Funkcje tworzenia kształtów geometrycznych

Tworzymy prostokąt, trójkąt i okrąg o określonych przez nas początkach.

//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, BIAŁY); } //cria um triangulo z wierzchołkami: //A = (110, 150); B = (150, 100); C = (190, 150) void utwórzTriangle() { tft.fillTriangle(110, 150, 150, 100, 190, 150, ŻÓŁTY); tft.drawTriangle(110, 150, 150, 100, 190, 150, BIAŁY); } //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, BIAŁY); }

Krok 12: Sprawdź, czy dotykamy prostokąta

Ta funkcja sprawdza, czy punkt znajduje się wewnątrz prostokąta.

//Função que verifica se o ponto está dentro do retangulobool pointInRect(TSPoint p) { //max/min X do retangulo if(px >= 10 && px <= 90) { //max/min Y do retangulo if(py = 100) { zwróć prawdę; } } return false; }

Krok 13: Sprawdź, czy dotykamy kręgu

To tak samo, jak w przypadku koła.

//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(odległość <= promień_koła) { return true; } zwróć fałsz; }

Krok 14: Sprawdź, czy dotykamy trójkąta

Ta sama kontrola punktu występuje również w trójkącie.

// 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 = trójkątArea(a, c, p); float ABP = trójkątArea(a, b, p); float CPB = trójkątArea(c, p, b); if(ABC == ACP+ABP+CPB){ zwróć prawdę; } zwróć fałsz; } // 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) * (przez - ay))/2); }

Krok 15: Funkcja drukowania nazwy dotykanego obiektu

Tutaj piszemy na ekranie nazwę używanej figury geometrycznej.

//odnajdź nazwę figury geometrycznej w celu jej wykonania writeShape(kształt ciągu) { 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(BIAŁY); tft.println(kształt); }

Krok 16: Pliki

Pobierz pliki:

JA NIE

PDF