本文以一個家居控制應用程序為例，介紹 AWTK 串口屏的開發流程和 MVVM 數據綁定的高級用法。

1. 功能

這個例子稍微復雜一點，重點關注數據綁定。在這個例子中，模型（也就是數據）里包括一臺空調和一臺咖啡機：

2. 創建項目

從模板創建項目，將 hmi/template_app 拷貝 hmi/home_automation 即可。

項目最好不要放到其它目錄，因為放到其它目錄需要修改配置文件中的路徑，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

界面和資源就直接用了 ZDP1440 顯示驅動芯片例子：

• 主界面

• 空調界面

• 咖啡機界面

4. 添加綁定規則

里面的控件太多，為了不至于太累贅，不同類型的綁定只舉一個例子：

完整示例可以參考 hmi/demo_app3

4.1 溫度設置

這種兩個按鈕帶一個靜態文本的組合很常見。

中間的靜態文本

右邊的按鈕（增加）

• 左邊的按鈕（減少）

v-on:click 是一個常見的事件，最好記住，可以提高效率。

4.2 模式選擇

這個用一組單選按鈕實現，將多個單選按鈕放到 group_box 里（將多個單選按鈕放到 view 里也可以，只是需要為每個單選按鈕編寫綁定規則）。

• 如果綁定規則寫到 group_box 上。這樣寫即可：

如果使用 view 作為容器，則麻煩一點。需要為每個單選按鈕編寫兩條綁定規則：

這種方式雖然麻煩，但是可以處理變量的值不是從 0 開始或者不連續的情況。

4.3 模式顯示

模式用一個靜態文本顯示。問題在于，模式在內部用一個正整數表示，而顯示的是一個用戶可以理解的字符串。所以需要一個轉換函數one_of：

4.4 剩余時間

剩余時間用一個靜態文本顯示。問題在于，剩余時間在內部用一個正整數表示(秒數)，而顯示的是“分鐘:秒”。所以需要一個轉換表達式：

4.5 隱藏視圖

在點擊開關按鈕時，會自動顯示或隱藏右邊的設置視圖。這是通過將視圖的可見性(visible)綁定到開關的狀態實現的:

4.6 指定窗口的模型為 default

這是最簡單也是最關鍵的一步:

嚴格的意義上說，綁定規則也是一種代碼，不過相比于 C 語言，它有下面的優勢：

無需編譯，直接運行。

簡單，通常只有一行。

易懂，聲明式的語法。

5. 初始化數據

修改資源文件 design/default/data/default_model.json, 將其內容改為：

{ "空調_開關" : false, "空調_模式" : 3, "空調_風速" : 3, "空調_垂直風向" : 1, "空調_水平風向" : 1, "空調_溫度": 25, "咖啡_開關" : false, "咖啡_類型" : 1, "咖啡_溫度" : 60, "咖啡_口味" : 1, "咖啡_熱奶" : 1, "咖啡_奶泡" : 1, "咖啡_水量" : 150, "咖啡_剩余時間" : 200, "咖啡_開始制作" : false}

注意：

• 如果文件內容有中文(非ASCII字符)，一定要保存為 UTF-8 格式。
• 重新打包資源才能生效。

6. 編譯運行

運行 bin 目錄下的 demo 程序。

7. 使用 MCU 模擬器與之進行交互

運行 mcu/simulator 目錄下的 mcu_sim 程序，連接到 Localhost:2233。

• 在界面上修改參數，會看到模擬器上收到了對應的事件：

• 在模擬器中設置變量咖啡_類型的數據，HMI 端的界面也會自動更新。

8. 注意

• 完整示例可以參考 hmi/demo_home2。
• 本項目并沒有編寫界面相關的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。