TouchGFX 设计+ HVAC空调的HMI设计

flyword

TouchGFX 设计+ HVAC空调的HMI设计 [复制链接]

参加这次活动，主要目的是体验一下touchgfx desinger软件的使用。

通过学习并设计一个空调机组的HMI界面，用于显示空调机组的实时运行画面，后续基于STM32系列单片机实现空调机组的控制和状态显示。

通过软件学习，目前初步完成如下设计：

• 实现空调机组的画面设计。
• 实现机组参数设置界面。
• 报警界面设计。
• 部分数据的简单交互。
  
  

因为手边没有相应的开发板，没有实际运行TouchGFX到开发板上，因此本次设计主要采用的是电脑上仿真。

设计过程中的心得体会:

1.TouchGFX Designer在UI外观设计上比较开放，能让用户自己改动，例如按钮可以用自定义的图片来替换，滑动条也可以自己替换，从而达到自己美化的效果。

2.软件的使用中发现的问题或者设计缺陷：

• 1.控件大小定义是固定死的，虽然可以拖拽控件，但是尺寸大小不能自由调节，只能选择大、中、小。
• 2.程序交互方面，在添加C++程序时，界面操作很费眼。
• 3.Textarea控件的文本内容定义，在程序中很难找到，都是按照数字顺序定义进去的，比如：T_SINGLEUSEID40，后面在C++编程的时候很难找到形影的字体。
• 缺少一些更接近应用层面的空间，比如：曲线控件。报警表格控件等。
• 缺少控件位置配置选项，比如先放进界面的控件位于最底层，而后放的在上层，在软件中暂时没有找到调节控件上下顺序的方法。（此项网友已解答，可以在左侧控件菜单里拖动调整！）
• 关于TouchGFX的应用例程太少了，网上几乎找不到相关的参考资料。因此使用高级的控件时很难快速上手。估计后续随着意法公司的不断推广应该会变得更好！期待！
  

设计过程简单说明一下：
1.首先设计出4个主界面来，分别对应的是首页、机组运行页面、设置界面、报警信息页面。
其中机组运行页面（下图）采用背景图片的形式，先设计好组态画面保存成图片，然后添加到TouchGFX设计软件中。
之后在关键位置上添加相应的参数信息，就完成了主界面的设计。
当然用户也可以通过依次添加图片的形式完成界面的设计，那样会更灵活点，但更费时间。

2.在各界面添加相应的控件，注意每个screen都是空白的，可以添加图片或者box控件当背景。
3.画线时，需要根据线的2个点坐标来调节线的位置。
4.使用scroll list控件时，需要自定义Container，然后在调用滚动列表清单。滚动列表主要用于显示界面范围以外的信息，比如这里用来显示多余的报警信息。

报警界面设计如下：



5.注意字体显示的问题，可以参考一下论坛评测活动给的教程，里面有。
6.一个小技巧，关于togglebutton的，通过判断togglebutton的按钮动作，来显示不同的文本。具体代码如下：

1. if(toggleButton1.getState())
   
2.         {
   
3.         textArea3.setTypedText(TypedText(T_SINGLEUSEID40));
   
4.         textArea3.invalidate();
   
5.         textArea3.resizeToCurrentText();
   
6.         textArea3.invalidate();
   
7.         }
   
8.         else{
   
9.         textArea3.setTypedText(TypedText(T_SINGLEUSEID24));
   
10.         textArea3.invalidate();
    
11.         textArea3.resizeToCurrentText();
    
12.         textArea3.invalidate();
    
13.         }

复制代码

其中T_SINGLEUSEID40、T_SINGLEUSEID24 是软件定义的字符串，可读性差，具体需要通过VS软件查看了。

上传对应的工程文件和一段简单操作展示视频（可以是开发板演示视频，也可以是TouchGFX simulator的视频）；

5.工程文件：

HVAC.rar (2.13 MB, 下载次数: 56)

2019-4-10 12:03 上传

点击文件名下载附件
touchgfx

后续会对touchgfx MVP 的软件模式深入研究，进而完成数据交互方面的设计。
此内容由EEWORLD论坛网友flyword原创，如需转载或用于商业用途需征得作者同意并注明出处

y909334873

控件上下层的关系我是通过拖动左边你的工程下面的对应screen下相应控件的上下顺序可以进行调节                          

flyword

y909334873 发表于 2019-4-10 13:35
控件上下层的关系我是通过拖动左边你的工程下面的对应screen下相应控件的上下顺序可以进行调节             ...

哈哈，回头试试，要不然太费劲了。。

倾心思梦

threetigher

请教lz，TouchGFX 相比emWIN有何优势？谢谢~