event editor 사용하기

event editor란?

event editor는 widgets를 서로 연결해 한 widget에서 어떤 동작이 일어났을 때 다른 widget 또는 screen 자체에 일이 일어나게 합니다. 모든 연결은 세 가지 간단한 부분으로 구성됩니다.

• A source, 사용자가 상호작용하는 widget(예: button).
• A trigger, 사용자가 그것에 하는 행동(예: click).
• An action, 그 결과 일어나는 일(예: go to another screen)로, 보통 destination widget 또는 screen을 대상으로 합니다.

문장처럼 읽으면 이렇습니다. "When the user clicks this button, change to the Settings screen." 이것이 하나의 event입니다. 원하는 만큼 추가해 전체 인터페이스를 살아 움직이게 만들 수 있습니다.

event editor 열기

아무 widget 또는 screen을 선택한 뒤 오른쪽 사이드바의 Events 탭으로 전환합니다(Design, Inspect 옆에 있습니다). 여기에는 각 event가 카드로 나타나며, 열어서 설정할 수 있습니다.

아직 event를 만들지 않았다면 PicoPixel은 시작하는 세 가지 방법을 보여 줍니다.

1. + 버튼을 클릭해 event를 추가합니다.
2. widget 또는 screen을 선택한 뒤 다른 widget 또는 screen으로 연결을 드래그합니다.
3. 헤더의 play 버튼으로 events view를 실행하고 테스트합니다.

widgets 연결하기: node를 destination으로 드래그

event를 만드는 가장 빠른 방법은 캔버스에서 바로 하는 것입니다.

1. 사용자가 상호작용하게 할 source widget을 선택합니다.
2. 가장자리에 나타나는 작은 connection handle을 잡고 영향을 줄 widget 또는 screen으로 wire를 드래그합니다.
3. 그 destination에 놓습니다. PicoPixel은 둘 사이에 곡선을 그리고 wire 위에 작은 node를 둡니다.
4. node를 클릭해 trigger를 고릅니다(현재 값, 예: "Clicked"가 표시됩니다). destination과 나머지 세부 정보는 Events panel에서 설정합니다.

그 시각적인 wire가 event입니다. 어떤 widgets가 무엇에 연결되어 있는지 한눈에 볼 수 있습니다.

trigger 선택하기

trigger는 사용자가 무엇을 하는가입니다. wire 위의 node(또는 Events panel의 Trigger 드롭다운)를 클릭해 선택합니다. 가장 흔한 것은 Clicked이지만 전체 세트가 있습니다.

• Clicked, 탭했다가 놓는 동작입니다. 일상적인 "button press"이며 가장 자주 사용합니다.
• Pressed, 손가락이 닿는 순간입니다.
• Released, 손가락이 떨어질 때입니다.
• Long Pressed / Long Pressed Repeat, 길게 누르거나 길게 누른 상태에서 반복됩니다.
• Gesture, 스와이프입니다.
• Value Changed, widget 값이 바뀔 때입니다. slider를 드래그하거나 switch를 바꾸거나 checkbox를 체크할 때입니다. sliders, switches, rollers에 자연스러운 trigger입니다.
• Focused / Defocused, widget이 포커스를 얻거나 잃을 때입니다.
• Screen Loaded / Screen Unloaded, screen이 나타나거나 사라질 때입니다. 화면이 열리는 순간 설정할 때 좋습니다.
• Scroll Begin / Scroll End, 스크롤이 시작되거나 멈출 때입니다.
• Ready / Cancel, 온스크린 키보드 같은 입력에서 사용됩니다.

action 선택하기

action은 무슨 일이 일어나는가입니다. 쉽게 말해 다음을 선택할 수 있습니다.

• Change Screen, 다른 screen으로 이동합니다. transition(Fade 또는 Slide left/right/up/down), 속도, 지연을 선택할 수 있습니다. 멀티스크린 앱을 만드는 방식입니다.
• Delete Screen, 다른 screen으로 이동하면서 떠나는 screen을 동시에 해제합니다(메모리가 부족한 디바이스에 유용).
• Show Widget / Hide Widget, 무언가를 표시하거나 숨깁니다. pop-ups, panels, "more info" 섹션에 좋습니다.
• Set State, widget에 checked, disabled, focused, pressed 같은 state를 추가/제거/토글합니다.
• Set Opacity, widget을 완전히 보이는 상태(100)에서 보이지 않는 상태(0)로 페이드합니다.
• Set Properties, widget의 위치나 크기를 바꿉니다.
• Set Text, label 또는 button에 표시되는 글자를 업데이트합니다.
• Set Sprite Mode, sprite를 "Idle" 또는 "Running" 같은 phase로 전환하거나 시작/중지합니다. sprite에 생명력을 주는 정확한 방법입니다.
• Animated Image Mode, animated image를 시작, 중지, 재시작합니다.
• Play Animation, widget에 설정한 timeline animation을 실행합니다.
• Modify Flag, 더 세밀한 제어를 위해 LVGL flag를 추가/제거/토글합니다(고급 옵션).
• Call Function, 이름으로 직접 만든 custom C function을 호출합니다. 커스텀 작업을 위한 탈출구이며, 그 함수는 펌웨어에 작성합니다.

예제로 보기

Home screen에 "Settings" button이 있고 별도의 Settings screen이 있다고 해 봅시다. 연결하려면:

1. Settings button을 선택합니다.
2. 거기서 Settings screen으로 연결을 드래그합니다(또는 Events panel에서 destination으로 선택합니다).
3. trigger를 Clicked로 설정합니다.
4. action을 Change Screen으로 설정하고 destination을 Settings screen으로 둡니다.
5. 선택 사항으로 Slide left transition을 골라 앞으로 이동하는 느낌을 줄 수 있습니다.

play 버튼을 누르고 live preview에서 버튼을 탭하면 바로 Settings로 슬라이드됩니다. 코드도, 디바이스 플래시도 필요 없습니다.

events 편집 및 삭제

만든 모든 event는 Events panel에 카드로 표시됩니다.

• Edit, 카드를 클릭해 펼치고 trigger, action, destination 또는 action 옵션을 바꿉니다.
• Delete, 카드의 **✕**를 사용해 event를 제거합니다. wire도 캔버스에서 사라집니다.

같은 widget에 여러 events를 붙일 수 있습니다. 예를 들어 Pressed에 하나, Released에 하나를 붙이면 더 풍부한 상호작용을 만들 수 있습니다.

다음으로 갈 곳

Events는 정적인 mock-up을 실제 인터페이스로 바꿉니다. 여기서 다음을 해 보세요.

• sprites guide에서 animated, multi-state widgets를 만들고 Set Sprite Mode로 구동하세요.
• fonts guide로 텍스트를 선명하고 작게 유지하세요.
• 하드웨어에 올릴 준비가 됐다면 ESP32 tutorial을 따라 interactive UI를 내보내고 플래시하세요.