001 新建一个TwinCAT HMI Project

项目模板选择TwinCAT HMI Project，解决方案名称TcHmiProject1，项目名称TcHmiProject1。

这是一个刚新建、没改过的标准 TwinCAT HMI 项目骨架，我们来认识整个 HMI 工程的结构。

我们最先关注的是Desktop.view，这是主战场。可以把它理解成：“HMI 主页面画布”，先把它玩熟，比研究那些 json 文件有用得多。

再到看Images文件夹，这是素材仓库。现在最该建立的习惯是：图片分类放文件夹，命名统一，少乱放，尺寸尽量规范。

再到看Themes，这是默认皮肤。先不用深挖，但应该知道：很多控件属性写着Theme，意思是：先跟着主题默认值走。控件看起来是什么风格，很多是主题决定的。

控件属性，这是最关键的。因为 HMI 真正的“做界面”，很多时候不是写代码，而是：调属性。

以下为最常规的拓扑结构：

002 简单认识一下TwinCAT HMI界面 

①：解决方案资源管理器，包含TwinCAT HMI 项目，当然还可以添加TwinCAT XAE 项目。

③：Toolbox，工具箱提供 TwinCAT HMI 所有可用的控件，可以直接拖拉到图形化设计窗口中。

④ ：Properties，属性栏可以对所选控件的属性、事件完成设置。

Document Outline：显示所有画面中控件，以及查看和配置从属关系。

TwinCAT HMI Configuration：HMI 集中配置窗口，可以配置所有 HMI 中所用到的组件，例如：用户管理，数据类型，变量映射，多语言等。

TwinCAT HMI Gallery Explorer：TwinCAT HMI 自带的所有图库，可以直接拖拉到 HMI 图形开发界面中使用。我拖了3张图片，在左侧Imports-Images下就多了三张图片资源。

TwinCAT HMI Live view：TwinCAT HMI 预浏览界面，无需发布，并且支持与图形化界面设计同步操作，做到所见即所得。

也可以通过浏览器打开此界面，在工具栏中点击“Microsoft Edge”。

继续添加控件 Button。

在属性栏配置.onPressed，或者双击控件也可以直接对.onPressed 进行配置。

添加 Condition。

填写完整这个IF THEN ELSE，用 WriteToSymbol 分别执行两个条件。当我们按下这个Button，就会执行一次这个IF THEN ELSE，如果bValue这个BOOL量为TURE就会被写为FALSE，否则被写为TRUE，实现按一次对bValue的值切换一次。

最后 ButtonText 中关联 bValue，显示当前值，方便我们观察。

紧接着我们做一个功能，用按钮切换 Textblock 的颜色。

选中 Textblock，在 Events 中找到一个自定义事件（Custom），点击小方块，选择 Create Data Binding进行配置。选择 bValue，意思是用此变量变化来作为一个触发事件。

继续对自定义事件进行配置。bValue的值改变触发该事件，如果bValue的值为True，则给Textblock控件的BackgroundColor给红色，否则给蓝色。

线性测量条

再添加一个 Button。双击 button可以直接配置.onPressed（默认），添加 Increment 功能，并且设置每按一下使得 nValue 增加 1，并且配置最大值为 100。

把这个 Button 取名为 Add。

为了验证此效果，可以加入一个计量器辅助观察，添加Linear Gauge。

选中Linear Gauge，在属性中配置 Value 为 nValue。

效果如下，每按一次 Add，计量器就增加 1，直到 100 为止。

子页面  

在项目中创建一个新的文件夹，取名为 Content，我们准备在这个文件夹里面做一些子画面，随后可以在主画面中进行切换，调用。

右键文件夹添加新项。

选择 Content 进行添加。

添加了 2 个 content 后，把这 2 个 content 的背景颜色在属性中进行修改。

在主界面中加入 Region，用于切换两个子画面。在属性栏中的 TargetContent 定义一个初始子画面。

新增 2 个控件取名为 content1 和 content2，用于切换画面。

在线浏览，可以看到分别按 content1 和 content2 可以切换不同颜色的子画面。

自定义控件  

新建文件夹 UserControl，实现一些自定义控件的编辑，这样可以把设置好的控件或者控件组进行反复利用。

点击此 TabButton 旁边的P选项，对其进行设定自定义参数。

创建 2 个参数变量 Name、State。很明显我这个自定义控件是接受传参的。

我这个自定义的 TabButton ，Text 就设定为参数 Name，到时候调用的时候，传入什么就显示什么。

在主界面中进行调用，选择 TabButton，把 2 个参数设置为之前定义好的内部变量 sText、bValue。

在线的效果，自定义控件的Name参数关联到了内部变量sText，默认值为Test。按下自定义控件 TabButton，给自定义控件参数State写True，由于自定义控件的State参数关联到了内部变量bValue，所以会给内部变量bValue写True，之前做好的和内部变量bValue相关联的控件也会有变化。

继续在 UserControl 中添加一个 TabText自定义控件。在 TabText 中加入 2 个参数。

在 TabText 中添加 2 个 Textblock 控件，把两个参数分配给这 2 个控件中的 Text 中，并且把 TabText 调整到合适的大小。整个自定义控件100px*60px。

在主界面中加入做好的 TabText。随后把 Text1 和 Text2 分配给 TabText 的 2 个参数中，可以发现效果为预设的 2 个字符“Hello World!”、“I am a test text.”。

多语言切换 

要实现语言切换，我们需要在文件夹 Localization 中配置对应语言，默认可以发现只有

德文和英文两种语言，如果希望有中文加入，可以右键文件夹，然后添加一个新项。选择 Localization ，取名为 zh-CN，点击添加。

弹出窗口，在下拉框中找到 Chinese（S）:zh-CN 完成创建。

完成创建后在 Localization 就会出现有中国国旗的中文语言列表。打开 TwinCAT HMI Configuration，在 Localizations 中手动修改 Text1 与 Text2 的中文对照。

当然也可以手动再创建你所需要的文本以及各语言对照表，只需要选择 create new localized symbol 即可。

加入 2 个文本 English 和 Chinese，并且编辑对应中英文。

在主界面中加入 2 个按钮完成中英文切换。把 2 个 Button 的 Text 分别设置成本地文本 English 和 Chinese。

分别双击 2 个 Button，设置切换语言的事件 FunctionsLocaleSetLocale，分别选择 en和 zh-CN。

在线浏览，分别点击 English 和 Chinese 可以切换不同语言。

主页面排版规划 

其实 Desktop 作为一个主页面，一开始就应该对其进行排版，放在这里才做，是因为我们

之前的一些操作是为了熟悉软件的基本使用。

我们先把除了 WisCut logo、content1 和 content2 之外的其他控件都分别放在两个子页面中。

然后回到 Desktop，把分辨率设定为 800:600。

主页面的分割可以设计成最上面的状态栏（status bar），中间的内容栏（content），以

及最下面的导航栏（navigation bar）。

从工具栏拖拉 Container（容器）控件进来。

然后对Container 进行属性编辑，取名为 Status，位置从最左上角（0,0）开始，长和宽

为 800*100。

再拖 2 个 Containter 控件，设置成 content 与 navigation 所对应的参数

随后我们需要把其中的几个控件设置为这 3 个部分中的内容，因此需要点开 Document Outline。

004 界面发布

HMI 发布需要依托 server，因此需要安装 TF2000-HMI-Server 安装包，按照提示一步

步安装。我所有的操作在个人电脑上完成。

HMI组态软件版本：

HMI Srever软件版本，和组态软件版本要匹配：

个人电脑安装的TwinCAT3软件，添加了TC3 HMI Srever的临时授权：

HMI Srever软件安装完毕，在右下角发现一个图标：

点击 Service Configuration可以进入如下网页页面。

在本机上新增一个 TwinCAT HMI Server 实例，点Add之后，系统会在电脑上创建一个新的 HMI Server 进程实例，可以理解为新建一个“运行 HMI 项目的服务器容器”

Name

这个服务器实例的名字。例如：Test1、Test2、HMI_Server_1

HTTP Port

这个实例的普通网页访问端口。例如填 1010，以后就可以通过：http://127.0.0.1:1010

Require TLS for remote connections

如果勾选，意思是：

• 本机访问
   可以继续用 HTTP
• 远程设备访问
   必须走 HTTPS / TLS 加密

Protocol: ipv4 / ipv6

决定这个服务器监听哪种网络协议：

HTTPS port

加密访问端口。例如填 1020，以后可以通过：https://你的IP:1020

Initialize administrator password

给这个 HMI Server 初始化管理员密码。以后登录管理或做某些配置时会用到。

添加完成。

• 名字：Test1
• HTTP 地址：http://127.0.0.1:1010
• HTTPS 地址：https://0.0.0.0:1020
• 状态：已启用
• 但当前 No project published也就是：

服务器已经建好了，也在运行，但还没有发布任何 HMI 项目进去。

现在这个实例的作用只是“占着端口等项目上线”。

这个 server instance 可以用于：

发布并运行你的 HMI 项目

以后你把某个 HMI 工程 publish 到这个实例上，它就能跑起来。

通过浏览器访问 HMI 页面

比如访问：http://127.0.0.1:1010或配置后的其他端口

同一台电脑上开多个 HMI 服务实例

Test1 跑项目A，Test2 跑项目B，各自用不同端口，互不冲突

区分本地访问和远程访问方式

HTTP 端口，HTTPS 端口，是否要求远程连接必须走加密访问端口（HTTPS port）。

再看右下角，已经有Service on port 1010，也就是本机已经可以访问1010端口了，点击Start Page，或者直接访问http://127.0.0.1:1010/。

关掉之前的访问页面再试，并Restart：

本电脑浏览器再访问https://192.168.1.249:1020/，可以了。

远程电脑浏览器再访问https://192.168.1.249:1020/，同样提示HMI 许可证的客户端数超限了，关掉本电脑的访问，重启服务器，再远程电脑浏览器访问：

005 答疑

1.Selected Control  与 Controls( in scope)  有什么区别？

这张图是在 TwinCAT HMI 的 Binding Source 选择窗口 里，Controls 页签下面会给你两类来源：

图里当前控件是 TcHmiTextbox，所以 Selected Control 下面看到的：

• Background Image
• Border
• Colors
• Common
• Text
• Tooltip

这些，都是 这个当前 Textbox 自己的属性。

Controls (in scope)

意思是：

当前页面作用域里，所有能访问到的其他控件（以及当前控件自己）

也就是“当前视图范围内可用的控件列表”。

图里它列出来了：

• Desktop
• TcHmiButton
• TcHmiTextblock
• TcHmiTextbox

这表示在当前页面/当前作用域内，这几个控件都可以作为绑定源。

展开其中一个控件后，就能访问它的属性，比如：

• TcHmiButton.IsEnabled
• TcHmiTextblock.Text
• TcHmiTextbox.Text

2.关闭解决方案后再打开，我自己添加的Content、UserControl在项目树里不见了？

先点击“显示所有文件”

再选中文件夹，点击“包括在项目中”即可。

已关注

关注

重播 分享 赞

视频详情

OverOver!
负步长FOR循环：当有一条新报警触发时，把这条新报警插到历史数组第 1 位，原来的历史记录整体往后挪一格。
收藏！倍福EL2502，两路PWM模块测试随笔。附24V PWM信号转5V PWM信号介绍。
详细！Python编写软件（用tkinter模块设计简单GUI，通讯库用pyads）与倍福PLC的ADS通讯之实例演示
你真的理解了吗？倍福AXIS_REF数据类型包含轴的信息，是 PLC 与 NC（运动控制内核）之间的接口。