本篇文章介紹一下AWTK 開源智能串口屏方案的基本原理和實際使用效果，包括主要特點、應用場景、工作原理以及簡單的Demo演示。

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

AWTK開源智能串口屏方案簡介

AWTK 開源智能串口屏方案（Gitee倉庫地址：gitee.com/zlgopen/awtk-hmi），倉庫包含了MCU端工程（含PC模擬器）、MCU SDK、HMI端工程（含PC模擬器）以及多個串口屏應用示例，并配有說明文檔。

其中HMI端工程（又稱為運行時）運行在串口屏硬件上，負責界面顯示和人機交互，用戶可替換里面的資源文件切換為不同的應用。MCU端工程則是用戶自己的主控程序，通過調用MCU SDK的API，可以與HMI端通過串口或網口通信。MCU可以主動獲取、設置串口屏的變量值，或接收串口屏的按鍵事件，實現雙向交互。

圖1 MCU端與串口屏端連接方式

1. 主要特點

1.1 HMI端

• 開放源碼，免費商用，從底層到應用程序全程可控；
• 基于AWTK和AWTK-MVVM實現強大的 GUI 功能；
• 強大的界面設計器 AWStudio，拖拽式開發所見即所得；
• 界面設計與綁定數據（變量）簡單，無需編寫任何代碼；
• 支持通過串口更新UI資源，無需重新編譯工程；
• 支持在PC上模擬運行。

1.2 MCU端

• 提供MCU SDK與HMI端通信，使用簡單無需了解通信協議；
• 只需使用三組函數：獲取變量、設置變量、監視事件；
• 無需指定物理地址，變量可用中文名；
• 支持串口和TCP通信；
• 提供MCU模擬器模擬與串口屏的交互。

2. 應用場景

本方案假設有兩類用戶：串口屏廠商與普通用戶。廠商把HMI端工程（運行時）燒寫固化到串口屏硬件上；用戶買到串口屏后，通過AWStudio開發自己的界面應用并把生成的資源文件替換到串口屏上，再開發自己的主控MCU程序，最后通過MCU SDK控制串口屏。

圖2使用AWStudio開發界面應用3. 工作原理

串口屏HMI工程實際上是一個AWTK+MVVM的程序（運行時），這個程序可以加載res文件夾的UI資源文件（UI-XML、字體、圖片等），并顯示在屏幕上。由于使用MVVM框架，界面上的可變內容可以綁定到特定的變量名。

串口屏作為通信服務端啟動，而MCU端程序使用我們封裝好的通信協議（MCU SDK），作為通信客戶端與串口屏連接，之后就可以直接通過變量名進行交互。

圖3工作原理后期用戶如果想更新串口屏上的應用，直接用AWStudio設計新界面，打包替換res文件夾的資源文件然后重啟串口屏即可，無需重新編譯HMI工程。

Demo演示

下面使用PC上的MCU模擬器和串口屏模擬程序來對AWTK-HMI的一些功能進行演示。

1. MCU獲取串口屏事件

用戶在串口屏上改變界面數據時，會自動將事件通知MCU端，如下圖所示：

圖 4 串口屏界面改變自動通知MCU

2. MCU設置串口屏變量屬性

在MCU中輸入屬性名稱、屬性類型和值再點擊“設置屬性”按鈕即可看到串口屏界面中對應的屬性改變，如下圖所示：

圖5 MCU修改數據自動更新串口屏界面

3. 串口屏實機效果

下面是串口屏在實際板子上的運行效果，包括使用MCU操控串口屏界面以及手動操作串口屏界面兩種方式：

圖 6 串口屏實際上板演示