​【AWTK开源智能串口屏方案】方案介绍和工作原理

本篇文章介绍一下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 串口屏实际上板演示