Overview
Buttons से भरी screen तब तक ज्यादा कुछ नहीं करती जब तक आप नहीं बताते कि user tap करे तो क्या होना चाहिए. यही event editor का काम है: यहां आप interface को react कराते हैं. यह guide बताती है कि event editor क्या है, drag-to-connect mechanic कैसे काम करता है, और कौन-कौन से triggers और actions choose कर सकते हैं, बिना code लिखे.
Event editor क्या है?
Event editor widgets को connect करने देता है ताकि एक widget पर action करने से दूसरे widget या screen पर कुछ हो. हर connection तीन simple parts से बनता है:
- A source, वह widget जिससे user interact करता है (example, button).
- A trigger, user उस पर क्या करता है (example, click).
- An action, result में क्या होता है (example, go to another screen), आम तौर पर किसी destination widget या screen पर aimed.
इसे sentence की तरह पढ़ें: "When the user clicks this button, change to the Settings screen." यह एक event है. पूरे interface को life देने के लिए जितने चाहें events add कर सकते हैं.
Events visually widgets के बीच connections drag करके बनते हैं; scripting involved नहीं है. Project export करते समय PicoPixel हर event को matching LVGL code में बदल देता है.
Event editor खोलना
कोई widget या screen select करें, फिर right-hand sidebar में Events tab पर switch करें (यह Design और Inspect के साथ होता है). यहां हर event card की तरह दिखाई देता है जिसे आप खोलकर configure कर सकते हैं.
जब आपने अभी कोई event नहीं बनाया हो, PicoPixel start करने के तीन तरीके दिखाता है:
- Event add करने के लिए + button क्लिक करें.
- Widget या screen select करें, फिर उससे किसी दूसरे widget या screen तक connection drag करें.
- Events view run करने और try करने के लिए header में play button use करें.
Widgets connect करना: node को destination तक drag करें
Event create करने का quickest तरीका canvas पर ही है:
- source widget select करें, यानी वह चीज जिससे user interact करेगा.
- उसके edge पर दिखने वाले छोटे connection handle को पकड़ें और जिस widget या screen को affect करना है, वहां तक wire drag करें.
- उसे उस destination पर drop करें. PicoPixel दोनों के बीच curved line draw करता है, और wire पर छोटा node बैठता है.
- अपना trigger चुनने के लिए उस node को क्लिक करें (वह current trigger दिखाता है, जैसे "Clicked"). Destination और बाकी details Events panel में set करते हैं.
वह visual wire ही event है. आप एक नजर में देख सकते हैं कौन-से widgets किससे connected हैं.
Drag नहीं करना चाहते? Events panel में + button क्लिक करें और dropdowns से trigger, action और destination भरें. Result वही है; जो natural लगे वह चुनें.
Trigger चुनना
Trigger है user क्या करता है. Wire पर node क्लिक करें (या Events panel में Trigger dropdown) और choose करें. सबसे common Clicked है, लेकिन पूरा set है:
- Clicked, tap-and-release. यह everyday "button press" है और सबसे ज्यादा use होगा.
- Pressed, finger touch down होते ही.
- Released, जब finger उठती है.
- Long Pressed / Long Pressed Repeat, hold down, या hold and repeating.
- Gesture, swipe.
- Value Changed, जब widget की value बदलती है: slider dragged, switch flipped, checkbox ticked. यह sliders, switches और rollers के लिए natural trigger है.
- Focused / Defocused, widget focus gain या lose करे.
- Screen Loaded / Screen Unloaded, screen appear या go away हो. Screen खुलते ही setup करने के लिए बढ़िया.
- Scroll Begin / Scroll End, scrolling start या stop हो.
- Ready / Cancel, on-screen keyboard जैसे inputs द्वारा used.
Widget से match करने वाला trigger चुनें. Button पर Clicked सही है; slider या switch पर Value Changed चाहिए. सही trigger event fire होने और कभी न होने के बीच फर्क है.
Action चुनना
Action है क्या happens. Plain terms में options:
- Change Screen, another screen पर navigate करें. Transition (Fade, या Slide left/right/up/down), speed और delay choose कर सकते हैं. Multi-screen apps ऐसे बनते हैं.
- Delete Screen, another screen पर जाएं और छोड़ी जा रही screen free up करें (memory-tight devices पर useful).
- Show Widget / Hide Widget, कुछ reveal या hide करें. Pop-ups, panels और "more info" sections के लिए perfect.
- Set State, widget पर checked, disabled, focused, या pressed जैसी state add/remove/toggle करें.
- Set Opacity, widget को fully visible (100) से invisible (0) तक fade करें.
- Set Properties, widget की position या size बदलें.
- Set Text, label या button पर shown words update करें.
- Set Sprite Mode, sprite को उसकी phases में से एक पर switch करें (जैसे "Idle" या "Running"), या start/stop करें. Sprite को life देने का यही तरीका है.
- Animated Image Mode, animated image start, stop या restart करें.
- Play Animation, widget पर setup की गई timeline animation run करें.
- Modify Flag, finer control के लिए LVGL flag add/remove/toggle करें (advanced option).
- Call Function, अपने custom C function को name से call करें. यह custom कामों का escape hatch है; function आप firmware में लिखते हैं.
एक worked example
मान लें Home screen पर "Settings" button है, और अलग Settings screen है. Wire करने के लिए:
- Settings button select करें.
- उससे Settings screen तक connection drag करें (या Events panel में destination चुनें).
- trigger को Clicked set करें.
- action को Change Screen set करें, और destination आपका Settings screen हो.
- Optionally Slide left transition चुनें ताकि आगे बढ़ने जैसा feel हो.
play button दबाएं और live preview में button tap करें; आप सीधे Settings पर slide करेंगे. No code, no flashing device.
Character को react कराना है? Button add करें, trigger Clicked set करें, Set Sprite Mode action चुनें, sprite target करें, और switch करने वाली phase चुनें (जैसे "Happy"). अब button tap करने से sprite animation बदलती है. Sprite खुद कैसे बनाना है, उसके लिए sprites guide देखें.
Events edit और delete करना
आपके बनाए हर event का card Events panel में दिखता है:
- Edit, card क्लिक करके expand करें और trigger, action, destination या action options बदलें.
- Delete, card पर ✕ use करके event remove करें. उसका wire भी canvas से गायब हो जाता है.
एक ही widget पर कई events attach कर सकते हैं, जैसे एक Pressed पर और दूसरा Released पर, richer interactions बनाने के लिए.
आगे कहां जाएं
Events static mock-up को real interface बनाते हैं. यहां से:
- sprites guide में Set Sprite Mode से drive करने के लिए animated, multi-state widgets बनाएं.
- fonts guide से text crisp और small रखें.
- Hardware पर डालना है? Interactive UI export और flash करने के लिए ESP32 tutorial follow करें.
