TouchGFX 设计”+电池状态在线监测

北方

TouchGFX 设计”+电池状态在线监测 [复制链接]

1、 TouchGFXDesigner简介

GFX作为一个再MCU上跑得很high的库，可以再各种版本的KEIL上见到，通常的开发流程是创建一个工程project，然后根据硬件逐个添加库，gfx库再keil中是需要license才能够使用的。但是，GFX被st装到口袋里了。然后呢，就有了这个免费的TouchGFXDesigner。

TouchGFXDesigner更像是MVC开发的网页工具，有了frontpage网站设计基础就可以不看手册直接上手。设计的用户界面可以用分钟来计算。这个项目就是这样的。

但是，基于嵌入式开发，代码的连接再TouchGFXDesigner里面有两种方式，第一种是再UI设计完成后用生成代码按键，一键生产，然后导出后在keil，gcc，iar等环境继续开发。

但是还有一个更快的，在interaction选项下有插入function的选项，可以直接把代码嵌入到这个项目中。

不过，更好用的部分是simulator，用模拟器可以直接形成代码的动态部分。编译执行的过程稍慢，不过确实很好玩，如果编写小游戏，更是方便。

2、电池状态在线监测项目介绍

2.1 电池状态在线监测项目实现的效果，这个界面包括初始页面splash，状态显示页面Status，设置页面Settings，介绍页面About。

这个项目可以接受来自ADC接口或者通讯接口的数据显示实时状态，这个项目的数据接口用演示数据表示。

具体实现的流程：

- 项目启动，显示起始页面的图像，同时等待整个项目的加载和初始化。

- 完成初始化后，就直接进入主页面。主页面包括文字显示的电池电压，电池电流和电池运行温度，环境温度的动态显示。

- 为了正确显示出设定的参数，需要对设定的单位和时间段进行设定，这些都表现在设定页面。

- 最后的关于页面，说明了需要的信息，这介绍了touchGFX的说明。

2.2 应用平台：在开发的创建工程时，可选的都是stm32的discover等典型开发板，这个项目使用simulator开发，从blank UI开始设计，没有套用典型的范例和demo；

2.3 应用场景：工业用数据监控面板显示。

2.4 设计的特点：用户界面简洁，使用方便。设计中使用了STM32 LOGO，不过需要注意的时文件名需要改成短文件名，否则要报错的。

3、设计中使用到container和Scroll list，界面的设计更丰富。

3.1 首先创建一个自定义容器，

然后在其中添加元素，这里时图片和文本，其中文本中的是在代码中访问和更新的数据

3.2 这样就可以在创建的页面中添加这个元素，这里用滚动表格scroll list添加3个元素，

3.3 其他的文件均按此逐个编辑，就形成了一个如下简单的逻辑执行框架。

4、对应的工程文件和简单操作展示视频如下。

4.1 视频用simulator，显示用gif截屏后的效果如下，

4.2 上传的代码如所附附件

BatteryManagement.7z (10.66 MB, 下载次数: 115)

5. 后续工作。

在这个简单界面上，完成代码的注入和修改，实现数据更新的功能。

在完成基本逻辑后，就可以进一步优化页面设计，选择颜色，图片和更丰富的用户交互。

倾心思梦

谢谢分享！