2. GUI工具-HMI
2.1 GUI芯片与HMI
GT-HMI是公司自主开发的GUI开发框架，区别于LVGL等通用GUI框架，GT-HMI的特色在于：
- GT-HMI Designer：上位机UI设计器，图形化设计界面，无需手写UI布局代码
- GT-HMI Engine：下位机UI渲染引擎，纯C语言编写，支持资源文件解析和UI渲染
- GT5G系列芯片：SPI NOR Flash存储芯片，Designer生成的 resource.bin 烧录到芯片后，Engine通过SPI接口读取资源并通过LCD显示
2.2 HMI开发流程
使用GT5G系列芯片进行HMI开发的标准流程：
- 在GT-HMI Designer中设计图形界面
- Designer自动生成 resource.bin 资源文件
- 将 resource.bin 烧录到GT5G芯片中
- 在MCU上运行GT-HMI Engine，通过SPI接口从GT5G芯片读取资源
- 通过LCD显示GUI界面
HMI 开发流程图
资源链接：
- 官网：www.hmi.gaotongfont.cn
- Designer下载：www.hmi.gaotongfont.cn/kfgj
- 视频教程：B站教程合集
2.3 GT-HMI Designer 工程创建
GT-HMI Designer是上位机图形界面设计工具，通过可视化方式完成UI设计后，自动生成下位机代码和资源文件。
Designer 设计工作流
工程设计流程：
- 打开GT-HMI Designer，新建工程并选择 screen 分辨率
- 设计UI界面（拖拽控件、设置属性）
- 点击"生成代码"，Designer自动生成：
resource.bin：UI资源文件（字库、图片、控件配置）main函数调用gt_ui_init()等框架代码board文件夹中的移植文件：gt_port_vf.c、gt_gui_driver.lib、gt_gui_driver.h
- 使用烧录工具（如FlyPRO）将 resource.bin 烧录到GT5G芯片中
GT-HMI Designer 主界面
移植文件说明：
| 文件 | 说明 |
|---|---|
gt_port_vf.c | 移植接口文件，需要适配SPI读写和LCD刷新 |
gt_gui_driver.lib | GUI驱动库 |
gt_gui_driver.h | GUI驱动头文件 |
上述移植文件位于 GT-HMI-Engine\driver 目录下。
烧录步骤：
- 打开 FlyPRO 烧录软件
- 选择芯片型号（如 GD25Q16C 兼容型号）
- 加载 resource.bin 文件
- 点击烧录，等待完成
FlyPRO 烧录工具
2.4 GT-HMI Engine 工程配置
GT-HMI Engine是下位机UI渲染引擎，需要在MCU工程中进行配置。
获取代码：
git clone git@gitee.com:genitop/GT-HMI-Engine.git -b develop
Keil5 工程配置：
- 将GT-HMI-Engine源码加入Keil5工程
- 勾选 Target → Use MicroLIB 选项
- 适配 gnu 编译器选项（如使用GCC）
Keil5 工程配置
编译成功后输出如下：
Keil 编译输出
关键函数说明：
| 函数 | 说明 |
|---|---|
spi_wr() | SPI读写函数，负责与GT5G芯片通信 |
_flush_cb() | LCD刷新回调，将像素数据写入LCD |
read_cb() | 触摸读取回调，获取触摸坐标 |
read_cb_btn() | 按钮读取回调 |
gt_init() | Engine初始化 |
gt_tick_inc() | 1ms定时器中断调用，驱动GUI帧更新 |
主循环结构：
void main(void)
{
gt_init(); // 初始化Engine
while(1)
{
gt_tick_inc(1); // 1ms tick，驱动GUI
}
}
2.5 移植接口
将GT-HMI Engine移植到目标MCU需要实现三个核心接口函数：
SPI读写接口 — spi_wr
// spi_wr - SPI读写函数
// data_write - 写入数据指针
// len_write - 写入数据长度
// data_read - 读取数据缓冲区指针
// len_read - 读取数据长度
uint32_t spi_wr(uint8_t * data_write, uint32_t len_write,
uint8_t * data_read, uint32_t len_read)
{
unsigned long ReadAddr;
// 解析读取地址（sendbuf[1:3] = 24位地址）
ReadAddr = *(data_write + 1) << 16;
ReadAddr += *(data_write + 2) << 8;
ReadAddr += *(data_write + 3);
// 通过SPI从Flash读取数据
spiflash_read(data_read, ReadAddr, len_read);
return 1;
}
LCD刷新接口 — _flush_cb
// _flush_cb - LCD刷新回调
// drv - 显示驱动结构体
// area - 刷新区域
// color - 像素颜色数据
void _flush_cb(struct _gt_disp_drv_s * drv,
gt_area_st * area, gt_color_t * color)
{
gt_size_t x = area->x, y = area->y;
uint16_t w = area->w, h = area->h;
int i = 0;
// 设置LCD写入窗口
lcd_setblock(x, y, x + w - 1, y + h - 1);
for (i = 0; i < w * h; i++)
{
// 写入RGB565像素数据
lcd_wr_data(color->full >> 8);
lcd_wr_data(color->full & 0xff);
color++;
}
}
触摸读取接口 — read_cb
// read_cb - 触摸读取回调
// indev_drv - 输入设备驱动结构体
// data - 输入设备数据
void read_cb(struct _gt_indev_drv_s * indev_drv,
gt_indev_data_st * data)
{
if (!touch_status)
{
// 无触摸，状态为释放
data->state = GT_INDEV_STATE_RELEASED;
return;
}
// 有触摸，读取坐标
touch_status = 0;
data->point.x = tp_dev.point.x;
data->point.y = tp_dev.point.y;
data->state = GT_INDEV_STATE_PRESSED;
}
2.6 HMI工程创建步骤
完整的HMI工程创建步骤如下：
- 在GT-HMI Designer中完成UI设计，点击"生成代码"
- 将生成的
board文件夹中的gt_port_vf.c、gt_gui_driver.lib、gt_gui_driver.h复制到Keil工程GT-HMI-Engine/driver目录 - 使用烧录工具将 resource.bin 烧录到Flash芯片
- 编译Keil工程，下载到MCU
- MCU运行后，GT-HMI Engine自动从Flash读取资源文件并渲染GUI