Question

我试图在用HTML编写的模板节点中更新圆形滑块后发送消息。这是代码：

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>

<script type="text/javascript">
    $("#slider").roundSlider({
    radius: 100,
    width: 14,
    value: 20,
    handleSize: 35,
    startAngle: "315",
    endAngle: "+270",
    //start: "traceEvent",
    //stop: "traceEvent",
    create: "traceEvent",
    drag: "traceEvent"
    });

    function traceEvent(e) {
        var vol = (e.value);
        document.getElementById('volume').value = vol;
        return vol;
    }
    </script>
<style>
    #slider {
     border-radius: 1000px;
     box-shadow: 0px 0px 10px 0px rgb(123, 123, 123);
    }
    .rs-border {
     border-width: 0px;
    }
</style>

基本上我希望函数return vol中的命令traceEvent能够触发消息，但这不起作用。

有什么想法吗？

Answer 1

如果您阅读了ui_template节点信息的一半（在侧边栏中），您会找到以下示例：

发送消息：

<script>
    var value = "hello world";
    // or overwrite value in your callback function ...
    this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})">
    Click me to send a hello world
</md-button>

将显示一个按钮，单击该按钮将发送带有效负载“Hello world”的消息。

根据我的经验，它可能比这更简单 - 取决于您尝试发送回节点红色流的数据。角度scope已经包含send(msg)函数，因此您可以直接从任何角度事件触发（在此示例中，在按钮的ng-click事件上） - 使用plain html {{ 1}}事件对角度范围的访问权限不同。

在您的示例中，不需要包含onclick元素，因为您只构建现有仪表板页面的一部分。如果在角度范围内定义<html>函数，则应该可以从滑块库中调用它（类似这样，未经测试）：

traceEvent(e)

假设滑块“drag”事件将使用包含<script> (function($scope) { function traceEvent(e) { var vol = (e.value); var msg = { "volume": vol }; $scope.send(msg); } })(scope); </script>属性的traceEvent对象调用event，您应该获得通过ui_template节点的输出端口发送的msg，每次滑块改变位置。

顺便提一下，您还应该将外部库链接移动到单独的value节点，其模板类型设置为“添加到网站ui_template部分” - 这有助于确保您尝试在仪表板页面上渲染外部库

Answer 2

假设这是template节点（核心节点）而不是template-ui节点（Dashboard-ui节点集的一部分），您无法使用javascript函数本机触发流。

traceEvent()函数完全在您在远程浏览器的模板节点中创建的页面中运行，它对Node-RED一无所知，它恰好是从那里加载的。

如果要触发操作，最简单的方法是使用另一个http-in / http-response节点对，并从traceEvent()函数中生成ajax样式的http请求。

另一方面，如果您使用template-ui节点作为node-red-dashboard的一部分，则需要使用angular来构建组件，而不是完整的html页面。

Node-Red：如何从HTML模板中的Javascript函数发送消息？

2 个答案: