本篇文章介绍一下AWTK开源智能串口屏方案的串口屏端（即HMI端）的编译运行步骤，并介绍如何将HMI端移植到Linux或STM32平台或RTOS平台，以及如何配置资源文件。引言：AWTK-HMI是基于AWTK与AWTK-MVVM开发的低代码智能串口屏方案，本系列文章介绍如何从零开发HMI程序，包括搭建开发环境、创建HMI运行时工程、修改应用界面以及开发MCU程序。
上一篇文章《【AWTK开源智能串口屏方案】方案介绍和工作原理》介绍到HMI端工程（又称为运行时）运行在串口屏硬件上，负责界面显示和人机交互，用户可替换里面的资源文件切换为不同的应用。它是支持跨平台且不受硬件和系统限制的，本篇文章就来介绍一下如何将HMI端分别编译到Windows、Linux平台和STM32中。
图 1 AWTK-HMI工作原理
在Windows上编译HMI端程序
编译串口屏程序很简单，只需几个步骤即可。首先确保电脑上安装好了AWTK的开发环境，若没有可以看往期文章教程《【从0开始创建AWTK应用程序】开发及调试环境搭建》。从官方的Gitee（网址：gitee.com/zlgopen/awtk-hmi）下载awtk-hmi仓库到本地目录，并根据README.md文档内的使用说明运行“prepare.bat”下载awtk与awtk-mvvm代码文件。
接着进入hmi/demo_home2目录，输入scons命令编译HMI端的demo程序，并输入下面的命令打包资源文件：
python ./scripts/update_res.py all
此时demo_hom2目录下分别新增了bin和res两个文件夹：bin目录下是存放HMI端存放编译后的可执行文件与动态库；res则是存放运行时的资源文件，后期可以通过AWStudio设计新的界面替换res目录的资源文件达到更新运行时UI界面的效果。进入到bin目录下运行demo.exe即可启动编译好的HMI端程序。
图 3 HMI端demo程序运行效果
移植HMI端程序到嵌入式Linux平台
将Windows下载好的awtk-hmi目录复制到Ubuntu交叉编译环境中，并且在awtk-hmi目录下载awtk-linux-fb移植层文件，最终awtk-hmi目录结构如下图：图 4 awtk-hmi交叉编译目录结构
首先进入到awtk-linux-fb配置好交叉编译工具链路径（具体配置教程可以看往期文章介绍《【从0开始创建AWTK应用程序】编译应用到嵌入式Linux平台运行》），配置好后输入scons命令进行编译。接着进入awtk-mvvm目录，输入下面的命令进行编译。scons LINUX_FB=true WITH_JERRYSCRIPT=false
回到awtk-linux-fb目录并输入下面第一条scons命令编译HMI应用程序，编译完成后接着输入下面第二条命令发布应用。
scons APP=../demo_home2sh release.sh ../demo_home2/res demo
此时awtk-linux-fb目录下会生成一个release文件夹，里面同样包含了可执行文件目录bin和资源文件目录assets，后期可以通过AWStudio设计新的界面替换assets目录文件达到更新运行时UI界面效果。最后，只需要将release文件夹拷贝到板子上并运行release/bin目录下的demo程序即可。
移植HMI端程序到STM32平台
这里以stm32h743开发为例子来介绍如何将HMI程序移植到STM32平台，awtk-hmi自带了一个stm32h743移植工程，所以整个移植流程比较方便。首先同样需要将awtk、awtk-mvvm放到awtk-hmi目录中，另外还需要运行下面两条git命令下载awtk-fs-adapter和awtk-sqlite3。git clone https://github.com/zlgopen/awtk-sqlite3.gitgit clone https://github.com/zlgopen/awtk-fs-adapter.git
图 5 AWTK-HMI移植STM32的目录结构
接着使用keil打开hmi/awtk-stm32h743iitx-freertos/USER/awtk.uvprojx，点击Build按钮并等待编译完成，可以看到以下信息。图 6 stm32h743移植工程在keil上编译成功的信息一般HMI端代码和资源文件是分开的，因此还需要将资源文件目录assets放到SD卡或U盘等形式，插入板子上使用文件系统来读取。后期也能通过AWStudio设计新的界面替换该目录达到更新运行时UI界面效果。
如果资源文件想要存放在SD卡中，需要让 AWTK 支持 FATFS，并且通过awtk_config.h配置资源文件路径，详细操作可以阅读下面目录的移植文档说明：awtk-hmi/mcu/stm32/stm32h743-freertos/docs/stm32h743iitx_port.md
图 7 awtk_config.h配置资源文件路径其它硬件平台和RTOS移植方法也是大同小异的，可以从官方的Github下载对应的移植工程，参照stm32h743的移植工程在keil中添加所需的代码文件（awtk、awtk-mvvm、hmi等）并配置awtk_config.h。往期系列文章
《【AWTK开源智能串口屏方案】方案介绍和工作原理》
关联产品 技术交流群长按识别如下二维码可加入“EsDA嵌入式系统设计自动化交流群”，与志同道合的朋友交流，并有专业技术人员为您答疑解惑，如有问题可以咨询小致微信：zlgmcu-888。
