公众号：HTML5, TC3 HMI的铠甲，也是软肋.pdf

备忘录 HTML5：TC 3 HMI 的铠甲，还是软肋？ 陈利君 2020.02.17 前言：TC3 HMI 是Beckhoff 公司的组态软件，自2017 ？年推出市场以来，以其功能先 进、扩展性强为广大国内客户所熟知。它最大特点是基于HTML5 ，使用浏览器打开指定网 址就可以访问产线或者设备的组态画面。无疑这对最终用户很有吸引力，但对开发者却是个 挑战：因为TC3 HMI 涉及的HTML 和CSS、Java Script 和Json 等知识对于自动化工程师而 言太过陌生，毕竟大家不是做网页设计的。如果把TC 3 HMI 比喻成屠龙宝刀，怎么舞得好 另说，可怎么才舞得动？ TC 3 HMI 涉及的HTML 技术真的那么高深吗？作为一个对HTML 完全外行的自动化 工程师，我花一周的时间亲历了从门外到门内的过程，结论是：除了Java Script 算一种编程 语言之外，HTML、CSS 和JSON 都只是格式语言，用LD 的工程师能学会ST ，用ST 的工 程师就能学会Java Script，触类旁通而已，实在不必望而生畏。如果你跨过了这道坎， 下面是我整理的学习记录，一周时间，从零基础开始。相信你也可以，甚至更快！ 目录： HTML5 ：TC 3 HMI 的铠甲，还是软肋？ 1 TC3 HMI 入门 1.1 资料下载和安装 1.2 学习Quick Start 1.3 常用控件 1.4 常用功能 1.5 熟悉TcHMI Package 提供的控件 用这些控件做画面 用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 学习 第1 页 共33 页 Lizzy Chen 陈利君 备忘录 资料 相对于PLC 语言，JS 的特点 TC3 HMI Function 使用的JavaScript TC3 HMI 的控件Event 中执行的嵌入式脚本 5.2 Json 学习 学习资料 什么是JSON Json 字符串的构成 从Json 字符串读入到Java Script 对象 Tc 3 HMI 的Function 配套.json 文件 5.3 HTML 学习资料 HTML 是用来描述网页的一种语言 HTML 标签 Tc3 HMI 中的HTML 5.4 CSS 学习 学习资料 什么是CSS TC3 HMI 中的CSS 文件 1 TC3 HMI 入门 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 就不行。 TC31