JianStudio

博文

AI 辅助生成贝加莱 VC4 HMI — 工作方法总结

工控笔记

基于 APJX_FKJ 项目的实际验证经验
2025年

一、总体思路

PLC 源代码分析
      ↓
VC4 页面格式逆向（发现 .page = 纯 XML）
      ↓
AI 生成新页面 → 注册到项目 → AS编译 → 部署到实机
      ↓
实机验证 ✅

整个过程分为 逆向分析 和 正向生成 两个阶段。

二、阶段一：逆向分析（理解现有项目）

Step 1 — 项目结构摸底

项目根目录/
├── *.apj                    # Automation Studio 项目文件
├── Logical/                 # 逻辑层（PLC 代码 + HMI 配置）
│   ├── Pro_*/               # 各子任务（Pro_Temp/Pro_Alarm/Pro_Output...）
│   │   ├── Main.st          # ST 源码
│   │   ├── Types.typ        # 类型定义
│   │   └── Variables.var    # 变量声明
│   ├── VCShared/            # VC4 共享资源
│   │   ├── DataSources/     # 数据源映射（核心！）
│   │   │   └── DataSource.dso   # PLC→HMI 变量绑定表
│   │   ├── TextGroups/      # 多语言文本
│   │   └── Languages.vcr    # 语言配置
│   └── Visu/                # HMI 可视化层
│       ├── Package.vcp      # 项目清单（注册所有页面和资源）
│       ├── Pages/           # ★ 页面文件（纯 XML）
│       │   ├── P00.page     # 首页
│       │   ├── P10.page     # 主控
│       │   ├── P30.page     # 温控 ⭐ 参考模板
│       │   └── ...
│       ├── Fonts/           # 字体定义
│       ├── Bitmaps/         # 位图资源
│       └── Layers/          # 共享图层（导航栏）
└── Physical/                # 硬件配置

Step 2 — 分析 PLC 变量体系

关键文件：DataSource.dso — 它是 HMI 和 PLC 之间的桥梁。

读这个文件时，重点关注：

  • Folder 结构 — 对应 PLC 中的 STRUCT 层级 
    <Folder Name="gHmi">
  <Folder Name="Cmd">          → GV.gHmi.Cmd
    <DataPoint Name="bTemp">   → GV.gHmi.Cmd.bTemp[0..11]
  • DataPoint 的 ConnectingVisus="Visu" — 这个标记表示该变量被 HMI 绑定使用
  • VCType — 决定了控件如何解释数据（SCALED=数值, BOOL=开关, INT=整数）

输出：变量路径清单（格式化的表格）

变量路径PLC类型VC类型描述
gHmi.rActPv[0..11]REALSCALED12通道实际温度（PV）
gPara.rSV[0..11]REALSCALED12通道设定温度（SV）
gHmi.Cmd.bTemp[0..11]BOOLBOOL通道加热开关
gHmi.Cmd.bTempAdd[0..11]BOOLBOOL通道升温脉冲
gHmi.iSysStateINTSCALED系统状态
…………

Step 3 — 分析 VC4 页面格式

核心发现：.page = 纯 XML

打开任意一个 .page 文件，可以看到：

<Page Name="P30">
  <Property Name="Index" Value="30"/>
  <Property Name="Width" Value="1024"/>
  <Property Name="Height" Value="600"/>
  <Layers>
    <LayerRef Source="...Layer[Public]"/>   <!-- 共享导航栏 -->
    <Layer Name="Default">
      <TextGroup>...</TextGroup>            <!-- 多语言文本字典 -->
      <Controls>
        <Control ClassId="0x00001004"       <!-- 文本标签 -->
                  Name="Title"/>
        <Control ClassId="0x00001007"       <!-- 数值显示/编辑 -->
                  Name="PV_0">
          <Property Name="ValueDatapoint"
                    Value="Source[global].Variable[DataSource.gHmi.rActPv[0]]"/>
        </Control>
        <Control ClassId="0x00001002"       <!-- 按钮 -->
                  Name="Back_Button">
          <VirtualKey>...</VirtualKey>
        </Control>
      </Controls>
      <KeyMapping>...</KeyMapping>          <!-- 交互动作 -->
    </Layer>
  </Layers>
  <MovementOrder>...</MovementOrder>        <!-- 焦点导航 -->
  <TabSequence>...</TabSequence>            <!-- Tab 顺序 -->
</Page>

关键ClassId对照表：

ClassId控件类型用途
0x00001002Button按钮（可绑定动作：切换变量、跳转页面）
0x00001004Text文本标签（显示字符串）
0x00001007Numeric数值显示/编辑（PV绿色、SV蓝色）
0x0000100DLine分隔线

Step 4 — 提取设计模式

从现有页面中提取可复用的设计规范：

  • 布局坐标网格 — 6列间距：Left=15,170,325,480,635,790
  • 颜色索引 — 背景9(深蓝)、标题239(淡蓝)、数值253(红色=PV)、239(蓝色=SV)
  • 字体 — TempFont(标题)、Display(数值)、ChangePage(按钮)
  • 动作绑定 — KeyAction ClassId="0x00160" = 调页、0x00161 = 写入变量

三、阶段二：正向生成（AI 创建新页面）

Step 1 — 确定页面需求

以这次生成的 P80 为例：

  • 用途：12通道温度总览（只显示PV/SV，不含操作按钮）
  • 布局：6列×2行 = 12通道
  • 数据绑定：PV → gHmi.rActPv[0..11], SV → gPara.rSV[0..11]
  • 导航：返回按钮 → P00
  • 复用资源：使用 P30.page 已有字体、通道名称文本、颜色方案

Step 2 — 生成 .page 文件

根据提取的模板结构生成 XML，关键决策：

Text ID 分配：

  • 已有文本：通过 TextIndex 引用（如 P30 的通道名 ID=98009~98292）
  • 新建文本：使用 200000+ 范围，避免与现有 ID 冲突

数据绑定路径：

  • Source[global].Variable[DataSource.gHmi.rActPv[0]]
  • Source[global].Variable[DataSource.gPara.rSV[0]]

注意路径格式：DataSource.<Folder名>.<DataPoint名>

Step 3 — 注册到项目

必需的修改： 在 Package.vcp 中添加：

<Source File="Pages\P80.page"/>

不注册则编译时不会包含该页面。

Step 4 — 编译与部署

Automation Studio 标准流程：

  1. 将 .page 文件放入 Logical/Visu/Pages/
  2. 在 AS 中打开项目 → Build → Transfer to target

Step 5 — 导航到新页面

项目已配置 PageChangeDatapoint = gHmi.iChangePage，因此在 PLC 中写入：

GV.gHmi.iChangePage := 80;  // 跳转到 P80

或者在已有页面上添加按钮跳转。

四、验证结果

P80 — 温度总览（AI 生成测试页）

验证项结果
页面显示正常✅
12通道 PV 值实时更新（红色）✅
12通道 SV 值可点击编辑（蓝色）✅
系统状态显示✅
返回按钮跳转 P00✅
焦点导航（Tab键顺序）✅

五、可复用的工作流模板

如果你需要在其他贝加莱项目上做同样的事：

  1. 读 Global.var + Types.typ → 获取 PLC 变量定义
  2. 读 DataSource.dso → 获取 HMI 绑定路径
  3. 读一个现有 .page → 获取本项目的颜色/字体/布局风格
  4. 读 Package.vcp → 了解页面注册方式
  5. AI 生成新 .page → 按模板格式输出
  6. 注册到 Package.vcp → 添加 Source File 条目
  7. 编译 → 下载 → 验证

六、关键发现总结

#发现重要性
1.page 是纯 XML，可用任意文本工具直接编辑⭐⭐⭐
2DataSource.dso 是 PLC↔HMI 的桥梁，必须映射的变量都在这里⭐⭐⭐
3新页面必须注册到 Package.vcp 的 SourceFiles 中⭐⭐⭐
4Text ID 必须在全局范围内唯一⭐⭐
5可复用已有页面的字体/颜色/文本，减少生成复杂度⭐⭐
6AI 生成的 .page 在实机上可正常运行，无需手动修改⭐⭐⭐
7修改 Palette.vcr 一次即可全局更新所有页面的配色⭐⭐⭐

七、配色方案参考（本项目的调色板）

本项目使用 浅蓝明快主题，通过修改 Logical/Visu/Palette.vcr 中的以下索引即可全局调整：

索引色值用途视觉效果
9#E3F2FD页面主背景极浅蓝，明亮清爽
248#BBDEFB普通按钮背景浅蓝，柔和
204#4FC3F7重要操作按钮天蓝，醒目但清爽
126#90CAF9标签/状态栏背景中浅蓝，信息分区
254#FFFFFF数值输入框背景纯白，清晰可读
239#0D47A1按钮文字/SV值/标题深藏青，高对比
240#000051按钮按下时文字极深蓝
253#E65100PV实时温度文字深橙，暖色强调
222#42A5F5按钮按下态背景中蓝，触感反馈
223#1E88E5按钮按下态背景变体深蓝
250#E8E8E8页面外边框浅灰边框分隔

设计原则：浅蓝背景干净明亮，适合工厂操作环境；深蓝色文字确保高对比可读性；白色输入区域清晰区分信息层次；橙色PV值提供视觉强调。

← 返回博文列表