在工作中实践总结
在朋友圈分享讨论
做最接地气的公众号
内容摘要
本文旨在使用户对TC3 HMI 有原理性的了解，打消对HTML的顾虑，并且随时可以着手进行HMI开发以实现HMI开发的常用功能为导向，解读TC3 HMI的基本用法以及两千多页操作手册的内容。针对涉及HTML和JavaScript的部分做了通俗易懂的解释，并从自动化工程师的角度描述它们在TC3 HMI中的用法。
关键词
适用范围
目录
1 TC3 HMI入门
1.1 资料下载和安装
1.2 学习Quick Start
1.3 常用控件
1.4 常用功能
1.5 熟悉TcHMI Package提供的控件
1.5.1 用这些控件做画面
1.5.2 用JavaScript访问控件
2 控件导入和导出功能
2.1 创建和导出TcHMI Package
2.2 导出现有项目中引用的Package
2.3 导入TcHMI Package
3 导入开源的代码
3.1 如何导入一个开源的控件
3.2 导入的开源.js脚本
3.3 在.js脚本中使用PLC变量
4 问题和猜想
4.1 Question
4.2 Idea
5 学习资料
5.1 JAVA Script学习
5.1.1 资料
5.1.2 相对于PLC语言，JS的特点
5.1.3 TC3 HMI Function使用的JavaScript
5.1.4 C3 HMI的控件Event中执行的嵌入式脚本
5.2 Json学习
5.2.1 学习资料
5.2.2 什么是JSON
5.2.3 Json字符串的构成
5.2.4 从Json字符串读入到Java Script对象
5.2.5 Tc 3 HMI的Function配套.json文件
5.3 HTML学习资料
5.3.1 HTML 是网页描述语言
5.3.2 HTML 标签
5.3.3 Tc3 HMI 中的HTML
5.4 CSS学习
5.4.1 学习资料
5.4.2 什么是CSS
5.4.3 TC3 HMI中的CSS文件
PDF原文及相关例程：
http://www.baclizzy.com.cn//2020/0220/Tc3HMIstudy
1.1 资料下载和安装
(1) VS2017社区版
vs_community__1354608913.1581581688.exe
从微软官网下载，1.2M，安装时需要连网。安装选项“通用Windows开发平台”和“ASP.net和Web开发”，需要18.67G空间。网速10Mb/s以内，安装持续约一个小时，比以前安装VS2015和VS2013快得多。
第一次使用前需要注册一个微软帐号，激活该帐号以后即可长期使用。
安装最新版的VS和最新版的TC3是为了使用最新版的TC3 HMI的所有功能，比如自建Framework就需要C#和web组件，只装VS Shell就不行。
(2)TC31-Full-Setup.3.1.4024.4.zip
从倍福官网下载，1012M
(3)TE2000-HMI-Engineering.exe
从倍福官网下载，398M
(4)TF2000-HMIServer.exe
从倍福官网下载，30M
(5)TE2000_TC3_HMI_EN.pdf
从倍福官网下载，47M
1.2 学习Quick Start
TE2000_TC3_HMI_EN2020.pdf
Version 1.6，2020-01-22
第4章：Quick Start，Page 27-41
一字不落，对照每个功能测试。这是对界面的熟悉过程，不可以跨越。
1.3 常用控件
(1) 历史曲线
(2) 报警
(3) 配方功能
(4) 用户管理
这部分内容，手册很清楚，网校上的资料和培训视频也齐全。
我没有一个个试，相信不会有难度。
1.4 常用功能
(1) 项目发布
手册第5.11 Publishing，第110页。
写得很清楚，连上硬件应该没有什么变数。
(2) PLC配置
默认PLC1是本机的851端，适用于Server和PLC在同一台控制器。
如果一个Server要访问多个PLC的数据，才需要配置。
手册13.1 ADS，第600页。
(3) 主题（Theme）
主题的使用比较简单，可以从按钮的Event事件去切换主题，也可以用JavaScript通过API函数去读取或者选择。至于每个主题要修改哪些控件的默认配置，可以手动在.theme文件中配置。理论上每个控件的每个属性都可以修改，并且修改过的控件会以加粗显示：
高阶用户也可以在JS脚本中调用API函数“SetAttributeToThemeValue”去修改当前活动主题的某个属性值。
1.5 熟悉TcHMI Package提供的控件
1.5.1 用这些控件做画面
快速浏览第6章：
Controls，Page 132-521。
这一章可以当字典查询，但不宜一项一项地照着测试。即使要查询的时候，也是打开一个Sample再对照手册来查询，然后修改Sample，以加深对控件的理解。
速读以下章节：
1.5.2 用JavaScript访问控件
手册第15章 Framework，
最重要的是15.1.1 TcHmi，这里有倍福提供的所有组的API接口，就是在JavaScript中如何使用这些组件。实际上，在可视化界面做的任何设置，后台都会自动解释成JavaScript脚本，并且可以在Code视图中查看。只是为了兼容传统组态软件的用户习惯，保留了可视化的配置界面。
2 控件导入和导出功能
TC3 HMI很讲究模块化编程，最终的HMI项目一定是基于很多自定义的控件。所以HMI开发人员的必备技能之一就是控件的单个或者批量导入和导出。
手册第5章
5.13 Package Management
2.1 创建和导出TcHMI Package
(1) 新建TwinCAT HMI项目
选择TwinCAT HMI | Extensibility |TwinCAT Framework Control(JS)
表示用Java Script，也可以选其它两个使用C#。
如果没有安装完整版的Visual Studio，就会提示没有模版，建不了Extensibility项目。
(2) 导出Package
手册第5章
5.13.1 Creating a Package
导出的时候要选择路径。
比如选择Export to local repository，就会存到
“C:\TwinCAT\Functions\TE2000-HMI-Engineering\References”
2.2 导出现有项目中引用的Package
引用Package之前，这个Package的来源可能是自己做的，也可能是别人给的，也可能是看到某个项目里用到了一些你感兴趣的控件。比如：
如何从现有项目中提取Package呢？可以定位到该项目的.hmipkgs路径下查看，比如：
\TC3_HMI_Sample\TcHmiProject\TcHmiApplicationSample\.hmipkgs
把.tchmipkg文件复制到PC以下路径：
“C:\TwinCAT\Functions\TE2000-HMI-Engineering\References”，就可以在其它项目中安装使用这个Package了。
2.3 导入TcHMI Package
(1) 基本步骤
手册第5.13.2节 Install a Package
“C:\TwinCAT\Functions\TE2000-HMI-Engineering\References”下如果有自定义Package，就可以在HMI项目的Reference右键菜单选择“Manage TwinCAT HMI Packages”进行安装：
Install要花的时间比较长，要耐心等待。等Install按钮变成“Uninstall”就表示安装成功。此时再打开Toolbox，就发现工具箱中就多了HMI:Additional.
(2) 遇到的问题及解决办法
- 提示缺.json文件
直接在新项目中插入Reference中添加的TcHmiNavBar时，提示报错：
描述文件.json找不到，但是在指定的项目下并没有这样一个Description.json，实际上注册后这个Json文件在HMI项目的以下路径：
\.hmipkgs\97e05807-cd3f-439b-bec0-f0136d33f504\Content\
解决办法：关闭VS后重新打开，就可以装载了。
- Event配置中的非标Function是如何输入的？
这个问题在Package的引用无关，是通用的控件配置问题。即：调用TcHmiNavBar的时候，onAttached的动作中，LoadContent以及SetLocale等是怎么输入的？因为选是选择不出来，只能手动输入，但是手动输从哪里打开？
以及：
解决办法：从界面的Code中可以找到并编辑。可见辅助编辑的可视化界面不是万能的。
- 自定义组件的说明书
自定义的组件是否配说明书或者功能视频？如果是正式发布或者授权的Package，作者当然会配说明书，但如果本来就是免费共享，就需要使用者自行摸索了。
对于普通TC HMI用户，可能连这个Framework都没有包括。所以“收藏”“开源社区”“导入导出”这是必备技能，否则完全靠一个工程师自己做出一个机器的界面，是非常困难的。
3 导入开源的代码
3.1 如何导入一个开源的控件
以“切西瓜”游戏为例
(1) 拷入相关文件
将它的Html和相关的图片Logo都拷入项目文件夹。
(2) 创建一个Iframe，并指定Source为某个html文件
Region.Target－> Game.content －> Iframe.Src －> Index.html －> all.js
(3) 在Index文件中指定.js文件
游戏的代码就在.js里面，而相关的图片、声音、图标，都需要Copy到项目路径下。因为.js文件会引用这些图片、声音和图标，如果没有这些文件或者放的路径不对，.js文件就会执行不了。
(4) 运行效果
(5) 扩展：如何让游戏与PLC变量关联？
在.js文件中，利用函数读取PLC变量，并参与游戏进程。
这个方法可以导入任何网页版游戏，或者其它感兴趣的内容。
3.2 导入的开源.js脚本
(1) 把核心代码的.js文件复制到CodeBehind，并添加现有项：
(2) 新建一个JavaScript的Function
新建引用echarts的Function
命名为FunctionJS2，此时它的.json文件也自动建立了：
双击.js文件，可以看到模板已经自动添加的代码：
用户代码将添加到红线框的位置。
(3) 在View或者Content的画面上创建一个Contrainer
并在它的Framework的.onAttached事件中指定Function：
(4) 把下载的js实现代码粘贴到FunctionJS2中
注意dom的用法，如果不声明一个dom，引用的控件就无法初始化。TcHmiContainer_2是准备放这个控件实例的容器名字。
Option中的代码隐藏了，里面是对控件的各个元素赋值。每个控件都会不一样，例中echart的Option是这样的：
option = {
(5) 显示效果
可以看到几条曲线显示的值，都是Opiton中定义的固定值
3.3 在.js脚本中使用PLC变量
例如前面显示曲线的例子，对于自动化项目来说，这些数据通常都来自PLC，曲线应该是根据PLC变量的值动态变化的。这个示例中，Series[]中的Data值，就不该是一个常量组成的数组，而应该是一个数组变量。假如要用在画面中显示本周新冠肺炎各省确诊病例的趋势图，就可以在上述示例中增加以下步骤：
(1) 在PLC中新建一个结构体“ST_SARS2”，
并在Main中声明一个变量“arrayChina”：
(2) 在FunctionJS2.js中用SetInterval刷新数据
在FunctionJS2.js的脚本中，并用SetInterval ( function{ }, 200 )每200ms用函数Symol.ReadEx读取一次数组arrayChina的值：
(3) 同样在SetInterval中利用读取的数据刷新曲线
读入的值myData可以用来刷新Echart的曲线，例如：
(4) 运行结果
对照PLC变量arrayChina中的数据：
可见图表中显示的正是结构体arrayChina中的数据
(5) 扩展：如果显示的数组大小变化
如果希望显示不只是7天，而是10天的数据，应该怎么办呢？
- 修改PLC中的结构体中数组的大小
注意，为了不在.js代码中由于数组大小的不确定而修改X轴的标记，特意在结构体中增加strData数组，以初始化将来在界面上显示的日期字符。
- 修改.js文件中X轴的显示
- 运行结果
这样就不必为每次显示的数组大小而修改代码了。
(6)扩展：如果要修改曲线的显示方式
本例中这是几条曲线迭加的效果而不是独立显示的，这个效果是在控件的核心代码echarts.min.js中定义的，如果想修改曲线的显示方式而控件本身又没有开放相应的接口，就只能自己打开源代码去修改了。
有兴趣的话可以打开echarts.min.js来看看：
echarts.min.js的代码放在Word中显示，需占用170页A4纸：
可见要写一个好用的控件相当不容易，好在互连网可以汇集众人的力量。而TC3 HMI开放了引用.js文件的功能，就等于是让用户站在众人的肩膀上进行创作，而不是使用组态软件厂家有限的控件。当然，要使用无限的互联网资源，学习一些JavaScript的知识也是必不可少的。
(7) 示例代码
详见“JS中引用PLC变量.zip”
4 问题和猜想
4.1 Question
(1) 如果开发HMI的人没有PLC项目源码
TC3 HMI的开发环境中，如何通过PLC项目文件获取变量，比如tpy或者tmc?
2020/02.14的新品介绍“beckhoff_新产品_16x9_cn.pptx”显示：Tc3 HMIVersion 1.12支持TMC文件。
(2) 如果变量多，还是推荐组成结构体吗？
显然TC3 HMI有从Server的PLC读数结构体的能力，鉴于底层还是ADS通讯，所以其它高级语言与PLC做ADS通讯的经验/教训仍然适用。成千上万个离散的变量，放到哪种通讯都是效率很低的。
4.2 Idea
(1) Code界面 vs 可视化界面
熟悉js的工程师，完全可以在记事本而不是TC3 HMI中开发界面。可视化配置界面确实不是必须的，Code视图中的内容才是。
传统的组态软件用户习惯在可视化界面操作，而熟悉JavaScript和TcHMI的用户理论上可以脱离可视化界面而直接在Code视图中编辑。实际上确实可以用记事本打开.view文件，当然也可以修改。
现实的做法是，优先使用可视化的配置界面，仅当需要添加配置界面没有提供的功能，才自己进入Code界面进行脚本编辑。
(2) thinkmore
.view文件只包含div语句，不能冠以<html>和<body>执行，否则会执行报错。而尝试在.view中加入<p>这种最常用的HTML标签，则运行时既不报错，也不显示。
要验证.view的工作原理，可以在Chrome浏览器打开网页的时候，显示其HTML代码（默认快捷键 Ctrl+Shift+I）也许可以发现一些线索。不过这与TC3HMI的正常使用没有关系了，纯属个人好奇。
总之，TC3 HMI 不允许在最底层执行HTML文件。HTML文件只能以Iframe.Source的形式引用到HMI项目。
5 学习资料
5.1 JAVA Script学习
5.1.1 资料
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
凡是在TE2000手册上搜索不到的Method，都可以在这个JAVA学习网站上找到。
虽然这里有完整的教程和参考资料，但是Tc HMI的用户并不需要完整阅读，因为TC HMI并不要求从零搭一个网站，绝大部分做网页的功能已经在模板中自动实现了。在这个网站上只要查询一些基本的语法、函数就可以了。如果是简单的普及性的内容，也可以查看百度文库中的两个简易资料（见附件）：
JavaScript(课件).ppt
JAVA-SCRIPT入门学习.pdf
5.1.2 相对于PLC语言，JS的特点
(1) 关于句尾的“；”，推荐添加，但是也可以不加
(2) 注释：js中注释用 * */，而HTML中用 <!-- -->，
后者在Tc3 HMI的编辑器中会自动成对。<p></p>等字符也有智能输入功能，只要写一个< 就会弹出p a picture等供选择。
(3) 变量和函数声明都不需要指定类型
(4) 对象种类
其对象除了标准的数组、日期、字符串、数字等内置对象之外，还有浏览器对象和ActiveX对象以及自定义对象。比如TcHmi中定义的对象Server、Symbol等
(5) 执行条件在()里面，而执行代码在{}里面
- IF语句
条件在If ( ) 的括号里，没有Then，满足条件要执行的代码在{}中。表示判断的等于，用两个“＝”连起来，即“＝＝”。而一个“=”就表示赋值。例如：
- Switch语句
Switch类似PLC的ST语言中的CASE语句，但是选择分支的变量用括号，而以Casen 来分开不同的分支：
- For和While
注意For ( )的条件，要执行的代码用{ }而不是用DO来引导。
(6) 与ST写法不同的几个常用运算符
5.1.3 TC3 HMI Function使用的JavaScript
参考示例02_TC_Example_EL9227.tnzip，其中只用JavaScript来创建Funtion，用到的语法很少。
(1) 典形的Function
- JSON文件
在可视化界面中编辑参数更加方便，虽然TC3 HMI也提供了它的代码。在代码或者可视化界面中的修改结果是等效的。
(2) Function的js文件基本格式
(function (TcHmi) {
var AddAmpere = function (current){
returncurrent.toString().concat(' A');
};
TcHmi.Functions.registerFunction('AddAmpere',AddAmpere);
})(TcHmi);
这段代码中，只要定义好Funtion的名称AddAmpere（新建对象时命名）后，除了黄色部分外，都是自动生成的。而参数current等，在自动生成的子文件Name.function.json中定义。并且增减参数后，JavaScript中的function()中的参数也会自动更新。
(3) 固定组成部分
- 函数声明
- 函数注册
其中，TcHmi是个固定的指代，而.Functions按理并行的还有很多子元素，但是在JavaSritpt编辑器中没有Smart Coding功能，所以只能有样学样。同理，.regesterFuntion也是这样。在手册中找到了TcHmi下的内容，比如TcHmi.Functions.registerFunction
在手册中查看TcHmi，完整的内容列表如下：
其中包括：
NameSpace：比如Controls，Functions，iFunctions，Log
Classs: 比如Server，Symbol，Theme，View，
Functions：
Enumerations：
Interfaces：比如Color，FontStyle
这些都是HMI开发才会用到的特别对象，可以用JavaScript来访问，而在写PLC程序的时候是完全不会涉及这些内容的。比如要表达一个颜色，PLC里面用一个长整数就可以表达，而在HMI里要表达颜色就要用专门的Interface：Color。
(4) 示例中用到的语法
- ToString()和Concat
在许多Class的Method中，都包括了ToString。在TC HMI手册中搜索可得，例如：
字符串的连接运算，不是TcHmi定义的，而是JS的语法，在“JAVA-SCRIPT入门学习.pdf”第7页有写。另外，关于toString()，在该书中也有提到。
-ToFixed( )
MilliVoltToVolt return (voltage/10).toFixed(1).concat('V');
ToFixed这个函数在TE2000的手册中没有，在“JAVA-SCRIPT入门学习.pdf”中也没有。在JAVA学习网站上找到ToFixed的用法描述：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed：
-Switch……Case和Symbol.ReadEx
CharIndexToString 的代码：
Switch类似PLC的ST语言中的CASE语句，是JS的标准语法，不用解释。
Symbol.readEx则可以从TE2000手册中找到这个方法：
- Gauge的Range和Color（可选）
这个函数返回的类型比较特别，需要断句来看。实际上，它返回的是一个数组，共3个元素，每个元素又是一个结构体，包括Color，Start和End。至于为什么要这样写，为什么时Color而不是Colour，这应该不是英式英语和美式英语的差别，而是在Gauge这个控件里确定的参数名称。用（"color": "rgba(0, 151, 59,1)"）表示一个颜色，是TcHMI基础框架的约定。
5.1.4 TC3 HMI的控件Event中执行的嵌入式脚本
写在这里的Code，实际上是位于控件所在的Contend或者View的代码中，把这部分代码Copy到一个独立的Funtion中，本质上没有区别。
5.2 Json学习
5.2.1 学习资料
5.2.2 什么是JSON
JSON(JavaScriptObject Notation) 是一种表达对象的文本格式。根据百度百科：JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大节约传输数据所占用的带宽。所以IoT通讯中与云端交换数据也采用json格式。
5.2.3 Json字符串的构成
要表达中国几个省份包括的城市，Json字符串表达为：
整个字符串只包含几个关键字符
5.2.4 从Json字符串读入到Java Script对象
要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
可见在json字符串中，变量名，变量值，都用双引号括起来了。
5.2.5 Tc 3 HMI的Function配套.json文件
(1) TC3 HMI中的Json文件
TC HMI中的Json文件是新建对象的时候自动生成的。比如创建一个Funtion(JS)，系统就会自动创建同名的Json描述文件。但是CodeBehind的.js文件就不会配套生成Json文件：
(2) TCHMI提供比字符串更友好的可视化界面
如果用记事本打开 Function的json文件，可以看到它包括一个总的描述，和若干个Argument，每个Argument有相同的属性需要填写。了解Json格式当然有助于裸眼阅读Json字符串，但Tc HMI中提供更加友好的可视化界面：
用户甚至可以忽略Json格式，直接在这里编辑变量，后面就动自动生成相应的符合Json格式的字符串。
5.3HTML学习资料
5.3.1HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language)，它不是一种编程语言，而是一种标记语言 (markup language)，它有一整套标记标签 (markup tag)，HMTL文件就使用这些标记标签来描述网页。
- HTML 文档 = 网页
HTML 文档描述网页，它包含 HTML 标签和纯文本。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
用记事本在写几行HTML语句，另存为.html文件，就可以用浏览器打开它演示网页效果，非常简单。
5.3.2 HTML 标签
HTML 标签是由尖括号包围的关键词，通常是成对出现的，比如 <b> 和 </b>，比如 <html>和</html>。带“/”的是结束标签，要放在后面。
- 常用标签
<html>……</html>
<head>……</head>
<body>……</body>
<p>……</p>：段落
<h1>……</h1>：一级标题，同理h2就是二级标题，最多到h6
<a>……</a>：链接
<br>……</br>：换行
复杂一点的标签：<div>……</div>，这是布局，可以嵌套，TC3 HMI中用得非常多。
当然还有许多其它标签，可以表达复杂的格式，但是TC3 用户只要知道html的原理、简单用法、基本规则就可以了。如果碰到了之前不熟悉的标签，再到网上去查：
https://www.w3school.com.cn/html5/index.asp
- HTML 和HTML5
后者只是增加了一些新的标签类型，可以更好更简洁地表达一些流行的对象，比如更好的音乐、视频播放。TC3 HMI支持HTML5。
5.3.3Tc3 HMI 中的HTML
初学者不需要自己编辑HTML文件，网页都是Tc3 HMI开发环境根据用户选择的控件、设置的参数在后台自己生成的。
用户可以通过Iframe并指定其Source（选项Common｜Src）链接到某个HTML文件来实现在Tc3 HMI的画面框架内的指定区域显示网页。例如3.1节中介绍的的导入一个网页版游戏。
高阶用户可以用这种方式实现自由的网页设计。
5.4 CSS学习
5.4.1学习资料
5.4.2什么是CSS
根据百度百科，CSS指层叠样式表(英文全称：Cascading Style Sheets)。是一种用来表现HTML或XML等文件样式的计算机语言。
CSS定义样式结构，如字体、颜色、位置等，用于描述网页上的信息格式化和实现的方式。CSS样式可以直接存储于HTML网页或者单独一个带有文件扩展名.css的“样式单”文件。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。修改CSS就可以更新与之相关的所有页面元素。所以，CSS的规范是HTML规范的一个子集。即使不用CSS，HTML也能把需要表达的格式表达出来，只是有了CSS表达起来更方便，类似“宏”或者“子程序”的作用。
- HTML中的CSS
- 独立的CSS文件
具体的格式，就在mystyle.css中定义。
5.4.3TC3 HMI中的CSS文件
(1) 项目下的.css文件
项目自有的.css文件只有两个：
TcHmiProject1\bin\Themes\Base\Style.css （TC3 Build 4022.4项目有但低版本的没有）
TcHmiProject1\bin\Fonts\Fonts.css （高低版本都有）
其余.css文件都在“\TcHmiProject1\bin\Libraries\Controls\”的“\Beckhoff和\System”下
每个子文件夹表示一个控件，每个控件都包含一个Style.css
示例中通常都没有修改CSS的格式，相关CSS的代码都是自动生成的。
(2) 模板自带.css文件的内容
- Style.css
这个模板自带的Style.css文件中只对字体进行了定义。如果用户需要更丰富的格式显示，应该在相应主题下去修改Style.css文件即可。
http://www.baclizzy.com.cn/2020/0220
示例程序和配套文档推荐用FTP工具下载：
ftp://baclizzy.com.cn:21/Lizzy的倍福园地/2020/0220
喜欢本文？识别二维码，可关注公众号
