Arduino s dotykovým displejem: 16 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:23

Chcete vytvořit přizpůsobenější nabídky a lepší rozhraní člověk/stroj? Pro takové projekty můžete použít Arduino a dotykový displej. Zní tato myšlenka lákavě? Pokud ano, podívejte se dnes na video, kde vám ukážu sestavu s Mega Arduino a dotykovým displejem. Uvidíte, jak na obrazovce vytvořit návrhy, které chcete, a také jak určit oblast obrazovky, které se dotknete, a aktivovat konkrétní příkaz. Zdůrazňuji, že jsem se rozhodl použít Arduino Mega kvůli jeho množství pinů.

Dnes vám tedy představím dotykový displej, jeho grafické funkce a způsob uchopení dotykového bodu na obrazovce. Pojďme také vytvořit příklad obsahující všechny prvky, jako je umístění, psaní, navrhování tvarů, barev a dotyků.

Krok 1: Arduino Mega 2560

Krok 2: TFT LCD štít 2,4"

Tento displej, který používáme v našem projektu, má zajímavou funkci: má SD kartu. Zapisování a čtení, které s tím souvisí, se však ukáže v dalším videu, které brzy vyrobím. Cílem dnešní lekce je konkrétně se zabývat funkcemi grafiky a dotykové obrazovky tohoto displeje.

Charakteristika:

Rozměr obrazovky: 2,4 palce

Slot pro kartu microSD

Barevný LCD: 65 tis

Ovladač: ILI9325

Rozlišení: 240 x 320

Dotyková obrazovka: 4vodičová odporová dotyková obrazovka

Rozhraní: 8bitová data plus 4 řídicí řádky

Provozní napětí: 3,3-5V

Rozměry: 71 x 52 x 7 mm

Krok 3: Knihovny

Přidejte knihovny:

"Adafruit_GFX"

"SWTFT"

"Dotyková obrazovka"

Klikněte na odkazy a stáhněte si knihovny.

Rozbalte soubor a vložte jej do složky knihoven Arduino IDE.

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

Poznámka

Než spustíme náš program, musíme řešit něco důležitého: kalibraci TOUCH.

Pomocí jednoduchého programu pro získání dotykových bodů na displeji uložte hodnotu bodů (x, y) na každý konec (na obrázku níže zvýrazněno žlutě). Tyto hodnoty jsou důležité pro mapování dotyku na grafické body na obrazovce.

#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+ je na Digital6 // objeto para manipulacao dos eventos de toque on tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); neplatné nastavení () {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); zpoždění (1000); }

Krok 4: Funkce

Pojďme se nyní podívat na některé grafické funkce, které nám knihovny mohou nabídnout.

1. drawPixel

Funkce drawPixel je zodpovědná za malování jednoho bodu na obrazovku v daném bodě.

neplatné drawPixel (int16_t x, int16_t a, uint16_t barva);

2. drawLine

Funkce drawLine je zodpovědná za kreslení čáry ze dvou bodů.

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

3. drawFastVLine

Funkce drawFastVLine je zodpovědná za kreslení svislé čáry z bodu a výšky.

neplatné drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t barva);

4. drawFastHLine

Funkce drawFastHLine je zodpovědná za kreslení vodorovné čáry z bodu a šířky.

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

5. drawRect

Funkce drawRect je zodpovědná za nakreslení obdélníku na obrazovku, předání bodu původu, jeho výšky a šířky.

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

6. fillRect

Funkce fillRect je stejná jako drawRect, ale obdélník bude vyplněn danou barvou.

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

7. drawRoundRect

Funkce drawRoundRect je stejná jako drawRect, ale obdélník bude mít zaoblené hrany.

neplatné drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t poloměr, uint16_t barva);

8. fillRoundRect

Funkce fillRoundRect je stejná jako drawRoundRect, ale obdélník bude vyplněn danou barvou.

neplatné fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t barva);

9. drawTriangle

Funkce drawTriangle je zodpovědná za nakreslení trojúhelníku na obrazovku, který projde bodem 3 vrcholů.

neplatné drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t barva);

10. fillTriangle

Funkce fillTriangle je stejná jako drawTriangle, ale trojúhelník bude vyplněn danou barvou.

neplatné fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t barva);

11. drawCircle

Funkce drawCircle je zodpovědná za kreslení kruhu ze zdrojového bodu a poloměru.

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

12. fillCircle

Funkce fillCircle je stejná jako drawCircle, ale kruh bude vyplněn danou barvou.

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

13. fillScreen

Funkce fillScreen je zodpovědná za vyplnění obrazovky jedinou barvou.

void fillScreen (barva uint16_t);

14. setCursor

Funkce setCursor je zodpovědná za umístění kurzoru pro zápis do daného bodu.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Funkce setTextColor je zodpovědná za přiřazení barvy textu, který má být napsán. Máme dva způsoby použití:

neplatné setTextColor (uint16_t c); // nastaví pouze barvu psaní setTextColor (uint16_t c, uint16_t bg); // nastavení barvy psaní a barvy pozadí

16. setTextSize

Funkce setTextSize je zodpovědná za přiřazení velikosti textu, který bude zapsán.

neplatné setTextSize (uint8_t s);

17. setTextWrap

Funkce setTextWrap je zodpovědná za přerušení řádku, pokud dosáhne limitu obrazovky.

void setTextWrap (boolean w);

18. setRotation

Otočení obrazovky (na šířku, na výšku) má na starosti funkce setRotation.

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

Krok 5: Příklad

Vytvoříme program, ve kterém využijeme většinu zdrojů, které nám displej poskytuje.

Napíšeme několik řetězců v různých velikostech, vytvoříme tři geometrické obrazce a zachytíme na nich dotykovou událost, pokaždé, když se dotkneme jedné z figur, budeme mít zpětnou vazbu názvu figury hned pod nimi.

Krok 6: Knihovny

Nejprve definujme knihovny, které budeme používat.

#include // responzavel pela parte gráfica

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

Definujeme některá makra pro piny a také důležité hodnoty, které použijeme.

// Dotkněte se více portů #definujte 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 //decine dos textos de feedback #define 10 #definujte MAXPRESSURE 1000

Pokračujeme definicí některých maker.

// Sdružení o nome das cores aos valores korespondenti #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criação dolo const int circle_x = 240; const int circle_y = 125; // objeto para manipulacao dos eventos de toque to tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

Krok 8: Nastavení

V nastavení inicializujeme náš grafický ovládací objekt a provedeme první konfigurace.

neplatné nastavení () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializace objeto ovládání da lib grafica tft.begin (); zpoždění (500); // rotaciona a tela para landscape tft.setRotation (1); // pinta a tela toda de preto tft.fillScreen (ČERNÁ); // chama a função para initiar nossas configurações initialSettings (); }

Krok 9: Smyčka

Ve smyčce vezmeme bod, ve kterém se dotkneme obrazovky, a uvidíme, zda k dotyku došlo na jedné z postav.

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 = mapa (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = mapa (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifica se a pressao no to fof 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 Circle else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Krok 10: Zkontrolujte, zda se dotkneme kruhu

V tomto kroku se zabýváme inicializací obrazovky a definujeme barvy zobrazovaných textů.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("PŘÍSTUP"); tft.setTextColor (ŽLUTÁ); tft.setTextSize (TEXT_SIZE_M); tft.println („BLOG MEU“); tft.setTextColor (ZELENÁ); 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 ("TVAR:"); }

Krok 11: Funkce vytváření geometrických tvarů

Vytvoříme obdélník, trojúhelník a kruh s původem, který určíme.

// 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, BÍLÁ); } // cria um triangulo com os vertices: // A = (110, 150); B = (150, 100); C = (190, 150) neplatné createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, ŽLUTÁ); tft.drawTriangle (110, 150, 150, 100, 190, 150, WHITE); } // cria um Circle com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, GREEN); tft.drawCircle (240, 125, 30, BÍLÁ); }

Krok 12: Zkontrolujte, zda se dotkneme obdélníku

Tato funkce kontroluje, zda je bod uvnitř obdélníku.

// Funkce se ověřují, pokud jde o to, aby se dentro do retangulabool 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; }

Krok 13: Zkontrolujte, zda se dotkneme kruhu

To je stejné jako u kruhu.

// distancia entre pontos D = raiz ((xb-xa)^2 + (yb-ya)^2) // vefifica se o ponto está dentro do circuitlo // se a distancia do ponto pra origem do circle 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 (distance <= circle_radius) {return true; } return false; }

Krok 14: Zkontrolujte, zda se dotkneme trojúhelníku

Stejná kontrola bodu se vyskytuje také v trojúhelníku.

// Funkce se ověřují, že se jedná o trojúhelník ABC // Zjišťování dentální retorty 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; } return 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 - sekera) * (od - ay))/2); }

Krok 15: Funkce pro vytištění názvu dotykového objektu

Zde napíšeme na obrazovku název použitého geometrického útvaru.

// 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 (BÍLÁ); tft.println (tvar); }

Krok 16: Soubory

Stáhnout soubory:

INO

PDF