?【AWTK開源智能串口屏方案】方案介紹和工作原理

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

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

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

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

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

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

1. 主要特點

1.1 HMI端

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

1.2 MCU端

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

2. 應(yīng)用場景

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

圖?2?使用AWStudio開發(fā)界面應(yīng)用

3. 工作原理

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

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

圖?3?工作原理

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

Demo演示

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

1. MCU獲取串口屏事件

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

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

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

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

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

3. 串口屏實機效果

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

圖 6 串口屏實際上板演示