이벤트 에디터 사용하기

이벤트 에디터란?

이벤트 에디터에서는 위젯을 연결해 한 위젯의 입력이 다른 위젯이나 화면에 반영되도록 설정합니다. 각 연결은 다음 세 부분으로 구성됩니다.

• 출발점(Source): 사용자가 조작하는 위젯입니다. 예를 들면 버튼입니다.
• 트리거(Trigger): 이벤트를 실행하는 조건입니다. 예를 들면 클릭입니다.
• 액션(Action): 조건이 충족되면 실행할 동작입니다. 예를 들면 다른 화면으로 이동입니다. 대개 동작을 적용할 대상(Destination) 위젯이나 화면을 지정합니다.

문장으로 표현하면 *"사용자가 이 버튼을 클릭하면, Settings 화면으로 이동한다"*입니다. 이것이 하나의 이벤트입니다. 필요한 만큼 이벤트를 추가해 인터페이스를 완성하세요.

이벤트 에디터 열기

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

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

1. + 버튼을 클릭해 이벤트를 추가합니다.
2. 위젯 또는 화면을 선택한 뒤 다른 위젯 또는 화면으로 연결을 드래그합니다.
3. 헤더의 play 버튼으로 이벤트 보기를 실행하고 테스트합니다.

위젯 연결하기: 노드를 대상으로 드래그

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

1. 사용자가 상호작용하게 할 출발점 위젯을 선택합니다.
2. 가장자리에 나타나는 작은 연결 핸들을 잡고 영향을 줄 위젯 또는 화면으로 연결선을 드래그합니다.
3. 그 대상에 놓습니다. PicoPixel은 둘 사이에 곡선을 그리고 연결선 위에 작은 노드를 둡니다.
4. 노드를 클릭해 트리거를 고릅니다(현재 값, 예: "Clicked"가 표시됩니다). 대상과 나머지 세부 정보는 Events 패널에서 설정합니다.

이 연결선 하나가 이벤트 하나를 나타냅니다. 어느 위젯이 어디에 연결되어 있는지 한눈에 볼 수 있습니다.

트리거 선택하기

트리거는 사용자가 무엇을 하는가입니다. 연결선 위의 노드(또는 Events 패널의 Trigger 드롭다운)를 클릭해 선택합니다. 가장 자주 쓰는 것은 Clicked이며, 다음과 같은 트리거도 사용할 수 있습니다.

• Clicked, 탭했다가 놓는 동작입니다. 일상적인 "버튼 누르기"이며 가장 자주 사용합니다.
• Pressed, 손가락이 닿는 순간입니다.
• Released, 손가락이 떨어질 때입니다.
• Long Pressed / Long Pressed Repeat, 길게 누르거나 길게 누른 상태에서 반복됩니다.
• Gesture, 스와이프입니다.
• Value Changed, 위젯 값이 바뀔 때입니다. 슬라이더를 드래그하거나 스위치를 바꾸거나 체크박스를 체크할 때입니다. 슬라이더, 스위치, 롤러에 자연스러운 트리거입니다.
• Focused / Defocused, 위젯이 포커스를 얻거나 잃을 때입니다.
• Screen Loaded / Screen Unloaded, 화면이 나타나거나 사라질 때입니다. 화면이 열릴 때 초기 설정을 실행하는 데 유용합니다.
• Scroll Begin / Scroll End, 스크롤이 시작되거나 멈출 때입니다.
• Ready / Cancel, 온스크린 키보드 같은 입력에서 사용됩니다.

액션 선택하기

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

• Change Screen, 다른 화면으로 이동합니다. 전환 효과(Fade 또는 Slide left/right/up/down), 속도, 지연을 선택할 수 있습니다. 여러 화면으로 이루어진 앱을 만들 때 사용합니다.
• Delete Screen, 다른 화면으로 이동하면서 떠나는 화면을 동시에 해제합니다(메모리가 부족한 디바이스에 유용).
• Show Widget / Hide Widget, 무언가를 표시하거나 숨깁니다. 팝업, 패널, 추가 정보 영역에 좋습니다.
• Set State, 위젯에 checked, disabled, focused, pressed 같은 상태를 추가/제거/토글합니다.
• Set Opacity, 위젯을 완전히 보이는 상태(100)에서 보이지 않는 상태(0)로 페이드합니다.
• Set Properties, 위젯의 위치나 크기를 바꿉니다.
• Set Text, 라벨 또는 버튼에 표시되는 글자를 업데이트합니다.
• Set Sprite Mode, 스프라이트를 "Idle" 또는 "Running" 같은 모드로 전환하거나 시작/중지합니다. 스프라이트가 상황에 따라 반응하도록 설정할 때 사용합니다.
• Animated Image Mode, 애니메이션 이미지를 시작, 중지, 재시작합니다.
• Play Animation, 위젯에 설정한 타임라인 애니메이션을 실행합니다.
• Modify Flag, 더 세밀한 제어를 위해 LVGL 플래그를 추가/제거/토글합니다(고급 옵션).
• Call Function, 펌웨어에 작성한 사용자 정의 C 함수를 이름으로 호출합니다. 기본 액션으로 처리할 수 없는 동작을 구현할 때 사용합니다.

예제로 보기

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

1. Settings 버튼을 선택합니다.
2. 거기서 Settings 화면으로 연결을 드래그합니다(또는 Events 패널에서 대상으로 선택합니다).
3. 트리거를 Clicked로 설정합니다.
4. 액션을 Change Screen으로 설정하고 대상을 Settings 화면으로 둡니다.
5. 선택 사항으로 Slide left 전환 효과를 골라 앞으로 이동하는 느낌을 줄 수 있습니다.

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

이벤트 편집 및 삭제

만든 모든 이벤트는 Events 패널에 카드로 표시됩니다.

• Edit, 카드를 클릭해 펼치고 트리거, 액션, 대상 또는 액션 옵션을 바꿉니다.
• Delete, 카드의 **✕**를 사용해 이벤트를 제거합니다. 연결선도 캔버스에서 사라집니다.

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

다음 단계

이벤트는 정적인 목업을 실제 인터페이스로 바꿉니다. 여기서 다음을 해 보세요.

• 스프라이트 가이드에서 여러 애니메이션 상태를 가진 위젯을 만들고 Set Sprite Mode로 구동하세요.
• 폰트 가이드에서 선명한 텍스트를 유지하면서 폰트 용량을 줄이는 방법을 알아보세요.
• 하드웨어에 올릴 준비가 됐다면 ESP32 튜토리얼을 따라 상호작용 가능한 UI를 내보내고 플래시하세요.