Skip to main content

基本程序

演示控件作为模板

将 HTML5 API 示例下载到您的计算机上。然后是带有元素包装器的演示控 JavaScript 可供您使用。

我们建议使用副本 ElementWrapper.js 从 HTML5 示例中作为模板，并根据您的 HTML5 控件调整名称和功能。

有关更多信息，请参阅 示例：HTML5-API

您可以将自己开发或从外部来源获取的 HTML5 控件集成到您的 CODESYS 编程系统。为此，请按以下步骤操作。

过程. 准备

  1. 创建一个 JavaScript 文件名为 ElementWrapper.js 用于您的 HTML5 控制。或者从 HTML5 API 示例中复制元素包装文件（例如，的 JS 文件 HTML5DemoButton 元素）。

  2. 重命名 JS 文件中的包装器对象。该名称是预定义的，由元素名称组成 ElementWrapper 添加到其中。

    重要

    文件名必须始终为 ElementWrapper.js。其中的包装器对象调用由框架在运行时生成，需要根据以下逻辑为元素分配一个名称

    <element name>ElementWrapper

    在元素的 JS 文件中，包装器对象的名称与新控件相匹配。

    以下代码段显示了这一点 HTML5DemoButton 控制：

    var HTML5DemoButtonElementWrapper;
HTML5DemoButtonElementWrapper = function(idGenerator)
…

  3. 指定运行该元素所需的所有文件。这些可以是样式表文件 (CSS) JavaScript 文件 (JS) 或图像文件 (SVG)。

  4. 创建元素图像 (ElementImage.svg）。安装后，该元素将显示在 可视化工具箱 观点。

过程. 集成到编程系统中

  1. 创建 XML 文件 (.html5control.xml) 包含一般信息。这个 HTML5 控制编辑器 可以帮助你解决这个问题。

    提示

    HTML5 控制编辑器的选项在章节中介绍”HTML5 控件编辑器“。

  2. 创建 HTML5 控件的属性到 CODESYS 可视化元素属性。

  3. 本地化界面文本。

  4. 安装该元素。

  5. 对元素进行签名。

提示

按照分步说明进行操作 推荐的开发流程 并附有详细的调试建议。

本节内容如下: