ESP32 और LVGL से टचस्क्रीन UI बनाएँ

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

परंपरागत तरीके में हर विजेट की जगह, रंग और आकार C कोड में लिखते हैं। फिर बोर्ड पर फ़्लैश करके नतीजा देखते हैं, कुछ पिक्सेल बदलते हैं और दोबारा फ़्लैश करते हैं। हर छोटे बदलाव में यह प्रक्रिया दोहरानी पड़ती है।

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

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

• डिस्प्ले वाला ESP32 बोर्ड, जिस पर LVGL चल सके। नीचे बोर्ड की जानकारी देखें।
• ESP-IDF, Arduino या PlatformIO, जिसमें LVGL 8.x जुड़ा हो और डिस्प्ले व टच ड्राइवर काम कर रहे हों।
• मुफ़्त PicoPixel खाता। UI का डिज़ाइन और प्रीव्यू ब्राउज़र में होगा।

चरण 1 — डिस्प्ले का आकार तय करें

एडिटर में नया प्रोजेक्ट खोलें और अपने डिस्प्ले का रिज़ॉल्यूशन चुनें। इससे डिज़ाइन और हार्डवेयर के पिक्सेल आपस में मेल खाएँगे। आम विकल्प हैं:

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

शुरुआत में सही आकार चुनने से एडिटर का डिज़ाइन डिवाइस पर भी उसी तरह दिखता है।

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

पैलेट से LVGL विजेट कैनवास पर खींचें। बटन, लेबल, स्लाइडर, आर्क, स्विच, चार्ट और ड्रॉपडाउन समेत 30 से अधिक प्रकार उपलब्ध हैं। उनकी जगह तय करें और साइड पैनल से रंग, फ़ॉन्ट, दूरी तथा गोल कोने बदलें। इस चरण में C कोड नहीं लिखना पड़ता।

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

चरण 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: एक्सपोर्ट की सरल अंग्रेज़ी में जानकारी।

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

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

ज़िप को अपने प्रोजेक्ट में खोलें, आम तौर पर 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 बोर्ड काम करते हैं?

मानक LVGL C कोड होने के कारण एक्सपोर्ट लगभग हर LVGL 8.x चलाने वाले ESP32 पर काम करता है:

• 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 जैसे आम ड्राइवर भी इस्तेमाल कर सकते हैं।

मेमोरी का इस्तेमाल कम रखें

एम्बेडेड डिवाइस में फ़ोन या लैपटॉप से कम मेमोरी होती है:

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

आम सवाल

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

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

कौन-सा LVGL वर्शन चाहिए?

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

क्या C कोड लिखना पड़ेगा?

चरण 5 में केवल UI जोड़ने का थोड़ा कोड: ui_init() और ui_tick() कॉल करना। UI का बाकी कोड PicoPixel बनाता है।

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

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

आगे क्या करें

• app.picopixel.io पर अपना प्रोजेक्ट शुरू करें।
• बोर्ड और फ़्रेमवर्क के बारे में ESP32 GUI बिल्डर पेज देखें।
• एनिमेटेड स्प्राइट और अपने फ़ॉन्ट जोड़ें।
• दूसरे LVGL एडिटर से तुलना देखें।