آردوینو با صفحه نمایش لمسی: 16 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:57

آیا می خواهید منوهای شخصی سازی شده و رابط های انسانی/ماشین بهتری ایجاد کنید؟ برای چنین پروژه هایی ، می توانید از Arduino و صفحه لمسی استفاده کنید. آیا این ایده جذاب است؟ اگر چنین است ، امروز ویدیو را بررسی کنید ، جایی که من مجموعه ای با مگا آردوینو و صفحه نمایش لمسی را به شما نشان خواهم داد. نحوه ایجاد طرح های مورد نظر روی صفحه و همچنین نحوه تعیین ناحیه صفحه برای لمس و فعال کردن یک فرمان خاص را خواهید دید. تاکید می کنم که من از آردوینو مگا به دلیل میزان پین های آن استفاده کردم.

بنابراین امروز ، من شما را با صفحه نمایش لمسی ، عملکردهای گرافیکی آن و نحوه گرفتن نقطه لمسی روی صفحه آشنا می کنم. بیایید یک مثال شامل همه عناصر مانند موقعیت ، نوشتن ، طراحی اشکال ، رنگها و لمس ایجاد کنیم.

مرحله 1: Arduino Mega 2560

مرحله 2: TFT LCD Shield 2.4 اینچ

این صفحه نمایش که ما در پروژه خود استفاده می کنیم دارای ویژگی جالبی است: دارای کارت SD است. با این حال ، نوشتن و خواندن در این مورد در ویدئوی دیگری نشان داده می شود ، که به زودی تهیه خواهم کرد. هدف از درس امروز این است که به طور خاص به ویژگی های گرافیکی و صفحه لمسی این صفحه بپردازیم.

مشخصات:

ابعاد صفحه: 2.4 اینچ

شکاف کارت MicroSD

LCD رنگی: 65 هزار

درایور: ILI9325

وضوح تصویر: 240x320

صفحه لمسی: صفحه لمسی مقاومتی 4 سیمه

رابط: داده های 8 بیتی ، به علاوه 4 خط کنترل

ولتاژ کار: 3.3-5V

ابعاد: 71 در 52 در 7 میلی متر

مرحله 3: کتابخانه ها

کتابخانه ها را اضافه کنید:

"Adafruit_GFX"

"SWTFT"

"صفحه لمسی"

روی پیوندها کلیک کنید و کتابخانه ها را بارگیری کنید.

فایل را از حالت فشرده خارج کرده و در پوشه کتابخانه های Arduino IDE قرار دهید.

C: / پرونده های برنامه (x86) / Arduino / کتابخانه ها

توجه داشته باشید

قبل از شروع برنامه ، باید به نکته مهمی بپردازیم: کالیبراسیون TOUCH.

با استفاده از یک برنامه ساده برای به دست آوردن نقاط لمسی روی صفحه ، مقدار نقاط (x ، y) را در هر انتهای آن ذخیره کنید (در شکل زیر با رنگ زرد مشخص شده است). این مقادیر برای نگاشت لمس به نقاط گرافیکی روی صفحه مهم هستند.

#شامل // Portas de leitura das coordenadas do touchvoid #تعریف YP A1 // Y+ در Analog1 #define XM A2 // X- در Analog2 #define YM 7 // Y- در Digital7 #define XP 6 // X+ است بر روی Digital6 // قرار دارد برای انجام کارهای مختلف در صفحه نمایش لمسی ts = صفحه لمسی (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) ؛ تاخیر (1000) ؛ }

مرحله 4: توابع

اکنون اجازه دهید نگاهی به برخی از توابع گرافیکی که کتابخانه ها می توانند به ما ارائه دهند ، بیاندازیم.

1. drawPixel

عملکرد drawPixel وظیفه نقاشی یک نقطه واحد بر روی صفحه نمایش در نقطه داده شده را بر عهده دارد.

void drawPixel (رنگ int16_t x ، int16_t و ، رنگ uint16_t) ؛

2. drawLine

تابع drawLine وظیفه ترسیم خط از دو نقطه را بر عهده دارد.

void drawLine (int16_t x0 ، int16_t y0 ، int16_t x1 ، int16_t y1 ، رنگ uint16_t) ؛

3. drawFastVLine

عملکرد drawFastVLine وظیفه ترسیم یک خط عمودی از یک نقطه و یک ارتفاع را بر عهده دارد.

void drawFastVLine (int16_t x ، int16_t y ، int16_t h ، رنگ uint16_t) ؛

4. drawFastHLine

تابع drawFastHLine وظیفه ترسیم خط افقی از نقطه و عرض را بر عهده دارد.

void drawFastHLine (int16_t x ، int16_t y ، int16_t w ، uint16_t رنگ) ؛

5. drawRect

عملکرد drawRect وظیفه ترسیم مستطیل روی صفحه ، عبور از نقطه مبدا ، ارتفاع و عرض آن را بر عهده دارد.

void drawRect (int16_t x ، int16_t y ، int16_t w ، int16_t h ، uint16_t رنگ) ؛

6. fillRect

تابع fillRect همان drawRect است ، اما مستطیل با رنگ داده شده پر می شود.

void fillRect (int16_t x ، int16_t y ، int16_t w ، int16_t h ، رنگ uint16_t) ؛

7. drawRoundRect

تابع drawRoundRect همان drawRect است ، اما مستطیل دارای لبه های گرد است.

void drawRoundRect (int16_t x0 ، int16_t y0 ، int16_t w ، int16_t h ، شعاع int16_t ، رنگ uint16_t) ؛

8. fillRoundRect

تابع fillRoundRect همان drawRoundRect است ، اما مستطیل با رنگ داده شده پر می شود.

void fillRoundRect (int16_t x0 ، int16_t y0 ، int16_t w ، int16_t h ، شعاع int16_t ، رنگ uint16_t) ؛

9. drawTriangle

تابع drawTriangle وظیفه ترسیم مثلث بر روی صفحه را بر عهده دارد و از نقطه 3 راس عبور می کند.

void drawTriangle (int16_t x0 ، int16_t y0 ، int16_t x1 ، int16_t y1 ، int16_t x2 ، int16_t y2 ، رنگ uint16_t) ؛

10. fillTriangle

تابع fillTriangle همان drawTriangle است ، اما مثلث با رنگ داده شده پر می شود.

void fillTriangle (int16_t x0 ، int16_t y0 ، int16_t x1 ، int16_t y1 ، int16_t x2 ، int16_t y2 ، رنگ uint16_t) ؛

11. drawCircle

تابع drawCircle وظیفه ترسیم یک دایره از نقطه منبع و شعاع را بر عهده دارد.

void drawCircle (int16_t x0 ، int16_t y0 ، int16_t r ، رنگ uint16_t) ؛

12. fillCircle

عملکرد fillCircle همان drawCircle است ، اما دایره با رنگ داده شده پر می شود.

void fillCircle (int16_t x0 ، int16_t y0 ، int16_t r ، رنگ uint16_t) ؛

13. fillScreen

عملکرد FillScreen وظیفه پر کردن صفحه را با یک رنگ بر عهده دارد.

void fillScreen (رنگ uint16_t) ؛

14. setCursor

تابع setCursor مسئول قرار دادن مکان نما برای نوشتن در یک نقطه معین است.

void setCursor (int16_t x ، int16_t y) ؛

15. setTextColor

تابع setTextColor وظیفه تعیین رنگ به متن موردنظر را بر عهده دارد. ما دو روش برای استفاده از آن داریم:

void setTextColor (uint16_t c) ؛ // رنگ نوشتن را تنها تنظیم می کندVoid setTextColor (uint16_t c، uint16_t bg)؛ // رنگ نوشتار و رنگ پس زمینه را تنظیم کنید

16. setTextSize

تابع setTextSize وظیفه تعیین اندازه متن را دارد.

void setTextSize (uint8_t s) ؛

17. setTextWrap

تابع setTextWrap مسئول شکستن خط در صورت رسیدن به محدوده صفحه است.

void setTextWrap (w boolean w) ؛

18. setRotation

عملکرد setRotation وظیفه چرخش صفحه (افقی ، عمودی) را بر عهده دارد.

void setRotation (uint8_t r)؛ // 0 (استاندارد) ، 1 ، 2 ، 3

مرحله 5: مثال

ما برنامه ای ایجاد می کنیم که در آن از بیشتر منابعی که صفحه نمایش در اختیار ما قرار می دهد استفاده می کنیم.

بیایید چند رشته در اندازه های مختلف بنویسیم ، سه شکل هندسی ایجاد کنیم و رویداد لمسی را روی آنها انتخاب کنیم ، هر بار که یکی از شکل ها را لمس می کنیم ، بازخورد نام شکل را دقیقاً در زیر آنها خواهیم داشت.

مرحله ششم: کتابخانه ها

ابتدا اجازه دهید کتابخانه هایی را که استفاده می کنیم تعریف کنیم.

#شامل // responsável pela parte gráfica

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

#شامل // comunicação com o نمایش

#شامل // comunicação com o نمایش

#شامل "math.h" // potencia محاسباتی

مرحله 7: تعریف می کند

ما برخی از ماکروها را برای پین ها و همچنین مقادیر مهمی که استفاده می کنیم تعریف می کنیم.

// 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 simple para imprimir os valores (x، y) a cada toque // então encontre os valores nas extremidades max/min (x، y) #تعریف TS_MINX 130 #تعریف TS_MINY 80 #تعریف TS_MAXX 900 #تعریف TS_MAXY 900 // tamanho داس textos # تعریف TEXT_SIZE_L 3 # تعریف TEXT_SIZE_M 2 # تعریف TEXT_SIZE_S 1 // posicionamento داس textos د بازخورد # تعریف FEEDBACK_LABEL_X 10 # تعریف FEEDBACK_LABEL_Y 200 # تعریف FEEDBACK_TOUCH_X 120 # تعریف FEEDBACK_TOUCH_Y 200 // valores برای detectar pressão انجام MINPRESSURE # تعریف بی لبه 10 #MAXPRESSURE 1000 را تعریف کنید

ما با تعریف برخی از ماکروها ادامه می دهیم.

// Associa o nome das cores aos valoresrespondentes #define BLACK 0x0000 #تعریف RED 0xF800 #تعریف GREEN 0x07E0 #تعریف CYAN 0x07FF #تعریف زرد 0xFFE0 #define WHITE 0xFFFo // dados de criaç const int circle_x = 240؛ const int circle_y = 125؛ // به منظور دستکاری در رویدادهای مختلف برای استفاده از صفحه نمایش لمسی ts = صفحه لمسی (XP ، YP ، XM ، YM) ؛ // objeto para manipulacao da parte grafica SWTFT tft؛

مرحله 8: راه اندازی

در راه اندازی ، شی کنترل گرافیکی خود را اولیه کرده و اولین تنظیمات را انجام می دهیم.

void setup () {Serial.begin (9600)؛ // reseta o objeto da lib grafica tft.reset ()؛ // inicializa objeto controlador da lib grafica tft.begin ()؛ تأخیر (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 ()؛ }

مرحله 9: حلقه کنید

در حلقه ، ما نقطه ای را که صفحه را لمس می کنیم ، انتخاب کرده و می بینیم که آیا لمس در یکی از شکل ها رخ داده است یا خیر.

حلقه خالی () {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 receib o mapeamento de Y TSPoint p؛ p.x = نقشه (touchPoint.y ، TS_MINY ، TS_MAXY ، 0 ، 320) ؛ p.y = نقشه (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") ؛ } // verifica se tocou no triangulo else if (pointInsideTriangle (TSPoint (110، 150، 0)، TSPoint (150، 100، 0)، TSPoint (190، 150، 0)، p)) {writeShape ("مثلث") ؛ } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("دایره") ؛ }}}

مرحله 10: بررسی کنید آیا دایره را لمس می کنیم یا خیر

در این مرحله ما به مقداردهی اولیه صفحه می پردازیم و رنگ متون نمایش داده شده را تعریف می کنیم.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE) ؛ tft.setTextSize (TEXT_SIZE_S) ؛ tft.println ("ACESSE") ؛ tft.setTextColor (زرد) ؛ tft.setTextSize (TEXT_SIZE_M) ؛ tft.println ("MEU BLOG") ؛ tft.setTextColor (سبز) ؛ 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 ("SHAPE:")؛ }

مرحله 11: توابع ایجاد اشکال هندسی

یک مستطیل ، یک مثلث و یک دایره با ریشه هایی که تعیین می کنیم ایجاد می کنیم.

// 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 ، سفید) ؛ } // 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، YELLOW)؛ tft.drawTriangle (110 ، 150 ، 150 ، 100 ، 190 ، 150 ، WHITE) ؛ } // 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 ، WHITE) ؛ }

مرحله 12: بررسی کنید که آیا مستطیل را لمس کرده ایم یا خیر

این تابع بررسی می کند که آیا نقطه داخل مستطیل است یا خیر.

// 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 انجام retangulo if (py = 100) {return true؛ }} false false؛ }

مرحله 13: بررسی کنید آیا دایره را لمس می کنیم

این همان دایره است.

// 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 (فاصله <= circle_radius) {بازگشت درست؛ } return false؛ }

مرحله 14: بررسی کنید آیا مثلث را لمس می کنیم یا خیر

همین بررسی نقطه در داخل مثلث نیز اتفاق می افتد.

// 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 = مثلث منطقه (a، b، c)؛ float ACP = triangleArea (a، c، p)؛ شناور ABP = مثلث منطقه (a ، b ، p) ؛ float CPB = triangleArea (c ، p ، b) ؛ if (ABC == ACP+ABP+CPB) {true 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 - ax) * (by - ay))/2) ؛ }

مرحله 15: عملکرد چاپ نام شی مورد لمس

در اینجا نام شکل هندسی مورد استفاده را روی صفحه می نویسیم.

// escreve na tela o nome da figura geométrica que foi tooi codavoid writeShape (شکل رشته) {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 (سفید) ؛ tft.println (شکل) ؛ }

مرحله 16: فایل ها

دانلود فایلها:

من نه

PDF