اردوينو مع شاشة تعمل باللمس: 16 خطوة

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:40

هل ترغب في إنشاء قوائم أكثر تخصيصًا وواجهات أفضل للإنسان / الآلة؟ لمثل هذه المشاريع ، يمكنك استخدام Arduino وشاشة تعمل باللمس. هل تبدو هذه الفكرة جذابة؟ إذا كان الأمر كذلك ، تحقق من الفيديو اليوم ، حيث سأعرض لك تجميعًا مع Mega Arduino وشاشة تعمل باللمس. سترى كيفية عمل التصميمات التي تريدها على الشاشة ، وكذلك كيفية تحديد منطقة الشاشة للمس وتفعيل أمر معين. أؤكد أنني اخترت استخدام Arduino Mega نظرًا لكمية المسامير.

لذا ، سأقدم لكم اليوم شاشة اللمس ووظائفها الرسومية وكيفية التقاط نقطة اللمس على الشاشة. لنقم أيضًا بإنشاء مثال يحتوي على جميع العناصر ، مثل تحديد الموضع والكتابة وتصميم الأشكال والألوان واللمس.

الخطوة 1: Arduino Mega 2560

الخطوة 2: شاشة TFT LCD Shield مقاس 2.4 بوصة

تتميز هذه الشاشة التي نستخدمها في مشروعنا بميزة مثيرة للاهتمام: فهي تحتوي على بطاقة SD. ومع ذلك ، سيتم عرض الكتابة والقراءة المتضمنة في ذلك في مقطع فيديو آخر ، سأقوم بإنتاجه قريبًا. الهدف من درس اليوم هو معالجة ميزات الشاشة التي تعمل باللمس والرسومات على وجه التحديد.

مميزات:

أبعاد الشاشة: 2.4 بوصة

منفذ كارت الذاكرة الصغيرة

شاشة LCD ملونة: 65 كيلو

السائق: ILI9325

الدقة: 240 × 320

شاشة تعمل باللمس: شاشة تعمل باللمس مقاومة بـ 4 أسلاك

الواجهة: بيانات 8 بت ، بالإضافة إلى 4 خطوط تحكم

جهد التشغيل: 3.3-5 فولت

الأبعاد: ٧١ × ٥٢ × ٧ ملم

الخطوة 3: المكتبات

أضف المكتبات:

"Adafruit_GFX"

"SWTFT"

"شاشة لمس"

انقر فوق الروابط وقم بتنزيل المكتبات.

قم بفك ضغط الملف ولصقه في مجلد مكتبات Arduino IDE.

C: / ملفات البرنامج (x86) / Arduino / المكتبات

ملحوظة

قبل أن نبدأ برنامجنا ، نحتاج إلى معالجة أمر مهم: معايرة TOUCH.

باستخدام برنامج بسيط للحصول على نقاط اللمس على الشاشة ، قم بتخزين قيمة النقاط (س ، ص) في كل نهاية (مظللة باللون الأصفر في الشكل أدناه). هذه القيم مهمة لتعيين اللمسة على النقاط الرسومية على الشاشة.

# تضمين // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y + قيد التشغيل Analog1 #define XM A2 // X- موجود على Analog2 #define YM 7 // Y- على Digital7 #define XP 6 // X + موجود على Digital6 // objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen (XP ، YP ، XM ، YM) ؛ إعداد باطل () {Serial.begin (9600) ؛ } حلقة فارغة () {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 مسؤولة عن رسم نقطة واحدة على الشاشة عند نقطة معينة.

drawPixel باطل (int16_t x، int16_t and، uint16_t color) ؛

2. رسم الخط

وظيفة drawLine مسؤولة عن رسم خط من نقطتين.

رسم باطل (int16_t x0، int16_t y0، int16_t x1، int16_t y1، uint16_t color) ؛

3. drawFastVLine

وظيفة drawFastVLine هي المسؤولة عن رسم خط عمودي من نقطة وارتفاع.

drawFastVLine باطلة (int16_t x، int16_t y، int16_t h، uint16_t color) ؛

4. DrawFastHLine

وظيفة drawFastHLine هي المسؤولة عن رسم خط أفقي من نقطة وعرض.

drawFastHLine باطلة (int16_t x، int16_t y، int16_t w، uint16_t color) ؛

5. رسم تصحيح

وظيفة drawRect هي المسؤولة عن رسم مستطيل على الشاشة ، وتمرير نقطة الأصل وارتفاعها وعرضها.

رسم باطل (int16_t x، int16_t y، int16_t w، int16_t h، uint16_t color) ؛

6. ملء تصحيح

وظيفة fillRect هي نفسها drawRect ، لكن المستطيل سيُملأ باللون المحدد.

تعبئة باطلة (int16_t x، int16_t y، int16_t w، int16_t h، uint16_t color) ؛

7. drawRoundRect

وظيفة drawRoundRect هي نفسها drawRect ، لكن المستطيل ستكون له حواف مستديرة.

رسم باطل RoundRect (int16_t x0، int16_t y0، int16_t w، int16_t h، int16_t radius، uint16_t color) ؛

8.ملء دائري

وظيفة fillRoundRect هي نفسها drawRoundRect ، لكن المستطيل سيُملأ باللون المحدد.

void fillRoundRect (int16_t x0، int16_t y0، int16_t w، int16_t h، int16_t radius، uint16_t color) ؛

9. رسم مثلث

وظيفة DrawTriangle هي المسؤولة عن رسم مثلث على الشاشة ، ويمر نقطة القمم الثلاثة.

drawTriangle الباطل (int16_t x0، int16_t y0، int16_t x1، int16_t y1، int16_t x2، int16_t y2، uint16_t color) ؛

10. قم بتعبئة المثلث

وظيفة FillTriangle هي نفسها drawTriangle ، ولكن سيتم تعبئة المثلث باللون المحدد.

تعبئة باطلة مثلث (int16_t x0، int16_t y0، int16_t x1، int16_t y1، int16_t x2، int16_t y2، uint16_t color) ؛

11. drawCircle

وظيفة drawCircle هي المسؤولة عن رسم دائرة من نقطة مصدر ونصف قطر.

رسم دائري باطل (int16_t x0، int16_t y0، int16_t r، uint16_t color) ؛

12.ملء دائرة

وظيفة fillCircle هي نفسها drawCircle ، لكن الدائرة ستُملأ باللون المحدد.

ملء الفراغ (int16_t x0، int16_t y0، int16_t r، uint16_t color) ؛

13. ملء الشاشة

وظيفة ملء الشاشة هي المسؤولة عن ملء الشاشة بلون واحد.

ملء الشاشة باطل (لون uint16_t) ؛

14. setCursor

وظيفة setCursor هي المسؤولة عن وضع المؤشر للكتابة إلى نقطة معينة.

setCursor باطلة (int16_t x، int16_t y) ؛

15. setTextColor

وظيفة setTextColor مسؤولة عن تعيين لون للنص المراد كتابته. لدينا طريقتان لاستخدامه:

setTextColor باطلة (uint16_t c) ؛ // يعين لون الكتابة onlyvoid setTextColor (uint16_t c، uint16_t bg) ؛ // ضبط لون الكتابة ولون الخلفية

16. setTextSize

وظيفة setTextSize هي المسؤولة عن تعيين حجم للنص الذي سيتم كتابته.

setTextSize باطلة (uint8_t s) ؛

17. setTextWrap

وظيفة setTextWrap مسؤولة عن كسر الخط إذا وصل إلى حد الشاشة.

setTextWrap باطلة (قيمة منطقية w) ؛

18. setRotation

وظيفة setRotation مسؤولة عن تدوير الشاشة (أفقي ، عمودي).

setRotation باطلة (uint8_t r) ؛ // 0 (قياسي) ، 1 ، 2 ، 3

الخطوة 5: مثال

سننشئ برنامجًا سنستخدم فيه معظم الموارد التي توفرها لنا الشاشة.

دعنا نكتب بعض السلاسل بأحجام مختلفة ، وننشئ ثلاثة أشكال هندسية ، ونلتقط حدث اللمس عليها ، في كل مرة نلمس فيها أحد الأشكال ، سيكون لدينا ملاحظات حول اسم الشكل الموجود أسفلها مباشرة.

الخطوة 6: المكتبات

أولاً ، دعنا نحدد المكتبات التي سنستخدمها.

# تضمين // Responsável pela parte gráfica

# تضمين // responsável por pegar os toques na tela

# تضمين // comunicação com o display

# تضمين // comunicação com o display

# تضمين "math.h" // calcular potencia

الخطوة 7: يحدد

سنحدد بعض وحدات الماكرو للدبابيس ، وكذلك القيم المهمة التي سنستخدمها.

// Portas de leitura das socenadas do touch # حدد 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 maxidades 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 FEEDXEDBACK #_TEL_Y 10 # تعريف أقصى ضغط 1000

نواصل تعريف بعض وحدات الماكرو.

// Associa o nome das cores aos valores clients # حدد BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criação_ doradulo int؛ كونست int Circle_x = 240 ؛ كونست int دائرة ص = 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؛

الخطوة 8: الإعداد

في الإعداد ، سنقوم بتهيئة كائن التحكم في الرسوم الخاص بنا وإجراء التكوينات الأولى.

إعداد باطل () {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 (أسود) ؛ // chama a função para iniciar nossas configurações initialSettings () ؛ }

الخطوة 9: التكرار

في الحلقة ، سنلتقط النقطة التي نلمس فيها الشاشة ، ونرى ما إذا كان اللمس قد حدث في أحد الأشكال.

حلقة باطلة () {TSPoint touchPoint = ts.getPoint () ؛ // pega o touch (x ، y ، z = pressao) pinMode (XM ، الإخراج) ؛ pinMode (YP ، الإخراج) ؛ // 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 = الخريطة (touchPoint.y ، TS_MINY ، TS_MAXY ، 0 ، 320) ؛ ص = خريطة (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 ("Triangle") ؛ } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Circle")؛ }}}

الخطوة 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") ؛ 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 ("الشكل:") ؛ }

الخطوة 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)؛ ب = (150 ، 100) ؛ C = (190، 150) باطل createTriangle () {tft.fillTriangle (110، 150، 150، 100، 190، 150، Yellow) ؛ tft.drawTriangle (110 ، 150 ، 150 ، 100 ، 190 ، 150 ، أبيض) ؛ } // 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 ، أبيض) ؛ }

الخطوة 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 do retangulo if (py = 100) {عودة صحيح ؛ } } عودة كاذبة؛ }

الخطوة 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)) ؛ إذا كانت (مسافة <= دائرة_شعاع) {عائد صحيح ؛ } عودة كاذبة؛ }

الخطوة 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 = triangleArea (a، b، c) ؛ تعويم ACP = triangleArea (a، c، p) ؛ تعويم ABP = triangleArea (a، b، p) ؛ تعويم CPB = triangleArea (c، p، b) ؛ إذا (ABC == ACP + ABP + CPB) {إرجاع صحيح ؛ } عودة كاذبة؛ } // 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 - الفأس) * (بواسطة - ay)) / 2) ؛ }

الخطوة 15: وظيفة لطباعة اسم الكائن الذي تم لمسه

هنا نكتب على الشاشة اسم الشكل الهندسي المستخدم.

// 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 (أبيض) ، tft.println (شكل) ؛ }

الخطوة 16: الملفات

قم بتنزيل الملفات:

انا لا

بي دي إف