软PLC与HMI的Web可视化

软PLC结合Web技术是工业4.0背景下实现人机交互（HMI）轻量化、远程化的最佳路径。本指南以CODESYS软PLC为例，手把手教你构建一个基于Web浏览器的可视化监控系统，无需购买昂贵的专用触摸屏。

一、 方案对比与选型

在开始之前，通过表格明确Web可视化方案相对于传统方案的优势，确立实施路径。

二、 环境准备

本指南使用 Windows 10/11 系统作为演示平台。你需要准备以下软件环境：

1. 下载 并 安装 CODESYS Development System V3 (开发环境)。
2. 下载 并 安装 CODESYS Control Win V3 (软PLC运行时)。
3. 确保电脑防火墙允许 CODESYS 系统通过 (通常会自动添加规则，若无法连接请手动放行 C:\Program Files\CODESYS\CODESYS Control Win V3\bin\CODESYSControlWinV3.exe)。

三、 创建PLC控制项目

建立项目并编写基础控制逻辑，模拟一个简单的“启停控制”场景。

1. 启动 CODESYS 软件。
2. 点击 菜单栏 File (文件) -> New Project (新建项目)。
3. 选择 Standard Project (标准项目)，输入 项目名称 WebHMI_Demo，点击 OK。
4. 在设备树中，双击 Application (应用) 下的 PLC_PRG (POUs) 程序块。
5. 在代码编辑区 编写 如下变量声明与逻辑代码：

PROGRAM PLC_PRG
VAR
    // 定义输入变量：启动按钮，停止按钮
    bStart : BOOL;
    bStop : BOOL;

    // 定义输出变量：设备运行指示灯
    bRunning : BOOL := FALSE;
END_VAR

// 编写自锁逻辑：按启动运行，按停止复位
bRunning := (bStart OR bRunning) AND NOT bStop;

6. 按下 Ctrl + S 保存 代码。

四、 配置Web Visualization

利用CODESYS内置的WebVisu组件，通过拖拽控件生成网页界面。

1. 在设备树中，右键点击 Application，选择 Add Object (添加对象) -> Visualization (可视化)。
2. 输入 可视化名称 WebVisu，点击 Open (打开)。
3. 此时进入可视化编辑器。找到 右侧工具箱中的 Elements (元素) -> Visualization (可视化)。
4. 拖动 一个 Button (按钮) 控件到画布左侧。
5. 选中 该按钮，在下方属性窗口中：
   • 找到 Text 属性，修改 为 启动。
   • 找到 Variable 属性，点击 浏览图标，选择 PLC_PRG.bStart。
   • 设置 Toggle Variable (切换变量) 为 TRUE，确保点击后能自动复位。
6. 拖动 第二个 Button 控件到画布右侧，设置 文本为 停止，绑定 变量为 PLC_PRG.bStop，同样开启 Toggle Variable。
7. 拖动 一个 LED 或 Rectangle (矩形) 控件作为指示灯。
8. 选中 指示灯，配置 颜色属性：
   • 在 Color (颜色) 属性中，设置 Background Color (背景色) 的 Variable (变量) 为 PLC_PRG.bRunning。
   • 添加 配色方案：当变量为 TRUE 时颜色为绿色，FALSE 时为灰色。

五、 部署与Web服务器配置

将项目下载到本地软PLC运行时，并开启Web服务端口。

1. 点击 菜单栏 Device (设备) -> Send Code (下载代码)。
2. 在弹出的登录对话框中，确认 网关地址为 127.0.0.1，如果密码框不为空，输入 预设密码 (默认无密码或为空)。
3. 点击 Login (登录) 按钮。
4. 勾选 Download Source (下载源代码) 和 Start Boot Project (启动引导项目)，点击 Download (下载)。
5. 等待下方状态栏显示 Online (在线) 且 Run (运行) 状态为绿色。
6. 在设备树中，展开 CODESYS Control Win V3，双击 Web Server (Web服务器) 配置项。
7. 在属性窗口中，确认 Enabled (已启用) 为 TRUE。
8. 记录 Port (端口) 默认值 8080，或将其修改为 8085 以避免冲突。

六、 通过浏览器访问监控

使用任意现代浏览器打开生成的Web界面，验证控制功能。

1. 打开 Chrome、Edge 或 Firefox 浏览器。
2. 在地址栏 输入 URL：http://127.0.0.1:8080/webvisu.htm (若端口已改，请使用修改后的端口号)。
3. 按下 Enter 键，等待界面加载。
4. 点击 网页上的 启动 按钮。
5. 观察 页面中的指示灯是否由灰色变为绿色。
6. 点击 网页上的 停止 按钮。
7. 确认 指示灯熄灭，逻辑复位成功。