htm5网站建设经常使用什么对网页的布局进行控制
#一个用于可视化（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 :
STRUCTcenPos:ARRAY[0..1] OF REAL;//圆心位置firstPos:ARRAY[0..1] OF REAL;//圆心位置moveDir:WORD;//移动方向blink:BOOL;//眨眼间隔
END_STRUCT
END_TYPE
2.程序体变量
用于程序控制相关的参数变量。
PROGRAM PLC_PRG
VARbubbleNo: ARRAY [0..3] OF Para;//气泡数量i:INT;j:INT;firstLast:REAL;firstOn:BOOL;visualSize: ARRAY[0..