CODESYS可视化桌面屏保-动态气泡制作详细案例

#一个用于可视化（HMI）界面的动态屏保的详细制作案例程序#
前言：
在工控自动化设备上，为了防止由于人为误触发或操作引起的故障，通常在触摸屏（HMI）增加屏幕保护界面，然而随着PLC偏IT化的发展，在控制界面上的美观程度也逐渐向上位机或网页前端方面发展，本篇模仿Windows系统的屏幕保护背景界面，做了一个动态气泡的效果视图，其目的是展示CODESYS的可视化组件效果的丰富性，以及可实现性。
本篇案例库文件下载：
https://download.youkuaiyun.com/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..1] OF REAL;//边界线
	bubbleSize:REAL;//气泡大小
	bubbleVel:REAL;//气泡速度
	TEST1:ARRAY[