0

我在 twincat 的 HMI HTMLhost 中使用 了状态指示器Web 组件。

我创建了 HTMLhost 并将这些行添加到脚本中：

       <style>
        @import 'status-indicator';
        </style>

        <div class="indicator">
            <status-indicator positive></status-indicator>
        </div>

        <style>
            .indicator {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>

它看起来像这样： HTMLhost 中的状态指示器

我还在参数中创建了一个 BOOL 值，以将 PLC 的状态从激活更改为停用，如下所示：

用于更改状态的 BOOL 变量

问题是我不知道如何链接<status-indicator positive></status-indicator>到那个 BOOL 参数，所以它可以用来从 PLC 改变它的状态？

感谢您的帮助，在此先感谢。

4

1 回答 1

0

我不是最好的解释者，这很复杂，如果您需要，请询问更多。

我知道 2 种方法来完成您想要的，只有 1 种适用于这种情况，因为您正在创建用户控件

两者都以; （在您的情况下绑定 Status-BOOL 而不是我的 PLC1.Calling_Sys），但如果您正在使用 userControl，您应该将此附件添加到 .userControl 而不是在 .Content 内部，因此它始终在您的 UserControl 中准备就绪。此外，如果 .userControl 您不应该直接附加 Status-BOOL（除非您知道它总是相同的 BOOL），而是在其 JSON 文件中为 userControl 创建一个可绑定参数。

在控件对象的 Lightning 菜单中附加符号以执行操作（更改时）

然后通过按笔编辑操作，在操作和条件编辑器中，您可以选择 JavaScript 并通过代码 $("#idNameinTwincatHere") 的 ID 名称引用您的控制对象（在您的情况下为 HTMLHost）

在此处输入图像描述

有了这个，你可以像处理任何 HTML DOM 对象一样做任何事情，在你的例子中，<status-indicator positive></status-indicator>我认为这将是 $("#idName").children[0].children[0]，所以继续挖掘 DOM 对象console.log 看看你想要什么。看起来你知道一些 HTML 的东西，所以我不打算在这里更深入。

但是由于您正在创建一个用户控件，所以这个方便的方法这次将不起作用，因为您的最终 ID 将与您为 .content 文件中的用户控件实例应用的 ID 相关。我只是把它放在那里，因为我知道的另一种方式更难。

另一种方法：

创建一个新函数 在此处输入图像描述

让它成为 JavaScript 在此处输入图像描述

编辑 JSON 文件 在此处输入图像描述

创建 Control 类型的参数 在此处输入图像描述

现在，在操作和条件编辑器中，不要选择 JavaScript，而是选择您的函数，并创建控件类型的数据绑定或从下拉列表中选择您的控件对象。只需确保它是用户控件中的 ID，而不是引用 .content 中的用户控件实例，当然，事件（您的状态符号）是 userControl JSON 中的可绑定符号或布尔参数，并且然后将该参数附加到动作触发器，如图 1 所示。 在此处输入图像描述

现在在函数内部，您可以使用 JavaScript 操作正向输入和输出。

最后一句话：使用 Twincat HMI 中提供的工具来做这种事情（状态指示器椭圆）要容易得多，只需创建 Ellipse，如上所示将 BOOL-Status 附加到 Action 绑定，然后从 Action 菜单选择条件，真 - >附加椭圆的填充颜色并为真选择颜色，为假选择相同的颜色，完成。如果你想让椭圆看起来更酷，你可以为椭圆创建 box-shadow。如果需要，您甚至可以附加类来执行一些 CSS 魔术，例如转换，但这是另一个主题。因此，在我看来，您尝试做的事情对于 HTML Host 是不明智的。

于 2021-01-13T09:44:54.003 回答