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

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

AWTK開源智能串口屏方案簡(jiǎn)介

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

其中HMI端工程（又稱為運(yùn)行時(shí)）運(yùn)行在串口屏硬件上，負(fù)責(zé)界面顯示和人機(jī)交互，用戶可替換里面的資源文件切換為不同的應(yīng)用。MCU端工程則是用戶自己的主控程序，通過調(diào)用MCU SDK的API，可以與HMI端通過串口或網(wǎng)口通信。MCU可以主動(dòng)獲取、設(shè)置串口屏的變量值，或接收串口屏的按鍵事件，實(shí)現(xiàn)雙向交互。

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

1. 主要特點(diǎn)

1.1 HMI端

• 開放源碼，免費(fèi)商用，從底層到應(yīng)用程序全程可控；
• 基于AWTK和AWTK-MVVM實(shí)現(xiàn)強(qiáng)大的 GUI 功能；
• 強(qiáng)大的界面設(shè)計(jì)器 AWStudio，拖拽式開發(fā)所見即所得；
• 界面設(shè)計(jì)與綁定數(shù)據(jù)（變量）簡(jiǎn)單，無(wú)需編寫任何代碼；
• 支持通過串口更新UI資源，無(wú)需重新編譯工程；
• 支持在PC上模擬運(yùn)行。

1.2 MCU端

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

2. 應(yīng)用場(chǎng)景

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

圖2使用AWStudio開發(fā)界面應(yīng)用3. 工作原理

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

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

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

Demo演示

下面使用PC上的MCU模擬器和串口屏模擬程序來(lái)對(duì)AWTK-HMI的一些功能進(jìn)行演示。

1. MCU獲取串口屏事件

用戶在串口屏上改變界面數(shù)據(jù)時(shí)，會(huì)自動(dòng)將事件通知MCU端，如下圖所示：

圖 4 串口屏界面改變自動(dòng)通知MCU

2. MCU設(shè)置串口屏變量屬性

在MCU中輸入屬性名稱、屬性類型和值再點(diǎn)擊“設(shè)置屬性”按鈕即可看到串口屏界面中對(duì)應(yīng)的屬性改變，如下圖所示：

圖5 MCU修改數(shù)據(jù)自動(dòng)更新串口屏界面

3. 串口屏實(shí)機(jī)效果

下面是串口屏在實(shí)際板子上的運(yùn)行效果，包括使用MCU操控串口屏界面以及手動(dòng)操作串口屏界面兩種方式：

圖 6 串口屏實(shí)際上板演示