本篇文章將介紹如何使用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例程。

圖2在AWStudio中導入demo_home2示例2. 新增界面并設置點擊按鈕跳轉界面點擊AWStudio中的“新建窗體”按鈕，新建一個Window類型的窗體作為“燈光”功能的界面。然后選中“light_btn”控件，通過修改“v-on:click”屬性使用navigate窗口導航器便可以實現點擊該按鈕跳轉到新建好的界面，如下圖Args參數就是新建窗體的名稱。v-on:click=”{navigate, Args=light_win}”

圖3使用窗口導航器實現界面跳轉3. 界面設計與布局界面布局可以使用AWStudio自行設計喜歡的界面，如下圖：

圖4“燈光”界面整體布局

為界面內的控件添加綁定規則

接下來為界面中的部分控件添加上綁定規則，這里拿最簡單的設置變量與顯示變量作為例子演示。

1. 為顯示數據的控件添加綁定規則

在界面中有一個label控件用于顯示當前的燈光亮度，可以添加綁定規則獲取從MCU端發送過來的數據。綁定規則如下圖，此時若MCU端發送了“真實_亮度”數據到串口屏端時，該label控件會同步更新text屬性的值。v-data:text=”{真實_亮度+’%’}”圖5為顯示數據的控件添加綁定規則2.為設置數據的控件添加綁定規則除了獲取數據之外，還需要為設置數據的滑動條控件添加綁定規則。綁定的規則如下，此時拖拽滑動條控件時MCU端就會收到關于“設定_亮度”的數據。v-data:value=”{設定_亮度}”

圖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設備。