TC HMI 导入开源控件及FAQ.pdf

TC HMI 导入开源控件及FAQ TC HMI 导入开源控件及FAQ 陈利君 2020.09.08 1 导入开源的代码 1.1 导入开源的控件，以“切西瓜”游戏为例 1.2 导入的开源.js 脚本 1.3 如何在.js 脚本中使用PLC 变量？ 2 网页设计学习资料 2.1 JAVA Script 学习 资料 相对于PLC 语言，JS 的特点 TC HMI 的自定义Funtion 中使用的JavaScript TC HMI 的控件Event 中执行的嵌入式脚本 2.2 Json 学习 学习资料 什么是JSON Json 字符串的构成 从Json 字符串读入到Java Script 对象 TC HMI 中的Function 的Json 文件 2.3 HTML 学习资料 什么是HTML 2.4 CSS 学习 学习资料 什么是CSS TC HMI 中的CSS 相关 3 常见问题 3.1 Java Script 使用 3.2 关于TC HMI 的配置 3.3 TwinCAT HMI Server 的端口 3.4 报错及处理 3.5 思考和讨论 2020-09-09 第1 页 共41 页 Lizzy Chen 陈利君 TC HMI 导入开源控件及FAQ 1 导入开源的代码 1.1 导入开源的控件，以“切西瓜”游戏为例 拷入相关文件 将它的Html 和相关的图片Logo 都拷入项目文件夹。 创建一个Iframe，并指定Source 为某个html 文件 Region.Target － Game.content － Iframe.Src － Index.html － all.js 在Index 文件中指定.js 文件 游戏的代码就在.js 里面，而相关的图片、声音、图标，都需要Copy 到项目路径下。因 为.js 文件会引用这些图片、声音和图标，如果没有这些文件或者放的路径不对，.js 文件就 会执行不了。 2020-09-09 第2 页 共41 页 Lizzy Chen 陈利君 TC HMI 导入开源控件及FAQ 运行效果 扩展：如何让游戏与PLC 变量关联？ 在.js 文件中，利用函数读取PLC 变量，并参与游戏进程。 这个方法可以导入任何网页版游戏，或者其它感兴趣的内容。 2020-09-09 第3 页 共41 页 Lizzy Chen 陈利君 TC HMI 导入开源控件及FAQ 1.2 导入的开源.js 脚本 把核心代码的.js 文件复制到CodeBehind，并添加现有项： 新建一个JavaScript 的Function 新建引用echarts 的Function 命名为FunctionJS2 ，此时它的.Json 文件也自动建立了： 双击.js 文件，可以看到模板已经自动添加的代码： 2020-09-09 第4 页 共41 页 Lizzy Chen 陈利君 TC HMI 导入开源控件及FAQ 用户代码以后将添加到红线框的位置。 在View 或者Content 的画面上创建一个Contrainer 并在它的Framework 的.onAttach