Node-Red UI_Template 发送消息
Node-Red UI_Template send msg
要通过 Node-Red 仪表板控制我的机器人，我需要某种用于 UI 的操纵杆控制（不是硬件操纵杆）。
幸运的是，我找到了 nippleJS，它完全符合我的要求。我也能够得到它 运行 ui_template node.
现在我卡住了。如何将坐标发送回节点红色节点？我知道我无法访问任何上下文，我只能得到一个 msg 对象。但我无法更改它 (msg undefined)。
这是我目前的流程。要 运行 它，您必须加载 nipplejs 并相应地设置路径。我希望有人能告诉我如何将数据发送回 node-red
[{"id":"ff5f827f.796e","type":"ui_template","z":"9738c4ac.01e748","group":"9550e4e.ea6f618","name":"","order":0,"width":"6","height":"6","format":"\n<script src=\"/myjs/nippleJS/nipplejs.min.js\" ></script>\n\n<div data-type=\"semi\" id=\"zone_joystick\" style=\"position:absolute; width:200px; height:200px; background-color:grey;\"></div>\n\n<script>\n\n\n (function(scope){ \n\n scope.$watch('msg', function(msg) {\n createJoystick();\n \n });\n })(scope);\n\n\nfunction createJoystick(){\n var semi = nipplejs.create({\n zone: document.getElementById('zone_joystick'),\n mode: 'semi',\n catchDistance: 150,\n color: 'white'\n });\n\t\n\n\tsemi.on('move', function(evt, nipple_obj) {\n\t debug(nipple_obj);\n\t});\n\t\n\t}\n\nfunction debug(obj) {\n setTimeout(function() {\n var test = obj.position.x;\n console.log(test);\n }, 0);\n}\t\n\t\n\t\t\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":286,"y":708,"wires":[["17f18c51.494204","3e99bf46.a8532"]]},{"id":"b2219879.075b28","type":"inject","z":"9738c4ac.01e748","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":117,"y":675,"wires":[["ff5f827f.796e"]]},{"id":"17f18c51.494204","type":"ui_text","z":"9738c4ac.01e748","group":"9550e4e.ea6f618","order":0,"width":"3","height":"2","name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":468,"y":736,"wires":[]},{"id":"3e99bf46.a8532","type":"debug","z":"9738c4ac.01e748","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":314,"y":769,"wires":[]},{"id":"9550e4e.ea6f618","type":"ui_group","z":"","name":"Joystick","tab":"ccfc45fa.de7cb8","order":1,"disp":true,"width":"6","collapse":false},{"id":"ccfc45fa.de7cb8","type":"ui_tab","z":"","name":"Bubbles","icon":"dashboard"}]
对于那些不想导入流程的人，这是我使用的脚本。正如您在函数调试中看到的，我可以将值打印到控制台。我需要这个值。
<script src="/myjs/nippleJS/nipplejs.min.js" ></script>
<div data-type="semi" id="zone_joystick" style="position:absolute; width:200px; height:200px; background-color:grey;"></div>
<script>
(function(scope){
scope.$watch('msg', function(msg) {
createJoystick();
});
})(scope);
function createJoystick(){
var semi = nipplejs.create({
zone: document.getElementById('zone_joystick'),
mode: 'semi',
catchDistance: 150,
color: 'white'
});
semi.on('move', function(evt, nipple_obj) {
debug(nipple_obj);
});
}
function debug(obj) {
setTimeout(function() {
var test = obj.position.x;
console.log(test);
}, 0);
}
</script>
谢谢你的支持，帕特里克
scope 对象有一个 send 函数，可用于在运行时从 ui_template 节点发送消息。
您需要构建代码，以便 move 事件的回调在 scope 变量的范围内。例如，将 <script> 块中的代码替换为：
(function(scope){
function createJoystick(){
var semi = nipplejs.create({
zone: document.getElementById('zone_joystick'),
mode: 'semi',
catchDistance: 150,
color: 'white'
});
semi.on('move', function(evt, nipple_obj) {
setTimeout(function() {
var test = obj.position.x;
// use scope.send to trigger a message in the runtime flow
scope.send({payload:test});
}, 0);
});
}
scope.$watch('msg', function(msg) {
createJoystick();
});
})(scope);
以防万一其他人想使用 nippleJS，这是我的工作代码
[{"id":"d1cb92a5.0e9b2","type":"inject","z":"cf477024.84de6","name":"Trigger UI Templates","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":163,"y":209,"wires":[["93a7c595.e3b868","8b092d1b.0e2ed"]]},{"id":"8b092d1b.0e2ed","type":"ui_template","z":"cf477024.84de6","group":"52892a0c.d9c5b4","name":"Joystick","order":0,"width":"6","height":"6","format":"<script src=\"/myjs/nippleJS/nipplejs.min.js\" ></script>\n\n<div data-type=\"dynamic\" id=\"zone_joystick\" style=\"position:absolute; width:200px; height:200px; background-color:grey;\"></div>\n\n<script>\n\n\n(function(scope){ \n\n function createJoystick(){\n var dynamic = nipplejs.create({\n zone: document.getElementById('zone_joystick'),\n mode: 'dynamic',\n catchDistance: 150,\n color: 'white'\n });\n dynamic.on('move', function(evt, nipple_obj) {\n setTimeout(function() {\n var posx = nipple_obj.position.x;\n var posy = nipple_obj.position.y;\n var centerx = nipple_obj.instance.position.x;\n var centery = nipple_obj.instance.position.y;\n // use scope.send to trigger a message in the runtime flow\n scope.send({payload:{x: posx, y:posy, centerx:centerx, centery:centery}});\n }, 0);\n\n });\n }\n\n\n scope.$watch('msg', function(msg) {\n createJoystick();\n\n });\n})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":434,"y":212,"wires":[["65da6852.c65ac8","fbdf3963.9c2858"]]},{"id":"fbdf3963.9c2858","type":"function","z":"cf477024.84de6","name":"","func":"\nvar x = {payload:msg.payload.centerx - msg.payload.x};\nvar y = {payload:msg.payload.centery - msg.payload.y};\n\nreturn [x, y];","outputs":2,"noerr":0,"x":578,"y":216,"wires":[["26f05e22.8d3a12"],["2d78681b.d82be8"]]},{"id":"26f05e22.8d3a12","type":"ui_text","z":"cf477024.84de6","group":"52892a0c.d9c5b4","order":0,"width":"3","height":"1","name":"","label":"X","format":"{{msg.payload}}","layout":"row-spread","x":710,"y":227,"wires":[]},{"id":"2d78681b.d82be8","type":"ui_text","z":"cf477024.84de6","group":"52892a0c.d9c5b4","order":0,"width":"3","height":"2","name":"","label":"Y","format":"{{msg.payload}}","layout":"row-spread","x":719,"y":275,"wires":[]},{"id":"65da6852.c65ac8","type":"debug","z":"cf477024.84de6","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":571,"y":257,"wires":[]},{"id":"52892a0c.d9c5b4","type":"ui_group","z":"","name":"Default","tab":"56c2703a.7a819","disp":true,"width":"6","collapse":false},{"id":"56c2703a.7a819","type":"ui_tab","z":"","name":"Manual","icon":"dashboard"}]
再次感谢 knolleary
要通过 Node-Red 仪表板控制我的机器人，我需要某种用于 UI 的操纵杆控制（不是硬件操纵杆）。
幸运的是，我找到了 nippleJS，它完全符合我的要求。我也能够得到它 运行 ui_template node.
现在我卡住了。如何将坐标发送回节点红色节点？我知道我无法访问任何上下文，我只能得到一个 msg 对象。但我无法更改它 (msg undefined)。
这是我目前的流程。要 运行 它，您必须加载 nipplejs 并相应地设置路径。我希望有人能告诉我如何将数据发送回 node-red
[{"id":"ff5f827f.796e","type":"ui_template","z":"9738c4ac.01e748","group":"9550e4e.ea6f618","name":"","order":0,"width":"6","height":"6","format":"\n<script src=\"/myjs/nippleJS/nipplejs.min.js\" ></script>\n\n<div data-type=\"semi\" id=\"zone_joystick\" style=\"position:absolute; width:200px; height:200px; background-color:grey;\"></div>\n\n<script>\n\n\n (function(scope){ \n\n scope.$watch('msg', function(msg) {\n createJoystick();\n \n });\n })(scope);\n\n\nfunction createJoystick(){\n var semi = nipplejs.create({\n zone: document.getElementById('zone_joystick'),\n mode: 'semi',\n catchDistance: 150,\n color: 'white'\n });\n\t\n\n\tsemi.on('move', function(evt, nipple_obj) {\n\t debug(nipple_obj);\n\t});\n\t\n\t}\n\nfunction debug(obj) {\n setTimeout(function() {\n var test = obj.position.x;\n console.log(test);\n }, 0);\n}\t\n\t\n\t\t\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":286,"y":708,"wires":[["17f18c51.494204","3e99bf46.a8532"]]},{"id":"b2219879.075b28","type":"inject","z":"9738c4ac.01e748","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":117,"y":675,"wires":[["ff5f827f.796e"]]},{"id":"17f18c51.494204","type":"ui_text","z":"9738c4ac.01e748","group":"9550e4e.ea6f618","order":0,"width":"3","height":"2","name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":468,"y":736,"wires":[]},{"id":"3e99bf46.a8532","type":"debug","z":"9738c4ac.01e748","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":314,"y":769,"wires":[]},{"id":"9550e4e.ea6f618","type":"ui_group","z":"","name":"Joystick","tab":"ccfc45fa.de7cb8","order":1,"disp":true,"width":"6","collapse":false},{"id":"ccfc45fa.de7cb8","type":"ui_tab","z":"","name":"Bubbles","icon":"dashboard"}]
对于那些不想导入流程的人，这是我使用的脚本。正如您在函数调试中看到的，我可以将值打印到控制台。我需要这个值。
<script src="/myjs/nippleJS/nipplejs.min.js" ></script>
<div data-type="semi" id="zone_joystick" style="position:absolute; width:200px; height:200px; background-color:grey;"></div>
<script>
(function(scope){
scope.$watch('msg', function(msg) {
createJoystick();
});
})(scope);
function createJoystick(){
var semi = nipplejs.create({
zone: document.getElementById('zone_joystick'),
mode: 'semi',
catchDistance: 150,
color: 'white'
});
semi.on('move', function(evt, nipple_obj) {
debug(nipple_obj);
});
}
function debug(obj) {
setTimeout(function() {
var test = obj.position.x;
console.log(test);
}, 0);
}
</script>
谢谢你的支持，帕特里克
scope 对象有一个 send 函数，可用于在运行时从 ui_template 节点发送消息。
您需要构建代码，以便 move 事件的回调在 scope 变量的范围内。例如，将 <script> 块中的代码替换为：
(function(scope){
function createJoystick(){
var semi = nipplejs.create({
zone: document.getElementById('zone_joystick'),
mode: 'semi',
catchDistance: 150,
color: 'white'
});
semi.on('move', function(evt, nipple_obj) {
setTimeout(function() {
var test = obj.position.x;
// use scope.send to trigger a message in the runtime flow
scope.send({payload:test});
}, 0);
});
}
scope.$watch('msg', function(msg) {
createJoystick();
});
})(scope);
以防万一其他人想使用 nippleJS，这是我的工作代码
[{"id":"d1cb92a5.0e9b2","type":"inject","z":"cf477024.84de6","name":"Trigger UI Templates","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":163,"y":209,"wires":[["93a7c595.e3b868","8b092d1b.0e2ed"]]},{"id":"8b092d1b.0e2ed","type":"ui_template","z":"cf477024.84de6","group":"52892a0c.d9c5b4","name":"Joystick","order":0,"width":"6","height":"6","format":"<script src=\"/myjs/nippleJS/nipplejs.min.js\" ></script>\n\n<div data-type=\"dynamic\" id=\"zone_joystick\" style=\"position:absolute; width:200px; height:200px; background-color:grey;\"></div>\n\n<script>\n\n\n(function(scope){ \n\n function createJoystick(){\n var dynamic = nipplejs.create({\n zone: document.getElementById('zone_joystick'),\n mode: 'dynamic',\n catchDistance: 150,\n color: 'white'\n });\n dynamic.on('move', function(evt, nipple_obj) {\n setTimeout(function() {\n var posx = nipple_obj.position.x;\n var posy = nipple_obj.position.y;\n var centerx = nipple_obj.instance.position.x;\n var centery = nipple_obj.instance.position.y;\n // use scope.send to trigger a message in the runtime flow\n scope.send({payload:{x: posx, y:posy, centerx:centerx, centery:centery}});\n }, 0);\n\n });\n }\n\n\n scope.$watch('msg', function(msg) {\n createJoystick();\n\n });\n})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":434,"y":212,"wires":[["65da6852.c65ac8","fbdf3963.9c2858"]]},{"id":"fbdf3963.9c2858","type":"function","z":"cf477024.84de6","name":"","func":"\nvar x = {payload:msg.payload.centerx - msg.payload.x};\nvar y = {payload:msg.payload.centery - msg.payload.y};\n\nreturn [x, y];","outputs":2,"noerr":0,"x":578,"y":216,"wires":[["26f05e22.8d3a12"],["2d78681b.d82be8"]]},{"id":"26f05e22.8d3a12","type":"ui_text","z":"cf477024.84de6","group":"52892a0c.d9c5b4","order":0,"width":"3","height":"1","name":"","label":"X","format":"{{msg.payload}}","layout":"row-spread","x":710,"y":227,"wires":[]},{"id":"2d78681b.d82be8","type":"ui_text","z":"cf477024.84de6","group":"52892a0c.d9c5b4","order":0,"width":"3","height":"2","name":"","label":"Y","format":"{{msg.payload}}","layout":"row-spread","x":719,"y":275,"wires":[]},{"id":"65da6852.c65ac8","type":"debug","z":"cf477024.84de6","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":571,"y":257,"wires":[]},{"id":"52892a0c.d9c5b4","type":"ui_group","z":"","name":"Default","tab":"56c2703a.7a819","disp":true,"width":"6","collapse":false},{"id":"56c2703a.7a819","type":"ui_tab","z":"","name":"Manual","icon":"dashboard"}]
再次感谢 knolleary