स्पीडोमीटरकाउदाहरण

क्या शामिल है

• 480 x 480 की डैशबोर्ड स्क्रीन, जो चौकोर कैनवास के लिए बनी है और गोल डिस्प्ले के लिए भी बदली जा सकती है।
• LVGL आर्क गेज, जिसका मुख्य गति संकेतक कोड से अपडेट कर सकते हैं।
• बड़े अंकों में गति का लेबल, जो प्रीव्यू में 135 दिखाता है और स्क्रीन का प्रमुख हिस्सा है।
• इकाई का लेबल, जिसमें अभी km/h है। इसे mph, %, RPM, W या दूसरी इकाई से बदल सकते हैं।
• दूरी दिखाने वाला ओडोमीटर समूह, जिसमें 9138 km लिखा है। इसे यात्रा की दूरी, चलने का समय, बची हुई रेंज या किसी दूसरे सहायक मान के लिए इस्तेमाल कर सकते हैं।
• PRND गियर लेबल, जिनमें D को गोल संकेतक से उभारा गया है।
• गहरी पृष्ठभूमि वाला डैशबोर्ड, जिसमें साफ़ सफेद टेक्स्ट और लाल-गुलाबी गेज है।
• चित्रों पर कोई निर्भरता नहीं, इसलिए UI हल्की रहती है और उसके LVGL ऑब्जेक्ट बदले जा सकते हैं।
• फ़ॉन्ट की तीन शैलियाँ, जो स्क्रीनशॉट में Plus Jakarta Sans के अलग-अलग आकार और मोटाई से मेल खाती हैं।
• दोबारा इस्तेमाल किया जा सकने वाला एक विजेट, जो स्थानीय लाइब्रेरी में है और दूसरे PicoPixel प्रोजेक्ट में जोड़ा जा सकता है।

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

टेम्पलेट में केवल ज़रूरी संसाधन रखे गए हैं। Assets पैनल की स्थानीय लाइब्रेरी में ये चीज़ें हैं:

• Images: 0 — गेज कोई स्थिर स्क्रीनशॉट नहीं है।
• Colors: 0 — रंग सीधे डिज़ाइन में लगाए गए हैं।
• Fonts: 3 — Plus Jakarta Sans के अलग-अलग आकार।
• Widgets: 1 — दोबारा इस्तेमाल किया जा सकने वाला स्पीडोमीटर विजेट।

फ़ॉन्ट इस तरह चुने गए हैं कि प्रमुख और सहायक जानकारी अलग दिखे:

• PlusJakartaSans ExtraLight 16 — ओडोमीटर की इकाई जैसे छोटे सहायक टेक्स्ट के लिए।
• PlusJakartaSans Light 20 — km/h और गियर संकेत जैसे लेबल के लिए।
• PlusJakartaSans SemiBold 110 — बीच में गति का बड़ा मान दिखाने के लिए।

इससे एक्सपोर्ट किए गए LVGL प्रोजेक्ट में मुख्यतः संपादन योग्य लेबल, कंटेनर, आर्क और फ़ॉन्ट रहते हैं; अनावश्यक चित्र नहीं जुड़ते।

LVGL ऑब्जेक्ट की संरचना

स्क्रीनशॉट में चित्रों से भरे मॉकअप के बजाय छोटा और आसानी से एक्सपोर्ट होने वाला ढाँचा दिखता है। इसमें एक स्क्रीन, समूह बनाने वाले कंटेनर, कई लेबल, ओडोमीटर का समूह और मुख्य आर्क हैं।

• Screen 1 — 480 x 480 का कैनवास।
• मुख्य कंटेनर गेज का लेआउट सँभालता है और डैशबोर्ड को बीच में रखता है।
• ओडोमीटर का अंक और km इकाई एक समूह में हैं, ताकि उन्हें साथ खिसका सकें।
• बीच में गति दिखाने वाला बड़ा लेबल lv_label_set_text या lv_label_set_text_fmt से अपडेट किया जा सकता है।
• मुख्य गेज LVGL आर्क है, जिसका मान lv_arc_set_value से बदल सकते हैं।
• PRND पंक्ति लेबल से बनी है। सक्रिय गियर को छोटे गोल कंटेनर से उभारा गया है।

स्पीडोमीटर के लिए यह ढाँचा उपयोगी है: डायल बदला जा सकता है, टेक्स्ट लगातार अपडेट हो सकता है और एक्सपोर्ट किया गया कोड सामान्य LVGL तरीकों का इस्तेमाल करता है।

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

यह केवल देखने में अच्छा स्क्रीनशॉट नहीं है। इसमें वे ऑब्जेक्ट इस्तेमाल किए गए हैं जिन्हें LVGL एम्बेडेड हार्डवेयर पर अच्छी तरह प्रदर्शित कर सकता है।

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

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

इस मुफ्त LVGL गेज को अपने उत्पाद या डेमो के अनुसार ढालें।

• गति की सीमा की जगह 0-100, 0-240, 0-8000 RPM, बैटरी प्रतिशत, थ्रॉटल की स्थिति या तापमान दिखाएँ।
• डिस्प्ले के आकार के अनुसार आर्क की मोटाई, शुरुआती कोण, अंतिम कोण और रंग बदलें।
• लाल-गुलाबी रंग की जगह अपने ब्रांड के रंग, चेतावनी के रंग या मान की सीमा के अनुसार बदलते रंग रखें।
• km/h को mph, RPM, %, W, V, A, C या F से बदलें।
• ओडोमीटर की पंक्ति में यात्रा की दूरी, चालू रहने का समय, बची हुई रेंज, पूरे किए गए चक्कर या कुल ऊर्जा दिखाएँ।
• PRND की जगह ECO, SPORT, PARK, AUTO या MANUAL जैसे अपने मोड रखें।
• छोटे आइकन, बैटरी बार, चेतावनी संकेत, दिशा संकेतक या RPM के लिए दूसरा आर्क जोड़ें।
• मान को अचानक बदलने के बजाय LVGL टाइमर या एनिमेशन कॉलबैक से धीरे-धीरे बदलें।

लाइव डेटा जोड़ना

PicoPixel से एक्सपोर्ट की गई UI फ़ाइलें अपने प्रोजेक्ट में रखें। फिर फ़र्मवेयर लूप, इवेंट हैंडलर या LVGL टाइमर से नाम वाले ऑब्जेक्ट अपडेट करें। वास्तविक नाम इस बात पर निर्भर करते हैं कि एक्सपोर्ट से पहले विजेट को क्या नाम दिए गए थे। रनटाइम पर तरीका कुछ ऐसा होता है:

static void dashboard_set_speed(int speed_kph, uint32_t odometer_km)
{
    lv_arc_set_value(ui_speed_arc, speed_kph);
    lv_label_set_text_fmt(ui_speed_value_label, "%d", speed_kph);
    lv_label_set_text_fmt(ui_odo_label, "%lu km", (unsigned long)odometer_km);
}

गति का डेटा GPS, CAN, UART, BLE, मोटर कंट्रोलर या सिम्युलेशन से आए, तो उसे पढ़ने और समझने वाला हार्डवेयर-संबंधी कोड UI कोड से अलग रखें। UI फ़ंक्शन को तैयार मान दें, ताकि उसका काम केवल LVGL ऑब्जेक्ट अपडेट करना हो।

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

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

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

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

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

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

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

• LVGL स्पीडोमीटर के डेमो
• ESP32 डैशबोर्ड के प्रोटोटाइप
• गोल डिस्प्ले वाले वाहन मीटर
• ई-बाइक, स्कूटर, गो-कार्ट या RC उपकरणों का डेटा दिखाने वाली स्क्रीन
• औद्योगिक मीटर पैनल
• सिम्युलेटर डैशबोर्ड
• मोटर की गति या RPM दिखाने वाले डिस्प्ले
• बैटरी रेंज और ड्राइव मोड के इंटरफ़ेस

अधिक जटिल वाहन मीटर बनाने से पहले सामान्य विजेट से LVGL गेज बनाना सीखने के लिए भी यह उपयोगी उदाहरण है।