Arduino Uno: Visuino के साथ ILI9341 TFT टचस्क्रीन डिस्प्ले शील्ड पर बिटमैप एनिमेशन: 12 चरण (चित्रों के साथ)

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

ILI9341 आधारित TFT टचस्क्रीन डिस्प्ले शील्ड Arduino के लिए बहुत लोकप्रिय कम लागत वाली डिस्प्ले शील्ड हैं। विसुइनो को उनके लिए काफी समय से समर्थन मिला है, लेकिन मुझे उनका उपयोग करने के तरीके पर एक ट्यूटोरियल लिखने का मौका कभी नहीं मिला। हाल ही में हालांकि कुछ लोगों ने विसुइनो के साथ डिस्प्ले का उपयोग करने के बारे में प्रश्न पूछे, इसलिए मैंने एक ट्यूटोरियल बनाने का फैसला किया।

इस ट्यूटोरियल में, मैं आपको दिखाऊंगा कि शील्ड को Arduino से कनेक्ट करना कितना आसान है, और डिस्प्ले पर घूमने के लिए बिटमैप को चेतन करने के लिए इसे Visuino के साथ प्रोग्राम करना।

चरण 1: अवयव

1. एक Arduino Uno संगत बोर्ड (यह मेगा के साथ भी काम कर सकता है, लेकिन मैंने अभी तक इसके साथ ढाल का परीक्षण नहीं किया है)
2. Arduino के लिए एक ILI9341 2.4" TFT टचस्क्रीन शील्ड

चरण 2: ILI9341 TFT टचस्क्रीन डिस्प्ले शील्ड को Arduino से कनेक्ट करें

जैसा कि चित्र में दिखाया गया है, Arduino Uno के शीर्ष पर TFT शील्ड को प्लग करें

चरण 3: Visuino प्रारंभ करें और TFT प्रदर्शन शील्ड जोड़ें

Arduino की प्रोग्रामिंग शुरू करने के लिए, आपको यहां से Arduino IDE इंस्टॉल करना होगा:

सुनिश्चित करें कि आप 1.6.7 या उच्चतर स्थापित करते हैं, अन्यथा यह निर्देश काम नहीं करेगा

Visuino: https://www.visuino.com को भी इंस्टॉल करना होगा।

1. Visuino प्रारंभ करें जैसा कि पहले चित्र में दिखाया गया है
2. ड्रॉप डाउन मेनू खोलने के लिए Arduino घटक के "एरो डाउन" बटन पर क्लिक करें (चित्र 1)
3. मेनू से चुनें "शील्ड्स जोड़ें…" (चित्र १)
4. "शील्ड्स" डायलॉग में "डिस्प्ले" श्रेणी का विस्तार करें, और "टीएफटी कलर टच स्क्रीन डिस्प्ले ILI9341 शील्ड" चुनें, फिर इसे जोड़ने के लिए "+" बटन पर क्लिक करें (चित्र 2)

चरण 4: विसुइनो में: टेक्स्ट शैडो के लिए ड्रा टेक्स्ट एलिमेंट जोड़ें

आगे हमें टेक्स्ट और बिटमैप रेंडर करने के लिए ग्राफ़िक्स एलिमेंट जोड़ने होंगे। पाठ की छाया खींचने के लिए पहले हम ग्राफिक्स तत्व जोड़ेंगे:

1. ऑब्जेक्ट इंस्पेक्टर में, "TFT डिस्प्ले" एलीमेंट की "एलिमेंट्स" प्रॉपर्टी के मूल्य के आगे "…" बटन पर क्लिक करें (चित्र १)
2. एलिमेंट्स एडिटर में "ड्रा टेक्स्ट" चुनें, और फिर एक जोड़ने के लिए "+" बटन (चित्र 2) पर क्लिक करें (चित्र 3)
3. ऑब्जेक्ट इंस्पेक्टर में "ड्रा टेक्स्ट 1" तत्व की "रंग" संपत्ति का मूल्य "एसीएलसिल्वर" पर सेट करें (चित्र ३)
4. ऑब्जेक्ट इंस्पेक्टर में "ड्रा टेक्स्ट 1" तत्व की "आकार" संपत्ति का मान "4" (चित्र 4) पर सेट करें। इससे टेक्स्ट बड़ा हो जाता है
5. ऑब्जेक्ट इंस्पेक्टर में "ड्रा टेक्स्ट 1" तत्व की "टेक्स्ट" प्रॉपर्टी का मान "विसुइनो" पर सेट करें (चित्र ५)
6. ऑब्जेक्ट इंस्पेक्टर में "ड्रा टेक्स्ट 1" तत्व की "एक्स" संपत्ति का मान "43" पर सेट करें (चित्र ६)
7. ऑब्जेक्ट इंस्पेक्टर में "Draw Text1" तत्व की "Y" प्रॉपर्टी का मान "278" पर सेट करें (चित्र 6)

चरण 5: विसुइनो में: टेक्स्ट फोरग्राउंड के लिए ड्रा टेक्स्ट एलिमेंट जोड़ें

अब हम टेक्स्ट को ड्रा करने के लिए ग्राफिक्स एलिमेंट जोड़ेंगे:

1. एलिमेंट्स एडिटर में "ड्रा टेक्स्ट" चुनें, और फिर "+" बटन पर क्लिक करें (चित्र १) दूसरा जोड़ने के लिए (चित्र २)
2. ऑब्जेक्ट इंस्पेक्टर में "ड्रा टेक्स्ट 1" तत्व की "आकार" संपत्ति का मान "4" पर सेट करें (चित्र 2)
3. ऑब्जेक्ट इंस्पेक्टर में "ड्रा टेक्स्ट 1" तत्व की "टेक्स्ट" प्रॉपर्टी का मान "विसुइनो" पर सेट करें (चित्र ३)
4. ऑब्जेक्ट इंस्पेक्टर में "ड्रा टेक्स्ट 1" तत्व की "एक्स" संपत्ति का मान "40" पर सेट करें (चित्र ४)
5. ऑब्जेक्ट इंस्पेक्टर में "Draw Text1" तत्व की "Y" प्रॉपर्टी का मान "275" पर सेट करें (चित्र 4)

चरण 6: विसुइनो में: एनिमेशन के लिए ड्रा बिटमैप तत्व जोड़ें

आगे हम बिटमैप ड्रा करने के लिए ग्राफिक्स एलिमेंट जोड़ेंगे:

1. एलिमेंट्स एडिटर में "ड्रा बिटमैप" चुनें, और फिर एक जोड़ने के लिए "+" बटन (चित्र 1) पर क्लिक करें (चित्र 2)
2. ऑब्जेक्ट इंस्पेक्टर में, "बिटमैप 1" तत्व की "बिटमैप" संपत्ति के मूल्य के आगे "…" बटन पर क्लिक करें (चित्र 2) "बिटमैप संपादक" खोलने के लिए (चित्र ३)
3. "बिटमैप संपादक" में "लोड …" बटन पर क्लिक करें (चित्र ३) फ़ाइल ओपन डायलॉग खोलने के लिए (चित्र ४)
4. फ़ाइल ओपन डायलॉग में, ड्रा करने के लिए बिटमैप का चयन करें, और "ओपन" बटन पर क्लिक करें (चित्र 4)। यदि फ़ाइल बहुत बड़ी है तो वह Arduino मेमोरी में फ़िट होने में सक्षम नहीं हो सकती है। यदि आप संकलन के दौरान स्मृति त्रुटि से बाहर निकलते हैं, तो आपको एक छोटे बिटमैप का चयन करने की आवश्यकता हो सकती है
5. "बिटमैप संपादक" में "ओके" पर क्लिक करें। बटन (चित्र ५) संवाद बंद करने के लिए

चरण 7: Visuino में: ड्रा बिटमैप तत्व के X और Y गुणों के लिए पिन जोड़ें

बिटमैप को चेतन करने के लिए, हमें इसकी X और Y स्थिति को नियंत्रित करने की आवश्यकता है। इसके लिए हम X और Y गुणों के लिए पिन जोड़ेंगे:

1. ऑब्जेक्ट इंस्पेक्टर में "ड्रा बिटमैप1" तत्व (चित्र 1) की "एक्स" संपत्ति के सामने "पिन" बटन पर क्लिक करें, और "इंटीजर सिंकपिन" (चित्र 2) का चयन करें।
2. ऑब्जेक्ट इंस्पेक्टर में "ड्रा बिटमैप1" तत्व (चित्र ३) की "वाई" संपत्ति के सामने "पिन" बटन पर क्लिक करें, और "इंटीजर सिंकपिन" (चित्र ४) का चयन करें।

चरण 8: विसुइनो में: 2 इंटीजर साइन जेनरेटर जोड़ें, और पहले वाले को कॉन्फ़िगर करें

बिटमैप आंदोलन को चेतन करने के लिए हम 2 इंटीजर साइन जेनरेटर का उपयोग करेंगे:

1. घटक टूलबॉक्स के फ़िल्टर बॉक्स में "साइन" टाइप करें, फिर "साइन इंटीजर जेनरेटर" घटक चुनें (चित्र 1), और उनमें से दो को डिज़ाइन क्षेत्र में छोड़ दें
2. ऑब्जेक्ट इंस्पेक्टर में, SineIntegerGenerator1 घटक के "आयाम" गुण का मान "96" पर सेट करें (चित्र 2)
3. ऑब्जेक्ट इंस्पेक्टर में, SineIntegerGenerator1 घटक की "ऑफ़सेट" संपत्ति का मान "96" पर सेट करें (चित्र ३)
4. ऑब्जेक्ट इंस्पेक्टर में, SineIntegerGenerator1 घटक की "फ़्रीक्वेंसी" संपत्ति का मान "0.2" पर सेट करें (चित्र 4)

चरण 9: विसुइनो में: दूसरा साइन जेनरेटर कॉन्फ़िगर करें, और साइन जेनरेटर को बिटमैप के एक्स और वाई कोऑर्डिनेट पिन से कनेक्ट करें

1. ऑब्जेक्ट इंस्पेक्टर में, SineIntegerGenerator2 घटक के "आयाम" गुण का मान "120" पर सेट करें (चित्र १)
2. ऑब्जेक्ट इंस्पेक्टर में, SineIntegerGenerator2 घटक की "ऑफ़सेट" संपत्ति का मान "120" पर सेट करें (चित्र 2)
3. ऑब्जेक्ट इंस्पेक्टर में, SineIntegerGenerator2 घटक के "फ़्रीक्वेंसी" गुण का मान "0.03" पर सेट करें (चित्र ३)
4. SineIntegerGenerator1 घटक के "आउट" आउटपुट पिन को Arduino घटक के "Shields. TFT Sisplay. Elements. Draw Bitmap1" तत्व के "X" इनपुट पिन से कनेक्ट करें (चित्र 4)
5. SineIntegerGenerator2 घटक के "आउट" आउटपुट पिन को Arduino घटक के "Shields. TFT Display. Elements. Draw Bitmap1" तत्व के "Y" इनपुट पिन से कनेक्ट करें (चित्र 5)

चरण 10: विसुइनो में: स्टार्ट और क्लॉक मल्टी सोर्स कंपोनेंट्स जोड़ें और कनेक्ट करें

बिटमैप को प्रस्तुत करने के लिए हर बार X और Y स्थिति अपडेट होने पर हमें "ड्रा बिटमैप1" तत्व को एक घड़ी संकेत भेजने की आवश्यकता होती है। पदों को बदलने के बाद आदेश भेजने के लिए, हमें घटनाओं को सिंक्रनाइज़ करने का एक तरीका चाहिए। इसके लिए हम लगातार इवेंट जेनरेट करने के लिए रिपीट कंपोनेंट का इस्तेमाल करेंगे और क्लॉक मल्टी सोर्स 2 इवेंट्स को क्रम से जेनरेट करने के लिए। पहली घटना साइन जेनरेटर को एक्स और वाई स्थिति को अपडेट करने के लिए घड़ी देगी, और दूसरा "ड्रा बिटमैप 1" को क्लॉक करेगा:

1. कंपोनेंट टूलबॉक्स के फ़िल्टर बॉक्स में "रिपीट" टाइप करें, फिर "रिपीट" कंपोनेंट (चित्र 1) का चयन करें, और इसे डिज़ाइन क्षेत्र में छोड़ दें (चित्र 2)
2. घटक टूलबॉक्स के फ़िल्टर बॉक्स में "मल्टी" टाइप करें, फिर "क्लॉक मल्टी सोर्स" घटक (चित्र 2) का चयन करें, और इसे डिज़ाइन क्षेत्र में छोड़ दें (चित्र ३)
3. रिपीट1 कंपोनेंट के "आउट" आउटपुट पिन को क्लॉकमल्टीसोर्स1 कंपोनेंट के "इन" इनपुट पिन से कनेक्ट करें (चित्र 3)
4. क्लॉकमल्टीसोर्स1कंपोनेंट के "आउट" पिन के "पिन [0]" आउटपुट पिन को साइनइंटरजेनरेटर1 कंपोनेंट के "इन" इनपुट पिन से कनेक्ट करें (चित्र 4)
5. क्लॉकमल्टीसोर्स2कंपोनेंट के "आउट" पिन के "पिन [0]" आउटपुट पिन को साइनइंटरजेनरेटर1 कंपोनेंट के "इन" इनपुट पिन से कनेक्ट करें (चित्र 5)
6. Arduino कंपोनेंट के "Shields. TFT Display. Elements. Draw Bitmap1" एलिमेंट के "घड़ी" इनपुट पिन के "पिन [1]" आउटपुट पिन को कनेक्ट करें (चित्र 6)

चरण 11: Arduino कोड उत्पन्न करें, संकलित करें और अपलोड करें

1. Visuino में, F9 दबाएं या Arduino कोड जेनरेट करने के लिए चित्र 1 पर दिखाए गए बटन पर क्लिक करें, और Arduino IDE खोलें
2. Arduino IDE में, कोड को संकलित और अपलोड करने के लिए अपलोड बटन पर क्लिक करें (चित्र 2)

चरण 12: और खेलो…

बधाई हो! आपने प्रोजेक्ट पूरा कर लिया है।

चित्र 2, 3, 4 और 5 और वीडियो कनेक्टेड और पावर्ड अप प्रोजेक्ट दिखाते हैं। जैसा कि वीडियो में देखा गया है, आप बिटमैप को ILI9341 आधारित TFT टचस्क्रीन डिस्प्ले शील्ड के चारों ओर घूमते हुए देखेंगे।

चित्र 1 पर आप पूरा Visuino आरेख देख सकते हैं। Visuino प्रोजेक्ट भी संलग्न है, जिसे मैंने इस निर्देश के लिए बनाया है, और Visuino लोगो के साथ बिटमैप। आप इसे Visuino में डाउनलोड और खोल सकते हैं: