इवेंट एडिटर का इस्तेमाल

इवेंट एडिटर क्या है?

इवेंट एडिटर से विजेट आपस में जोड़े जाते हैं, ताकि एक विजेट पर की गई गतिविधि से दूसरे विजेट या स्क्रीन में बदलाव हो। हर कनेक्शन के तीन मुख्य हिस्से हैं:

• Source: वह विजेट जिससे उपयोगकर्ता कुछ करता है, जैसे बटन।
• Trigger: वह घटना जिससे एक्शन शुरू होता है, जैसे बटन पर क्लिक।
• Action: उसके बाद होने वाला काम, जैसे दूसरी स्क्रीन खोलना। यह आम तौर पर किसी Destination विजेट या स्क्रीन पर लागू होता है।

इसे एक वाक्य में समझें: “जब उपयोगकर्ता इस बटन पर क्लिक करे, तो Settings स्क्रीन खोलें।” यह एक इवेंट है। पूरे इंटरफ़ेस के लिए ऐसे जितने चाहें इवेंट जोड़ सकते हैं।

इवेंट एडिटर खोलें

विजेट या स्क्रीन चुनें, फिर दाएँ साइडबार में Events टैब खोलें। यह Design और Inspect के साथ होता है। यहाँ हर इवेंट एक कार्ड के रूप में दिखता है, जिसे खोलकर उसकी सेटिंग बदल सकते हैं।

पहला इवेंट बनाने से पहले PicoPixel शुरुआत के तीन तरीके दिखाता है:

1. इवेंट जोड़ने के लिए + बटन दबाएँ।
2. विजेट या स्क्रीन चुनकर उससे दूसरे विजेट या स्क्रीन तक कनेक्शन खींचें।
3. इवेंट आज़माने के लिए ऊपर play बटन दबाएँ।

विजेट जोड़ें: कनेक्शन खींचकर लक्ष्य तक ले जाएँ

कैनवास पर सीधे इवेंट बनाना सबसे आसान है:

1. Source विजेट चुनें, यानी वह विजेट जिसे उपयोगकर्ता दबाएगा या बदलेगा।
2. उसके किनारे दिखने वाले छोटे connection handle को पकड़ें और लक्ष्य विजेट या स्क्रीन तक खींचें।
3. उसे Destination पर छोड़ें। दोनों के बीच एक घुमावदार रेखा बनती है, जिस पर एक छोटा नोड होता है।
4. Trigger चुनने के लिए उस नोड पर क्लिक करें। नोड मौजूदा ट्रिगर दिखाता है, जैसे “Clicked”। लक्ष्य और बाकी सेटिंग Events पैनल में तय होती हैं।

यह रेखा उस इवेंट को दर्शाती है। एक नज़र में पता चल जाता है कि कौन-सा विजेट किससे जुड़ा है।

ट्रिगर चुनें

ट्रिगर तय करता है कि एक्शन कब शुरू होगा। कनेक्शन के नोड या Events पैनल के Trigger ड्रॉपडाउन से इसे चुनें। सबसे आम ट्रिगर Clicked है। बाकी विकल्प ये हैं:

• Clicked: बटन दबाकर छोड़ने पर। आम बटन के लिए यही सबसे अधिक काम आता है।
• Pressed: उँगली लगते ही।
• Released: उँगली हटाने पर।
• Long Pressed / Long Pressed Repeat: देर तक दबाए रखने पर, या दबाए रखने के दौरान बार-बार।
• Gesture: स्वाइप करने पर।
• Value Changed: विजेट की वैल्यू बदलने पर, जैसे स्लाइडर खिसकाना, स्विच बदलना या चेकबॉक्स चुनना। स्लाइडर, स्विच और रोलर के लिए यह सही विकल्प है।
• Focused / Defocused: विजेट को फ़ोकस मिलने या उससे फ़ोकस हटने पर।
• Screen Loaded / Screen Unloaded: स्क्रीन खुलने या हटने पर। स्क्रीन खुलते ही कुछ तैयार करना हो तो काम आता है।
• Scroll Begin / Scroll End: स्क्रॉल शुरू या बंद होने पर।
• Ready / Cancel: स्क्रीन पर दिखने वाले कीबोर्ड जैसे इनपुट के लिए।

एक्शन चुनें

एक्शन तय करता है कि क्या होगा:

• Change Screen: दूसरी स्क्रीन खोलें। Fade या Slide left/right/up/down जैसा ट्रांज़िशन, उसकी गति और देरी चुन सकते हैं।
• Delete Screen: दूसरी स्क्रीन खोलें और पिछली स्क्रीन की मेमोरी खाली करें। कम मेमोरी वाले डिवाइस पर उपयोगी है।
• Show Widget / Hide Widget: विजेट दिखाएँ या छिपाएँ। पॉप-अप, पैनल और अतिरिक्त जानकारी के लिए काम आता है।
• Set State: विजेट पर checked, disabled, focused या pressed जैसी स्थिति जोड़ें, हटाएँ या बदलें।
• Set Opacity: विजेट कितना दिखाई दे, यह तय करें — 100 पर पूरी तरह और 0 पर बिल्कुल नहीं।
• Set Properties: विजेट की जगह या आकार बदलें।
• Set Text: लेबल या बटन का टेक्स्ट बदलें।
• Set Sprite Mode: स्प्राइट का मोड बदलें, जैसे “Idle” से “Running”, या उसे शुरू/बंद करें।
• Animated Image Mode: एनिमेटेड इमेज शुरू करें, रोकें या फिर से चलाएँ।
• Play Animation: विजेट के लिए बनाई गई टाइमलाइन एनिमेशन चलाएँ।
• Modify Flag: अधिक नियंत्रण के लिए LVGL फ़्लैग जोड़ें, हटाएँ या बदलें। यह उन्नत विकल्प है।
• Call Function: अपने C फ़ंक्शन को नाम से कॉल करें। कोई विशेष काम करवाना हो तो उसका फ़ंक्शन फ़र्मवेयर में लिखें।

एक उदाहरण

मान लें Home स्क्रीन पर “Settings” बटन है और एक अलग Settings स्क्रीन बनी हुई है:

1. Settings बटन चुनें।
2. उससे Settings स्क्रीन तक कनेक्शन खींचें, या Events पैनल में उसे लक्ष्य चुनें।
3. Trigger में Clicked चुनें।
4. Action में Change Screen और Destination में Settings स्क्रीन चुनें।
5. चाहें तो Slide left ट्रांज़िशन चुनें, जिससे अगली स्क्रीन की ओर बढ़ने का एहसास हो।

play बटन दबाएँ और लाइव प्रीव्यू में Settings बटन आज़माएँ। स्क्रीन बदल जाएगी — बिना कोड लिखे या डिवाइस फ़्लैश किए।

इवेंट बदलें या हटाएँ

आपका हर इवेंट Events पैनल में कार्ड के रूप में दिखता है:

• बदलने के लिए कार्ड खोलें और ट्रिगर, एक्शन, लक्ष्य या उसकी सेटिंग बदलें।
• हटाने के लिए कार्ड पर ✕ दबाएँ। कैनवास से उसका कनेक्शन भी हट जाएगा।

एक विजेट पर कई इवेंट लगा सकते हैं, जैसे एक Pressed पर और दूसरा Released पर। इससे दबाने और छोड़ने पर अलग-अलग प्रतिक्रिया दे सकते हैं।

आगे क्या सीखें

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

• स्प्राइट गाइड से कई स्थितियों वाले विजेट बनाएँ और उन्हें Set Sprite Mode से चलाएँ।
• फ़ॉन्ट गाइड से साफ़ टेक्स्ट और कम फ़ाइल आकार पाएँ।
• ESP32 ट्यूटोरियल से इंटरैक्टिव UI एक्सपोर्ट करके डिवाइस पर फ़्लैश करें।