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