个人中心
gpt4 book ai didi

javascript - 在node-red中使用msg.payload运行javascript函数

转载 作者：行者123 更新时间：2023-12-02 21:36:05 25 4
gpt4 key购买 nike

我在node-red的模板节点内有一段javascript代码，这段代码是一个简单的进度条。在 html 代码的按钮上运行 javascript 函数非常容易，但我想在 payload 到达时运行代码...然后我想发送一个新的 有效负载当宽度等于95...

我的想法是运行这段代码: msg.payload === 0 ? move() : '' 当我的 payload 等于 0 时运行 move()。但我不知道在哪里写它。

然后，当 witdh 等于 95 时，我尝试将值 1 分配给我的 payload 但不起作用...肯定我没有使用好的语法..有点失去与交互的能力此 template 节点为节点红色。

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 100%;
  height: 30px;
  background-color: #4CAF50;
}
</style>
<body>

<h1>JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"> </div>
</div>
  <p id="msg">  </p>

  <button onclick="move()">Click Me</button> 

<br>


<script>
var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var message = document.getElementById("msg");
    var width = 100;
    var id = setInterval(frame, 100);
    function frame() {
      if (width <= 0) {
        clearInterval(id);
        i = 0;
      } else {
        width = width - 1;
        elem.style.width = width + "%";
        elem.textContent = width;
        if (width == 95) {
            message.textContent = "forcez";
            {payload: 1};

        }

      }
    }
  }
}
</script>

</body>

最佳答案

也许您已经知道这一点，但让我在这里重复一遍，因为很多人不知道或已经忘记了。

您的 Node-RED 流程作为 Node.js 应用程序在服务器(后端)中运行。

脚本标签内的 JavaScript 代码在浏览器中运行。

浏览器中的代码无法直接从运行时的 ui_template 读取消息或向 ui_template 发送消息。

(a) 从运行时向浏览器中运行的代码发送消息。

解决方案是将您的函数包装在该函数周围:

(function(scope){
     scope.$watch('msg',function(){
          ...
   })
})(scope)

(b) 将对象从浏览器中运行的代码发送到运行时。

范围对象有一个发送函数，可用于在运行时内从 ui_template 节点发送消息。

您想使用以下语句:scope.send(msg)，例如:scope.send({topic : "topic", payload : "payload"})

根据您的具体情况，您需要将这些行添加到 ui_template 中的代码中

<script>
(function(scope) {
    // $watch fires each time the node is triggered in the flow
    scope.$watch('msg', function(msg) {
            if (msg.payload == 0) {
                move();
            }
        });

.............

})(scope);
</script>

还有

 if (width == 95) {
    message.textContent = "forcez";
    scope.send({payload:"warning: width 95"});

 }

您的 sample 流程可能需要进行一些其他更改，例如一种保护措施，以避免当 ui_template 仍在倒计时时收到新的有效负载时它运行两次。

这里尝试在示例代码中实现这些更改:

[{"id":"dba00648.b7f6d8","type":"tab","label":"Flow 12","disabled":false,"info":""},{"id":"4cc372c7.58d5ac","type":"ui_template","z":"dba00648.b7f6d8","group":"5af14c6e.d86604","name":"","order":5,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<style>\n#myProgress {\n width: 100%;\n background-color: #ddd;\n}\n\n#myBar {\n width: 100%;\n height: 30px;\n background-color: #4CAF50;\n}\n</style>\n<body>\n\n\n<div id=\"myProgress\">\n <div id=\"myBar\"> </div>\n</div>\n <p id=\"msg\"> {{msg.payload}} </p>\n \n\n\n<br>\n\n\n<script>\n\n(function(scope) {\n    // $watch fires each time the node is triggered in the flow\n    scope.$watch('msg', function(msg) {\n            if (msg.payload == 0) {\n                move();\n            }\n        });\n\nvar i = 0;\nfunction move() {\n if (i == 0) {\n i = 1;\n var elem = document.getElementById(\"myBar\");\n var message = document.getElementById(\"msg\");\n message.textContent = \"start\";\n var width = 100;\n var id = setInterval(frame, 100);\n \n function frame() {\n if (width <= 0) {\n clearInterval(id);\n i = 0;\n } else {\n width = width - 1;\n elem.style.width = width + \"%\";\n elem.textContent = width;\n if (width == 95) {\n \tmessage.textContent = \"forcez\";\n \tscope.send({payload:\"warning: width 95\"});\n \n }\n \n }\n }\n }\n}\n\n})(scope);\n</script>\n\n</body>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":240,"wires":[["9779fd5e.1d736"]]},{"id":"9779fd5e.1d736","type":"debug","z":"dba00648.b7f6d8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":610,"y":240,"wires":[]},{"id":"dde1582.3b84ca8","type":"inject","z":"dba00648.b7f6d8","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":240,"wires":[["4cc372c7.58d5ac"]]},{"id":"72ccb344.ed011c","type":"inject","z":"dba00648.b7f6d8","name":"","topic":"","payload":"1","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":270,"y":280,"wires":[["4cc372c7.58d5ac"]]},{"id":"5af14c6e.d86604","type":"ui_group","z":"","name":"Compte à rebours","tab":"7560e5e8.ee7dfc","order":3,"disp":true,"width":"6","collapse":false},{"id":"7560e5e8.ee7dfc","type":"ui_tab","z":"","name":"Préhension SELFIT","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

引用文献:

https://flows.nodered.org/flow/2f1aaf0635f9bf23207152682323240a

How to store a msg.payload into a script variable inside a ui_template node red?

关于javascript - 在node-red中使用msg.payload运行javascript函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60491599/

25 4 0
文章推荐： javascript - Vue方法没有返回值
文章推荐： javascript - 同时加载多个图像
文章推荐： javascript - 如何并排排序 html javascript 明信片？
文章推荐： javascript - R 中 Shiny 的 STRING 交互网络
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com