2. 开发环境搭建：从零开始，把工具备齐

说实话，HMI 开发最怕什么？不是代码写不出来，而是环境配到一半卡住了。我见过太多新手，第一天装工具就劝退了。今天咱们就把这事一次性搞定。

这一章，我会带你装好四样东西：VS Code、Python 与 C++ 交叉编译环境、仿真器与驱动，最后跑通一个 Hello World 界面。每一步我都会告诉你「为什么这么干」，以及「我踩过的坑」。

2.1 安装 Visual Studio Code

VS Code 是目前 HMI 开发的主流编辑器。轻量、插件多、社区活跃。我个人习惯用它做所有嵌入式前端开发。

2.1.1 下载与安装

1. 打开官网 code.visualstudio.com，下载对应系统版本（Windows / macOS / Linux）。
2. 安装时勾选「添加到 PATH」和「支持右键打开」。这一步很重要，后面编译时会省很多事。
3. 启动后，左侧扩展栏搜索并安装以下插件：
   • Python（微软官方）
   • C/C++（微软官方）
   • CMake Tools（用于交叉编译）
   • Live Server（预览 HMI 界面）

2.1.2 验证安装

打开终端（Terminal），输入 code --version。如果看到版本号，说明安装成功。

code --version
1.89.1

2.2 配置 Python 与 C++ 交叉编译环境

HMI 开发经常需要混合编程：Python 写逻辑原型，C++ 做底层驱动。交叉编译就是在一台电脑上编译出能在另一台设备（比如 ARM 板子）上跑的程序。

2.2.1 Python 环境

1. 安装 Python 3.10+（推荐 3.11，兼容性最好）。
2. 安装虚拟环境工具：pip install virtualenv。
3. 创建项目虚拟环境：

   mkdir hmi_project
   cd hmi_project
   python -m venv venv
   source venv/bin/activate  # Windows 用 venv\Scripts\activate

4. 安装常用库：

   pip install pyserial pyqt5 numpy

2.2.2 C++ 交叉编译链

以 ARM Cortex-A7 平台为例（常见于 HMI 工控板）：

安装步骤：

1. 下载交叉编译器：sudo apt install gcc-arm-linux-gnueabihf（Ubuntu）或从 ARM 官网下载。
2. 创建工具链文件 toolchain.cmake：

   set(CMAKE_SYSTEM_NAME Linux)
   set(CMAKE_SYSTEM_PROCESSOR arm)
   set(CMAKE_C_COMPILER arm-linux-gnueabihf-gcc)
   set(CMAKE_CXX_COMPILER arm-linux-gnueabihf-g++)

3. 验证编译：arm-linux-gnueabihf-gcc --version。

2.3 安装仿真器与驱动

仿真器用来在电脑上模拟 HMI 硬件，不用每次烧录到真机。我推荐 QEMU 配合 LVGL 模拟器。

2.3.1 QEMU 安装

sudo apt install qemu-system-arm
qemu-system-arm --version

2.3.2 LVGL 模拟器

1. 克隆官方仓库：git clone https://github.com/lvgl/lv_port_pc_eclipse.git
2. 进入目录，用 CMake 构建：

   mkdir build && cd build
   cmake ..
   make -j4

3. 运行模拟器：./lv_sim_eclipse_sdl。如果看到 LVGL 的演示界面，说明环境通了。

2.4 第一个 Hello World 界面

环境搭好了，咱们写个最简单的界面。用 LVGL 的 C API 实现。

2.4.1 代码实现

#include "lvgl.h"

void my_gui_init(void) {
    lv_obj_t *label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Hello World!");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}

int main(void) {
    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();

    my_gui_init();

    while(1) {
        lv_task_handler();
        lv_tick_inc(5);
        lv_delay_ms(5);
    }
    return 0;
}

2.4.2 编译与运行

1. 将代码放入 lv_port_pc_eclipse 的 main 目录。
2. 重新编译：make -j4。
3. 运行：./lv_sim_eclipse_sdl。

你会看到一个窗口，中间显示 "Hello World!"。嗯，这就是你的第一个 HMI 界面。

2.5 本章知识体系

下面这张图，帮你把整个环境搭建的脉络理清楚：

2.6 常见问题与解决