推荐的开发流程

演示控件作为模板

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

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

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

测试 HTML5 控件的功能

我们建议您首先在 HTML 演示页面上测试您的 HTML5 控件。HTML5 控件可以在浏览器中显示，无需 ElementWrapper 脚本和功能可以测试。你开始创建 JavaScript 文件 (ElementWrapper.js) 仅在成功测试功能之后。

注意

对于 CODESYS Visualization V4.8.0.0 及更高版本，JS 文件 ElementWrapper 在创建新的 HTML5 控件时自动创建。它仅包含框架。必须在下一步中添加特定元素的功能

创建 HTML 页面 TestControl.html 无需额外安装即可测试脚本 CODESYS。

HTML 页面的结构

<!DOCTYPE html>
<html>
    <head>
        <title>MyTestControl Test Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <meta name='HandheldFriendly' content='True' />
        <meta name='MobileOptimized' content='480' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='theme-color' content='#2f434e' />
        <meta http-equiv='cleartype' content='on' />
        <scripttype='text/javascript' src='ElementWrapper.js'> </script>
    </head>
    <body>
        <script>
            var wrapper = new MyTestControlElementWrapper();
            (function loop() {
                var testValue = Math.random() * 100;  
                wrapper.setText(testValue + "");      
                wrapper.setColor("#0079FF");       
                window.setTimeout(loop, 4000);     
            })();    
        </script>    
    </body>
</html>

包括其他文件 (JavaScript 此测试页中 HTML5 控件的文件或样式表文件）。这些文件负责布局或提供其他功能。
这相当于导入脚本以使源代码可用。
代码示例
```
<link rel="stylesheet" href="gauge.css" />
<script type="text/javascript" src="gauge.js"> </script>
```
可以将其插入以下行的上方：
```
<script type="text/javascript" src="ElementWrapper.js"> 
 </script> 
```
显示元素（没有 ElementWrapper) 在浏览器中测试功能。
成功完成测试后，您可以开始创建 JavaScript 文件 (ElementWrapper.js）。

创建 `ElementWrapper`

编程 ElementWrapper 脚本。

示例代码创建了一个带有文本和颜色的按钮。大小设置为 100%，因为 HTML5 控件可以完全填充框架创建的空间。此外，一个 IFrame 是为每个 HTML5 控件创建的。因此，可以直接将 HTML5 控件添加到 document.body。

示例代码

var MyTestControlElementWrapper;

(function ()
{
    MyTestControlElementWrapper = function()
    {
        this.domNode = document.createElement("div");
        this.domNode.className = "button";
        this.domNode.style.width = "100%";
        this.domNode.style.height = "100%";
        this.domNode.style.overflow = "visible";
        this.domNode.style.backgroundColor = "#0079FF";

        document.body.appendChild(this.domNode);
     };
    
    MyTestControlElementWrapper.prototype =
    {
        setText:function(value)
        {
            this.domNode.innerHTML = value;
        },

        setColor: function(value)
        {
        this.domNode.style.backgroundColor = value;
        },
    };
})();

您可以使用 HTML 页面实例化和显示 HTML5 控件 Test.html 还有 ElementWrapper 脚本。
您还可以在中测试各个方法 ElementWrapper 使用 loop 通过计时器启动的函数。
这个 ElementWrapper 脚本提供了功能。

创建 HTML5 控件

您现在可以创建 HTML5 控件。HTML5 控制编辑器可以帮助你解决这个问题。
1. 在一般的选项卡，配置新元素。
2. 在控件属性选项卡，指定所需的属性。
3. 创建类型的新属性变量。方法调用列，指定所需的方法名称。
  这就是将变量传递给控制方法的方式。
  提示
  为了熟悉这些功能，在 HTML5 控制编辑器中打开示例会很有帮助。
  有关更多信息，请参阅：参考：HTML5 控件编辑器
4. 在本土化选项卡，本地化各种语言的控件界面文本。
  文本已本地化。该元素可以本地化为不同的语言。
5. 将您的配置保存在控件名称下并将其安装在 CODESYS 可视化元素存储库。
  为此，请使用命令图标。
  有关更多信息，请参阅：首次安装 HTML5 控件
您现在可以在可视化中使用 HTML5 控件。

使用 HTML5 控件

创建一个 CODESYS 使用可视化项目并将新元素拖到可视化编辑器中。
配置元素属性并分配新控件应显示的变量。
编译并启动应用程序。然后在 WebVisu 上开始可视化
他们可以在在线模式下监控您的可视化。

调试 HTML5 控件

下一节介绍如何检查 HTML5 控件在浏览器中是否存在错误。

要启用该功能，您需要使用调试参数调用 URL DebugHTML5=true:

http://localhost:8080/webvisu.htm?CFG_DebugHTML5=true

过程. 在浏览器中调试

浏览器中右键单击该页面。选择”检查“打开的快捷菜单中的选项。
这个 DevTools 浏览器页面打开。
点击资料来源选项卡。
在 Sources 选项卡上，您会发现文件 elementwrapper<index>.js所在的树形结构。索引会自动附加到文件名中，以确保控制器上的唯一性。
该文件保存在运行时系统中的 PlcLogic/visu 文件夹。
实施和测试错误修复的最快方法是对存储在运行时系统中的文件进行必要的更改。
1. 更改 ElementWrapper 用于调试的文件。
2. 选择重新加载浏览器中的选项。
  该元素已更新，可以进行测试。
3. 提示
  建议启动本地 CODESYS Control 作为运行时间。运行时在您自己的计算机上本地运行。这允许您在资源管理器中打开运行时系统文件夹，并使用外部文本编辑器打开和编辑 JavaScript。
  elementwrapper<index>.js
4. 在构造函数或方法中设置断点，以便在浏览器中调试功能。你应该熟悉这方面的调试选项。
错误已被识别并更正。测试元素现在可以正常运行了。
将测试 JavaScript elementwrapper<index>.js 中的更改转移到原始 ElementWrapper.js 文件中。
再次安装 HTML5 控件。
这些更改已生效。该元素的行为相应地

示例

下面链接的页面提供了与 HTML5 控件相关的各种功能和特性的示例。

注意

示例项目： HTML5 API

以下开发者参考资料中描述了所使用的 API 调用：

参考：HTML5控件开发

本节内容如下: