为分布式告警管理创建用户界面 您可以在 HMI 设备上创建具有分布式报警管理的应用程序。分布式告警管理是指本地设备发生的告警和网络内设备发生的告警都集中处理。报警信息通过数据源连接进行交换，每个数据源连接都由代理服务器扩展。对于警报信息，您可以创建一个可视化，将网络中的所有警报显示在单个警报元素中。这允许用户在一个警报元素中以清晰组织的可视化方式从中央位置监控网络中的所有设备。 以下部分将逐步描述

开发 HTML5 控件 . 一般的 可以显示 HTML5 控件 只要 上 CODESYS WebVisu s。 如果带有 HTML5 控件的可视化应该在 CODESYS TargetVisu 例如，然后发出警告。 HTML5 控件不在那里显示。 使用 HTML5 控件需要启用覆盖功能。 因此，在可视化管理器中，选择 支持客户端动画和原生元素叠加 选项。否则会发出错误。 有关详细信息，请参阅： 可视

基本程序 您可以在 CODESYS 开发环境。 过程 . 准备 创建 JavaScript 包装器文件 ElementWrapper.js 为控制。 指定运行元素所需的任何文件，例如样式文件 (CSS)、JavaScript 文件 (JS) 或图像文件 (SVG)。 创建元素图像 ElementImage.svg 显示在工具箱中。 过程 . 集成到编程系统中 在 CODESYS , 创建一个 XM

显示信息 在可视化元素存储库中，您可以获得有关项目中安装的元素的信息。如果有疑问，您可以查询签名和卸载元素的状态。 本节内容如下 :

使用没有有效签名的元素 如果没有签名、证书无效或时间戳无效的 HTML5 控件是可视化的一部分，则在生成应用程序代码时，消息视图中会显示一条警告。 在消息视图中， 此警告后显示按钮。单击该按钮时，将显示输入提示。在那里，您可以将被警告的元素设置为在项目中“接受”。然后这个元素将不再被检查，你也不会再收到任何关于它的警告。 本节内容如下 :

链接和使用 HTML5 控件 您可以将 HTML5 控件直接安装到可视化元素存储库中。 可以将 HTML5 控件添加到存储库，以便可以分发包含所有必要内容的项目。 提示 HTML5 控件通常以包的形式提供。然后在包管理器中执行初始安装。 过程 . 首次安装 HTML5 控件 点击 工具 → 可视化元素存储库 . 提示 该命令仅在没有打开项目时可用 CODESYS . 这 视觉元素库 对话框打开。

查看图像文件 注意 HTML5 控件示例 以下选项可用于从 HTML5 控件访问图像。 参考 描述 来自 JavaScript 代码中引用的静态图像 附加文件 该图像在 HTML5 控件编辑器中引用，位于 一般的 选项卡，在 附加文件 场地。 在脚本代码中，实际文件名是通过使用 API “ CDSWebVisuAccess.getAdditionalFile "。然后可以将图像集成到控件中。 来自

可视化元素：选项卡 象征： 类别： 常用控件 该元素在选项卡中显示选定的可视化。可以通过选项卡标题使用选项卡，而无需配置输入配置。可视化用户通过单击选项卡标题在可视化之间切换。 元素属性 所有元素属性都可用吗？ 仅当您选择 先进的 选项或 所有类别 过滤 特性 。 元素名称 例子： Assembly A 通过分配您自己的元素名称，可以在元素列表中快速找到元素。 元素类型 标签 标签宽度 选项卡的宽

可视化元素：按钮 象征： 类别： 常用控件 该元素触发一个动作，例如设置一个变量。 注意 关于带有图像的按钮的示例项目 元素属性 所有元素属性都可用吗？ 仅当您选择 先进的 选项或 所有类别 过滤 特性 。 元素名称 例子： Voltage_on 提示 为元素分配单独的名称，以便在元素列表中更快地找到它们。 元素类型 按钮 位置 该位置定义可视化窗口中元素的位置和大小。这是基于笛卡尔坐标系的。原点

可视化元素：组框 象征： 类别： 常用控件 该元素提供可视化元素的可视化分组。组框可以有多层嵌套。 提示 您还可以使用拖动元素将它们添加到 组框 .为此，请将元素拖到 组框 .光标的外观发生变化（显示一个小加号）。当您单击 转移 key 的同时，不添加元素。 您可以从 组框 通过将它们拖出窗口区域。 元素属性 所有元素属性都可用吗？ 仅当您选择 先进的 选项或 所有类别 过滤 特性 。 元素名称