芯耀
2070
本篇文章介紹一下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端工程則是用戶自己的主控程序，通過(guò)調(diào)用MCU SDK的API，可以與HMI端通過(guò)串口或網(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ú)需編寫任何代碼；支持通過(guò)串口更新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í)）燒寫固化到串口屏硬件上；用戶買到串口屏后，通過(guò)AWStudio開發(fā)自己的界面應(yīng)用并把生成的資源文件替換到串口屏上，再開發(fā)自己的主控MCU程序，最后通過(guò)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），作為通信客戶端與串口屏連接，之后就可以直接通過(guò)變量名進(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í)際上板演示
下載ECAD模型
