説明

  • 想手動搭建一個 PC 端 lvgl 的調試環境，基於 CLion 2025.2.4
  • LVGL 有個官方的基於 visual studio 的 倉庫：https://github.com/lvgl/lv_port_pc_visual_studio.git，基本功能已經搭建好了
  • 但是 LVGL 官方的倉庫 lv_port_pc_visual_studio 看起來貌似有點複雜，所以想手動搭建一個基於 clion 的 lvgl 調試的環境，瞭解整個搭建過程，熟悉基於 cmake 的構建環境

環境準備

  • IDE : 版本 CLion 2025.2.4，非商業使用
  • 下載 LVGL lv_port_pc_visual_studio 倉庫，作為參考，其實主要是獲取 lv_conf.h 與 lvgl windows 上的窗口初始化代碼。
  • 使用 git clone lv_port_pc_visual_studio 倉庫
git clone https://github.com/lvgl/lv_port_pc_visual_studio.git --recurse-submodules

工程搭建

第一步：新建 simulator 目錄

  • 創建的 lvgl_sim_clion 工程目錄，並在 lvgl_sim_clion 下新建一個 simulator 的目錄，用於存放 lv_conf.h 、lvgl 初始化與 windows 窗口初始化等文件。
  • 打開 lvgl 的官方的 lv_port_pc_visual_studio 倉庫，把

使用 clion 搭建 PC 端 lvgl 的調試環境_git

lv_port_pc_visual_studio\LvglWindowsSimulator\lv_conf.h 複製為 lvgl_sim_clion\simulator\lv_conf.h

把 lv_port_pc_visual_studio\LvglWindowsSimulator\LvglWindowsSimulator.cpp 複製為 lvgl_sim_clion\simulator\simulator.c

  • lvgl_sim_clion\simulator\simulator.c 內容如下：
#include <Windows.h>

#include "lvgl/lvgl.h"
#include "lvgl/examples/lv_examples.h"

/**
 * Basic example to create a "Hello world" label
 */
void lv_example_get_started_1(void)
{
    /*Change the active screen's background color*/
    lv_obj_set_style_bg_color(lv_screen_active(), lv_color_hex(0x003a57), LV_PART_MAIN);

    /*Create a white label, set its text and align it to the center*/
    lv_obj_t* label = lv_label_create(lv_screen_active());
    lv_label_set_text(label, "Hello world");
    lv_obj_set_style_text_color(lv_screen_active(), lv_color_hex(0xffffff), LV_PART_MAIN);
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}

int main()
{
    lv_init();

    /*
     * Optional workaround for users who wants UTF-8 console output.
     * If you don't want that behavior can comment them out.
     *
     * Suggested by jinsc123654.
     */
#if LV_TXT_ENC == LV_TXT_ENC_UTF8
    SetConsoleCP(CP_UTF8);
    SetConsoleOutputCP(CP_UTF8);
#endif

    int32_t zoom_level = 100;
    bool allow_dpi_override = false;
    bool simulator_mode = true;
    lv_display_t* display = lv_windows_create_display(
        L"LVGL Windows Simulator Display 1",
        800,
        480,
        zoom_level,
        allow_dpi_override,
        simulator_mode);
    if (!display)
    {
        return -1;
    }

    HWND window_handle = lv_windows_get_display_window_handle(display);
    if (!window_handle)
    {
        return -1;
    }

    lv_indev_t* pointer_indev = lv_windows_acquire_pointer_indev(display);
    if (!pointer_indev)
    {
        return -1;
    }

    lv_indev_t* keypad_indev = lv_windows_acquire_keypad_indev(display);
    if (!keypad_indev)
    {
        return -1;
    }

    lv_indev_t* encoder_indev = lv_windows_acquire_encoder_indev(display);
    if (!encoder_indev)
    {
        return -1;
    }

    lv_example_get_started_1();

    while (1)
    {
        uint32_t time_till_next = lv_timer_handler();
        lv_delay_ms(time_till_next);
    }

    return 0;
}

第二步：下載 lvgl

  • 可以通過 git 把 lvgl 代碼倉庫拉取下來，git clone https://github.com/lvgl/lvgl.git
  • lvgl 放置在 lvgl_sim_clion 工程目錄

使用 clion 搭建 PC 端 lvgl 的調試環境_#lvgl_02

第三步：搭建 clion 工程

  • 啓動 CLion 2025.2.4，在 CLion 2025.2.4 中打開 lvgl_sim_clion 目錄，選擇 Cmake 的方式。由於此時沒有 Cmake 文件，因此在 lvgl_sim_clion 目錄下，創建 CMakeLists.txt
  • CMakeLists.txt 內容如下：
cmake_minimum_required(VERSION 3.12.4)

project(lvgl-sim LANGUAGES C)

set(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} -Wl,--stack,8388608")

set(LV_BUILD_CONF_DIR simulator)
add_subdirectory(lvgl)

add_executable(lvgl-sim
    simulator/simulator.c
)

include_directories(. simulator)
target_link_libraries(lvgl-sim lvgl)
  • 構建的目標是 lvgl-sim，也就是可執行文件，lvgl 通過 add_subdirectory 的方式包含到工程，因為 lvgl 本身支持 cmake，因此 lvgl 基本不需要做任何改動。
  • lvgl 以 lib 的方式鏈接到工程，使用 target_link_libraries(lvgl-sim lvgl)

調試與運行

  • 點擊 CLion 2025.2.4 調試或者按鈕，即可運行 lvgl 示例，當前為 hello 示例，顯示如下

使用 clion 搭建 PC 端 lvgl 的調試環境_#lvgl_03

小結

  • 前期可以驗證 lvgl 自帶的一些示例，也就是把 lvgl\examples 加入到工程中，在 lvgl_sim_clion\simulator\simulator.c 中調用相關示例的 api 即可。
  • clion 的調試功能還是不錯的，默認使用 Windows 端的 MinGW 工具鏈，也就是 gcc 工具鏈，比 visual studio MSVC 兼容性更強。