本篇文章介绍一下AWTK 开源智能串口屏方案的基本原理和实际使用效果,包括主要特点、应用场景、工作原理以及简单的Demo演示。
引言:AWTK-HMI是基于AWTK与AWTK-MVVM开发的低代码智能串口屏方案,本系列文章介绍如何从零开发HMI程序,包括搭建开发环境、创建HMI运行时工程、修改应用界面以及开发MCU程序。
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端
1.2 MCU端
本方案假设有两类用户:串口屏厂商与普通用户。厂商把HMI端工程(运行时)烧写固化到串口屏硬件上;用户买到串口屏后,通过AWStudio开发自己的界面应用并把生成的资源文件替换到串口屏上,再开发自己的主控MCU程序,最后通过MCU SDK控制串口屏。
图 2 使用AWStudio开发界面应用3. 工作原理
串口屏HMI工程实际上是一个AWTK+MVVM的程序(运行时),这个程序可以加载res文件夹的UI资源文件(UI-XML、字体、图片等),并显示在屏幕上。由于使用MVVM框架,界面上的可变内容可以绑定到特定的变量名。
串口屏作为通信服务端启动,而MCU端程序使用我们封装好的通信协议(MCU SDK),作为通信客户端与串口屏连接,之后就可以直接通过变量名进行交互。
图 3 工作原理后期用户如果想更新串口屏上的应用,直接用AWStudio设计新界面,打包替换res文件夹的资源文件然后重启串口屏即可,无需重新编译HMI工程。
下面使用PC上的MCU模拟器和串口屏模拟程序来对AWTK-HMI的一些功能进行演示。
用户在串口屏上改变界面数据时,会自动将事件通知MCU端,如下图所示:
图 4 串口屏界面改变自动通知MCU
在MCU中输入属性名称、属性类型和值再点击“设置属性”按钮即可看到串口屏界面中对应的属性改变,如下图所示:
图 5 MCU修改数据自动更新串口屏界面
下面是串口屏在实际板子上的运行效果,包括使用MCU操控串口屏界面以及手动操作串口屏界面两种方式:
图 6 串口屏实际上板演示
全部0条评论
快来发表一下你的评论吧 !