टच स्क्रीन डिस्प्ले के साथ Arduino: 16 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:22

क्या आप अधिक व्यक्तिगत मेनू और बेहतर मानव/मशीन इंटरफेस बनाना चाहेंगे? ऐसी परियोजनाओं के लिए, आप Arduino और Touch Screen Display का उपयोग कर सकते हैं। क्या यह विचार आकर्षक लगता है? यदि हां, तो आज ही वीडियो देखें, जहां मैं आपको एक मेगा अरुडिनो और एक टच स्क्रीन डिस्प्ले के साथ एक असेंबली दिखाऊंगा। आप देखेंगे कि स्क्रीन पर आप जो डिज़ाइन बनाना चाहते हैं उसे कैसे बनाया जाए, और यह भी कि किसी विशिष्ट कमांड को छूने और सक्रिय करने के लिए स्क्रीन क्षेत्र को कैसे निर्धारित किया जाए। मैं इस बात पर जोर देता हूं कि मैंने पिन की मात्रा के कारण Arduino मेगा का उपयोग करना चुना।

तो आज, मैं आपको टच स्क्रीन डिस्प्ले, इसके ग्राफिक फ़ंक्शंस और स्क्रीन पर टच पॉइंट को कैसे पकड़ें, इसके बारे में बताऊंगा। आइए एक उदाहरण भी बनाते हैं जिसमें सभी तत्व होते हैं, जैसे कि स्थिति, लेखन, आकार, रंग और स्पर्श डिजाइन करना।

चरण 1: अरुडिनो मेगा 2560

चरण 2: टीएफटी एलसीडी शील्ड 2.4"

हमारे प्रोजेक्ट में उपयोग किए जाने वाले इस डिस्प्ले में एक दिलचस्प विशेषता है: इसमें एक एसडी कार्ड है। हालांकि, इसमें शामिल लेखन और पठन एक अन्य वीडियो में दिखाया जाएगा, जिसे मैं जल्द ही प्रोड्यूस करूंगा। आज के पाठ का उद्देश्य इस डिस्प्ले की ग्राफिक और टच स्क्रीन विशेषताओं को विशेष रूप से संबोधित करना है।

विशेषताएं:

स्क्रीन आयाम: 2.4 इंच

माइक्रोएसडी कार्ड स्लॉट

रंग एलसीडी: 65K

चालक: ILI9325

संकल्प: 240 x 320

टचस्क्रीन: 4-तार प्रतिरोधी टचस्क्रीन

इंटरफ़ेस: 8 बिट डेटा, प्लस 4 नियंत्रण रेखाएं

ऑपरेटिंग वोल्टेज: 3.3-5V

आयाम: 71 x 52 x 7 मिमी

चरण 3: पुस्तकालय

पुस्तकालय जोड़ें:

"एडफ्रूट_जीएफएक्स"

"एसडब्ल्यूटीएफटी"

"टच स्क्रीन"

लिंक पर क्लिक करें और पुस्तकालयों को डाउनलोड करें।

फ़ाइल को अनज़िप करें और इसे Arduino IDE के लाइब्रेरी फ़ोल्डर में पेस्ट करें।

सी: / प्रोग्राम फ़ाइलें (x86) / Arduino / पुस्तकालय

ध्यान दें

इससे पहले कि हम अपना कार्यक्रम शुरू करें, हमें कुछ महत्वपूर्ण पर ध्यान देने की जरूरत है: टच कैलिब्रेशन।

डिस्प्ले पर टच पॉइंट प्राप्त करने के लिए एक साधारण प्रोग्राम का उपयोग करके, प्रत्येक छोर पर पॉइंट्स (x, y) के मान को स्टोर करें (नीचे दिए गए चित्र में पीले रंग में हाइलाइट किया गया)। स्क्रीन पर ग्राफिक बिंदुओं पर स्पर्श को मैप करने के लिए ये मान महत्वपूर्ण हैं।

#include // 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 पर है // ऑब्जेक्ट पर ध्यान दें, इस घटना को आगे बढ़ाएं टचस्क्रीन ts = TouchScreen(XP, YP, XM, YM); शून्य सेटअप () {Serial.begin (९६००); } शून्य लूप () { TSPoint टचपॉइंट = ts.getPoint ();//पेगा ओ टच (एक्स, वाई, जेड = प्रेसाओ) सीरियल.प्रिंट ("एक्स:"); Serial.println (टचप्वाइंट.एक्स); सीरियल.प्रिंट ("वाई:"); Serial.println (टचपॉइंट.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. ड्राफास्टवीलाइन

DrawFastVLine फ़ंक्शन एक बिंदु और ऊंचाई से एक लंबवत रेखा खींचने के लिए ज़िम्मेदार है।

शून्य ड्रॉफास्टवीलाइन (int16_t x, int16_t y, int16_t h, uint16_t रंग);

4. ड्राफास्टलाइन

DrawFastHLine फ़ंक्शन एक बिंदु और चौड़ाई से एक क्षैतिज रेखा खींचने के लिए ज़िम्मेदार है।

शून्य ड्रॉफास्टलाइन (int16_t x, int16_t y, int16_t w, uint16_t रंग);

5. ड्रारेक्ट

drawRect फ़ंक्शन स्क्रीन पर एक आयत बनाने के लिए ज़िम्मेदार है, जो मूल बिंदु, उसकी ऊँचाई और चौड़ाई को पार करता है।

शून्य ड्रॉरेक्ट (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t रंग);

6. भरेंरेक्ट

fillRect फ़ंक्शन drawRect के समान है, लेकिन आयत दिए गए रंग से भर जाएगा।

शून्य fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t रंग);

7. ड्राराउंडरेक्ट

DrawRoundRect फ़ंक्शन, drawRect के समान है, लेकिन आयत में गोल किनारे होंगे।

शून्य drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t त्रिज्या, uint16_t रंग);

8. फिलराउंडरेक्ट

fillRoundRect फ़ंक्शन drawRoundRect के समान है, लेकिन आयत दिए गए रंग से भर जाएगा।

शून्य fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t त्रिज्या, uint16_t रंग);

9. ड्राट्राएंगल

drawTriangle फ़ंक्शन स्क्रीन पर एक त्रिभुज बनाने के लिए ज़िम्मेदार है, जो 3 शीर्षों के बिंदु को पार करता है।

शून्य आरेखण त्रिभुज (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t रंग);

10. त्रिभुज भरें

fillTriangle फ़ंक्शन, drawTriangle के समान है, लेकिन त्रिभुज दिए गए रंग से भर जाएगा।

शून्य भरण त्रिभुज (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 जैसा ही है, लेकिन सर्कल दिए गए रंग से भर जाएगा।

शून्य भरण चक्र (int16_t x0, int16_t y0, int16_t r, uint16_t रंग);

13. स्क्रीन भरें

फिलस्क्रीन फ़ंक्शन स्क्रीन को एक ही रंग से भरने के लिए ज़िम्मेदार है।

शून्य भरणस्क्रीन (uint16_t रंग);

14. सेट कर्सर

सेट कर्सर फ़ंक्शन किसी दिए गए बिंदु पर लिखने के लिए कर्सर की स्थिति के लिए ज़िम्मेदार है।

शून्य सेट कर्सर (int16_t x, int16_t y);

15. सेटटेक्स्टकलर

setTextColor फ़ंक्शन लिखे जाने वाले टेक्स्ट को एक रंग निर्दिष्ट करने के लिए ज़िम्मेदार है। हमारे पास इसका उपयोग करने के दो तरीके हैं:

शून्य सेटटेक्स्टकोलर (uint16_t c); // केवल लिखने का रंग सेट करता हैशून्य setTextColor (uint16_t c, uint16_t bg); // राइटिंग कलर और बैकग्राउंड कलर सेट करें

16. सेटटेक्स्टसाइज

setTextSize फ़ंक्शन लिखे जाने वाले टेक्स्ट को आकार निर्दिष्ट करने के लिए ज़िम्मेदार है।

शून्य सेटटेक्स्टसाइज़ (uint8_t s);

17. सेटटेक्स्टव्रैप

setTextWrap फ़ंक्शन स्क्रीन की सीमा तक पहुंचने पर लाइन को तोड़ने के लिए ज़िम्मेदार है।

शून्य setTextWrap (बूलियन डब्ल्यू);

18. सेटरोटेशन

सेटरोटेशन फ़ंक्शन स्क्रीन (लैंडस्केप, पोर्ट्रेट) को घुमाने के लिए जिम्मेदार है।

शून्य सेटरोटेशन (uint8_t r); // 0 (मानक), 1, 2, 3

चरण 5: उदाहरण

हम एक प्रोग्राम तैयार करेंगे जिसमें हम उन अधिकांश संसाधनों का उपयोग करेंगे जो डिस्प्ले हमें प्रदान करता है।

आइए विभिन्न आकारों में कुछ तार लिखें, तीन ज्यामितीय आंकड़े बनाएं, और उन पर स्पर्श घटना उठाएं, हर बार जब हम किसी एक आंकड़े को छूते हैं, तो हमारे पास आकृति के नाम की प्रतिक्रिया उनके ठीक नीचे होगी।

चरण 6: पुस्तकालय

आइए पहले उन पुस्तकालयों को परिभाषित करें जिनका हम उपयोग करेंगे।

#शामिल करें

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

#include //comunicação com o display

#include //comunicação com o display

#include "math.h" //कैलकुलर पोटेंसिया

चरण 7: परिभाषित करता है

हम पिन के लिए कुछ मैक्रोज़ और उन महत्वपूर्ण मूल्यों को भी परिभाषित करेंगे जिनका हम उपयोग करेंगे।

// पोर्टस डी लेइटुरा दास कोर्डेनदास डू टच# परिभाषित करें वाईपी ए 1 // वाई + # परिभाषित एक्सएम ए 2 // एक्स- # परिभाषित वाईएम 7 // वाई- # परिभाषित करें एक्सपी 6 // एक्स + // वालोरेस एनकॉन्ट्राडोस एट्रावेस दा कैलिब्राकाओ डू टच // 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 तमनहो डॉस टेक्स्टोस #परिभाषित करें TEXT_SIZE_L 3 #परिभाषित करें TEXT_SIZE_M 2 #परिभाषित करें TEXT_SIZE_S 1 // स्थिति में टेक्स्ट को प्रतिक्रिया दें #FEEDBACK_LABEL_X 10 को परिभाषित करें #FEEDBACK_LABEL_Y 200 को परिभाषित करें १० # मैक्सप्रेशर १००० परिभाषित करें

हम कुछ मैक्रोज़ की परिभाषा जारी रखते हैं।

// एसोसिएशन ओ नोम दास कोर aos valores संवाददाताओं # काले 0x0000 परिभाषित करें # लाल 0xF800 परिभाषित करें # हरे रंग 0x07E0 परिभाषित करें # CYAN 0x07FF परिभाषित करें # पीले 0xFFE0 परिभाषित करें # सफेद 0xFFFF परिभाषित करें कॉन्स्ट इंट सर्कल_एक्स = २४०; कॉन्स्ट इंट सर्कल_वाई = 125; // इस पर ध्यान दें, इस घटना को पूरा करने के लिए टचस्क्रीन टीएस = टचस्क्रीन (एक्सपी, वाईपी, एक्सएम, वाईएम); // ऑब्जेक्ट पैरा मैनिपुलाकाओ दा पार्ट ग्राफ़िका SWTFT tft;

चरण 8: सेटअप

सेटअप में, हम अपने ग्राफिक कंट्रोल ऑब्जेक्ट को इनिशियलाइज़ करेंगे और पहला कॉन्फ़िगरेशन करेंगे।

शून्य सेटअप () {Serial.begin (९६००); // रीसेट या ओब्जेटो दा लिब ग्राफ़िका tft.reset (); //inicializa objeto controlador da lib grafica tft.begin(); देरी (500); //rotaciona a tela para लैंडस्केप tft.setRotation(1); // पिंटा ए टेला टोडा डे प्रीटो tft.fillScreen (ब्लैक); // चमा ए फनकाओ पैरा इनिकियर नोसास कॉन्फिगुरास इनिशियलसेटिंग्स (); }

चरण 9: लूप

लूप में, हम उस बिंदु को उठाएंगे जिस पर हम स्क्रीन को स्पर्श करते हैं, और देखते हैं कि स्पर्श किसी एक आंकड़े में हुआ है या नहीं।

शून्य लूप () {TSPoint टचपॉइंट = ts.getPoint (); // पेगा ओ टच (एक्स, वाई, जेड = प्रेसाओ) पिनमोड (एक्सएम, आउटपुट); पिनमोड (वाईपी, आउटपुट); // मैपिया ओ पोंटो डे टच पैरा ओ (एक्स, वाई) ग्राफ़िको p.x = नक्शा (टचपॉइंट.y, TS_MINY, TS_MAXY, 0, 320); p.y = नक्शा (टचपॉइंट.x, TS_MINX, TS_MAXX, २४०, ०); // सत्यापित करें कि कोई दबाव नहीं है अगर (टचप्वाइंट.जेड> मिनप्रेशर && टचप्वाइंट.जेड <मैक्सप्रेसर) {//वेरिफिका से कोई रेटेंगुलो नहीं है अगर (प्वाइंटइनरेक्ट (पी)) {लिखें शेप ("रेक्ट");];] } } }

चरण 10: जांचें कि क्या हम सर्कल को स्पर्श करते हैं

इस चरण में हम स्क्रीन इनिशियलाइज़ेशन से निपटते हैं और प्रदर्शित होने वाले टेक्स्ट के रंगों को परिभाषित करते हैं।

/*देसेना और तेल ओएस एलिमेंटोस */ शून्य प्रारंभिक सेटिंग्स () { tft.setTextColor (सफेद); tft.setTextSize (TEXT_SIZE_S); tft.println ("एसीएसईएसई"); tft.setTextColor (पीला); tft.setTextSize (TEXT_SIZE_M); tft.println ("एमईयू ब्लॉग"); tft.setTextColor (हरा); tft.setTextSize (TEXT_SIZE_L); tft.println ("फर्नांडोक.कॉम"); क्रिएटरेक्ट (); क्रिएटट्राएंगल (); क्रिएटसर्कल (); tft.setCursor (FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor (सियान); tft.setTextSize (TEXT_SIZE_L); tft.println ("आकार:"); }

चरण 11: ज्यामितीय आकृतियाँ बनाने के कार्य

हम एक आयत, एक त्रिभुज और एक वृत्त बनाते हैं जिसका मूल हम निर्धारित करते हैं।

// cria um retangulo com उत्पत्ति (x, y) = (10, 100)//चौड़ाई = ८० e ऊंचाई = ५० शून्य createRect () {tft.fillRect(१०, १००, ८०, ५०, लाल); tft.drawRect(१०, १००, ८०, ५०, सफेद); } // cria um triangulo com os vertices: //A = (११०, १५०); बी = (१५०, १००); सी = (१९०, १५०) शून्य createTriangle () { tft.fillTriangle (११०, १५०, १५०, १००, १९०, १५०, पीला); 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: जांचें कि क्या हम आयत को स्पर्श करते हैं

यह फ़ंक्शन जाँचता है कि बिंदु आयत के अंदर है या नहीं।

// फ़नकाओ क्यू वेरिफ़िका से ओ पोंटो एस्टा डेंट्रो दो रेटेंगुलोबूल पॉइंटइनरेक्ट (टीएसपॉइंट पी) {//अधिकतम / मिनट एक्स रेटेंगुलो करते हैं अगर (पीएक्स> = 10 && पीएक्स <= 90) {//अधिकतम / मिनट वाई रेटेंगुलो करते हैं अगर (py = १००) {वापसी सच; } } विवरण झूठा है; }

चरण 13: जांचें कि क्या हम सर्कल को स्पर्श करते हैं

यह सर्कल के साथ जैसा ही है।

// डिस्टेंसिया एंट्रे पोंटोस डी = रेज़ ((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) {फ्लोट दूरी = 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// से एस्टीवर डेंट्रो रेटोर्ना TRUE senão retorna FALSE bool pointInsideTriangle(TSPoint a, TSPoint b, TSPoint c, TSPoint p){ फ्लोट एबीसी = ट्राएंगल एरिया (ए, बी, सी)); फ्लोट एसीपी = त्रिकोण क्षेत्र (ए, सी, पी); फ्लोट एबीपी = त्रिकोण क्षेत्र (ए, बी, पी); फ्लोट सीपीबी = त्रिभुज क्षेत्र (सी, पी, बी); अगर (एबीसी == एसीपी + एबीपी + सीपीबी) {वापसी सच है; } विवरण झूठा है;] कुल्हाड़ी) * (द्वारा - एई))/2); }

चरण 15: स्पर्श की गई वस्तु का नाम प्रिंट करने का कार्य

यहां हम स्क्रीन पर उपयोग की जाने वाली ज्यामितीय आकृति का नाम लिखते हैं।

// एस्क्रेव ना टेला ओ नोम दा फिगुरा जियोमेट्रिका क्यू फोई टोकाडावॉइड राइटशैप (स्ट्रिंग शेप) { 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: फ़ाइलें

फ़ाइलें डाउनलोड करें:

मैं नहीं

पीडीएफ