STM32 프로젝트에 UI 기능을 포함하기 위해 LVGL 라이브러리를 사용하려고 한다. 많은 사용자 층이 있고, 꾸준한 업데이트가 진행되고 있는 오픈소스 프로젝트이며, 결정적으로 UI 결과를 타겟보드에서 올려서 확인하는 것이 아니라 Host PC에서도 기능 확인이 가능하기 때문에 LVGL 라이브러리를 사용하기로 결정하였다.
또한, 다양한 플랫폼에 인식되어 있으며, STM32F429 DISC 데모보드에도 포팅되어 GitHub에서 예제소스를 받아서 확인할 수 있다. STM32 타켓보드에 포팅하는 방법은 다른 포스트에서 작성하기로 하고, 이 포스트에서는 LVGL 시뮬레이터를 사용하여 Host PC에서 어떻게 기능을 검증하고 개발하는 방법을 정리할 것이다.
Host PC는 우분투 20.04 버전이며, Visual Studio Code 사용하고 있다. LVGL Simulator를 사용하기 위해 우분투에는 아래의 패키지는 설치되어 있어야 한다.
$ sudo apt install build-essential libsdl2-devLVGL Simulator는 SDL2 라이브러리를 기반으로 제작되었으며, 아래 깃허브에서 시뮬레이터를 코드를 내려받도록 한다. 시뮬레이터에 대한 자세한 설명을 아래 깃허브를 참조하면 된다.
GitHub - lvgl/lv_sim_vscode_sdl
Contribute to lvgl/lv_sim_vscode_sdl development by creating an account on GitHub.
github.com
위 깃허브에서 LVGL 시뮬레이터 코드를 내려받으면, simulator.code-workspace 파일을 실행하면 'LVGL 시뮬레이터 작업영역' 생성된 VSCode가 실행될 것이다.
VSCode를 실행하면 몇 가지 에러메시지가 출력되는데, SDL2 라이브러리 경로가 설정되지 않아 발생한 문제이다. 이것으래 c_cpp_properties.json 파일을 아래와 같이 수정하면 해결된다.
diff --git a/.vscode/c_cpp_properties.json b/.vscode/c_cpp_properties.json
index 59cb901..df5502b 100644
--- a/.vscode/c_cpp_properties.json
+++ b/.vscode/c_cpp_properties.json
@@ -3,7 +3,8 @@
{
"name": "Linux",
"includePath": [
- "${workspaceFolder}/**"
+ "${workspaceFolder}/**",
+ "/usr/include/SDL2"
],
"defines": [],
"intelliSenseMode": "gcc-x64",위 깃허브 가이드라인에 따라 lv_conf.h 파일을 ui/simulator/inc 디렉토리에 복사한 후, 내 플랫폼에 맞게 수정하도록 한다. ARGB를 사용할 예정이므로 LV_COLOR_SCREEN_TRANSP 값을 1로 변경한 것 이외에는 다른 것은 수정하지 않았다.
그리고, lv_drv_conf.h 파일은 LVGL simulator 관련 드라이버 설정 파일로 디바이스 관련 설정 변경이 가능하지만, LCD 해상도만 1024*600으로 변경하였다.
diff --git a/lv_drv_conf.h b/lv_drv_conf.h
index fb7c8c6..162e67d 100644
--- a/lv_drv_conf.h
+++ b/lv_drv_conf.h
@@ -87,7 +87,7 @@
#endif
#if USE_MONITOR
-# define MONITOR_HOR_RES 800
+# define MONITOR_HOR_RES 1024
# define MONITOR_VER_RES 600
/* Scale window by this factor (useful when simulating small screens) */이제부터, LVGL 시뮬레이터를 사용하여 Host PC에서 UI 코딩은 아래와 같이 할 수 있다. 우선 LVGL 깃허브에서 언급된 것처럼 ui/simulator 하위 디렉토리에 inc 디렉토리 및 작업 파일을 아래와 같이 생성하도록 한다.
target_board는 LVGL 라이브러리를 사용하여 UI를 구성하는 작업 디렉토리이며, target_board 디렉토리의 소스 파일을 STM32 UI 작업 디렉토리에 복사하여도 문제없이 동작해야 한다. png 디렉토리는 png decode로 STM32에 포팅한 것을 Host PC에서 동일하게 사용하기 위해 추가한 것이다. UI이 구성과 별개인 관계로 target_board 디렉토리에는 포함시키지 않았다.
이제 마지막으로 Host PC에서 내가 작성한 코드를 확인하기 위해 아래와 같이 main() 함수를 수정하였다.
diff --git a/main/src/main.c b/main/src/main.c
index 7c9fe1a..7ec97f3 100644
--- a/main/src/main.c
+++ b/main/src/main.c
@@ -65,6 +65,11 @@ static int tick_thread(void *data);
/**********************
* GLOBAL FUNCTIONS
**********************/
+#include "lvgl_api.h"
+void sample_init(void)
+{
+ lvgl_init();
+}
int main(int argc, char **argv)
{
@@ -76,6 +81,7 @@ int main(int argc, char **argv)
/*Initialize the HAL (display, input devices, tick) for LVGL*/
hal_init();
+ sample_init();
// lv_example_switch_1();
// lv_example_calendar_1();
@@ -95,7 +101,7 @@ int main(int argc, char **argv)
// lv_example_flex_3();
// lv_example_label_1();
- lv_demo_widgets();
+// lv_demo_widgets();
// lv_demo_keypad_encoder();
// lv_demo_benchmark();
// lv_demo_stress();아래 이미지는 STM32에서 부팅시 회사 로고를 출력하는 부분을 간단하게 적용하여 시뮬레이터에서 동작하는 것을 확인한 것이다.
시뮬레이터라서 하단에 메모리 및 CPU 정보가 나오는데, 이것은 시뮬레이터에서만 나오는 것인지 아니면 모니터링 옵션이 추가되어 나오는 것인지 나중에 확인해 봐야 될 것 같다.
자... 이제부터 LVGL 라이브러리를 공부해서 미니 프로젝트의 화면을 구성해야 할 것 같다. 삽질의 시작일듯 싶다... ;;