TouchGFX 设计+ HVAC空调的HMI设计
<div class='showpostmsg'>参加这次活动，主要目的是体验一下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的按钮动作，来显示不同的文本。具体代码如下：
if(toggleButton1.getState())
{
textArea3.setTypedText(TypedText(T_SINGLEUSEID40));
textArea3.invalidate();
textArea3.resizeToCurrentText();
textArea3.invalidate();
}
else{
textArea3.setTypedText(TypedText(T_SINGLEUSEID24));
textArea3.invalidate();
textArea3.resizeToCurrentText();
textArea3.invalidate();
}
其中T_SINGLEUSEID40、T_SINGLEUSEID24 是软件定义的字符串，可读性差，具体需要通过VS软件查看了。
上传对应的工程文件和一段简单操作展示视频（可以是开发板演示视频，也可以是TouchGFX simulator的视频）；5.工程文件：后续会对touchgfx MVP 的软件模式深入研究，进而完成数据交互方面的设计。
此内容由EEWORLD论坛网友flyword原创，如需转载或用于商业用途需征得作者同意并注明出处
</div><script> var loginstr = '<div class="locked">查看本帖全部内容，请<a href="javascript:;" style="color:#e60000" class="loginf">登录</a>或者<a href="https://bbs.eeworld.com.cn/member.php?mod=register_eeworld.php&action=wechat" style="color:#e60000" target="_blank">注册</a></div>';
if(parseInt(discuz_uid)==0){
(function($){
var postHeight = getTextHeight(400);
$(".showpostmsg").html($(".showpostmsg").html());
$(".showpostmsg").after(loginstr);
$(".showpostmsg").css({height:postHeight,overflow:"hidden"});
})(jQuery);
} </script><script type="text/javascript">(function(d,c){var a=d.createElement("script"),m=d.getElementsByTagName("script"),eewurl="//counter.eeworld.com.cn/pv/count/";a.src=eewurl+c;m.parentNode.insertBefore(a,m)})(document,523)</script> 控件上下层的关系我是通过拖动左边你的工程下面的对应screen下相应控件的上下顺序可以进行调节 y909334873 发表于 2019-4-10 13:35
控件上下层的关系我是通过拖动左边你的工程下面的对应screen下相应控件的上下顺序可以进行调节 ...
哈哈，回头试试，要不然太费劲了。。 {:1_103:}{:1_103:} <p>请教lz，TouchGFX 相比emWIN有何优势？谢谢~</p>
页:
[1]