首页 理论教育 如何设计触摸屏界面——优化篇

如何设计触摸屏界面——优化篇

时间:2023-06-26 理论教育 版权反馈
【摘要】:图8-51 “事件”参数设置图8-51 “事件”参数设置(续)系统按钮设置系统按钮用于进入触摸屏操作系统,设置路径同“启动按钮设置”。图8-58 监视界面设计要点如下:动态曲线的制作动态曲线用于显示小球位置随着时间的变化情况。图8-59 趋势视图制作路径对趋势图进行“常规”参数设置,如图8-60所示。图8-62 “事件”参数设置

如何设计触摸屏界面——优化篇

为了便于操作和管理,设计HMI界面时将界面分为3页,分别是进入界面、操作界面和监视界面。

1.进入界面

进入界面是HMI首页,用于显示项目名称、进入监控界面及退出系统,运行效果如图8-42所示。

978-7-111-51420-6-Chapter08-52.jpg

图8-42 进入界面

设计要点如下:

(1)背景画面的导入

如图8-43~图8-45所示,在右侧工具栏中,单击图形→选择“我的图像文件夹”→右键单击,选择“新文件夹链接”,添加需要的图片。

978-7-111-51420-6-Chapter08-53.jpg

图8-43 建立图片文件夹

978-7-111-51420-6-Chapter08-54.jpg

图8-44 选择图片

978-7-111-51420-6-Chapter08-55.jpg

图8-45 图片位置

双击图片,弹出设置框如图8-46所示,选择“属性”选项,修改“布局”参数。

978-7-111-51420-6-Chapter08-56.jpg

图8-46 “属性”参数设置

(2)加入时钟显示功能

如图8-47所示,时钟进入路径:工具栏→增强对象→时钟,双击时钟,设置时钟参数。

978-7-111-51420-6-Chapter08-57.jpg

图8-47 时钟画面制作

(3)添加文本

如图8-48所示,进入路径:工具栏→简单对象→文本域,添加文本并设置文本属性。

(4)启动按钮设置

如图8-49所示,进入路径:工具栏→简单对象→按钮,设置常规、属性、动画等参数,如图8-50所示的“动画”的外观栏参数设置。

978-7-111-51420-6-Chapter08-58.jpg

图8-48 文本画面制作

978-7-111-51420-6-Chapter08-59.jpg

图8-49 按钮画面制作

978-7-111-51420-6-Chapter08-60.jpg

图8-50 “外观”参数设置

设置按钮按下的事件属性,如图8-51所示。

978-7-111-51420-6-Chapter08-61.jpg

图8-51 “事件”参数设置

978-7-111-51420-6-Chapter08-62.jpg

图8-51 “事件”参数设置(续)

(5)系统按钮设置

系统按钮用于进入触摸屏操作系统,设置路径同(4)“启动按钮设置”。“事件”设置如图8-52所示。单击“事件”,选择“系统”→“OpenControlPanel”选项,即打开WinCE控制面板窗口。

978-7-111-51420-6-Chapter08-63.jpg

图8-52 系统按钮设置(www.xing528.com)

2.操作界面

操作界面用于操作、修改系统参数,效果如图8-53所示。

设计要点如下:

(1)移动小球

系统设计小球的移动范围为0~600mm,移动小球用于显示小球当前的设定值。该动画主要是将小球图片与PLC程序中小球位置设定变量连接,以便直观查看小球移动位置。动画设置界面如图8-54所示。

978-7-111-51420-6-Chapter08-64.jpg

图8-53 操作界面

978-7-111-51420-6-Chapter08-65.jpg

图8-54 小球位置显示参数设置

(2)小球给定值设置

小球给定值设定可以在PLC中设定,也可以在HMI中随时修改参数,在HMI上该变量与PLC中的位置给定变量连接。给定值进入路径:工具栏→简单对象→IO域,如图8-55所示;参数设置如图8-56所示。

978-7-111-51420-6-Chapter08-66.jpg

图8-55 给定值画面制作

978-7-111-51420-6-Chapter08-67.jpg

图8-56 给定值参数设置

(3)扰动设置

扰动设置用于增加或减小风机外力,观察系统在外部扰动作用下系统变化情况,该变量来自于PLC程序。画面采用按钮制作,参数设置如图8-57所示。

978-7-111-51420-6-Chapter08-68.jpg

图8-57 扰动按钮参数设置

3.监视界面

监视界面用于观察小球位置实时变化曲线,界面运行效果如图8-58所示。

978-7-111-51420-6-Chapter08-69.jpg

图8-58 监视界面

设计要点如下:

(1)动态曲线的制作

动态曲线用于显示小球位置随着时间的变化情况。添加曲线路径:工具栏→增强对象→趋势视图,如图8-59所示。

978-7-111-51420-6-Chapter08-70.jpg

图8-59 趋势视图制作路径

对趋势图进行“常规”参数设置,如图8-60所示。设置趋势图“属性”如图8-61所示。

978-7-111-51420-6-Chapter08-71.jpg

图8-60 “常规”参数设置

978-7-111-51420-6-Chapter08-72.jpg

图8-61 趋势图属性设置

a)“X轴”参数设置 b)“数值轴左边”参数设置 c)“轴”参数设置 d)“趋势”参数设置

(2)退出系统制作

退出系统按钮用于将画面切换至HMI进入画面。按钮性能设置如图8-62所示。

978-7-111-51420-6-Chapter08-73.jpg

图8-62 “事件”参数设置

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈