【AWTK開(kāi)源智能串口屏方案】HMI端程序移植編譯及運(yùn)行

本篇文章介紹一下AWTK開(kāi)源智能串口屏方案的串口屏端（即HMI端）的編譯運(yùn)行步驟，并介紹如何將HMI端移植到Linux或STM32平臺(tái)或RTOS平臺(tái)，以及如何配置資源文件。

引言：AWTK-HMI是基于AWTK與AWTK-MVVM開(kāi)發(fā)的低代碼智能串口屏方案，本系列文章介紹如何從零開(kāi)發(fā)HMI程序，包括搭建開(kāi)發(fā)環(huán)境、創(chuàng)建HMI運(yùn)行時(shí)工程、修改應(yīng)用界面以及開(kāi)發(fā)MCU程序。

上一篇文章《【AWTK開(kāi)源智能串口屏方案】方案介紹和工作原理》介紹到HMI端工程（又稱為運(yùn)行時(shí)）運(yùn)行在串口屏硬件上，負(fù)責(zé)界面顯示和人機(jī)交互，用戶可替換里面的資源文件切換為不同的應(yīng)用。它是支持跨平臺(tái)且不受硬件和系統(tǒng)限制的，本篇文章就來(lái)介紹一下如何將HMI端分別編譯到Windows、Linux平臺(tái)和STM32中。

圖?1 AWTK-HMI工作原理

在Windows上編譯HMI端程序

編譯串口屏程序很簡(jiǎn)單，只需幾個(gè)步驟即可。首先確保電腦上安裝好了AWTK的開(kāi)發(fā)環(huán)境，若沒(méi)有可以看往期文章教程《【從0開(kāi)始創(chuàng)建AWTK應(yīng)用程序】開(kāi)發(fā)及調(diào)試環(huán)境搭建》。

從官方的Gitee（網(wǎng)址：gitee.com/zlgopen/awtk-hmi）下載awtk-hmi倉(cāng)庫(kù)到本地目錄，并根據(jù)README.md文檔內(nèi)的使用說(shuō)明運(yùn)行“prepare.bat”下載awtk與awtk-mvvm代碼文件。

圖?2?執(zhí)行prepare.bat后的目錄結(jié)構(gòu)

接著進(jìn)入hmi/demo_home2目錄，輸入scons命令編譯HMI端的demo程序，并輸入下面的命令打包資源文件：

python ./scripts/update_res.py all

此時(shí)demo_hom2目錄下分別新增了bin和res兩個(gè)文件夾：bin目錄下是存放HMI端存放編譯后的可執(zhí)行文件與動(dòng)態(tài)庫(kù)；res則是存放運(yùn)行時(shí)的資源文件，后期可以通過(guò)AWStudio設(shè)計(jì)新的界面替換res目錄的資源文件達(dá)到更新運(yùn)行時(shí)UI界面的效果。

進(jìn)入到bin目錄下運(yùn)行demo.exe即可啟動(dòng)編譯好的HMI端程序。

圖?3 HMI端demo程序運(yùn)行效果

移植HMI端程序到嵌入式Linux平臺(tái)

將Windows下載好的awtk-hmi目錄復(fù)制到Ubuntu交叉編譯環(huán)境中，并且在awtk-hmi目錄下載awtk-linux-fb移植層文件，最終awtk-hmi目錄結(jié)構(gòu)如下圖：

圖?4 awtk-hmi交叉編譯目錄結(jié)構(gòu)

首先進(jìn)入到awtk-linux-fb配置好交叉編譯工具鏈路徑（具體配置教程可以看往期文章介紹《【從0開(kāi)始創(chuàng)建AWTK應(yīng)用程序】編譯應(yīng)用到嵌入式Linux平臺(tái)運(yùn)行》），配置好后輸入scons命令進(jìn)行編譯。接著進(jìn)入awtk-mvvm目錄，輸入下面的命令進(jìn)行編譯。

scons LINUX_FB=true WITH_JERRYSCRIPT=false

回到awtk-linux-fb目錄并輸入下面第一條scons命令編譯HMI應(yīng)用程序，編譯完成后接著輸入下面第二條命令發(fā)布應(yīng)用。

scons APP=../demo_home2sh release.sh ../demo_home2/res demo

此時(shí)awtk-linux-fb目錄下會(huì)生成一個(gè)release文件夾，里面同樣包含了可執(zhí)行文件目錄bin和資源文件目錄assets，后期可以通過(guò)AWStudio設(shè)計(jì)新的界面替換assets目錄文件達(dá)到更新運(yùn)行時(shí)UI界面效果。最后，只需要將release文件夾拷貝到板子上并運(yùn)行release/bin目錄下的demo程序即可。

移植HMI端程序到STM32平臺(tái)

這里以stm32h743開(kāi)發(fā)為例子來(lái)介紹如何將HMI程序移植到STM32平臺(tái)，awtk-hmi自帶了一個(gè)stm32h743移植工程，所以整個(gè)移植流程比較方便。首先同樣需要將awtk、awtk-mvvm放到awtk-hmi目錄中，另外還需要運(yùn)行下面兩條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的目錄結(jié)構(gòu)

接著使用keil打開(kāi)hmi/awtk-stm32h743iitx-freertos/USER/awtk.uvprojx，點(diǎn)擊Build按鈕并等待編譯完成，可以看到以下信息。

圖?6 stm32h743移植工程在keil上編譯成功的信息

一般HMI端代碼和資源文件是分開(kāi)的，因此還需要將資源文件目錄assets放到SD卡或U盤(pán)等形式，插入板子上使用文件系統(tǒng)來(lái)讀取。后期也能通過(guò)AWStudio設(shè)計(jì)新的界面替換該目錄達(dá)到更新運(yùn)行時(shí)UI界面效果。

如果資源文件想要存放在SD卡中，需要讓 AWTK 支持 FATFS，并且通過(guò)awtk_config.h配置資源文件路徑，詳細(xì)操作可以閱讀下面目錄的移植文檔說(shuō)明：

awtk-hmi/mcu/stm32/stm32h743-freertos/docs/stm32h743iitx_port.md

圖?7 awtk_config.h配置資源文件路徑

其它硬件平臺(tái)和RTOS移植方法也是大同小異的，可以從官方的Github下載對(duì)應(yīng)的移植工程，參照stm32h743的移植工程在keil中添加所需的代碼文件（awtk、awtk-mvvm、hmi等）并配置awtk_config.h。