টাচ স্ক্রিন ডিসপ্লে সহ Arduino: 16 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:02

আপনি কি আরও ব্যক্তিগতকৃত মেনু এবং আরও ভাল মানব/মেশিন ইন্টারফেস তৈরি করতে চান? এই ধরনের প্রকল্পের জন্য, আপনি একটি Arduino এবং একটি টাচ স্ক্রিন ডিসপ্লে ব্যবহার করতে পারেন। এই ধারণাটি কি প্রলুব্ধকর? যদি তাই হয়, আজ ভিডিওটি দেখুন, যেখানে আমি আপনাকে একটি মেগা আরডুইনো এবং একটি টাচ স্ক্রিন ডিসপ্লে সহ একটি সমাবেশ দেখাব। আপনি স্ক্রিনে আপনার পছন্দসই ডিজাইনগুলি কীভাবে তৈরি করবেন এবং কীভাবে একটি নির্দিষ্ট কমান্ড স্পর্শ এবং সক্রিয় করতে স্ক্রিন অঞ্চল নির্ধারণ করবেন তা আপনি দেখতে পাবেন। আমি জোর দিয়েছি যে আমি তার পিনের পরিমাণের কারণে আরডুইনো মেগা ব্যবহার করতে বেছে নিয়েছি।

তাই আজ, আমি আপনাকে টাচ স্ক্রিন ডিসপ্লে, এর গ্রাফিক ফাংশন এবং কিভাবে স্ক্রিনে টাচ পয়েন্ট ধরতে হবে তার সাথে পরিচয় করিয়ে দেব। আসুন একটি পজিশনিং, রাইটিং, ডিজাইন, শেপ, কালার এবং স্পর্শের মতো সব উপাদান সম্বলিত একটি উদাহরণ তৈরি করি।

ধাপ 1: Arduino মেগা 2560

ধাপ 2: TFT LCD Shield 2.4"

আমরা আমাদের প্রকল্পে যে ডিসপ্লেটি ব্যবহার করি তার একটি আকর্ষণীয় বৈশিষ্ট্য রয়েছে: এতে একটি এসডি কার্ড রয়েছে। যাইহোক, এর সাথে জড়িত লেখা এবং পড়া অন্য ভিডিওতে দেখানো হবে, যা আমি শীঘ্রই তৈরি করব। আজকের পাঠের উদ্দেশ্য হল এই ডিসপ্লের গ্রাফিক এবং টাচ স্ক্রিন বৈশিষ্ট্যগুলিকে বিশেষভাবে মোকাবেলা করা।

বৈশিষ্ট্য:

পর্দার মাত্রা: 2.4 ইঞ্চি

মাইক্রোএসডি কার্ড স্লট

রঙ LCD: 65K

ড্রাইভার: ILI9325

রেজোলিউশন: 240 x 320

টাচস্ক্রিন: 4-তারের প্রতিরোধী টাচস্ক্রিন

ইন্টারফেস: 8 বিট ডেটা, প্লাস 4 কন্ট্রোল লাইন

অপারেটিং ভোল্টেজ: 3.3-5V

মাত্রা: 71 x 52 x 7 মিমি

ধাপ 3: লাইব্রেরি

লাইব্রেরি যোগ করুন:

"Adafruit_GFX"

"SWTFT"

"টাচ স্ক্রিন"

লিঙ্কগুলিতে ক্লিক করুন এবং লাইব্রেরিগুলি ডাউনলোড করুন।

ফাইলটি আনজিপ করুন এবং Arduino IDE এর লাইব্রেরি ফোল্ডারে পেস্ট করুন।

সি: / প্রোগ্রাম ফাইল (x86) / আরডুইনো / লাইব্রেরি

বিঃদ্রঃ

আমাদের প্রোগ্রাম শুরু করার আগে, আমাদের গুরুত্বপূর্ণ কিছু সমাধান করতে হবে: টাচ ক্রমাঙ্কন।

ডিসপ্লেতে টাচ পয়েন্ট পেতে একটি সাধারণ প্রোগ্রাম ব্যবহার করে, প্রতিটি প্রান্তে পয়েন্টের মান (x, y) সংরক্ষণ করুন (নীচের চিত্রে হলুদ বর্ণিত)। এই মানগুলি স্ক্রিনের গ্রাফিক পয়েন্টগুলিতে স্পর্শ ম্যাপ করার জন্য গুরুত্বপূর্ণ।

#অন্তর্ভুক্ত // পোর্টাস ডি লেইটুরা দাস কোঅর্ডিনেডাস টাচভয়েড #ডিফাইন YP A1 // Y+ এনালগ 1 এ আছে Digital6 // objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); অকার্যকর সেটআপ () {Serial.begin (9600); } void loop () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) Serial.print ("X:"); Serial.println (touchPoint.x); সিরিয়াল.প্রিন্ট ("Y:"); Serial.println (touchPoint.y); বিলম্ব (1000); }

ধাপ 4: ফাংশন

এখন আসুন কিছু গ্রাফিক্যাল ফাংশন দেখি যা লাইব্রেরি আমাদের দিতে পারে।

1. ড্র পিক্সেল

ড্র পিক্সেল ফাংশন প্রদত্ত পয়েন্টে স্ক্রিনে একটি একক পয়েন্ট আঁকার জন্য দায়ী।

অকার্যকর পিক্সেল (int16_t x, int16_t এবং, uint16_t রঙ);

2. অঙ্কন লাইন

ড্রলাইন ফাংশন দুটি পয়েন্ট থেকে লাইন আঁকার জন্য দায়ী।

অকার্যকর ড্র লাইন (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t রঙ);

3. DraFFastVLine

DrawFastVLine ফাংশনটি একটি বিন্দু এবং একটি উচ্চতা থেকে একটি উল্লম্ব রেখা আঁকার জন্য দায়ী।

অকার্যকর ড্র ফাস্টভলাইন (int16_t x, int16_t y, int16_t h, uint16_t রঙ);

4. FastHLine আঁকা

DrawFastHLine ফাংশনটি একটি বিন্দু এবং একটি প্রস্থ থেকে একটি অনুভূমিক রেখা আঁকার জন্য দায়ী।

অকার্যকর ড্রফাস্টএলাইন (int16_t x, int16_t y, int16_t w, uint16_t রঙ);

5. drawRect

ড্ররেক্ট ফাংশনটি স্ক্রিনে একটি আয়তক্ষেত্র আঁকার জন্য দায়ী, উৎপত্তি বিন্দু, তার উচ্চতা এবং প্রস্থ অতিক্রম করে।

অকার্যকর drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t রঙ);

6. পূরণ করুন

FillRect ফাংশন drawRect এর মতই, কিন্তু আয়তক্ষেত্রটি প্রদত্ত রঙ দিয়ে পূর্ণ হবে।

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

7. drawRoundRect

DrawRoundRect ফাংশন drawRect এর মতই, কিন্তু আয়তক্ষেত্রের গোলাকার প্রান্ত থাকবে।

অকার্যকর 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 ফাংশনটি স্ক্রিনে একটি ত্রিভুজ আঁকার জন্য দায়ী, ver টি কোণের বিন্দু অতিক্রম করে।

অকার্যকর ড্র ত্রিভুজ (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t রঙ);

10. ত্রিভুজ পূরণ করুন

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 ফাংশন একটি উৎস বিন্দু এবং একটি ব্যাসার্ধ থেকে একটি বৃত্ত আঁকার জন্য দায়ী।

অকার্যকর ড্র বৃত্ত (int16_t x0, int16_t y0, int16_t r, uint16_t রঙ);

12. পূরণ সার্কেল

FillCircle ফাংশন drawCircle এর মতই, কিন্তু বৃত্তটি প্রদত্ত রঙ দিয়ে পূর্ণ হবে।

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t কালার);

13. ফিলস্ক্রিন

ফিলসস্ক্রিন ফাংশনটি একটি একক রঙ দিয়ে স্ক্রিন ভরাট করার জন্য দায়ী।

অকার্যকর ফিলস্ক্রিন (uint16_t রঙ);

14. সেট কার্সার

একটি নির্দিষ্ট বিন্দুতে লেখার জন্য কার্সার স্থাপনের জন্য setCursor ফাংশন দায়ী।

অকার্যকর সেট কার্সার (int16_t x, int16_t y);

15. setTextColor

SetTextColor ফাংশনটি লেখার জন্য একটি রঙ বরাদ্দ করার জন্য দায়ী। আমাদের এটি ব্যবহার করার দুটি উপায় আছে:

অকার্যকর setTextColor (uint16_t c); // শুধু লেখার রঙ সেট করে // লেখার রঙ এবং পটভূমির রঙ সেট করুন

16. setTextSize

SetTextSize ফাংশনটি লেখাটিতে একটি আকার নির্ধারণের জন্য দায়ী।

অকার্যকর setTextSize (uint8_t s);

17. setTextWrap

SetTextWrap ফাংশনটি লাইন ভাঙার জন্য দায়ী যদি এটি পর্দার সীমাতে পৌঁছায়।

অকার্যকর সেটটেক্সট্র্যাপ (বুলিয়ান ডাব্লু);

18. সেট রোটেশন

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

#অন্তর্ভুক্ত "গণিত। এইচ" // ক্যালকুলার পটেনসিয়া

ধাপ 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 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 ডস textos # define TEXT_SIZE_L 3 # define TEXT_SIZE_M 2 # define TEXT_SIZE_S 1 // posicionamento ডস textos ডি প্রতিক্রিয়া # define FEEDBACK_LABEL_X 10 # define FEEDBACK_LABEL_Y 200 # define FEEDBACK_TOUCH_X 120 # define FEEDBACK_TOUCH_Y 200 // valores পাড়া detectar একটি pressão Toque # define MINPRESSURE না 10 #সর্বোচ্চ চাপ 1000 নির্ধারণ করুন

আমরা কিছু ম্যাক্রোর সংজ্ঞা অব্যাহত রাখি।

// Associa o nome das cores aos valores correspondentes #define BLACK 0x0000 #defeine RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dosto cordo = dosto de circo 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;

ধাপ 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 (BLACK); // chama a função para iniciar nossas configurações initialSettings (); }

ধাপ 9: লুপ

লুপে, আমরা যে বিন্দুতে আমরা স্ক্রিনটি স্পর্শ করি সেটিকে বেছে নেব এবং দেখতে পাব যে স্পর্শটি কোন একটি চিত্রের মধ্যে হয়েছে কিনা।

void loop () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, 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 = মানচিত্র (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 ("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) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, YELLOW); tft.draw ত্রিভুজ (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, 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 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 = ত্রিভুজ এলাকা (a, c, p); ভাসমান ABP = ত্রিভুজ এলাকা (a, b, p); ভাসা CPB = ত্রিভুজ এলাকা (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 - ax) * (by - ay))/2); }

ধাপ 15: স্পর্শকৃত বস্তুর নাম মুদ্রণ করার কাজ

এখানে আমরা স্ক্রিনে ব্যবহৃত জ্যামিতিক চিত্রের নাম লিখি।

// escreve na tela o nome da figura geométrica que foi tocadavoid 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: ফাইল

ফাইল ডাউনলোড করুন:

আইএনও

পিডিএফ