ESP32 LVGL ट्यूटोरियल: एक टचस्क्रीन UI बनाएं

ESP32 UI के लिए विज़ुअल एडिटर क्यों उपयोग करें?

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

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

आपको क्या चाहिए

साथ चलने के लिए आपको ज़्यादा कुछ नहीं चाहिए:

• एक ESP32 बोर्ड जिसमें डिस्प्ले हो, कोई भी ESP32 वेरिएंट जो LVGL चला सकता है काम करेगा (नीचे विशिष्ट बोर्डों पर अधिक जानकारी)।
• आपकी पसंद की फर्मवेयर टूलचेन: ESP-IDF, Arduino, या PlatformIO, जिसमें LVGL 8.x पहले से जोड़ा गया हो और आपके डिस्प्ले + टच ड्राइवर काम कर रहे हों।
• एक मुफ्त PicoPixel अकाउंट — इस गाइड की सब कुछ ब्राउज़र में होती है।

चरण 1 - अपना डिस्प्ले आकार सेट करें

एडिटर खोलें और एक नया प्रोजेक्ट शुरू करें। पहली चीज़ जो सही करनी है वह है रिज़ॉल्यूशन, ताकि आपका डिज़ाइन आपकी भौतिक स्क्रीन से पिक्सेल-दर-पिक्सेल मेल खाए।

अपने डिस्प्ले से मेल खाने वाला प्रीसेट चुनें:

• 320×240, सबसे आम छोटे SPI TFT पैनल (ST7789, ILI9341)।
• 240×240, GC9A01 जैसे गोल डिस्प्ले।
• 480×320, 480×480, या 800×480, बड़े और स्क्वेयर पैनल।

इसे शुरू से सही करने का मतलब है कि आप जो डिज़ाइन करते हैं वही डिवाइस पर दिखता है।

चरण 2 - ड्रैग-एंड-ड्रॉप से डिज़ाइन करें

अब मज़ेदार हिस्सा। पैलेट से LVGL विजेट्स को कैनवास पर ड्रैग करें — बटन, लेबल, स्लाइडर, आर्क, स्विच, चार्ट, ड्रॉपडाउन, और बहुत कुछ (कुल 30+ विजेट प्रकार)। उन्हें पोज़िशन करें, फिर रंग, फ़ॉन्ट, स्पेसिंग और गोल कोनों को विज़ुअली स्टाइल करने के लिए साइड पैनल का उपयोग करें। इस चरण में कोई C कोड नहीं।

बनाते समय कुछ बातें जानने योग्य हैं:

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

चरण 3 - लाइव प्रीव्यू करें

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

बटन टैप करें, स्लाइडर खींचें, स्क्रॉल करें, और अपने स्क्रीन नेविगेशन की जांच करें। यहाँ लेआउट समस्याओं को ठीक करने में सेकंड लगते हैं; डिवाइस पर ठीक करने में एक फ्लैश साइकिल लगती है। आप फीडबैक के लिए किसी टीममेट या क्लाइंट के साथ एक प्रीव्यू लिंक भी शेयर कर सकते हैं।

चरण 4 - प्रोडक्शन-रेडी C कोड एक्सपोर्ट करें

जब डिज़ाइन सही लगे, एक्सपोर्ट करें। आपको एक picopixel_lvgl_ui.zip मिलेगा जिसमें साफ, स्टैंडर्ड LVGL 8.x C कोड होगा:

• ui.c / ui.h — एंट्री पॉइंट, ui_init() और ui_tick() के साथ।
• screens.c / screens.h — आपकी स्क्रीन और उनका लेआउट।
• styles, fonts, images, actions, और vars — आपके डिज़ाइन में उपयोग की गई हर चीज़, आपके लिए जेनरेट की गई।
• README.md — एक्सपोर्ट का सरल भाषा में विवरण (चरण 5 में कवर किया गया)।

कोई प्रोप्राइटरी डिपेंडेंसी नहीं और जोड़ने के लिए कोई PicoPixel रनटाइम लाइब्रेरी नहीं — यह वेनिला LVGL है, इसलिए यह वैसे ही काम करता है चाहे आप ESP-IDF, Arduino, या PlatformIO पर हों।

चरण 5 - अपने ESP32 प्रोजेक्ट में UI जोड़ें

एक्सपोर्ट को अपने प्रोजेक्ट में अनज़िप करें (ज़्यादातर लोग इसे ui/ फ़ोल्डर के अंतर्गत रखते हैं)। फिर आपको अपने फर्मवेयर में केवल दो काम करने हैं: LVGL और अपने डिस्प्ले/टच ड्राइवर सेट अप होने के बाद एक बार ui_init() कॉल करें, और अपने मेन लूप में ui_tick() कॉल करें।

Arduino-स्टाइल स्केच में यह इस तरह दिखता है:

#include <lvgl.h>
#include "ui/ui.h"          // exported by PicoPixel

void setup() {
  lv_init();
  // ... initialize your display + touch drivers here ...
  ui_init();                // builds the UI you designed
}

void loop() {
  lv_timer_handler();       // let LVGL render and handle input
  ui_tick();                // keep PicoPixel's screens updated
  delay(5);
}

रनटाइम पर स्क्रीन बदलने के लिए (उदाहरण के लिए, जब कोई बटन दबाया जाए), उस स्क्रीन के साथ loadScreen() कॉल करें जो आप चाहते हैं। यही पूरा इंटीग्रेशन है — कंपाइल करें, फ्लैश करें, और आपके ESP32 पर UI वैसा ही दिखता है जैसा आपने ब्राउज़र में देखा था।

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

चूँकि PicoPixel स्टैंडर्ड LVGL C कोड एक्सपोर्ट करता है, यह किसी भी ESP32 पर चलता है जो LVGL 8.x चला सकता है। वेरिएंट की त्वरित गाइड:

• ESP32-S3 — अधिकांश डिस्प्ले प्रोजेक्ट के लिए सबसे अच्छा विकल्प: PSRAM के साथ ड्यूल-कोर और रिच UI के लिए पर्याप्त हेडरूम।
• ESP32 (ओरिजिनल) / ESP32-S2 — सरल इंटरफ़ेस के लिए ठीक है; अपने मेमोरी बजट का ध्यान रखें।
• ESP32-C3 / C6 — हल्के सिंगल-कोर RISC-V चिप, छोटे UI के लिए अच्छे।
• ESP32-P4 — Espressif का सबसे शक्तिशाली चिप, स्मूद, हाई-रिज़ॉल्यूशन इंटरफ़ेस के लिए एक डेडिकेटेड GPU के साथ। PicoPixel का एक्सपोर्ट Waveshare और Guition के ESP32-P4 बोर्ड पर परीक्षित किया गया है।

लोकप्रिय रेडी-मेड बोर्ड — LILYGO T-Display-S3, M5Stack Core2/CoreS3, Waveshare और Sunton डिस्प्ले बोर्ड, Espressif ESP32-S3-BOX, और बजट "Cheap Yellow Display" — सभी काम करते हैं, जैसे ST7789, ILI9341, GC9A01 (गोल), और ILI9488 जैसे सामान्य ड्राइवर भी।

UI को मेमोरी में हल्का रखना

एम्बेडेड डिस्प्ले में फोन या लैपटॉप की तुलना में बहुत कम मेमोरी होती है, इसलिए थोड़ी सावधानी आपके UI को तेज़ और फ्लैश-फ्रेंडली रखती है:

• फ़ॉन्ट सही आकार के रखें। प्रत्येक फ़ॉन्ट एक निश्चित पिक्सेल साइज़ पर स्टोर होता है, और बड़े कैरेक्टर सेट (विशेष रूप से चीनी, जापानी और कोरियाई) जल्दी जुड़ते हैं। फ़ॉन्ट गाइड दिखाता है कि केवल वे कैरेक्टर कैसे शामिल करें जो आप वास्तव में उपयोग करते हैं।
• अपने डिस्प्ले की कलर डेप्थ से मेल करें। 16-बिट पैनल को 32-बिट इमेज की ज़रूरत नहीं है — सही डेप्थ चुनने से आपकी एसेट्स छोटी होती हैं।
• डुप्लिकेट करने के बजाय पुनः उपयोग करें। एक विजेट एक बार बनाएं और इसे स्क्रीन और प्रोजेक्ट में पुनः उपयोग करें।

सामान्य प्रश्न

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

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

यह कौन सा LVGL संस्करण सपोर्ट करता है?

LVGL 8.x। एक्सपोर्ट किया गया कोड LVGL 8.x API का उपयोग करता है, इसलिए इसे LVGL 9.x कॉल के साथ मिक्स न करें। (v9 सपोर्ट की योजना है।)

क्या मुझे कोई C कोड लिखना होगा?

केवल चरण 5 में थोड़ा ग्लू कोड — ui_init() और ui_tick() कॉल करना। UI खुद विज़ुअली डिज़ाइन किया जाता है और आपके लिए जेनरेट होता है।

क्या यह मुफ्त है?

हाँ। PicoPixel व्यक्तिगत और हॉबी उपयोग के लिए मुफ्त है, कोई क्रेडिट कार्ड ज़रूरी नहीं। कमर्शियल उपयोग $17/माह ($204/वर्ष) से शुरू होता है।

अगले कदम

अब आपके पास विचार से फ्लैश किए गए UI तक का पूरा रास्ता है: अपना रिज़ॉल्यूशन सेट करें, ड्रैग-एंड-ड्रॉप से डिज़ाइन करें, लाइव प्रीव्यू करें, एक्सपोर्ट करें, और इंटीग्रेट करें। यहाँ से:

• एडिटर में जाएं और app.picopixel.io पर एक प्रोजेक्ट शुरू करें।
• बोर्ड और फ्रेमवर्क सपोर्ट पर अधिक जानकारी के लिए ESP32 GUI बिल्डर पेज ब्राउज़ करें।
• एनिमेटेड स्प्राइट और कस्टम फ़ॉन्ट के साथ अपने विजेट्स को समृद्ध बनाएं।
• विकल्प तौल रहे हैं? देखें कि PicoPixel अन्य LVGL एडिटर से कैसे तुलना करता है।