सर्वश्रेष्ठ ड्रैग-एंड-ड्रॉप LVGL एडिटर और GUI बिल्डर।
PicoPixel कैसे काम करता है
PicoPixel में LVGL इंटरफ़ेस कोड लिखकर शुरू करने के बजाय ड्रैग-एंड-ड्रॉप से बना सकते हैं। खाली कैनवास से मिनटों में डिज़ाइन तैयार करें, लाइव LVGL सिम्युलेटर में आज़माएँ और साफ़ C कोड एक्सपोर्ट करें। कुछ इंस्टॉल नहीं करना पड़ता।
मुफ़्त में शुरू करेंडिज़ाइन से डिवाइस तक 6 चरणों में
अपना इंटरफ़ेस डिज़ाइन करें
ब्राउज़र में PicoPixel खोलें। पैलेट से LVGL विजेट कैनवास पर खींचें और उनका रंग, आकार तथा लेआउट तय करें। हर पिक्सेल पर नियंत्रण मिलता है; कुछ डाउनलोड या इंस्टॉल नहीं करना पड़ता।
- •बटन, लेबल, स्लाइडर, स्विच, आर्क, चार्ट, ड्रॉपडाउन, रोलर, चेकबॉक्स, टेक्स्ट एरिया, टैबव्यू, कंटेनर और इमेज
- •अपने हार्डवेयर के अनुसार डिस्प्ले रिज़ॉल्यूशन चुनें
- •रंग, बॉर्डर, पैडिंग, फ़ॉन्ट, अपारदर्शिता, ग्रेडिएंट और छाया तय करें
- •विजेट को सीध में रखने और बराबर दूरी पर बाँटने के टूल इस्तेमाल करें
- •कई पेज वाले इंटरफ़ेस के लिए स्क्रीन और लेयर व्यवस्थित करें
इंटरैक्शन जोड़ें
विज़ुअल Events Editor से तय करें कि विजेट क्या करेंगे। C कोड नहीं लिखना पड़ता; PicoPixel LVGL इवेंट कॉलबैक अपने-आप बनाता है।
- •बटन दबने पर → दूसरी स्क्रीन खोलें
- •स्लाइडर की वैल्यू बदलने पर → लेबल अपडेट करें
- •चेकबॉक्स बदलने पर → पैनल दिखाएँ या छिपाएँ
- •ड्रॉपडाउन में विकल्प चुनने पर → स्टाइल बदलें या एक्शन चलाएँ
- •विजेट पर एक्शन खींचकर जोड़ें; कॉलबैक का कोड नहीं चाहिए
लाइव सिम्युलेटर में आज़माएँ
PicoPixel, LVGL को WebAssembly में कंपाइल करके सीधे ब्राउज़र में चलाता है। प्रीव्यू में असली LVGL इंजन आपका UI दिखाता है।
- •देखें कि हार्डवेयर पर UI कैसा दिखेगा
- •टच, स्क्रॉल और एनिमेशन आज़माएँ
- •स्क्रीन पर संकेत बताएँगे कि कहाँ टैप या स्क्रॉल कर सकते हैं
- •टीम या क्लाइंट को सिम्युलेटर लिंक भेजें; उन्हें डेवलपमेंट का सेटअप नहीं चाहिए
तैयार कोड एक्सपोर्ट करें
साफ़-सुथरी LVGL C सोर्स फ़ाइलें डाउनलोड करें। मानक LVGL API होने के कारण इन्हें किसी भी LVGL प्रोजेक्ट में जोड़ सकते हैं। किसी बंद-स्रोत लाइब्रेरी की ज़रूरत नहीं है।
- •विजेट बनाने और लेआउट तय करने का कोड
- •स्टाइल की परिभाषाएँ
- •इवेंट हैंडलर के कनेक्शन
- •फ़ॉन्ट और इमेज एसेट के संदर्भ
- •मानक LVGL 8.x API; अलग PicoPixel रनटाइम लाइब्रेरी नहीं
प्रोजेक्ट में जोड़ें और फ़्लैश करें
फ़ाइलें अपने ESP-IDF, Arduino या PlatformIO प्रोजेक्ट में जोड़ें। कंपाइल करके डिवाइस पर फ़्लैश करें। UI सिम्युलेटर से पिक्सेल-दर-पिक्सेल मेल खाता है।
- •ESP32, STM32, Arduino, Raspberry Pi Pico और अन्य LVGL-सक्षम प्लेटफ़ॉर्म पर काम करता है
- •UI हेडर शामिल करें और डिस्प्ले ड्राइवर तैयार होने के बाद ui_init() कॉल करें
- •अधिकांश सेटअप में बिल्ड सिस्टम बदलना नहीं पड़ता
- •चाहें तो ज़िप AI कोडिंग असिस्टेंट को देकर फ़ाइलें जुड़वाएँ
टीम के साथ सुधार करते रहें
टीम के सदस्यों को प्रोजेक्ट में बुलाएँ और एक ही कैनवास पर साथ काम करें। बिल्ट-इन वर्शन कंट्रोल में बदलाव देखें और ज़रूरत हो तो पिछली स्थिति पर लौटें।
- •साथ संपादन करें, एक-दूसरे के कर्सर देखें और टिप्पणियाँ व नोट जोड़ें
- •सेशन के हर बदलाव के रिकॉर्ड के साथ वर्शन कंट्रोल
- •पिछली स्थिति पर लौटें और वर्शन की तुलना करें
- •काम की समीक्षा के लिए संबंधित लोगों को सिम्युलेटर लिंक भेजें
LVGL के लिए ड्रैग-एंड-ड्रॉप क्यों?
LVGL में परंपरागत तरीके से UI बनाने के लिए हर विजेट की जगह पिक्सेल के हिसाब से C कोड में लिखते हैं, फ़ंक्शन से स्टाइल लगाते हैं और हर बदलाव पर फिर कंपाइल करते हैं। यह तरीका काम करता है, लेकिन नतीजा देखने में समय लगता है और केवल कोड पढ़कर डिज़ाइन समझना मुश्किल होता है।
PicoPixel में बटन कैनवास पर खींचें, उसका आकार और रंग बदलें, लेबल जोड़ें और नतीजा तुरंत देखें। लाइव LVGL सिम्युलेटर वही दिखाता है जो हार्डवेयर पर आएगा। काम पूरा हो तो साफ़ C कोड एक्सपोर्ट करें, जो ESP32, STM32, Arduino और दूसरे LVGL-सक्षम प्लेटफ़ॉर्म के लिए कंपाइल होता है।
इससे प्रोटोटाइप जल्दी बनते हैं और डिज़ाइनर व इंजीनियर एक साथ काम कर सकते हैं। एक्सपोर्ट में वही इस्तेमाल के लिए तैयार LVGL कोड मिलता है जिसे आप हाथ से लिखते। सभी सुविधाएँ देखें या दूसरे LVGL एडिटर से तुलना पढ़ें।
अक्सर पूछे जाने वाले प्रश्न
क्या PicoPixel के लिए कुछ इंस्टॉल करना होगा?
नहीं। ब्राउज़र में एडिटर खोलें, साइन इन करें और डिज़ाइन शुरू करें। डेस्कटॉप ऐप, प्लगइन या SDK इंस्टॉल करने की ज़रूरत नहीं है।
एडिटर में कौन-से LVGL विजेट मिलते हैं?
बटन, लेबल, स्लाइडर, स्विच, ड्रॉपडाउन, रोलर, आर्क, बार, चार्ट, इमेज, चेकबॉक्स, टेक्स्ट एरिया, टैबव्यू, कंटेनर और दूसरे मुख्य LVGL विजेट उपलब्ध हैं। नए विजेट लगातार जोड़े जा रहे हैं।
लाइव सिम्युलेटर कितना सटीक है?
यह WebAssembly में कंपाइल किया गया असली LVGL इंजन चलाता है। प्रीव्यू CSS से बनाया गया अनुमान नहीं है; वह आपके हार्डवेयर से पिक्सेल-दर-पिक्सेल मेल खाता है।
एक्सपोर्ट किस फ़ॉर्मेट में मिलता है?
PicoPixel एक ज़िप फ़ाइल देता है, जिसमें पढ़ने और समझने में आसान LVGL C कोड (.c और .h फ़ाइलें) होता है। इसमें विजेट बनाना, उनका रूप और लेआउट तय करना तथा इवेंट हैंडलर जोड़ना शामिल है। सभी कॉल मानक LVGL API की हैं; किसी बंद-स्रोत लाइब्रेरी की ज़रूरत नहीं पड़ती।
क्या एक्सपोर्ट ESP-IDF, Arduino या PlatformIO में जोड़ सकता हूँ?
हाँ। मानक LVGL API होने के कारण कोड LVGL वाले सभी बिल्ड सिस्टम के साथ चलता है, जिनमें ESP-IDF, Arduino IDE और PlatformIO शामिल हैं। फ़ाइलें अपने प्रोजेक्ट में जोड़ें और डिस्प्ले ड्राइवर तैयार होने के बाद ui_init() कॉल करें। ESP32 गाइड में प्लेटफ़ॉर्म के अनुसार निर्देश देखें।
क्या PicoPixel मुफ़्त है?
निजी और शौकिया इस्तेमाल के लिए हाँ; क्रेडिट कार्ड नहीं चाहिए। व्यावसायिक उपयोग $17/माह ($204/वर्ष) से शुरू होता है। उपयोगी सुविधाओं वाला मुफ़्त प्लान हमेशा रहेगा।
अपना LVGL इंटरफ़ेस मुफ़्त में बनाना शुरू करें
एम्बेडेड UI को सीधे कैनवास पर डिज़ाइन करें, लाइव LVGL सिम्युलेटर में आज़माएँ और तैयार C कोड एक्सपोर्ट करें। ब्राउज़र में PicoPixel खोलकर शुरू करें; कुछ इंस्टॉल करने या क्रेडिट कार्ड देने की ज़रूरत नहीं है।
मुफ़्त में शुरू करें