इवेंट के उदाहरण - टेम्पलेट

परिचय

इस मुफ्त LVGL इवेंट टेम्पलेट से सीखें कि हर कॉलबैक खुद लिखे बिना इंटरफ़ेस में क्रियाएँ कैसे जोड़ी जाती हैं। PicoPixel के इस प्रोजेक्ट में 480 x 480 की स्क्रीन पर बटन हैं, जिन्हें इवेंट एडिटर से अलग-अलग क्रियाओं से जोड़ा गया है। हर बटन का असर स्क्रीन पर दिखाई देता है।

यह उदाहरण रोज़मर्रा के LVGL इंटरैक्शन समझाता है: बटन क्लिक करके किसी दूसरे ऑब्जेक्ट को बदलना, पारदर्शिता घटाना-बढ़ाना, टेक्स्ट बदलना, आकार बदलना और एनिमेशन चलाना। इसे टच वाले ESP32 डैशबोर्ड, कियोस्क, स्मार्ट होम नियंत्रण, पहनने वाले उपकरणों के मेन्यू या सेटिंग पैनल की शुरुआत के लिए इस्तेमाल करें। जहाँ भी बटन दबाने की प्रतिक्रिया तुरंत दिखानी हो, वहाँ ये तरीके काम आएँगे।

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

क्या शामिल है

480 x 480 की LVGL स्क्रीन, जो छोटे डिस्प्ले और जल्दी प्रयोग करने के लिए उपयुक्त है।
पाँच बटन के उदाहरण, जिनमें हर बटन अलग प्रतिक्रिया दिखाता है।
पारदर्शिता के नियंत्रण: Low Opacity और High Opacity बटन एक ही चित्र से जुड़े हैं।
टेक्स्ट बदलने का उदाहरण: Change Text बटन लेबल का टेक्स्ट बदलता है।
गुण बदलने का उदाहरण: Set Properties - Size लक्ष्य ऑब्जेक्ट का आकार बदलता है।
एनिमेशन शुरू करने का उदाहरण: Play Animation इवेंट से गति या ट्रांज़िशन चलाता है।
इवेंट एडिटर के कनेक्शन का प्रीव्यू, जिसमें जोड़ने वाली रेखाएँ और Clicked ट्रिगर नोड दिखते हैं।
इंस्पेक्टर में क्रिया की सेटिंग, जिनमें स्रोत, ट्रिगर, क्रिया, पारदर्शिता का मान और लक्ष्य शामिल हैं।
लक्ष्य के रूप में चित्र, जिनमें साधारण सियान PicoPixel ग्राफ़िक है, ताकि बदलाव साफ़ दिखें।
Doto 32 फ़ॉन्ट, जिससे कैनवास पर बिंदुओं वाला टेक्स्ट दिखाया गया है।

प्रोजेक्ट के एसेट

टेम्पलेट छोटा रखा गया है, ताकि उसकी पूरी बनावट एक नज़र में समझ आ जाए। Assets पैनल की स्थानीय लाइब्रेरी में ये संसाधन हैं:

Images: 1 — 500 x 500 का सियान ग्राफ़िक, जिसका इस्तेमाल कई लक्ष्य चित्रों में किया गया है।
Colors: 0 — रंग सीधे डिज़ाइन में लगाए गए हैं।
Fonts: 1 — बिंदुओं वाले लेबल के लिए Doto 32।
Widgets: 0 — उदाहरण सहेजे गए विजेट के बजाय स्क्रीन पर इवेंट जोड़ना सिखाता है।

लेयर पैनल में एक ही स्क्रीन के सभी हिस्से दिखते हैं:

Screen 1 — 480 x 480 का कैनवास।
Button 1 से Button 5 — क्लिक करने पर क्रियाएँ शुरू करने वाले बटन।
Image 1, Image 2 और Image 3 — वे चित्र जिनकी पारदर्शिता या आकार बदलता है, या जिन पर एनिमेशन चलता है।
Label 1 — टेक्स्ट बदलने वाले उदाहरण का लक्ष्य।

सीखने में आसानी इसलिए होती है क्योंकि स्रोत और लक्ष्य, दोनों उसी स्क्रीन पर दिखाई देते हैं।

इवेंट एडिटर की संरचना

Events व्यू खोलने पर PicoPixel, LVGL लेआउट के ऊपर इंटरैक्शन का ग्राफ़ दिखाता है। स्क्रीनशॉट में प्रोजेक्ट पर Contains Events लिखा है और बटन से उनके लक्ष्य तक कनेक्शन की रेखाएँ जाती हैं।

Low Opacity और High Opacity में Clicked ट्रिगर है; दोनों एक ही चित्र पर असर डालते हैं।
Change Text का Clicked ट्रिगर बिंदुओं वाले टेक्स्ट लेबल से जुड़ा है।
Set Properties - Size का Clicked ट्रिगर उस चित्र से जुड़ा है जिसका आकार बदलना है।
Play Animation का Clicked ट्रिगर उस चित्र से जुड़ा है जिस पर एनिमेशन चलना है।
दाईं ओर के इवेंट पैनल में चुने हुए इवेंट के Source, Trigger, Action, Opacity जैसे मान और Destination दिखते हैं।

इस उदाहरण का मुख्य लाभ यही है: आप साफ़ देख सकते हैं कि उपयोगकर्ता की कौन-सी क्रिया किस LVGL ऑब्जेक्ट को बदलती है। ट्रिगर और लक्ष्य का संबंध कोड के अंदर छिपा नहीं रहता।

TIP

एक्सपोर्ट से पहले प्रमुख ऑब्जेक्ट को स्पष्ट नाम दें, जैसे btn_low_opacity, btn_high_opacity, btn_change_text, btn_set_size, btn_play_animation, target_image और status_label। इससे एक्सपोर्ट किए गए LVGL इवेंट कॉलबैक समझना आसान होता है।

LVGL के लिए यह तरीका क्यों उपयोगी है

LVGL ऐप में अक्सर छोटे-छोटे इंटरैक्शन चाहिए होते हैं: बटन क्लिक करना, लेबल बदलना, ऑब्जेक्ट की अवस्था बदलना, चित्र खिसकाना, दूसरी स्क्रीन खोलना या एनिमेशन शुरू करना। इस उदाहरण में इन तरीकों को देखकर अपने प्रोजेक्ट में दोबारा इस्तेमाल कर सकते हैं।

बटन LVGL के मूल इनपुट ऑब्जेक्ट हैं। यही तरीका टच, एनकोडर फ़ोकस या दूसरे इनपुट ड्राइवर के साथ काम करता है।
ट्रिगर स्पष्ट दिखता है। Clicked नोड बताते हैं कि प्रत्येक क्रिया कब शुरू होती है।
लक्ष्य सामान्य LVGL ऑब्जेक्ट हैं, जैसे चित्र और लेबल। इसलिए एक्सपोर्ट के बाद उन्हें फ़र्मवेयर से भी बदल सकते हैं।
पारदर्शिता और अन्य गुण बदलने में कम संसाधन लगते हैं, इसलिए ये उदाहरण छोटे एम्बेडेड डिस्प्ले के लिए उपयुक्त हैं।
एनिमेशन का कनेक्शन दिखाता है कि उपयोगकर्ता का इवेंट कैसे ऐसा एनिमेशन शुरू करता है जो अपने आप आगे चलता रहता है।
प्रोजेक्ट मानक LVGL 8.x UI कोड में एक्सपोर्ट होता है। इसे ESP-IDF, Arduino, PlatformIO, STM32, Zephyr या किसी अन्य LVGL बिल्ड में जोड़ सकते हैं।

रनटाइम पर इवेंट सँभालना

PicoPixel इवेंट जोड़ने का कोड बना सकता है। सामान्य LVGL कॉलबैक में भी यही तरीका होता है। फ़र्मवेयर के अपने तर्क से UI को आगे बढ़ाना हो, तो पहले इवेंट का प्रकार जाँचें और फिर लक्ष्य ऑब्जेक्ट बदलें।

static void low_opacity_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_obj_set_style_opa(ui_target_image, LV_OPA_30, 0);
}

static void change_text_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_label_set_text(ui_status_label, "Clicked");
}

सामान्य क्रियाएँ विज़ुअल एडिटर से जोड़ें। अपने C कॉलबैक उन कामों के लिए रखें जो फ़र्मवेयर की स्थिति, सेंसर डेटा, उपकरण की सेटिंग या नेटवर्क से मिले जवाब पर निर्भर करते हैं।

अपनी ज़रूरत के अनुसार बदलें

इस मुफ्त LVGL इंटरैक्शन टेम्पलेट के डेमो नियंत्रणों की जगह अपने उत्पाद के नियंत्रण रखें।

पाँच डेमो बटनों को सेटिंग स्विच, मेन्यू विकल्प, डैशबोर्ड नियंत्रण या हार्डवेयर कमांड से बदलें।
पारदर्शिता से सक्रिय और निष्क्रिय, चेतावनी या चुनी हुई और न चुनी हुई अवस्था दिखाएँ।
टेक्स्ट बदलने की क्रिया से Connected, Saving, Armed, Charging या Complete जैसे स्थिति संदेश दिखाएँ।
आकार बदलने के उदाहरण को प्रगति संकेतक, फैलता हुआ कार्ड, बटन दबने के प्रभाव या धड़कती सूचना में बदलें।
एनिमेशन से स्क्रीन बदलने का प्रभाव, पुष्टि, लोडिंग या ध्यान खींचने वाला संकेत दिखाएँ।
एक स्क्रीन के उदाहरण समझने के बाद कई LVGL स्क्रीन के बीच नेविगेशन जोड़ें।
बटनों को फ़र्मवेयर के असली कामों से जोड़ें, जैसे चमक बदलना, रिले चालू-बंद करना, मोड चुनना या कैलिब्रेशन शुरू करना।

अपने प्रोजेक्ट में एक्सपोर्ट करना

टेम्पलेट को PicoPixel में खोलें, इवेंट ग्राफ़ देखें और प्रमुख स्रोत व लक्ष्य ऑब्जेक्ट के नाम बदलें। फिर प्रोजेक्ट को LVGL C कोड में एक्सपोर्ट करें। बनी हुई फ़ाइलों को दूसरे PicoPixel एक्सपोर्ट की तरह अपने मौजूदा एम्बेडेड प्रोजेक्ट में जोड़ सकते हैं।

ESP32 प्रोजेक्ट के लिए सामान्य क्रम यह है:

डिस्प्ले और इनपुट ड्राइवर सेट करें।
इवेंट टेम्पलेट खोलकर बटन, लेबल, चित्र और क्रियाएँ अपनी ज़रूरत के अनुसार बदलें।
PicoPixel UI को LVGL C में एक्सपोर्ट करें।
एक्सपोर्ट की गई फ़ाइलें अपने ESP-IDF, Arduino या PlatformIO प्रोजेक्ट में जोड़ें।
LVGL और डिस्प्ले ड्राइवर तैयार होने के बाद ui_init() कॉल करें।
अपना फ़र्मवेयर कॉलबैक केवल उन कामों के लिए जोड़ें जो विज़ुअल इवेंट एडिटर से नहीं हो सकते।

अधिक जानकारी के लिए PicoPixel इवेंट एडिटर की गाइड, ESP32 पर LVGL UI बनाने का ट्यूटोरियल और PicoPixel टेम्पलेट इस्तेमाल करने की गाइड देखें।

कहाँ इस्तेमाल करें

यह टेम्पलेट इन कामों की शुरुआत के लिए उपयोगी है:

LVGL इवेंट सीखना
बटन क्लिक करने की प्रतिक्रिया दिखाना
ESP32 टच इंटरफ़ेस का प्रोटोटाइप बनाना
सेटिंग स्क्रीन और नियंत्रण पैनल बनाना
स्मार्ट होम डैशबोर्ड बनाना
पहनने वाले या हाथ में पकड़े जाने वाले उपकरणों के मेन्यू बनाना
इवेंट से एनिमेशन शुरू करना
टेक्स्ट और चित्र की अवस्था बदलना
समझना कि PicoPixel के विज़ुअल इवेंट LVGL में कैसे काम करते हैं

इवेंटकेउदाहरण