이벤트 예제 - 템플릿

개요

콜백을 모두 직접 작성하지 않고 UI 동작을 연결해 보고 싶다면 이 무료 LVGL 이벤트 템플릿을 사용해 보세요. 480 x 480 화면에서 각 버튼이 어떤 동작을 실행하는지 PicoPixel 이벤트 에디터로 확인할 수 있습니다.

이 템플릿은 실용적인 LVGL 인터랙션 예제로 만들어졌습니다. 버튼 클릭으로 다른 객체를 업데이트하고, 불투명도를 변경하고, 텍스트를 수정하고, 대상 크기를 바꾸고, 애니메이션을 재생하는 방법을 보여 줍니다. 터치 기반 ESP32 대시보드, 키오스크 화면, 스마트홈 컨트롤, 웨어러블 메뉴, 설정 패널, 또는 버튼을 누른 뒤 즉각적인 피드백이 필요한 LVGL UI의 출발점으로 사용할 수 있습니다.

일반 캔버스 미리보기에서는 인터페이스 자체가 보입니다. 이벤트 보기에서는 연결 구조가 보입니다. 왼쪽에는 버튼, 오른쪽에는 타깃, 그 사이에는 커넥터 라인이 있으며, 소스, 트리거, 액션, 값, 대상이 설정되는 이벤트 인스펙터 패널도 볼 수 있습니다.

포함 내용

480 x 480 LVGL 상호작용 화면으로, 임베디드 디스플레이와 빠른 실험에 맞는 크기입니다.
버튼 예제 5개가 각각 다른 종류의 UI 반응을 보여 줍니다.
불투명도 컨트롤은 Low Opacity와 High Opacity 버튼이 같은 이미지 타깃에 연결되어 있습니다.
텍스트 업데이트 예제는 Change Text 버튼으로 라벨을 수정합니다.
속성 변경 예제는 Set Properties - Size로 대상 객체의 크기를 변경합니다.
애니메이션 트리거는 Play Animation으로 이벤트 기반 모션이나 전환을 보여 줍니다.
이벤트 에디터 연결 미리보기에는 커넥터 라인과 Clicked 트리거 노드가 표시됩니다.
속성 패널의 액션 설정은 소스, 트리거, 액션, 불투명도 값, 대상 필드를 보여 줍니다.
이미지 타깃은 상태 변화를 쉽게 확인할 수 있는 단순한 시안색 PicoPixel 스타일 그래픽을 사용합니다.
Doto 32 폰트 에셋은 캔버스의 도트 형태의 텍스트에 사용됩니다.

에셋 구성

이 템플릿은 한눈에 이해할 수 있을 만큼 작게 유지되어 있습니다. 에셋 패널의 로컬 라이브러리에는 다음이 표시됩니다.

이미지: 1, 이미지 타깃에서 재사용되는 500 x 500 시안색 그래픽입니다.
색상: 0, 색상은 디자인에 직접 적용되어 있습니다.
폰트: 1, Doto 32, 도트 형태의 라벨 텍스트에 사용됩니다.
위젯: 0, 저장된 위젯 에셋이 아니라 화면 안의 이벤트 연결에 집중합니다.

레이어 패널에서는 프로젝트가 동작을 실험할 수 있는 간단한 단일 화면처럼 표시됩니다.

Screen 1, 480 x 480 캔버스입니다.
Button 1부터 Button 5까지, 각 예제의 클릭 가능한 소스입니다.
Image 1, Image 2, Image 3, 불투명도, 크기, 애니메이션 변경을 보여 주는 타깃입니다.
Label 1, 텍스트 변경 예제에서 사용하는 텍스트 타깃입니다.

모든 소스와 대상이 같은 화면에 보이기 때문에 학습에 유용합니다.

이벤트 에디터 구조

이벤트 보기가 활성화되면 PicoPixel은 LVGL 레이아웃 위에 상호작용 그래프를 겹쳐 표시합니다. 스크린샷에는 프로젝트가 Contains Events로 표시되고, 버튼 소스에서 대상으로 이어지는 커넥터 라인이 그려져 있습니다.

Low Opacity와 High Opacity는 모두 Clicked 트리거를 사용하고 같은 이미지 타깃으로 연결됩니다.
Change Text는 Clicked 트리거를 사용하고 도트 형태의 텍스트 라벨을 가리킵니다.
Set Properties - Size는 Clicked 트리거를 사용하고 크기 변경 대상 이미지 타깃을 가리킵니다.
Play Animation은 Clicked 트리거를 사용하고 애니메이션 재생용 이미지 타깃을 가리킵니다.
오른쪽 이벤트 패널에는 선택한 이벤트가 Source, Trigger, Action, Opacity 같은 값 설정, Destination과 함께 표시됩니다.

이 레이아웃에서 이벤트 연결 원리를 쉽게 배울 수 있습니다. PicoPixel의 시각적 이벤트 그래프가 트리거와 타깃의 관계를 숨기지 않고, 사용자 입력을 LVGL 객체 변경으로 매핑하는 방식을 보여 줍니다.

TIP

내보내기 전에 PicoPixel에서 중요한 객체 이름을 바꾸세요. 예를 들어 btn_low_opacity, btn_high_opacity, btn_change_text, btn_set_size, btn_play_animation, target_image, status_label 같은 이름입니다. 명확한 이름을 사용하면 내보낸 LVGL 이벤트 콜백을 훨씬 쉽게 훑어볼 수 있습니다.

LVGL에 잘 맞는 이유

LVGL 애플리케이션에는 작은 상호작용이 많이 필요합니다. 버튼을 클릭하고, 라벨을 업데이트하고, 객체 상태를 바꾸고, 이미지를 움직이고, 화면을 전환하거나 애니메이션을 시작하는 일들입니다. 이 예제는 그런 패턴을 눈에 보이고 재사용하기 쉽게 유지합니다.

버튼은 네이티브 LVGL 입력 객체이므로 같은 패턴이 터치, 인코더 포커스 또는 다른 입력 드라이버와 함께 동작합니다.
트리거가 명시적이며, 에디터의 Clicked 노드에서 각 액션을 무엇이 시작하는지 분명합니다.
타깃은 일반 LVGL 객체이며 이미지와 라벨을 포함하므로 내보낸 UI를 펌웨어에서 계속 편집할 수 있습니다.
불투명도와 속성 변경은 가볍기 때문에 작은 임베디드 디스플레이에 적합합니다.
애니메이션 연결은 동작이 이어지는 과정을 보여 줍니다. 사용자 입력을 계기로 애니메이션이 시작되고 스스로 재생되는 흐름입니다.
프로젝트는 표준 LVGL 8.x UI 코드로 내보내지므로 ESP-IDF, Arduino, PlatformIO, STM32, Zephyr 또는 다른 LVGL 빌드에 통합할 수 있습니다.

런타임 패턴

PicoPixel에서 만든 이벤트 연결은 일반적인 LVGL 콜백과 같은 원리로 작동합니다. 내보낸 UI를 사용자 지정 펌웨어 로직으로 확장해야 한다면 보통 이벤트 코드를 확인한 다음 대상 객체를 업데이트하는 패턴을 사용합니다.

static void low_opacity_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_obj_set_style_opa(ui_target_image, LV_OPA_30, 0);
}

static void change_text_clicked_cb(lv_event_t * e)
{
    if (lv_event_get_code(e) != LV_EVENT_CLICKED) return;

    lv_label_set_text(ui_status_label, "Clicked");
}

일반적인 연결은 시각적 에디터를 사용하고, 펌웨어 상태, 센서 데이터, 디바이스 설정 또는 네트워크 응답에 따라 달라지는 동작만 사용자 지정 C 콜백으로 남겨 두세요.

수정 아이디어

이 무료 LVGL 인터랙션 템플릿을 바탕으로, 데모 컨트롤을 자신의 제품 UI에 맞게 바꾸세요.

다섯 개의 데모 버튼을 설정 토글, 메뉴 항목, 대시보드 컨트롤 또는 하드웨어 명령으로 바꿉니다.
불투명도 액션을 비활성/활성 상태, 경고 상태 또는 선택/비선택 상태로 바꿉니다.
텍스트 액션을 Connected, Saving, Armed, Charging, Complete 같은 상태 메시지에 사용합니다.
크기 속성 예제를 진행 표시기, 확장 카드, 눌림 상태 효과 또는 알림 펄스로 바꿉니다.
애니메이션 예제를 페이지 전환, 확인 피드백, 로딩 상태 또는 주의를 끄는 효과에 사용합니다.
단일 화면 예제가 이해되면 여러 LVGL 화면 사이의 내비게이션 액션을 추가합니다.
버튼을 밝기 변경, 릴레이 토글, 모드 선택, 보정 흐름 시작 같은 실제 펌웨어 이벤트와 연결합니다.

프로젝트에 적용하기

PicoPixel에서 템플릿을 열고 이벤트 그래프를 확인한 뒤, 주요 소스와 타깃의 이름을 바꾸고 프로젝트를 LVGL C 코드로 내보냅니다. 생성된 파일은 다른 PicoPixel 내보내기처럼 기존 임베디드 프로젝트에 추가할 수 있습니다.

ESP32 프로젝트에서는 보통 다음 흐름을 따릅니다.

디스플레이와 입력 드라이버를 설정합니다.
이 이벤트 템플릿을 열고 버튼, 라벨, 이미지, 액션을 조정합니다.
PicoPixel UI를 LVGL C로 내보냅니다.
내보낸 파일을 ESP-IDF, Arduino 또는 PlatformIO 프로젝트에 추가합니다.
LVGL과 디스플레이 드라이버가 준비된 뒤 ui_init()을 호출합니다.
시각적 이벤트 에디터만으로 충분하지 않은 곳에만 사용자 지정 펌웨어 콜백을 추가합니다.

더 자세한 배경은 PicoPixel 이벤트 에디터 가이드, ESP32 LVGL UI 튜토리얼, PicoPixel 템플릿 사용하기 가이드를 참고하세요.

활용 예시

이 템플릿은 다음과 같은 작업의 출발점으로 활용할 수 있습니다.

LVGL 이벤트 예제
버튼 클릭 상호작용 데모
ESP32 터치 UI 프로토타입
설정 화면과 컨트롤 패널
스마트홈 대시보드
웨어러블 또는 휴대용 메뉴
애니메이션 트리거 예제
텍스트와 이미지 상태 변경
PicoPixel의 시각적 이벤트가 LVGL 동작으로 바뀌는 방식 학습

이벤트예제

개요