속도계예제

포함 내용

• 480 x 480 대시보드 화면으로, 정사각형 캔버스에 맞고 원형 디스플레이에도 쉽게 조정할 수 있습니다.
• LVGL arc 게이지가 메인 속도 링으로 사용되어 인디케이터를 코드에서 업데이트할 수 있습니다.
• 큰 숫자 속도 라벨은 미리보기에서 135로 표시되어 계기판의 강한 초점이 됩니다.
• 단위 라벨은 현재 km/h이며 mph, %, RPM, W 또는 다른 측정 단위로 바꿀 수 있습니다.
• 주행거리 그룹은 9138 km로 표시되며, 주행거리, 트립 거리, 실행 시간, 배터리 주행 가능 거리 또는 다른 보조 지표에 유용합니다.
• PRND 주행 라벨은 D가 원형 상태 인디케이터로 강조되어 있습니다.
• 어두운 임베디드 대시보드 스타일은 고대비 흰색 타이포그래피와 빨강/분홍 게이지 강조색을 사용합니다.
• 이미지 의존성이 없어 UI가 가볍고 LVGL 객체로 계속 편집 가능합니다.
• 번들 폰트 스타일 3개가 스크린샷의 Plus Jakarta Sans 텍스트 계층과 맞습니다.
• 재사용 가능한 위젯 에셋 1개가 템플릿 로컬 라이브러리에 표시되어 다른 PicoPixel 프로젝트 안에서 빠르게 재사용할 수 있습니다.

자산 스냅샷

이 템플릿은 의도적으로 가볍습니다. 에셋 패널의 로컬 라이브러리에는 다음이 표시됩니다.

• 이미지: 0, 게이지는 정적인 스크린샷이 아닙니다.
• 색상: 0, 현재 팔레트는 디자인에 직접 적용되어 있습니다.
• 폰트: 3, Plus Jakarta Sans를 여러 크기로 사용합니다.
• 위젯: 1, 다른 프로젝트에 드롭할 수 있는 재사용 가능한 속도계 위젯 미리보기입니다.

번들 폰트 세트는 게이지 안의 시각적 계층에 맞춰진 크기입니다.

• PlusJakartaSans ExtraLight 16, 주행거리 접미사 같은 작은 보조 텍스트에 사용됩니다.
• PlusJakartaSans Light 20, km/h와 주행 상태 텍스트 같은 보조 라벨에 사용됩니다.
• PlusJakartaSans SemiBold 110, 중앙의 큰 속도 값에 사용됩니다.

즉 LVGL 내보내기는 불필요한 이미지 에셋을 싣지 않고, 편집 가능한 기본 요소인 라벨, 컨테이너, arc, 폰트에 집중할 수 있습니다.

LVGL 중심 구조

스크린샷은 비트맵에 의존하지 않는 작고 내보내기 쉬운 계층 구조를 보여 줍니다. 디자인은 하나의 화면, 그룹화를 위한 컨테이너, 여러 라벨, 주행거리 그룹, 메인 arc를 중심으로 만들어져 있습니다.

• Screen 1은 480 x 480 캔버스입니다.
• 루트 컨테이너가 게이지 레이아웃을 담고 대시보드를 중앙에 유지합니다.
• 주행거리 텍스트는 숫자와 km 접미사를 함께 이동할 수 있도록 그룹화되어 있습니다.
• 중앙 속도 값은 큰 라벨이므로 lv_label_set_text 또는 lv_label_set_text_fmt로 런타임 업데이트하기 쉽습니다.
• 메인 게이지는 LVGL arc이므로 같은 시각 요소를 lv_arc_set_value로 구동할 수 있습니다.
• PRND 행은 라벨로 만들어져 있으며 활성 주행 상태는 작은 원형 컨테이너로 강조됩니다.

이것이 LVGL 속도계 템플릿에 원하는 구조입니다. 다이얼은 편집 가능하고, 텍스트는 실시간으로 바뀔 수 있으며, 내보낸 코드는 일반적인 LVGL 패턴에 가깝게 유지됩니다.

LVGL에 잘 맞는 이유

이 예제는 보기 좋은 스크린샷 이상으로 유용합니다. 임베디드 하드웨어에서 LVGL이 잘 렌더링하는 요소를 중심으로 설계되어 있습니다.

• Arc 렌더링은 LVGL 네이티브이므로 속도 링에 큰 투명 이미지가 필요하지 않습니다.
• 라벨은 업데이트 비용이 낮아 속도, 거리, 배터리 주행 가능 거리 또는 모드 텍스트 변경에 이상적입니다.
• 시각 상태가 명시적이므로 펌웨어에서 arc 값, 중앙 라벨, 주행거리, 주행 선택을 독립적으로 업데이트할 수 있습니다.
• 디자인이 간결하고 가져온 이미지 에셋이 없으며 대시보드 느낌에 필요한 폰트만 포함합니다.
• 표준 LVGL 8.x UI 코드로 내보내지므로 ESP-IDF, Arduino, PlatformIO, STM32, Zephyr 또는 다른 LVGL 프로젝트에 통합할 수 있습니다.

사용자화 아이디어

무료 LVGL 게이지 시작점으로 사용한 뒤, 자신의 제품이나 데모에 맞게 세부 사항을 조정하세요.

• 속도 범위를 도로 속도 스케일에서 0-100, 0-240, 0-8000 RPM, 배터리 퍼센트, 스로틀 위치 또는 온도로 바꿉니다.
• arc 두께, 시작 각도, 끝 각도, 색상을 디스플레이 형태에 맞게 조정합니다.
• 빨강/분홍 강조색을 브랜드 색상, 경고 색상 또는 범위 기반 색상으로 바꿉니다.
• km/h를 mph, RPM, %, W, V, A, C, F로 바꿉니다.
• 주행거리 행을 트립 거리, 가동 시간, 남은 주행 가능 거리, 랩 수 또는 총 에너지에 사용합니다.
• PRND를 ECO, SPORT, PARK, AUTO, MANUAL 같은 사용자 지정 모드로 바꿉니다.
• 작은 아이콘, 배터리 바, 경고 인디케이터, 방향지시 상태 또는 RPM용 두 번째 arc를 추가합니다.
• 라벨을 즉시 점프시키는 대신 LVGL 타이머나 애니메이션 콜백으로 값 변화를 애니메이션합니다.

실시간 데이터 연결

PicoPixel에서 내보낸 뒤에는 생성된 UI 파일을 프로젝트에 유지하고 펌웨어 루프, 이벤트 핸들러 또는 LVGL 타이머에서 이름이 지정된 객체를 업데이트하세요. 정확한 객체 이름은 내보내기 전에 위젯에 붙인 이름에 따라 달라지지만, 런타임 패턴은 다음과 같습니다.

static void dashboard_set_speed(int speed_kph, uint32_t odometer_km)
{
    lv_arc_set_value(ui_speed_arc, speed_kph);
    lv_label_set_text_fmt(ui_speed_value_label, "%d", speed_kph);
    lv_label_set_text_fmt(ui_odo_label, "%lu km", (unsigned long)odometer_km);
}

속도가 GPS, CAN, UART, BLE, 모터 컨트롤러 또는 시뮬레이션 데이터에서 오더라도 하드웨어별 파싱은 UI 코드 밖에 두세요. UI 함수에는 정리된 값만 전달하고 LVGL 업데이트만 담당하게 하는 것이 좋습니다.

프로젝트로 내보내기

PicoPixel에서 템플릿을 열고, 필요하다면 표시 크기를 조정하고, 주요 위젯 이름을 바꾼 다음 프로젝트를 LVGL C 코드로 내보냅니다. 생성된 파일은 다른 LVGL UI처럼 기존 임베디드 프로젝트에 추가할 수 있습니다.

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

1. 디스플레이와 터치/입력 드라이버를 설정합니다.
2. PicoPixel UI를 LVGL C로 내보냅니다.
3. 내보낸 파일을 ESP-IDF, Arduino 또는 PlatformIO 프로젝트에 추가합니다.
4. LVGL과 디스플레이 드라이버가 준비된 뒤 ui_init()을 호출합니다.
5. 텔레메트리 루프, 이벤트 큐 또는 lv_timer에서 속도계 값을 업데이트합니다.

더 넓은 절차는 ESP32 LVGL UI tutorial과 using PicoPixel templates 가이드를 참고하세요.

가장 적합한 용도

이 템플릿은 다음을 위한 빠른 시각적 출발점이 필요할 때 잘 맞습니다.

• LVGL 속도계 데모
• ESP32 대시보드 프로토타입
• 원형 디스플레이 차량 클러스터
• E-bike, 스쿠터, 고카트 또는 RC 텔레메트리 화면
• 산업용 게이지 패널
• 시뮬레이터 대시보드
• 모터 속도 또는 RPM 표시
• 배터리 주행 가능 거리와 주행 모드 인터페이스

더 복잡한 계기판을 만들기 전에 일반 위젯으로 LVGL 게이지를 구성하는 방법을 보고 싶을 때도 좋은 학습 파일입니다.