【AWTK開源智能串口屏方案】HMI端程序移植編譯及運行

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

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

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

圖?1 AWTK-HMI工作原理

在Windows上編譯HMI端程序

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

從官方的Gitee（網(wǎng)址：gitee.com/zlgopen/awtk-hmi）下載awtk-hmi倉庫到本地目錄，并根據(jù)README.md文檔內(nèi)的使用說明運行“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

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

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

圖?3 HMI端demo程序運行效果

移植HMI端程序到嵌入式Linux平臺

將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開始創(chuàng)建AWTK應(yīng)用程序】編譯應(yīng)用到嵌入式Linux平臺運行》），配置好后輸入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

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

移植HMI端程序到STM32平臺

這里以stm32h743開發(fā)為例子來介紹如何將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的目錄結(jié)構(gòu)

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

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

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

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

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

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

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