本篇文章將介紹如何使用AWStudio設計串口屏端的UI界面和添加綁定規則，以及怎么將資源文件上傳到串口屏端。引言：AWTK-HMI是基于AWTK與AWTK-MVVM開發的低代碼智能串口屏方案，本系列文章介紹如何從零開發HMI程序，包括搭建開發環境、創建HMI運行時工程、修改應用界面以及開發MCU程序。簡介
本篇文章將介紹如何使用AWStudio設計UI界面以及如何將設計好的UI界面上傳到串口屏HMI端上。在AWStudio上設計好界面后只需要打包資源文件，將資源文件拷貝到串口屏端（HMI端）對應位置即可，整個過程無需重新編譯HMI端代碼。
圖1 AWTK-HMI工作原理
使用AWStudio設計UI界面
在原本的demo_home2示例中，已經實現了“空調”與“咖啡機”的界面，這里就以實現“燈光”界面為例子來介紹如何使用AWStudio設計HMI端UI界面，在該界面將要實現顯示燈光亮度和設置燈光亮度兩個功能。1. 導入AWTK-HMI官方示例
首先，從官方的Gitee下載awtk-hmi倉庫到本地目錄，并使用AWStudio導入awtk-hmi/hmi/demo_home2例程。下載地址：https://gitee.com/zlgopen/awtk-hmi
圖2?在AWStudio中導入demo_home2示例點擊AWStudio中的“新建窗體”按鈕，新建一個Window類型的窗體作為“燈光”功能的界面。然后選中“light_btn”控件，通過修改“v-on:click”屬性使用navigate窗口導航器便可以實現點擊該按鈕跳轉到新建好的界面，如下圖Args參數就是新建窗體的名稱。v-on:click=”{navigate, Args=light_win}”
界面布局可以使用AWStudio自行設計喜歡的界面，如下圖：
為界面內的控件添加綁定規則
接下來為界面中的部分控件添加上綁定規則，這里拿最簡單的設置變量與顯示變量作為例子演示。1. 為顯示數據的控件添加綁定規則
在界面中有一個label控件用于顯示當前的燈光亮度，可以添加綁定規則獲取從MCU端發送過來的數據。綁定規則如下圖，此時若MCU端發送了“真實_亮度”數據到串口屏端時，該label控件會同步更新text屬性的值。v-data:text=”{真實_亮度+’%’}”除了獲取數據之外，還需要為設置數據的滑動條控件添加綁定規則。綁定的規則如下，此時拖拽滑動條控件時MCU端就會收到關于“設定_亮度”的數據。圖6?為設置數據的控件添加綁定規則
關于“真實_亮度”和“設定_亮度”兩個變量的處理邏輯是在MCU端里面實現的，串口屏端無需理會。更多的綁定規則用法可以參考awtk-hmi/docs目錄下的文檔介紹，也可以直接參考awtk-hmi/hmi目錄的demo。3.?初始化數據
完成控件的數據綁定后，可以通過修改資源文件來設置綁定數據的初始值，文件具體路徑：design/default/data/default_model.json
圖7?通過default_model.json設置數據初始值將資源文件更新到串口屏端
假設您之前已經編譯好HMI端的運行時程序，并成功運行在板子上了。現在通過AWStudio設計好界面后AWStudio設計好界面后，點擊“項目”--“打包”選項打包資源文件，此時會在項目目錄下的res文件夾內生成打包好的資源文件，接著替換板子上對應資源文件即可。1. 嵌入式Linux
嵌入式Linux平臺的資源文件位于release/assets目錄中，直接將新的資源文件替換到此目錄，最后只需要將HMI端的運行時程序殺掉再重啟進程即可。2.?STM32
一般STM32平臺的串口屏端是使用加載外部資源方式，所以同樣只需更換外部存儲設備的assets目錄，替換文件之后需要重啟STM32設備。往期系列文章
【AWTK開源智能串口屏方案】方案介紹和工作原理
【AWTK開源智能串口屏方案】HMI端程序移植編譯及運行
- 【AWTK開源智能串口屏方案】MCU SDK使用與編譯運行
?
??關聯產品
??技術交流群
長按識別如下二維碼可加入“EsDA嵌入式系統設計自動化交流群”，與志同道合的朋友交流，并有專業技術人員為您答疑解惑，如有問題可以咨詢小致微信：zlgmcu-888。
