PicoPixel के बारे में — ब्राउज़र-आधारित LVGL एडिटर
PicoPixel क्या है?
LVGL द्वारा संचालित एम्बेडेड यूज़र इंटरफ़ेस के लिए बनाया गया ब्राउज़र-आधारित विज़ुअल डिज़ाइन टूल।
कैनवास पर विजेट खींचकर रखें, हर पिक्सेल तक उनका रूप तय करें और विज़ुअल इवेंट एडिटर से इवेंट हैंडलर जोड़ें। दोबारा इस्तेमाल होने वाले एसेट सहेजें और अपने प्लेटफ़ॉर्म के लिए तैयार C कोड एक्सपोर्ट करें। इसे एम्बेडेड UI के लिए Figma समझें।
सब कुछ ब्राउज़र में चलता है, कुछ भी इंस्टॉल करने की ज़रूरत नहीं। PicoPixel उपयोग के लिए मुफ़्त है।
बटन, स्लाइडर, स्विच, आर्क, चार्ट, ड्रॉपडाउन, रोलर, चेकबॉक्स, टेक्स्ट एरिया, टैबव्यू, कंटेनर, इमेज
C कोड लिखे बिना तय करें कि UI कैसे प्रतिक्रिया देगा
WebAssembly-संचालित, हार्डवेयर जैसा पिक्सेल-फ़ॉर-पिक्सेल प्रीव्यू
लाइव कर्सर, एनोटेशन, शेयर करने योग्य सिम्युलेटर लिंक
सेशन के सभी बदलावों का रिकॉर्ड; एक क्लिक में पिछली स्थिति पर लौटें
ESP32, STM32, RP2040 और अन्य के लिए साफ़ LVGL 8.x कोड
जिनके काम ने हमारी नींव रखी
LVGL और LVGL टीम के शानदार काम के बिना यह संभव नहीं होता। लाइब्रेरी को पूरी तरह ओपन-सोर्स, मुफ़्त और सुलभ रखने के उनके निर्णय ने PicoPixel जैसे टूल्स को संभव बनाया।
LVGL को आगे बढ़ाने वाले हर व्यक्ति का हम धन्यवाद करते हैं — मुख्य रखरखाव करने वाली टीम, समस्याएँ बताने और ड्राइवर लिखने वाले समुदाय के सदस्य, और वे सभी डेवलपर जो अपने प्रोजेक्ट में LVGL चुनते हैं।
PicoPixel का फ्रंटएंड Penpot के एक फोर्क के रूप में शुरू हुआ। हम Penpot टीम और समुदाय के ओपन-सोर्स कार्य से मिली नींव के लिए बेहद आभारी हैं। PicoPixel के स्थिर रिलीज़ तक पहुँचते ही हमारा लक्ष्य अपना संस्करण जारी करना है।
LVGL के लिए PicoPixel बनाने में मूल कोडबेस के बड़े हिस्से बदलने पड़े। हमने कई विशेष रेंडरर बनाए, जो एक सामान्य डिज़ाइन टूल को LVGL के अपने एडिटर और सिम्युलेटर में बदलते हैं। संरचना में इन बदलावों की वजह से ही PicoPixel आज एक संपूर्ण LVGL प्लेटफ़ॉर्म है; इनके बिना यह केवल एक साधारण प्लगइन रह जाता।
PicoPixel के लॉन्च पर LVGL टीम ने संपर्क करके खूब हौसला बढ़ाया और बधाई दी।
उन्होंने प्रोजेक्ट का स्वागत किया और LVGL के लिए नए टूल बनते देखकर खुशी जताई।
हमने इसे क्यों बनाया
एम्बेडेड डिवाइस के लिए UI बनाने में आम तौर पर पिक्सेल की जगह हाथ से कोड में लिखनी पड़ती है और निचले स्तर की ग्राफ़िक्स लाइब्रेरी से काम लेना पड़ता है। पहले C कोड लिखें, फिर डिवाइस पर फ़्लैश करें, डिस्प्ले देखें, बदलाव करें और फिर फ़्लैश करें।
हम चाहते हैं कि एम्बेडेड डेवलपर को भी वेब और मोबाइल डेवलपर जैसा विज़ुअल डिज़ाइन अनुभव मिले। PicoPixel में विजेट खींचकर डिज़ाइन बनाएँ, लाइव सिम्युलेटर से देखें कि हार्डवेयर पर वह कैसा दिखेगा और टीम के साथ एक ही समय पर काम करें।
यह कैसे काम करता है
कैनवास से हार्डवेयर तक छह चरणों में।
डिज़ाइन
LVGL विजेट को कैनवास पर खींचकर रखें और उनका रंग, आकार और लेआउट देखकर तय करें।
इंटरैक्शन जोड़ें
बटन दबने पर स्क्रीन बदलें या स्लाइडर की वैल्यू बदलने पर लेबल अपडेट करें — बिना C कोड लिखे।
प्रीव्यू
WebAssembly द्वारा संचालित लाइव LVGL सिम्युलेटर में अपना UI देखें। वास्तविक रेंडरिंग इंजन, कोई मॉक-अप नहीं।
एक्सपोर्ट
तैयार LVGL C कोड (.c और .h फ़ाइलें) बनाएँ। किसी अलग बंद-स्रोत लाइब्रेरी की ज़रूरत नहीं पड़ती।
फ़्लैश
एक्सपोर्ट की गई फ़ाइलों को अपने ESP-IDF, Arduino, या PlatformIO प्रोजेक्ट में जोड़ें और हार्डवेयर पर फ़्लैश करें।
सुधार करते रहें
बिल्ट-इन वर्शन कंट्रोल का उपयोग करके अपनी टीम के साथ रियल टाइम में सहयोग करें।
Ed की ओर से एक नोट
अभी मैं एक इंस्ट्रूमेंट डिस्प्ले क्लस्टर बना रहा हूँ। मेरा काफ़ी समय टोक्यो और शेनझेन में बीतता है। अगर आप हार्डवेयर बना रहे हैं या इनमें से किसी शहर में हैं, तो कभी मिलकर एक ड्रिंक के साथ काम की बातें करना अच्छा लगेगा।
PicoPixel से पहले मैंने कुछ साल एक बड़ी ब्रोकरेज फ़र्म में काम किया। फिर एक स्टार्टअप में, जिसे बाद में Apple ने खरीदा, Watch के कुछ प्रोटोटाइप पर काम किया। वहीं से दोबारा हार्डवेयर पर काम करने की इच्छा जगी और आखिरकार PicoPixel बना।
आप क्या बना रहे हैं और PicoPixel में कौन से बदलाव देखना चाहते हैं, यह सुनना मुझे अच्छा लगेगा। बेझिझक संपर्क करें।
ओपन बीटा
प्रोजेक्ट की मौजूदा स्थिति
PicoPixel अभी ओपन बीटा में है। इसे फिलहाल एक ही डेवलपर बना रहा है और संभाल रहा है। नए विजेट लगातार जुड़ रहे हैं, LVGL v9.x सपोर्ट की योजना है और नई सुविधाएँ नियमित रूप से आ रही हैं। हाल ही में आया Animation मोड भी इनमें शामिल है, जिसमें टाइमलाइन पर कीफ़्रेम से एनिमेशन बनाए जा सकते हैं।
जैसे-जैसे हमारी व्यवस्था बढ़ रही है, कुछ अस्थायी सीमाएँ आ सकती हैं। आपके धैर्य और सुझाव हमारे लिए बहुत मायने रखते हैं। कोई दिक्कत आए तो बेझिझक बताएँ।
अपना LVGL इंटरफ़ेस मुफ़्त में बनाना शुरू करें
एम्बेडेड UI को सीधे कैनवास पर डिज़ाइन करें, लाइव LVGL सिम्युलेटर में आज़माएँ और तैयार C कोड एक्सपोर्ट करें। ब्राउज़र में PicoPixel खोलकर शुरू करें; कुछ इंस्टॉल करने या क्रेडिट कार्ड देने की ज़रूरत नहीं है।
मुफ़्त में शुरू करें