이벤트 예제 - 템플릿

개요

모든 콜백을 손으로 작성하지 않고 임베디드 UI 상호작용을 연결하는 무료 LVGL 이벤트 템플릿이나 예제를 찾고 있나요? 이 PicoPixel 프로젝트는 PicoPixel 이벤트 에디터를 통해 버튼이 눈에 보이는 액션에 연결된 간결한 480 x 480 화면을 보여 줍니다.

이 템플릿은 실용적인 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 event editor guide, ESP32 LVGL UI tutorial, using PicoPixel templates 가이드를 참고하세요.

가장 적합한 용도

이 템플릿은 다음을 위한 명확한 출발점이 필요할 때 잘 맞습니다.

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

이벤트예제

개요