社区导航

 

搜索
查看: 1282|回复: 4

[原创] TouchGFX 设计+ HVAC空调的HMI设计

[复制链接]

307

TA的帖子

0

TA的资源

一粒金砂(高级)

Rank: 3Rank: 3

发表于 2019-4-10 12:37 | 显示全部楼层 |阅读模式

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

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

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


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


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

设计过程中的心得体会:

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

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


  • 1.控件大小定义是固定死的,虽然可以拖拽控件,但是尺寸大小不能自由调节,只能选择大、中、小。
  • 2.程序交互方面,在添加C++程序时,界面操作很费眼。
  • 3.Textarea控件的文本内容定义,在程序中很难找到,都是按照数字顺序定义进去的,比如:T_SINGLEUSEID40,后面在C++编程的时候很难找到形影的字体。
  • 缺少一些更接近应用层面的空间,比如:曲线控件。报警表格控件等。
  • 缺少控件位置配置选项,比如先放进界面的控件位于最底层,而后放的在上层,在软件中暂时没有找到调节控件上下顺序的方法。(此项网友已解答,可以在左侧控件菜单里拖动调整!)
  • 关于TouchGFX的应用例程太少了,网上几乎找不到相关的参考资料。因此使用高级的控件时很难快速上手。估计后续随着意法公司的不断推广应该会变得更好!期待!
设计过程简单说明一下:
1.首先设计出4个主界面来,分别对应的是首页、机组运行页面、设置界面、报警信息页面。
其中机组运行页面(下图)采用背景图片的形式,先设计好组态画面保存成图片,然后添加到TouchGFX设计软件中。
之后在关键位置上添加相应的参数信息,就完成了主界面的设计。
当然用户也可以通过依次添加图片的形式完成界面的设计,那样会更灵活点,但更费时间。
1-home.png
2.在各界面添加相应的控件,注意每个screen都是空白的,可以添加图片或者box控件当背景。
3.画线时,需要根据线的2个点坐标来调节线的位置。
4.使用scroll list控件时,需要自定义Container,然后在调用滚动列表清单。滚动列表主要用于显示界面范围以外的信息,比如这里用来显示多余的报警信息。
2-customercontainer.png
报警界面设计如下:
3-customercontainer.png


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的视频);

HAVC.gif

5.工程文件:

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


回复

使用道具 举报

683

TA的帖子

2

TA的资源

一粒金砂(高级)

Rank: 3Rank: 3

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

点评

哈哈,回头试试,要不然太费劲了。。  详情 回复 发表于 2019-4-10 13:45
Hello astroturfers

回复

使用道具 举报

307

TA的帖子

0

TA的资源

一粒金砂(高级)

Rank: 3Rank: 3

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

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

回复

使用道具 举报

177

TA的帖子

0

TA的资源

宇宙尘埃

发表于 2019-4-11 08:59 | 显示全部楼层

回复

使用道具 举报

152

TA的帖子

0

TA的资源

一粒金砂(高级)

Rank: 3Rank: 3

发表于 2020-2-15 10:54 | 显示全部楼层

请教lz,TouchGFX 相比emWIN有何优势?谢谢~


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

关闭

站长推荐上一条 /5 下一条

  • 论坛活动 E手掌握

    扫码关注
    EEWORLD 官方微信

  • EE福利  唾手可得

    扫码关注
    EE福利 唾手可得

Archiver|手机版|小黑屋|电子工程世界 ( 京ICP证 060456 )

GMT+8, 2020-2-21 11:37 , Processed in 0.185016 second(s), 19 queries , Gzip On, MemCache On.

快速回复 返回顶部 返回列表