#一个用于可视化(HMI)界面的动态屏保的详细制作案例程序#
前言:
在工控自动化设备上,为了防止由于人为误触发或操作引起的故障,通常在触摸屏(HMI)增加屏幕保护界面,然而随着PLC偏IT化的发展,在控制界面上的美观程度也逐渐向上位机或网页前端方面发展,本篇模仿Windows系统的屏幕保护背景界面,做了一个动态气泡的效果视图,其目的是展示CODESYS的可视化组件效果的丰富性,以及可实现性。
本篇案例库文件下载:
https://download.csdn.net/download/weixin_44166380/89965798
一、案例分析
1.实现方案
我们在研究屏保背景动态“气泡”运动时,在屏幕随机位置出现N个气泡,每当任一气泡接触屏幕边框时,自动弹回到其它位置,当任意多个气泡接触时,为避免图形交叉也弹动到其它位置。为了增加气泡间接触的动感,我们在以上的基础上,做了闪烁效果,丰富了图形运动的美感。
2.实现过程
在本篇案例实现的过程中,有几个关键性的因素需要考虑。
🔸 气泡间的物理模型:接触边界的气泡圆,平行并排的气泡圆,似三角形的气泡圆,似菱形的气泡圆等等。
🔸 检测碰撞的位置关系:假设边界起点在左上角,气泡位置<边界起点→右移(下移),气泡位置>边界终点→左移(上移)。当气泡间碰撞时,使用公式√((x1-x2)²+(y1-y2)²),当气泡1位置<气泡2位置时→左移(上移),反之右移(下移)。
🔸 碰撞后的弹出位置:如上,关于碰撞后的移动方向,可使用随机数,但前提是要基于模型和当前的位置关系,确定需要移动的方向。
3.实现效果
如下视频,本篇案例的气泡初始位置是固定的,然后做随机方向运动,当碰到边界或其它气泡时,再做随机方向运动,当气泡间碰撞时,出现闪烁效果。
气泡背景
二、可视化界面
1.图片池
关于图片池的创建和加载,可参考本人专栏的其它文章。
2.图片参数
如下图,添加多个气泡,位置可设0,0,大小宽度均为300,中心点位置150,150,绝对位置和显隐填入相关变量即可。
三、程序代码编写
1.结构体变量
用于气泡相关的内部参数变量。
TYPE Para :
STRUCT
cenPos:ARRAY[0..1] OF REAL;//圆心位置
firstPos:ARRAY[0..1] OF REAL;//圆心位置
moveDir:WORD;//移动方向
blink:BOOL;//眨眼间隔
END_STRUCT
END_TYPE
2.程序体变量
用于程序控制相关的参数变量。
PROGRAM PLC_PRG
VAR
bubbleNo: ARRAY [0..3] OF Para;//气泡数量
i:INT;
j:INT;
firstLast:REAL;
firstOn:BOOL;
visualSize: ARRAY[0..