本篇文章介紹一下AWTK開源智能串口屏方案的串口屏端（即HMI端）的編譯運(yùn)行步驟，并介紹如何將HMI端移植到Linux或STM32平臺(tái)或RTOS平臺(tái)，以及如何配置資源文件。引言：AWTK-HMI是基于AWTK與AWTK-MVVM開發(fā)的低代碼智能串口屏方案，本系列文章介紹如何從零開發(fā)HMI程序，包括搭建開發(fā)環(huán)境、創(chuàng)建HMI運(yùn)行時(shí)工程、修改應(yīng)用界面以及開發(fā)MCU程序。
上一篇文章《【AWTK開源智能串口屏方案】方案介紹和工作原理》介紹到HMI端工程（又稱為運(yùn)行時(shí)）運(yùn)行在串口屏硬件上，負(fù)責(zé)界面顯示和人機(jī)交互，用戶可替換里面的資源文件切換為不同的應(yīng)用。它是支持跨平臺(tái)且不受硬件和系統(tǒng)限制的，本篇文章就來介紹一下如何將HMI端分別編譯到Windows、Linux平臺(tái)和STM32中。
圖?1 AWTK-HMI工作原理
?
在Windows上編譯HMI端程序
編譯串口屏程序很簡(jiǎn)單，只需幾個(gè)步驟即可。首先確保電腦上安裝好了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倉(cāng)庫(kù)到本地目錄，并根據(jù)README.md文檔內(nèi)的使用說明運(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í)的資源文件，后期可以通過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開始創(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，后期可以通過AWStudio設(shè)計(jì)新的界面替換assets目錄文件達(dá)到更新運(yùn)行時(shí)UI界面效果。最后，只需要將release文件夾拷貝到板子上并運(yùn)行release/bin目錄下的demo程序即可。
移植HMI端程序到STM32平臺(tái)
這里以stm32h743開發(fā)為例子來介紹如何將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打開hmi/awtk-stm32h743iitx-freertos/USER/awtk.uvprojx，點(diǎn)擊Build按鈕并等待編譯完成，可以看到以下信息。圖?6 stm32h743移植工程在keil上編譯成功的信息一般HMI端代碼和資源文件是分開的，因此還需要將資源文件目錄assets放到SD卡或U盤等形式，插入板子上使用文件系統(tǒng)來讀取。后期也能通過AWStudio設(shè)計(jì)新的界面替換該目錄達(dá)到更新運(yùn)行時(shí)UI界面效果。
如果資源文件想要存放在SD卡中，需要讓 AWTK 支持 FATFS，并且通過awtk_config.h配置資源文件路徑，詳細(xì)操作可以閱讀下面目錄的移植文檔說明：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。往期系列文章
《【AWTK開源智能串口屏方案】方案介紹和工作原理》
??關(guān)聯(lián)產(chǎn)品??技術(shù)交流群長(zhǎng)按識(shí)別如下二維碼可加入“EsDA嵌入式系統(tǒng)設(shè)計(jì)自動(dòng)化交流群”，與志同道合的朋友交流，并有專業(yè)技術(shù)人員為您答疑解惑，如有問題可以咨詢小致微信：zlgmcu-888。更多往期文章，請(qǐng)點(diǎn)擊“?閱讀原文?”。
