विज़ुअल ड्रैग एंड ड्रॉप LVGL एडिटर।

ESP32 टचस्क्रीन UI बनाएँ — विज़ुअली

PicoPixel एक ब्राउज़र-आधारित विज़ुअल LVGL एडिटर है जो आपको ड्रैग-एंड-ड्रॉप से टचस्क्रीन इंटरफ़ेस डिज़ाइन करने, लाइव सिम्युलेटर में प्रीव्यू करने, और किसी भी ESP32 प्रोजेक्ट के लिए प्रोडक्शन-रेडी C कोड एक्सपोर्ट करने देता है। कोई इंस्टॉलेशन नहीं। कोई क्रेडिट कार्ड नहीं। मिनटों में अपना पहला ESP32 UI डिज़ाइन करें।

शुरू करें। यह मुफ़्त है!

ESP32 डेवलपर PicoPixel क्यों उपयोग करते हैं

ESP32 के लिए टचस्क्रीन UI बनाने का मतलब आमतौर पर हाथ से सैकड़ों लाइन LVGL C कोड लिखना, अपने बोर्ड पर फ़्लैश करना, डिस्प्ले चेक करना, विजेट पोज़िशन एडजस्ट करना, और फिर से फ़्लैश करना होता है। यह काम करता है, लेकिन धीमा है — खासकर जब आप लेआउट और स्टाइलिंग पर इटरेट कर रहे हों।

PicoPixel उस चक्र को एक विज़ुअल ड्रैग-एंड-ड्रॉप एडिटर से बदलता है जो आपके ब्राउज़र में चलता है। LVGL विजेट्स को कैनवास पर ड्रैग करें, रंग, फ़ॉन्ट, और स्पेसिंग विज़ुअली स्टाइल करें, और WebAssembly द्वारा संचालित लाइव LVGL सिम्युलेटर में तुरंत परिणाम देखें। जब आपका डिज़ाइन तैयार हो, प्रोडक्शन-रेडी C कोड की ज़िप फ़ाइल एक्सपोर्ट करें — मानक LVGL 8.x API कॉल्स बिना किसी प्रोप्राइटरी डिपेंडेंसी के — और इसे अपने ESP-IDF, Arduino, या PlatformIO प्रोजेक्ट में जोड़ें।

चूँकि PicoPixel ब्राउज़र-आधारित है, आपके मौजूदा टूलचेन के साथ कुछ भी इंस्टॉल करने की ज़रूरत नहीं। और इंटीग्रेशन लचीला है: एक्सपोर्ट की गई UI फ़ाइलों को मैन्युअली अपने प्रोजेक्ट में जोड़ें, या ज़िप फ़ाइल Claude Code या GitHub Copilot जैसे AI कोड असिस्टेंट को दें और सेटअप उसे संभालने दें। सभी PicoPixel विशेषताएँ जानें, यह कैसे काम करता है देखें, या अन्य LVGL एडिटर्स के साथ पूर्ण तुलना पढ़ें।

ESP32 के साथ यह कैसे काम करता है

1. अपना इंटरफ़ेस डिज़ाइन करें

अपने ब्राउज़र में PicoPixel खोलें और नया प्रोजेक्ट शुरू करें। LVGL विजेट्स — बटन, लेबल, स्लाइडर, चार्ट, आर्क, स्विच, और अधिक — को कैनवास पर ड्रैग एंड ड्रॉप करें। अपने ESP32 की स्क्रीन से मैच करने के लिए डिस्प्ले रिज़ॉल्यूशन सेट करें: सामान्य SPI TFT के लिए 320×240, राउंड GC9A01 डिस्प्ले के लिए 240×240, या बड़े पैनल के लिए 800×480। रंग, फ़ॉन्ट, और स्पेसिंग विज़ुअली स्टाइल करें — इस स्तर पर कोई C कोड ज़रूरी नहीं।

2. लाइव LVGL सिम्युलेटर में प्रीव्यू करें

PicoPixel LVGL को WebAssembly में कम्पाइल करता है और इसे सीधे आपके ब्राउज़र में चलाता है। प्रीव्यू वास्तविक LVGL रेंडरिंग इंजन है — कोई मॉक-अप नहीं। अपने हार्डवेयर को छुए बिना टच इंटरैक्शन, स्क्रॉलिंग, और एनिमेशन टेस्ट करें। आप फ़ीडबैक के लिए टीम के साथियों या क्लाइंट्स के साथ सिम्युलेटर लिंक भी शेयर कर सकते हैं।

3. अपनी UI फ़ाइलें एक्सपोर्ट करें

अपने UI को LVGL C कोड (.c और .h फ़ाइलें) के रूप में ज़िप फ़ाइल एक्सपोर्ट करें। आउटपुट में विजेट निर्माण, स्टाइलिंग, लेआउट, और इवेंट बाइंडिंग शामिल हैं — सब मानक LVGL 8.x API कॉल्स का उपयोग करते हुए। कोई प्रोप्राइटरी डिपेंडेंसी नहीं और कोई PicoPixel रनटाइम लाइब्रेरी नहीं। LVGL v9.x सपोर्ट की योजना है।

4. इंटीग्रेट करें और फ़्लैश करें

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

ESP32-P4 पर टेस्ट किया गया

PicoPixel का UI एक्सपोर्ट ESP32-P4 पर टेस्ट और सत्यापित किया गया है — Espressif का नवीनतम और सबसे शक्तिशाली चिप। विशेष रूप से Waveshare और Guition ESP32-P4 डेवलपमेंट बोर्ड्स के साथ टेस्ट किया गया।

ESP32-P4 में समर्पित GPU और हार्डवेयर पिक्सेल-प्रोसेसिंग पाइपलाइन है, जो स्मूद एनिमेशन और हाई-रिज़ॉल्यूशन डिस्प्ले के साथ जटिल LVGL इंटरफ़ेस के लिए उत्कृष्ट बनाता है। चूँकि PicoPixel मानक LVGL C कोड जनरेट करता है, वही एक्सपोर्ट LVGL 8.x सपोर्ट करने वाले किसी भी ESP32 वेरिएंट पर काम करता है।

सपोर्टेड ESP32 बोर्ड और डिस्प्ले

ESP32 वेरिएंट

PicoPixel मानक LVGL कोड जनरेट करता है जो LVGL 8.x सपोर्ट वाले किसी भी ESP32 वेरिएंट पर काम करता है:

  • •ESP32 (ओरिजिनल) — सीमित SRAM; सरल UI के लिए सर्वोत्तम
  • •ESP32-S2 — USB OTG सपोर्ट, मध्यम डिस्प्ले क्षमता
  • •ESP32-S3 — अधिकांश डिस्प्ले प्रोजेक्ट्स के लिए अनुशंसित; PSRAM के साथ ड्यूअल-कोर और जटिल UI के लिए पर्याप्त शक्ति
  • •ESP32-C3 — RISC-V सिंगल-कोर; हल्के UI के लिए उपयुक्त
  • •ESP32-C6 — Wi-Fi 6 + Bluetooth 5.3; C3 जैसी डिस्प्ले क्षमता
  • •ESP32-P4 — समर्पित GPU और हार्डवेयर पिक्सेल-प्रोसेसिंग के साथ नवीनतम वेरिएंट; जटिल, हाई-रिज़ॉल्यूशन GUI के लिए उत्कृष्ट। Waveshare और Guition बोर्ड्स के साथ टेस्ट किया गया।

लोकप्रिय डेवलपमेंट बोर्ड

किसी भी LVGL-सक्षम ESP32 डेव बोर्ड के साथ संगत, जिसमें शामिल हैं:

  • •LILYGO T-Display / T-Display-S3
  • •M5Stack Core2 / CoreS3
  • •Waveshare ESP32-S3 / ESP32-P4 डिस्प्ले बोर्ड
  • •Guition ESP32-P4 डिस्प्ले बोर्ड
  • •Elecrow डिस्प्ले बोर्ड
  • •Adafruit Feather ESP32-S3 TFT
  • •Espressif ESP32-S3-BOX / BOX-3
  • •Sunton बोर्ड (लोकप्रिय बजट ESP32 डिस्प्ले बोर्ड)

संगत डिस्प्ले ड्राइवर

PicoPixel प्लेटफ़ॉर्म-अज्ञेयवादी LVGL कोड जनरेट करता है — डिस्प्ले ड्राइवर आपके LVGL पोर्ट कॉन्फ़िगरेशन द्वारा हैंडल किया जाता है। ESP32 पर LVGL के साथ काम करने वाले सामान्य डिस्प्ले कंट्रोलर:

  • •ST7789 (छोटे TFT के लिए सबसे सामान्य)
  • •ILI9341 (240×320 डिस्प्ले)
  • •ILI9488 (320×480 डिस्प्ले)
  • •GC9A01 (राउंड डिस्प्ले)
  • •ST7796 (बड़े डिस्प्ले)
  • •SSD1306 (छोटे OLED)
  • •MIPI DSI डिस्प्ले (ESP32-P4)

यदि आपका डिस्प्ले LVGL के साथ काम करता है, तो PicoPixel का आउटपुट उसके साथ काम करेगा।

ESP-IDF, Arduino, और PlatformIO के साथ काम करता है

ESP-IDF इंटीग्रेशन

PicoPixel का एक्सपोर्ट पूरी तरह से UI कोड है — इसमें lv_init(), डिस्प्ले ड्राइवर रजिस्ट्रेशन, या टिक हैंडलिंग शामिल नहीं है। आपके प्रोजेक्ट में पहले से काम करने वाला LVGL 8.x सेटअप होना चाहिए। PicoPixel का UI जोड़ने के लिए:

  1. 1.PicoPixel से अपना UI एक्सपोर्ट करें (.zip फ़ाइल डाउनलोड होती है)
  2. 2.अपने प्रोजेक्ट के components/ फ़ोल्डर के अंदर ui/ डायरेक्टरी बनाएँ
  3. 3.एक्सपोर्ट की गई फ़ाइलों को components/ui/ में अनज़िप करें
  4. 4.components/ui/ में CMakeLists.txt बनाएँ जो lvgl पर डिपेंडेंसी के साथ सोर्स को रजिस्टर करे
  5. 5.अपने main/CMakeLists.txt में REQUIRES लिस्ट में ui जोड़ें
  6. 6.अपने main.c में #include "ui/ui.h" शामिल करें और अपने डिस्प्ले सेटअप के बाद ui_init() कॉल करें
  7. 7.बिल्ड और फ़्लैश करें: idf.py build && idf.py flash

Arduino IDE इंटीग्रेशन

आपके स्केच में पहले से LVGL 8.x इंस्टॉल और काम करने वाला डिस्प्ले ड्राइवर कॉन्फ़िगर होना चाहिए।

  1. 1.PicoPixel से अपना UI एक्सपोर्ट करें (.zip फ़ाइल डाउनलोड होती है)
  2. 2.अपने स्केच की src/ डायरेक्टरी के अंदर ui/ फ़ोल्डर बनाएँ
  3. 3.एक्सपोर्ट की गई फ़ाइलों को src/ui/ में अनज़िप करें
  4. 4.अपनी .ino फ़ाइल में #include "src/ui/ui.h" शामिल करें
  5. 5.setup() में lv_init() और आपका डिस्प्ले ड्राइवर कॉन्फ़िगर होने के बाद ui_init() कॉल करें
  6. 6.Arduino IDE src/ में सभी .c फ़ाइलों को रिकर्सिवली ऑटो-कम्पाइल करता है — कोई बिल्ड कॉन्फ़िग बदलाव ज़रूरी नहीं
  7. 7.अपने ESP32 पर अपलोड करें

PlatformIO इंटीग्रेशन

आपके प्रोजेक्ट में पहले से lib_deps में LVGL 8.x और काम करने वाला डिस्प्ले ड्राइवर कॉन्फ़िगर होना चाहिए।

  1. 1.PicoPixel से अपना UI एक्सपोर्ट करें (.zip फ़ाइल डाउनलोड होती है)
  2. 2.एक्सपोर्ट की गई फ़ाइलों को src/ui/ में अनज़िप करें
  3. 3.main.cpp में #include "ui/ui.h" शामिल करें
  4. 4.अपने LVGL सेटअप के बाद ui_init() कॉल करें
  5. 5.कोई platformio.ini बदलाव ज़रूरी नहीं — PlatformIO src/ में सभी सोर्स ऑटो-कम्पाइल करता है
  6. 6.बिल्ड और फ़्लैश करें: pio run --target upload

AI-सहायित इंटीग्रेशन

तेज़ रास्ते के लिए, PicoPixel से ज़िप एक्सपोर्ट करें और इसे AI कोड असिस्टेंट को दें। Claude Code, GitHub Copilot, या Codex को बताएँ: "इन PicoPixel UI फ़ाइलों को मेरे ESP32 LVGL प्रोजेक्ट में जोड़ें" — अधिकांश असिस्टेंट फ़ाइल प्लेसमेंट, इंक्लूड्स, और बिल्ड कॉन्फ़िगरेशन स्वचालित रूप से हैंडल कर सकते हैं।

अक्सर पूछे जाने वाले प्रश्न

क्या PicoPixel ESP32 के साथ काम करता है?

हाँ। PicoPixel मानक LVGL C कोड जनरेट करता है जो किसी भी ESP32 वेरिएंट के लिए ESP-IDF, Arduino, या PlatformIO के साथ सीधे कम्पाइल होता है। एक्सपोर्ट किए गए कोड को Waveshare और Guition के ESP32-P4 बोर्ड्स पर टेस्ट किया गया है, और यह LVGL 8.x सपोर्ट करने वाले किसी भी ESP32 पर काम करता है।

PicoPixel के साथ कौन से ESP32 बोर्ड संगत हैं?

PicoPixel प्लेटफ़ॉर्म-अज्ञेयवादी LVGL कोड जनरेट करता है, इसलिए यह LVGL चला सकने वाले किसी भी ESP32 बोर्ड के साथ काम करता है — जिसमें LILYGO T-Display, M5Stack, Waveshare, Guition, Elecrow, Adafruit Feather, Espressif DevKits, Sunton बोर्ड, और अन्य शामिल हैं। यदि आपका बोर्ड LVGL चलाता है, तो PicoPixel का आउटपुट उसके साथ काम करेगा।

PicoPixel कौन सा LVGL वर्शन सपोर्ट करता है?

PicoPixel वर्तमान में LVGL 8.x को टारगेट करता है। LVGL v9.x के लिए सपोर्ट की योजना है।

क्या PicoPixel ESP-IDF या Arduino कोड एक्सपोर्ट करता है?

PicoPixel मानक LVGL C कोड (.c और .h फ़ाइलें) एक ज़िप फ़ाइल के रूप में एक्सपोर्ट करता है। कोड बिना किसी प्रोप्राइटरी डिपेंडेंसी के वैनिला LVGL API कॉल्स का उपयोग करता है, इसलिए यह ESP-IDF, Arduino, और PlatformIO के साथ काम करता है — बस फ़ाइलों को अपने मौजूदा प्रोजेक्ट में जोड़ें।

क्या मैं PicoPixel से ESP32 टचस्क्रीन UI बना सकता हूँ?

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

क्या PicoPixel ESP32 प्रोजेक्ट्स के लिए मुफ़्त है?

हाँ। PicoPixel मुफ़्त है — व्यावसायिक उपयोग सहित। कोई क्रेडिट कार्ड ज़रूरी नहीं।

ESP32 के लिए PicoPixel की तुलना SquareLine Studio से कैसे होती है?

PicoPixel ब्राउज़र-आधारित है (कोई इंस्टॉलेशन नहीं), रियल-टाइम सहयोग को सपोर्ट करता है, और इसमें लाइव LVGL सिम्युलेटर शामिल है। SquareLine Studio एक डेस्कटॉप एप्लिकेशन है जिसे व्यावसायिक उपयोग के लिए सशुल्क लाइसेंस की आवश्यकता होती है। विस्तृत तुलना के लिए, हमारी पूर्ण तुलना देखें।

अपना ESP32 UI बनाना शुरू करें — मुफ़्त

अपने ESP32 टचस्क्रीन इंटरफ़ेस को विज़ुअली डिज़ाइन करें, लाइव LVGL सिम्युलेटर में प्रीव्यू करें, और प्रोडक्शन-रेडी C कोड एक्सपोर्ट करें। कोई इंस्टॉलेशन नहीं। कोई क्रेडिट कार्ड नहीं। Chrome, Edge, Firefox, और Safari में काम करता है।

शुरू करें। यह मुफ़्त है!

उपयोग मुफ़्त है। कोई क्रेडिट कार्ड ज़रूरी नहीं। प्रश्न हैं? संपर्क करें।