壹[1]，倍福HMI环境搭建以及界面操作说明

1.基础环境

VS2019

TwinCAT3.4024.65

2.插件安装

2.1.TF2000安装

https://www.beckhoff.com.cn/zh-cn/products/automation/twincat/tfxxxx-twincat-3-functions/tf2xxx-hmi/tf2000.html?

我下载的：1.12.762.57

2.2.TE2000安装

https://www.beckhoff.com.cn/zh-cn/products/automation/twincat/texxxx-twincat-3-engineering/te2000.html

我下载的：1.12.762.57

3.VS中新建HMI项目

打开VS，选择TwinCAT HMI Project，新建项目

4.Server配置

4.1. Service Configuration

点击右下角，选择ServerConfiguration

4.2.配置页面设置

4.2.1.添加Server实例

选中要操作的Endpoints，然后点击Config，进入配置页面

4.2.2.输入本机的用户的登陆密码

弹出的对话框，输入本机登陆用户的登陆密码

4.2.3.设置项目信息

设置Project Name / Project version信息，点击Accept，上方出现Update successful。

4.2.4.配置完成

5.Publish界面

5.1.打开设置

右击项目，选择Pulish to TwinCAT HMI Server...

5.2.设置信息

5.2.1.点击New

在弹出的对话框中，输入名称

5.2.2.点击...

选择Server名称

5.2.3.设置Password

Password输入电脑登陆密码。

5.2.4.核实连接

点击Validate Connection，核实连接是否成功，如下弹窗就代表成功。

注：如果出现错误，可以尝试Delete，重新Pushlish。

6.多语言添加

6.1.添加文件

右击Localization，选择添加/新建项

在弹出的对话框中选择Localization类型文件

向导设置，在Locale中选择需要设置的语言

6.2.界面各部分说明

6.3.标准操作流程

Locale 下拉框：选择zh-CN（简体中文）。

勾选基础本地化：把Control和Framework都勾上，这样系统控件和框架自带的文本会自动用中文显示。

点击OK：向导会自动生成一个.localization文件（比如ch.localization），并把基础翻译导入进去。

后续配置：生成文件后，你可以在 HMI 项目中打开这个文件，手动添加 / 修改项目中自定义文本的翻译，比如 “启动设备”“故障报警” 这类自定义内容。

绑定到配置文件：在你的TchmiConfig.json中，把这个语言文件配置进去，比如：

"languages": { "zh-CN": "Localization/ch.localization" }

6.4.两个本地化文件类型详解

6.5.核心区别对比

6.6.实际操作说明

6.6.1. 使用「Localization」新建语言文件（推荐）

这是新项目添加多语言的标准流程：

• 选择Localization，点击「添加」。

• 在向导中选择目标语言（如zh-CN简体中文）。

• 勾选Control和Framework，导入官方控件和框架的基础翻译（比如按钮的 “确定 / 取消” 会自动翻译）。

• 向导会自动生成.localization文件，后续你只需要补充自定义文本的翻译即可。

6.6.2. 使用「Import Localization」导入已有文件

当你已经有现成的.localization文件时，用这个选项：

• 选择Import Localization，点击「添加」。

• 选择你要导入的.localization文件。

• 文件会被复制到当前项目中，直接在TchmiConfig.json中配置即可生效。

6.7.补充说明

• 两种方式生成 / 导入的文件都是.localization格式，本质上是 XML 文件，存储了「文本键 - 对应语言翻译」的映射关系。

• 配置多语言时，需要在TchmiConfig.json的languages节点中添加对应的语言文件路径，例如：

  "languages": { "zh-CN": "Localization/ch.localization", "en": "Localization/en.localization" }

• 后续可以使用Localization Select控件，让用户在运行时一键切换语言。

7.多主题添加

7.1.添加文件

右击Themes，选择添加/新建项

在弹出的对话框中选择Theme类型文件

7.2.三个主题类型详解

7.3.关键区别对比

7.4.实际操作建议

绝大多数场景，直接选「Theme」它会生成一个完整的主题文件夹，包含主题变量文件（.theme）和 CSS 文件（.css），可以统一设置背景色、文字颜色、控件默认样式，后续直接在TchmiConfig.json中引用即可。

"themes": { "MyCustomTheme": { "resources": [ { "name": "Themes/MyCustomTheme/MyCustomTheme.theme", "type": "ThemedValues" }, { "name": "Themes/MyCustomTheme/MyCustomThemeStyle.css", "type": "Stylesheet" } ] } }

什么时候用 Control Theme？比如你想让项目里所有的Radial Gauge仪表盘都用你自定义的刻度样式，而其他控件保持默认，就用这个。创建时需要指定要覆盖的控件类型。

什么时候用 Package Theme？比如你想把整个Beckhoff.TwinCAT.HMI.Controls包里所有控件的默认字体改成微软雅黑，就用这个。它会修改控件包的全局默认样式，影响所有使用该包的控件。

7.5.补充说明

• 主题生效的优先级：Control Theme>Theme>Package Theme> 控件默认样式。

• 你可以创建多个Theme，在项目中通过Theme Select控件实现一键切换亮 / 暗色模式。

8.界面说明

8.1.工具栏相关快捷设置

设置工具栏显示信息，方便进行界面编辑

视图 / 工具栏 / TwinCAT HMI

8.2.项目文件夹

8.2.1. TwinCAT HMI 项目文件夹详解

8.2.2. 关键补充说明

• Themes文件夹你之前创建的自定义主题就存在这里，每个主题是一个独立文件夹，包含.theme（颜色 / 变量定义）和.css（样式定义）文件，在TchmiConfig.json中配置后即可生效。

• Localization文件夹你创建的.localization语言文件默认存放在这里，项目中所有绑定了多语言键的文本，会根据当前语言自动加载对应的翻译。

• Server节点这里配置的是 HMI 服务端与 PLC 的 ADS 通信，包括连接参数、变量访问权限、用户登录设置，是数据交互的核心。

• KeyboardLayouts文件夹存放不同语言和类型的软键盘布局文件，在TchmiConfig.json中可以为不同语言指定对应的键盘布局，适配触摸屏输入场景。

8.2.3. 操作建议

• 不要随意修改References和Imports里的内容，否则可能导致项目编译失败或控件异常。

• 自定义的图片、字体、主题文件，统一存放在对应文件夹中，方便管理和打包部署。

• 多语言文件建议都放在Localization文件夹下，在TchmiConfig.json中统一配置路径。

8.3.设计器旁边快捷键说明

8.3.1.打开设计器

，打开设计器，切换切换回 HMI 设计器的可视化编辑界面（就是你拖控件、画界面的地方）

8.3.2.打开代码编辑窗口

，打开代码编辑窗口，配置控件与 PLC 变量的绑定、事件脚本

8.3.3.打开文档大纲

，打开Document Outline（文档大纲），就是你截图里左侧的控件层级树

8.3.4.打开HMI配置窗口

，打开TwinCAT HMI Configuration配置窗口，就是你截图里右侧的项目级配置面板。这是 TwinCAT HMI 的项目级核心配置中心，所有与服务器通信、变量、权限、事件相关的全局设置都在这里管理。下面我按截图里的节点顺序，给你逐个拆解说明：

8.3.4.1.Server Symbols（服务器符号 / PLC 变量管理）

这是 HMI 与 PLC 通信的核心配置节点，管理所有来自 TwinCAT PLC 的变量。

8.3.4.2.Internal Symbols（HMI 内部变量）

定义仅在 HMI 客户端内部使用的变量，不与 PLC 交互，用于存储界面逻辑数据。

• 用途：比如存储用户登录状态、界面临时参数、多语言切换状态等。

• 特点：支持自定义变量类型（bool、int、string 等），在 HMI 脚本中可直接读写。

8.3.4.3.Localizations（多语言本地化）

管理项目中所有的多语言翻译文件。

• 功能：在这里可以添加、编辑、删除.localization语言文件，为界面文本配置多语言翻译。

• 关联：你之前创建的zh-CN、en等语言文件，都会在这里显示，可直接双击打开编辑翻译内容。

8.3.4.4.Themed Resources（主题资源）

管理项目中所有与主题相关的资源，比如颜色、字体、样式变量。

• 用途：定义全局主题变量（如主色调、文字颜色、按钮样式），所有引用这些变量的控件会随主题切换自动更新样式。

• 关联：和你项目中的Themes文件夹一一对应，可在这里预览和修改主题变量。

8.3.4.5.System Keyboard（系统软键盘）

配置项目中使用的虚拟软键盘布局。

• 功能：管理不同语言、不同场景的键盘布局（如数字键盘、文本键盘、小数键盘），为输入框控件指定默认键盘。

• 关联：和KeyboardLayouts文件夹里的.keyboard.json文件对应，可在这里为不同语言 / 输入类型配置键盘。

8.3.4.6.Data types（自定义数据类型）

管理 HMI 中使用的自定义数据类型，用于绑定 PLC 中的结构体变量。

• 用途：当你需要绑定 PLC 中的自定义结构体（如设备状态、配方参数）时，需要在这里定义对应的 HMI 数据类型，才能实现变量映射。

8.3.4.7.Global Events（全局事件）

配置项目级的全局事件，比如页面加载、连接断开、错误触发等。

• 常见事件：OnLoaded（HMI 加载完成）、OnConnectionLost（PLC 连接断开）、OnError（系统错误）。

• 用途：为这些事件绑定 JavaScript 脚本，实现全局逻辑（比如连接断开时弹出提示、记录错误日志）。

8.3.4.8.Functions（全局函数）

管理项目中所有可全局调用的 JavaScript 函数。

• 用途：编写通用逻辑（如格式化时间、计算参数、自定义弹窗），所有页面 / 控件都可以直接调用这些函数，避免重复代码。

• 示例：formatDate(date)、showAlert(message)这类通用函数，都可以放在这里。

8.3.4.9.Users and Groups（用户与权限管理）

配置 HMI 的用户账号、用户组和权限控制。

8.3.4.10.Action Templates（动作模板）

管理项目中可复用的动作逻辑模板。

• 用途：创建通用的动作模板（如 “确认弹窗后写入变量”“页面跳转 + 变量置位”），在多个控件中直接调用，无需重复配置动作逻辑。

• 示例：为 “启动设备” 按钮创建动作模板，包含 “弹出确认框→用户确认→写入 PLC 变量→跳转到运行页面” 的完整流程。

8.4.1.11.核心操作场景说明

• 变量绑定：绑定 PLC 变量时，直接从Server Symbols > All Symbols拖拽变量到控件的绑定属性中。

• 多语言配置：双击Localizations里的语言文件，直接编辑翻译内容，或通过界面上的文本控件一键绑定翻译键。

• 权限控制：在Users and Groups中创建用户组，为控件设置 “仅管理员可见 / 可操作” 的权限。

• 全局逻辑复用：在Functions中编写通用脚本，在按钮点击、事件触发中直接调用。

8.3.5.打开资源库浏览器

，资源库浏览器（Gallery Explorer），专门用来管理和插入项目资源

核心功能说明

• 这是一个图片 / 资源素材库，用来浏览和插入项目里的图片、图标、品牌 Logo、行业图标等资源。

• 你可以在这里找到：

  • TwinCAT HMI：倍福官方提供的通用控件图标、设备图标

  • Beckhoff：倍福品牌相关的 Logo、素材

  • Industries：不同行业的专用图标（比如机械、化工、汽车等）

  • Logos：各种品牌 Logo 素材

  • Samples：官方示例项目里的资源模板

• 使用方法：选中图片，直接拖到设计界面上，就会自动生成一个Image控件，不用手动配置图片路径。

8.3.6.打开实时预览视图

，打开实时预览视图（Live-View），是一个所见即所得的运行时预览窗口

核心功能说明

• 它相当于一个内置的 HMI 浏览器，直接在 Visual Studio 里运行和预览你的 HMI 项目，不用单独打开浏览器或客户端。

• 你可以在这里实时看到：

  • 界面布局、控件样式、主题效果的最终显示效果

  • 变量绑定后的动态效果（比如按钮点击、数值变化）

  • 多语言切换、主题切换的实际表现

• 顶部工具栏的功能：

  • 刷新：重新加载 HMI 页面

  • 设置：调整预览窗口的配置

  • 缩放 / 全屏：调整预览视图的显示大小

8.4.设置startupView

新建文件夹View，将Desktop.view移动到View中。

点击Properties / tchmiconfig.json，设置startupView字段。

8.4.1. TwinCAT HMI TchmiConfig.json 完整字段解析表