有幸获得ST论坛的STM32H750DK评测活动，使用STM32H750DK和TouchGFX实现一个智能零售界面，显示商品信息和支付选项。

TouchGFX是STM32用于图形应用开发的GUI设计和代码生成工具，TouchGFX提供UI界面的布局设计、交互事件定义、自定义UI组件、GUI仿真和代码下载功能。TouchGFX的在线文档详细介绍TouchGFX的组成和使用。

https://support.touchgfx.com/docs/introduction/welcome

TouchGFX中的GUI设计主要围绕MVP(Model-View-Presenter)模型进行，Model负责与后端的交互以及前端的状态管理，View负责图形绘制和用户事件传递，Presenter负责Model和View之间的数据传递。MVP的框图如下。

TouchGFX中的MVP框架构成的前端和后端之间的通讯如下

在进行TouchGFX开发前，查看该文档可以熟悉整个开发流程，了解TouchGFX提供的UI组件类型、如何自定义组件和生成的代码结构，便于修改和添加用户代码。

零售界面方案设计

自动售货机提供货物分类、同类商品查看、添加到购物车、购物车信息查看、价格计算和支付等功能。系统的整体框图如下。

• 商品浏览界面提供商品类别选择、商品分类显示、商品信息显示、选购按钮以及跳转到购物车结算页面的功能；
• 购物结算界面提供显示已选商品列表、总价以及结算按钮；
• 支付QR码界面显示用于支付的二维码；
• 后端处理系统用于接收和响应GUI界面的请求和数据处理；

商品浏览页面设计

设计零售界面时，在商品浏览页面，提供商品类别选择、指定类别商品显示、单个商品信息显示、商品数量添加和结算功能。结合TouchGFX的MVP(Model-View-Presenter)框架的模型，商品浏览界面的框图如下：

TouchGFX的模型中View用于管理GUI的绘制和事件，Presenter用于连接View与Model以及数据的格式化,Model部分用于和后端系统进行数据交互和更新GUI数据。后端系统是独立在MVP模型外的，Model中提供有用于通讯的接口，后端系统通过接口函数传输数据，实现方式灵活。

购物车查看和支付界面设计

购物车查看界面查看添加的商品价格信息，支付界面显示用于支付的QR码信息，该界面的框图如下：

与商品浏览界面类似，购物车界面的View和Presenter是独立的，而Model部分是多个界面共享，管理整个GUI部分的数据以及与后端系统交互，在框图中表现为共享的模块。

由于支付界面仅显示用于支付的QR码，在实现时，使用TouchGFX中的Modal Window控件实现弹出窗口即可满足需要。

后端系统和GUI交互

零售界面的GUI和后端系统的交互，通过MVP框架中Model类使用异步信号量进行与后端数据管理系统的数据交换。这些异步信号量在TouchGFX中使用的是FreeRTOS的队列和信号量，利用FreeRTOS的系统调度功能，可以在GUI的帧刷新间隔内对数据传输和更新进行处理，用于下一次更新GUI界面信息，同时保证GUI界面的流程运行。

总结

以上对智能零售界面的功能组成、结合TouchGFX的MVP框架进行数据交互进行介绍，使用TouchGFX进行人机界面的开发可以集中于应用的功能设计，节省在GUI交互部分的工作量，提高GUI应用的开发效率。TouchGFX框架提供满足界面应用程序设计的功能，围绕MVP框架进行系统的功能划分、功能分区设计和数据传递，借助其验证过的模型，减少后续开发中可能出现的设计隐患，提高系统稳定性。